You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2021/03/21 14:40:30 UTC
[echarts] 02/04: fix: [geo] modified default item color for geoSVG
and some tweak.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/geo-svg
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 86522a1b54843e06562138caf00114561539caed
Author: 100pah <su...@gmail.com>
AuthorDate: Wed Mar 17 21:32:29 2021 +0800
fix: [geo] modified default item color for geoSVG and some tweak.
---
src/component/helper/MapDraw.ts | 4 ++
src/coord/geo/GeoModel.ts | 19 ++++-
test/geo-svg.html | 150 +++++++++++++++++++++++++++++++++++++++-
3 files changed, 167 insertions(+), 6 deletions(-)
diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts
index e64631e..8be9155 100644
--- a/src/component/helper/MapDraw.ts
+++ b/src/component/helper/MapDraw.ts
@@ -269,6 +269,10 @@ class MapDraw {
}
zrUtil.each(this._svgRegionElements, function (el: Displayable) {
+ // Note that we also allow different elements have the same name.
+ // For example, a glyph of a city and the label of the city have
+ // the same name and their tooltip info can be defined in a single
+ // region option.
this._resetSingleRegionGraphic(
viewBuildCtx, el, el, el.name, [0, 0], 'inside'
);
diff --git a/src/coord/geo/GeoModel.ts b/src/coord/geo/GeoModel.ts
index 7fbccef..d18a249 100644
--- a/src/coord/geo/GeoModel.ts
+++ b/src/coord/geo/GeoModel.ts
@@ -39,6 +39,7 @@ import {
} from '../../util/types';
import { NameMap } from './geoTypes';
import GlobalModel from '../../model/Global';
+import geoSourceManager from './geoSourceManager';
export interface GeoItemStyleOption extends ItemStyleOption {
@@ -175,8 +176,11 @@ class GeoModel extends ComponentModel<GeoOption> {
itemStyle: {
borderWidth: 0.5,
- borderColor: '#444',
- color: '#eee'
+ borderColor: '#444'
+ // Default color:
+ // + geoJSON: #eee
+ // + geoSVG: null (use SVG original `fill`)
+ // color: '#eee'
},
emphasis: {
@@ -207,7 +211,16 @@ class GeoModel extends ComponentModel<GeoOption> {
};
init(option: GeoOption, parentModel: Model, ecModel: GlobalModel): void {
- super.init(option, parentModel, ecModel);
+ const source = geoSourceManager.getGeoResource(option.map);
+ if (source && source.type === 'geoJSON') {
+ const itemStyle = option.itemStyle = option.itemStyle || {};
+ if (!('color' in itemStyle)) {
+ itemStyle.color = '#eee';
+ }
+ }
+
+ this.mergeDefaultAndTheme(option, ecModel);
+
// Default label emphasis `show`
modelUtil.defaultEmphasis(option, 'label', ['show']);
}
diff --git a/test/geo-svg.html b/test/geo-svg.html
index 0994f51..86d4961 100644
--- a/test/geo-svg.html
+++ b/test/geo-svg.html
@@ -37,10 +37,12 @@ under the License.
- <div id="main_pure_geo_json"></div>
+ <div id="main_simple_geo_json"></div>
+ <div id="main_simple_geo_svg"></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_regions"></div>
@@ -68,6 +70,8 @@ under the License.
+
+
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
const testGeoJson1 = {
@@ -108,9 +112,9 @@ under the License.
}
};
- var chart = testHelper.create(echarts, 'main_pure_geo_json', {
+ var chart = testHelper.create(echarts, 'main_simple_geo_json', {
title: [
- 'pure geo geoJSON location:',
+ 'simple geo geoJSON location:',
'Should be a square and 80% of canvas height.',
'At the center of the canvas.'
],
@@ -127,6 +131,62 @@ under the License.
+
+
+
+
+
+ <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" 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('testGeoSVG', { svg: svg });
+
+ option = {
+ tooltip: {
+ },
+ geo: {
+ map: 'testGeoSVG',
+ 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', {
+ title: [
+ 'simple geo geoSVG location:',
+ 'Should be a square and 80% of canvas height.',
+ 'At the center of the canvas.'
+ ],
+ option: option,
+ info: {},
+ infoKey: 'event',
+ height: 300
+ });
+
+ listenAndPrintSelectChanged(chart);
+
+ });
+ </script>
+
+
+
+
+
+
+
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
var option;
@@ -331,6 +391,90 @@ under the License.
</script>
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+
+ $.ajax({
+ url: '../../vis-data/map/svg/geo-topo/Sicily_prehellenic_topographic_map.svg',
+ dataType: 'text'
+ }).done(function (svg) {
+
+ echarts.registerMap('sicily', {
+ svg: svg
+ });
+
+ option = {
+ tooltip: {
+ },
+ geo: [{
+ map: 'sicily',
+ roam: true,
+ selectedMode: 'multiple',
+ itemStyle: {
+ color: null
+ },
+ emphasis: {
+ // itemStyle: {
+ // borderColor: 'red',
+ // borderWidth: 5
+ // },
+ // areaStyle: {
+ // borderColor: 'red',
+ // borderWidth: 5
+ // },
+ label: {
+ textBorderColor: '#fff',
+ textBorderWidth: 2
+ }
+ },
+ select: {
+ itemStyle: {
+ color: '#b50205'
+ },
+ label: {
+ show: false,
+ textBorderColor: '#fff',
+ textBorderWidth: 2
+ }
+ },
+ z: 0
+ }],
+ series: {
+ type: 'map',
+ selectedMode: 'multiple',
+ coordinateSystem: 'geo',
+ geoIndex: 0
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main_geo_svg_regions', {
+ title: [
+ 'map series on declared geo with svg resource',
+ 'Hover seat: check **tooltip** correct.'
+ ],
+ option: option,
+ info: {},
+ infoKey: 'event',
+ height: 400
+ });
+
+ listenAndPrintSelectChanged(chart);
+
+ if (chart) {
+ chart.on('georoam', function (params) {
+ // console.log(params);
+ });
+ }
+
+ });
+
+ });
+ </script>
+
+
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org