ECharts玩转饼图，轻松实现内环、外环、间隔、文字、轮播动画

2023-04-12 16:22:12

ECharts饼图进阶：内环、外环、间隔、文字、轮播动画

内环

内环将数据突出显示，以便于关注。要添加内环，请遵循以下步骤：

将饼图系列的type设置为'pie'。
将系列的data设置为数据。
将系列的innerRadius设置为内环半径。

代码示例：

{
  type: 'pie',
  data: [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 274, name: '联盟广告'},
    {value: 235, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
  ],
  innerRadius: '30%'
}

外环

外环强调整体数据。要添加外环，请执行以下操作：

将饼图系列的type设置为'pie'。
将系列的data设置为数据。
将系列的outerRadius设置为外环半径。

代码示例：

{
  type: 'pie',
  data: [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 274, name: '联盟广告'},
    {value: 235, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
  ],
  outerRadius: '100%'
}

环形间隔

环形间隔可提高扇形之间的可视性。要设置间隔，请：

将饼图系列的type设置为'pie'。
将系列的data设置为数据。
将系列的itemStyle.gapWidth设置为间隔宽度。

代码示例：

{
  type: 'pie',
  data: [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 274, name: '联盟广告'},
    {value: 235, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
  ],
  itemStyle: {
    gapWidth: 10
  }
}

环形文字

环形文字在饼图中直接显示标签。要添加环形文字，请：

将饼图系列的type设置为'pie'。
将系列的data设置为数据。
将系列的label.show设置为true。
将系列的label.position设置为'inside'。

代码示例：

{
  type: 'pie',
  data: [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 274, name: '联盟广告'},
    {value: 235, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
  ],
  label: {
    show: true,
    position: 'inside'
  }
}

轮播动画

轮播动画赋予饼图动态性。要添加轮播动画，请：

将饼图系列的type设置为'pie'。
将系列的data设置为数据。
将系列的animationType设置为'scale'。

代码示例：

{
  type: 'pie',
  data: [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 274, name: '联盟广告'},
    {value: 235, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
  ],
  animationType: 'scale'
}