Echarts——一个简单的嵌套饼图
</!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QQ部
星座分布图</title>
<script src="http://echarts.baidu.com/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:800px"></div> <script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
}, series: [
{
name:'星座',
type:'pie',
selectedMode: 'single',
radius: ['75%', '96%'], label: {
normal: {
position: 'inside',
fontSize: 20,
color:'',
fontFamily:'Microsoft Yahei'
}
},
data:[
{value:4, name:'双子座'},
{value:3, name:'白羊座'},
{value:3, name:'金牛座'},
{value:2, name:'天蝎座'},
{value:2, name:'双鱼座'},
{value:2, name:'处女座'},
{value:2, name:'射手座'},
{value:1, name:'摩羯座'},
{value:1, name:'天秤座'},
{value:1, name:'水瓶座'},
{value:1, name:'狮子座'}
]
},
{
name:'姓名',
type:'pie',
radius: ['30%', '70%'],
label: {
normal: {
position:'inside',
align:'right',
fontSize: 18,
fontFamily:'Microsoft YaHei',
color:"#FFEFE0"
}
},
data:[
{value:1, name:'X1'},
{value:1, name:'X2'},
{value:1, name:'X3'},
{value:1, name:'X4'},
{value:1, name:'M1'},
{value:1, name:'M2'},
{value:1, name:'M3'},
{value:1, name:'N1'},
{value:1, name:'N2'},
{value:1, name:'N3'},
{value:1, name:'D1'},
{value:1, name:'D2'},
{value:1, name:'D3'},
{value:1, name:'F1'},
{value:1, name:'F2'},
{value:1, name:'F3'},
{value:1, name:'G1'},
{value:1, name:'A1'},
{value:1, name:'W1'},
{value:1, name:'E1'},
{value:1, name:'E2'},
{value:1, name:'E3'}
]
},
{
name:'部门',
type:'pie',
radius: ['0%', '25%'],
label: {
normal: {
position: 'center',
fontSize: 22,
fontFamily:'Microsoft YaHei',
color:'#80F0E3'
}
},
data:[
{value:22, name:'QQ部'}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
显示效果如下：
解释：
- 设置网页标题：
- <title>QQ部星座分布图</title>
- 导入在线的echarts库：
- <script src="http://echarts.baidu.com/dist/echarts.js"></script>
- 设置页面尺寸：
- <div id="main" style="width:800px;height:800px"></div>
- 初始化echarts实例：
- var myChart = echarts.init(document.getElementById('main'));
- 设置图表内容：
- var option = {}
- 在echarts实例中载入option：
- myChart.setOption(option);
- 对option的解释
- 包含了一个tooltip——用于动态显示数据标签，和三个series，series的类型为“pie”饼图。
- tooltip的显示格式为：formatter: "{a} <br/>{b}: {c} ({d}%)"，即显示数字和百分比。
- radius用于设置饼图的内外范围，如：radius: ['75%', '96%']。
- 接下来设置标签的文本格式和数据内容即可。
Echarts——一个简单的嵌套饼图的更多相关文章
- echarts的简单应用之（二）饼图
接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图 ...
- iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序
iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一.plist文件和项目结构图 说明:这是一个嵌套模型的示例 二.代码示例: YYcarsgroup.h文件代码: // // YYcar ...
- svg绘制一个简单地饼图
一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- echarts之简单的入门——【二】再增加一个柱状图和图例组件
echarts之简单的入门——[一]做个带时间轴的柱状统计图 现在需求说,我需要知道日答题总次数和活跃人数,那么我们如何在上面的图表中增加一个柱状图呢? 如果你看过简单入门中的配置项手册中series ...
- 230行实现一个简单的MVVM
作者:mirone链接:https://zhuanlan.zhihu.com/p/24451202来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. MVVM这两年在前端届 ...
- C#如何实现一个简单的流程图设计器
以前看过不少Window Form开发的流程图设计器,支持节点拖放,非常方便即可设计出很美观的流程图,作为一个程序员,对其内部实现原理一直很好奇,感叹有朝一日自己如果可以开发一款类似的软件那是多么让人 ...
- 30 分钟开发一个简单的 watchOS 2 app <oneVcat>
Apple Watch 和 watchOS 第一代产品只允许用户在 iPhone 设备上进行计算,然后将结果传输到手表上进行显示.在这个框架下,手表充当的功能在很大程度上只是手机的另一块小一些的显示器 ...
- 我们为之奋斗过的C#-----C#的一个简单理解
我们首先来简单叙述一下什么是.NET,以及C#的一个简单理解和他们俩的一个区别. 1 .NET概述 .NET是Microsoft.NET的简称,是基于Windows平台的一种技术.它包含了能在.NET ...
- js 排列 组合 的一个简单例子
最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...
随机推荐
- Redis笔记-集群搭建
Redis单机版搭建上一篇已经基本介绍了,下面讨论Redis集群搭建方案和示例. 1.关于Redis常用的集群方案(三种): a.一主多从,如一个Master.两个Slave b.薪火相传,即集群中的 ...
- vmware 14 新安装centos7 没法联网
vmware14 刚安装好centos7后,想下载安装一些软件发现无法联网,于是就百度了一下.下面 记录下解决方法. 1 确报主机能上网. 2 设置虚拟机网络适配器 3 设置虚拟机网卡 4 修改cen ...
- LinuxMint（Ubuntu）安装文泉驿家族黑体字
文泉驿黑体字家族在Ubuntu上很有用,可以解决系统字体发虚的问题. 通过下面的三条命令安装: sudo apt-get install ttf-wqy-microhei #文泉驿-微米黑 sudo ...
- vue踩坑记录:[Vue warn]: $attrs is readonly.
今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...
- Spring Boot自定义Banner
在2016年的最后一天,借用Spring Boot的Banner向各位程序猿同仁们问候一声:Happy New Year. 接下来我们就来介绍一下这个轻松愉快的自定义banner功能.实现的方式非常简 ...
- poium测试库介绍
poium测试库前身为selenium-page-objects测试库,我在以前的文章中也有介绍过:这可能是最简单的Page Object库,项目的核心是基于Page Objects实现元素定位的封装 ...
- mysql查询order by 指定字段排序
当MySQL查询时排序的字段不是数字时而是汉字的时候也可以用when then 来指定排序. 列如yewu_check表的status 字段不是0,1,2而是汉字待办,已办,退回.可以如下写法: S ...
- JQuery td内容获取，修改
业务需求:获取某个表格中每一行第四个td内容,并根据内容为当前td重新赋值 $(".listtable.table.table-striped.table-bordered.table-ho ...
- 启动django时报错Watching for file changes with StatReloader（使用状态加载程序监视文件更改 ）
原因:可能是Django版本和Python版本或者PyMysql版本不一致 解决:升级或者降级Django版本 命令如下: pip install django==2.1.7 #django==版本号 ...
- Leetcode 4.28 string
1. 38. Count and Say 就是对于前一个数,找出相同元素的个数,把个数和该元素存到新的string里.数量+字符 class Solution { public String coun ...