当前位置：文江博客话题详情

JavaScript Vue.js ECharts

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

发布于 2022-09-13 00:53:00 字数 53 浏览 37 评论 0

如图这样：，

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

隱形的亼 2022-09-20 00:53:00

又是你，再给你个官方例子 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>

不再见 2022-09-20 00:53:00

最后总结一下我操作的方法：

//鼠标事件，mousedown/mousemove/mouseup

  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;
        }
      }
    },

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

遂心如意

文章 0 评论 0

5513090242

文章 0 评论 0

巷雨优美回忆

文章 0 评论 0

junpengz2000

文章 0 评论 0

13郎

文章 0 评论 0

qq_xU4RDg

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文