//控制都是通过控制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. OSGi 和 C++

    2011年 9月我参加了OSGi社区在达姆施塔特的会议,并且有机会与其他与会者探讨本机c++实现的OSGi规范的现状.在这一事件之前我也一直想写一篇博客,来描述关于当前实现OSGi规范的现状和努力—— ...

  2. (二)Ribbon(负载均衡的客户端)+Rest

    前面讲了服务的注册与发现,微服务项目会把项目的各个业务需求划分成几个模块来单独提供服务,各服务间的调用都是采用Http Restful来实现,但是在SpringClound中服务间的调用有两种方式:一 ...

  3. xBIM 实战02 在浏览器中加载IFC模型文件并设置特效

    系列目录    [已更新最新开发文章,点击查看详细]  在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...

  4. mysql索引的注意事项

    索引的优点 大大加快数据的查询速度 使用分组和排序进行数据查询时,可以显著减少查询时分组和排序的时间 创建唯一索引,能够保证数据库表中每一行数据的唯一性 在实现数据的参考完整性方面,可以加速表和表之间 ...

  5. 安装Windows服务方法

    用sc create 服务名 binPath="路径",不要用老方法InstallUtil会出现一堆的错误

  6. ASP.NET使用MergeInto做数据同步,同步SQLSERVER不同数据库的相同表结构的数据

    public string SynchronousData() { ReturnJson Rejson = new ReturnJson(); //将WebConfig中的数据库连接name中的值写进 ...

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

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

  8. (2016北京集训十)【xsy1529】小Q与进位制 - 分治FFT

    题意很简单,就是求这个数... 其实场上我想出了分治fft的正解...然而不会打...然后打了个暴力fft挂了... 没啥好讲的,这题很恶心,卡常卡精度还爆int,要各种优化,有些dalao写的很复杂 ...

  9. Linux Eslint 命令行

    Linux 命令行 ls : 查看所有文件 ls -la : 编列文件并展示权限 sudo chmod 777 -R   文件名  : 文件权限升级 cp : 复制      cp   file_na ...

  10. 利用shell脚本添加环境变量

    在shell脚本设置了环境变量,如export LIBRARY_PATH=./lib/,执行了此脚本后, 在执行生成的可执行文件,提示错误 error while loading shared lib ...