使用场景和需求：

　　第一层饼图显示党员党龄分布的情况。

　　

　　点击某个党龄段，查看拥有该党龄段的党支部。

　　

　　默认显示3个党支部，余下的党支部合并为其它，点击其它，查看余下的党支部。

　　

　　点击某个党支部，返回第一层饼图。

技术原理：

　　依靠Echart 点击事件的绑定，通过获取不同的参数向.net后端发送请求获取不同的数据，再将数据重新加载到Echart饼图中。

步骤概述：

　　1、初始Echart图表

　　

　　

　　2、在页面中定义函数，向.net后端发送请求获取数据。

　　加载第一层饼图的数据，同时绑定点击事件

　　

　　响应点击事件的函数

　　

　　　请求发送成功后，将数据加载到饼图中

　　

　　3、在后端定义方法，对请求进行响应和判断。

　　响应获取第一层饼图数据的请求。

　　

　　

　　

　　响应Echart单击的数据请求

　　

　　

　　获取前maxShow个党支部，余下的合并为其它

　　

　　返回数据给页面

　　

　　

单击Echart饼图实现数据钻取的更多相关文章

  1. 基于Grafana的监控数据钻取功能应用实践

    互联网企业中,随着机器规模以及业务量的爆发式增长,监控数据逐渐成为一种大数据,对监控大数据的分析,包括数据采集.数据缓存.数据聚合分析.数据存储.数据展现等几个阶段.不同阶段有不同的解决方案及支撑工具 ...

  2. echart 饼图数据为0不显示或者太小显示其他的解决办法

    饼图数据为0或者太小显示如下,不美观 解决办法: 为0的去掉,小于0.005的累加起来 方法 function getsData(_rowData){ var rowData=JSON.parse(J ...

  3. WebGIS中利用AGS JS+eChart实现一些数据展示的探索

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...

  4. echart(2),模拟数据导入篇

    先上图,就是介样子的: 所模拟的效果就是讲左下角的li里面的数据取出来,然后用环形图的展示出数据. 看代码截图: 1.总的框架图: 2.循环取数据的js代码: 3.echart提供额官方api的代码 ...

  5. EChart处理三维数据做图表、多维legend图例处理

    处理三维数据做图表,比如返回的数据就是一个个list,list里面某几个数据同属于一个维度,项目中的实例效果如下: 上面的khfx会有多个,比如db1.db2.db3等,下面的那些数据也会变化,目前需 ...

  6. echart图表展示数据-简单的柱状图

    话不多说,先上几张效果图 给大家看看 1:echart所用到的文件包需要事先引入好具体可见 http://echarts.baidu.com/doc/start.html 2:本例中所有的数据都是通过 ...

  7. FusionCharts 3.2.1 flash 图表展示、数据钻取

    StackedColumn3DLineDY.swf 效果展示: 一.页面代码 <div id="chart2div" align="center" sty ...

  8. Echart饼图、柱状图、折线图(pie、bar、line)加入点击事件

    var myChart= echarts.init(document.getElementById('myChart')); myChart.on('click', function (param) ...

  9. highcharts柱状图和饼图的数据填充

    1.其实数据填充很简单,它们就是json的格式,然后后台按照这种格式去套数据发给前端:前端再做一下连接处理等就行了. $('#program_statistics_bar').highcharts({ ...

随机推荐

  1. jsp/servlet中的编码问题

    首先声明以下只是我个人的看法,有部分观点与网上人云亦云的观点不一样,不过凡事必恭亲,我还是相信自己测试的结果 推荐一个很好地URL编码详解http://www.ruanyifeng.com/blog/ ...

  2. div套div 里面div有浮动 外面div自适应高度

    <div style="background-color:red;"> <div style="float:left;background-color: ...

  3. markdown 自定义一个锚点

    //自定义锚点 s "m[": function mlink( text ) { var orig = String(text); // Inline content is pos ...

  4. Python笔记4-20151029

    一.切片 L = [''Michael','Sarah','Tracy','Bob','Jack'] 取前N个元素,也就是索引为0-(N-1)的元素,可以用循环: >>> r = [ ...

  5. 一、java自带的观察者模式

    Observer对象是观察者,Observable对象是被观察者. 官网api文档:http://docs.oracle.com/javase/7/docs/api/ 1. 实现观察者模式 实现观察者 ...

  6. sql优化方式-转载

    我始终认为,一个系统的性能的提高,不单单是试运行或者维护阶段的性能调优的任务,也不单单是开发阶段的事情,而是在整个软件生命周期都需要注意,进行有效工作才能达到的.所以我希望按照软件生命周期的不同阶段来 ...

  7. 12C RMAN 备份参考v1

    windows bat 1,C:\dba\utility\rman\rman.bat del C:\dba\utility\rman\full_db_* /qset TNSNAME=ceipuatrm ...

  8. HTML，JS禁止鼠标右键、禁止全选、复制、粘贴的方法

    禁止鼠标右键.禁止全选.复制.粘贴: oncontextmenu事件禁用右键菜单: js代码: document.oncontextmenu = function(){ event.returnVal ...

  9. JPA 系列教程 异常 集锦

    异常1.hibernate升级到3.5版本 异常信息摘要: Associations marked as mappedBy must not define database mappings like ...

  10. mis 系统的开发具备的条件

    MIS的开发方式有自行开发.委托开发.联合开发.购买现成软件包进行二次开发几种形式.一般来说根据企业的技术力量.资源及外部环境而定. 补充: 管理信息系统的开发策略不可行的开发方法:组织结构法,机械的 ...