//控制都是通过控制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内外圈联动的更多相关文章

  1. 两个echarts地图联动高亮区域

    项目要求左右两张地图能够在鼠标悬浮的时候高亮部分联动,曾尝试了connect不好使,所以自己写了这段代码.代码思路为: 鼠标移入地图时,另一侧的地图根据鼠标悬浮获取到的区域name使该区域高亮: 鼠标 ...

  2. Echarts 之二——地市联动数据统计

    一.简介 通过地图可以更直观地展示各个地区的统计数据,能够更清楚地进行数据分析.有些场景下,我们不仅仅需要对每个地市进行统计分析.更需要对地市一下的区县进行数据统计,并进行联动.此事我们可以通过Ech ...

  3. Echarts 之三 —— 地市联动数据统计二

    一.简介 除了是一个地图之外,我们也可以使用多地图进行地市.区县联动数据统计.需求如下:展示整改广东省的地图,并显示统计信息,当点击某一个地市的时候,就显示该地市的地图,并统计该地市区县的数据信息.二 ...

  4. echarts 点击方法总结,点任意一点获取点击数据,在多图联动中用生成标线举例

    关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击点击任意一个图上任意一点 ...

  5. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  6. echarts 点击方法总结,点任意一点获取点击数据,举例说明:在多图联动中点击绘制标线

    关于点击(包括左击,双击,右击等)echarts图形任意一点,获取相关的图形数据,尤其是多图,我想部分人遇到这个问题一直很头大.下面我用举例说明,如何在多图联动基础上,我们点击任意一个图上任意一点,在 ...

  7. 【ECharts】报表联动,动态数据设计

    说明: 数据没有拉取后台数据,仅仅前端模拟数据,Copy即可有效果.联动后台时,使用异步获取数据即可.鼠标点击,动态展示点击项的数据.有关更多实例,请移步到echarts官网查看. 成果展示: 相关代 ...

  8. ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  9. ECharts 报表事件联动系列三:柱状图,饼状图实现联动

    源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

随机推荐

  1. JS冒泡事件 与 事件捕获

    JS冒泡事件 与 事件捕获 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> < ...

  2. zzulioj--1712--Monty Hall problem(蒙提霍尔问题)

     1721: Monty Hall problem Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 186  Solved: 71 SubmitSt ...

  3. zzuoj--1001--汽水瓶(简单数学)

    1001: 汽水瓶 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 194  Solved: 77 [Submit][Status][Web Board ...

  4. ibatis annotations 注解方式返回刚插入的自增长主键ID的值--转

    原文地址:http://www.blogs8.cn/posts/WWpt35l mybatis提供了注解方式编写sql,省去了配置并编写xml mapper文件的麻烦,今天遇到了获取自增长主键返回值的 ...

  5. Appserv 2.5.10 升级PHP from version 5.2 to 5.3

    解决方案查看 该文章:http://blog.csdn.net/dull_boy2/article/details/43927363

  6. 51nod 1179 最大的最大公约数 (打表计数法)

    题目: 考虑清楚就简单了,我们把每个数的因子计数. 两个数的公约数就是计数超过2的数,然后找到最大的那个就好了. 计算每个数的素因子,记得sqrt(),不然会超时. 打表计数法时间复杂度O(n*sqr ...

  7. [USACO10NOV]奶牛的图片Cow Photographs 树状数组 递推

    Code: #include<cstdio> #include<algorithm> #include<string> #include<cstring> ...

  8. layui计算剩余时间

    <div id="test"></div> <script> layui.use('util', function(){ var util = ...

  9. 微软的鼠标 Microsoft mouse

    微软是做软件出身的厂商, 所以微软开发的软件质量毋庸置疑,Windows操作系统还有诸如Office的办公软件拥有庞大的用户群. 微软家的Visual Studio也被号称宇宙最强IDE,我个人也每天 ...

  10. Ajax通过script src特性加载跨域文件 jsonp

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Do ...