柱形图--自己记录

效果

option代码为：

barChartOptions: {
        color: ["#FFC833", "#33B9FF", "#36FFD7"],
        grid: {
          left: 20,
          right: 20,
          bottom: 10,
          top: 40,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: 0,
          icon: "rect",
          textStyle: {
            color: "#e1e4ea",
          },
          itemWidth: 14,
          itemGap: 34,
          data: ["计划销量（吨）", "实际销量（吨）", "上年同期销量（吨）"],
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#215d8b",
            },
          },
          axisTick: {
            lineStyle: {
              color: "#215d8b",
            },
          },
          axisLabel: {
            color: "#ccdef3",
          },
          data: [],
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#215d8b",
            },
          },
          axisTick: null,
          splitLine: {
            lineStyle: {
              color: "#205787",
            },
          },
          axisLabel: {
            color: "#ccdef3",
          },
        },
        series: [
          {
            name: "计划销量（吨）",
            type: "bar",
            barWidth: 10,
            label: {
              show: false,
              position: "top",
              color: "#fff",
            },
            data: [],
          },
          {
            name: "实际销量（吨）",
            type: "bar",
            barWidth: 10,
            label: {
              show: false,
              position: "top",
              color: "#fff",
            },
            data: [],
          },
          {
            name: "上年同期销量（吨）",
            type: "bar",
            barWidth: 10,
            label: {
              show: false,
              position: "top",
              color: "#fff",
            },
            data: [],
          },
        ],
      },

      barChart: null,

方法使用：

mounted() {
    this.initBarChart();
    this.setBarChart();
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("reisze", this.resize);
  },
  methods: {
    initBarChart() {
      if (!this.$refs["bar"]) return;
      this.barChart = echarts.init(this.$refs["bar"]);
      this.barChart.setOption(this.barChartOptions);
    },
    setBarChart() {
      if (!this.barChart) return;
      this.barChartOptions.xAxis.data = new Array(12)
        .fill("")
        .map((item, index) => index + 1 + "月");
      this.barChartOptions.series[0].data = new Array(12)
        .fill("")
        .map(() => Math.floor(Math.random() * 10000));
      this.barChartOptions.series[1].data = new Array(12)
        .fill("")
        .map(() => Math.floor(Math.random() * 10000));
      this.barChartOptions.series[2].data = new Array(12)
        .fill("")
        .map(() => Math.floor(Math.random() * 10000));
      this.barChart.setOption(this.barChartOptions);
    },
    resize() {
      this.barChart?.resize();
    },
  },

随机生成的数据，仅作参考，自己记录便于以后直接拿来使用