100pah opened a new pull request #14571:
URL: https://github.com/apache/echarts/pull/14571
<!-- Please fill in the following information to help us review your PR more
efficiently. -->
## Brief Information
This pull request is in the type of:
- [ ] bug fixing
- [x] new feature
- [ ] others
### Features:
#### Support use SVG as the map in both Geo component and series map.
```js
$.ajax({
url: '../../vis-data/map/svg/geo-topo/Map_of_Iceland.svg',
dataType: 'text'
}).done(function (svg) {
echarts.registerMap('Map_of_Iceland', {
svg: svg
});
option = {
tooltip: {
alwaysShowContent: true,
enterable: true,
extraCssText: 'user-select: text'
},
geo: [{
map: 'Map_of_Iceland',
...
}]
};
});
```
#### Support tooltip on Geo component
#### Support label option on Geo component
#### Support to name some SVG tags to enable them to be configured in option
`regions`.
```js
<path name="trip1" ... />
```
Then this config enabled:
```js
option = {
geo: {
tooltip: { show: true, ... },
regions: [{
name: 'trip1',
itemStyle: { ... },
label: { ... },
tooltip: { ... }
}]
}
}
```
Especially:
(1) The path can trigger mouse event to users (like click, mouseover, ...).
(2) The path can change state (normal/emphasis/select/blur) when `hover` or
`dispatchAction`
(3) text/tspan/image can only trigger event/tooltip but can not apply option
style.
(4) Multiple tags can have the same name. In this case:
When mouseover brings focus-blur, the are all in "focus" state.
They share one region option (style, label, tooltip, ...).
They all display labels based on the center of each tag.
(5) <g> can be named.
If <g name="xxx">, all of the descendants will have apply the region options
styles.
But a single label/tooltip only displayed based on this <g>
#### Support focus-blur on Geo component.
```js
geo: {
emphasis: {
// enable focus-blur feature.
// only 'self' supported.
focus: 'self'
}
}
```
Once focus-blur feature enabled, the "blurScope" is this Geo component. That
is, the entire SVG
Note: in series-map, we do not support "blur all of the SVG" yet. There is a
little implementation trouble. So do not support it until some requirement come.
#### geoSVG named tag support select:
+ follow echarts `select` option.
+ follow "geoselectchanged" event (on geo component) and `selectchanged`
event (on series-map).
+ "geoselectchanged" event: add param: `allSelected: { geoIndex: number,
name: string[] }[]`
#### fix: [common focus-blur feature]
make API trigger emphasis blur correct (should leave blur firstly for other
series).
#### fix: [common tooltip feature]
fix tooltip component default position: should apply `position` on option
firstly.
---
<br>
### Some implementation details:
+ refactor of geoJSON & SVG source loader and management.
+ label scale implementation change: user `afterUpdate` hook rather than
divide parentScale.
+ Some refactor to Region: the original `Region` is migrated to
`GeoJSONRegion`. And make `Region` as the base class of `GeoJSONRegion` and
`GeoSVGRegion`. Modify the constructor of `Geo`.
+ Remove Geo['_nameCoordMap'], instead, calculate center on demand.
+ Fix that some API missing nameProperty and geoJSON should cached not only
by mapName but also by nameProperty.
+ About focus-blur on component:
+ Support component focus blur. The option `emphasis.focus` can be
specified to enable this feature. `emphasis.focus` only supports the value
`'self'`. The option `emphasis.focusScope` is not supported in component. That
is, the focus scope can be only a single component itself. All of the elements
in this component will be blurred. Added `Component['focusBlurEnabled']` to
enable component blur.
+ Support component hover link when highlight with a given name. There
probably be multiple elements share one region name while those region elements
has no common ancestor. hover link enables them to be highlighted together.
Implementation: if a component implements
`Component['findHighDownDispatchers']`, dispatcher elements by a given name
will be found and this feature is enabled.
+ Support component highlight/downplay be triggered by `dispatchAction`.
Implementation: if a component implements
`Component['findHighDownDispatchers']`, dispatcher elements by a given name
will be found and this feature is enabled.
---
<br>
### Others
+ remove the support of "load multiple geoJSON or SVG in one map name". This
feature is never documented and published. And this feature have an inherent
problem that it's not easy to normalize the unit among the different SVG. After
this PR, one map name can only have one geoJSON or one SVG.
+ Do not support `nameMap` in geoSVG until some real requirements come.
### Test Case
`test/geo-svg.html`
`test/geo-svg-demo.html`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
