Echarts 3D立体堆叠柱状图

实现效果如下图

1：堆叠柱状图组成

      其实是利用5部分拼接而成得，3个底部菱形和2个直角边，直角边利用两种颜色得对比渲染而成.

2:具体代码实现

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const echart = ref<any>();
const color = [
    {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: "#12509D",
            },
            {
                offset: 0.5,
                color: "#12509D",
            },
            {
                offset: 0.5,
                color: "#1870DA",
            },
            {
                offset: 1,
                color: "#1870DA",
            },
        ],
    },
    {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: "#23D2DA",
            },
            {
                offset: 0.5,
                color: "#23D2DA",
            },
            {
                offset: 0.5,
                color: "#25DEE6",
            },
            {
                offset: 1,
                color: "#25DEE6",
            },
        ],
    },
];
const barWidth = 30;
const xData = ["1月", "2月", "3月"];
// 总数据
const allData = [1000, 660, 800];
// 完成数据
const completeData = [720, 532, 301];
const topData = ref<any>([]);
const milddleData = ref<any>([]);

//计算堆叠数据为多少
for (var i = 0; i < allData.length; i++) {
    allData[i] = Number(allData[i]);
    completeData[i] = Number(completeData[i]);
    milddleData.value[i] = allData[i] - completeData[i];
    if (allData[i] <= 0) {
        topData.value.push({
            value: 0,
            itemStyle: {
                normal: {
                    borderColor: "red",
                    borderWidth: 2,
                    color: "rgba(0,0,0,0)",
                },
            },
        });
    } else {
        if (milddleData[i] > 0) {
            topData.value.push({
                value: allData[i],
                itemStyle: {
                    normal: {
                        borderColor: "#29F1FA",
                        borderWidth: 2,
                        color: "#29F1FA",
                    },
                },
            });
        } else {
            topData.value.push({
                value: allData[i],
                itemStyle: {
                    normal: {
                        borderColor: "#1D8EF3",
                        borderWidth: 2,
                        color: "#1D8EF3",
                    },
                },
            });
        }
    }
};

onMounted(() => {
    init();
});

let init = () => {
    var myChart = echarts.init(echart.value);

    var option;

    option = {
        tooltip: {
            trigger: 'axis',
        },
        // 调整图像x轴
        xAxis: {
            data: xData,
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
            },
            axisLine: {
                show: true,
            },
        },
        //调整图像y轴
        yAxis: {
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
            },
            axisLabel: {
                show: true,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#FFFFFF',
                    width: 1,
                    opacity: 0.11,
                }
            }
        },
        //图像展示部分
        series: [
            {
                z: 1,
                name: "消耗",
                type: "bar",
                stack: '1',
                barWidth: barWidth,
                // stack: "总量",
                color: color[0],
                data: completeData,
            },
            {
                z: 2,
                name: "剩余",
                type: "bar",
                stack: '1',
                barWidth: barWidth,
                // stack: "总量",
                color: color[1],
                data: milddleData.value,
            },
            //某个柱形的底部
            {
                z: 3,
                name: "中部",
                type: "pictorialBar",
                data: completeData,
                symbol: "diamond",
                symbolPosition: "end",
                symbolOffset: ["0%", "-50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    normal: {
                        color: color[1],
                    },
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 4,
                name: "总量",
                type: "pictorialBar",
                symbolPosition: "end",
                data: topData.value,
                symbol: "diamond",
                symbolOffset: ["0%", "-50%"],
                symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                tooltip: {
                    show: true,
                },
                itemStyle: {
                    normal: {
                        label: {
                            formatter: "{c}",
                            show: true,
                            position: "top",
                            textStyle: {
                                fontWeight: 400,
                                fontSize: "13",
                                color: "#F2F7FA",
                                lineHeight: 20,
                            },
                        },
                    }
                }
            },

        ],

    }
    option && myChart.setOption(option);

};
</script>

不足之处欢迎指正 ！！!