echarts 3D圆柱

我们公司的美工又给我整活了。

  要这样的效果。

直接上代码

function zhux_chartes() {
            var zhux_chartes = echarts.init(document.getElementById('zhux_chartes'));
            var scale = 2;
            var xData = ['银行业务数字化', '支付业务数字化', '金融科技业务创新', '大数据金融业务', '证券业务数字化', '数字金融业务监管', '区块链金融业务', '保险业务数字化']
            var DataSF = ["100", "86", "99", "89", "66", "99", "89", "66"];
            var DataDF = ["55", "86", "96", "69", "89", "86", "96", "69"];

            var option =
            {
                tooltip:
                {
                    trigger: 'axis',
                    textStyle:
                    {
                        fontSize: 12,
                    },
                    formatter: function (params) {
                        let returnStr = `
                            <span style="color:#00c6ff">${params[2].seriesName}：${params[2].value}</span><br />
                            <span style="color:#f6bd42">${params[5].seriesName}：${params[5].value}</span><br />
                        `;
                        return returnStr;
                    }
                },
                grid:
                {
                    left: '2%',
                    right: '4%',
                    bottom: '4%',
                    top: '16%',
                    containLabel: true
                },
                legend:
                {
                    // data: ['银行业务数字化', '支付业务数字化', '金融科技业务创新', '大数据金融业务', '证券业务数字化', '数字金融业务监管', '区块链金融业务', '保险业务数字化'],
                    data: ["失分情况", "得分情况"],
                    // right: 170,
                    top: 1,
                    textStyle:
                    {
                        color: "#FFFFFF",
                        fontSize: 10
                    },
                    itemWidth: 18,
                    itemHeight: 12,
                    selectedMode: false,
                    color: '#242424'
                },
                xAxis:
                {
                    type: 'category',
                    data: xData,
                    axisLabel:
                    {
                        interval: 0,
                        padding: [10, 0, 0, 0],
                        textStyle:
                        {
                            fontFamily: 'Microsoft YaHei',
                            color: '#9ae8ff',
                            fontWeight: 'normal',
                            fontSize: 10,
                            lineHeight: 14
                        },
                        formatter: function (params) {
                            let newParamsName = '';
                            const paramsNameNumber = params.length; // 文字总长度
                            const provideNumber = 4; //一行显示几个字
                            const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                            if (paramsNameNumber > provideNumber) {
                                for (let p = 0; p < rowNumber; p++) {
                                    const start = p * provideNumber;
                                    const end = start + provideNumber;
                                    const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) : params.substring(start, end) + '\n';
                                    newParamsName += tempStr;
                                }
                            } else {
                                newParamsName = params;
                            }
                            return newParamsName;
                        }

                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            nameTextStyle:
                            {
                                color: '#ffffff',
                                fontSize: 12,
                            },
                            axisLine:
                            {
                                show: false,
                            },
                            splitLine:
                            {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(154,232,255,0.2)',
                                    width: 2
                                }
                            },
                            axisLabel:
                            {
                                formatter: '{value}',
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                        {
                            type: 'value',
                            nameTextStyle:
                            {
                                color: '#ffffff',
                                fontSize: 12,
                            },
                            axisLine:
                            {
                                show: false,
                            },
                            splitLine:
                            {
                                show: false,
                            },
                            axisLabel:
                            {
                                formatter: '{value}',
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                    ],
                series:
                    [
                        // 失分
                        {
                            yAxisIndex: 0,
                            type: 'pictorialBar',
                            symbolSize: [20, 8], // 左边柱子的天灵盖
                            symbolOffset: [-12, -2],// 左边柱子的天灵盖 的位置
                            symbolPosition: 'end',
                            z: 16,
                            color: "#00c6ff",
                            data: DataSF
                        },
                        {
                            yAxisIndex: 0,
                            type: 'pictorialBar',
                            symbolSize: [20, 6],
                            symbolOffset: [-12, 0],
                            z: 12,
                            color: "#00c6ff",
                            data: DataSF
                        },
                        {
                            name: '失分情况',
                            yAxisIndex: 0,
                            type: 'bar',
                            barWidth: 20,
                            itemStyle:
                            {
                                normal:
                                {
                                    opacity: .7,
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: '#00c6ff'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(0,198,255,0.2)'
                                            },
                                        ]),
                                    barBorderRadius: 0,
                                },
                            },
                            label:
                            {
                                show: false,
                                position: ['10', '-34'],
                                color: '#00f8ff',
                                fontSize: 12,
                            },
                            data: DataSF
                        },
                        // 得分
                        {
                            yAxisIndex: 0,
                            type: 'pictorialBar',
                            symbolSize: [20, 8],// 右边柱子的天灵盖
                            symbolOffset: [12, -2],// 右边柱子的天灵盖 的位置
                            symbolPosition: 'end',
                            z: 12,
                            color: "#f6bd42",
                            data: DataDF
                        },
                        {
                            yAxisIndex: 0,
                            type: 'pictorialBar',
                            symbolSize: [20, 6],
                            symbolOffset: [12, 0],
                            color: "#f6bd42",
                            z: 12,
                            data: DataDF
                        },

                        {
                            name: '得分情况',
                            yAxisIndex: 0,
                            type: 'bar',
                            barWidth: 20,
                            itemStyle:
                            {
                                normal:
                                {
                                    opacity: .7,
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: '#f6bd42'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(250,191,66,0.1)'
                                            },
                                        ]),
                                    barBorderRadius: 0,
                                }

                            },
                            label:
                            {
                                show: false,
                                position: ['10', '-34'],
                                color: '#00f8ff',
                                fontSize: 12,
                            },
                            data: DataDF
                        }
                    ]
            };
            // -------------------------
            zhux_chartes.setOption(option)
            window.addEventListener("resize", function () {
                zhux_chartes.resize()
            })
        }

大工告成。