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感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...
随机推荐
- WebApi发布到外网提示404问题
今天在做微信接口的对接,需要把webApi发布到服务器,放上去的时候,提示404 找了以后,发现了这段代码,粘贴上去就可以用了 在web.config添加如下节点 <system.webServ ...
- C# -- 泛型的使用
C# -- 泛型的使用 1. 使用泛型 class Program { static void Main(string[] args) { ; string str = "Hello&quo ...
- python学习笔记5_异常
python学习笔记5_异常 1.什么事异常 Python使用异常对象(exception object) 来表示异常情况.遇到错误会发生异常. 如果异常对象未被处理或被捕捉,程序就会用所谓的回溯(t ...
- pytorch中文文档-torch.nn常用函数-待添加-明天继续
https://pytorch.org/docs/stable/nn.html 1)卷积层 class torch.nn.Conv2d(in_channels, out_channels, kerne ...
- yum下载安装redis
有时需要离线安装redis,所以需要redis离线安装包,不同的centos版本和redis版本,依赖包不同,本例中,centos: CentOS Linux release 7.0.1406 (Co ...
- Carthage下没有Build文件夹
问题描述: 用Carthage管理项目时,执行Carthage upate --platform iOS后发现Carthage目录下没有Build文件夹 解决方案: 在Xcode > Prefe ...
- VS2019 实用操作
本文列出了在编写程序过程中的几个非常实用的操作方式,通过这些操作方式,可以在一定程度上减少重复操作.提高编码效率.改善编程体验. 列模式操作 列操作是一项很常用且实用的功能,可以一次性修改不同的行. ...
- java中异常处理finally和return的执行顺序
根据个人亲自测试,得出如下结果: 1.try,catch中有没有return,finnally都会执行,而且是先执行try,catch后,最后执行finnally语句: 2.如果finnally中有r ...
- JS获取登录者IP和登录城市
登录城市:<sp class="cy"></sp><br /> 管理员个数:<font color=</strong>< ...
- JS 获取某个容器控件中id包含制定字符串的控件id列表
//获取某容器控件中id包含某字符串的控件id列表 //参数:容器控件.要查找的控件的id关键字 function GetIdListBySubKey(container,subIdKey) { va ...