Echrts实现立体圆柱体 柱状图

就是这种效果，我用的echrts版本是5.4.1
废话不多说，直接上代码（里面代码有注释，我就不再解释了）
1.这个是html代码，我是vue2

<template>
    <div style="display: flex; position: relative">
        <div id="partEcharts" ref="partEcharts" style="width:100%;height:400px;"></div>
    </div>
</template>

2.下面是js代码

<script>
import * as echarts from "echarts";
    export default {
        data() {
            return {
                option:{
                    grid: {
                        left: '5%',
                        right: '5%',
                        top: '10%',
                        bottom: '12%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (parms) {
                            return parms.marker + " " + parms.name + "：" + parms.value + "%";
                        }
                    },
                    xAxis: {
                        type: 'category', // category(坐标轴类型)
                        data: ['上海', '许昌', '商丘', '北京', '西安', '苏州'],
                        axisTick: { // 坐标轴刻度相关配置
                            show: false // 是否显示坐标轴刻度
                        },
                        label:{
                            show:true
                        },
                        axisLine: { // 坐标轴轴线相关配置
                            lineStyle: { // 坐标轴轴线样式
                                color: 'rgba(255,255,255,0.15)' // 坐标轴轴线颜色
                            }
                        },
                        axisLabel: { // 坐标轴刻度标签相关配置
                            color: '#B7BDBF',
                            fontSize: 14,
                            fontWeight:600
                        }
                    },
                    yAxis: {
                        type: 'value', // value(数值轴,适用于连续数据)
                        name:'单位(%)',
                        nameTextStyle:{
                            color:'#fff',
                            padding:[0,32,10,0],
                        },
                        axisTick: { // 坐标轴刻度相关配置
                            show: false  // 是否显示坐标轴刻度
                        },
                        axisLine: { // 坐标轴轴线相关配置
                            show: false // 是否显示坐标轴轴线
                        },
                        axisLabel: { // 坐标轴刻度标签相关配置
                            color: '#ffffff',
                            fontSize: 14
                        },
                        splitLine: { // 坐标轴在 grid 区域中的分隔线
                            lineStyle: { // 分割线配置
                                color: 'rgba(255,255,255,0.15)' // 分割线颜色
                            }
                        },
                        interval:10,
                    },
                    series: [
                        // 底部的椭圆形(象形柱图):pictorialBar
                        {
                            type: "pictorialBar", // pictorialBar(象形柱图)
                            label: { // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
                                show: true, //是否显示标签
                                position: [0,-30], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
                                formatter:'{c}%',
                                color: '#fff',
                                fontSize: 14,

                            },
                            symbolSize: [16, 8], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
                            symbolOffset: [0, 0], // 图形相对于原本位置的偏移
                            z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
                            itemStyle: { // 图形样式
                                // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
                                // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    // 这里 offset: 0 1 ,表示从下往上的渐变色
                                    {
                                        offset: 0, // 0%处的颜色
                                        color: "rgba(31,97,234,0.8)"
                                    },
                                    {
                                        offset: 1, // 100%处的颜色
                                        color: "rgba(31,97,234,0.8)"
                                    }
                                ])
                            },
                            data: [78, 85, 78, 99, 67, 53],
                        },
                        // 中间的长方形柱状图(柱状图):bar
                        {
                            type: 'bar', // 柱状图
                            barWidth: 16, // 柱条的宽度,不设时自适应
                            barGap: '0%', // 柱子与柱子之间的距离
                            itemStyle: { // 图形样式
                                // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
                                // 下面就是使用线性渐变
                                color: {
                                    "x": 0,
                                    "y": 0,
                                    "x2": 0,
                                    "y2": 1,
                                    "type": "linear",
                                    "global": false,
                                    "colorStops": [{
                                        "offset": 0, // 0%处的颜色
                                        "color": "rgba(0,183,255,1.000)"
                                    }, {
                                        "offset": 1, // 100%处的颜色
                                        "color": "rgba(34,68,172,0.35)"
                                    }]
                                }
                            },
                            data: [78, 85, 78, 99, 67, 53]
                        },
                        // 顶部的椭圆形(象形柱图):pictorialBar
                        {
                            type: "pictorialBar",
                            symbolSize: [16, 10],
                            symbolOffset: [0, -5],
                            z: 12,
                            symbolPosition: "end",
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(33,243,255,1)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(33,243,255,1)"
                                    }
                                ], false)
                            },
                            data: [78, 85, 78, 99, 67, 53]
                        },
                        {
                            type: 'line', // 折线图
                            smooth: false, // 是否平滑曲线显示
                            showSymbol:true, //是否显示折线上的点
                            symbol:'circle',
                            symbolSize:6,
                            itemStyle:{
                                color:'#5FEEF1',
                                borderWidth:6,
                                borderColor:'rgba(23,224,253,0.29)'
                            },
                            lineStyle: {
                                color: '#37D8DC',
                                width: 1,
                            },
                            data: [90, 80, 78, 100, 67, 5]
                        }
                    ]
                }
            }
        },
        mounted(){
            let mycharts = echarts.init(this.$refs.partEcharts);
            mycharts.clear();
            echarts.registerTheme('myTheme', {
                itemStyle: this.itemStyle
            }); // 注册主题
            mycharts.setOption(this.option,'myTheme');
        }
    }
</script>