需求描述

在一个类别柱状图上，点击柱状图上的某一类后可显示该类具体的数据。

钻取的定义

钻取是改变维的层次，变换分析的粒度。包括向上钻取(drill up)和向下钻取(drill down).drill up 是在某一维上将低层次的细节数据概括到高层次的汇总数据，或者减少维数；而drill down则相反，它从汇总数据深入到细节数据进行观察或增加新维。

基本实现方式

Highcharts是一个用纯JavaScripts编写的一个图表库。可简单便捷的在web网站添加有交互性的图表。
实现效果图：
下钻前：

下钻后：
echarts
Echarts本身并没有像HighCharts直接实现柱状图的下钻功能，但Echarts可以通过setOptions间接实现下钻功能。
通过点击月份柱状图的某一月，触发点击事件，点击事件的功能是销毁该Echarts实例，并会向后台请求该月份的数据，当后台返回数据后，进行重新初始化Echarts实例。
实现效果如下：

实现细节

前端部分

html代码

<!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=''>back to things</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="./drillDown.js"></script><script type="text/javascript" src="./return-button.js"></script></body>
</html>

js代码

var drillDown = {getOption : function () {var option = null;option = {title: {text: 'Basic drilldown',left: 'center'},legend: {left: 'left',data: ['category']},xAxis: {type: 'category',data: ['Animals', 'Fruits', 'Cars']},               yAxis: {type: 'value'},series: [{name: 'category',type: 'bar',data: [5,2,4]}]};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);// $.ajax(//     type : 'get',//     url : interfaceUrl + '&category=' + object.name, // 此处可以替换为你的接口地址//     dataType : 'json',//     success : function (msg){//         option.xAxis.data = msg.xAxis;//         option.series[0].data = msg.yAxis[0];//         myChart.setOption(option, true);//     }// );console.dir(object.name);if (object.name == "Animals"){option.xAxis.data = ['Cats','Dogs','Cows','Sheep','Pigs'];option.series[0].data = [4,2,1,2,1];option.legend.data= ['Animals'];option.series[0].name=['Animals'];}if (object.name == "Fruits"){option.xAxis.data = ['Apples','Oranges'];option.series[0].data = [4,2];option.legend.data= ['Fruits'];option.series[0].name=['Fruits'];}if (object.name == "Cars"){option.xAxis.data = ['Toyota','Opel','Volkswagen'];option.series[0].data = [4,2,2];option.legend.data= ['Cars'];             option.series[0].name=['Cars'];}             myChart.setOption(option, true);});},
};

后端接口

@RequestMapping("getCategory.do")
@ResponseBody
public ServerResponse addCategory(HttpSession session){Map<String, Object>  map  =  new HashMap<>(); ResultBean result = onGetCategory(); out.println("result==>"  + result); map.put("xAxis", result.category());                            map.put("yAxis", result.value()); return map;}
}@RequestMapping("getNameAndNumByCategory.do")
@ResponseBody
public ServerResponse getNameByCategory(HttpSession session,String Category){Map<String, Object>  map  =  new HashMap<>(); ResultBean result = getNameByCategory(Category); out.println("result==>"  + result); map.put("xAxis", result.Name());                            map.put("yAxis", result.value()); return map;}}

接口定义

1.获得全部种类及数量
/getCategory.do

request
/

response
{
“xAxis”:[“Animals”,”Fruits”,”Cars”],
“yAxis”:[5,2,4]
}

2.获得每一类的详细内容
/getNameAndNumByCategory.do

request
category

response
{
“xAxis”:[“Cats”,”Dogs”,”Cows”,”Sheep”,”Pigs “],
“yAxis”:[4,2,1,2,1]
}

这里没有具体实现全部代码，而是使用简单的伪代码描述了后台接口实现思路。

数据要求

数据表可以可以按如下设计：

ID	category	name	num
1	Animals	Cats	4
2	Animals	Dogs	2
3	Animals	Cows	1
4	Animals	Sheep	2
5	Animals	Pigs	1
6	Fruits	Apples	4
7	Fruits	Oranges	2
8	cars	Toyota	4
9	cars	Opel	2
10	cars	Volkswagen	2

总结

以上简要叙述了需求以及实现的基本思想。
使用静态数据实现了一个样例，具体实现还要后端接口的配合
这里介绍了接口的设计思想
以上内容参考了折线图下钻功能的实现https://github.com/phping1/echarts3-line-drilldown
查看本项目可访问https://github.com/LiFH/bar-drilldown-master.git

Echarts实现柱状图下钻功能相关推荐

echarts实现地图下钻功能
很多时候我们需要通过地图进行数据的直观展示,并且展示下级省份.地市.区县的数据,这时我们就需要对地图进行下钻:(由于最近的项目使用的是贵州地图,所以文章中用贵州省进行演示!) 首先我们要实现功能点有以 ...
echarts柱状图下钻
//功能:下钻及返回 //下钻结构为:公司 -> 部门 -> 小组 -> 负责人 //点击柱子穿透时,记录当前查询条件,以及下一个接口url,及查询条件//实现思路: // 1.当前 ...
echarts实现柱图的下钻功能
1.确保已安装了cnpm,使用cnpm命令安装echarts: cnpm install echarts --save 2.在main.js文件中,全局引入echarts: import * as e ...
echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能，解决dblclick事件失效问题，解决地图下钻后边框不更新保留问题
目录先看实现效果:编辑步骤一安装echarts和echarts-gl 步骤二设置地图容器在methods中设置初始化地图方法并在mounted中调用在methods中设置初始化地图方法 ...
echarts实现下钻功能的地图
实现步骤初始化,获取全国的坐标json数据绘制中国地图,同时监听点击事件,使用递归方式实现下钻功能点击下一层级,获取对应地区的坐标json数据–添加监听事件–实现下钻注:getGeoJson方 ...
Vue使用echarts地图进阶2（实现多级下钻功能）
echarts地图实现多级下钻功能点击下钻效果图: 先来小看一下,多级下钻和单次下钻跳转json文件的区别: 1.如果要实现多级下钻并且展示子区域的话,下钻点击事件请求的JSON必须是该点击区域的全 ...
Echarts地图柱状图问题
1.Echarts地图柱状图问题需要根据功能修改自己所需的地图模块,当前功能是根据line和散点图进行处理,根据经纬度形成一个柱状图, 比如:需要两个或者多个柱状图 1.添加多个经纬度,添加多个柱状 ...
ECharts系列 - 柱状图（条形图）实例一
ECharts主页: http://echarts.baidu.com/index.html ECharts-2.1.8下载地址: http://echarts.baidu.com/build/e ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
echarts实现地图下钻
公司的新项目需要写这样的地图,还要能两级下钻到省,下面是我写好了的样子,我今天就是复一下盘: 如何用echarts显示地图首先需要下载map的Json数据,我放到这里:mapJson 然后使用ech ...

Echarts实现柱状图下钻功能