echart 点击事件获取series下多个系列的数据
有多个series系列,点击其中一个系列某个值时,获取点击类目轴值对应的其他系列的value;
简单来说,点击下图中蓝线12:00 的数据时,能获得绿线在12:00 的值,反之点击绿线时也能获得蓝线的值。
问题描述:
echart点击事件获得的参数只是当前点击系列的值。如图,点击绿线,
得到的点击参数的值如下:
从结果可以看出,不能直接获得此时蓝线的相应的值。
解决方法:
通过点击参数找到点击都索引值dataIndex,根据索引值去找其他系列的值。
注:根据echart绑定的是数组,点击的索引值dataIndex也是此时相应的各个系列绑定的数组索引值。
//点击事件
myChart.on('click', function(params) {
// console.log(params)
//params.dataIndex点击的第几个横坐标
devnum = "时间:" + params.name + " 变压器:" + byqArray[params.dataIndex] + " 断路器:" + dlqArrar[params.dataIndex];
document.getElementById("lable").innerText = devnum;
});
echart横坐标换行
xAxis: {
type: 'category',
boundaryGap: false,//坐标轴两边留白策略,false表示不留白
data: ['2021-01-28 11:00', '2021-01-28 12:00', '2021-01-28 13:00', '2021-01-28 14:00', '2021-01-28 15:00', '2021-01-28 16:00', '2021-01-28 17:00'].map(function (str) {
//横坐标按空格换行
return str.replace(' ', '\n');
})
},
全代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echart 点击事件获取多个series的数据</title>
<script src="./js/echarts.common.min.js"></script>
</head>
<body>
<div id="app" style="width:100%;height:100%;">
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="myChart" style="width: 100%;height: 500px;"></div>
<div style="height:40px;width:100%;display: flex;justify-content: center;align-items: center;text-align: center;">
<span id="lable" style="font-size: 20px;color: red;"></span>
</div>
</div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'));
let byqArray = [120, 132, 101, 134, 90, 230, 210];
let dlqArrar = [220, 182, 191, 234, 290, 330, 310];
var devnum;
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: ['变压器', '断路器']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2021-01-28 11:00', '2021-01-28 12:00', '2021-01-28 13:00', '2021-01-28 14:00', '2021-01-28 15:00', '2021-01-28 16:00', '2021-01-28 17:00'].map(function (str) {
//横坐标按空格换行
return str.replace(' ', '\n');
})
},
yAxis: {
type: 'value',
nameTextStyle:{
fontSize: 16,
}
},
series: [
{
name: '变压器',
type: 'line',
data: byqArray
},
{
name: '断路器',
type: 'line',
data: dlqArrar
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//点击事件
myChart.on('click', function(params) {
// console.log(params) 之前把空格替换成换行符了,现在展示还原一下即可params.name.replace('\n', ' ')
devnum = "时间:" + params.name.replace('\n', ' ') + " 变压器:" + byqArray[params.dataIndex] + " 断路器:" + dlqArrar[params.dataIndex];
document.getElementById("lable").innerText = devnum;
});
</script>
</body>
</html>