ECharts图表组件之关系图

最新推荐文章于 2024-08-08 08:14:58 发布

zhangwenwu的前端小站

最新推荐文章于 2024-08-08 08:14:58 发布

阅读量2.7k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/zhangwenwu2/article/details/79899722

版权

web前端专栏收录该内容

57 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
    <div id="main" style="width: 850px; height: 500px"></div>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
       var dd = [
          {id:0,category:0,name:'0',label:'蔡',symbolSize:40,ignore:false,flag:true},
          {id:1,category:1,name:'1',label:'蔡海清',symbolSize:30,ignore:false,flag:true},
          {id:2,category:1,name:'2',label:'蔡文澜',symbolSize:30,ignore:false,flag:true},
          {id:3,category:2,name:'3',label:'职员',symbolSize:30,ignore:false,flag:true},
          {id:4,category:2,name:'4',label:'其他应付款职员',symbolSize:30,ignore:false,flag:true},
        ]

        require.config({
            paths : {
                echarts : 'http://echarts.baidu.com/build/dist'
            }
        });
        require([ "echarts", "echarts/chart/force"], function(ec) {
            var myChart = ec.init(document.getElementById('main'), 'macarons');
            var option = {
                tooltip : {
                    show : false
                },
                series : [ {
                    type : 'force',
                    name : "Force tree",
                    itemStyle : {
                        normal : {
                            label : {show : true},
                            nodeStyle : {
                                brushType : 'both',
                                borderColor : 'rgba(255,215,0,0.4)',
                                borderWidth : 1
                            }
                        }
                    },
                    
                    nodes :dd,

                    links : [ {source : 1,target : 0}, {source : 2,target : 0},{source : 3,target : 1},{source : 4,target : 2},
                } ]
            };
            myChart.setOption(option);
            var ecConfig = require('echarts/config');
            function openOrFold(param) {
                var option = myChart.getOption();
                var nodesOption = option.series[0].nodes;
                var linksOption = option.series[0].links;
                var data = param.data;
                var linksNodes = [];

                var categoryLength = option.series[0].categories.length;

                if (data.category == (categoryLength - 1)) {
                    alert(data.label);
                }

                if (data != null && data != undefined) {
                    if (data.flag) {

                        for ( var m in linksOption) {

                            if (linksOption[m].target == data.id) {
                                linksNodes.push(linksOption[m].source);
                            }
                        }
                        if (linksNodes != null && linksNodes != undefined) {
                            for ( var p in linksNodes) {
                                nodesOption[linksNodes[p]].ignore = false;
                                nodesOption[linksNodes[p]].flag = true;
                            }
                        }
                        nodesOption[data.id].flag = false;
                        myChart.setOption(option);
                    } else {

                        for ( var m in linksOption) {

                            if (linksOption[m].target == data.id) {
                                linksNodes.push(linksOption[m].source);
                            }
                            if (linksNodes != null && linksNodes != undefined) {
                                for ( var n in linksNodes) {
                                    if (linksOption[m].target == linksNodes[n]) {
                                        linksNodes.push(linksOption[m].source);
                                    }
                                }
                            }
                        }
                        if (linksNodes != null && linksNodes != undefined) {
                            for ( var p in linksNodes) {
                                nodesOption[linksNodes[p]].ignore = true;
                                nodesOption[linksNodes[p]].flag = true;
                            }
                        }
                        nodesOption[data.id].flag = true;
                        myChart.setOption(option);
                    }
                }
            }
            myChart.on(ecConfig.EVENT.CLICK, openOrFold);
        });
    </script>

</body>
</html>

到这里一个简单的站点结构关系图就完成了。从上面的代码中不难看出来，结构关系图的重点就是两大块：

1）、nodes数组

这个内主要是用于定义结构图的所有节点，其中category是指当前节点属于categories数组内的哪一个分类。脚标从0开始；

name表示节点的名称，value表示大小；

url是我自己扩展的节点属性，用于存放当前节点对应的站点url地址。

2）、links数组

这个主要是用于定义nodes内节点之间相互的关系，只要这里建立关系后，展现出来的关系图节点相互之间会产生一条连接线进行相互之间的链接。在设置这个数组的时候需要注意一下几点：

a、source：表示节点位于nodes数组内的位置，脚标从0开始。这个数字的范围必须是[0,nodes.length]；

b、target：表示链接的目标节点在nodes数组内的位置，脚标从0开始。这个数字的范围必须是[0,nodes.length]；

c、weight：表示当前节点的权重，权重越大距离目标节点的位置越近，也表示越亲近。数字范围不限制，数字越小距离目标节点越远。