怎么让ECharts饼图的label标签不重叠?

1.怎么让ECharts饼图的label标签不重叠?

使用ECharts饼图,如果有的项目占比很小,饼图所占空间也比较小的时候,会出现label标签重叠、标签被截断的情况(图1)。

怎么让ECharts饼图的label标签不重叠?_第1张图片

可以通过设置radius属性,缩小饼图的半径调整(图2)。或者再配合minAngle属性,给每个扇区设置一个最小的角度,不好的地方就是有的扇形面积看起来会是一样大(图3)。

怎么让ECharts饼图的label标签不重叠?_第2张图片

怎么让ECharts饼图的label标签不重叠?_第3张图片

另外可以调整labelalignTo属性,labelLine表示标签引导线末端对齐,edge表示文字对齐。

还有一种思路就是,使用labelformatter函数,处理标签文字,让标签文字换行。

根据实际情况,可以结合以上几种方式进行处理。

2.代码怎么写?

  

3.示例代码下载

可以复制以上代码运行查看使用效果,也可以到
GitHub: https://github.com/Jackyyans/code123
下载,更多示例将会持续更新,欢迎关注。

你可能感兴趣的:(前端,echarts)