358 lines
23 KiB
HTML
Generated
358 lines
23 KiB
HTML
Generated
|
||
<!--
|
||
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>
|