基于Echarts的横向双3D柱形图

话不多说，直接贴代码 ==>> Echarts 3D柱形图 横向

<div id="CScharts6" style="width:100%;height:100%;"></div>

这是方法

 getCharts() {
            // console.log(target_pct, act_pct)
            var myChart = echarts.init(document.getElementById('CScharts6'));
            let manNumber = [32, 20, 18, 33];
            let womanNumber = [12, 32, 14, 26];
            let xData = ['设备1', '设备2', '设备3', '设备4'];

            let barWidth = 18;
            let manColors = [];
            let womanColors = [];
            for (let i = 0; i < 10; i++) {
                manColors.push({
                    type: 'linear',
                    x: 0,
                    x2: 0,
                    y: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#6FCAF9', // 最左边
                        },
                        {
                            offset: 0.5,
                            color: '#69B5F4', // 左边的右边 颜色
                        },
                        {
                            offset: 0.5,
                            color: '#4D7DB5', // 右边的左边 颜色
                        },
                        {
                            offset: 1,
                            color: '#6AB8F9',
                        },
                    ],
                });
                womanColors.push({
                    type: 'linear',
                    x: 0,
                    x2: 0,
                    y: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#6CE6C5', // 最左边
                        },
                        {
                            offset: 0.5,
                            color: '#6EE7C6', // 左边的右边 颜色
                        },
                        {
                            offset: 0.5,
                            color: '#5AC1A7', // 右边的左边 颜色
                        },
                        {
                            offset: 1,
                            color: '#61CDB1',
                        },
                    ],
                });
            }
            let option = {
                // backgroundColor: '#010d3a',
                //提示框
                tooltip: {
                    trigger: 'axis',
                    confine:true,
                    formatter: function (e) {
                        // console.log(e);
                        var str =
                            e[0].axisValue +
                            "<br>" +
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
                            e[0].color.colorStops[0].color +
                            ";'></span>" +
                            "" +
                            e[0].seriesName +
                            " : " +
                            e[0].value +
                            "（%）<br>" +
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
                            e[3].color.colorStops[0].color +
                            ";'></span>" +
                            "" +
                            e[3].seriesName +
                            " : " +
                            e[3].value +
                            "（%）";
                        return str;
                    },
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                // 图例
                legend: {
                //legend自己调位置，不想展示就设置show:false
                    show: true,
                    itemGap: 20,
                    top: 20,
                    right: '10%',
                    // itemWidth: 14,
                    itemHeight: 14,
                    selectedMode: false,
                    data: [
                        {
                            name: '计划完成量',
                            icon: 'roundRect',
                            itemStyle: {
                                 color: '#02E4FF',
                            },
                        },
                        {
                            name: '实际完成量',
                            icon: 'roundRect',
                            itemStyle: {
                                color: '#02E4FF',
                            },
                        },
                    ],
                    textStyle: {
                        color: '#fff',
                    },
                },
                /**区域位置*/
                grid: {
                    left: '14%',
                    right: '10%',
                    top: '0',
                    bottom: '16%',
                },
                //X轴
                yAxis: {
                    data: xData,
                    type: 'category',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#D1D2D5",
                        },
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "rgba(135,140,147,1)", //左侧显示线
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        // formatter: "{value}%",
                        textStyle: {
                            color: "#A5A5A6",
                            fontSize: 12,
                        },
                    },
                },
                xAxis: {
                    show: true,
                    splitNumber: 4,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#D1D2D5",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show:false
                    },
                    axisLabel: {
                        show:true,
                        formatter: "{value}%",
                        // interval: 0,
                        // rotate: 40,
                        textStyle: {
                            fontFamily: "Microsoft YaHei",
                            color: "#A7A7A8", // x轴颜色
                            fontWeight: "normal",
                            fontSize: "12",
                            lineHeight: 22,
                        },
                        interval: 0, //标签设置为全部显示
                        margin: 15,
                        lineHeight: 15,
                    }
                },
                series: [
                    {
                        name: '计划完成量',
                        type: 'bar',
                        barWidth: barWidth,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return manColors[params.dataIndex % 7];
                                },
                            },
                        },
                        data: manNumber,
                    },
                    {
                        z: 2,
                        type: 'pictorialBar',
                        data: manNumber,
                        symbol: 'diamond',
                        symbolOffset: ['-50%', '-60%'],
                        symbolSize: [barWidth * 0.5, barWidth],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return manColors[params.dataIndex % 7];
                                },
                            },
                        },
                    },
                    {
                        z: 3,
                        type: 'pictorialBar',
                        symbolPosition: 'end',
                        data: manNumber,
                        symbol: 'diamond',
                        symbolOffset: ['50%', '-60%'],
                        symbolSize: [barWidth * 0.5, barWidth],
                        itemStyle: {
                            normal: {
                                borderWidth: 0,
                                color: '#72E0FB',
                            },
                        },
                    },
                    // ---------------------分割线---------------------
                    {
                        name: '实际完成量',
                        type: 'bar',
                        barWidth: barWidth,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return womanColors[params.dataIndex % 7];
                                },
                            },
                        },
                        data: womanNumber,
                    },
                    {
                        z: 2,
                        type: 'pictorialBar',
                        data: womanNumber,
                        symbol: 'diamond',
                        symbolOffset: ['-50%', '60%'],
                        symbolSize: [barWidth * 0.5, barWidth],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return womanColors[params.dataIndex % 7];
                                },
                            },
                        },
                    },
                    {
                        z: 3,
                        type: 'pictorialBar',
                        symbolPosition: 'end',
                        data: womanNumber,
                        symbol: 'diamond',
                        symbolOffset: ['50%', '60%'],
                        symbolSize: [barWidth * 0.5, barWidth],
                        itemStyle: {
                            normal: {
                                borderWidth: 0,
                                color: "#8CF4DD",
                            },
                        },
                    },
                ],
            };
        },

ok,简单粗暴完事，legend和echarts的位置自己去调整就好了，因为实际应用的时候，我是隐藏legend的，没有用上