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

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

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

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

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

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

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

2.代码怎么写？

  <div id="myCharts" style="width: 400px;height:200px;"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.min.js"></script>
  <script src="./libs/tooltip-auto-show.js"></script>
  <script type="text/javascript">
    // 需要渲染的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);
  </script>

3.示例代码下载

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