Echarts数据可视化第4章 Echarts可视化图 4.3 饼图

向右看齐 2024-03-26 17:47 54阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第4章 Echarts可视化图
         *   *  4.3 饼图

> Echarts数据可视化：入门、实战与进阶

#### 第4章 Echarts可视化图 ####

##### 4.3 饼图 #####

饼图主要用来展示各项的比重。

举个栗子

option = {
        
      title: {
        
        text: '各商品销量占比',
        subtext: 'A商场情况分析',
        left: 'center'
      },
      tooltip: {
        
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} {
        {d} %}'
      },
      legend: {
        
        orient: 'vertical',
        left: 'left',
        data: ['A商品', 'B商品', 'C商品', 'D商品', 'E商品']
      },
      series: [
        {
        
          name: '所售商品',
          type: 'pie',
          data: [
            {
        
              value: 343,
              name: 'A商品'
            },
            {
        
              value: 250,
              name: 'B商品'
            },
            {
        
              value: 509,
              name: 'C商品'
            },
            {
        
              value: 108,
              name: 'D商品'
            },
            {
        
              value: 948,
              name: 'E商品'
            }
          ]
        }
      ]
    };

渲染效果

![在这里插入图片描述][ddf0b569dd90459bac215ae95e393337.png_pic_center]

legend设置为 vertical，是为了避免水平显示后会与标题重叠。

tooltip 显示格式设置为 `formatter: '{a} <br/>{b} : {c} { {d} %}'`，这些参数在饼图中的具体含义为：

*  \{a\}：系列名称
 *  \{b\}：数据项名称
 *  \{c\}：数值
 *  \{d\}：百分比

注意，当我们点击饼图的legend 时，会出现下面这样的效果

![在这里插入图片描述][8cb27d30b8f94d2584ce075cc679160f.gif_pic_center]

这就是基本的饼图。

有时候我们也会需要用到环形图，我们只需要在series 中加入radius 参数即可绘制环形图。

![在这里插入图片描述][395eb86980c3429abc59a2633419d97b.png_pic_center]

渲染效果

![在这里插入图片描述][e73169b95a7c47ef85b4d631734ef631.png_pic_center]

[ddf0b569dd90459bac215ae95e393337.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/36829001abb44f5192eb7d199263130d.png
[8cb27d30b8f94d2584ce075cc679160f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f50bfd2e4742471595691c14cad13a10.png
[395eb86980c3429abc59a2633419d97b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/8f842b42c854486283a78bf1ac4fb45b.png
[e73169b95a7c47ef85b4d631734ef631.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/eb7ff27cbe4d4db28c3284445a201986.png