目标
使用 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 绘制饼图和南丁格尔图的例子。休息一下，马上开始下一次学习~
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。