全网唯一的echarts树状图——单个节点样式修改_echarts 怎么在修改节点文本使用dom模板

前段时间一直在用Echarts做一个树状图，本来是挺简单的，Echarts官网也有，不过官网上的节点数据是封装在一个Json文件中去，这里就不再赘述，有兴趣自行去官网查看
链接：https://echarts.apache.org/examples/zh/editor.html?c=tree-basic
Json数据链接：https://echarts.apache.org/examples/data/asset/data/flare.json

我自己代码如下：

1.首先是数据库建表嘛，大概就是Id,Pid

2.就是Service层逻辑了，因为前台需要得到Json格式数据，首先想到的就是递归了，直接上代码。`在这里插入代码片
public EiInfo query(EiInfo inInfo) {
CSDASWDT CSDASWDT = new CSDASWDT();
Map map = new HashMap();
Map map1 = new HashMap();
List units = dao.query(“CSDASWDT.query”,map);
List menuList = menuList(units);
JSONArray json = JSONArray.fromObject(menuList);
//System.out.println(json);
//for (Object object : menuList) { System.out.println(object); }
inInfo.set(“data3”, json);
return inInfo;
}

public static Map<String,Object> mapArray = new LinkedHashMap<String, Object>();  
public List<CSDASWDT> menuCommon;  
public List<Object> list = new ArrayList<Object>();  
  
public List<Object> menuList(List<CSDASWDT> menu){      
    this.menuCommon = menu;  
    for (CSDASWDT x : menu) {     
        Map<String,Object> mapArr = new LinkedHashMap<String, Object>();  
        if(x.getPid() == (long)0){  
        	
            mapArr.put("name", x.getNode());    
            mapArr.put("value", x.getDataType());
            mapArr.put("children", menuChild(x.getSid())); 
            list.add(mapArr);  
        } 
    }     
    return list;  
}  
public List<?> menuChild(Long long1){  
    List<Object> lists = new ArrayList<Object>();  
    for(CSDASWDT a:menuCommon){  
        Map<String,Object> childArray = new LinkedHashMap<String, Object>();  
        if(a.getPid().equals(long1)){  
            childArray.put("name", a.getNode());  
            childArray.put("value", a.getDataType());
            childArray.put("children", menuChild(a.getSid()));
            childArray.remove("children", "[]");
            lists.add(childArray);  
            
        }
    }  
    return lists; 
    
}  `
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

这个是我们项目框架用的，下面两个方法就是递归，直接复制粘贴就行了。

3.然后到了前台页面了，用js来接受和处理这些json数据

$(function(){

	var eiInfo = new EiInfo();
	 EiCommunicator.send("CSDASWDT", "query", eiInfo, {
       onSuccess: function (ei) {
      var  dataCostTitle=ei.getAttr("data3").data3;
      replay(dataCostTitle);
      }, onFail: function (ei) {
      }
   }, {async: false});
}); 


	
option = null;

function replay(data) {
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	myChart.showLoading();
	var app = {};
	myChart.hideLoading();
	data[0].label={color: 'red',
			fontSize: '20'};//这个很重要，调试了好久才出来的，这个就是Echarts单个节点的样式改造了
	myChart.setOption(option = {
	backgroundColor: '#06182F',
	tooltip: {
	  trigger: 'item',
	  triggerOn: 'mousemove',
		
	},
	title: {
	     text: '思维导图',
		   textStyle: {
					   fontSize: 20,
		               color: '#2AA0E5'
		           }
		   },
		   
	series: [
	  {
	      type: 'tree',
	      data: eval(data),
	      top: '1%',
	      left: '35%',
	      bottom: '1%',
	      right: '10%',
	      symbolSize: 12,
	      label: {
	          position: 'left',
	          verticalAlign: 'middle',
	          align: 'right',
	          fontSize: 12,
				color : '#FFFFFC'
	      },
	      
			itemStyle: {
			                    normal: {
			                    color: "#00EAEC",
			                    lineStyle: {
			                    color: "#33A4D8"
			            }
			        }
			    },

	      leaves: {
	    	  
	          label: {
	              position: 'right',
	              verticalAlign: 'middle',
	              align: 'left'
	          }
	      },
	      expandAndCollapse: true,//默认：true；子树折叠和展开的交互，默认打开 。
		  initialTreeDepth: 1,//默认初始化节点数量
	      animationDuration: 550,//动画时间
	      animationDurationUpdate: 750//动画更新时间
	  },
	]
	}
	)
	if (option && typeof option === "object") {
		myChart.setOption(option, true);
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

到这里也差不多了，直接上最后图

有什么问题可以在评论区留言交流，谢谢