[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中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...
随机推荐
- <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
Asp.net Mvc 未能加载类型“System.Web.Mvc.ViewPage 的解決方法 2010-11-30 17:31:51| 分类: .net mvc |举报 |字号 订阅 如果多 ...
- 【安卓手机通用】android adb shell 命令大全
浏览:3116 | 更新:2013-10-17 17:05 | 标签:安卓 android 一.[什么是shell] Linux系统的shell作为操作系统的外壳,为用户提供使用操作系统的接口.它是命 ...
- Jboss 集群配置
环境配置:CentOS 7 x64 * 3 IP: 172.24.0.100 172.24.0.101 172.24.0.102 服务器配置: 172.24.0.100 ...
- DNS正、反解析查询指令host、dig、nslookup
一.host指令格式:host [-a] FQDN [server] host -l domain [server]选项:-a :代表列出该主机所有的相关信息,包括 IP.TTL 与除错讯息等等-l ...
- [Unity Shader]ShaderForge制作Shader
什么是ShaderForge ShaderForge的目标是推动统一的视觉质量提升到了新的高度, 给你自由的材质创建在一个视觉和直观的方式——不需要代码! ShaderForge的特性 •实时着色器预 ...
- salt自动化部署
1. 到编译机器编译 /export/Deploy/vm-agent 执行脚本 ./vm-agent.sh develop -alpha 2.检查rpm包是否打包成功 http://172.18.13 ...
- 【转】25个Git用法技巧
Andy Jeffries 给 Git 中级用户总结分享的 25 个小贴士.你不需要去做大量搜索,或许这些小贴士对你就很有帮助的. 我从开始使用git到现在已经差不多18个月了,以为自己已经很懂git ...
- 完美分割字符串，实现字符串的splict功能
class Str:Client_C { string val; string[] str = new string[100]; public void StrT1() { //1.正常情况 //2. ...
- Recovering a WiredTiger collection from a corrupt MongoDB installation
Reference: http://www.alexbevi.com/blog/2016/02/10/recovering-a-wiredtiger-collection-from-a-corrupt ...
- 3.2. 添加模板版本（Core Data 应用程序实践指南）
为了不像3.1那样崩溃,修改模型之前先创建新的模型版本.添加之后,会生成一个新的xcdatamodel文件,并且跟原来的内容完全一样,这有意思了,但是不要删除原来旧版的模型.旧的模型有助于把原来持久化 ...