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柱状图每个柱子显示不同颜色，并且能够实现点击每种颜色影藏对应柱子的功能
---------------------------------------------------------代码区---------------------------------------- ...
随机推荐
- 在Centos上面用yum不能安装redis的朋友看过来
我得是centos 6.3,如果直接用yum安装redis,报错,如下:[root@CentOS6 etc]# yum install redisLoaded plugins: fastestmirr ...
- iterm2配置项
1. 启动终端Terminal2. 进入当前用户的home目录 输入cd ~3. 创建.bash_profile 输入touch .bash_profile 在导入并应用完颜色方案之后,通 ...
- 在c#中using和new这两个关键字有什么意义？
在c#中using和new这两个关键字有什么意义?答:using 引入名称空间或者使用非托管资源, new 新建实例或者隐藏基类方法
- 子div作为遮罩层
效果图: 子div的代码:
- Sass 语法格式及编译
一.sass语法格式 这里说的 Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格.另外其不带有任何的分号和大括号.常常把这种格式称为 S ...
- 【杂题总汇】UVa-1336 Fixing the Great Wall
[UVA-1336]Fixing the Great Wall 一开始把题看错了……直接用的整数存储答案:之后用double存最后输出答案的时候取整就AC了
- Hutool Wiki For java
发现一款不错的java工具类, http://www.hutool.cn/ Hutool的使用文档. 项目见 https://github.com/looly/hutool 以及 http://git ...
- PCA 实例演示二维数据降成1维
import numpy as np # 将二维数据降成1维 num = [(2.5, 2.4), (0.5, 0.7), (2.2, 2.9), (1.9, 2.2), (3.1, 3.0), (2 ...
- Navicat-12.0.26的激活
1.卸载掉早期版本,卸载干净,然后安装最新版Navicat(使用群文件中Iobit uninstaller8卸载) 2.安装完成后将破解补丁复制到安装目录下,运行破解补丁. 4.先patch,然后选择 ...
- 简单了解,使用oracle中的索引,表分区
索引的分类 如下: 物理分类 逻辑分类 分区或非分区索引 单列或组合索引 B树索引(标准索引) 唯一或非唯一索引 正常或反向键索引 基于函数索引 位图索引 B树索引 b树索引通常也称为标准索引,索 ...