Echarts 圓形立體柱狀圖

先放個效果圖

const resData = [
        { label: "上海", value: 66 },
        { label: "北京", value: 26 },
        { label: "蘇州", value: 35 },
        { label: "杭州", value: 56 },
        { label: "無錫", value: 76 },
        { label: "哈爾濱", value: 54 },
        { label: "濟南", value: 10 },
        { label: "石家庄", value: 20 },
        { label: "鄭州", value: 80 },
        { label: "南京", value: 48 },
      ];
//   取最大值 (數據的最大值或根據項目實際情況)
const maxValueData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100];
option = {
    title: {
        text: '',
    },
    xAxis: {    
        type: 'category',
        inverse: true,
        offset: 20,
        axisLabel: {
            show: true,
            interval: 'auto',
            color: 'rgb(106, 148, 255)',
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        data: resData.map((item) => {
              return item.label;
            }),
    },
    yAxis: {
        type: 'value',
        offset: 30,
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgb(106, 148, 255)',
            },
        },
        splitLine: {
            show: false,
        },
        axisTick: {
            show: true,
            inside: true,
            length: 10,
        },
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value}',
        },
    },
    series: [
        {
            // 上半截柱子(背部陰影bar)
            name: '2019',
            type: 'bar',
            barWidth: '30',
            barGap: '-100%',
            z: 0,
            itemStyle: {
                //lenged文本
                opacity: 1,
                color: function (params) {
                    return new echarts.graphic.LinearGradient(0,0,1, 0,
                        [
                            {
                                offset: 0,
                                color: 'rgba(207, 235, 255)', // 0% 處的顏色
                            },
                            {
                                offset: 1,
                                color: 'rgba(228, 242, 255)', // 100% 處的顏色
                            },
                        ],
                        false
                    );
                },
            },
            data: maxValueData,
        },
        {
            ///最頂部圓片(背部陰影最頂部圓片)
            name: '',
            type: 'pictorialBar',
            symbolSize: [30,10],
            symbolOffset: [0, -5],
            z: 3,
            symbolPosition: 'end',
            itemStyle: {
                color: 'rgb(174, 222, 255)',
                opacity: 1,
            },
            data: maxValueData,
        },
        {
            //數據柱子 (藍色柱子)
            name: '2020',
            type: 'bar',
            barWidth: 30,
            barGap: '-100%',
            itemStyle: {
                //lenged文本
                opacity: 1,
                color: function (params) {
                    return new echarts.graphic.LinearGradient( 0,0,1,0,
                        [
                            {
                                offset: 0,
                                color: 'rgba(0, 111, 255)', // 0% 處的顏色
                            },
                            {
                                offset: 1,
                                color: 'rgba(29, 227, 255)', // 100% 處的顏色
                            },
                        ],
                        false
                    );
                },
            },
            data: resData.map((item) => {
              return item.value;
            }),
        },
        {
            //數據圓片(藍色柱子的頂部圓片)
            name: '',
            type: 'pictorialBar',
            symbolSize: [30, 10],
            symbolOffset: [0, -5], 
            z: 3,
            itemStyle: {
                opacity: 1,
                color: 'rgb(27, 140, 255)'
            },
            symbolPosition: 'end',
            data: resData.map((item) => {
              return item.value;
            }),
            // 柱子頂部顯示值
            // label: {
            //     show: true,
            //     position: 'top',
            //     distance: 0,
            //     formatter: '{c}'
            // },
            
        },
        {
            //最底部圓片
            name: '',
            type: 'pictorialBar',
            symbolSize: [30, 10],  //圓片的形狀大小
            symbolOffset: [0, 3],  //圓片的偏移量
            z: 3,
            itemStyle: {
                opacity: 1,
                color: 'rgb(0, 111, 255)'
                //color: '#000'
            },
            symbolPosition: 'end',
            data: [1, 1, 1, 1, 1,1, 1, 1, 1, 1],
        },
    ],
};