echarts实现折线图的拖拽效果

来源：本站原创|时间：2020-01-10|栏目：JavaScript|点击：次

使用echarts实现折线图的拖拽，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="./echarts.js"></script>
</head>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
  var symbolSize = 20;
  var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
  var myChart = echarts.init(document.getElementById('main'));
  myChart.setOption({
  # 表示不使用默认的『显示』『隐藏』触发规则。
    tooltip: {
      triggerOn: 'none',
      formatter: function (params) {
        return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
      }
    },
    xAxis: {
      min: -100,
      max: 80,
      type: 'value',
      axisLine: {onZero: false}
    },
    yAxis: {
      min: -30,
      max: 60,
      type: 'value',
      axisLine: {onZero: false}
    },
    series: [
      {
        id: 'a',
        type: 'line',
        smooth: true,
        symbolSize: symbolSize,
        data: data
      }
    ],
  });
  myChart.setOption({
  #拖拽功能：用 graphic 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点
    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) {
    data[dataIndex] = myChart.convertFromPixel('grid', this.position);
    myChart.setOption({
      series: [{
        id: 'a',
        data: data
      }]
    });
  }

</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

上一篇：js数据类型转换与流程控制操作实例分析

栏目：JavaScript

下一篇：JS获取当前时间的年月日时分秒及时间的格式化的方法

本文标题：echarts实现折线图的拖拽效果

本文地址：https://www.xiuzhanwang.com/a1/JavaScript/9470.html

更多JavaScript

JavaScript

echarts实现折线图的拖拽效果

您可能感兴趣的文章

阅读排行

本栏相关

随机阅读