Echarts实现柱状图下钻功能

原创最新推荐文章于 2026-09-20 13:47:22 发布 2.3w 阅读 AI写同款

收录于

java

SeaWind-

码龄9年墨衍会员 · AI 创作全网分发

12粉丝10篇原创

关注

echarts实现柱图的下钻功能 1、确保已安装了cnpm,使用cnpm命令安装echarts： 2、在main.js文件中，全局引入echarts： 3、创建柱状图HistogramChar.vue文件 4、引用该模块 5、实现效果：原始数据，第一次加载点击其中一条后，实现下钻功能，点击返回按钮,可以返回原来数据。......... 阅读详情

AI摘要

本文介绍如何在ECharts中实现柱状图的下钻功能，即点击柱状图可展示更详细的分类数据。利用JavaScript实现交互效果，并通过前后端配合完成数据更新。

需求描述

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

钻取的定义

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