echarts柱状图视觉3D效果

ps：图片中的数据与代码中的数据不一致，但是样式没有问题。我并不是原创，这是我在csdn上找的代码，然后在源代码的基础上进行的更改，但是我找不到之前的文章了。若有侵权，请及时联系作者，谢谢。

 设置option

// 設置柱狀圖3D效果的option
function getEcharts3DBar(data1, data2) {
    var sideData = data1.map(item => item + 90);
    var sideData2 = data1.map(item => item + 90);
    //var colorArr = ["#0C628C", "#3887D5", "#2570BB"];
    var colorArr = ["#902724", "#c23531", "#ae312e"];// 設置顏色
    var color = {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: colorArr[0],
            },
            {
                offset: 0.5,
                color: colorArr[0],
            },
            {
                offset: 0.5,
                color: colorArr[1],
            },
            {
                offset: 1,
                color: colorArr[1],
            },
        ],
    };

    //var colorArr2 = ["#53aa29", "#7fbb62", "#4c9b26"];
    var colorArr2 = ["#2f4554", "#3d596c", "#354c5c"];// 設置顏色
    var color2 = {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: colorArr2[0],
            },
            {
                offset: 0.5,
                color: colorArr2[0],
            },
            {
                offset: 0.5,
                color: colorArr2[1],
            },
            {
                offset: 1,
                color: colorArr2[1],
            },
        ],
    };

    var barWidth = 30; // 設置柱狀圖柱子的寬度
    var option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var str = params[0].name + ":";
                params.filter(function (item) {
                    if (item.componentSubType == "bar") {
                        str += "<br/>" + item.seriesName + "：" + item.value;
                    }
                });
                return str;
            },
        },
        grid: {
            x: '7%',
            x2: '0%',
            y: '15%',
            y2: '15%',
        },
        legend: {
            show: false,
            data: ['簽核已完成', '簽核中'],
            textStyle: {
                color: '#fff',
                fontSize: '20'
            }
        },
        xAxis: {
            data: ['化學', '包材', '金加一', '金加二', '金屬', '設備', '塑加','塑料'],
            //坐标轴
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#214776'
                },
                textStyle: {
                    color: '#fff',
                    fontSize: '10'
                }
            },
            type: 'category',
            axisLabel: {
                textStyle: {
                    color: '#C5DFFB',
                    fontWeight: 500,
                    fontSize: '14'
                }
            },
            axisTick: {
                textStyle: {
                    color: '#fff',
                    fontSize: '16'
                },
                show: false,
            },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            //坐标轴
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#214776'
                },
                textStyle: {
                    color: '#fff',
                    fontSize: '10'
                }
            },
            axisTick: {
                show: false
            },
            //坐标值标注
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#C5DFFB',
                }
            },
            //分格线
            splitLine: {
                lineStyle: {
                    color: '#13365f'
                }
            }
        },
        series: [
            {
                z: 1,
                name: '簽核已完成',
                type: "bar",
                barWidth: barWidth,
                barGap: "0%",
                data: data2,
                itemStyle: {
                    normal: {
                        color: color
                    },
                },
            },
            {
                z: 2,
                name: '簽核已完成',
                type: "pictorialBar",
                data: sideData,
                symbol: "diamond",
                symbolOffset: ["-75%", "50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    normal: {
                        color: color
                    },
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 3,
                name: '簽核已完成',
                type: "pictorialBar",
                symbolPosition: "end",
                data: data2,
                symbol: "diamond",
                symbolOffset: ["-75%", "-50%"],
                symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                itemStyle: {
                    normal: {
                        borderWidth: checkNumsIsZero(data2),
                        color: colorArr[2]
                    },
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 1,
                name: '簽核中',
                type: "bar",
                barWidth: barWidth,
                barGap: "50%",
                data: data1,
                itemStyle: {
                    normal: {
                        color: color2
                    },
                },
            },
            {
                z: 2,
                name: '簽核中',
                type: "pictorialBar",
                data: sideData2,
                symbol: "diamond",
                symbolOffset: ["75%", "50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    normal: {
                        color: color2
                    },
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 3,
                name: '簽核中',
                type: "pictorialBar",
                symbolPosition: "end",
                data: data1,
                symbol: "diamond",
                symbolOffset: ["75%", "-50%"],
                symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                itemStyle: {
                    normal: {
                        borderWidth: checkNumsIsZero(data1),
                        color: colorArr2[2]
                    },
                },
                tooltip: {
                    show: false,
                },
            },
        ],
    };
    return option;
}

使用

// 调用
var myChart = echarts.init(document.getElementById('myId'));

// data的数据格式就是int类型的数组；例：data1=[1,56,3,84,12]
myChart.setOption(getEcharts3DBar(data1, data2));