mysql生成饼状图_ECharts制作饼状图
本文结合实例给大家分享站长们常常用到的网站分析工具中的访问来源功能,我们使用Echarts制作饼状图,用于表现不同类目(访问来源)的数据在总和中的占比。
HTML
和前几篇文章介绍的一样,首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性。
Javascript
现在要初始化echarts实例,然后设置选项,最后渲染图像。
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
legend: {
orient: 'horizontal',
left: 'center',
bottom: 0,
data:['直达','其它外链','搜索引擎','直接输入网址或书签','cnblogs.com','微博','微信','百度','谷歌','360','必应','其他']
},
series: [
{
name:'访问来源', //内环
type:'pie',
selectedMode: 'single', //单一选中模式
radius: [0, '30%'], //饼图的半径 [内半径,外半径]
label: {
normal: {
position: 'inner' //内置文本标签
}
},
labelLine: {
normal: {
show: false //不需要设置引导线
}
},
data:[
{value:335, name:'直达', selected:true},
{value:679, name:'其它外链'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius: ['40%', '55%'],
data:[
{value:335, name:'直接输入网址或书签'},
{value:310, name:'cnblogs.com'},
{value:234, name:'微博'},
{value:135, name:'微信'},
{value:1048, name:'百度'},
{value:251, name:'谷歌'},
{value:147, name:'360'},
{value:42, name:'必应'},
{value:60, name:'其他'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
以上代码中,绘制了两个换,内环和外环,内环是大类,本例中有3个大类,外环是3个大类对应的小类。比如访问来源为搜索引擎的分类下,有百度、谷歌360等几大搜索引擎,从图表上就能直观体现各分类所占比例大小,当然鼠标滑上图表上时会显示分类所占的比例数字。
饼图更适合表现数据相对于总数的百分比等关系,
每个的弧度表示数据数量的比例。如果只是表示不同类目数据间的大小,建议使用 柱状图,人们对于微小的弧度差别相比于微小的长度差别更不敏感,或者也可以通过配置饼状图参数roseType 显示成南丁格尔图,通过半径大小区分数据的大小。
截至本期,我们已经介绍了Echarts的常见图表应用,Echarts还有热力图、K线图、关系图等等应用,有兴趣的朋友请关注Echarts官网,本站Helloweba将不再撰文讲解Echarts了,接下来我们会有更好更实用的文章分享给大家,敬请关注。
mysql生成饼状图_ECharts制作饼状图相关推荐
- html雪碧图效果,8.使用背景图,制作雪碧图效果
本文将为您描述8.使用背景图,制作雪碧图效果,具体操作方法: 使用背景图,制作雪碧图效果: Document .img{ width:150px; height:150px; border:2px s ...
- python制作桑基图_Python制作桑基图
这张图是不是十分的漂亮呢?今天偶然间看到一张十分炫酷的图,深深地被它妖艳炫酷的的外表所迷惑,查了许多资料之后,得知它叫"桑基图".古人云:"桑吉桑吉,高贵美丽" ...
- 制作gif动图python_制作gif动图python-女性时尚流行美容健康娱乐mv-ida网
女性时尚流行美容健康娱乐mv-ida网 mvida时尚娱乐网 首页 美容 护肤 化妆技巧 发型 服饰 健康 情感 美体 美食 娱乐 明星八卦 首页 > 高级搜索 制作 手机动画屏保― gif t ...
- 如何将图片序列化_PS如何将图片制作成gif动态图 ps制作gif动态图教程
想要制作gif动态图片,为何不试试万能的PS呢!使用PS可以帮助用户快速轻松的制作gif动图,操作简单又方便.那么如何利用PS快速将图片做成gif动态图,其实方法是很简单,制作这种gif动图其实就是把 ...
- html立体魔方图片制作,ppt怎么制作三维视图的魔方图 ppt制作三维魔方图详细教程...
很多用户在制作PPT展示图的时候,有时候需要制作三维立体的魔方图,制作步骤简单,不过还有很多的用户不清楚如何制作,那么下面小编就为大家分享PPT制作三维魔方图的详细步骤教程,不会制作的朋友可以参照下面 ...
- OD图 arcgis曲线制作插件 od图曲线 路径图曲线制作插件 航线图曲线制作插件
需要插件可私信我~ 本文介绍的是基于ArcGIS绘制OD网络图,"O"表示Origin,指出行的出发地点,"D"表示Destination,指出行的目的地,OD ...
- gif动态图如何制作?
1.gif动态图的特点 gif动态图是一种无损的动画格式,它的优点是文件体积小.播放流畅,适合在网站上使用.制作gif动态图需要专业的软件SOOGIF动图. 制作gif动态图的步骤如下: 制作完成后, ...
- gif动图怎么制作?手机怎么制作动态图
gif动图怎么制作?手机怎么制作动态图?相信很多朋友都会遇到这样的问题,平时看到许多有趣的gif动图,有的斗图表情包,有的文章配图,都想做一做,但是苦于不知道怎么做,下面我就给大家介绍一种gif制作方 ...
- gif动态图怎么制作?gif动态图在线制作一键搞定
1.GIF动态图 Gif动态图是一种通过连续播放一系列图片来呈现动作的图像格式.它通常由许多位图像(也称为帧)组成,每一帧都可以独立显示.GIF动态图的优势在于它可以在不需要额外插件的情况下在大多数浏 ...
最新文章
- 语音合成的语音相位图
- 事务的传播行为和隔离级别[transaction behavior and isolated level]
- whitepages 被关闭_除了滑动关闭APP影响电池寿命,还有哪些操作触碰到了你的知识盲区?...
- SQL优化—— 优化insert语句
- Centos7系统启动流程
- oracle maa全称,OracleMAA参考架构.PDF
- 渗透测试报告甲乙概述
- Gradle入门:创建二进制分发
- Hibernate Search 4.2最终发布:支持空间查询
- leetcode1351. 统计有序矩阵中的负数(二分查找)
- English Voice of I Knew You Were Trouble.
- 【2019.08.23】2019CCPC网络赛
- CCF201604-3 路径解析(解法三)(90分)(废除!!!)
- php返回成功信息msg_PHP进化史 — 从v5.6到v8.0(可收藏)
- PhotoShop简单案例(4)——利用ps制作正在加载中动画(loading.gif)
- 超分算法RDN:Residual Dense Network for Image Super-Resolution 超分辨率图像重建
- 深度解析当贝盒子B3、腾讯极光5S、小米盒子4S之间的区别
- 阐述游戏AI设计的两个禁忌及解决方法
- Html 课程笔记(1)
- CArray和CMap使用