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

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

使用echarts實(shí)現(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({
  # 表示不使用默認(rèn)的『顯示』『隱藏』觸發(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 組件，在每個(gè)點(diǎn)上面，覆蓋一個(gè)隱藏的可拖拽的圓點(diǎn)
    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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：js數(shù)據(jù)類型轉(zhuǎn)換與流程控制操作實(shí)例分析

欄目：JavaScript

下一篇：JS獲取當(dāng)前時(shí)間的年月日時(shí)分秒及時(shí)間的格式化的方法

本文標(biāo)題：echarts實(shí)現(xiàn)折線圖的拖拽效果

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9470.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