Echarts实战案例代码(58)：柱图下钻的解决方案

漏刻有时

于 2021-02-06 21:36:58 发布

阅读量578

点赞数 1

分类专栏： echarts

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/113731107

版权

本文介绍了一个Echarts实战案例，详细讲解如何实现柱状图的下钻功能，点击柱图可查看对应详情数据，双击详情数据柱图则能返回原始视图。内容包括项目说明、构建容器、封装函数以及一系列公用函数的运用。

摘要由CSDN通过智能技术生成

在这里插入图片描述

项目说明

单击柱图进入该列对应的详情数据；
双击详情数据柱图，返回柱图；

构建容器

<div id="main" style="width:100%;height: 100%"></div>

封装函数

 //封装函数;
    function makeBar(title, name, data, type) {
   
        var color = "";
        //根据数据情况显示不同属性;
        if (type == "0") {
   
            color = colorList[1];
        } else {
   
            color = colorList[2];
        }
        var chart = echarts.init(document.getElementById("m