echarts折线图 上下拖动数据怎么做？

又是你，再给你个官方例子 https://echarts.apache.org/ex...

这是我之前做的相关功能，是柱状图，你可以参考下，里面很多东西你应该用不到，你自己精简下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      html, body{
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
      }
       #m-chart{
           margin: 10px;
           width: 800px;
           height: 800px;
       }
  </style>
</head>
<body>
    <div id="m-chart" class="charts"></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://lib.baomitu.com/echarts/5.1.2/echarts.common.min.js"></script>
<script>
    let myChart = echarts.init(document.getElementById('m-chart'));
    let symbolSize = 20;
    let originData = [25, 25, 25, 25];
    let xAxis = ['08时-14时', '14时-20时', '20时-02时', '02时-08时']
    let ratioData = originData.map((item, index) => {
    return {
      name: xAxis[index],
      value: item
    }
  })
    let activeRatioData
    
    setCharts();
    
    function setCharts(){
      let option = {
        grid:{ 
          left: '5%', 
          top: '10%', 
          right: '5%', 
          bottom: '7%'
        },
        xAxis: {
          type: 'category', // 'category' 'value'
          name: '时程',
          data: xAxis,
          splitLine: {
            show: false
          }
        },
        yAxis: {
          min: 0,
          max: 100,
          interval: 10,
          type: 'value',
          name: '比例(%)'
        },
        series: [
          {
            id: 'scfp',
            type: 'bar',
            //smooth: true,
            //symbolSize: symbolSize,
            data: [],
            label: {
              normal: {
                show: true,
                color: '#fff',
                fontWeight: 'bold',
                fontSize: 16,
                position: 'inside', //insideTop inside [50%', '50%'] 'top'
                //offset: [0, 10]
              }
            },
            markPoint: {
              symbol: 'circle',
              symbolSize: symbolSize,
              itemStyle: {
                normal: {
                  color: '#00f'
                }
              },
              silent: true,
              animation: false,
              data: [],
            }
          }
        ]
      };
      myChart.setOption(option);
    
      setOptionData()
    
      setTimeout(setGraphic, 0);
    }
    
    function setOptionData(){
      let data = ratioData.map(item => {
        return {
          name: item.name,
          value: item.value,
          itemStyle: {
            normal: {
              color: item.disabled ? '#71c6ff' : '#1692f4', // 71c6ff
              barBorderRadius: [5, 5, 0, 0]
            },
            emphasis: {
              color: item.disabled ? '#71c6ff' : '#1692f4',
              barBorderRadius: [5, 5, 0, 0]
            }
          }
        }
      })
    
      myChart && myChart.setOption({
        series: [{
          id: 'scfp',
          data: data,
          markPoint: {
            data: ratioData.map((item, index) => {
              return { coord: item.disabled ? undefined : [index, item.value] }
            })
          }
        }]
      });
    }
    
    function setGraphic(){
      // Add shadow circles (which is not visible) to enable drag.
      myChart.setOption({
        graphic: echarts.util.map(ratioData, function (item, dataIndex) {
          var position = myChart.convertToPixel('grid', [item.name, item.value])
          return {
            type: 'circle',
            position: position,
            shape: {
              cx: 0,
              cy: 0,
              r: item.disabled ? 0 : (symbolSize / 2)
            },
            invisible: true, // false 显示拖拽的点
            draggable: item.disabled ? false : true,
            ondragstart: function(){
              setTimeout(function(){
                activeRatioData = JSON.parse( JSON.stringify(ratioData) )
              }, 0)
            },
            ondrag: echarts.util.curry(onPointDragging, dataIndex),
            ondragend: echarts.util.curry(function onDragend(index){
              setTimeout(dragCallBack, 100, index)
            }, dataIndex),
            z: 100
          };
        })
      });
    }
    
    function onPointDragging(dataIndex) {
      if(!onPointDragging.offSetTime){
        onPointDragging.offSetTime = setTimeout(_ => {
          let data = myChart.convertFromPixel('grid', this.position);
    
          let val = +data[1].toFixed(0);
          changeVal(val, dataIndex)
    
          setOptionData()
    
          onPointDragging.offSetTime = null
        }, 100)
      }
    }
    function changeVal(val, dataIndex){
      if(activeRatioData){
        ratioData = JSON.parse( JSON.stringify(activeRatioData) )
        activeRatioData = null
      }
    
      let count = 100 //可改变元素的总值
      //从大到小排序，从后面pop
      let narr = ratioData.filter((item, index) => {
        if(item.disabled){
          count -= item.value
        }else if(index != dataIndex){
          return true
        }
      }).sort((a, b) => b.value - a.value);
    
      val = val > count ? count : val < 0 ? 0 : val;
      val = +val.toFixed(0)
    
      let diff = ratioData[dataIndex].value - val //差值，平均分配给可改变的元素
      let diffItem = (diff / narr.length) | 0;
      let item = narr.pop();
      while (item) {
        let v = item.value + diffItem
        if(v < 0){
          //diff -30 ; diffItem -10 ; item.value 5 ; v -5
          //  ==> diff -25 item.value 0
          diff += item.value
          item.value = 0
        }else if(v > 100){
          //diff 30 ; diffItem 10 ; item.value 98 ; v 108
          //  ==> diff 28 item.value 100
          diff += item.value - 100
          item.value = 100
        }else{
          //diff 30 ; diffItem 10 ; item.value 28 ; v 38
          //  ==> diff 20 item.value 38
          diff -= diffItem
          item.value = v
        }
    
        diffItem = (diff / narr.length) | 0;
        item = narr.pop();
      }
    
      ratioData[dataIndex].value = val
    }
    function dragCallBack(index){
      ratioData[index].disabled = true
      setOptionData()
      setGraphic()
    
      let nodis = ratioData.filter(item => !item.disabled)
      if(nodis.length == 1){
        let i = ratioData.indexOf(nodis[0])
        dragCallBack(i)
      }
    }
