| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="lib/simpleRequire.js"></script> | |
| <script src="lib/config.js"></script> | |
| <meta name="viewport" content="user-scalable=no,width=device-width,height=device-height"> | |
| </head> | |
| <body> | |
| <style> | |
| html, body, .main { | |
| width: 100%; | |
| height: 600px; | |
| margin: 0; | |
| } | |
| </style> | |
| <div id="main0" class="main"></div> | |
| <div id="main1" class="main"></div> | |
| <div id="main2" class="main"></div> | |
| <div id="main3" class="main"></div> | |
| <div id="main4" class="main"></div> | |
| <div id="main5" class="main"></div> | |
| <div id="main6" class="main"></div> | |
| <div id="main7" class="main"></div> | |
| <div id="main8" class="main"></div> | |
| <div id="main9" class="main"></div> | |
| <div id="main10" class="main"></div> | |
| <div id="main11" class="main"></div> | |
| <div id="main12" class="main"></div> | |
| <script> | |
| var getLayout= function(i) { | |
| if(i % 3 === 0) return 'none'; | |
| if(i % 3 == 1) return 'circular'; | |
| if(i % 3 == 2) return 'force'; | |
| } | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| for(var i = 0; i < 5; i++) { | |
| var container = document.getElementById('main' + i); | |
| var times = 8; | |
| var datas = { | |
| '1': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}], | |
| '9': [{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}], | |
| '17': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}], | |
| '25': [{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}], | |
| '33': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}] | |
| } | |
| var option = { | |
| title: { | |
| text: 'Graph, edges numbers:' + (i * times + 1) + ' layout:' + getLayout(i) | |
| }, | |
| tooltip: {}, | |
| animationDurationUpdate: 1500, | |
| animationEasingUpdate: 'quinticInOut', | |
| series: [ | |
| { | |
| type: 'graph', | |
| layout: getLayout(i), | |
| symbolSize: 50, | |
| label: { | |
| show: true | |
| }, | |
| roam: true, | |
| edgeSymbol: ['circle', 'arrow'], | |
| edgeSymbolSize: [4, 10], | |
| edgeLabel: { | |
| fontSize: 12 | |
| }, | |
| data: [{ | |
| name: 'node1', | |
| x: 300, | |
| y: 300 | |
| }, { | |
| name: 'node2', | |
| x: 800, | |
| y: 300 | |
| }, { | |
| name: 'node3', | |
| x: 550, | |
| y: 100 | |
| }], | |
| links: datas[(i * times + 1) + ''], | |
| autoCurveness: datas[(i * times + 1) + ''].length, | |
| lineStyle: { | |
| opacity: 0.9, | |
| width: 2, | |
| } | |
| } | |
| ] | |
| } | |
| var chart = echarts.init(container, '', {renderer: 'svg'}); | |
| chart.setOption(option) | |
| } | |
| }) | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| for(var i = 0; i < 5; i++) { | |
| var container = document.getElementById('main' + (i + 5)); | |
| var times = 8; | |
| var datas = { | |
| '2': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}], | |
| '10': [{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}], | |
| '18': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}], | |
| '26': [{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node2"}], | |
| '34': [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}] | |
| } | |
| var option = { | |
| title: { | |
| text: 'Graph, edges numbers:' + (i * times + 2) + ' layout:' + getLayout(i) | |
| }, | |
| tooltip: {}, | |
| animationDurationUpdate: 1500, | |
| animationEasingUpdate: 'quinticInOut', | |
| series: [ | |
| { | |
| type: 'graph', | |
| layout: getLayout(i), | |
| symbolSize: 50, | |
| label: { | |
| show: true | |
| }, | |
| roam: true, | |
| edgeSymbol: ['circle', 'arrow'], | |
| edgeSymbolSize: [4, 10], | |
| edgeLabel: { | |
| fontSize: 12 | |
| }, | |
| data: [{ | |
| name: 'node1', | |
| x: 300, | |
| y: 300 | |
| }, { | |
| name: 'node2', | |
| x: 800, | |
| y: 300 | |
| }, { | |
| name: 'node3', | |
| x: 550, | |
| y: 100 | |
| }], | |
| links: datas[(i * times + 2) + ''], | |
| autoCurveness: datas[(i * times + 2) + ''].length, | |
| lineStyle: { | |
| opacity: 0.9, | |
| width: 2, | |
| } | |
| } | |
| ] | |
| } | |
| var chart = echarts.init(container, '', {renderer: 'svg'}); | |
| chart.setOption(option) | |
| } | |
| }) | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var container = document.getElementById('main10'); | |
| var data = [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}]; | |
| var option = { | |
| title: { | |
| text: 'autoCurveness array test' | |
| }, | |
| 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: 12 | |
| }, | |
| data: [{ | |
| name: 'node1', | |
| x: 300, | |
| y: 300 | |
| }, { | |
| name: 'node2', | |
| x: 800, | |
| y: 300 | |
| }, { | |
| name: 'node3', | |
| x: 550, | |
| y: 100 | |
| }], | |
| links: data, | |
| autoCurveness: [0.2, -0.2, 0.4, -0.4, 0.6, -0.6, 0.8, -0.8, 1, -1, 0.1, -0.1, 0.3, -0.3, 0.5, -0.5, 0.7, -0.7, 0.9, -0.9], | |
| lineStyle: { | |
| opacity: 0.9, | |
| width: 2, | |
| } | |
| } | |
| ] | |
| } | |
| var chart = echarts.init(container, '', {renderer: 'svg'}); | |
| chart.setOption(option) | |
| }) | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var container = document.getElementById('main11'); | |
| var data = [{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node1","target":"node3","label":{"show":true}},{"source":"node3","target":"node1","label":{"show":true}},{"source":"node1","target":"node2"}]; | |
| var option = { | |
| title: { | |
| text: 'no set autoCurveness ' | |
| }, | |
| 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: 12 | |
| }, | |
| data: [{ | |
| name: 'node1', | |
| x: 300, | |
| y: 300 | |
| }, { | |
| name: 'node2', | |
| x: 800, | |
| y: 300 | |
| }, { | |
| name: 'node3', | |
| x: 550, | |
| y: 100 | |
| }], | |
| links: data, | |
| lineStyle: { | |
| opacity: 0.9, | |
| width: 2, | |
| } | |
| } | |
| ] | |
| } | |
| var chart = echarts.init(container, '', {renderer: 'svg'}); | |
| chart.setOption(option) | |
| }) | |
| </script> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var container = document.getElementById('main12'); | |
| var data = [ | |
| {source: 'node1', target: 'node3', label: {show: true}}, | |
| {source: 'node1', target: 'node3', label: {show: true}}, | |
| {source: 'node3', target: 'node1', label: {show: true}}, | |
| ] | |
| var option = { | |
| title: { | |
| text: 'autoCurveness 3 test case' | |
| }, | |
| 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: 12 | |
| }, | |
| data: [{ | |
| name: 'node1', | |
| x: 300, | |
| y: 300 | |
| }, { | |
| name: 'node2', | |
| x: 800, | |
| y: 300 | |
| }, { | |
| name: 'node3', | |
| x: 550, | |
| y: 100 | |
| }], | |
| links: data, | |
| autoCurveness: 3, | |
| lineStyle: { | |
| opacity: 0.9, | |
| width: 2, | |
| } | |
| } | |
| ] | |
| } | |
| var chart = echarts.init(container, '', {renderer: 'svg'}); | |
| chart.setOption(option) | |
| }) | |
| </script> | |
| </body> | |
| </html> |