建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
Echarts 如何實(shí)現(xiàn)拖拽
下面描述了一個(gè)能夠?qū)崿F(xiàn)拖拽的實(shí)例，該實(shí)例是在 Echarts 的基礎(chǔ)上的擴(kuò)展，我們可以通過(guò)該例子了解到怎么利用 Echarts 提供的 API 實(shí)現(xiàn)定制化的富有交互的功能。
創(chuàng)新互聯(lián)專(zhuān)注于遠(yuǎn)安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供遠(yuǎn)安營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，遠(yuǎn)安網(wǎng)站制作、遠(yuǎn)安網(wǎng)頁(yè)設(shè)計(jì)、遠(yuǎn)安網(wǎng)站官網(wǎng)定制、小程序定制開(kāi)發(fā)服務(wù)，打造遠(yuǎn)安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供遠(yuǎn)安網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
點(diǎn)擊編輯實(shí)例 》》
上述實(shí)例達(dá)到的功能：您可以使用鼠標(biāo)拖拽圖中曲線(xiàn)上的點(diǎn)，然后就能夠改變曲線(xiàn)的形狀。
上述實(shí)現(xiàn)拖拽的例子還很基礎(chǔ)，但是學(xué)會(huì)上述例子之后我們能夠進(jìn)行更多的操作，比如在圖中可視化的編輯。
Echarts 本身沒(méi)有提供封裝好的拖拽改變圖表的功能，因?yàn)楝F(xiàn)在這個(gè)功能被認(rèn)為不具備通用性。因此開(kāi)發(fā)者要實(shí)現(xiàn)這個(gè)功能就要使用 API ，這樣做的好處是能夠讓開(kāi)發(fā)者按自己的需要進(jìn)行設(shè)置。
（一）實(shí)現(xiàn)基本的拖拽功能
在這個(gè)例子中，基礎(chǔ)的圖表是一個(gè) 折線(xiàn)圖 (series-line)。詳細(xì)配置如下：
var symbolSize = 20;
// 這個(gè) data 變量在這里單獨(dú)聲明，在后面也會(huì)用到。
var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];
myChart.setOption({
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, // 為了方便拖拽，把 symbolSize 尺寸設(shè)大了。
data: data
}
]
});折線(xiàn)點(diǎn)原本并沒(méi)有拖拽功能，需要我們?yōu)樗由希菏褂?graphic 組件，在每個(gè)點(diǎn)上面，覆蓋一個(gè)隱藏的可拖拽的圓點(diǎn)，具體操作如下：
myChart.setOption({
// 聲明一個(gè) graphic component，里面有若干個(gè) type 為 'circle' 的 graphic elements。
// 這里使用了 echarts.util.map 這個(gè)幫助方法，其行為和 Array.prototype.map 一樣，但是兼容 es5 以下的環(huán)境。
// 用 map 方法遍歷 data 的每項(xiàng)，為每項(xiàng)生成一個(gè)圓點(diǎn)。
graphic: echarts.util.map(data, function (dataItem, dataIndex) {
return {
// 'circle' 表示這個(gè) graphic element 的類(lèi)型是圓點(diǎn)。
type: 'circle',
shape: {
// 圓點(diǎn)的半徑。
r: symbolSize / 2
},
// 用 transform 的方式對(duì)圓點(diǎn)進(jìn)行定位。position: [x, y] 表示將圓點(diǎn)平移到 [x, y] 位置。
// 這里使用了 convertToPixel 這個(gè) API 來(lái)得到每個(gè)圓點(diǎn)的位置，下面介紹。
position: myChart.convertToPixel('grid', dataItem),
// 這個(gè)屬性讓圓點(diǎn)不可見(jiàn)（但是不影響他響應(yīng)鼠標(biāo)事件）。
invisible: true,
// 這個(gè)屬性讓圓點(diǎn)可以被拖拽。
draggable: true,
// 把 z 值設(shè)得比較大，表示這個(gè)圓點(diǎn)在最上方，能覆蓋住已有的折線(xiàn)圖的圓點(diǎn)。
z: 100,
// 此圓點(diǎn)的拖拽的響應(yīng)事件，在拖拽過(guò)程中會(huì)不斷被觸發(fā)。下面介紹詳情。
// 這里使用了 echarts.util.curry 這個(gè)幫助方法，意思是生成一個(gè)與 onPointDragging
// 功能一樣的新的函數(shù)，只不過(guò)第一個(gè)參數(shù)永遠(yuǎn)為此時(shí)傳入的 dataIndex 的值。
ondrag: echarts.util.curry(onPointDragging, dataIndex)
};
})
});我們?cè)谏鲜龃a中使用了 convertToPixel 這個(gè) API，進(jìn)行了從 data 到像素坐標(biāo)的轉(zhuǎn)換，以確定每個(gè)圓點(diǎn)所處的位置，然后進(jìn)行圓點(diǎn)的繪制。
myChart.convertToPixel('grid', dataItem) 中的第一個(gè)參數(shù) ‘grid’ 表示 dataItem 在 grid（即直角坐標(biāo)系）這個(gè)組件中進(jìn)行的轉(zhuǎn)換。
像素坐標(biāo)，就是以 Echarts 容器 dom element 的左上角為零點(diǎn)的以像素為單位的坐標(biāo)系中的坐標(biāo)。
注意：只有在初始化直角坐標(biāo)系（grid）后才能夠調(diào)用 myChart.convertToPixel('grid', dataItem)。
加入上述代碼之后，折線(xiàn)上就有了可拖拽的點(diǎn)，接著我們要為每個(gè)圓點(diǎn)添加拖拽響應(yīng)的事件，具體操作如下：
// 拖拽某個(gè)圓點(diǎn)的過(guò)程中會(huì)不斷調(diào)用此函數(shù)。
// 此函數(shù)中會(huì)根據(jù)拖拽后的新位置，改變 data 中的值，并用新的 data 值，重繪折線(xiàn)圖，從而使折線(xiàn)圖同步于被拖拽的隱藏圓點(diǎn)。
function onPointDragging(dataIndex) {
// 這里的 data 就是本文最初的代碼塊中聲明的 data，在這里會(huì)被更新。
// 這里的 this 就是被拖拽的圓點(diǎn)。this.position 就是圓點(diǎn)當(dāng)前的位置。
data[dataIndex] = myChart.convertFromPixel('grid', this.position);
// 用更新后的 data，重繪折線(xiàn)圖。
myChart.setOption({
series: [{
id: 'a',
data: data
}]
});
}我們?cè)谏厦娴拇a中，使用了 convertFromPixel 這個(gè) API。它是 convertToPixel 的逆向過(guò)程。
myChart.convertFromPixel('grid', this.position) ：把當(dāng)前像素坐標(biāo)轉(zhuǎn)換成 grid 組件中直角坐標(biāo)系的 dataItem 值。
最后，為了使 dom 尺寸改變時(shí)，圖中的元素能自適應(yīng)得變化，加入下述代碼：
window.addEventListener('resize', function () {
// 對(duì)每個(gè)拖拽圓點(diǎn)重新計(jì)算位置，并用 setOption 更新。
myChart.setOption({
graphic: echarts.util.map(data, function (item, dataIndex) {
return {
position: myChart.convertToPixel('grid', item)
};
})
});
});到目前為止，我們已經(jīng)基本實(shí)現(xiàn)了拖拽功能。
（二）添加 tooltip 組件
現(xiàn)在，我們開(kāi)始學(xué)習(xí)使用 tooltip 組件來(lái)實(shí)時(shí)顯示拖拽過(guò)程中被拖拽的點(diǎn)的 data 值的變化狀況。
注意：雖然 tooltip 有其默認(rèn)的顯示和隱藏的觸發(fā)規(guī)則，但是在我們的拖拽場(chǎng)景中不適用，因此需要手動(dòng)添加它們。
在上述代碼中分別添加如下定義：
myChart.setOption({
...,
tooltip: {
// 表示不使用默認(rèn)的『顯示』『隱藏』觸發(fā)規(guī)則。
triggerOn: 'none',
formatter: function (params) {
return 'X: ' + params.data[0].toFixed(2) + '
Y: ' + params.data[1].toFixed(2);
}
}
});myChart.setOption({
graphic: echarts.util.map(data, function (item, dataIndex) {
return {
type: 'circle',
...,
// 在 mouseover 的時(shí)候顯示，在 mouseout 的時(shí)候隱藏。
onmousemove: echarts.util.curry(showTooltip, dataIndex),
onmouseout: echarts.util.curry(hideTooltip, dataIndex),
};
})
});
function showTooltip(dataIndex) {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: dataIndex
});
}
function hideTooltip(dataIndex) {
myChart.dispatchAction({
type: 'hideTip'
});
}這里使用了 dispatchAction 來(lái)顯示隱藏 tooltip。用到了 showTip、hideTip。
（三）Echarts 拖拽實(shí)例的全部代碼
總結(jié)一下，全部的代碼如下：
在這些基礎(chǔ)上，我們可以實(shí)現(xiàn)更多的功能，例如可以添加 dataZoom 組件、可以制作一個(gè)直角坐標(biāo)系上的繪圖板等等。
網(wǎng)站欄目：創(chuàng)新互聯(lián)ECharts教程：ECharts實(shí)例一：拖拽的實(shí)現(xiàn)
鏈接分享：http://m.5511xx.com/article/dpspigo.html
