在上一篇博客《前端-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 : 为了让父图有点击效果,子图没有该效果
如果有更好的实现方式的同学,希望在评论区看到你的回复!
前端-echats的级联
猜你喜欢
转载自blog.csdn.net/phn555/article/details/84995235
今日推荐
周排行