echats鼠标滑动,连续修改点的位置

定义图表

 myChart.value = markRaw(echarts.init(document.getElementById("theEcharts")));
 myChart.value.setOption(options.value);

监听鼠标按下,监听鼠标移动,监听鼠标抬起

    // 加条件判断,按下后滑动才能改变图表
    let etype = 0
    myChart.value.getZr().on('mousedown', ()=>{
      etype=1
    })
    myChart.value.getZr().on( 'mousemove',function(params){
      if(etype){
        const data = myChart.value.convertFromPixel('grid', [params.offsetX, params.offsetY])
        if(timearr.includes(data[0])){
          options.value.series[1].data[data[0]]=data;
            tableData1.value.forEach((e, i) => {
              if(data[0] == i){
                e.q = Number(data[1].toFixed(1))
              }
            })
          myChart.value.setOption(options.value);
        }
      }
    })
    myChart.value.getZr().on('mouseup', ()=>{
      etype=0
    })

  可实现鼠标联系滑动修改图表点的位置

 文笔不好,自己做记录用的,有需要的可以拿去用

posted @ 2024-08-21 11:15  小样459  阅读(49)  评论(0)    收藏  举报