ECharts 03 饼图

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

ECharts 饼图

筆記

使用注意

• 數值加起來不一定是整數
  • 會自己計算比例
• 設定樣式
  • 放在 series : [{ }]裡面

radius: ‘55%’,

• 半徑 可视区尺寸（容器高宽中较小一项）的 55% 长度。

roseType: ‘angle’,

• 把饼图显示成南丁格尔图。

itemStyle

• 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等：

itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }

實踐筆記

範例

option = {
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '55%',
      data: [
        { value: 235, name: '视频广告' },
        { value: 274, name: '联盟广告' },
        { value: 310, name: '邮件营销' },
        { value: 335, name: '直接访问' },
        { value: 400, name: '搜索引擎' },
      ],
      roseType: 'angle',
      itemStyle: {
        normal: {
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};

6/29 ECharts 饼图