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