前端-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 : 为了让父图有点击效果,子图没有该效果
    如果有更好的实现方式的同学,希望在评论区看到你的回复!

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试