echart 折线图拖拽节点_echarts实现折线图拖拽改变节点-优快云博客

本文链接：https://blog.youkuaiyun.com/nuoyuezuo/article/details/131634350

该代码示例展示了如何利用Echarts库创建一个可拖动的数据点的线性图表。通过JavaScript动态生成数据，设置图表选项，包括X轴和Y轴的范围，以及自定义提示框和图形元素。用户可以拖动数据点并实时更新图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">
 
    var symbolSize = 20;
    //var data = [[15, 0], [25, 10], [35, 20], [45, 30], [55, 40]];
 
    var data=new Array();
 
    //随机生成数据
    for(var k=0;k<100;k++){
 
       var itemdata=new Array();
       itemdata.push(k*10);
       itemdata.push(20);
 
       data.push(itemdata);
    }
 
    var myChart = echarts.init(document.getElementById('main'));
   // 定义折线路径颜色
    var color = 'rgba(135, 206, 250, 0.7)';
    myChart.setOption({
        tooltip: {
            triggerOn: 'none',
            formatter: function (params) {
                return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
            }
        },
        xAxis: {
            min: 0,
            max: 200,
            type: 'value',
            axisLine: {onZero: false}
        },
        yAxis: {
            min: 0,
            max: 100,
            type: 'value',
            axisLine: {onZero: false}
        },
        series: [
        {
          id: 'a',
          type: 'line',
          data: data,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: color },
                { offset: 1, color: color.replace("0.7", "0") }
              ]
            }
          },
          markPoint: {
            data: [],
            symbol: true,
            symbolSize: symbolSize,
            draggable: true,
            label: {
              formatter: function (param) {
                return 'y: ' + param.value[1];
              }
            },
            emphasis: {
              label: {
                show: true
              }
            },
            valueIndex: 1
          }
        }
      ]
    });
 
    myChart.setOption({
        graphic: echarts.util.map(data, function (item, dataIndex) {
            return {
                type: 'circle',
                position: myChart.convertToPixel('grid', item),
                shape: {
                    r: symbolSize / 2
                },
                invisible: true,
                draggable: true,
                ondrag: echarts.util.curry(onPointDragging, dataIndex),
                onmousemove: echarts.util.curry(showTooltip, dataIndex),
                onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                z: 100
            };
        })
    });
 
    window.addEventListener('resize', function () {
        myChart.setOption({
            graphic: echarts.util.map(data, function (item, dataIndex) {
                return {
                    position: myChart.convertToPixel('grid', item)
                };
            })
        });
    });
 
    function showTooltip(dataIndex) {
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: dataIndex
        });
    }
 
    function hideTooltip(dataIndex) {
        myChart.dispatchAction({
            type: 'hideTip'
        });
    }
 
    function onPointDragging(dataIndex, dx, dy) {
        // console.log(this.position);
        //让X轴保持不变
        var x=data[dataIndex][0];//去掉这个相关的就是X,Y都变了
        data[dataIndex] = myChart.convertFromPixel('grid', this.position);
        data[dataIndex][0]=x;
        //console.log(data);
        myChart.setOption({
            series: [{
                id: 'a',
                data: data
            }]
        });
    }

    // function onmousemove(dataIndex) {
    //   var nodePosition = myChart.convertToPixel('grid', data[dataIndex]);
    //   var mousePosition = myChart.getDom().getBoundingClientRect();

    //   var distanceThreshold = 30;  // 距离阈值，可以根据需要进行调整

    //   if (Math.abs(mousePosition.clientX - nodePosition[0]) <= distanceThreshold &&
    //       Math.abs(mousePosition.clientY - nodePosition[1]) <= distanceThreshold) {
    //     myChart.dispatchAction({
    //       type: 'showTip',
    //       seriesIndex: 0,
    //       dataIndex: dataIndex
    //     });
    //   } else {
    //     myChart.dispatchAction({
    //       type: 'hideTip'
    //     });
    //   }
    // }
 
</script>
</body>
</html>