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);
        }
      }
    }