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. 背包问题模板，POJ(1014)

    题目链接:http://poj.org/problem?id=1014 背包问题太经典了,之前的一篇博客已经讲了背包问题的原理. 这一个题目是多重背包,但是之前的枚举是超时的,这里采用二进制优化. 这 ...

  2. Java 压缩文件夹工具类（包含解压）

    依赖jar <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons ...

  3. mingw libgcc_s_sjlj-1.dll is missing

    习惯了在linux环境下工作,编译wingdows平台程序采用mingw工具.编译完,运行exe程序,弹出错误信息: libgcc_s_sjlj-1.dll is missing 百度了一下,原来是编 ...

  4. idea中不重启服务器更改代码（使用jrebel）

    http://139.199.89.239:1008/88414687-3b91-4286-89ba-2dc813b107ce 第一步 第二步:下载jrebel 第三步(这里有些有有些没有) 下载完后 ...

  5. jQuery实现轮播切换以及将其封装成插件（3）

    在前两篇博文中,我们写了一个普通的轮播切换.但是我们不能每一次需要这个功能就把这些代码有重新敲一次.下面我们就将它封装成一个插件. 至于什么是插件,又为什么要封装插件,不是本文考虑的内容.  我们趁着 ...

  6. JSON格式自动解析遇到的调用方法问题.fromJson() ..readValue()

    所使用的API Store是 聚合数据 使用 手机归属地查询 功能 因百度的apistore.baidu.com 2016年12月开始至今天不接受新用户调取.聚合数据一个接口免费. 一.通过谷歌的go ...

  7. jquery 操作css 尺寸

    .height() 获取元素集合中的第一个元素的当前计算高度值,或设置每一个匹配元素的高度值. .height() 获取匹配元素集合中的第一个元素的当前计算高度值. 这个方法不接受参数. $(wind ...

  8. 基于Ceph分布式集群实现docker跨主机共享数据卷

    上篇文章介绍了如何使用docker部署Ceph分布式存储集群,本篇在此基础之上,介绍如何基于Ceph分布式存储集群实现docker跨主机共享数据卷. 1.环境准备 在原来的环境基础之上,新增一台cen ...

  9. 【JS】window.print打印指定内容

    有时候网页用到打印但是不想打印所有内容,就需要只打印指定内容,下面简单演示下如何打印指定内容 1.在需要打印的指定内容的头部前面加“<!--startprint-->”,在尾部后面加上“& ...

  10. php-5.6.26源代码 - opcode处理器，“乘法opcode”处理器

    // opcode处理器 - 运算符怎么执行: “*” 乘法opcode处理器 static int ZEND_FASTCALL ZEND_MUL_SPEC_CONST_CONST_HANDLER(Z ...