使用场景和需求:

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

  

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

  

  默认显示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. Openwrt 初始化脚本

    Openwrt 使用自己的初始化脚本系统,所有的初始化脚本位于 /etc/init.d 目录下. 任何一个初始化脚本必须包含基本的 start() 和 stop() 函数.当系统启动或用户拉起对应的进 ...

  2. 可用fidder测试的一些安全测试点

    以下是整理的一些常见的安全渗透测试点 1.用工具fidder抓包拦截篡改服务器端返回的代码,导致下级拥有对上级的访问操作权限 以下是公司开发写的用户角色权限页面跳转 修改普通角色跳转的页面为管理员跳转 ...

  3. Hibernate遇到oracle之主键生成策略

    一直用Hibernate+mysql,感觉Hibernate很好用,也出过什么大问题:这周,公司的产品要部署到Orecle,虽然产品号称支持Oracle但是我自己知道,这个产品压根儿就没在Oracle ...

  4. 关于css起名

    作者:词晖链接:https://www.zhihu.com/question/19586885/answer/48933504来源:知乎著作权归作者所有,转载请联系作者获得授权. CSS书写顺序 1. ...

  5. lvs 会话保持(转发)

    lvs & keepalived的tcp 长连接的问题解决办法 虽然应用keepalived搞定了后端服务负载均衡和高可用性问题,但是在具体应用的时候,还是要注意很多问题.很多应用都用tcp或 ...

  6. My Sql多表操作(转载)

    DELETE 在Mysql4.0之后,mysql开始支持跨表delete. Mysql可以在一个sql语句中同时删除多表记录,也可以根据多个表之间的关系来删除某一个表中的记录. 假定我们有两张表:Pr ...

  7. C#中string.Substring 的用法

    String.SubString(int  startIndex,int length)     startIndex:截取字符串开始的位置       length:截取字符串的长度 例子:用户 输 ...

  8. maven 阿里镜像

    <mirror> <id>alimaven</id> <mirrorOf>central</mirrorOf> <name>al ...

  9. mybatis笔记(一)

    mybatis (一)传值 三种方式 1.直接传值void getMessageList(int userId,String userName);mapper.xml 获取 #{0}代表userId ...

  10. 查看SQL语句执行时间与测试SQL语句性能

    查看SQL语句执行时间与测试SQL语句性能 写程序的人,往往需要分析所写的SQL语句是否够优化.是否能提升执行效率,服务器的响应时间有多快,这个时候就需要用到SQL的STATISTICS状态值来查看了 ...