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感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...
随机推荐
- c/c++ 继承与多态 文本查询的小例子（非智能指针版本）
问题:在上一篇继承与多态 文本查询的小例子(智能指针版本)在Query类里使用的是智能指针,只把智能指针换成普通的指针,并不添加拷贝构造方法,会发生什么呢? 执行时,代码崩掉. 分析下面一行代码: Q ...
- MYSQL如何通过一张表更新另外一张表？
1.背景说明 很多时候我们需要通过一张中间表的数据去更新另外一张表,而不仅仅是通过固定数值去更新,尤其是当数据量很大的时候,简单的复制粘贴就不大可行了. 2.MYSQL版本 SELECT VERSIO ...
- 虚拟机安装windows7 VMware12 安装window7
闲来无事就来搞虚拟机装操作系统!期间出现很多错误,分享一下 一.安装虚拟机 二.准备安装的镜像文件 我下载的是windows7纯净版 深度技术里面下载的(http://www.xitongzhijia ...
- emacs常用指令
虽然平时用Dev,但考试的时候linux下没有Dev,只能用emacs了…… 这里记录一些我常用的指令和配置文件中的代码行. 指令: 1.c-x 1:只留一个窗口 2.c-x 2:分成上下两个窗口 3 ...
- 毕业设计5：基于MicroPython的智能火灾报警器系统的设计与实现
随着现代家庭用火.用电量的增加,家庭火灾发生的频率越来越高.家里一旦发生火灾,如果出现扑救不及时.灭火器材缺乏.以及在场人惊慌失措.逃生迟缓等不利情况下,最终就会导致产生重大的生命财产的损失. 消防部 ...
- vpshere6 ESXI 禁止登陆 "执行此操作的权限被拒绝"
vCenter在添加ESXI主机时,锁定模式选择“正常”,导致无法直接登陆ESXI宿主机,现象如下: 解决方法:
- 用Case类生成模板代码
将类定义为case类会生成许多模板代码,好处在于: ①会生成一个apply方法,这样就可以不用new关键字创建新的实例. ②由于case类的构造函数参数默认是val,那么构造函数参数会自动生成访问方法 ...
- java易混淆知识小结
1.java的基本数据类型,及所占字节和范围 byte: 字节型,占1个字节,8位,范围是 -2^7 ~ 2^7-1 short:短整型,占2个字节,16位,范围是 -2^15 ~ 2^15 ...
- OO第一单元总结——多项式求导
第一次作业分析 1.程序结构分析 类图: 好吧,这一次基本上完全是在面向过程编程,没有看出来任何的面向对象的特性. 复杂度: 可以看到模块间的相互耦合度很高,PolyDerive方法的非结构化程度也不 ...
- 基于 docker 的redis 主从+哨兵（快速部署）
很简单(字多的步骤见:http://www.cnblogs.com/vipzhou/p/8580495.html) 1.直接启动3个容器 docker network create --subnet ...