echarts双柱状图支持点击并高亮当前点击柱子

实现效果图

上图操作描述：点击某柱子高亮当前柱子，且可获取当前柱子数据进行其他操作。

完整代码

<template><div id="echartsCon" />
</template><script>export default {methods: {async echartsConEcharts() {var dom = document.getElementById("echartsCon");var myChart = echarts.init(dom, null, {renderer: "canvas",useDirtyRect: false,});var checkName = ""; // 点击柱子的名字var checkSeriesName = ""; // 点击柱子的类型（系列名称）myChart.showLoading(); // 开启 loading 状态 开始渲染// 模拟数据获取，实际使用时替换为真实的 API 调用const mockData = [{ name: "名字1", online: 40, offline: 20 },{ name: "名字2", online: 15, offline: 18 },{ name: "名字3", online: 25, offline: 20 },{ name: "名字4", online: 50, offline: 35 },{ name: "名字5", online: 30, offline: 25 },{ name: "名字6", online: 35, offline: 25 },{ name: "名字7", online: 20, offline: 15 },];// 将模拟数据转换为 ECharts 所需的格式const allName = mockData.map((item) => item.name);const onlineData = mockData.map((item) => item.online * 10000); // 转换为 "万" 单位const offlineData = mockData.map((item) => item.offline * 10000); // 转换为 "万" 单位let option = {title: {text: "XXX统计",left: "left",},tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},legend: {data: [{name: "在线",itemStyle: {color: "#1890ff", // 设置在线图例的颜色},},{name: "不在线",itemStyle: {color: "#fa8c16", // 设置不在线图例的颜色},},],right: "5%",},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: [{type: "category",data: allName,axisLabel: {interval: 0,rotate: 0,},},],yAxis: [{type: "value",name: "",axisLabel: {formatter: function (value) {return value / 10000 + "万";},},},],series: [{name: "在线",type: "bar",data: onlineData,itemStyle: {normal: {color: function (params) {// 如果点击的名称和当前柱子的名称以及系列名称都匹配，则高亮显示return checkName === params.name &&checkSeriesName === params.seriesName? "#4c73f7": "#1890ff";},},},},{name: "不在线",type: "bar",data: offlineData,itemStyle: {normal: {color: function (params) {// 如果点击的名称和当前柱子的名称以及系列名称都匹配，则高亮显示return checkName === params.name &&checkSeriesName === params.seriesName? "#4c73f7": "#fa8c16";},},},},],};myChart.setOption(option);myChart.hideLoading();myChart.on("click", function (params) {console.log("params:", params);if (params.componentType === "series") {checkName = params.name;checkSeriesName = params.seriesName;option.series[0].itemStyle.normal.color = function (params) {return checkName === params.name &&checkSeriesName === params.seriesName? "#4c73f7": "#1890ff";};option.series[1].itemStyle.normal.color = function (params) {return checkName === params.name &&checkSeriesName === params.seriesName? "#4c73f7": "#fa8c16";};myChart.setOption(option);}});window.addEventListener("resize", myChart.resize);}}
}
</script>

当同时有多个图表，但高亮状态只有一个时

点击某一个柱子时，重置其他图标的高亮状态且保持dataZoom状态的方法

 //  重置某一个图表的柱子颜色，并保持dataZoom状态resetOtherChartColors(chartId) {var otherDom = document.getElementById(chartId);if (otherDom) {var otherChart = echarts.getInstanceByDom(otherDom);if (otherChart) {var otherOption = otherChart.getOption();// 保存当前的 dataZoom 状态var savedDataZoom = otherOption.dataZoom;// 重置柱子颜色为默认值otherOption.series[0].itemStyle = {normal: {color: "#1890ff",},};otherOption.series[1].itemStyle = {normal: {color: "#fa8c16",},};// 恢复 dataZoom 状态if (savedDataZoom) {otherOption.dataZoom[0].start = savedDataZoom[0].start;otherOption.dataZoom[0].end = savedDataZoom[0].end;otherOption.dataZoom[1].start = savedDataZoom[1].start;otherOption.dataZoom[1].end = savedDataZoom[1].end;}otherChart.setOption(otherOption);}}}