echarts 柱图点击图表之外的按钮让图表中的多条柱子颜色高亮

需求：在ECharts中，想要通过点击图表之外的按钮来让图表中的某一个或某几个柱子颜色高亮

有个更简单的方法：

 文章链接地址： echarts 点击(柱图、折线图)图表外的按钮，高亮图表中的某些柱子何点位_echarts 柱状图悬浮高亮-CSDN博客

以下是一个基本的步骤指南，用于实现这一功能：

1. 定义初始图表配置：在初始化图表时，确保你的series中的itemStyle可以配置颜色。
2. 添加按钮和点击事件：在HTML中添加一个按钮，并为该按钮添加一个点击事件监听器。
3. 编写事件处理函数：在事件处理函数中，修改ECharts的option对象，特别是与itemStyle相关的部分，以设置你希望高亮的柱子的颜色。
4. 更新图表：使用ECharts实例的setOption方法来应用修改后的option对象，从而更新图表并显示高亮效果。

这里是一个简化的示例代码片段，用于说明如何实现这一功能：

<template>
  <div class="box">
    <div class="leftBox">
      <div
        class="lineChart"
        id="myCustomChart"
        ref="myCustomChart"
        :style="myChartStyle"
      ></div>
    </div>
    <div class="rightBox">
      <el-radio-group v-model="radio1" @change="setHighBar(radio1)">
        <el-radio-button label="一月"></el-radio-button>
        <el-radio-button label="二月"></el-radio-button>
        <el-radio-button label="三月"></el-radio-button>
        <el-radio-button label="四月"></el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    radio1: "",
    chart: null,
    // 图表样式
    myChartStyle: {
      float: "left",
      width: "100%",
      height: "100%",
      backgroundColor: "rgba(38, 53, 106,0.5)",
    },
    ht: [
      // 这里是对象数组
      { name: "一月", value: 1100 },
      { name: "二月", value: 1200 },
      { name: "三月", value: 800 },
      { name: "四月", value: 900 },
      { name: "五月", value: 1000 },
      { name: "六月", value: 400 },
      { name: "七月", value: 500 },
      { name: "八月", value: 1200 },
      { name: "九月", value: 1150 },
      { name: "十月", value: 800 },
      { name: "十一月", value: 1026 },
      { name: "十二月", value: 1300 },
    ],
    option: {},
  },
  mounted() {
    this.initCustomChart();
  },
  methods: {
    // 初始化 echarts 图表
    initCustomChart() {
      let myData5 = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      this.chart = echarts.init(this.$refs.myCustomChart);
      this.option = {
        backgroundColor: "#091022",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "rgba(0, 58, 99, 0.8)", //设置背景颜色
          borderColor: "rgba(0, 58, 99, 0.8)",
          confine: true,
          formatter: "{b}：{c}份合同",
        },
        grid: {
          top: "14%",
          left: "2%",
          right: "4%",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: myData5,
          axisLabel: {
            color: "#A4A7AA",
            interval: 0,
            fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(127, 214, 255, .4)",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          name: "",
          nameTextStyle: {
            color: "#A4A7AA",
            fontSize: 12,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(127, 214, 255, .4)",
            },
          },
          min: 0,
          axisLabel: {
            show: true,
            color: "#A4A7AA",
            fontSize: 12,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 0.8,
              color: "rgba(127, 214, 255, .4)",
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "产值",
            type: "bar",
            barWidth: 2,
            tooltip: {
              show: false,
            },
            label: {
              show: false,
              position: "top",
              color: "#fff",
            },
            itemStyle: {
              color: "#1cfffb",
              lineStyle: {
                width: 1,
                type: "solid", //'dotted'虚线 'solid'实线
              },
            },
            data: this.ht,
          },
          {
            name: "合同数量",
            type: "line",
            showSymbol: false,
            smooth: true,
            // symbolSize: 8,
            lineStyle: {
              normal: {
                color: "#00FFF6",
              },
            },
            itemStyle: {
              color: "#00FFF6",
              borderColor: "#00FFF6",
              borderWidth: 2,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(9, 69, 123, 1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(1, 84, 161, 0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: this.ht, //data.values
          },
        ],
      };
      this.option && this.chart.setOption(this.option);
    },
    // 点击按钮调用方法
    setHighBar(val) {
      let indexList = [];
      this.option.series[0].data.forEach(function (item, index) {
        // 取消高亮
        item.itemStyle = {
          color: "#1cfffb", // 重置为初始颜色
        };
      });
      if (val == "一月") {
        // this.highlightBar(0, 0);// 高亮某一个
        indexList = [0, 2];
        this.highlightSeries(indexList);
      } else if (val == "二月") {
        // this.highlightBar(0, 1);// 高亮某一个
        indexList = [4, 5, 6];
        this.highlightSeries(indexList);
      } else if (val == "三月") {
        // this.highlightBar(0, 2);// 高亮某一个
        indexList = [0, 1, 2];
        this.highlightSeries(indexList);
      } else if (val == "四月") {
        // this.highlightBar(0, 3);// 高亮某一个
        indexList = [1, 7, 8];
        this.highlightSeries(indexList);
      }
    },
    // 根据点击的按钮传参，设置高亮数据
    highlightSeries(indexList) {
      indexList.forEach((ele) => {
        this.option.series[0].data[ele].itemStyle = { color: "#f0f029" }; // 设置高亮颜色
      });

      this.chart.setOption(this.option);
    },
    // 该方法每次只能高亮一条数据
    highlightBar(seriesIndex, dataIndex) {
      this.chart = echarts.init(this.$refs.myCustomChart);
      // 设置特定柱子的颜色
      this.chart.setOption({
        series: [
          {
            type: "bar",
            barWidth: 2,
            data: this.ht, // 这里使用初始数据
            itemStyle: {
              color: function (params) {
                // 如果是特定的数据索引，则高亮显示
                if (params.dataIndex === dataIndex) {
                  return "#f0f029"; // 可以自定义高亮颜色
                } else {
                  return "#1cfffb"; // 其他柱子的颜色
                }
              },
            },
          },
        ],
      });
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  width: 100%;
  height: 600px;
  .leftBox {
    width: 70%;
    height: 600px;
  }
  .rightBox {
    width: 30%;
    height: 600px;
  }
}
</style>

诸位大可一试！