[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中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...
随机推荐
- AVR编程_如何通过软件复位AVR？(转)
源:http://blog.sina.com.cn/s/blog_493520900100bpos.html Question 如何通过软件复位AVR? Answer 如果你想通过软件复位AVR,你应 ...
- psql命令
原文:http://blog.csdn.net/smstong/article/details/17138355 psql# shell 环境下,查看当前所在的数据库的命令是: select cur ...
- WPF教程：附加属性
一.附加属性的特点1.特殊的依赖属性2.用于非定义该属性的类 例如Grid面板的RowDefinition.ColumnDefinition.Canvas面板的Left.RightDockPanel面 ...
- php --with-mysql=mysqlnd
1.什么是mysqlnd驱动? PHP手册上的描述: MySQL Native Driver is a replacement for the MySQL Client Library (libmys ...
- Frequent Distribution sorted by frequency
import nltk def freq_sorted(text,ranklimit): fd=nltk.FreqDist(text) cumulative = 0.0 for rank, (word ...
- (中等) POJ 1054 The Troublesome Frog，记忆化搜索。
Description In Korea, the naughtiness of the cheonggaeguri, a small frog, is legendary. This is a we ...
- 系统里有Courier New字体 Eclipse没有这个字体选项
问题状态: 系统里有Courier New字体 Eclipse没有这个字体选项问题原因: windows(xp)中的系统字体分为"显示"和"隐藏"两种状态,当为 ...
- 单片机联网,UIP实现tcp/udp协议
UIP是单片机界联网的一个很好地选择,移植这个库有点复杂,首先是第一步,网卡驱动要写好,使用的网卡芯片为ENC28J60,驱动可以再工程包里面找到 //配置网卡硬件,并设置MAC地址 //返回值:0, ...
- Keil STM32调试，使用ST-Link下载程序时提示“flash timeout.reset the target and try it again”
参考: 很郁闷,买来没多久的 STM32F4-DISCOVERY 就挂了? STM32F103RB Jlink调试的时候出现flash timeout.reset the target and t ...
- IOS开发使用YiRefresh进行刷新
1.将YiRefresh下载后,拖进项目 YiRefresh地址:https://github.com/coderyi/YiRefresh 2.添加两个头文件 #import "YiRefr ...