echarts 树形图

用echarts 实现树形图，图节点为矩形，线为直线，节点可以点击并实现跳转页面。

DOCTYPE html>
<html>
<body>
<div>
<div id="chart" style="width: 80%;height: 700px;">div>
div>
body>
html>

1
2
3
4
5
6
7
8
9

 $(function () {
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        const data = {
		  name: 'flare',
		  children: [
		    {
		      name: 'data',
		      itemStyle: { color: "#d59c66" },
		      children: [
		        {
		          name: 'converters',
		          url: 'a.html'
		        },
		        {
		          name: 'DataUtil',
		          value: 3322
		        }
		      ]
		    },
		
		    {
		      name: 'query',
		     
		    },
		    {
		      name: 'scale',
		    }
		  ]
		};
        var option;
         option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',
                    id: 0,
                    name: 'tree1',
                    data: [data],
                    top: '3%',
                    left: '8%',
                    bottom: '3%',
                    right: '8%',
                    symbol: 'circle',
                    symbolSize: function () {  // 节点的形状大小 ，[180, 28] 180为宽，28为高
                        var value = arguments[0];
                        console.log('arguments',arguments)
                        var params = arguments[1];
                        return [params.name.length * 20, 35];
                        // return [180, 28];
                    },
                    symbolKeepAspect: true,
                    edgeShape: 'polyline', // 从 v4.7.0 开始支持，curve为曲线 ， polyline 为直线
                    edgeForkPosition: '63%',
                    lineStyle: {
                        width: 2
                    },

                    label: {
                        position: 'inside', //标签文本位置设置
                        align: 'center',
                        color: 'white'
                    },
                    initialTreeDepth: -1, //初始默认展开全部层级
                    leaves: {
                        label: {
                            position: 'inside',
                            verticalAlign: 'middle',
                            align: 'center'
                        }
                    }, //设置叶子节点文本标签位置
                    expandAndCollapse: 'false', //禁止折叠交互

                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
        };

        option && myChart.setOption(option);
        myChart.on("click", treeNodeclick);
    })
        // 节点点击事件
    function  treeNodeclick(param){
        console.log('param',param.data)
        /* true 代表点击的是圆点
           fasle 表示点击的是当前节点的文本
        */
        if(param.data.url) {
            goPage(param.data.parentName,param.data.url) // 跳转页面方法
        }

    }
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
87
88
89
90
91
92
93
94
95
96

示例效果：
在这里插入图片描述

相关阅读:
Uniapp入门
C++11 线程相关操作
第二十章多线程
【VUE项目实战】61、添加页面加载进度条效果
【rust工具链】
springcloud引入Eureka报错
信奥中的数学：斐波那契数列
文件系统，软硬链接
CMD常用命令大全「值得收藏」
一次线上 Java进程突然挂掉排查过程思路

原文地址：https://blog.csdn.net/wxl1390/article/details/134538247