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:29 UTC
[echarts] 01/04: fix: [geo] tweak a little.
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 f2c35faa3eaddcb2a4aad7105c29619f0e45f4e5
Author: 100pah <su...@gmail.com>
AuthorDate: Fri Mar 12 01:32:08 2021 +0800
fix: [geo] tweak a little.
---
src/component/geo/GeoView.ts | 10 +--
src/component/helper/MapDraw.ts | 5 ++
src/coord/geo/GeoModel.ts | 21 +++++-
test/geo-svg.html | 156 +++++++++++++++++++++++++++++-----------
4 files changed, 142 insertions(+), 50 deletions(-)
diff --git a/src/component/geo/GeoView.ts b/src/component/geo/GeoView.ts
index a3e1c71..961b541 100644
--- a/src/component/geo/GeoView.ts
+++ b/src/component/geo/GeoView.ts
@@ -25,6 +25,7 @@ import ExtensionAPI from '../../core/ExtensionAPI';
import GeoModel from '../../coord/geo/GeoModel';
import { Payload, ZRElementEvent, ECEventData } from '../../util/types';
import { getECData } from '../../util/innerStore';
+import { findEventDispatcher } from '../../util/event';
class GeoView extends ComponentView {
@@ -66,12 +67,11 @@ class GeoView extends ComponentView {
}
private _handleRegionClick(e: ZRElementEvent) {
- let current = e.target;
let eventData: ECEventData;
- // TODO extract a util function
- while (current && (eventData = getECData(current).eventData) == null) {
- current = current.__hostTarget || current.parent;
- }
+
+ findEventDispatcher(e.target, current => {
+ return (eventData = getECData(current).eventData) != null;
+ }, true);
if (eventData) {
this._api.dispatchAction({
diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts
index 15634f2..e64631e 100644
--- a/src/component/helper/MapDraw.ts
+++ b/src/component/helper/MapDraw.ts
@@ -403,6 +403,11 @@ class MapDraw {
if (data) {
data.setItemGraphicEl(dataIdx, elForStateChange);
}
+ // series-map will not trigger "geoselectchange" no matter it is
+ // based on a declared geo component. Becuause series-map will
+ // trigger "selectchange". If it trigger both the two events,
+ // If users call `chart.dispatchAction({type: 'toggleSelect'})`,
+ // it not easy to also fire event "geoselectchanged".
else {
const regionModel = mapOrGeoModel.getRegionModel(regionName);
// Package custom mouse event for geo component
diff --git a/src/coord/geo/GeoModel.ts b/src/coord/geo/GeoModel.ts
index 7095c6f..7fbccef 100644
--- a/src/coord/geo/GeoModel.ts
+++ b/src/coord/geo/GeoModel.ts
@@ -34,7 +34,8 @@ import {
RoamOptionMixin,
AnimationOptionMixin,
StatesOptionMixin,
- Dictionary
+ Dictionary,
+ CommonTooltipOption
} from '../../util/types';
import { NameMap } from './geoTypes';
import GlobalModel from '../../model/Global';
@@ -59,7 +60,15 @@ interface GeoLabelFormatterDataParams {
export interface RegoinOption extends GeoStateOption, StatesOptionMixin<GeoStateOption> {
name?: string
selected?: boolean
-};
+ tooltip?: Partial<Pick<CommonTooltipOption<GeoTooltipFormatterParams>, 'show'>>
+}
+
+export interface GeoTooltipFormatterParams {
+ componentType: 'geo'
+ geoIndex: number
+ name: string
+ $vars: ['name']
+}
export interface GeoCommonOptionMixin extends RoamOptionMixin {
// Map name
@@ -103,6 +112,8 @@ export interface GeoOption extends
selectedMode?: 'single' | 'multiple' | boolean
selectedMap?: Dictionary<boolean>
+
+ tooltip?: CommonTooltipOption<GeoTooltipFormatterParams>
}
class GeoModel extends ComponentModel<GeoOption> {
@@ -188,7 +199,11 @@ class GeoModel extends ComponentModel<GeoOption> {
}
},
- regions: []
+ regions: [],
+
+ tooltip: {
+ show: false
+ }
};
init(option: GeoOption, parentModel: Model, ecModel: GlobalModel): void {
diff --git a/test/geo-svg.html b/test/geo-svg.html
index 70b6139..0994f51 100644
--- a/test/geo-svg.html
+++ b/test/geo-svg.html
@@ -37,14 +37,36 @@ under the License.
- <div id="main0"></div>
- <div id="main1"></div>
- <div id="main2"></div>
+ <div id="main_pure_geo_json"></div>
+ <div id="main_pure_geo_svg"></div>
+ <div id="main_pure_map_svg"></div>
+ <div id="main_map_geo_svg"></div>
+ <script>
+ function listenAndPrintSelectChanged(chart) {
+ if (!chart) {
+ return;
+ }
+ const out = {
+ };
+ chart.on('geoselectchanged', function (params) {
+ out.allSelected = params.allSelected;
+ console.log('geoselectechanged');
+ chart.__testHelper.updateInfo(out, 'event');
+ });
+ chart.on('selectchanged', function (params) {
+ out.selected = params.selected;
+ console.log('selectechanged');
+ chart.__testHelper.updateInfo(out, 'event');
+ });
+ }
+ </script>
+
+
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
@@ -70,6 +92,8 @@ under the License.
echarts.registerMap('testGeoJson1', testGeoJson1);
option = {
+ tooltip: {
+ },
geo: {
map: 'testGeoJson1',
roam: true,
@@ -84,29 +108,19 @@ under the License.
}
};
- var chart = testHelper.create(echarts, 'main0', {
+ var chart = testHelper.create(echarts, 'main_pure_geo_json', {
title: [
- 'geoJSON location:',
+ 'pure geo geoJSON location:',
'Should be a square and 80% of canvas height.',
'At the center of the canvas.'
],
option: option,
- info: [],
- infoKey: 'allSelected',
+ info: {},
+ infoKey: 'event',
height: 300
});
- if (chart) {
- if (chart) {
- chart.on('geoselectchanged', function (params) {
- chart.__testHelper.updateInfo(
- params.allSelected,
- 'allSelected'
- );
- });
- }
- }
-
+ listenAndPrintSelectChanged(chart);
});
</script>
@@ -126,6 +140,8 @@ under the License.
});
option = {
+ tooltip: {
+ },
geo: {
map: 'seatmap',
roam: true,
@@ -158,27 +174,20 @@ under the License.
// }
};
- var chart = testHelper.create(echarts, 'main1', {
+ var chart = testHelper.create(echarts, 'main_pure_geo_svg', {
title: [
- 'geo component with svg resource',
+ 'pure geo component with svg resource',
'click seat: check **allSelected** correct.'
],
option: option,
- info: [],
- infoKey: 'allSelected',
+ info: {},
+ infoKey: 'event',
height: 300
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
- if (chart) {
- chart.on('geoselectchanged', function (params) {
- chart.__testHelper.updateInfo(
- params.allSelected,
- 'allSelected'
- );
- });
- }
+ listenAndPrintSelectChanged(chart);
});
@@ -231,27 +240,90 @@ under the License.
}
};
- var chart = testHelper.create(echarts, 'main2', {
+ var chart = testHelper.create(echarts, 'main_pure_map_svg', {
title: [
- 'map series with svg resource',
+ 'pure map series with svg resource',
'Hover seat: check **tooltip** correct.'
],
option: option,
- info: [],
- infoKey: 'allSelected',
+ info: {},
+ infoKey: 'event',
height: 300
// buttons: [{text: 'btn-txt', onclick: function () {}}],
// recordCanvas: true,
});
- if (chart) {
- chart.on('selectchanged', function (params) {
- chart.__testHelper.updateInfo(
- params.selected,
- 'selected'
- );
- });
- }
+ listenAndPrintSelectChanged(chart);
+
+ });
+
+ });
+ </script>
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ $.ajax({
+ url: '../../vis-data/map/svg/seats/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
+ 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,
+ });
+
+ listenAndPrintSelectChanged(chart);
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org