</script>
</html>

this.myChart.getZr().on("mousedown", (params) => { //do something //将params.offsetX，params.offsetY通过myChart.convertFromPixel方法转换成图表的x轴和y轴，就可以操作数据了 const axisData = this.myChart.convertFromPixel("grid", [ params.offsetX, params.offsetY, ]); });

//鼠标按下时 _this.myChart.getZr().on("mousedown", (params) => { _this.mouseModifying = true; //显示鼠标模拟线段 _this.showMouseLine(params); }); //鼠标滑动时 _this.myChart.getZr().on("mousemove", (params) => { if (_this.mouseModifying) { _this.mouseMoveing = true; //显示鼠标模拟线段 _this.showMouseLine(params); } }); // 鼠标拖拽事件松开时 _this.myChart.getZr().on("mouseup", (params) => { try { if (_this.mouseModifying) { const mouseData = _this.myChart.convertFromPixel("grid", [ params.offsetX, params.offsetY, ]); //x轴的下标 _this.mousedownXAxisPosition = mouseData[0]; ... } _this.mouseModifying = false; _this.mouseMoveing = false; } catch (e) { //鼠标作用点超出图表时 _this.mouseModifying = false; _this.mouseMoveing = false; } }); let erd = elementResizeDetectorMaker(); erd.listenTo(document.getElementById("chart"), function (element) { _this.$nextTick(function () { _this.myChart.resize(); //变化重新渲染图 }); });

//显示鼠标线段 showMouseLine(params) { const _this = this; try { //鼠标移动时 if (this.mouseMoveing) { this.option.color.length = this.option.color.length - 1; this.option.series.length = this.option.series.length - 1; } const mouseData = this.myChart.convertFromPixel("grid", [ params.offsetX, params.offsetY, ]); //超过图表外不操作数据 if ( mouseData[0] < 0 || mouseData[0] > 24 || mouseData[1] < this.yAxisTemperationMinValue || mouseData[1] > this.yAxisTemperationMaxValue ) { return false; } ... } catch (e) { //范围超出时 //console.log(e.message,e.stack); if (e.message === "Invalid array length") { _this.mouseModifying = false; _this.mouseMoveing = false; _this.isInputChange = false; } } },

echarts折线图上下拖动数据怎么做？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？