echarts如何實(shí)現(xiàn)折線圖的拖拽效果-創(chuàng)新互聯(lián)

小編給大家分享一下echarts如何實(shí)現(xiàn)折線圖的拖拽效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)楊浦,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

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

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="./echarts.js"></script>
</head>
<body>
 <div id="main" ></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>

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

以上是“echarts如何實(shí)現(xiàn)折線圖的拖拽效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：echarts如何實(shí)現(xiàn)折線圖的拖拽效果-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://www.rwnh.cn/article46/pcdeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、云服務(wù)器、網(wǎng)站維護(hù)、微信公眾號(hào)、做網(wǎng)站、網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

echarts如何實(shí)現(xiàn)折線圖的拖拽效果-創(chuàng)新互聯(lián)