需求描述

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

钻取的定义

钻取是改变维的层次，变换分析的粒度。包括向上钻取(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;}}