Echarts中文网-柱状图：https://echarts.apache.org/examples/zh/index.html#chart-type-bar

本文柱状图主要实现的内容有：

1. 柱状图是横向且堆积的。

  //设置坐标轴横向
    yAxis: [
      {
        type: "category",
        inverse: true,  //主要设置坐标轴反转  这里是纵坐标显示横坐标的数据
        data: xData.value,
      },
    ],

//第一个柱子设置在最底层，也就是另外两个柱子压在第一个柱子上，这样就可以只显示两个柱子了
series: [
      {
        name: "实际发电量",
        type: "bar",
        stack: "",  //这个值为空的时候，就不计入总和，也就是不会堆积
        data: barData.value[2],
        z: -3,  //设置层级
        barGap: "-100%",  //在另两个柱子下面，不被显示出来
      },
      {
        name: "原发电量",
        type: "bar",
        stack: "total",  //这个值为total的时候，计入总和，会堆积，最后一个柱子同理
        data: barData.value[0],
      },
      {
        name: "提升发电量",
        type: "bar",
        stack: "total",
        data: barData.value[1],
      },
    ],

2. 鼠标悬停时，每项tooltip的文字颜色对应柱子颜色。

    tooltip: {
    //主要设置这里的formatter，自定义悬浮框里面的字体颜色
      formatter: function (params: any) {
        let res = "";
        let title = "";
        params.forEach((item: any) => {
          title = `${item.name} <br/>`;
          res += `<span style="font-weight:700;color: ${item.color}"> ${item.seriesName} : ${item.value}kWh</span><br/>`;
        });
        return title + res;
      },
    },

3. 图表中显示两个堆积柱状图，实际是三个，因为第一个是另外两个的总和，为了在tooltip里面显示总和的数据，所以第一个柱子层级最低，被压在另外两个柱子下面。
4. 横纵坐标不显示（项目需求，根据实际所需设置）。

    //这个最简单，不多解释
    xAxis: {
      show: false,
    },

5. 左边柱子直角，右边的柱子加圆角。

//柱子设置borderRadius即可，顺序是：左上，右上，右下，左下
 itemStyle: {
    borderRadius: [0, 5, 5, 0],
  },

最终效果如图所示：

整体代码如下：

<template>
  <div id="barChart" style="width: 100%; height: 460px"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const xData = ref([
  "A01",
  "A02",
  "A03",
  "A04",
  "A05",
  "A06",
  "A07",
  "A08",
  "A09",
  "A10",
  "A11",
  "B12",
  "B13",
  "B14",
  "B15",
  "B16",
  "B17",
  "B18",
  "B19",
  "B20",
  "B21",
  "B22",
  "C23",
  "C24",
  "C25",
  "C26",
  "C27",
  "C28",
  "C29",
  "C30",
  "C31",
  "C32",
  "C33",
]);
const barData = ref([
  [
    410, 302, 410, 390, 390, 390, 390, 390, 390, 360, 410, 410, 410, 302, 410,
    390, 390, 390, 390, 390, 390, 360, 410, 410, 410, 302, 410, 390, 390, 390,
    390, 390, 390,
  ],
  [
    295, 410, 360, 280, 280, 410, 410, 320, 330, 410, 250, 310, 295, 410, 360,
    280, 280, 410, 410, 320, 330, 410, 250, 310, 295, 410, 360, 280, 280, 410,
    410, 320, 330,
  ],
  [
    705, 712, 770, 670, 670, 800, 800, 710, 720, 770, 660, 720, 705, 712, 770,
    670, 670, 800, 800, 710, 720, 770, 660, 720, 705, 712, 770, 670, 670, 800,
    800, 710, 720,
  ],
]);
let myBarChart: echarts.ECharts | null = null;
const showBarEcharts = () => {
  if (!myBarChart) {
    const barChartDom = document.getElementById("barChart");
    myBarChart = echarts.init(barChartDom);
  }
  const barOption = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(7,18,26, 1)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      axisPointer: {
        lineStyle: {
          color: "rgba(69, 173, 175, 1)",
        },
      },
      formatter: function (params: any) {
        let res = "";
        let title = "";
        params.forEach((item: any) => {
          title = `${item.name} <br/>`;
          res += `<span style="font-weight:700;color: ${item.color}"> ${item.seriesName} : ${item.value}kWh</span><br/>`;
        });
        return title + res;
      },
    },
    // 图例
    legend: {
      show: false,
    },
    // 图表位置
    grid: {
      left: "9%",
      top: "2%",
      right: "0%",
      bottom: "0%",
    },
    xAxis: {
      show: false,
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisTick: {
          show: false,
        },
        data: xData.value,
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
          fontSize: 12,
          interval: 0,
        },
      },
    ],
    series: [
      {
        name: "实际发电量",
        type: "bar",
        stack: "",
        itemStyle: {
          color: "#0A7912",
          borderRadius: [0, 5, 5, 0],
        },
        label: {
          // 数值显示配置
          show: false,
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "kWh";
          },
        },
        barWidth: 7,
        data: barData.value[2],
        z: -3,
        barGap: "-100%",
      },
      {
        name: "原发电量",
        type: "bar",
        stack: "total",
        itemStyle: {
          color: "#194295",
        },
        label: {
          show: false,
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "kWh";
          },
        },
        barWidth: 7,
        data: barData.value[0],
      },
      {
        name: "提升发电量",
        type: "bar",
        stack: "total",
        itemStyle: {
          color: "#12CAC8",
          borderRadius: [0, 5, 5, 0],
        },
        label: {
          show: false,
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value + "kWh";
          },
        },
        barWidth: 7,
        data: barData.value[1],
      },
    ],
  };
  barOption && myBarChart.setOption(barOption);
};
const resizeChart = () => {
  if (myBarChart) {
    myBarChart.resize();
  }
};
onMounted(() => {
  showBarEcharts();
  window.addEventListener("resize", resizeChart);
});
</script>

Every act of honesty plants seeds for trust to eventually grow.