Echarts实现柱状图下钻功能

最新推荐文章于 2024-04-24 11:23:07 发布

SeaWind-

最新推荐文章于 2024-04-24 11:23:07 发布

阅读量2w

点赞数 1

分类专栏： java

本文链接：https://blog.csdn.net/LiFHCode/article/details/81221693

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求描述

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

钻取的定义

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

SeaWind-

关注

1
点赞
踩
31

收藏

觉得还不错? 一键收藏
2
评论
Echarts实现柱状图下钻功能

需求描述在一个类别柱状图上，点击柱状图上的某一类后可显示该类具体的数据。钻取的定义钻取是改变维的层次，变换分析的粒度。包括向上钻取(drill up)和向下钻取(drill down).drill up 是在某一维上将低层次的细节数据概括到高层次的汇总数据，或者减少维数；而drill down则相反，它从汇总数据深入到细节数据进行观察或增加新维。基本实现方式High...
复制链接

扫一扫