Echarts实现柱状图下钻功能
需求描述
在一个类别柱状图上，点击柱状图上的某一类后可显示该类具体的数据。
钻取的定义
钻取是改变维的层次，变换分析的粒度。包括向上钻取(drill up)和向下钻取(drill down).drill up 是在某一维上将低层次的细节数据概括到高层次的汇总数据，或者减少维数；而drill down则相反，它从汇总数据深入到细节数据进行观察或增加新维。
基本实现方式
- Highcharts是一个用纯JavaScripts编写的一个图表库。可简单便捷的在web网站添加有交互性的图表。
实现效果图：
下钻前：
下钻后：
- echarts
Echarts本身并没有像HighCharts直接实现柱状图的下钻功能，但Echarts可以通过setOptions间接实现下钻功能。
通过点击月份柱状图的某一月，触发点击事件，点击事件的功能是销毁该Echarts实例，并会向后台请求该月份的数据，当后台返回数据后，进行重新初始化Echarts实例。
实现效果如下：
实现细节
前端部分
- 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 thingsbutton>
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 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 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
categoryresponse
{
“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