解决echarts x轴最后一个label的名称被加粗的问题

echarts版本 4.6.0,从官网的示例来看,5.0及以上版本不存在该问题,经过测试发现,是因为设置了 axisLabel的interval:0的属性导致的,最后一个名字出现了重复渲染,如果x轴的名称无需全部显示,将该属性注释即可。如果需要设置为interval:0,那么可以采用下列方法来解决

//假设 xAxis的data要接受的数据如下
let data = ['a','b','c'];
//那么可以进行如下处理后再使用
for (let i = 0; i < data.length; i++) {
    let textStyle = {
        borderColor:'#ffffff',
        borderWidth: 0,
    };
	//如果是最后一个,则设置它的颜色为黑色 半透明,这样看起来与其他字体的颜色就一致了
    if (i==data.length-1){
        textStyle = {
            color:'rgba(0,0,0,0.5)'
        };
    }
    xLabel.push({
        value:data[i],
        textStyle: textStyle
    });
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值