echarts 遇到单行/单条文字重叠问题

一、问题现象

 这貌似还不仅仅是因为容器（外层div）太小导致的文字堆挤，我尝试放大容器，发现当大小大于一定值的时候显示就正常了，但我觉得这个大小应该还是合适的，不可能每个图表都是很大的吧？我也尝试缩小文字（font-size），发现还是重叠在一起的，但是把 font-size 改大反而能够让文本间隔开来，但是页面不就很难看了嘛。

二、解决方案

按照上文的思路，我突然考虑到可以通过修改文本间隔的方式去解决问题。css 中有个神奇的语句就可以调整每个文字之间的间隔，即 letter-space。

 我在这个图表的 option tooltip 添加 css 语句：

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'cross',
        crossStyle: {
            color: '#999'
        }
    },
    extraCssText: 'letter-spacing:1px;'
},

 

可以看到鼠标悬浮上面后显示的框文本间距变得正常起来了。

但是可以看到其它部分x、y、标题等都还是重叠的状态。经过 F12 查看的话，就知道，这部分都是 canvas 画出来的，所以只需要对 canvas 进行全局的 css 设置就好了。

canvas {
    letter-spacing: 1px;
}

 🆗，大功告成！

---

Talk is cheap, show me the code —— 薪火工作室箴言

散是满天星，聚是兴薪之火。