vue+echarts 立体渐变色柱状图

结果：

代码：

renderChart () {
            const yData = [34, 54, 76, 40, 63]
            const xData = ['A', 'B', 'C', 'D', 'E']
            const myChart = echarts.init(document.getElementById('chart'))
            myChart.setOption({
                animation: true,
                animationEasing: 'linear',
                animationThreshold: 7,
                tooltip: {
                    trigger: 'item'
                },
                grid: {
                    top: '15%',
                    left: '8%',
                    right: '12%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    data: xData,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        symbol: ['none'],
                        symbolSize: [10, 17],
                        lineStyle: {
                            color: '#fff',
                            width: 0.5 // 改变坐标线的颜色
                        }
                    },
                    offset: 8,
                    axisLabel: {
                        // 调整x轴的lable
                        textStyle: {
                            fontSize: 14,
                            color: '#FFFFFF'
                        }
                    }
                },
                yAxis: {
                    // type: 'value',
                    // name:'',
                    splitNumber: 5,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: ['#555']
                        }
                    },
                    splitArea: {
                        // 柱状图后面的背景色
                        show: false
                        // areaStyle: {
                        //   color: ['rgba(221,247,250,0.7)','rgba(245,249,232,0.7)']
                        // }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 14
                    },
                    axisLine: {
                        show: true,
                        symbol: ['none'],
                        symbolSize: [15, 17],
                        lineStyle: {
                            color: '#fff',
                            width: 0.5 // 改变坐标线的颜色
                        }
                    }
                },
                axisPointer: {
                    show: false,
                    link: { xAxisIndex: 'all' },
                    type: 'shadow',
                    label: {
                        backgroundColor: '#777'
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'bar',
                        showSymbol: false,
                        hoverAnimation: false,
                        data: yData,
                        barWidth: 12, // 柱图宽度
                        // barCategoryGap:'60%',
                        itemStyle: {
                            // 左面
                            normal: {
                                color: function (params) {
                                    // let colorList = ['#7EEEFB']
                                    // return colorList[0]
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#58dde0' },
                                        { offset: 1, color: '#17334e' }
                                    ])
                                },
                                barBorderRadius: [4, 0, 0, 100]
                            }
                        }
                    },
                    {
                        name: '',
                        tooltip: {
                            show: true
                        },
                        type: 'bar',
                        barWidth: 12,
                        // barCategoryGap:'60%',
                        itemStyle: {
                            // 右面
                            normal: {
                                color: function (params) {
                                    // let colorList = ['#175e63']
                                    // return colorList[0]
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#175e63' },
                                        { offset: 1, color: '#122a46' }
                                    ])
                                },
                                borderWidth: 0.1,
                                barBorderRadius: [0, 5, 100, 0]
                            }
                        },
                        data: yData,
                        barGap: 0
                    },
                    {
                        name: 'b',
                        tooltip: {
                            show: false
                        },
                        type: 'pictorialBar',
                        itemStyle: {
                            // 顶部
                            normal: {
                                color: function (params) {
                                    let colorList = ['#47deea']
                                    return colorList[0]
                                },
                                borderColor: '#000',
                                borderWidth: 0.1,
                                label: {
                                    show: true, // 开启显示
                                    position: 'top', // 在上方显示
                                    textStyle: {
                                        // 数值样式
                                        color: '#FFFFFF',
                                        fontSize: 14,
                                        fontFamily: '微软雅黑'
                                    },
                                    offset: [0, -2]
                                }
                            }
                        },
                        symbol: 'diamond',
                        symbolSize: ['24.5', '13'],
                        symbolOffset: [0, '-38%'],
                        symbolPosition: 'end',
                        data: yData,
                        z: 3
                    },
                    {
                        name: 'd',
                        tooltip: {
                            show: false
                        },
                        type: 'pictorialBar',
                        itemStyle: {
                            // 底部
                            normal: {
                                color: function (params) {
                                    let colorList = ['#122a46']
                                    return colorList[0]
                                },
                                borderColor: '#000',
                                borderWidth: 0.1,
                                label: {
                                    show: false, // 开启显示
                                    position: 'top', // 在上方显示
                                    textStyle: {
                                        // 数值样式
                                        color: '#FFFFFF',
                                        fontSize: 14,
                                        fontFamily: '微软雅黑'
                                    },
                                    offset: [0, -2]
                                }
                            }
                        },
                        symbol: 'diamond',
                        symbolSize: ['24.5', '17'],
                        symbolOffset: [0, '2.5'],
                        symbolPosition: 'start',
                        data: yData,
                        z: 0
                    }
                ]
            })
        }

参考自https://www.jianshu.com/p/341a6aac7c92