echarts实现3D立体堆叠柱状图

基于这篇博客的灵感，在其基础上做了一些改动；

echarts叠加3D立体柱状图_黑色的糖果的博客-CSDN博客_echarts立体柱状堆叠图

效果图

实现代码：

var legends = ['A相','B相','C相'];
    var name = ['01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00'];
    // 数据数组1
    var data = [0.73,0.57,0.48,0.45,0.56,0.49,0.4,0.13,0.84,0.76,0.31,0.27,0.92];
    // 数据数组2
    var data2 = [1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44];
    var data3 = [1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44,1.44];
    var color = [
        {
            type: "linear",
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: "#a7f8f3",
                },
                {
                    offset: 0.5,
                    color: "#a7f8f3",
                },
                {
                    offset: 0.5,
                    color: "#62ccc6",
                },
                {
                    offset: 1,
                    color: "#62ccc6",
                },
            ],
        },
        {
            type: "linear",
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: "#fdb8b8",
                },
                {
                    offset: 0.5,
                    color: "#fdb8b8",
                },
                {
                    offset: 0.5,
                    color: "#f07070",
                },
                {
                    offset: 1,
                    color: "#f07070",
                },
            ],
        },        {
            type: "linear",
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: "#0ffdbf",
                },
                {
                    offset: 0.5,
                    color: "#0ffdbf",
                },
                {
                    offset: 0.5,
                    color: "#8ffd86",
                },
                {
                    offset: 1,
                    color: "#8ffd86",
                },
            ],
        },
    ];
    var barWidth = 30;
    var constData = [];
    var constData2 = [];
    var showData = [];
    var otherData = [];
    for (var i = 0; i < data.length; i++) {
        data[i] = Number(data[i]);
        data2[i] = Number(data2[i]);
        data3[i] = Number(data3[i]);
        otherData[i] = data[i] + data2[i] + data3[i];
        constData2[i] = data[i] + data2[i];
        if (data[i] <= 0) {
            constData.push(0);
            showData.push({
                value: 1,
                itemStyle: {
                    normal: {
                        borderColor: "rgba(0,0,0,0)",
                        borderWidth: 2,
                        color: "rgba(0,0,0,0)",
                    },
                },
            });
        } else {
            constData.push(1);
            if (data2[i] > 0) {
                showData.push({
                    value: data[i],
                    itemStyle: {
                        normal: {
                            borderColor: "#fdb8b8",// 第二个柱子底部的颜色
                            borderWidth: 2,
                            color: "#fdb8b8",
                        },
                    },
                });
            } else {
                showData.push({
                    value: data[i],
                    itemStyle: {
                        normal: {
                            borderColor: "#89e3ec",
                            borderWidth: 2,
                            color: "#89e3ec",
                        },
                    },
                });
            }
        }
    }
    console.log(constData)
    console.log(constData2)
    console.log(otherData)
    var option = {
        tooltip: {
            trigger: "axis",
            formatter: function (params) {
                return params[0].name + '<br/>'
                    + params[0].seriesName + ' : ' + (params[0].value).toFixed(2) + '<br/>'
                    + params[1].seriesName + ' : ' + (params[1].value).toFixed(2) + '<br/>'
                    + params[2].seriesName + ' : ' + (params[2].value).toFixed(2) + '<br/>';
            }
        },
        legend: {
            data: legends,
            selectedMode: false,//取消点击事件
            show: true
        },
        grid: {
            left: "3%", //图表距边框的距离
            right: "3%",
            top: "15%",
            bottom: "5%",
            containLabel: true,
        },
        xAxis: {
            data: name,
            axisTick: {
                show: false,
            },
        },
        yAxis: {
            name:'线损值/kWh',
            axisTick: {
                show: false,
            }
        },
        series: [
            {
                z: 1,
                name: legends[0],
                type: "bar",
                barWidth: barWidth,
                stack: "总量",
                color: color[0],
                data: data,
            },
            {
                z: 2,
                name:legends[1],
                type: "bar",
                barWidth: barWidth,
                stack: "总量",
                color: color[1],
                data: data2
            },
            {
                z: 3,
                name: legends[2],
                type: "bar",
                barWidth: barWidth,
                stack: "总量",
                color: color[2],
                data: data3
            },
            {
                z: 4,
                name: "项目",
                type: "pictorialBar",
                data: constData,
                symbol: "diamond",
                symbolOffset: ["0%", "50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    normal: {
                        color: color[0],
                    },
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 5,
                name: "项目",
                type: "pictorialBar",
                data: constData2,
                symbolPosition: "end",
                symbol: "diamond",
                symbolOffset: ["0%", "-50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    normal: {
                        color: color[2],
                    },
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 6,
                name: "项目",
                type: "pictorialBar",
                data: otherData,
                symbol: "diamond",
                symbolPosition: "end",
                symbolOffset: ["0%", "-50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    normal: {
                        color: color[2],
                    },
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 7,
                name: "项目",
                type: "pictorialBar",
                symbolPosition: "end",
                data: showData,
                symbol: "diamond",
                symbolOffset: ["0%", "-50%"],
                symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                tooltip: {
                    show: false,
                },
            },
        ],
    };