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柱状图每个柱子显示不同颜色，并且能够实现点击每种颜色影藏对应柱子的功能
---------------------------------------------------------代码区---------------------------------------- ...
随机推荐
- 数集合有多少个TOJ(2469)
题目链接:http://acm.tju.edu.cn/toj/showp2469.html 感觉这个题目有点问题,算了不管他了,反正A了. 这里要注意的是求这个集合有多少种,那么就是要剔除重复数后,再 ...
- 转：深入浅出spring IOC中四种依赖注入方式
转:https://blog.csdn.net/u010800201/article/details/72674420 深入浅出spring IOC中四种依赖注入方式 PS:前三种是我转载的,第四种是 ...
- Http之基础
简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于TCP/I ...
- 1、SpringBoot------表单校验
开发工具:STS 代码下载链接:https://github.com/theIndoorTrain/Springboot/tree/1ef5e597a6f866e73387c0238dbcdf46cf ...
- Ubuntu安装MySQL及使用Xshell连接MySQL出现的问题(2003-Can't connect to MySql server及1045错误)
不管在什么地方,什么时候,学习是快速提升自己的能力的一种体现!!!!!!!!!!! 以下所有的命令都是在root用户下操作(如果还没有设置root密码)如下: 安装好Ubuntu系统之后,打开终端先设 ...
- Navicat Premium Mac 12 破解
破解地址:https://blog.csdn.net/xhd731568849/article/details/79751188 亲测有效
- MySQL数据库 : 自关联,视图,事物,索引
自关联查询(自身id关联自身id(主键),查询的时候可以逻辑分为两个表,然后分别起一个别名来区分) select * from areas as cityinner join areas as pro ...
- 谈一谈如何远程访问MySQL(腾讯云,云主机)
连接MySQL (其他的sql 基本相同套路) 腾讯云不管怎么设置端口和MySQL权限以及监听端口就是不能连接? 远程访问MySQL数据库的几个关键点 端口设置 数据库权限设置 数据库的监听端口设置 ...
- 使用selenium模拟登录知乎
网上流传着许多抓取知乎数据的代码,抓取它的数据有一个问题一定绕不过去,那就是模拟登录,今天我们就来聊聊知乎的模拟登录. 获取知乎内容的方法有两种,一种是使用request,想办法携带cookies等必 ...
- 硬盘安装Windows Server 2008(解决系统盘符变成D盘)
硬盘安装Windows 2008系统方法 操作系统最好用的无疑是server 2003,但是现在Server 2003支持的软件越来越少,很多是故意不支持Server 2003了, 像php5.5以上 ...