Echarts饼图为何会出现白边？又该如何去除呢？

前端

2023-11-21 18:31:15

Echarts 饼图白边问题详解

引言

Echarts 饼图是数据可视化中常用的一种图表类型，但有时会出现恼人的白边问题，影响美观和可读性。本文将深入分析 Echarts 饼图白边产生的原因，并提供有效的解决方案。

饼图白边的罪魁祸首

1. 数据总和不为 100%

这是最常见的原因。当饼图数据总和不为 100% 时，Echarts 会自动添加空白扇形来填充剩下的区域，形成白边。

2. 数据过少

如果饼图数据过少，扇形也会出现白边。这是因为 Echarts 将每个扇形绘制成完整的圆形，当扇形太小时，就会出现白边。

3. 标签过长

当标签过长时，也会导致白边。Echarts 将标签绘制在扇形外侧，如果标签太长，就会超出扇形范围，产生白边。

4. 半径设置不当

饼图的半径设置也会影响白边的出现。如果半径设置过大，饼图会超出容器范围，产生白边。

去除白边的妙招

1. 确保数据总和为 100%

最简单的解决方法是确保饼图数据总和为 100%。

2. 增加数据量

如果数据过少，可以增加数据量。将一些细小数据合并或添加新数据项。

3. 缩短标签

将标签内容精简或缩小字体大小。

4. 合理设置半径

将半径缩小或扩大容器大小。

代码示例

// 饼图数据
var data = [
  {value: 335, name: '直接访问'},
  {value: 310, name: '邮件营销'},
  {value: 234, name: '联盟广告'},
  {value: 135, name: '视频广告'},
  {value: 1048, name: '搜索引擎'}
];

// 饼图配置
var option = {
  title: {
    text: 'Echarts 饼图白边去除示例'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      type: 'pie',
      data: data,
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'outside',
        formatter: '{name}：{c} ({d}%)'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 初始化图表
var myChart = echarts.init(document.getElementById('main'));

// 显示图表
myChart.setOption(option);