带箭头的进度条（柱形图）echarts 柱状配置项内容和展示

      var data1 = 62;
option = {
    backgroundColor: 'rgba(0,0,0,0.9)',
    yAxis: {
        type: 'category',
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: false,
        },
    },

    xAxis: {
        show: false,
        max: 100,
    },
    grid: {
        top: '40',
        right: '15%',
        left: '15%',
        bottom: '40', //图表尺寸大小
    },
    animationDuration: 3000,
    series: [
        {
            type: 'bar',
            barWidth: 20,
            z: 1,
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(1, 54, 55, 1)',
                borderRadius: [30, 30, 30, 30], //圆角大小
            },
            label: {
                show: true,
                position: 'insideTopRight', //每一条的数据位置
                padding: [12, -16, 0, 0],
                formatter: (params) => {
                    return '▲';
                },
               color: 'rgba(254, 173, 84, 1)',
               /*color:function (params1) { // 这个不出效果
                    let Textcolor = '#ffffff';
                    if (params1.value > 5 || params1.value === 5) {
                        Textcolor = 'rgba(229, 86, 63, 1)';
                    } else if (params1.value < 5 && (params1.value > 3 || params1.value === 3)) {
                        Textcolor = 'rgba(254, 173, 84, 1)';
                    } else if (params1.value < 3 && params1.value > 1) {
                        Textcolor = 'rgba(254, 173, 84, 0.5)';
                    } else if (params1.value === 1) {
                        Textcolor = 'rgba(48, 201, 137, 1)';
                    } else {
                        Textcolor = '#ffffff';
                    }
                    return Textcolor;
                },*/
                fontSize: 28,
            },
            itemStyle: {
                normal: {
                    color: function (params) {
                        let color1 = {};
                        if (params.value > 5) {
                            color1 = {
                                type: 'linear',
                                x: 1,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: 'rgba(48, 201, 137, 1)',
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(254, 173, 84, 1)',
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(229, 86, 63, 1)',
                                    },
                                ],
                            };
                        } else if ((params.value < 5 || params.value === 5) && params.value > 1) {
                            color1 = {
                                type: 'linear',
                                x: 1,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: 'rgba(48, 201, 137, 1)',
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(254, 173, 84, 1)',
                                    },
                                ],
                            };
                        } else if (params.value === 1) {
                            color1 = {
                                type: 'linear',
                                x: 1,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: 'rgba(48, 201, 137, 1)',
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(48, 201, 137, 1)',
                                    },
                                ],
                            };
                        }
                        return color1;
                    },
                    borderRadius: [30, 30, 30, 30], //圆角大小
                },
            },
            data: [data1],
        },
        {
            type: 'pictorialBar',
            z: 4,
            padding: [60, 0, 0, 0],
            barWidth: 25,
            symbolRepeat: true,
            symbolOffset: [12, -40],
            symbolMargin: 0,
            symbol:
                'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAAAXNSR0IArs4c6QAAAmNJREFUSEutlU2IjVEYx3/POx/NRIOtqREWLJhR477n3hSjZicLpURJ0pSQLEbZaKSwIR+FaPKRkmRByU4oi3veO1NMlDSRWSgLZkiN7tx5/7rDuNed+zETz/Kc//93np7nOecY/zmsKq8ztZJAHUAzFmeJ4yEGBl5V85QHOrfVZH2gVb/N41PQXzEs2Qky6ZuASuEzgQl3xIxTRcIJoQ2GPS6CYsaZ2PvemkBzziPCEuEYsLBk7Z0iv7wmkERivZndM9ndOGC41BDEtMrokbED7x/VBgJBmDwm1Fep+CbOxxl/qNx++aaE4XbDblcCyjiA9xdnD1ybXGeBnlcEoi1E0f3ZA51rMfEZqC9n0mRuCYODI7MH5uvo3B2JbTNN9lhRurtifStOfSrVapOxB1qLNKNCSaLo7dyBeUdnZ5vVNZwDbQKeCB2sBstbqt/lvKKrqz4YH78U53L7GRycqPWWFICJZHdg2im0CGgBa1J93TZyuW7D+mXswftrgXPXJS0F+2HYt1gMkUmfBOK/MrTQvQFWFGcgtIxsdpTGxi6y2ae8eDFmoXsGrP9LZ6TwPl0AtrfPs6bmb/nmlgA3E0UPgzC8EJv109b22j6MfJRxysTZaa1k+8ikLxeAyaSzWFMnlMQDNTbstuzEF4leAoZN5Af6OzB/WmtwJY783gIwDHcZdqMMUBKHzThtcEtiDcbqGTrxVBm/sQBMuKNmHK/VwSr7f56yqS4Hzl2V6PkH4IQi31jIMJVqZXIyDAg6kFbI1Aa2GMiP0IKig/JfwVfgE2jEzN7H0hDwkigamN1gzzHtnwu66BiasxGdAAAAAElFTkSuQmCC',
            data: [data1],
        },
    ],
};