echarts x轴最后一个文字加粗解决方法

1,272 阅读1分钟

今天在做echarts图表的时候,发现x轴最后一项被加粗了,因为我x轴label用了两种字体颜色,就可以很明显看出来,字体加粗是因为被重复渲染了。话不多说,先上图。

echarts 柱状图 我的echarts 配置项是这么写的,因为我要强制显示x轴的所有label,所以加了interval:0

xAxis: {
    axisLabel: {  
        interval:0
    },
    data:[]
}

我查了一下,正是因为interval:0这个强制显示策略,才会导致x轴最后一项重复渲染。只要改成interval:'auto'就不会有出现这个问题。 但是我这边的需求的确是要强制显示每一个x轴标签,interval:'auto'对我来说是不可取的。然后查到以下这种方案也可以解决最后一项重复渲染的问题。

axisLable:{
     borderWidth:10, // 加边框
     borderColor:'#fff', // 背景色
     interval:0
}

看看修改后的效果

给label加边框 虽然还是看得出来有些红色字体,但起码没有之前加粗这么严重了。如果x轴标签颜色单一的话,就看不出来啦。但是为什么强制显示所以x轴标签就会出现这种情况呢.....还没懂

转载于https://www.jianshu.com/p/b67994d2582e