vue3横着的堆叠图展示（附效果图）

const option3 = computed(() => {
    const defaultOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {},

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        axisLine: {
          show: false, // 隐藏 X 轴线
        },
        axisTick: {
          show: false, // 隐藏 X 轴刻度线
        },
        splitLine: {
          show: false, // 隐藏 X 轴分割线
        },
        axisLabel: {
          show: false,
        },
      },
      graphic: [
        {
          type: 'text',
          right: 20, // 文本距离右侧的距离
          top: 50, // 文本垂直居中
          style: {
            text: '单位：万千瓦时',
            fontSize: 14,
          },
        },
      ],
      yAxis: {
        type: 'category',
        // name: '单位：万千瓦时',

        axisLine: {
          lineStyle: {
            color: '#000',
          },
          show: false,
        },
        // axisLine: {
        //   show: false, // 隐藏 X 轴线
        // },
        axisTick: {
          show: false, // 隐藏 X 轴刻度线
        },
        splitLine: {
          show: false, // 隐藏 X 轴分割线
        },
        // axisLabel: {

        //   interval: 0, //强制所有标签都显示
        //   lineHeight: 50, //每个标签占用50个像素高度
        // },
        data: nameList.value
          // .reverse()
          .flatMap((company) => [`${company}计划`, `${company}实际`])
          .reverse(),
        // name: '单位：万千瓦时',
        // axisLine: {
        //   lineStyle: {
        //     color: '#000',
        //   },
        // },
      },
      series: [
        {
          name: '1月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },

          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[0],
        },
        {
          name: '2月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[1],
        },
        {
          name: '3月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[2],
        },
        {
          name: '4月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[3],
        },
        {
          name: '5月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[4],
        },
        {
          name: '6月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[5],
        },
        {
          name: '7月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[6],
        },
        {
          name: '8月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[7],
        },
        {
          name: '9月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[8],
        },
        {
          name: '10月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[9],
        },
        {
          name: '11月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[10],
        },
        {
          name: '12月',
          type: 'bar',
          stack: 'Total',
          barWidth: '20',
          areaStyle: {},
          label: {
            show: true,
            position: 'inside',
            formatter: function (params) {
              if (params.name.indexOf('计划') !== -1) {
                return params.seriesName;
              } else {
                return '';
              }
            },
            color: '#000',
          },
          emphasis: {
            focus: 'series',
          },
          data: bigarr.value[11],
        },
      ],
    };

    return defaultOption;
  });