| |
| <!-- |
| 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/esl.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> |
