使用场景和需求：

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

　　

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

　　

　　默认显示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. [ An Ac a Day ^_^ ] POJ 3254 Corn Fields 状压dp

    题意: 有一块n*m的土地 0代表不肥沃不可以放牛 1代表肥沃可以放牛 且相邻的草地不能同时放牛 问最多有多少种放牛的方法并对1e8取模 思路: 典型的状压dp 能状态压缩 能状态转移 能状态压缩的题 ...

  2. 2016 Vultr VPS最新优惠码，赠送新用户70美元，亲测有效

    vultr肯定疯了,从来没有哪家海外vps像vultr那么大力度的优惠.近期,vultr vps再度推出优惠码,任何新用户注册即送20美元!要知道,vultr vps最便宜的vps套餐只要5美元/月, ...

  3. Python基础（六）-内置函数

      map().filter().reduce() map(func,iterator) --> filter(func,iterator) --> reduce(func,iterato ...

  4. Linux安装mysql mysql5.5.40 <NIOT>

    一.    操作系统与软件 操作系统及版本 Centos 6.4 依赖包 gcc.gcc-c++.cmake.ncurses-devel 下载目录 /opt Mysql安装目录 /usr/local/ ...

  5. SaltStack Job管理

    Job基本管理 Jid: job id,格式为%Y%m%d%H%M%S%f 在master在下发指令消息时,会附带上产生的jid.minion在接收到指令开始执行时,会 在本地的cachedir(默认 ...

  6. JWT 多网站单点登录，放弃session

    多个网站之间的登录信息共享, 基于cookie - session的登录认证方式跨域等比较复杂.采用基于算法的认证方式, JWT(json web token)的方式. --------------- ...

  7. EditText文本中用正则匹配是否包含数字，及判断文本只能是纯汉字或纯字母

    遇到判断EditText中文本,是否为制定格式 EditText et; Button btn; @Override protected void onCreate(Bundle savedInsta ...

  8. php 设置白名单ip

    //检查白名单ip private function _checkAllowIp() { $allowIp = ['203.195.156.12']; $ip = $this->getIp(); ...

  9. TCP和UDP报文分片的区别

    搞了三年网络,今天才知道这个细节,汗,总结下: MTU大家都知道,是链路层中的网络对数据帧的一个限制,依然以以太网为例,MTU为1500个字节.一个IP数据报在以太网中 传输,如果它的长度大于该MTU ...

  10. KMP算法的java实现

    package com.trs.utils; public class KMPStr { /* * 在KMP算法中,最难求的就是next函数,如何理解next函数是一个难题,特别是k=next[k], ...