echarts實現(xiàn)折線圖的拖拽效果

更新時間：2019年12月19日 11:41:44 作者：lxq_9532

這篇文章主要為大家詳細介紹了echarts實現(xiàn)折線圖的拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用echarts實現(xiàn)折線圖的拖拽，供大家參考，具體內(nèi)容如下

<!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({
 # 表示不使用默認的『顯示』『隱藏』觸發(fā)規(guī)則。
  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>