快捷導(dǎo)航

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

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

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

使用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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Bootstrap下拉菜單更改為懸停(hover)觸發(fā)的方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單更改為懸停(hover)觸發(fā)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript實(shí)現(xiàn)微信飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)微信飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
webpack4從0搭建組件庫的實(shí)現(xiàn)
這篇文章主要介紹了webpack4從0搭建組件庫的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
GoJs分組繪圖模板go.Group使用示例詳解
這篇文章主要為大家介紹了GoJs分組繪圖模板go.Group使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
關(guān)于ES6中數(shù)組新增的方法詳解
數(shù)組(Array)是有序的元素序列,若將有限個(gè)類型相同的變量的集合命名,那么這個(gè)名稱為數(shù)組名,下面這篇文章主要給大家介紹了關(guān)于ES6中數(shù)組新增方法的相關(guān)資料,需要的朋友可以參考下
2022-03-03
微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果
這篇文章主要介紹了微信小程序的tab選項(xiàng)卡的實(shí)現(xiàn)效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
jQuery獲取隨機(jī)顏色的實(shí)例代碼
這篇文章主要介紹了jQuery獲取隨機(jī)顏色的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，感興趣的朋友跟隨腳本之家小編來學(xué)習(xí)吧
2018-05-05
JavaScript每天必學(xué)之?dāng)?shù)組和對(duì)象部分
JavaScript每天必學(xué)之?dāng)?shù)組和對(duì)象部分,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
JS 文字符串轉(zhuǎn)換unicode編碼函數(shù)
AJAX傳遞中文字符串時(shí)必須把中文字符串編碼成unicode,一般會(huì)用到JS的自帶函數(shù)escape().不過找到了更好的函數(shù)來確決中文字符轉(zhuǎn)換成unicode編碼的函數(shù)
2009-05-05
js每隔兩秒輸出數(shù)組中的一項(xiàng)(實(shí)例)
下面小編就為大家?guī)硪黄猨s每隔兩秒輸出數(shù)組中的一項(xiàng)(實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05