摘要：目标使用绘制饼状图并在此基础上绘制南丁格尔饼图示例如下搭建环境新建文件夹目录结构如下编写我们在中放入和分别用于显示饼状图和南丁格尔图编写文件为了使和并列我们需要加上样式编写文件饼状图需要设置。
目标
使用 echarts 绘制饼状图, 并在此基础上绘制南丁格尔饼图, 示例如下
新建文件夹 note02, 目录结构如下
./note02/ |---index.html |---index.js |---index.css |---echarts.js
我们在 中放入 和 , 分别用于显示饼状图和南丁格尔图
echarts note01
为了使 article 和 aside 并列, 我们需要加上 float 样式
main{
width: 800px;
height: 400px;
}
main > article{
width: 50%;
height: 100%;
float: left;
}
main > aside{
width: 50%;
height: 100%;
float: right;
}
饼状图, 需要设置 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 绘制饼图和南丁格尔图的例子。休息一下，马上开始下一次学习~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102884.html
摘要：每周前端开源推荐第六期从名字就可以很容易的看出该项目的作用，解压缩。同时支持浏览器和。是任务调度的项目。初始化定义人物每三分钟触发一次触发一个交互式学习的方式。强烈建议大家先去体验一下的介绍是由百度团队开发的一款开源图表项目。 每周前端开源推荐第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...
摘要：每周前端开源推荐第六期从名字就可以很容易的看出该项目的作用，解压缩。同时支持浏览器和。是任务调度的项目。初始化定义人物每三分钟触发一次触发一个交互式学习的方式。强烈建议大家先去体验一下的介绍是由百度团队开发的一款开源图表项目。 每周前端开源推荐第六期 43081j / rar.js Pure-JavaScript RAR reader using AJAX, File API...
阅读 2872·2021-11-24 09:38
阅读 3510·2021-11-23 09:51
阅读 966·2021-09-09 11:52
阅读 4031·2021-08-11 11:18
阅读 1105·2019-08-30 14:05
阅读 3227·2019-08-30 11:23
阅读 1759·2019-08-29 17:02
阅读 1123·2019-08-26 13:49
