[Echarts]用Echarts绘制饼状图
在项目网站的网页中，有这样一幅图：
心血来潮，想使用百度Echarts来绘制一下，可是没能绘制得完全一样，Echarts饼状图的label不能在图形下面放成一行，最后的效果是这样子的：
鼠标移动到items上，可动态显示百分比：
另外，还了解到了一种特殊的饼状图：南丁格尔图，就是用扇形半径的大小来表示百分比，对于相差比较大的items，看起来会有些不平衡；
最后，上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饼状图练习</title>
<style>
#pic1{
width:400px;
height:400px;
margin: 20px auto;
}
</style>
<script src="js/echarts.common.min.js"></script>
</head>
<body>
<div id="pic1"></div>
<script>
var myCharts1 = echarts.init(document.getElementById('pic1'));
var option1 = {
backgroundColor: 'white', title: {
text: '课程内容分布',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {d}%"
}, visualMap: {
show: false,
min: 500,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name:'课程内容分布',
type:'pie',
clockwise:'true',
startAngle:'0',
radius : '60%',
center: ['50%', '50%'],
data:[
{
value:70,
name:'语言',
itemStyle:{
normal:{
color:'rgb(255,192,0)',
shadowBlur:'90',
shadowColor:'rgba(0,0,0,0.8)',
shadowOffsetY:'30'
}
}
},
{
value:10,
name:'美国科学&社会科学',
itemStyle:{
normal:{
color:'rgb(1,175,80)'
}
}
},
{
value:20,
name:'美国数学',
itemStyle:{
normal:{
color:'rgb(122,48,158)'
}
}
} ],
}
]
};
myCharts1.setOption(option1);
</script>
</body>
</html>
[Echarts]用Echarts绘制饼状图的更多相关文章
- 用PNChart绘制饼状图简介
写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...
- 第166天：canvas绘制饼状图动画
canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- Canvas(3)---绘制饼状图
Canvas(3)---绘制饼状图 有关canvas之前有写过两篇文章 1.Canvas(1)---概述+简单示例 2.Canvas(2)---绘制折线图 在绘制饼状图之前,我们先要理解什么是圆弧,如 ...
- canvas动态绘制饼状图，
当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...
- [canvas]用canvas绘制饼状图
折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- IOS之以UIBezierPath绘制饼状图
1.绘制的饼状图是通过多个扇形拼和而成,绘制一个扇形也是比较简单的,核心代码如下: 先画一条圆弧,再画半径,接着再画一条圆弧,最后闭合路径: UIBezierPath* aPath = [[UIBe ...
- d3绘制饼状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- matplotlib绘制饼状图
源自http://blog.csdn.net/skyli114/article/details/77508430?ticket=ST-41707-PzNbUDGt6R5KYl3TkWDg-passpo ...
- Graphic系统综合练习案例-绘制饼状图
这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...
随机推荐
- ActiveMQ讯息传送机制以及ACK机制
http://blog.csdn.net/lulongzhou_llz/article/details/42270113 ActiveMQ消息传送机制以及ACK机制详解 AcitveMQ是作为一种消息 ...
- MySQL 批量导入 csv 文件
注意编码一致性,如:我的数据库是utf-8编码,csv文档的编码也是utf-8. 导入使用 LOAD DATA LOCAL INFILE 详细用法请参看文档或者书籍. mysql user表结构: ...
- python之路：进阶篇
> ) { ; } printf(;} print i >>> >>> == : name == == ...
- eclipse java生成exe
eclipse导出jar文件再将它转换成exe可执行文件详解 关键字: 欢迎光临 此文章是为了帮助刚接触j2se或不懂如何打包jar文件的人而着笔,同时也是让自己的知识以文章的形式保存起来. 一.导出 ...
- Quick Cocos2dx Http通讯
服务端:Python 通讯协议:Http 参考文章: 1 用python实现一个基本的http server服务器 http://blog.sina.com.cn/s/blog_416e3063010 ...
- php --with-mysql=mysqlnd
1.什么是mysqlnd驱动? PHP手册上的描述: MySQL Native Driver is a replacement for the MySQL Client Library (libmys ...
- Javascript隔离方法
1.常用的隔离方法: (function() { })(); 2.query的隔离方法: 需要引入jquery: <script type="text/javascript" ...
- Session监听事件的处理
设置Session监听 在web.xml文件中: <listener> <listener-class>cjq.login.listener.UpdateLogOutTime ...
- mysql 省市联动sql 语句
/*MySQL Data TransferSource Host: localhostSource Database: virgoTarget Host: localhostTarget Databa ...
- UVa 543 - Goldbach's Conjecture
题目大意:给一个偶数,判断是否是两个素数的和. 先用sieve方法生成一个素数表,然后再进行判断即可. #include <cstdio> #include <vector> ...