ECharts 学习笔记02, 饼图与南丁格尔图

目标

使用 echarts 绘制饼状图, 并在此基础上绘制南丁格尔饼图, 示例如下

搭建环境

• 新建文件夹 note02, 目录结构如下

  ./note02/
   |---index.html
   |---index.js
   |---index.css
   |---echarts.js

编写 index.html

• 我们在

  中放入

  和

  , 分别用于显示饼状图和南丁格尔图

编写 css 文件

• 为了使 article 和 aside 并列, 我们需要加上 float 样式

  main{
      width: 800px;
      height: 400px;
  }
  
  main > article{
      width: 50%;
      height: 100%;
      float: left;
  }
  
  main > aside{
      width: 50%;
      height: 100%;
      float: right;
  }

编写 js 文件

• 饼状图, 需要设置 option.series[0].type = 'pie'。而南丁格尔图, 则需要在饼状图的基础上, 增加 roseType: 'angle' 属性

  'use strict';
  // 饼状图
  var myPie = echarts.init(document.getElementsByTagName('article')[0]);
  var option = {
      title:{
          text: '饼状图'
      },
      series:[{
          name: '访问来源',
          type: 'pie',
          // 半径radius 是 min(width, heigh) 的 60%
          radius: '60%',
          // 也可以直接输入像素绝对值
          data: [
              {value: 11, name: 'video'},
              {value: 12, name: 'audio'},
              {value: 13, name: 'mail'},
              {value: 14, name: 'website'},
              {value: 15, name: 'app'},
          ]
      }],
  };
  myPie.setOption(option);
  
  // 南丁格尔图
  var myRosePie = echarts.init(document.getElementsByTagName('aside')[0]);
  option.title.text = '南丁格尔图';
  option.series[0].roseType = 'angle';
  option.series[0].radius = '75%';
  myRosePie.setOption(option);

小结

以上就是使用 EChart 绘制饼图和南丁格尔图的例子。休息一下，马上开始下一次学习~