| <!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> |
| </style> |
| |
| |
| |
| <div id="main_simple_geo_svg_coord"></div> |
| <div id="main_simple_geo_svg_viewBox_svgWH"></div> |
| <div id="main_geo_json_focus_blur"></div> |
| <div id="main_geo_svg_emphasis_select"></div> |
| <div id="main_pure_geo_svg"></div> |
| <div id="main_pure_map_svg"></div> |
| <div id="main_map_geo_svg"></div> |
| <div id="main_geo_svg_click_finder"></div> |
| <div id="main_geo_svg_multiple_geo"></div> |
| |
| |
| |
| |
| |
| <script> |
| function listenAndPrintEvent(chart) { |
| if (!chart) { |
| return; |
| } |
| const out = { |
| }; |
| chart.on('geoselectchanged', function (params) { |
| out.geoselectechanged = { |
| allSelected: params.allSelected |
| }; |
| console.log('geoselectechanged', params); |
| chart.__testHelper.updateInfo(out, 'event'); |
| }); |
| chart.on('selectchanged', function (params) { |
| out.selectechanged = { |
| selected: params.selected |
| }; |
| console.log('selectechanged', params); |
| chart.__testHelper.updateInfo(out, 'event'); |
| }); |
| chart.on('click', function (params) { |
| out.click = { |
| componentIndex: params.componentIndex, |
| componentType: params.componentType, |
| geoIndex: params.geoIndex, |
| name: params.name |
| }; |
| console.log('click', params); |
| chart.__testHelper.updateInfo(out, 'event'); |
| }); |
| } |
| </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"/>', |
| '<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_coord', { svg: svg }); |
| |
| option = { |
| animation: false, |
| tooltip: { |
| }, |
| geo: { |
| map: 'testGeoSVG_coord', |
| roam: true, |
| top: 0, |
| bottom: 0, |
| left: 0, |
| right: 0, |
| }, |
| series: [{ |
| type: 'scatter', |
| geoIndex: 0, |
| coordinateSystem: 'geo', |
| symbolSize: 30, |
| data: [{ |
| value: [200, 50], |
| itemStyle: { |
| color: 'blue' |
| } |
| }] |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_simple_geo_svg_coord', { |
| title: [ |
| 'A **blue circle** should be in the center of the right rect.', |
| '**Click** inside the rect or outside the rect.', |
| 'Check SVG coord displayed (via convertFromPixel).', |
| '(The left rect is 100*100 and left-top corner is (0,0))', |
| '**Click btn1**, check Pixel.point[1] should be around 100', |
| '**Click btn2**, check Pixel.point[1] should be around 200' |
| ], |
| option: option, |
| infoKey: 'SVG coord', |
| info: {}, |
| height: 200, |
| buttons: [{ |
| text: 'converToPixel({ geoIndex: 0 }, "left_rect")', |
| onclick: function () { |
| var point = chart.convertToPixel({ geoIndex: 0 }, 'left_rect'); |
| console.log(point); |
| chart.__testHelper.updateInfo( |
| { point: point }, |
| 'Pixel' |
| ); |
| } |
| }, { |
| text: 'convertToPixel({ geoIndex: 0 }, [100, 100])', |
| onclick: function () { |
| var point = chart.convertToPixel({ geoIndex: 0 }, [100, 100]); |
| console.log(point); |
| chart.__testHelper.updateInfo( |
| { point: point }, |
| 'Pixel' |
| ); |
| } |
| }] |
| }); |
| |
| if (chart) { |
| chart.getZr().on('click', function (event) { |
| var x = event.offsetX; |
| var y = event.offsetY; |
| console.log(x, y); |
| var svgCoord = chart.convertFromPixel({ geoIndex: 0 }, [x, y]); |
| console.log(svgCoord); |
| chart.__testHelper.updateInfo( |
| { x: svgCoord[0], y: svgCoord[1] }, |
| 'SVG coord' |
| ); |
| }); |
| } |
| |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| const xmlHeader = '<?xml version="1.0" encoding="utf-8"?>'; |
| const svgTagCommonAttr = ' 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" '; |
| |
| // Both svgWdith svgHeight viewBox |
| const svg1 = [ |
| xmlHeader, |
| '<svg ' + svgTagCommonAttr, |
| 'viewBox="99500 99500 1000 1000"', |
| 'width="5px" height="5px"', |
| '>', |
| '<circle cx="100000" cy="100000" r="500" fill="blue" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</svg>' |
| ].join(' '); |
| // Both svgWdith svgHeight viewBox and clip |
| const svg2 = [ |
| xmlHeader, |
| '<svg ' + svgTagCommonAttr, |
| 'viewBox="99500 99500 500 500"', |
| 'width="5px" height="5px"', |
| '>', |
| '<circle cx="100000" cy="100000" r="500" fill="blue" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</svg>' |
| ].join(' '); |
| // Only svgWdith svgHeight |
| const svg3 = [ |
| xmlHeader, |
| '<svg ' + svgTagCommonAttr, |
| 'width="100000" height="100000"', |
| '>', |
| '<circle cx="100000" cy="100000" r="100000" fill="blue" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</svg>' |
| ].join(' '); |
| // Only viewBox |
| const svg4 = [ |
| xmlHeader, |
| '<svg ' + svgTagCommonAttr, |
| 'viewBox="99500 99500 500 500"', |
| '>', |
| '<circle cx="100000" cy="100000" r="500" fill="blue" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</svg>' |
| ].join(' '); |
| // Neither viewBox and svgWidth svgHeight |
| const svg5 = [ |
| xmlHeader, |
| '<svg ' + svgTagCommonAttr, |
| '>', |
| '<circle cx="100000" cy="100000" r="500" fill="blue" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</svg>' |
| ].join(' '); |
| // Both viewBox but only svgHeight no svgWidth |
| const svg6 = [ |
| xmlHeader, |
| '<svg ' + svgTagCommonAttr, |
| 'viewBox="99500 99500 1000 1000"', |
| 'height="500"', |
| '>', |
| '<circle cx="100000" cy="100000" r="500" fill="blue" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</svg>' |
| ].join(' '); |
| |
| echarts.registerMap('testGeoSVG_viewBox_svgWH_1', { svg: svg1 }); |
| echarts.registerMap('testGeoSVG_viewBox_svgWH_2', { svg: svg2 }); |
| echarts.registerMap('testGeoSVG_viewBox_svgWH_3', { svg: svg3 }); |
| echarts.registerMap('testGeoSVG_viewBox_svgWH_4', { svg: svg4 }); |
| echarts.registerMap('testGeoSVG_viewBox_svgWH_5', { svg: svg5 }); |
| echarts.registerMap('testGeoSVG_viewBox_svgWH_6', { svg: svg6 }); |
| |
| const RECT_SIZE = 50; |
| const Y_TOP = 10; |
| const X_LEFT = 10; |
| const GAP = 20; |
| |
| var _itemIndex = 0; |
| var _graphicOptionArr = []; |
| var _geoOptionArr = []; |
| |
| function makeItem(text, mapType) { |
| var x = X_LEFT + (RECT_SIZE + GAP) * _itemIndex++; |
| _graphicOptionArr.push({ |
| type: 'rect', |
| silent: true, |
| shape: { x: x, y: Y_TOP, width: RECT_SIZE, height: RECT_SIZE }, |
| style: { stroke: 'red', lineWidth: 1, fill: null } |
| }, { |
| type: 'text', |
| silent: true, |
| style: { |
| text: text, x: x + RECT_SIZE / 2, y: Y_TOP + RECT_SIZE + GAP, |
| fill: '#000', textAlign: 'center', textVerticalAlign: 'middle' |
| } |
| }); |
| _geoOptionArr.push({ |
| map: mapType, |
| left: x, top: Y_TOP, width: RECT_SIZE, height: RECT_SIZE, |
| itemStyle: { color: 'blue' } |
| }); |
| } |
| |
| makeItem('circle', 'testGeoSVG_viewBox_svgWH_1'); |
| makeItem('1/4 sector', 'testGeoSVG_viewBox_svgWH_2'); |
| makeItem('1/4 sector', 'testGeoSVG_viewBox_svgWH_3'); |
| makeItem('1/4 sector', 'testGeoSVG_viewBox_svgWH_4'); |
| makeItem('circle', 'testGeoSVG_viewBox_svgWH_5'); |
| makeItem('thin ellipse', 'testGeoSVG_viewBox_svgWH_6'); |
| |
| option = { |
| animation: false, |
| tooltip: { |
| }, |
| graphic: _graphicOptionArr, |
| geo: _geoOptionArr |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_simple_geo_svg_viewBox_svgWH', { |
| title: [ |
| 'viewBox test:', |
| 'Check each shape should be inside each red rect.', |
| 'Check each shape be correspondence with the text.', |
| ], |
| option: option, |
| height: 100 |
| }); |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| const testGeoJson1 = { |
| 'type': 'FeatureCollection', |
| 'features': [ |
| { |
| 'type': 'Feature', |
| 'geometry': { |
| 'type': 'Polygon', |
| 'coordinates': [ |
| [[2000, 2000], [5000, 2000], [5000, 5000], [2000, 5000]] |
| ] |
| }, |
| 'properties': { |
| 'name': 'Afghanistan' |
| } |
| }, |
| { |
| 'type': 'Feature', |
| 'geometry': { |
| 'type': 'Polygon', |
| 'coordinates': [ |
| [[6000, 2300], [9300, 2300], [9000, 5000]] |
| ] |
| }, |
| 'properties': { |
| 'name': 'BBB' |
| } |
| } |
| ] |
| }; |
| |
| echarts.registerMap('testGeoJson2', testGeoJson1); |
| |
| option = { |
| tooltip: { |
| }, |
| geo: { |
| map: 'testGeoJson2', |
| roam: true, |
| selectedMode: 'single', |
| label: { |
| show: true |
| }, |
| emphasis: { |
| focus: 'self' |
| }, |
| // height: '100%', |
| // center |
| // layoutCenter: ['30%', 40], |
| // layoutSize: 40, |
| // boundingCoords |
| zoom: 1, |
| aspectScale: 1 |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_geo_json_focus_blur', { |
| title: [ |
| 'check geoJSON focus-blur', |
| '**Click** them, check click info' |
| ], |
| option: option, |
| info: {}, |
| infoKey: 'event', |
| height: 200 |
| }); |
| |
| listenAndPrintEvent(chart); |
| |
| }); |
| </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="a" d="M 0,0 L 0,100 100,100 100,0 Z" transform="rotate(45)" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '<path name="a" d="M 110,0 L 110,100 210,100 210,0 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '<g name="b">', |
| '<path d="M 0,110 L 0,210 100,110 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '<path d="M 110,110 L 110,210 210,110 Z" fill="rgb(16,193,138)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</g>', |
| '<radialGradient id="XMLID_1_" cx="0" cy="220" r="59.4363" gradientUnits="userSpaceOnUse">', |
| '<stop offset="0" style="stop-color:#E6E6E6"/>', |
| '<stop offset="1" style="stop-color:#4D4D4D"/>', |
| '</radialGradient>', |
| '<path name="c" d="M 0,220 L 0,320 100,220 Z" fill="url(#XMLID_1_)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '<radialGradient id="XMLID_2_" cx="110" cy="220" r="59.4363" gradientUnits="userSpaceOnUse">', |
| '<stop offset="0" style="stop-color:#E6E6E6"/>', |
| '<stop offset="1" style="stop-color:#4D4D4D"/>', |
| '</radialGradient>', |
| '<path name="c" d="M 110,220 L 110,320 210,220 Z" fill="url(#XMLID_2_)" stroke="green" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</svg>' |
| ].join('') |
| |
| echarts.registerMap('testGeoSVG_select_hover', { svg: svg }); |
| |
| option = { |
| // tooltip: { |
| // }, |
| geo: { |
| map: 'testGeoSVG_select_hover', |
| roam: true, |
| selectedMode: 'single', |
| // height: '100%', |
| // center |
| // layoutCenter: ['30%', 40], |
| // layoutSize: 40, |
| // boundingCoords |
| zoom: 1, |
| aspectScale: 1, |
| label: { |
| show: true |
| }, |
| emphasis: { |
| focus: 'self', |
| label: { |
| show: true, |
| fontSize: 100 |
| } |
| }, |
| select: { |
| itemStyle: { |
| color: 'red' |
| } |
| } |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_geo_svg_emphasis_select', { |
| title: [ |
| 'click buttons', |
| 'hover check', |
| 'check focus-blur', |
| 'check label no scale/rotate' |
| ], |
| option: option, |
| info: {}, |
| infoKey: 'event', |
| height: 200, |
| button: [{ |
| text: 'highlight a', |
| onclick: function () { |
| chart.dispatchAction({ type: 'highlight', geoIndex: 0, name: 'a' }); |
| } |
| }, { |
| text: 'downplay a', |
| onclick: function () { |
| chart.dispatchAction({ type: 'downplay', geoIndex: 0, name: 'a' }); |
| } |
| }, { |
| text: 'select a', |
| onclick: function () { |
| chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: 'a' }); |
| } |
| }, { |
| text: 'unselect a', |
| onclick: function () { |
| chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'a' }); |
| } |
| }, { |
| text: 'highlight b', |
| onclick: function () { |
| chart.dispatchAction({ type: 'highlight', geoIndex: 0, name: 'b' }); |
| } |
| }, { |
| text: 'downplay b', |
| onclick: function () { |
| chart.dispatchAction({ type: 'downplay', geoIndex: 0, name: 'b' }); |
| } |
| }, { |
| text: 'select b', |
| onclick: function () { |
| chart.dispatchAction({ type: 'geoSelect', geoIndex: 0, name: 'b' }); |
| } |
| }, { |
| text: 'unselect b', |
| onclick: function () { |
| chart.dispatchAction({ type: 'geoUnSelect', geoIndex: 0, name: 'b' }); |
| } |
| }] |
| }); |
| |
| listenAndPrintEvent(chart); |
| |
| if (chart) { |
| chart.on('highlight', function () { |
| }); |
| } |
| |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| $.ajax({ |
| url: 'data/svg/flight-seats.svg', |
| dataType: 'text' |
| }).done(function (svg) { |
| |
| echarts.registerMap('flight-seats', { |
| svg: svg |
| }); |
| |
| option = { |
| tooltip: { |
| }, |
| geo: { |
| map: 'flight-seats', |
| roam: true, |
| selectedMode: 'multiple', |
| tooltip: { |
| show: true |
| }, |
| emphasis: { |
| itemStyle: { |
| color: null, |
| borderColor: '#780705', |
| borderWidth: 3 |
| }, |
| label: { |
| textBorderColor: '#fff', |
| textBorderWidth: 2 |
| } |
| }, |
| select: { |
| itemStyle: { |
| color: '#b50205' |
| }, |
| label: { |
| show: false, |
| textBorderColor: '#fff', |
| textBorderWidth: 2 |
| } |
| } |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_pure_geo_svg', { |
| title: [ |
| 'pure geo component with svg resource', |
| 'click seat: check **allSelected** correct.', |
| 'hover seat: check **tooltip** and **label** correct.' |
| ], |
| option: option, |
| info: {}, |
| infoKey: 'event', |
| height: 300 |
| }); |
| |
| listenAndPrintEvent(chart); |
| |
| }); |
| |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| $.ajax({ |
| url: 'data/svg/seatmap-example.svg', |
| dataType: 'text' |
| }).done(function (svg) { |
| |
| echarts.registerMap('seatmap', { |
| svg: svg |
| }); |
| |
| option = { |
| tooltip: { |
| }, |
| series: { |
| type: 'map', |
| map: 'seatmap', |
| roam: true, |
| selectedMode: 'multiple', |
| // height: 100, |
| // zoom: 1.5 |
| emphasis: { |
| label: { |
| textBorderColor: '#fff', |
| textBorderWidth: 2 |
| } |
| }, |
| select: { |
| itemStyle: { |
| color: '#b50205' |
| }, |
| label: { |
| show: false, |
| textBorderColor: '#fff', |
| textBorderWidth: 2 |
| } |
| } |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_pure_map_svg', { |
| title: [ |
| 'pure map series with svg resource', |
| 'Hover seat: check **tooltip** correct.' |
| ], |
| option: option, |
| info: {}, |
| infoKey: 'event', |
| height: 300 |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], |
| // recordCanvas: true, |
| }); |
| |
| listenAndPrintEvent(chart); |
| |
| }); |
| |
| }); |
| </script> |
| |
| |
| |
| |
| |
| <script> |
| require(['echarts'/*, 'map/js/china' */], function (echarts) { |
| var option; |
| $.ajax({ |
| url: 'data/svg/seatmap-example.svg', |
| dataType: 'text' |
| }).done(function (svg) { |
| |
| echarts.registerMap('seatmap', { |
| svg: svg |
| }); |
| |
| option = { |
| tooltip: { |
| }, |
| geo: { |
| map: 'seatmap', |
| roam: true, |
| selectedMode: 'multiple', |
| // height: 100, |
| // zoom: 1.5 |
| tooltip: { |
| show: true |
| }, |
| emphasis: { |
| label: { |
| textBorderColor: '#fff', |
| textBorderWidth: 2 |
| } |
| }, |
| select: { |
| itemStyle: { |
| color: '#b50205' |
| }, |
| label: { |
| show: false, |
| textBorderColor: '#fff', |
| textBorderWidth: 2 |
| } |
| } |
| }, |
| series: { |
| type: 'map', |
| selectedMode: 'multiple', |
| coordinateSystem: 'geo', |
| geoIndex: 0 |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_map_geo_svg', { |
| title: [ |
| 'map series on declared geo with svg resource', |
| 'Hover seat: check **tooltip** correct.' |
| ], |
| option: option, |
| info: {}, |
| infoKey: 'event', |
| height: 300 |
| // buttons: [{text: 'btn-txt', onclick: function () {}}], |
| // recordCanvas: true, |
| }); |
| |
| listenAndPrintEvent(chart); |
| |
| }); |
| |
| }); |
| </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="a" d="M 0,0 L 0,100 100,100 100,0 Z" fill="green" stroke="rgb(56,93,138)" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '<path name="b" d="M 150,0 L 150,100 250,100 250,0 Z" fill="blue" stroke="rgb(56,93,138)" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</svg>' |
| ].join('') |
| |
| echarts.registerMap('testGeoSVGclick', { svg: svg }); |
| |
| var option = { |
| geo: { |
| map: 'testGeoSVGclick', |
| selectedMode: 'single', |
| zoom: 1, |
| aspectScale: 1, |
| label: { |
| show: true |
| } |
| } |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_geo_svg_click_finder', { |
| title: [ |
| 'Click green rect, should display click event.', |
| 'Click blue rect, should display nothing.' |
| ], |
| option: option, |
| info: {}, |
| infoKey: 'click event', |
| height: 200 |
| }); |
| |
| if (chart) { |
| chart.on('click', { geoIndex: 0, name: 'a' }, function (params) { |
| console.log(params); |
| chart.__testHelper.updateInfo({ |
| componentIndex: params.componentIndex, |
| componentType: params.componentType, |
| geoIndex: params.geoIndex, |
| name: params.name |
| }, 'click event'); |
| }); |
| } |
| |
| }); |
| </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="a" d="M 0,0 L 0,100 100,100 100,0 Z" fill="green" stroke="rgb(56,93,138)" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"/>', |
| '</svg>' |
| ].join('') |
| |
| echarts.registerMap('testGeoSVG_for_multiple_test', { svg: svg }); |
| |
| var option = { |
| geo: [{ |
| id: 'g1', |
| map: 'testGeoSVG_for_multiple_test', |
| selectedMode: 'single', |
| layoutCenter: ['25%', '50%'], |
| layoutSize: 20, |
| select: { |
| itemStyle: { color: 'red' } |
| } |
| }, { |
| id: 'g2', |
| map: 'testGeoSVG_for_multiple_test', |
| selectedMode: 'single', |
| layoutCenter: ['50%', '50%'], |
| layoutSize: 20, |
| select: { |
| itemStyle: { color: 'red' } |
| }, |
| }, { |
| id: 'g3', |
| map: 'testGeoSVG_for_multiple_test', |
| selectedMode: 'single', |
| layoutCenter: ['75%', '50%'], |
| layoutSize: 20, |
| select: { |
| itemStyle: { color: 'red' } |
| }, |
| }] |
| }; |
| |
| var chart = testHelper.create(echarts, 'main_geo_svg_multiple_geo', { |
| title: [ |
| 'Select the three rect to red.', |
| 'click btn. Check all of the existing rect removed,', |
| 'and only one new green rect generated.' |
| ], |
| option: option, |
| height: 200, |
| buttons: [{ |
| text: 'change geo (replaceMerge)', |
| onclick: function (params) { |
| chart.setOption({ |
| geo: { |
| id: 'g4', |
| map: 'testGeoSVG_for_multiple_test', |
| selectedMode: 'single', |
| layoutCenter: ['40%', '50%'], |
| layoutSize: 40, |
| select: { |
| itemStyle: { color: 'red' } |
| } |
| } |
| }, { replaceMerge: 'geo' }); |
| } |
| }] |
| }); |
| |
| }); |
| </script> |
| |
| |
| |
| |
| |
| |
| </body> |
| </html> |
| |
