效果图

echarts-graph-force

源码html

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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="zh-CN" 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://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    var graph = {
  nodes:[
  // { name: "数据的分析", category:"第十章", draggable:true,symbolSize:[50, 50],itemStyle:{ color: ""}},
    { name: "八年级数学知识结构体系", category:0, symbolSize:[120, 120] },
    { name: "三角形", category:"第二章", symbolSize:[50, 50] },
    { name: "全等三角形", category:"第三章", draggable:true, symbolSize:[50, 50]},
    { name: "轴对称", category:"第四章", symbolSize:[50, 50]},
    { name: "整式的乘法与因式分解", category:"第五章",  symbolSize:[80, 80]},
    { name: "分式", category:"第六章", symbolSize:[50, 50]},
    { name: "二次根式", category:"第七章", symbolSize:[50, 50]},
    { name: "勾股定理", category:"第八章", symbolSize:[50, 50],},
    { name: "平行四边形", category:"第九章", symbolSize:[50, 50]},
    { name: "一次函数", category:"第十章", symbolSize:[50, 50]},
    { name: "数据的分析", category:"第十章", symbolSize:[50, 50]},
    { name: "单独", category:10, symbolSize:[50, 50]},
    { name: "单独2", category: 10, symbolSize:[50, 50]},
    { name: "单独3", category: 10, symbolSize:[50, 50]},
    { name: "单独4", category: 10, symbolSize:[50, 50]},
  ],
  categories: [
    {name: '第一章'},
    {name: '第二章'},
    {name: '第三章'},
    {name: '第四章'},
    {name: '第五章'},
    {name: '第六章'},
    {name: '第七章'},
    {name: '第八章'},
    {name: '第九章'},
    {name: '第十章'},
    {name: 10},
  ],
  links: [
    {source: "八年级数学知识结构体系", target: "三角形", category:"第一章"},
    {source: "八年级数学知识结构体系",target: "全等三角形", category:"第二章"},
    {source: "八年级数学知识结构体系",target: "轴对称", category:"第三章"},
    {source: "八年级数学知识结构体系",target: "整式的乘法与因式分解", category:"第四章"},
    {source: "八年级数学知识结构体系",target: "分式", category:"第五章"},
    {source: "八年级数学知识结构体系",target: "二次根式", category:"第六章"},
    {source: "八年级数学知识结构体系",target: "勾股定理", category:"第七章"},
    {source: "八年级数学知识结构体系",target: "平行四边形", category:"第八章"},
    {source: "八年级数学知识结构体系",target: "一次函数", category:"第九章"},
    {source: "八年级数学知识结构体系",target: "数据的分析", category:"第十章"},
    {source: "分式",target: "单独2", category:"第十章"},
    {source: "单独",target: "单独2", category:10},
    {source: "单独3",target: "单独4", category:10},
  ]

}

var option = {       
    animationDurationUpdate: 1500,        
    animationEasingUpdate: 'quinticInOut',
    tooltip: {show: true},
    color: ['#09C3D8','#15C27D','#9188FF','#0597FD', '#F0627F','#FE9F3D','#63AED3','#0597FD','#F87A57','#54AC56','#BA6EC8'],
    legend:{show: true, orient: 'vertical', left: 0, top:0,type:'scroll',icon: 'circle',itemStyle:{borderColor: '#fff',borderWidth:2},itemGap: 8},
    grid: {top: '80px'},
    series: [
      {
        type: 'graph',
        layout: 'force',            
        symbol: 'circle',
        zoom: 1.5,
        draggable: true, // 节点是否可拖拽
        hoverAnimation: true, 
        roam: true, // 开启鼠标缩放平移
        focusNodeAdjacency:true, // 鼠标移上去突出显示节点
        symbolSize: 40,
       
        // 节点标签
        label: {
          normal: {
            show: true,
            position: 'inside',//设置label显示的位置
            // formatter: '{c}',//设置label读取的值为value
            // 字符串模板 模板变量有：
            // {a}：系列名。
            // {b}：数据名。
            // {c}：数据值。
            // {@xxx}：数据中名为 'xxx' 的维度的值，如 {@product} 表示名为 'product' 的维度的值。
            // {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。
            // 示例：
            // formatter: '{b}: {@score}'
            formatter: function({name}) {
              return echarts.format.truncateText(name, 90, '14px Microsoft Yahei', '…');
            },
            textStyle: {
              fontSize: 12,
              color:'#fff'
            }
          }
        },
        emphasis: { //高亮状态的图形样式,v5.0版本及以上
          focus: 'adjacency',
          // lineStyle: {
          //   type: 'solid',
          //   width: 3,
          // },
          // itemStyle: {
          //   color: '#dfeaff',
          //   borderWidth: 4,
          //   borderColor: '#4572d9',
          //   borderJoin: 'round'
          // }
        },
        edgeSymbol: ['none', 'arrow'],
        edgeSymbolSize: [4, 13],
        edgeLabel: { // 连接两个关系对象的线上的标签
          show: true,
          position: 'middle',
          textStyle: {fontSize: 10,color: '#909399'},
          formatter: function(param) {
            return param.data.category
          }
        },
        // 关系边公用线条样式, 其中lineStyle.color 支持设置为 "source" 或者 "target"
        lineStyle: {
          color: 'source',
          type: 'dashed',
          opacity: 0.3,
          curveness: 0.4 // 边的曲度， 支持从0 ~1，值越大曲度越大。默认 0
        },           
        //力引导图相关配置
        force: {
          repulsion: 300,
          gravity: 0.1,
          edgeLength: [260, 20],
          layoutAnimation: true,
          friction: 0.3 // 移动速度
        },
        // 数据
        data: graph.nodes,
        categories: graph.categories,            
        links: graph.links, // 建立关系
        animationDelay: function (idx) {
          return idx * 1000;
        },
        animationDuration: function (idx) {
          // 越往后的数据延迟越大
          return idx * 1000;
        },
        animationDurationUpdate: function (idx) {
          // 越往后的数据延迟越大
          return idx * 1000;
        }, animationDelayUpdate: function (idx) {
          // 越往后的数据延迟越大
          return idx * 1000;
        },
      }
    ],
  }
 
    option &&  myChart.setOption(option);
    myChart.off('click') // 渲染点击事件之前先清除点击事件，解决echarts多个点击事件的重复调用
    myChart.on('click', transIndex.bind(this))
    function transIndex(param) {
      console.log(param)
      alert('单击事件')
    }


    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>