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 柱状图下钻功能的更多相关文章

  1. Echarts柱状图实现不同颜色渐变色

    第一次写文,只是想记录一下自己平时发现的小功能,这篇主要是实现echarts柱状图,每个柱子实现不同颜色的渐变色,也是第一次接触echarts,后台使用ssm,前台是extjs,直接上效果图 直接上j ...

  2. echarts 某省下钻某市地图

    因为最近工作需要,接触到了highcharts 与echarts ,对比了一下,目前公司系统用的是highcharts的图表插件,就不想再去用echarts的图标插件了,奈何highcharts地图对 ...

  3. vue Echarts 柱状图点击事件

    drawBar(){ let that = this; let chart = this.$echarts.init(document.getElementById('bar-graph')); le ...

  4. echarts柱状图标签显示不完全的问题

    echarts 柱状图当x轴标签数目超过一定数目时在小尺寸设备上第一个和最后一个标签不显示(不是重叠),axisLabel设置interval:0也不起作用; 解决办法: 这个问题存在于4.0版本以上 ...

  5. 关于Echarts柱状图实现的细节

    echarts柱状图显示数值[1] echarts2:  itemStyle : { normal: {label : {show: true, position: 'top'}}}, echarts ...

  6. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  7. echarts柱状图个数多，横坐标名称过长显示不全解决方法

    当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...

  8. 第三方工具 - 关于echarts下钻功能的一些总结.js

    废话:好久没有写博客了,每每看着自己的'战绩'都有点愧疚,但是这段时间确实学习了不少东西,待我慢慢地一 一梳理,将之消化并分享. ---------------------------$O_O$--- ...

  9. echarts柱状图每个柱子显示不同颜色，并且能够实现点击每种颜色影藏对应柱子的功能

    ---------------------------------------------------------代码区---------------------------------------- ...

随机推荐

  1. 解方程求PH值，POJ(2006)

    题目链接:http://poj.org/problem?id=2006 解题报告: 题意看了半天,没看懂,再加上化学没学好,更加让我头痛. 假设1L溶解了x摩尔的酸:ka=m*x*nx/ori-x; ...

  2. Rich feature hierarchies for accurate object detection and semantic segmentation(RCNN)

    https://zhuanlan.zhihu.com/p/23006190?refer=xiaoleimlnote http://blog.csdn.net/bea_tree/article/deta ...

  3. Maven项目导出可执行jar

    配置文件中添加插件 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>m ...

  4. python将图像转化为矩阵

    Image.fromarray(matrix).show()

  5. 使用 W3C Performance 对象通过 R 和 JavaScript 将浏览器内的性能数据可视化[转]

    当考虑 Web 性能指标时,需要关注的目标数字应该是从您自己的用户那里获得的实际用户指标.最常见的方法是利用 Splunk 之类的工具来分析您的机器数据,该工具支持您分析和可视化您的访问权限和错误日志 ...

  6. ES6 extends继承及super使用读书笔记

    extends 继承 extends 实现子类的继承 super() 表示父类的构造函数, 子类必须在 constructor中调用父类的方法,负责会报错. 子类的 this 是父类构造出来的, 再在 ...

  7. tp3.2 excel导出

    //导出操作 function exportExcel($expTitle,$expCellName,$expTableData,$names,$width){ $xlsTitle = iconv(' ...

  8. Docker自学纪实（四）搭建LNMP部署wordpress

    我们在工作中最常用的就是LNMP网站平台 这个架构呢,是整个公司网站的核心 如果对于访问量较小的网站,可以直接在服务器上面部署 而如果是访问量很大的网站,那负载就是个很大的问题. 要么需要再买很多服务 ...

  9. nginx 报错： nginx: [emerg] open() "/etc/nginx/nginx.conf" failed (2: No such file or directory)

    执行: /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf https://www.cnblogs.com/codingcl ...

  10. linux下Tomcat配置提示权限不够解决办法

    在终端输入命令 sudo chmod -R 777 /opt/Tomcat,那么Tomcat文件夹和它下面的所有子文件夹的属性都变成了777(读/写/执行权限)