真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

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

10年積累的網(wǎng)站建設、成都網(wǎng)站制作經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設計制作后付款的網(wǎng)站建設流程，更有盤龍免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

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




 
 


 
   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) + '
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    }]   });  }

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

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

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


標題名稱：echarts如何實現(xiàn)折線圖的拖拽效果
文章路徑：http://weahome.cn/article/gsdjcc.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部