echarts设置立体柱状图

echarts设置立体柱状图，实现图如下：

【原理】两个柱状体，一个象形柱图拼接 直接上代码

const jobStatus = ref(null);
const initEcharts = ref("");

const initData = async () => {
  let barWidth = 20;
  let option = {
    title: {
      subtext: "单位",
      subtextStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "1%",
      right: "4%",
      bottom: "5%",
      top: "15%",
      containLabel: true,
    },
    xAxis: {
      data: ["张三", "李四", "王五", "赵六", "钱七", "孙八", "周九"],
      //坐标轴
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
      //坐标值标注
      axisLabel: {
        show: true,
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
    },

    yAxis: {
      //坐标轴
      max: 260,
      min: 0,
      splitNumber: 2,
      axisLine: {
        show: false,
      },
      //坐标值标注
      axisLabel: {
        show: true,
        color: "#fff",
      },
      //分格线
      splitLine: {
        lineStyle: {
          color: "#232D45",
          type: "dashed", // 设置虚线类型
        },
      },
    },
    series: [
      {
        name: "a",
        tooltip: {
          show: false,
        },
        type: "bar",
        barWidth: barWidth,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#0575DE", // 0% 处的颜色
              },
              {
                offset: 0.6,
                color: "#0761C0", // 60% 处的颜色
              },
              {
                offset: 1,
                color: "#09337C", // 100% 处的颜色
              },
            ],
            false
          ),
        },
        data: data,
        barGap: 0,
      },
      {
        type: "bar",
        barWidth: barWidth,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#0D67BD ", // 0% 处的颜色
              },
              {
                offset: 0.6,
                color: "#138CEB", // 60% 处的颜色
              },
              {
                offset: 1,
                color: "#17AAFE", // 100% 处的颜色
              },
            ],
            false
          ),
        },
        barGap: 0,
        data: data,
      },
      {
        name: "待处理",
        z: 3,
        type: "pictorialBar",
        symbolPosition: "end",
        data: data,
        symbol: "diamond",
        symbolOffset: ["0", "-50%"],
        symbolSize: [barWidth * 2, barWidth * 2 * 0.4],
        itemStyle: {
          color: "#17AAFE",
        },
      },
    ],
  };

  initEcharts.value = echarts.init(jobStatus.value);
  initEcharts.value.setOption(option);
  window.addEventListener("resize", function () {
    initEcharts.value.resize();
  });
 };
 
 onMounted(async () => {
  await initData();
});

参考： www.cnblogs.com/023cq/p/129… blog.csdn.net/rudy_zhou/a… www.duanlonglong.com/qdjy/1232.h…