Vue3+Echarts(柱状图):点击不同的按钮可以切换不同年份的数据

一、需求

在Vue3项目中,绘制一个柱状图:

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

Vue3+Echarts(柱状图):点击不同的按钮可以切换不同年份的数据_第1张图片

二、实现

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部分
  • 总体逻辑如图所示:

Vue3+Echarts(柱状图):点击不同的按钮可以切换不同年份的数据_第2张图片

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处地方即可:

Vue3+Echarts(柱状图):点击不同的按钮可以切换不同年份的数据_第3张图片

4、初始化echarts图表

Vue3+Echarts(柱状图):点击不同的按钮可以切换不同年份的数据_第4张图片

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年的数据
    Vue3+Echarts(柱状图):点击不同的按钮可以切换不同年份的数据_第5张图片

  • 点击“2022年”按钮,图表会切换到2022年的数据并重新渲染图表
    Vue3+Echarts(柱状图):点击不同的按钮可以切换不同年份的数据_第6张图片

三、小结

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

你可能感兴趣的:(vue,Echarts,Javascript,vue.js,前端,javascript,echarts,vue3)