点击tab栏，e-charts折线图和柱状图数据切换，柱状图顶部显示数值及单位

效果图：

建一个数据js，命名为fund.js

export const fund = {
    daily:{
        xAxisData:["5.31" , "6.01" , "6.02" , "6.03" , "6.04" , "6.05"],
        xiaoOrange:["10" , "13", "15", "17", "12", "16"],
        xiaoBlue:[ "13", "15", "14", "17", "15", "13"]
    },
    month:{
        xAxisData:["2月" , "3月" , "4月" , "5月" , "6月" , "7月"],
        xiaoOrange:["10" , "13", "25", "12", "22", "62"],
        xiaoBlue:[ "13", "25", "24", "17", "25", "23"]
    },
    year:{
        xAxisData:["2018" , "2019" , "2020" , "2021" , "2022" , "2023"],
        xiaoOrange:["32" , "13", "32", "17", "22", "32"],
        xiaoBlue:[ "13", "25", "12", "32", "32", "32"]
    }
}

原组件中：

 <div class="divFund">
    <div class="divHeader"><b>账本记录</b></div>
    <div class="cutLine"></div>
    <div class="divComponent">
      <div class="divChange" @click="timeChange">
        <span id="daily" :class="{ active: curChange === 'daily' }"
          >日</span
        >
        <span id="month" :class="{ active: curChange === 'month' }"
          >月</span
        >
        <span id="year" :class="{ active: curChange === 'year' }"
          >年</span
        >
      </div>
      <div id="divLineChart" :style="{ width: '100%', height: '90%' }"></div>
    </div>
  </div>

写e-charts，并把数据js引入：

import { fund } from "@/component/data/fund";
export default {
  name: "fundComponent",
  data() {
    return {
      curChange: "daily",
      //“日”的数据
      option: {
        color: ["orange", "blue"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          top: "20%",
          height: "80%",
          containLabel: true,
        },
        toolbox: {
          show: "item",
          //要加单位的重点步骤
          formatter: "{c}元",
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ["line"] },
            restore: { show: false },
            saveAsImage: { show: false },
          },
        },
        calculable: true,
        //图例组件属性，设置为块(rect)后设置宽和高
        legend: {
          lineStyle: {
            type: "solid",
            width: 10,
          },
          itemGap: 20,
          data: [
            { name: "小橙", icon: "rect" },
            { name: "小蓝", icon: "rect" },
          ],
          itemWidth: 20,
          itemHeight: 4,
          top: "1%",
          right: "5%",
        },

        xAxis: {
          type: "category",
          data: ["4.08", "4.09", "4.10", "4.11", "4.12", "4.13"],
          axisTick: {
            //轴线要不要跟点走
            alignWithLabel: true,
          },
          //x轴线
          axisLine: {
            lineStyle: {
              color: "black",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "darkgrey",
              type: "dashed",
            },
          },
        },

        textStyle: {
          color: "black",
        },

        yAxis: {
          name: "单位（元）",
          type: "value",
          axisLine: {
            lineStyle: {
              color: "black",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "darkgrey",
              type: "dashed",
            },
          },
        },

        series: [
          
          {
            name: "小橙",
            type: "bar",
            data: [30, 20, 40, 32, 11, 39],
            showSymbol: false,
            //设置数值显示并加单位
            label:{
              show:true,
              position:"top",
              formatter:"{c}元",
            }
          },
          {
            name: "小蓝",
            type: "line",
            data: [28, 10, 35, 22, 21, 42],
            showSymbol: false,
          },
        ],
      },
    };
  },
  mounted() {
    this.divLineChart = this.$echarts.init(
      document.getElementById("divLineChart")
    );
    this.divLineChart.setOption(this.option);
  },
  methods: {
    timeChange(e) {
      let val = e.target.id;
      if (!val) {
        return;
      }
      this.curChange = val;
      let obj = fund[val];
      console.log(obj);
      this.option.xAxis.data = obj.xAxisData;
      this.option.series[0].data = obj.xiaoOrange;
      this.option.series[1].data = obj.xiaoBlue;
      this.divLineChart.clear();
      this.divLineChart.setOption(this.option);
    },
  },
};

.divFund {
  border-radius: 16px;
  height: 33%;
  width: 100%;
  background: rgb(236, 235, 235);
}
.divHeader {
  font-size: 15px;
  padding: 10px;
}
.cutLine {
  width: 100%;
  height: 5px;
  background-image: linear-gradient(to right, #0a3e55, #8f9192);
}
.divComponent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 99%;
  height: calc(100% - 50px);
  padding: 10px 15px;
  .divChange {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 15%;
    #daily {
      width: 10%;
      height: 90%;
      text-align: center;
    }
    #month {
      width: 10%;
      height: 90%;
      text-align: center;
    }
    #year {
      width: 10%;
      height: 90%;
      text-align: center;
    }
  }
  #divLineChart {
    width: 100%;
    height: 85%;
  }
  .active {
    color: blue;
    border-bottom: 2px solid blue;
  }
}