347 lines
9.7 KiB
HTML
Generated
347 lines
9.7 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>
|
|
.test-chart-block {
|
|
background-color: #777;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div id="main_simple_geo_json_default_layout"></div>
|
|
<div id="main_simple_geo_svg_default_layout"></div>
|
|
<div id="main_simple_geo_json_layoutCenter_layoutSize_layout"></div>
|
|
<div id="main_simple_geo_svg_layoutCenter_layoutSize_layout"></div>
|
|
<div id="main_simple_geo_json_ltrb_layout"></div>
|
|
<div id="main_simple_geo_svg_ltrb_layout"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
var _echarts;
|
|
require(['echarts'], function (echarts) {
|
|
_ecahrts = echarts;
|
|
const testGeoJSON1 = {
|
|
'type': 'FeatureCollection',
|
|
'features': [
|
|
{
|
|
'type': 'Feature',
|
|
'geometry': {
|
|
'type': 'Polygon',
|
|
'coordinates': [
|
|
[[2000, 2000], [5000, 2000], [5000, 5000], [2000, 5000]]
|
|
]
|
|
},
|
|
'properties': {
|
|
'name': 'Afghanistan',
|
|
'childNum': 1
|
|
}
|
|
}
|
|
]
|
|
};
|
|
echarts.registerMap('testGeoJSON1', testGeoJSON1);
|
|
|
|
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" width="100" height="100" version="1.2" fill-rule="evenodd" xml:space="preserve">',
|
|
'<path d="M 0,0 L 0,100 100,100 100,0 Z" fill="none" stroke="rgb(56,93,138)" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>',
|
|
'</svg>'
|
|
].join('')
|
|
|
|
echarts.registerMap('testGeoSVG1', { svg: svg });
|
|
|
|
runAllCases();
|
|
});
|
|
|
|
|
|
var _cases = [];
|
|
function _case(theCase) {
|
|
_cases.push(theCase);
|
|
if (_echarts) {
|
|
runAllCases();
|
|
}
|
|
}
|
|
function runAllCases() {
|
|
for (var i = 0; i < _cases.length; i++) {
|
|
_cases[i](_ecahrts);
|
|
}
|
|
_cases.length = 0;
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
_case(function (echarts) {
|
|
|
|
option = {
|
|
backgroundColor: '#fff',
|
|
tooltip: {
|
|
},
|
|
geo: {
|
|
map: 'testGeoJSON1',
|
|
roam: true,
|
|
selectedMode: 'single',
|
|
// height: '100%',
|
|
// center
|
|
// layoutCenter: ['30%', 40],
|
|
// layoutSize: 40,
|
|
// boundingCoords
|
|
zoom: 1,
|
|
aspectScale: 1
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main_simple_geo_json_default_layout', {
|
|
title: [
|
|
'geoJSON default layout:',
|
|
'Should be a square.',
|
|
'80% of canvas height.',
|
|
'At the center of the canvas.'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
_case(function (echarts) {
|
|
option = {
|
|
backgroundColor: '#fff',
|
|
tooltip: {
|
|
},
|
|
geo: {
|
|
map: 'testGeoSVG1',
|
|
roam: true,
|
|
selectedMode: 'single',
|
|
// height: '100%',
|
|
// center
|
|
// layoutCenter: ['30%', 40],
|
|
// layoutSize: 40,
|
|
// boundingCoords
|
|
// zoom: 1,
|
|
// aspectScale: 1
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main_simple_geo_svg_default_layout', {
|
|
title: [
|
|
'geoSVG default layout:',
|
|
'Should be a square.',
|
|
'80% of canvas height.',
|
|
'At the center of the canvas.'
|
|
],
|
|
option: option,
|
|
height: 200
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
_case(function (echarts) {
|
|
|
|
option = {
|
|
backgroundColor: '#fff',
|
|
tooltip: {
|
|
},
|
|
geo: {
|
|
map: 'testGeoJSON1',
|
|
roam: true,
|
|
selectedMode: 'single',
|
|
layoutCenter: ['50%', 40],
|
|
layoutSize: 80,
|
|
zoom: 1,
|
|
aspectScale: 1
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main_simple_geo_json_layoutCenter_layoutSize_layout', {
|
|
title: [
|
|
'geoJSON layoutCenter/layoutSize layout:',
|
|
'Should be a square.',
|
|
'100% of canvas height.',
|
|
'At the center of the canvas.'
|
|
],
|
|
option: option,
|
|
height: 80
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
_case(function (echarts) {
|
|
|
|
option = {
|
|
backgroundColor: '#fff',
|
|
tooltip: {
|
|
},
|
|
geo: {
|
|
map: 'testGeoSVG1',
|
|
roam: true,
|
|
selectedMode: 'single',
|
|
layoutCenter: ['50%', 40],
|
|
layoutSize: 80,
|
|
zoom: 1,
|
|
aspectScale: 1
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main_simple_geo_svg_layoutCenter_layoutSize_layout', {
|
|
title: [
|
|
'geoJSON layoutCenter/layoutSize layout:',
|
|
'Should be a square.',
|
|
'100% of canvas height.',
|
|
'At the center of the canvas.'
|
|
],
|
|
option: option,
|
|
height: 80
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
_case(function (echarts) {
|
|
|
|
option = {
|
|
backgroundColor: '#fff',
|
|
tooltip: {
|
|
},
|
|
geo: {
|
|
map: 'testGeoJSON1',
|
|
roam: true,
|
|
selectedMode: 'single',
|
|
left: 10,
|
|
right: 10,
|
|
top: 10,
|
|
bottom: 10,
|
|
width: null,
|
|
height: null,
|
|
zoom: 1,
|
|
aspectScale: 1
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main_simple_geo_json_ltrb_layout', {
|
|
title: [
|
|
'geoJSON top/right/bottom/left layout:',
|
|
'Should be a rect. Canvas width 400.',
|
|
'left/right/top/bottom all are **10**'
|
|
],
|
|
option: option,
|
|
width: 400,
|
|
height: 80
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
_case(function (echarts) {
|
|
|
|
option = {
|
|
backgroundColor: '#fff',
|
|
tooltip: {
|
|
},
|
|
geo: {
|
|
map: 'testGeoSVG1',
|
|
roam: true,
|
|
selectedMode: 'single',
|
|
left: 10,
|
|
right: 10,
|
|
top: 10,
|
|
bottom: 10,
|
|
width: null,
|
|
height: null,
|
|
zoom: 1,
|
|
aspectScale: 1
|
|
}
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'main_simple_geo_svg_ltrb_layout', {
|
|
title: [
|
|
'geoJSON top/right/bottom/left layout:',
|
|
'Should be a rect. Canvas width 400.',
|
|
'left/right/top/bottom all are **10**'
|
|
],
|
|
option: option,
|
|
width: 400,
|
|
height: 80
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|