echarts 树图 二级节点显示数据
今天接到一个任务，做一个echarts树图，原型如下图：
首先根据需求和数据集合写接口组装数据：
/**
* 2020年度处室与学会活跃度分析
* @param req
* @return
*/
@RequestMapping(params = "getInstituteDepartment")
@ResponseBody
public AjaxJsonSpecial getInstituteDepartment(HttpServletRequest req) {
AjaxJsonSpecial j = new AjaxJsonSpecial();
Map<String,Object> m = new HashMap<String,Object>();
String sqlnyear = "select a.departmentName departmentName,a.partyB partyB from "+ getDb()+"t_prod_project_contract a where a.departmentName in ( select mappedOrgNameList from "+ getDb()+"t_prod_config_org_mapped ) and a.partyB in (select name from "+ getDb()+"t_prod_society) group by a.departmentName,a.partyB";
String sqlnyears = "select a.departmentName departmentName from "+ getDb()+"t_prod_project_contract a where a.departmentName in ( select mappedOrgNameList from "+ getDb()+"t_prod_config_org_mapped ) and a.partyB in (select name from "+ getDb()+"t_prod_society) group by a.departmentName";
List<Map<String,Object>> thisYearList = systemService.findForJdbc(sqlnyear);
List<Map<String,Object>> thisYearLists = systemService.findForJdbc(sqlnyears);
List<Map<String,Object>> datamaplistAll= new ArrayList<Map<String,Object>>();
String [] nameShow=new String[thisYearLists.size()];
String [] listShowA=new String[thisYearLists.size()];
if(thisYearList.size() > 0 && thisYearLists.size() > 0) {
int coun=0;//为记当前处室所占位数
for(int i=0;i<thisYearLists.size();i++){
List<Map<String,Object>> datamaplist= new ArrayList<Map<String,Object>>();
Map<String,Object> yearmap = new HashMap<String, Object>();
String name="";//部门名称
nameShow[i]=thisYearLists.get(i).get("departmentName").toString();
String names="";
int cout=0;//为记学会个数
for(int a=0;a<thisYearList.size();a++){
if(thisYearList.get(a).get("departmentName").equals(thisYearLists.get(i).get("departmentName"))){
Map<String,Object> yearmaps = new HashMap<String, Object>();
if(coun==0){
name=thisYearLists.get(i).get("departmentName").toString();
yearmap.put("collapsed", false);
yearmap.put("index", coun);
}else{
name=thisYearLists.get(i).get("departmentName").toString();
yearmap.put("collapsed", true);
yearmap.put("index", coun);
}
names+=thisYearList.get(a).get("partyB").toString()+",";
yearmaps.put("name", thisYearList.get(a).get("partyB").toString());
datamaplist.add(yearmaps);
listShowA[i]=names;
cout++;
}
}
yearmap.put("cout", cout);
yearmap.put("name", name);
yearmap.put("children", datamaplist);
datamaplistAll.add(yearmap);
coun++;
}
}
String sljsondata = JSON.toJSONString(datamaplistAll);
m.put("listShow", listShowA);
m.put("sljsondata", sljsondata);
m.put("nameShow", nameShow);
j.setAttributes(m);
j.setSuccess(true);
return j;
}
返回结构 ：
[{
"cout": 2,
"children": [{
"name": "xxx学会"
}, {
"name": "xxx学会"
}],
"collapsed": false,
"name": "xxx服务处",
"index": 0
}, {
"cout": 3,
"children": [{
"name": "xxx学会"
}, {
"name": "xxx学会"
}, {
"name": "xxx学会"
}],
"collapsed": true,
"name": "xxx服务处",
"index": 1
}]
js方法拼写echarts树图，解析数据：
// 2020年度处室与学会活跃度分析
function getInstituteDepartment() {
var dom = document.getElementById("instituteDepartment");
var myChart = echarts.init(dom);
myChart.showLoading();
$.ajax({
type : 'POST',
url:"statisticsOneController.do?getInstituteDepartment",
data :{
},
error : function() {// 请求失败处理函数
},
success : function(data) {
var d = $.parseJSON(data);
if (d.success) {
myChart.hideLoading();
var data = {
"name": "学服中心",
"children":$.parseJSON(d.attributes.sljsondata)
};
dataArr=d.attributes.nameShow;
listShow=d.attributes.listShow;
option = null;
alert(d.attributes.sljsondata);
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
formatter: function(params) {
var len=params.data.children;
var res='';
if(params.data.cout==null){
res=params.name;
}else{
res = params.name+ ' 关联学会 '+params.data.cout+'个<br/>';
for(var i=0;i<params.data.cout;i++){
res+=len[i]["name"]+'</br>';
}
}
return res;
}
},
series: [
{
type: 'tree',
data: [data],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 7,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 9
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
if (option && typeof option === "object") {
myChart.setOption(option, true);
myChart.on('mousedown', (e) => {
const name = e.data.name;
const curNode = myChart._chartsViews[0]._data.tree._nodes.find(item => {
return item.name === name;
});
const depth = curNode.depth;
const curIsExpand = curNode.isExpand;
myChart._chartsViews[0]._data.tree._nodes.forEach((item, index) => {
if (item.depth === depth && item.name !== name && !curIsExpand) {
item.isExpand = false;
}
});
})
}
} else {
}
}
});
}
最后看一下树图展示结果：