//控制都是通过控制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. 利用wget 抓取 网站网页 包括css背景图片

    利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...

  2. 移动端1px细线问题

    1可以用伪类实现 .con{position: relative;.con:before { content: " "; position: absolute; left: 0; ...

  3. Linux mount挂载umount卸载

    mount/umount挂载/卸载 对于Linux用户来讲,不论有几个分区,分别分给哪一个目录使用,它总归就是一个根目录.一个独立且唯一的文件结构 Linux中每个分区都是用来组成整个文件系统的一部分 ...

  4. C# 比较两个数据的不同

    string[] arrRate = new string[] { "op1010", "op1020", "op1030", " ...

  5. 编程语言与Python学习(二)

    1.1 流程控制之for循环 1 迭代式循环:for,语法如下 for i in range(10): 缩进的代码块 2 break与continue(同上) 3 循环嵌套 for i in rang ...

  6. 51nod 1272 最大距离 O(nlog(n)) , 快排 , 最大连续子串

    题目: 解法:排序,把值小的和索引小的放在前面,记录一下之前索引最小的就可以了. 没什么可以讲的,上代码吧: #include <bits\stdc++.h> using namespac ...

  7. HTML基础——网站后台显示页面

    1.框架集标签:(作用:将页面进行区域的划分) <frameset rows="" cols=""> <frame src="&qu ...

  8. out ref params

    out的使用 out 能够使我们的函数返回多个类型的值,不再受返回类型的设置: 就是相当于在方法里不仅仅给了一个返回值,被out修饰的参数的值也能带出去: 所以就是说,在方法体内被out修饰的参数,都 ...

  9. 本地yum源安装docker

    Directory listing for / audit-libs-python-2.7.6-3.el7.x86_64.rpm checkpolicy-2.5-4.el7.x86_64.rpm co ...

  10. 简单搭建zookeeper集群分布式/伪分布式

    分布式搭建 一.下载zookeeper安装包 自行下载:我用的是 zookeeper-3.5.4-beta.tar.gz 二.环境准备 1. 我的虚拟机自带的java是1.7的,这个版本要求java1 ...