添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
·  阅读

今天在做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
复制代码

看看修改后的效果