vistool/graph_rela.html at master · sichenjin/vistool · GitHub

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <script type="text/javascript">
        var color = ['#2f4554','#c23531','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#4d638c','#e9bba9','#7abed1','#b86c99','‘#ffc300']

        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var nodeData = [{                 //name是唯一ID，和link中target和source匹配，x，y决定node位置坐标
            name: '节点1',
            x: 300,
            y: 300
        }, {
            name: '节点2',
            x: 800,
            y: 300
        }, {
            name: '节点3',
            x: 550,
            y: 100
        }, {
            name: '节点4',
            x: 550,
            y: 500
        }]
        var linkData =
            [ {
                source: '节点2',
                target: '节点1',
                width:2,
                label: {
                    show: true
                }
            }, {
                source: '节点1',
                target: '节点3',
                width:5
            }, {
                source: '节点2',
                target: '节点3',
                width:3
            }, {
                source: '节点2',
                target: '节点4',
                width:7
            }, {
                source: '节点1',
                target: '节点4',
                width:5
            }]

        linkData = linkData.map(function(d){
            d['lineStyle'] = {
                    width: d.width

                }
            return d
        })

        option = null;
        option = {

            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [
                {
                    type: 'graph',
                    layout: 'none',
                    symbolSize: 50,
                    roam: true,
                    label: {
                        show: true
                    },
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        fontSize: 20
                    },
                    data: nodeData,
                    // links: [],
                    links: linkData,
                    lineStyle: {
                        opacity: 0.9,
                        width: 5,
                        curveness: 0
                    }
                }
            ]
        };;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>

</html>