实现echarts内外圈联动
//控制都是通过控制series中data的name,那么将内外圈需要同事控制的部分设置为一样的名字,就可以实现内外圈联动。
//但是在name相同时,会使默认分配颜色时相同,使颜色不好看,这里就需要给data自己分配颜色。
app.title = '嵌套环形图';
var colors=[
'#6EB6F2','#71F16F','#FFC000','#384C6C','#7577F8',
'#003366','#AEABAF','#00F4D2','#8084F1','#FF9F4E',
'#4FA2A9','#9a7fd1','#588dd5','#f5994e','#c05050',
'#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
'#FF4F7F','#CC6666','#7f7522','#2b4490','#333399',
'#70a19f','#009299','#78331e','#3e4145','#7bbfea',
'#339999','#8f4b38','#694d9f','#f26522','#8e7437',
'#45b97c','#74787c','#afdfe4','#fdb933','#bed742',
'#A20055','#AA0000','#C63300','#0000AA','#2200AA',
'#990099','#00AAAA','#00AA88','#00AA55','#FF1493'
]; option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
},
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:'营销广告'},
]
},
{
name:'访问来源',
type:'pie',
radius: ['40%', '55%'],
label: {//默认的label显示时,是显示名字,如果希望内外圈显示的label不同,可以通过自己构建label函数。
normal:{
formatter:function (params) {
if(params.value != 0)
return params.data.name;
else
return '';
}
}
},
data:[
{value:335, name:'直达',type:"直达",itemStyle:{
normal:{
color:colors[Math.floor(40*Math.random())]
}}},
{value:310, name:'直达',type:"邮件营销",itemStyle:{
normal:{
color:colors[Math.floor(40*Math.random())]
}}},
{value:234, name:'直达',type:"联盟广告",itemStyle:{
normal:{
color:colors[Math.floor(40*Math.random())]
}}},
{value:135, name:'直达',type:"视频广告",itemStyle:{
normal:{
color:colors[Math.floor(40*Math.random())]
}}},
{value:1048, name:'营销广告',type:"百度",itemStyle:{
normal:{
color:colors[Math.floor(40*Math.random())]
}}},
{value:251, name:'营销广告',type:"谷歌",itemStyle:{
normal:{
color:colors[Math.floor(40*Math.random())]
}}},
{value:147, name:'营销广告',type:"必应",itemStyle:{
normal:{
color:colors[Math.floor(40*Math.random())]
}}},
{value:102, name:'营销广告',type:"其他",itemStyle:{
normal:{
color:colors[Math.floor(40*Math.random())]
}}}
]
}
]
};
实现echarts内外圈联动的更多相关文章
- 两个echarts地图联动高亮区域
项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动,曾尝试了connect不好使,所以自己写了这段代码.代码思路为: 鼠标移入地图时,另一侧的地图根据鼠标悬浮获取到的区域name使该区域高亮: 鼠标 ...
- Echarts 之二——地市联动数据统计
一.简介 通过地图可以更直观地展示各个地区的统计数据,能够更清楚地进行数据分析.有些场景下,我们不仅仅需要对每个地市进行统计分析.更需要对地市一下的区县进行数据统计,并进行联动.此事我们可以通过Ech ...
- Echarts 之三 —— 地市联动数据统计二
一.简介 除了是一个地图之外,我们也可以使用多地图进行地市.区县联动数据统计.需求如下:展示整改广东省的地图,并显示统计信息,当点击某一个地市的时候,就显示该地市的地图,并统计该地市区县的数据信息.二 ...
- echarts 点击方法总结,点任意一点获取点击数据,在多图联动中用生成标线举例
关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击点击任意一个图上任意一点 ...
- vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控
流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...
- echarts 点击方法总结,点任意一点获取点击数据,举例说明:在多图联动中点击绘制标线
关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击任意一个图上任意一点,在 ...
- 【ECharts】报表联动,动态数据设计
说明: 数据没有拉取后台数据,仅仅前端模拟数据,Copy即可有效果.联动后台时,使用异步获取数据即可.鼠标点击,动态展示点击项的数据.有关更多实例,请移步到echarts官网查看. 成果展示: 相关代 ...
- ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- ECharts 报表事件联动系列三:柱状图,饼状图实现联动
源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
随机推荐
- Android 6.0 开发人员对系统权限的使用与练习(Permissions Best Practices)
Permissions Best Practices 在安装的过程中,用户非常easy忽略权限请求. 假设一个用户相应用感觉沮丧或者操心泄漏个人信息,那么这些用户就会不用他或者卸载它. 怎样规避这个问 ...
- Linux下iscsi的使用
查看是否已安装了iscsi-initiator: [root@test\ ~]# rpm -qa |grep iscsi iscsi-initiator-utils-6.2.0.868-0.18.e ...
- Linux Yum 命令使用举例
转自:https://blog.csdn.net/u012359618/article/details/51199309/ 本文给大家讲解Yum的使用15个范例: Yum软件包管理方式,在Red Ha ...
- hiho1509 异或排序
题目链接 题目大意: 给定一个长度为 n 的非负整数序列 a[1..n] 你需要求有多少个非负整数 S 满足以下两个条件: (1).0 ≤ S < 260 (2).对于所有 1 ≤ i < ...
- python面向对象的成员、属性等
#类成员: #字段 self.xy =qq . xy=qq #普通字段 (保存在对象里面) #直接通过点(.)+ 字段 进行调用 #静态字段 (保存在类里面) #静态字段属于类,在内存只保留一份 . ...
- Servlet中文乱码原因 解决 Get 和 Post 和客户端
一.Get方式的中文乱码 1) 使用如下页面表单内容: <form action="http://127.0.0.1:8080/day07/params" method=&q ...
- 《Unix环境高级编程》读书笔记 第13章-守护进程
1. 引言 守护进程是生存期长的一种进程.它们常常在系统引导装入时启动,仅在系统关闭时才终止.它们没有控制终端,在后台运行. 本章说明守护进程结构.如何编写守护进程程序.守护进程如何报告出错情况. 2 ...
- servlet关于转发用法
# 1.转发 ## (1)什么是转发? 一个web组件将未完成的处理交给另外一个web组件继续做. 注: web组件(servlet/jsp) 最常见的情况: ...
- 2019年北航OO第一单元(表达式求导任务)总结
2019面向对象课设第一单元总结 一.三次作业总结 1. 第一次作业 1.1 需求分析 第一次作业的需求是完成简单多项式导函数的求解,表达式中每一项均为简单的常数乘以幂函数形式,优化目标为最短输出.为 ...
- 【Henu ACM Round#24 E】Connected Components
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 要求把连续的一段li..ri的边全都删掉. 然后求剩下的图的联通数 如果暴力的话 复杂度显然是O(k*m)级别的. 考虑我们把li. ...