单击Echart饼图实现数据钻取
使用场景和需求:
第一层饼图显示党员党龄分布的情况。
点击某个党龄段,查看拥有该党龄段的党支部。
默认显示3个党支部,余下的党支部合并为其它,点击其它,查看余下的党支部。
点击某个党支部,返回第一层饼图。
技术原理:
依靠Echart 点击事件的绑定,通过获取不同的参数向.net后端发送请求获取不同的数据,再将数据重新加载到Echart饼图中。
步骤概述:
1、初始Echart图表
2、在页面中定义函数,向.net后端发送请求获取数据。
加载第一层饼图的数据,同时绑定点击事件
响应点击事件的函数
请求发送成功后,将数据加载到饼图中
3、在后端定义方法,对请求进行响应和判断。
响应获取第一层饼图数据的请求。
响应Echart单击的数据请求
获取前maxShow个党支部,余下的合并为其它
返回数据给页面
单击Echart饼图实现数据钻取的更多相关文章
- 基于Grafana的监控数据钻取功能应用实践
互联网企业中,随着机器规模以及业务量的爆发式增长,监控数据逐渐成为一种大数据,对监控大数据的分析,包括数据采集.数据缓存.数据聚合分析.数据存储.数据展现等几个阶段.不同阶段有不同的解决方案及支撑工具 ...
- echart 饼图数据为0不显示或者太小显示其他的解决办法
饼图数据为0或者太小显示如下,不美观 解决办法: 为0的去掉,小于0.005的累加起来 方法 function getsData(_rowData){ var rowData=JSON.parse(J ...
- WebGIS中利用AGS JS+eChart实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eChart提供了迁徙图.热点图.夜视图等跟地图能够很好的结 ...
- echart(2),模拟数据导入篇
先上图,就是介样子的: 所模拟的效果就是讲左下角的li里面的数据取出来,然后用环形图的展示出数据. 看代码截图: 1.总的框架图: 2.循环取数据的js代码: 3.echart提供额官方api的代码 ...
- EChart处理三维数据做图表、多维legend图例处理
处理三维数据做图表,比如返回的数据就是一个个list,list里面某几个数据同属于一个维度,项目中的实例效果如下: 上面的khfx会有多个,比如db1.db2.db3等,下面的那些数据也会变化,目前需 ...
- echart图表展示数据-简单的柱状图
话不多说,先上几张效果图 给大家看看 1:echart所用到的文件包需要事先引入好具体可见 http://echarts.baidu.com/doc/start.html 2:本例中所有的数据都是通过 ...
- FusionCharts 3.2.1 flash 图表展示、数据钻取
StackedColumn3DLineDY.swf 效果展示: 一.页面代码 <div id="chart2div" align="center" sty ...
- Echart饼图、柱状图、折线图(pie、bar、line)加入点击事件
var myChart= echarts.init(document.getElementById('myChart')); myChart.on('click', function (param) ...
- highcharts柱状图和饼图的数据填充
1.其实数据填充很简单,它们就是json的格式,然后后台按照这种格式去套数据发给前端:前端再做一下连接处理等就行了. $('#program_statistics_bar').highcharts({ ...
随机推荐
- 关于Python2字符编码的体会
对于Python的字符编码问题也懵了很久,最近做爬虫多次遇到网页转码的问题,干脆彻底解决掉!Just Do it! 1.两种类型str与unicode str和unicode都是basestring的 ...
- ONE WIRE
以温度温度传感器为例 由三根线,分别为电源,信号,地线 使用GPIO口对信号线进行读操作 //初始化GPIO PC0端口void dht11_init(){ GPIO_InitTypeDef GPIO ...
- Java之IO流
目录: 1.文件编码 2.File类 3.RandomAccessFile 4.字节流 5.字符流 6.对象的序列化和反序列化 1.文件编码 1)相关知识点 八进制和十六进制的表示方式:八进制前面加0 ...
- Kruskal算法的简单实现
嘛嘛嘛,好像大家在实现Kruskal算法是都是用的边集数组,判断图的连通性咱不会,o(╯□╰)o(为什么咱这么菜诶) Kruskal算法: 规则: (1)对每一条边按照从小到大进行排序 (2)加入边的 ...
- Selenium+Python之163邮件发送
今晚写了一个163邮箱登录的脚本,由于不停的访问163登录主页导致直接访问163邮箱主页登录需要输入验证码,因为无法获取到验证码,就这导致直接访问主页登录脚本不可行,为了绕过验证码,现在先访问hao1 ...
- Mac下Cordova开发环境搭建
xcode下载 从Mac App Store 下载Xcode,只需要在Store键入Xcode,下载第一个就ok了 cordova安装与配置 cordova需要node安装,使用Safari打开nod ...
- 网站引导页flash动画跳转js脚本
if (getCookie("guidance") == null) { document.cookie = "guidance=true"; window.l ...
- github 上传文件
1.删除项目 2. 包管理器初始化 npm init name 必填项 后面可一直回车 最后选择yes 3.建立本地仓储 在git bash 中输入命令 git init 4. 添加 ...
- mac版tomcat修改端口无法访问,80端口无法访问
在mac上安装好了tomcat,修改了端口为80,没想到关闭tomcat时提示出错,而且无法访问,原来我犯了两个错误. 1.我用的是mac上的文本编辑.app打开然后修改的,重新修改为8080也不行, ...
- js、jquery对节点的操作(增、删)
js对节点的操作方法 一.获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: var parent = document.getElementById("o ...