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