926 lines
36 KiB
HTML
Generated
926 lines
36 KiB
HTML
Generated
<!DOCTYPE html>
|
||
<!--
|
||
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">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<script src="lib/simpleRequire.js"></script>
|
||
<script src="lib/config.js"></script>
|
||
<script src="lib/jquery.min.js"></script>
|
||
<script src="lib/facePrint.js"></script>
|
||
<script src="lib/testHelper.js"></script>
|
||
<!-- <script src="ut/lib/canteen.js"></script> -->
|
||
<link rel="stylesheet" href="lib/reset.css" />
|
||
</head>
|
||
<body>
|
||
<style>
|
||
</style>
|
||
|
||
|
||
|
||
<div id="main0"></div>
|
||
<div id="main1"></div>
|
||
<div id="main2"></div>
|
||
|
||
|
||
<!-- TODO: Tree, Sankey, Map -->
|
||
<div id="main3"></div>
|
||
<div id="main4"></div>
|
||
<div id="main5"></div>
|
||
<div id="main6"></div>
|
||
<div id="main7"></div>
|
||
<div id="main8"></div>
|
||
<div id="main9"></div>
|
||
<div id="main10"></div>
|
||
<div id="main11"></div>
|
||
<div id="main12"></div>
|
||
<div id="main13"></div>
|
||
|
||
|
||
|
||
<script>
|
||
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
||
var option;
|
||
option = {
|
||
legend: {
|
||
data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value'
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['周一','周二','周三','周四','周五','周六','周日']
|
||
},
|
||
series: [
|
||
{
|
||
name: '直接访问',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true
|
||
},
|
||
labelLayout: {
|
||
hideOverlap: true
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: [13244, 302, 301, 334, 390, 330, 320]
|
||
},
|
||
{
|
||
name: '邮件营销',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true
|
||
},
|
||
labelLayout: {
|
||
hideOverlap: true
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: [120, 132, 101, 134, 90, 230, 210]
|
||
},
|
||
{
|
||
name: '联盟广告',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true
|
||
},
|
||
labelLayout: {
|
||
hideOverlap: true
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: [220, 182, 191, 234, 290, 330, 310]
|
||
},
|
||
{
|
||
name: '视频广告',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true
|
||
},
|
||
labelLayout: {
|
||
hideOverlap: true
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: [150, 212, 201, 154, 190, 330, 410]
|
||
},
|
||
{
|
||
name: '搜索引擎',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
label: {
|
||
show: true
|
||
},
|
||
labelLayout: {
|
||
hideOverlap: true
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: [820, 832, 901, 934, 1290, 1330, 1320]
|
||
}
|
||
]
|
||
}
|
||
var chart = testHelper.create(echarts, 'main0', {
|
||
title: [
|
||
'Overlap of stacked bar.',
|
||
'Case from #6514'
|
||
],
|
||
option: option
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
||
var option;
|
||
var base = +new Date(1968, 9, 3);
|
||
var oneDay = 24 * 3600 * 1000;
|
||
var date = [];
|
||
|
||
var data = [Math.round(Math.random() * 300)];
|
||
|
||
for (var i = 1; i < 50; i++) {
|
||
var now = new Date(base += oneDay);
|
||
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
|
||
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
||
}
|
||
option = {
|
||
grid: {
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: date
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, '100%']
|
||
},
|
||
series: [
|
||
{
|
||
name:'large area',
|
||
type:'line',
|
||
smooth:true,
|
||
label: {
|
||
show: true,
|
||
position: 'top'
|
||
},
|
||
labelLayout: {
|
||
hideOverlap: true
|
||
},
|
||
itemStyle: {
|
||
color: 'rgb(255, 70, 131)'
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgb(255, 158, 68)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgb(255, 70, 131)'
|
||
}])
|
||
},
|
||
data: data
|
||
}
|
||
]
|
||
};
|
||
var chart = testHelper.create(echarts, 'main1', {
|
||
width: 600,
|
||
title: [
|
||
'Overlap of line.'
|
||
],
|
||
option: option
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
||
|
||
const data = [{
|
||
"name": "United States",
|
||
"value": [213242, 22.86439111423725, "United States"]
|
||
}, {
|
||
"name": "Italy",
|
||
"value": [110574, 11.856047040759652, "Italy"]
|
||
}, {
|
||
"name": "Spain",
|
||
"value": [104118, 11.163817043697554, "Spain"]
|
||
}, {
|
||
"name": "China",
|
||
"value": [82361, 8.830971931231625, "China"]
|
||
}, {
|
||
"name": "Germany",
|
||
"value": [77872, 8.349649059978255, "Germany"]
|
||
}, {
|
||
"name": "France",
|
||
"value": [57749, 6.192005901539504, "France"]
|
||
}, {
|
||
"name": "Iran",
|
||
"value": [47593, 5.103051773571311, "Iran"]
|
||
}, {
|
||
"name": "United Kingdom",
|
||
"value": [29865, 3.202207072840695, "United Kingdom"]
|
||
}, {
|
||
"name": "Switzerland",
|
||
"value": [17768, 1.905133610253925, "Switzerland"]
|
||
}, {
|
||
"name": "Turkey",
|
||
"value": [15679, 1.6811453103991045, "Turkey"]
|
||
}, {
|
||
"name": "Belgium",
|
||
"value": [13964, 1.4972583145872247, "Belgium"]
|
||
}, {
|
||
"name": "Netherlands",
|
||
"value": [13696, 1.4685226207810533, "Netherlands"]
|
||
}, {
|
||
"name": "Austria",
|
||
"value": [10711, 1.1484627476041078, "Austria"]
|
||
}, {
|
||
"name": "Korea, South",
|
||
"value": [9887, 1.0601112114239395, "Korea, South"]
|
||
}, {
|
||
"name": "Canada",
|
||
"value": [9560, 1.0250493760708872, "Canada"]
|
||
}, {
|
||
"name": "Portugal",
|
||
"value": [8251, 0.8846948119205952, "Portugal"]
|
||
}, {
|
||
"name": "Brazil",
|
||
"value": [6836, 0.7329746375335339, "Brazil"]
|
||
}, {
|
||
"name": "Israel",
|
||
"value": [6092, 0.6532009203999837, "Israel"]
|
||
}, {
|
||
"name": "Sweden",
|
||
"value": [4947, 0.5304308852952593, "Sweden"]
|
||
}, {
|
||
"name": "Norway",
|
||
"value": [4863, 0.52142417529631, "Norway"]
|
||
}, {
|
||
"name": "Australia",
|
||
"value": [4862, 0.5213169525582273, "Australia"]
|
||
}, {
|
||
"name": "Czechia",
|
||
"value": [3508, 0.37613736519421254, "Czechia"]
|
||
}, {
|
||
"name": "Ireland",
|
||
"value": [3447, 0.3695967781711661, "Ireland"]
|
||
}, {
|
||
"name": "Denmark",
|
||
"value": [3290, 0.35276280829217765, "Denmark"]
|
||
}, {
|
||
"name": "Chile",
|
||
"value": [3031, 0.3249921191287509, "Chile"]
|
||
}, {
|
||
"name": "Malaysia",
|
||
"value": [2908, 0.31180372234457526, "Malaysia"]
|
||
}, {
|
||
"name": "Russia",
|
||
"value": [2777, 0.2977575436557378, "Russia"]
|
||
}, {
|
||
"name": "Ecuador",
|
||
"value": [2748, 0.29464808425133865, "Ecuador"]
|
||
}, {
|
||
"name": "Poland",
|
||
"value": [2554, 0.2738468730632893, "Poland"]
|
||
}, {
|
||
"name": "Romania",
|
||
"value": [2460, 0.2637679356835128, "Romania"]
|
||
}];
|
||
|
||
var option = {
|
||
backgroundColor: '#333',
|
||
visualMap: {
|
||
dimension: 0,
|
||
left: 10,
|
||
itemWidth: 12,
|
||
min: data[29].value[0],
|
||
max: data[0].value[0],
|
||
text: ['High', 'Low'],
|
||
textStyle: {
|
||
color: '#ddd'
|
||
},
|
||
inRange: {
|
||
color: ['lightskyblue', 'yellow', 'orangered', 'red']
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
data: data,
|
||
roseType: 'radius',
|
||
radius: ['30%', '70%'],
|
||
labelLine: {
|
||
length2: 100
|
||
},
|
||
labelLayout: function (params) {
|
||
const cx = window.innerWidth / 2;
|
||
const isLeft = params.labelRect.x < cx;
|
||
return isLeft ? {
|
||
x: cx - 200,
|
||
align: 'right',
|
||
} : {
|
||
x: cx + 100,
|
||
align: 'left'
|
||
};
|
||
}
|
||
}]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main2', {
|
||
title: 'Pie label edge.',
|
||
height: 300,
|
||
option
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 10,
|
||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问来源',
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
label: {
|
||
color: 'inherit',
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 30,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLayout: {
|
||
x: '50%',
|
||
y: '50%',
|
||
align: 'center',
|
||
verticalAlign: 'center'
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{value: 335, name: '直接访问'},
|
||
{value: 310, name: '邮件营销'},
|
||
{value: 234, name: '联盟广告'},
|
||
{value: 135, name: '视频广告'},
|
||
{value: 1548, name: '搜索引擎'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main3', {
|
||
title: [
|
||
'Pie label center.'
|
||
],
|
||
option: option
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
||
var option;
|
||
var data = [
|
||
[[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],
|
||
[[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]
|
||
];
|
||
|
||
option = {
|
||
xAxis: {},
|
||
yAxis: {
|
||
scale: true
|
||
},
|
||
series: [{
|
||
name: '1990',
|
||
data: data[0],
|
||
type: 'scatter',
|
||
symbolSize: function (data) {
|
||
return Math.sqrt(data[2]) / 5e2;
|
||
},
|
||
emphasis: {
|
||
focus: 'self'
|
||
},
|
||
labelLayout: {
|
||
y: 20,
|
||
align: 'center',
|
||
moveOverlap: 'shiftX',
|
||
hideOverlap: true
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
length2: 5,
|
||
lineStyle: {
|
||
color: '#bbb'
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.data[3];
|
||
},
|
||
minMargin: 10,
|
||
color: '#333',
|
||
textBorderColor: '#fff',
|
||
textBorderWidth: 1,
|
||
position: 'top'
|
||
}
|
||
}]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main6', {
|
||
title: [
|
||
'Overlap Shift X'
|
||
],
|
||
option: option
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
||
var option;
|
||
var data = [
|
||
[[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],
|
||
[[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]
|
||
];
|
||
|
||
option = {
|
||
xAxis: {
|
||
splitLine: { show: false }
|
||
},
|
||
yAxis: {
|
||
splitLine: { show: false },
|
||
scale: true
|
||
},
|
||
grid: {
|
||
left: 100,
|
||
width: 300
|
||
},
|
||
series: [{
|
||
name: '1990',
|
||
data: data[0],
|
||
type: 'scatter',
|
||
symbolSize: function (data) {
|
||
return Math.sqrt(data[2]) / 5e2;
|
||
},
|
||
emphasis: {
|
||
focus: 'self'
|
||
},
|
||
labelLayout: {
|
||
x: 500,
|
||
moveOverlap: 'shiftY',
|
||
// hideOverlap: true
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
length2: 5,
|
||
lineStyle: {
|
||
color: '#bbb'
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
formatter: function (param) {
|
||
return param.data[3];
|
||
},
|
||
textBorderColor: '#fff',
|
||
textBorderWidth: 1,
|
||
position: 'top',
|
||
minMargin: 2
|
||
}
|
||
}]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main7', {
|
||
title: [
|
||
'Overlap Shift Y'
|
||
],
|
||
option: option
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
require(['echarts'], function (echarts) {
|
||
const color = [
|
||
'#1576d2',
|
||
'#d14a82',
|
||
'#26c1f2',
|
||
'#a166ff',
|
||
'#1271cc',
|
||
'#272f67'
|
||
];
|
||
let data = [{
|
||
name: 'Mon',
|
||
value: 182
|
||
},
|
||
{
|
||
name: 'Tue',
|
||
value: 191
|
||
},
|
||
{
|
||
name: 'Wed',
|
||
value: 234
|
||
},
|
||
{
|
||
name: 'Thu',
|
||
value: 290
|
||
},
|
||
{
|
||
name: 'Fri',
|
||
value: 330
|
||
}
|
||
];
|
||
|
||
// 指定数据块中 label 的相应效果，以保证label的正常显示
|
||
const dataArcStyle = {
|
||
label: {
|
||
show: true
|
||
},
|
||
labelLine: {
|
||
show: true
|
||
},
|
||
emphasis: {
|
||
labelLine: {
|
||
show: true
|
||
}
|
||
}
|
||
}
|
||
data = data.map(d => {
|
||
d = Object.assign(d, dataArcStyle)
|
||
return d;
|
||
});
|
||
|
||
const sum = data.reduce((prev, curr) => prev + curr.value, 0);
|
||
data.push({
|
||
name: null,
|
||
value: sum,
|
||
itemStyle: {
|
||
opacity: 0
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
tooltip: {
|
||
show: false
|
||
}
|
||
});
|
||
|
||
option = {
|
||
backgroundColor: '#000',
|
||
color,
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
center: ['50%', '75%'],
|
||
radius: ['50%', '80%'],
|
||
startAngle: 180,
|
||
data
|
||
}]
|
||
};
|
||
var chart = testHelper.create(echarts, 'main8', {
|
||
title: [
|
||
'Case from https://gallery.echartsjs.com/editor.html?c=xFcvAMHjr1&v=1'
|
||
],
|
||
option: option,
|
||
height: 500
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
require(['echarts', 'map/js/china'], function (echarts) {
|
||
option = {
|
||
series: [{
|
||
type: 'map',
|
||
map: 'china',
|
||
label: {
|
||
show: false,
|
||
formatter: [
|
||
`{title|{b}}`,
|
||
`{value|{c} K 平方公里}`
|
||
].join('\n'),
|
||
backgroundColor: '#eee',
|
||
borderColor: '#17A597',
|
||
borderWidth: 1,
|
||
borderRadius: 4,
|
||
align: 'center',
|
||
width: 150,
|
||
rich: {
|
||
title: {
|
||
align: 'center',
|
||
lineHeight: 17,
|
||
fontSize: 12,
|
||
color: '#fff',
|
||
backgroundColor: '#17A597',
|
||
width: 150,
|
||
height: 20,
|
||
borderRadius: [4, 4, 0, 0]
|
||
},
|
||
value: {
|
||
align: 'center',
|
||
height: 25
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
showAbove: true,
|
||
length2: 10
|
||
},
|
||
labelLayout: function (params) {
|
||
const positionMap = [
|
||
// 内蒙古
|
||
(params) => { return { y: params.rect.y - 20, align: 'center' } },
|
||
// 上海
|
||
(params) => { return { x: params.rect.x + 50, align: 'left' } }
|
||
]
|
||
return positionMap[params.dataIndex] && Object.assign({
|
||
draggable: true
|
||
}, positionMap[params.dataIndex](params));
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
data: [{
|
||
name: '内蒙古',
|
||
value: 118.3,
|
||
label: {
|
||
show: true
|
||
}
|
||
}, {
|
||
name: '上海',
|
||
value: 6.34,
|
||
label: {
|
||
show: true
|
||
}
|
||
}]
|
||
}]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main9', {
|
||
title: [
|
||
'Draggable label'
|
||
],
|
||
option: option,
|
||
height: 500
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
require([
|
||
'echarts',
|
||
'extension/dataTool',
|
||
'./data/les-miserables.gexf'
|
||
], function (echarts, dataTool, xml) {
|
||
var graph = dataTool.gexf.parse(xml);
|
||
var categories = [];
|
||
for (var i = 0; i < 9; i++) {
|
||
categories[i] = {
|
||
name: '类目' + i
|
||
};
|
||
}
|
||
graph.nodes.forEach(function (node) {
|
||
delete node.itemStyle;
|
||
node.value = node.symbolSize;
|
||
node.category = node.attributes['modularity_class'];
|
||
});
|
||
graph.links.forEach(function (link) {
|
||
delete link.lineStyle;
|
||
});
|
||
var option = {
|
||
legend: [{}],
|
||
animationDurationUpdate: 1500,
|
||
animationEasingUpdate: 'quinticInOut',
|
||
|
||
series : [
|
||
{
|
||
name: 'Les Miserables',
|
||
type: 'graph',
|
||
layout: 'none',
|
||
data: graph.nodes,
|
||
links: graph.links,
|
||
categories: categories,
|
||
roam: true,
|
||
draggable: true,
|
||
|
||
label: {
|
||
show: true,
|
||
formatter: '{b}',
|
||
position: 'right'
|
||
},
|
||
|
||
labelLayout: {
|
||
hideOverlap: true
|
||
},
|
||
|
||
emphasis: {
|
||
label: {
|
||
show: true
|
||
}
|
||
},
|
||
lineStyle: {
|
||
color: 'source',
|
||
curveness: 0.3
|
||
},
|
||
emphasis: {
|
||
lineStyle: {
|
||
width: 10
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main10', {
|
||
title: [
|
||
'Hide overlap in graph zooming.'
|
||
],
|
||
height: 800,
|
||
option: option
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
require(['echarts', 'map/js/china'], function (echarts) {
|
||
const option = {
|
||
series: [{
|
||
type: 'map',
|
||
map: 'china',
|
||
roam: true,
|
||
label: {
|
||
show: true
|
||
},
|
||
labelLayout: {
|
||
hideOverlap: true
|
||
}
|
||
}]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main11', {
|
||
title: [
|
||
'Map label should update it\'s position when labelLayout is used.'
|
||
],
|
||
option: option
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
||
const svg = [
|
||
'<?xml version="1.0" encoding="utf-8"?>',
|
||
'<svg viewBox="-25 0 300 100" xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" fill-rule="evenodd" xml:space="preserve">',
|
||
'<path name="left_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" stroke="rgb(56,93,138)" stroke-width="0" stroke-linecap="square" stroke-linejoin="miter"/>',
|
||
'<path name="right_rect" d="M 150,0 L 150,100 250,100 250,0 Z" fill="#567" stroke="rgb(56,93,138)" stroke-width="0" stroke-linecap="square" stroke-linejoin="miter"/>',
|
||
'</svg>'
|
||
].join('')
|
||
|
||
echarts.registerMap('testGeoSVG_coord1', { svg: svg });
|
||
|
||
option = {
|
||
series: [{
|
||
type: 'map',
|
||
roam: true,
|
||
top: 10,
|
||
bottom: 10,
|
||
left: 10,
|
||
right: 10,
|
||
selectedMode: 'multiple',
|
||
map: 'testGeoSVG_coord1',
|
||
select: {
|
||
itemStyle: {
|
||
color: 'red'
|
||
},
|
||
label: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
fontSize: 30
|
||
},
|
||
labelLayout: {
|
||
hideOverlap: true
|
||
}
|
||
}]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main12', {
|
||
title: [
|
||
'Click both rect make them selected (become red)',
|
||
'(1) zoom to trigger label **hideOverlap**',
|
||
'zoom back, check labels should be restored',
|
||
'(2) mouseover one the **right rect** and zoom to trigger label **hideOverlap**',
|
||
'zoom back, mouseout, check the label should not disappear'
|
||
],
|
||
option: option,
|
||
height: 200,
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
<script>
|
||
require(['echarts'/*, 'map/js/china' */], function (echarts) {
|
||
const svg = [
|
||
'<?xml version="1.0" encoding="utf-8"?>',
|
||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:ooo="http://xml.openoffice.org/svg/export" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" fill-rule="evenodd" xml:space="preserve">',
|
||
'<path name="left_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" stroke="rgb(56,93,138)" stroke-width="0" stroke-linecap="square" stroke-linejoin="miter"/>',
|
||
'</svg>'
|
||
].join('')
|
||
|
||
echarts.registerMap('testGeoSVG_coord2', { svg: svg });
|
||
|
||
option = {
|
||
geo: {
|
||
map: 'testGeoSVG_coord2',
|
||
roam: true
|
||
}
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main13', {
|
||
title: [
|
||
'(geo coordSys) label displayed only on hover',
|
||
'zoom: label should keep displayed.'
|
||
],
|
||
option: option,
|
||
height: 200,
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|
||
|