echarts实现多坐标轴下多条可拖动节点的折线图
利用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>
