利用echarts實現多條可拖動節點的折線圖在上一篇博文中已經說明：https://www.cnblogs.com/p-l-u-m/p/11839776.html，本篇主要是補充如何在多條坐標軸下實現該功能，故如何實現基本的可拖動折線圖不再贅述。要實現多條坐標軸下可拖動折線圖主要是利用 echarts.convertToPixel()方法將點的值轉為像素坐標進行圖層的添加，其中第一個參數可以選擇相對哪個坐標系進行轉換，所以可以在轉換的時候針對不同的曲線選擇不同的坐標軸進行轉換。然后再通過echarts.convertFromPixel()方法將拖動后的像素坐標轉換為原來點的坐標進行重新畫圖就實現了該需求，具體實現過程請看以下demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/echarts/4.3.0/echarts-en.common.min.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var symbolSize = 20;
var data1 = [[-90, -10], [-30, -10], [10, -20], [30, -10], [60, -10]]; // 第一條線
var data2 = [[-90, 70], [-30, 80], [10, 100], [30, 140], [60, 150]]; // 第二條線，多條線類推
var option = { // 基本配置，畫曲線
title: {
text: 'Try Dragging these Points'
},
/* tooltip: {
triggerOn: 'none',
formatter: function (params) {
return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
}
}, */
grid: {
},
xAxis: {
min: -100,
max: 80,
type: 'value',
axisLine: { onZero: false }
},
yAxis: [
{
min: -30,
max: 60,
type: 'value',
axisLine: { onZero: false }
},
{
min: 60,
max: 200,
type: 'value',
axisLine: { onZero: false }
}
],
series: [
{
id: 'a',
type: 'line',
yAxisIndex: 0,
smooth: true,
symbolSize: symbolSize,
data: data1
},
{
id: 'b',
type: 'line',
yAxisIndex: 1,
smooth: true,
symbolSize: symbolSize,
data: data2
}
]
};
myChart.setOption(option)
setTimeout(function () {
// 在圖上添加圖層
myChart.setOption({
graphic:
echarts.util.map(data1.concat(data2), function (item, dataIndex) { // 此處需要把兩條曲線的數組拼成一個數組進行遍歷，多條曲線類似
// 通過索引判斷該點屬於哪條曲線
if (dataIndex < data1.length) { // data1的曲線
return {
type: 'circle',
position: myChart.convertToPixel({ xAxisIndex: 0, yAxisIndex: 0 }, item), // 根據索引為0的x軸和索引為0的y軸將點的值轉換為像素
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: true,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, dataIndex), // 添加拖動的回調
z: 100
};
}
// data2的曲線
return {
type: 'circle',
position: myChart.convertToPixel({ xAxisIndex: 0, yAxisIndex: 1 }, item), // 根據索引為0的x軸和索引為1的y軸將點的值轉換為像素
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: true,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, dataIndex), // 添加拖動的回調
z: 100
};
})
});
}, 0);
// 拖動的處理函數，因為把所有的曲線數組拼成了一個數組，所以添加的圖層是一個整體，此處需要拆分圖層，還原為兩條曲線
function onPointDragging(dataIndex, dx, dy) {
if (dataIndex < data1.length) { // 通過索引判斷此圓圈覆蓋的是哪條曲線
data1[dataIndex] = myChart.convertFromPixel({ xAxisIndex: 0, yAxisIndex: 0 }, this.position); // 將坐標值(x, y)還原為數組的項[a,b]
// 更新圖表
myChart.setOption({
series: [{
id: 'a',
data: data1
}]
});
} else {
data2[dataIndex - data1.length] = myChart.convertFromPixel({ xAxisIndex: 0, yAxisIndex: 1 }, this.position);
myChart.setOption({
series: [{
id: 'b',
data: data2
}]
});
}
}
</script>
</body>
</html>