//控制都是通过控制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. mariadb克隆

    oracle有克隆安装,事实上mysql/mariadb相似.仅仅需简单几步就能够直接在异机直接启动. 环境: node01安装完毕的mariadb; node02一个新机器 如今将node01克隆到 ...

  2. m_Orchestrate learning system---二十七、修改时如何快速找到作用位置

    m_Orchestrate learning system---二十七.修改时如何快速找到作用位置 一.总结 一句话总结:找人,找起作用的位置真的重要,找到就事半功倍了 加载页面的时候观察在f12的e ...

  3. MYSQL INT(N)以及zerofill的使用区别

    MYSQL中,int(n)括号里面的数据n无论写成多少,都是占4个字节的空间,最多能够存10位数.N不代表能够存多少位数,显示宽度M与数据所占用空间,数值的范围无关. 如果在定义字段的时候指定zero ...

  4. sicily 1002 Anti-prime Sequences

    debug了好久..各种犯错..按照某个学长的思路,终于AC了.. #include <iostream> #include <cstring> using namespace ...

  5. 关于javascript 与iOS交互的简单使用

    关于导入 JavaScriptCore 这个就不说了 js交互我们首先用到webView与webView的代理 基本上是很简单,,不过后台10分的坑 以下是代码 在webView的加载完成里面 fun ...

  6. Django(part4)

    一个简单的form表单: #polls/templates/polls/detail.html<h1>{{ question.question_text }}</h1> {% ...

  7. jQuery获取单选框(复选框)选中的状态

    jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...

  8. ActiveMQ学习笔记(13)----Destination高级特性(一)

    1. Wildcards 1. Wildcards用来支持名字分层体系,它不是JMS规范的一部分,是ActiveMQ的扩展. ActiveMQ支持一下三种wildcards: 1. ".&q ...

  9. Matlab从入门到精通 Chapter5 数据可视化--

    5-1 图形绘制示例 >> x2=-17:0.02:3; >> y2=1./((x2+3).^2+1)+1./((x2+9).^2+4)+5; >> subplot ...

  10. MyBatis中关于SQL标签的用法(重用SQL 代码段)

    一. 没用sql标签前的SQL映射代码: <select id="findById" resultType="cn.tedu.mybatis.entity.User ...