学习笔记-echarts实现数据下钻_echarts数据下钻-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49020584/article/details/128040720

本文详细介绍了如何利用Echarts的点击事件来实现数据下钻功能，包括步骤：监听点击事件、销毁原有Echarts实例、创建并初始化新的Echarts图表，以及替换数据以展示更详细的层次信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近遇到个需求，要实现echarts的数据下钻，奈何本人前端技术实在很low,看了一些大佬的文章，有了一些思路，话不多说，上代码。

<html>
<head>
    <title></title>
    <!-- 引入echarts 文件 -->
    <script src="./echarts.min.js"></script>
</head>
<body>
<div class="container" style="margin: 20px auto">
    <div class="row">
        <div id="bar_photo_id" class="col-md-4" style="height: 350px;"><!-- 柱状图-->
        </div>
    </div>
</div>

<script type="text/javascript">
  var tempList = ${tempList};
    function loadData(){
        var x_data = [];
        var y_data  = [];
        for(var i = 0;i < tempList.length;i++){
            x_data.push(tempList[i].name);
            y_data.push(tempList[i].value);
        }
        getBar(x_data,y_data);
    }

    $(document).ready(function () {
        closeLoading();
        loadData();
    });


    var barChart = echarts.init(document.getElementById('bar_photo_id'));//初始化echarts
    barChart.on('click',function(data){//echarts的点击事件
        console.log(data)
        echarts.dispose(document.getElementById("bar_photo_id"));//销毁当前echarts
        getDrillDownBar(data.name,true,"xy")//数据下钻
    });

    function getDrillDownBar(name,flag,type){//根据echarts点击事件，带入点击时的参数，查询下一数据；

        $.ajax({
            type : 'post',
            url : "${path}/getBarData?name="+name +"&type="+ type, //后端方法 返回List<Map<>>格式
            success: function (msg) {//如果成功，重新给echarts赋值

                var xAxis_data = [];
                var yAxis_data = [];
                for (var i = 0; i < msg.length; i++) {
                    xAxis_data.push(msg[i].XAXIS);
                    yAxis_data.push(msg[i].YAXIS);
                }
                console.log("xAxis_data:"+xAxis_data)
                console.log("yAxis_data:"+yAxis_data)
                getBar(yAxis_data, xAxis_data);//重新init echarts
                var barChart = echarts.init(document.getElementById('bar_photo_id'));
                if(flag) {//如果false success后不再监听点击事件，也就是最后一层点击了
                    barChart.on('click', function (data) { //再次监听新echarts的点击事件

                        echarts.dispose(document.getElementById("bar_photo_id"));//销毁echarts
                        getDrillDownBar(data.name, false,"xmlx")
                    })
                }
            }

        })


    }

   function getBar(x_data,y_data){
       /**柱状图*/
       var barChart = echarts.init(document.getElementById('bar_photo_id'));
       option = {
           title: {
               text: '主标题',
               subtext: '副标题'
           },
           tooltip: {
               trigger: 'axis',
               axisPointer: {
                   type: 'shadow'
               }
           },
           toolbox: {//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
               show: true,//是否显示工具栏
               feature: {
                   dataView : {show: true, readOnly: false},
                   magicType : {show: true, type: ['line', 'bar']},//柱状图折线图切换
                   restore : {show: true},
                   saveAsImage : {show: true}
               }
           },
           legend: {
               data: ['应到人数', '实到人数']
           },
           grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
           },
           xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: x_data,
                axisLabel: {
                    interval: 0,//坐标轴刻度标签的显示间隔
                    formatter: function(value) {//y轴文字长度超过8，则显示省略号
                        if (value.length > 8) {
                            return value.substring(0, 8) + "...";
                        } else {
                            return value;
                        }
                    }
                }
            },
           series: [
               {
                   name: '应到人数',
                   type: 'bar',
                   data: y_data,
               },
               {
                   name: '实到人数',
                   type: 'bar',
                   data: [10, 20]//这里的数据也可从后端返回
               }
           ]
       };
       barChart.setOption(option);
   }
</script>
</body>
</html>

主要思路就是，echarts点击事件->销毁echarts->创建新的echarts并替换数据