echart 点击事件获取series下多个系列的数据,以及echart横坐标换行

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>
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ECharts(百度开源的一个数据可视化库)提供了丰富的交互功能和事件处理机制,包括点击事件点击事件可以用于在用户点击图表元素时执行特定的操作。 要实现 ECharts点击事件,你可以通过以下步骤进行操作: 1. 首先,确保你已经引入了 ECharts 的库文件,并创建了一个图表实例。你可以参考 ECharts 的官方文档或示例代码来完成这一步骤。 2. 在图表实例的配置项中,使用 `on` 属性来绑定点击事件。例如,如果你想在用户点击某个系列series)的数据项时执行操作,可以在对应的系列配置中添加 `on` 属性,然后指定 `click` 事件和对应的处理函数。 ```javascript option = { series: [{ type: 'bar', data: [10, 20, 30, 40], // 绑定点击事件 on: { click: handleClick } }] }; ``` 3. 在处理函数 `handleClick` 中,你可以获取点击事件的相关信息,例如点击的图表元素、数据等。根据需要进行相应的操作,比如弹出提示框、修改数据等。 ```javascript function handleClick(params) { // 获取点击数据项索引 var dataIndex = params.dataIndex; // 获取点击数据值 var value = params.value; // 其他操作... } ``` 通过上述步骤,你就可以在 ECharts 中实现点击事件,并根据用户的点击执行相应的操作。请注意,具体的实现方式可能会因你使用的 ECharts 版本和需求而有所不同,你可以根据官方文档和示例进行相应的调整。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值