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

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

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

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

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

还有一种思路就是，使用label的formatter函数，处理标签文字，让标签文字换行。

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

2.代码怎么写？

// 需要渲染的series数据

var seriesData = [{

name: 'Chrome',

value: 61.41

}, {

name: 'IE',

value: 11.84

}, {

name: 'Firefox',

value: 10.85

}, {

name: 'Edge',

value: 4.67

}, {

name: 'Safari',

value: 1.18

}, {

name: 'Sogou Explorer',

value: 0.64

}, {

name: 'Opera',

value: 0.6

}, {

name: 'QQ',

value: 0.2

}, {

name: 'Other',

value: 0.61

}];

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('myCharts'));

// 指定图表的配置项和数据

var chartOption = {

color: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',

'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],

series: [

{

radius: [0, '50%'], // 设置饼图的半径

type: 'pie',

label: {

formatter: '{b}: {d}%',

// alignTo: 'labelLine', // 'edge', 'labelLine', 默认是'none'

},

minAngle: 30, // 设置扇区最小角度

data: seriesData

},

]

};

// 使用刚指定的配置项和数据显示图表

myChart.setOption(chartOption);

3.示例代码下载

可以复制以上代码运行查看使用效果，也可以到

GitHub: https://github.com/Jackyyans/code123

下载，更多示例将会持续更新，欢迎关注。