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柱状图每个柱子显示不同颜色，并且能够实现点击每种颜色影藏对应柱子的功能
---------------------------------------------------------代码区---------------------------------------- ...
随机推荐
- poj 2057 树形DP，数学期望
题目链接:http://poj.org/problem?id=2057 题意:有一只蜗牛爬上树睡着之后从树上掉下来,发现后面的"房子"却丢在了树上面, 现在这只蜗牛要求寻找它的房子 ...
- Kubernetes解决了Docker使用中的哪些问题？
kubernetes是谷歌开源的容器集群管理系统,是Google多年大规模容器管理技术Borg的开源版本 (1)基于容器的应用部署.维护和滚动升级 (2)网络,建立容器之间的通信子网如隧道.路由等,解 ...
- PASCAL VOC数据集分析
http://blog.csdn.net/zhangjunbob/article/details/52769381
- 尝试将 SCRIPT ompbox\private\ompmex 作为函数执行
1.安装VS2010 2.配置ombox 在ombox路径下 mex -setup C++ 然后 make
- cudaMalloc和cudaMallocPitch
原文链接 偶有兴趣测试了一下题目中提到的这两个函数,为了满足对齐访问数据,咱们平时可能会用到cudamallocPitch,以为它会带来更高的效率.呵呵,这里给出一段测试程序,大家可以在自己的机器上跑 ...
- Windows核心编程-作业
原文链接:http://zhujiangtao.com/?p=983 作业 作业 一个简单例程 CreateJobObject 创建作业 作业限制和 SetInformationJobObject A ...
- C# return语句
一.C# return语句 return语句用于终止它出现在其中的方法的执行,并将控制返回给调用方法. 语法格式如下: return ...;return语句还可以返回一个可选值.如果方法为void类 ...
- chisel（安装）
github地址 先安装homeBrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m ...
- Python 初始—(多级字典)
字典中 嵌套字典 如同json 对象, data={ "msg":{ “xxx.com”:["a","b"] } } data.values ...
- Integer和int使用==比较的总结
public static void main(String[] args) { int i1 = 128; Integer i2 = 128; Integer i3 = new Integer(12 ...