圆柱echarts pictorialBar配置项内容和展示

      var data = 65; //百分比
option = {
    backgroundColor: '#0e202d',
    tooltip: {
        trigger: 'none',
    },
    xAxis: {
        data: ['百分比'],
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
            textStyle: {
                color: '#e54035',
            },
        },
    },
    yAxis: {
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
    },
    series: [
        {
            name: '最上层立体圆',
            type: 'pictorialBar',
            symbolSize: [300, 45],
            symbolOffset: [0, -20],
            z: 12,
            itemStyle: {
                normal: {
                    color: 'rgba(8,44,110, 1)',
                },
            },
            data: [
                {
                    value: 100,
                    symbolPosition: 'end',
                },
            ],
        },
        {
            name: '中间立体圆',
            type: 'pictorialBar',
            symbolSize: [300, 45],
            symbolOffset: [0, -20],
            z: 12,
            itemStyle: {
                normal: {
                    color: () =>
                        new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                            {
                                offset: 0,
                                color: '#03C7F9',
                            },
                            {
                                offset: 1,
                                // color: '#03C7F922',
                                color: 'rgb(8,44,110)',
                            },
                        ]),
                    shadowColor: '#03C7F9',
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 4,
                },
            },
            data: [
                {
                    value: data,
                    symbolPosition: 'end',
                },
            ],
        },
        {
            name: '最底部立体圆',
            type: 'pictorialBar',
            symbolSize: [300, 45],
            symbolOffset: [0, 20],
            z: 12,
            itemStyle: {
                normal: {
                    color: () =>
                        new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                            {
                                offset: 0,
                                color: '#03C7F9',
                            },
                            {
                                offset: 0.9,
                                // color: '#03C7F922',
                                color: 'rgba(8,44,110, 0.85)',
                            },
                        ]),
                    // shadowColor: '#03C7F9',
                    // shadowBlur: 30,
                    // shadowOffsetX: 0,
                    // shadowOffsetY: -10,
                },
            },
            data: [100 - data],
        },
        {
            //底部立体柱
            stack: '1',
            type: 'bar',
            itemStyle: {
                normal: {
                    // color: 'rgba(8,44,110, 0.94)',
                    color: () =>
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: 'rgba(18,85,213,0.77)',
                            },
                            // {
                            //     offset: 0.05,
                            //     color: '#47C8FF44',
                            // },
                            // {
                            //     offset: 0.1,
                            //     color: '#47C8FF00',
                            // },
                            // {
                            //     offset: 0.9,
                            //     color: '#47C8FF00',
                            // },
                            // {
                            //     offset: 0.95,
                            //     color: '#47C8FF44',
                            // },
                            {
                                offset: 1,
                                color: 'rgba(8,44,110, 0.77)',
                            },
                        ]),
                    opacity: 0.77,
                },
            },
            label: {
                distance: 15,
                show: true,
                position: data > 58 ? 'inside' : 'top',
                formatter: '{c}' + '%',
                fontSize: 100,
                color: '#1AFCFF',
                textShadowColor: '#03C7F9',
                textShadowBlur: 30,
                textShadowOffsetX: 5,
                textShadowOffsetY: 10,
            },

            silent: true,
            barWidth: 300,
            barGap: '-100%', // Make series be overlap
            data: [data],
        },
        {
            //上部立体柱
            stack: '1',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: () =>
                        new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            {
                                offset: 0,
                                color: '#47C8FF77',
                            },
                            {
                                offset: 0.05,
                                color: '#47C8FF44',
                            },
                            {
                                offset: 0.15,
                                color: '#47C8FF00',
                            },
                            {
                                offset: 0.85,
                                color: '#47C8FF00',
                            },
                            {
                                offset: 0.95,
                                color: '#47C8FF44',
                            },
                            {
                                offset: 1,
                                color: '#47C8FF77',
                            },
                        ]),
                },
            },
            silent: true,
            barWidth: 300,
            barGap: '-100%', // Make series be overlap
            data: [100 - data],
        },
    ],
};