Vue3+Echarts（柱状图）：点击不同的按钮可以切换不同年份的数据

一、需求

在Vue3项目中，绘制一个柱状图：

• 柱状图会展示某一年里四个季度的销售额
• 提供2个按钮选项，点击不同的按钮可以切换到不同年份的销售额，这里的年份指2022年以及2023年
• 目标效果如下：
  默认展示的是2023年的数据，点击2022年的按钮可以切换到对应年份的数据并重新渲染图表

二、实现

1、template代码

• 在template部分，需要写2个按钮，分别绑定点击事件
• 点击事件的功能：点击按钮可以切换到不同年份的数据，并更新图表

<template>
  <div class="login">
    <!-- 按钮 -->
    <div class="optionButton">
      <el-radio-group size="small">
        <el-radio-button @click="changeData1">2023年</el-radio-button>
        <el-radio-button @click="changeData2">2022年</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 图表 -->
    <div class="chart" id="barChart"></div>
  </div>
</template>

2、script部分

• 总体逻辑如图所示：

3、点击事件

• 分别给2个按钮绑定点击事件：点击年份按钮后，图表绑定的数据会切换到对应年份的数据
• 图表绑定新的数据后，需要重新渲染echarts图表，否则图表不会更新
• 以按钮1绑定的点击事件为例：

//按钮1绑定的点击事件
function changeData1() {
      selectedData.value = dataAll.value[0].data;
      let myChart = $echarts.init(document.getElementById("barChart"));
      myChart.setOption({
        series: [
          {
            type: "bar",
            barWidth: "35%",
            data: selectedData.value,
          },
        ],
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }

• 按钮2绑定的事件更改下面2处地方即可：

4、初始化echarts图表

5、图表样式

样式部分此处只做简单展示：

<style lang='less'>
.login {
  height: 4.5rem;
  // 选择按钮
  .optionButton {
    text-align: center;
    margin-top: 1px;
    .el-radio-button__inner {
      background-color: rgb(11, 34, 125); // 按钮的背景颜色
      color: white;
      border: none; //去除边框
      text-decoration: underline; //添加下划线
      text-decoration-color: white; ///* 下划线颜色为红色 */
    }
  }
  .chart {
    height: 4rem;
  }
}
</style>

6、结果

• 默认展示的是2023年的数据
  

• 点击“2022年”按钮，图表会切换到2022年的数据并重新渲染图表
  

三、小结

在实现的过程中，出现过按钮已经正常绑定点击事件了，但是数据切换之后，图表没有重新渲染，因此在绑定的点击事件中，还需要让echarts图表重新渲染。