美文网首页
Echarts折线拖拽调整节点

Echarts折线拖拽调整节点

作者: 走码人 | 来源:发表于2024-01-17 09:11 被阅读0次

参考官网的拖拽的描述

https://echarts.apache.org/handbook/zh/how-to/interaction/drag/#%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD

进行了微调，锁定了x轴，仅在有轴方向移动节点

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="../dist/echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <script src="lib/jquery.min.js"></script>
    <script type="text/javascript">
        $(function (){
      const myChart = echarts.init($("#container")[0]);
 
      const symbolSize = 20;
      const data = [
        // [40, -10],
        // [-30, -5],
        // [-76.5, 20],
        // [-63.5, 40],
        // [-22.1, 50]
      ];

      for(i=0;i<96;i++){
        data.push([i,Math.floor(Math.random() * 100) + 30])
      }
 
      myChart.setOption({
        title: {
          text: '节点拖拽',
          left: 'center',
          textStyle: {
            color: '#826'
          }
        },
        tooltip: {
          triggerOn: 'none',
          formatter: function (params) {
            return (
                    'X: ' +
                    params.data[0].toFixed(2) +
                    '<br>Y: ' +
                    params.data[1].toFixed(2)
            );
          }
        },
        grid: {
          top: '8%',
          bottom: '12%'
        },
        dataset:{
          source: data
        },
        xAxis: {
          min: 0,
          max: 96,
          type: 'value',
          axisLine: { onZero: false }
        },
        yAxis: {
          min: 0,
          max: 160,
          type: 'value',
          axisLine: { onZero: false }
        },
        // dataZoom: [
        //   {
        //     type: 'slider',
        //     xAxisIndex: 0,
        //     filterMode: 'none'
        //   },
        //   {
        //     type: 'slider',
        //     yAxisIndex: 0,
        //     filterMode: 'none'
        //   }
        // ],
        series: [
          {
            id: 'a',
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
          }
        ]
      });
 
      setTimeout(function () {
        myChart.setOption({
          graphic: echarts.util.map(data, function (dataItem, dataIndex) {
                                            //使用graphic组件，在每个点上覆盖一个可拖拽的圆点
            return {
              type: 'circle',               //每个数据节点都是一个圆点
              shape: { r: symbolSize / 2},  //圆点半径
              position: myChart.convertToPixel('grid', dataItem), //圆点位置
              invisible: true,              //若为false，则为实心圆；为true，则为空心圆
              draggable: true,              //表示节点可拖拽
              ondrag: echarts.util.curry(onPointDragging, dataIndex),   //节点拖拽，修改series数据
              onmousemove: echarts.util.curry(showTooltip, dataIndex),  //鼠标移入，显示提示框
              onmouseout: echarts.util.curry(hideTooltip),              //鼠标移出，隐藏提示框
              z: 100
            };
          })
        })
      }, 0);
 
      window.addEventListener('resize', updatePosition);  //窗口大小改变时，调整节点位置
      myChart.on('dataZoom', updatePosition);             //容器大小改变时，调整节点位置
      function updatePosition() {          //调整节点位置
        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() {              //隐藏提示框
        myChart.dispatchAction({
          type: 'hideTip'
        });
      }
 
      function onPointDragging(dataIndex) {  //节点拖拽
        //记录拖拽之前的位置
        oldPoint =data[dataIndex]
        newPoint = myChart.convertFromPixel('grid', this.position);
        //x轴方向锁定,去掉此锁定会有意想不到的效果
        newPoint[0]=oldPoint[0]
        
        data[dataIndex] =newPoint
 
        myChart.setOption({
          series: [
            {
              id: 'a',
              data: data
            }
          ]
        });

        $("#lineData").text()
      }
    })
      </script>
 
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="container" style="width: 100%;height:400px;"></div>
    <textarea id="lineData">

    </textarea>
    </body>
    </html>

相关文章