介紹乙個實現拖拽的小例子。這個例子是在原生 echarts 基礎上做了些小小擴充套件，帶有一定的互動性。通過這個例子，我們可以了解到，如何使用 echarts 提供的 api 實現定製化的富互動的功能。
echarts 本身沒有提供封裝好的『拖拽改變圖表』功能，因為現在認為這個功能並不足夠有通用性。那麼這個功能就留給開發者用 api 實現，這也有助於開發者按自己的需要個性定製。
在這個例子中，基礎的圖表是乙個 折線圖 (series-line)。參見如下配置：
var symbolsize = 20;
// 這個 data 變數在這裡單獨宣告，在後面也會用到。
var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
mychart.setoption(
},yaxis:
},series: [
]});
mychart.setoption(,
// 用 transform 的方式對圓點進行定位。position: [x, y] 表示將圓點平移到 [x, y] 位置。
// 這裡使用了 converttopixel 這個 api 來得到每個圓點的位置，下面介紹。
position: mychart.converttopixel('grid', dataitem),
// 這個屬性讓圓點不可見（但是不影響他響應滑鼠事件）。
invisible: true,
// 這個屬性讓圓點可以被拖拽。
draggable: true,
// 把 z 值設得比較大，表示這個圓點在最上方，能覆蓋住已有的折線圖的圓點。
z: 100,
// 此圓點的拖拽的響應事件，在拖拽過程中會不斷被觸發。下面介紹詳情。
// 這裡使用了 echarts.util.curry 這個幫助方法，意思是生成乙個與 onpointdragging
// 功能一樣的新的函式，只不過第乙個引數永遠為此時傳入的 dataindex 的值。
ondrag: echarts.util.curry(onpointdragging, dataindex)
};})
});
mychart.converttopixel('grid', dataitem)這句話中，第乙個引數'grid'表示dataitem在 grid 這個元件中（即直角座標系）中進行轉換。所謂『畫素座標』，就是以 echarts 容器 dom element 的左上角為零點的以畫素為單位的座標系中的座標。
注意這件事需要在第一次 setoption 後再進行，也就是說，須在座標系（grid）初始化後才能呼叫mychart.converttopixel('grid', dataitem)。
有了這段**後，就有了諸個能拖拽的點。接下來要為每個點，加上拖拽響應的事件：
// 拖拽某個圓點的過程中會不斷呼叫此函式。
// 此函式中會根據拖拽後的新位置，改變 data 中的值，並用新的 data 值，重繪折線圖，從而使折線圖同步於被拖拽的隱藏圓點。
function onpointdragging(dataindex) ]
});}
mychart.convertfrompixel('grid', this.position)表示把當前畫素座標轉換成 grid 元件中直角座標系的 dataitem 值。
最後，為了使 dom 尺寸改變時，圖中的元素能自適應得變化，加上這些**：
window.addeventlistener('resize', function () ;
})});
});
在上述**中分別新增如下定義：
mychart.setoption(
}});
mychart.setoption(;
})});function showtooltip(dataindex) );
}function hidetooltip(dataindex) );
}
總結一下，全部的**如下：
微信小程式 使用echarts
一 頁面 二 js 1 引用echarts 外掛程式 import as echarts from ec canvas echarts.js 2 data 3 onload function options 4 寫方法 圖表初始化 initchart function history chart.s...
小程式使用echarts記錄 二
乙個頁面需要展示2個圖表，圖表資料是請求後台得到的 如下,新增了tudata和titledata兩個屬性 for chart view mychart dom bar class mychart canvas id mychart bar tudata titledata ec ec canvas ...
小程式 taro中使用echarts
npm i echarts techarts dimport echart from techarts 引入techarts import as echarts from echarts 引入echarts option option echarts呈現圖表的資料 可去echarts官網 找自己想要...