echarts中series中的lable使用rich并且改变position文字出现黑边

问题描述

• lable使用rich
• 没有使用textStyle
• position设置为inside开头的值 满足以上三个条件才会出现黑边

样式

代码

options:{
    tooltip: {
        trigger: 'axis',
            formatter: function (params) {
                return params[0].name + ': ' + '<span style="color: yellow;">' + params[0].value + '</span>';
            }
    },
    grid: {
        left: 50,
            top: 0,
                bottom: 40,
                    right: 120
    },
    xAxis: {
        data: ['受理', '不受理'],
            axisTick: {show: false},
                axisLine: {show: false},
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                                fontSize:16
                        }
                    }
    },
    yAxis: {
        splitLine: {show: false},
            axisTick: {show: false},
                axisLine: {show: false},
                    axisLabel: {show: false}
    },
    series: [{
        type: 'pictorialBar',
        barCategoryGap: '-110%',
        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        itemStyle: {
            normal: {
                //barBorderRadius: 5,
                //渐变色
                color: function(params){
                    let colorList = [
                        new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(248,184,56,1)'},
                                {offset: 1, color: 'rgba(248,184,56,0.1)'}
                            ]
                        ),
                        new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(38,199,252,1)'},
                                {offset: 1, color: 'rgba(38,199,252,0.1)'}
                            ]
                        )

                    ];
                    return colorList[params.dataIndex];
                },
                label: {
                    show: true, //开启显示
                    position: 'insideBottom', //在上方显示
                    formatter: function (params) {
                        return '{zyzg|' + params.value + '}';
                    },
                    rich: {
                        'zyzg': {
                            color: '#2de5eb',
                            fontSize: 21,
                            fontFamily: 'Microsoft YaHei'
                        }
                    }
                }
            }


        },
        data: [25464,11646],
        z: 10
    }]
}

解决方法

• 不使用rich
• 设置position不为inside
• 如果非设置position为inside并且使用rich
  • 可以在外面加上textStyle，对象里面必须指定属性color，textStyle和series在一个层级
  • 也可以设置position为bottom，使用padding为负值 以上方式任选其一