前端-echats的级联，-echats级联

前端-echats的级联，-echats级联

在上一篇博客《前端-echarts的使用》中已经介绍的基本使用方法，在最近的使用中，遇到了另一种需求，但再官网文档以及别人的博客中一没见到完整的教成，所以，在这里写下这篇博客，以便能帮着向我一样的同学。

在客户的需求中，希望我们展示一年十二个月的统计数据，然后点击各月份能展示这个月更详细的统计情况。需求不复杂，但是在百度时却没有好的推荐或者详细的用法。

先看一下效果图

父统计图	子统计图

效果如上，当点击父图的10月的数据时，会展示详情，而在子图点击“上一级”时，会回到父图，下面是实现方式。

初始化

// 当父图标点击时，设置自己的flag = false ，子图点击返回时，flag = true
var flag = new Map();
var right4 = echarts.init(document.getElementById('right4'));

/* 获取父图数据*/
 function getParentDataByYear() {
        $.get("${base}/index/getParentData.dhtml", function (json) {
            if (json.status == 'success') {
                right4.clear();
                right4.setOption(getDoubleOption(json.data.add, json.data.sub, '调整用户分布', '调增', '调减', '位', 'bar'), true);
                flag.set("right4", true);
            }
        });
    }

/* 获取子图数据*/
    function getChildDataByMonth(year, month, currentObj) {
      
        // 获取 用户调节量
        $.get("${base}/index/getChildData.dhtml?year="+year+"&month="+month, function (json) {
            currentObj.clear();
            currentObj.setOption(getChildtOption(json.data), true);
        });
    }

 function getChildtOption(data) {
        
        option = {
            title: {text: '用电计划调节情况'},
            tooltip: {trigger: 'axis'},
            toolbox: {
                show: true,
                feature: {
                    myTool: {show: true, 
                            title: "上一级", 
                            icon: "path://M22,1.4L9.9,13.5l12.3,12.3 M10.3,13.5H54.9v44.6 H10.3v-26",
                        onclick: function (option) {
                            getParentDataByYear();
                        }
                    },
                    saveAsImage: {show: true}
                }
            },
            xAxis: [
                {type: 'value', position: 'top', splitLine: {lineStyle: {type: 'dashed'}},
                }
            ],
            yAxis: [
                {type: 'category', axisLine: {show: false}, axisLabel: {show: false}, axisTick: {show: false}, splitLine: {show: false}, data: data.userNameList}
            ],
            series: [
                {name: '调节量', type: 'bar', stack: '总量', barWidth: 20, itemStyle: {normal: {borderRadius: 5, label: {show: true, position: 'left', formatter: '{b}'}}},
                    data: result
                }
            ]
        };

        return option;
    }
$(function(){
getParentDataByYear();
 right4 .on('click', function (param) {
            if (flag.get("left5")) {
                flag.set("left5", false);
                var year = $('#year').val();
                // dataIndex : x轴第几列 从0 开始
                var month = param.dataIndex + 1;
              getChildDataByMonth(year, month, right4 ) ;
            }
        });

});

这里有几个需要说明：

• option中的 icon: 有两种方式，在echarts官方文档中有说明：
  
• 由于子图无法获取父图的信息，所以我们使用的捆绑式的调用，当有多个时，需要自定义参数进行识别
• flag : 为了让父图有点击效果，子图没有该效果
  如果有更好的实现方式的同学，希望在评论区看到你的回复！