| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <html>
- <head>
- <meta charset="utf-8">
- <script src="esl.js"></script>
- <script src="config.js"></script>
- <script src="lib/jquery.min.js"></script>
- </head>
- <body>
- <style>
- html, body, #main {
- width: 100%;
- height: 100%;
- margin: 0;
- }
- </style>
- <div id="main"></div>
- <script>
- require([
- 'echarts',
- 'echarts/chart/graph',
- 'echarts/component/title',
- 'echarts/component/legend',
- 'echarts/component/tooltip',
- 'zrender/vml/vml',
- 'theme/vintage'
- ], function (echarts) {
- var chart = echarts.init(document.getElementById('main'), 'vintage');
- var option = {
- tooltip: {},
- animationDurationUpdate: 1500,
- animationEasingUpdate: 'quinticInOut',
- series : [
- {
- type: 'graph',
- layout: 'none',
- symbolSize: 50,
- roam: true,
- label: {
- normal: {
- show: true
- }
- },
- edgeSymbol: ['circle', 'arrow'],
- edgeSymbolSize: [4, 10],
- edgeLabel: {
- normal: {
- textStyle: {
- fontSize: 20
- }
- }
- },
- data: [{
- name: '节点1',
- x: 300,
- y: 300
- }, {
- name: '节点2',
- x: 800,
- y: 300
- }, {
- name: '节点3',
- x: 550,
- y: 100
- }, {
- name: '节点4',
- x: 550,
- y: 500
- }],
- // links: [],
- links: [{
- source: 0,
- target: 1,
- symbolSize: [5, 20],
- label: {
- normal: {
- show: true
- }
- },
- lineStyle: {
- normal: {
- width: 5,
- curveness: 0.2
- }
- }
- }, {
- source: '节点2',
- target: '节点1',
- label: {
- normal: {
- show: true
- }
- },
- lineStyle: {
- normal: { curveness: 0.2 }
- }
- }, {
- source: '节点1',
- target: '节点3'
- }, {
- source: '节点2',
- target: '节点3'
- }, {
- source: '节点2',
- target: '节点4'
- }, {
- source: '节点1',
- target: '节点4'
- }],
- lineStyle: {
- normal: {
- curveness: 0
- }
- }
- }
- ]
- };
- chart.setOption(option);
- });
- </script>
- </body>
- </html>
|
