echart饼图label超出绘图区域显示省略号

最近在工作遇到这样一个问题，在绘制饼图时，由于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