echarts 柱状图下钻功能
| var drillDown = { | |
| getOption : function () { | |
| var option = null; | |
| option = { | |
| title: { | |
| text: '折线图下钻示例', | |
| left: 'center' | |
| }, | |
| tooltip: { | |
| trigger: 'item', | |
| formatter: '{a} <br/>{b} : {c}' | |
| }, | |
| legend: { | |
| left: 'left', | |
| data: ['月数据'] | |
| }, | |
| xAxis: { | |
| type: 'category', | |
| name: 'x', | |
| splitLine: {show: false}, | |
| data: ['201601', '201602', '201603', '201604', '201605', '201606', '201607', '201608', '201609'] | |
| }, | |
| grid: { | |
| left: '3%', | |
| right: '4%', | |
| bottom: '3%', | |
| containLabel: true | |
| }, | |
| yAxis: { | |
| type: 'log', | |
| name: 'y' | |
| }, | |
| series: [ | |
| { | |
| name: '月数据', | |
| type: 'line', | |
| data: [1, 2, 4, 8, 16, 32, 64, 128, 256] | |
| } | |
| ] | |
| }; | |
| return option; | |
| }, | |
| initChart : function (myChart,option) { | |
| myChart.setOption(option); | |
| myChart.on('click',function(object){ | |
| // 销毁之前的echarts实例 | |
| echarts.dispose(dom); | |
| // 初始化一个新的实例 | |
| var myChart = echarts.init(dom); | |
| // object为当前的这个echart对象，大家可以自己打印出来看看 | |
| // console.dir(object); | |
| // 我们可以看到name属性即为当前点击点的对应月份值，那么我们可以通过这个值去接口查询对应201609月份下的每一天的值. | |
| // 此处的201609月份数据可以通过接口读取 | |
| // $.ajax( | |
| // type : 'get', | |
| // url : interfaceUrl + '&month=' + object.name, // 此处可以替换为你的接口地址 | |
| // dataType : 'json', | |
| // success : function (msg){ | |
| // option.xAxis.data = msg.xAxis; | |
| // option.series[0].data = msg.yAxis[0]; | |
| // myChart.setOption(option, true); | |
| // } | |
| // ); | |
| // 我这里就模拟一个测试数据，做为demo演示 | |
| option.xAxis.data = [ | |
| '2016-09-01','2016-09-02','2016-09-03','2016-09-04','2016-09-05','2016-09-06','2016-09-07','2016-09-08', | |
| '2016-09-09','2016-09-10','2016-09-11','2016-09-12','2016-09-13','2016-09-14','2016-09-15','2016-09-16', | |
| '2016-09-17','2016-09-18','2016-09-19','2016-09-20','2016-09-21','2016-09-22','2016-09-23','2016-09-24', | |
| '2016-09-25','2016-09-26','2016-09-27','2016-09-28','2016-09-29','2016-09-30' | |
| ]; | |
| option.series[0].data = [ | |
| 3,4,5,6,5,6,7,8,8,9, | |
| 12,13,15,16,20,12,30,21,22,29, | |
| 30,31,33,34,35,36,20,29,33,40 | |
| ]; | |
| myChart.setOption(option, true); | |
| }); | |
| }, | |
| }; |
| <!DOCTYPE html> | |
| <html style="height: 100%"> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body style="height: 100%; margin: 0"> | |
| <div style="margin-left:40%;margin-top:2%"> | |
| <button id='return-button' value=''>返回</button> | |
| </div> | |
| <div id="container" style="height: 50%;width: 50%"></div> | |
| <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> | |
| <script type="text/javascript" src="../jquery.js"></script> | |
| <script type="text/javascript" src="./drillDown.js"></script> | |
| <script type="text/javascript"> | |
| var dom = document.getElementById("container"); | |
| var myChart = echarts.init(dom); | |
| var option = drillDown.getOption(); | |
| drillDown.initChart(myChart,option); | |
| $('#return-button').on('click',function(){ | |
| var myChart = echarts.init(dom); | |
| var option = drillDown.getOption(); | |
| drillDown.initChart(myChart,option); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
echarts 柱状图下钻功能的更多相关文章
- Echarts柱状图实现不同颜色渐变色
第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...
- echarts 某省下钻某市地图
因为最近工作需要,接触到了highcharts 与echarts ,对比了一下,目前公司系统用的是highcharts的图表插件,就不想再去用echarts的图标插件了,奈何highcharts地图对 ...
- vue Echarts 柱状图点击事件
drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...
- echarts柱状图标签显示不完全的问题
echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...
- 关于Echarts柱状图实现的细节
echarts柱状图显示数值[1] echarts2: itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- echarts柱状图个数多，横坐标名称过长显示不全解决方法
当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...
- 第三方工具 - 关于echarts下钻功能的一些总结.js
废话:好久没有写博客了,每每看着自己的'战绩'都有点愧疚,但是这段时间确实学习了不少东西,待我慢慢地一 一梳理,将之消化并分享. ---------------------------$O_O$--- ...
- echarts柱状图每个柱子显示不同颜色，并且能够实现点击每种颜色影藏对应柱子的功能
---------------------------------------------------------代码区---------------------------------------- ...
随机推荐
- UTF8与ANSI互转
在取回的结果中,如果有Unicode字符,用printf来打印的话,则会出现乱码.通过这个方法,可以判断是否为unicode字符,是的话,通过wprintf来打印.1.判断字符串是否为Unicode的 ...
- Ipad连接电脑超时问题
同时按 HOME+POWER 硬件重启 就会在ipad上弹出信任or不信任选项了 选择信任即可
- javaScript校验图片大小、格式
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- C语言学生成绩管理系统（简易版）
#include<stdio.h> #include<stdlib.h> #include<string.h> int readstudents(struct st ...
- 基于Vue的SPA如何优化页面加载速度
常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使 ...
- python格式化输出的方式汇总
%% 百分号标记 #就是输出一个%%c 字符及其ASCII码%s 字符串%d 有符号整数(十进制)%u 无符号整数(十进制)%o 无符号整数(八进制)%x 无符号整数(十六进制)%X 无符号整数(十六 ...
- mysql基础 反范式化
- 【整理】PHP获取客户端真实IP地址详解
php获取客户端IP地址有四种方法,这五种方法分别为REMOTE_ADDR.HTTP_CLIENT_IP.HTTP_X_FORWARDED_FOR.HTTP_VIA. REMOTE_ADDR 是你的客 ...
- Python__学习路上的坑之--引用,浅拷贝,深拷贝
copy : 相当于只是拷贝表面一层,如果里面还有深层次的引用,那么也是直接拷贝引用的地址,而且如果拷贝对象是不可变类型比如元组,那么也是直接拷贝引用. deepcopy: 无论是拷贝可变类型还是不可 ...
- 笔记-python-module导入技巧
笔记-python-module导入技巧 1. module导入技巧 1.1. 控制模块导入内容 在模块中定义 __all__ = [] 不多言,主要是影响from <> ...