简易进度条echarts pictorialBar配置项内容和展示

              const max = 100
        const value = 20;
        const rich = {
            white: {
                color: '#2ad1d2',
                fontSize: 16,
            }
        };
        option = {
            backgroundColor: 'black',
            tooltip: {
                show: false
            },
            grid: {
                top: 0,
                left: '30%',
                right: '40%',
                bottom: 0,
                // borderColor: '#000',
                // borderWidth: 1,
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    show: false,
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitArea: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    show: false,
                },
                data: [],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            series: [{
                    //For shadow, 解决最大值接近整数时label被截断的问题
                    type: 'pictorialBar',
                    symbol: 'rect',
                    symbolRepeat: 'fixed',
                    // symbolClip: true,
                    symbolSize: [4, 35],
                    symbolMargin: 1,
                    symbolBoundingData: max,
                    barWidth: '50%',
                    itemStyle: {
                        normal: {
                            color: '#2d3b46'
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 20
                            },
                            position: 'right',
                            formatter: function(data) {
                                return '{white|' + value + '%' + '}'
                            },
                            rich: rich
                        }
                    },
                    data: [max],
                    animation: false,
                    z: 1
                },
                {
                    name: "lalal",
                    type: 'pictorialBar',
                    symbol: 'rect',
                    symbolRepeat: true,
                    symbolSize: [4, 35],
                    symbolMargin: 1,
                    symbolBoundingData: max,
                    barWidth: '50%',
                    // label: {
                    //     show: false,
                    //     normal:{
                    //          position: 'right',
                    //     }

                    // },

                    data: [value],
                    itemStyle: {
                        normal: {
                            color: "#42ecb2"
                        }
                    },
                    z: 2
                }
            ]
        }