共计 1268 个字符，预计需要花费 4 分钟才能阅读完成。
目标
使用 echarts 绘制饼状图, 并在此基础上绘制南丁格尔饼图, 示例如下
搭建环境
新建文件夹 note02, 目录结构如下
./note02/
|—index.html
|—index.js
|—index.css
|—echarts.js
编写 index.html
我们在 <main> 中放入 <article> 和 <aside>, 分别用于显示饼状图和南丁格尔图
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>echarts note01</title>
<link rel=”stylesheet” href=”index.css”>
</head>
<body>
<main>
<article></article>
<aside></aside>
</main>
</body>
<script src=”echarts.js”></script>
<script src=”index.js”></script>
</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 绘制饼图和南丁格尔图的例子。休息一下，马上开始下一次学习~
