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 绘制饼图和南丁格尔图的例子。休息一下，马上开始下一次学习~