解决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
    });
}

你可能感兴趣的:(echarts,前端,echarts)