最近在工作遇到这样一个问题,在绘制饼图时,由于label文字过长,而超出了canvas的绘图区域,导致超出的label直接被截掉。dalao要我帮忙看一下这个问题…
阐述问题:
就像正常的思路一样,用个div标签,设置宽度,设定超出部分隐藏就好了。但是,这是canvas所以不能设div标签,再者,label的位置的不确定的,所以宽度也是不确定的。
再加上我们公司的需求比较奇葩,我们要做的是label的名字省略号显示,但是百分数要全部显示~
这…
百度搜了很久都没有比较好的解决方法。
慢慢摸索:
于是想着去改源码,看了下源码发现label的位置信息存放在一个名字为_itemLayouts
的数组,于是在控制台把echart示例打印出来,细心找了下果然找到了。
let myChart = echarts.init(document.getElementById('main'));
console.log(myChart)
而且同级目录下的_idList
就是存放label的名字的数组。
具体思路:
- 根据原始data进行绘图,得到各个label的x坐标
- 根据x坐标和绘图区域宽度获得用省略号表示的文字
- 替换原来的data
- 重新绘图
获取用省略号表示的label方法:根据label的位置(主要是x坐标)以及绘图区域的宽度(canvasWidth,这里是600px),计算出label的最大宽度controlWidth = canvasWidth - x,然后计算label的长度(textWidth)是否大于controlWidth,如果大于就需要把label截掉,从一个字符开始,慢慢加字符,直到字符长度超过controlWidth。这就得到了label的最大显示的字符长度了。
代码演示如下:
let controlWidth = canvasWidth - x
for (let i = 1; i < text.length; i ++) {
let tempText = text.slice(0, i)
let textWidth = getTextWidth(text)
if (textWidth > controlWidth) {
let resultText = text.slice(0, i - 1)
return resultText;
}
}
这是基于echart3的canvas的解决方法,如果echart升级到4版本,已经可以支持svg了这样就更加好办了。
可以直接获取text标签下的tspan标签,然后就可以拿到x坐标以及label的字符串了,然后还是计算位置获得被截掉字符串,然后更新数据重新绘图即可
具体解决方案:
- 基于ecahrt3的canvas的解决方法:https://codepen.io/charming2015/pen/oPmerm?editors=1010
- 基于echart4的svg的解决方法:https://codepen.io/charming2015/pen/EervYW?editors=1010