You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/04/01 05:27:45 UTC

[GitHub] [echarts] 100pah opened a new pull request #14571: feature: support geoSVG

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`
   
   
   ![x1](https://user-images.githubusercontent.com/1956569/113247409-946ce100-92ed-11eb-8908-cbf90b554b0f.gif)
   ![x2](https://user-images.githubusercontent.com/1956569/113247429-9d5db280-92ed-11eb-8702-94027db041f8.gif)
   ![x3](https://user-images.githubusercontent.com/1956569/113247450-a77fb100-92ed-11eb-8665-7cbada86474b.gif)
   ![x4](https://user-images.githubusercontent.com/1956569/113247471-b1a1af80-92ed-11eb-93e4-1eea50272cf7.gif)
   
   
   


-- 
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:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] pissang merged pull request #14571: feature: support geoSVG

Posted by GitBox <gi...@apache.org>.
pissang merged pull request #14571:
URL: https://github.com/apache/echarts/pull/14571


   


-- 
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:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] 100pah edited a comment on pull request #14571: feature: geo component and map series support SVG format source

Posted by GitBox <gi...@apache.org>.
100pah edited a comment on pull request #14571:
URL: https://github.com/apache/echarts/pull/14571#issuecomment-1007530184


   [memento] Some historical discussion about: 
   + A. "all use `itemStyle`" 
       + cons, 
           + If `<line>` uses `itemStyle`, `itemStyle.color` means `stoke`, it might be weird to use `color` and `borderWidth` on line.
   + B. "`<line>` and `<polyline>` use `lineStyle` while others use `itemStyle`".
       + cons, 
           + Some SVG uses `fill` on `<polyline>`, if `<polyline>` uses `lineStyle`, `fill` can not be specified. **[major factor]**
           + not easy to realize this special settings. If users intent to set opacity, it may be wried to set some opacity on `lineStyle` and some on `itemStyle`.
           + most of SVG uses `<path>`, which seems can only use `itemStyle` even it used to draws a line.
      
   
   At present, the implementation is "all use `itemStyle`".
   


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] 100pah commented on pull request #14571: feature: geo component and map series support SVG format source

Posted by GitBox <gi...@apache.org>.
100pah commented on pull request #14571:
URL: https://github.com/apache/echarts/pull/14571#issuecomment-1007530184


   [memento] Some historical discussion about: 
   + A. "all use `itemStyle`" 
       + cons, 
           + If `<line>` uses `itemStyle`, `itemStyle.color` means `stoke`, it might be weird to use `color` and `borderWidth` on line.
   + B. "`<line>` and `<polyline>` use `lineStyle` while others use itemStyle".
       + cons, 
           + Some SVG uses `fill` on `<polyline>`, if `<polyline>` uses `lineStyle`, `fill` can not be specified. **[major factor]**
           + not easy to realize this special settings. If users intent to set opacity, it may be wried to set some opacity on `lineStyle` and some on `itemStyle`.
           + most of SVG uses `<path>`, which seems can only use `itemStyle` even it used to draws a line.
      
   
   At present, the implementation is "all use `itemStyle`".
   


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] echarts-bot[bot] commented on pull request #14571: feature: support geoSVG

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on pull request #14571:
URL: https://github.com/apache/echarts/pull/14571#issuecomment-814577702


   Congratulations! Your PR has been merged. Thanks for your contribution! 👍


-- 
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:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] 100pah commented on pull request #14571: feature: geo component and map series support SVG format source

Posted by GitBox <gi...@apache.org>.
100pah commented on pull request #14571:
URL: https://github.com/apache/echarts/pull/14571#issuecomment-1007530184


   [memento] Some historical discussion about: 
   + A. "all use `itemStyle`" 
       + cons, 
           + If `<line>` uses `itemStyle`, `itemStyle.color` means `stoke`, it might be weird to use `color` and `borderWidth` on line.
   + B. "`<line>` and `<polyline>` use `lineStyle` while others use itemStyle".
       + cons, 
           + Some SVG uses `fill` on `<polyline>`, if `<polyline>` uses `lineStyle`, `fill` can not be specified. **[major factor]**
           + not easy to realize this special settings. If users intent to set opacity, it may be wried to set some opacity on `lineStyle` and some on `itemStyle`.
           + most of SVG uses `<path>`, which seems can only use `itemStyle` even it used to draws a line.
      
   
   At present, the implementation is "all use `itemStyle`".
   


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] echarts-bot[bot] commented on pull request #14571: feature: support geoSVG

Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on pull request #14571:
URL: https://github.com/apache/echarts/pull/14571#issuecomment-811650131


   Thanks for your contribution!
   The community will review it ASAP. In the meanwhile, please checkout [the coding standard](https://echarts.apache.org/en/coding-standard.html) and Wiki about [How to make a pull request](https://github.com/apache/echarts/wiki/How-to-make-a-pull-request).
   
   The pull request is marked to be `PR: author is committer` because you are a committer of this project.


-- 
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:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[GitHub] [echarts] 100pah edited a comment on pull request #14571: feature: geo component and map series support SVG format source

Posted by GitBox <gi...@apache.org>.
100pah edited a comment on pull request #14571:
URL: https://github.com/apache/echarts/pull/14571#issuecomment-1007530184


   [memento] Some historical discussion about: 
   + A. "all use `itemStyle`" 
       + cons, 
           + If `<line>` uses `itemStyle`, `itemStyle.color` means `stoke`, it might be weird to use `color` and `borderWidth` on line.
   + B. "`<line>` and `<polyline>` use `lineStyle` while others use `itemStyle`".
       + cons, 
           + Some SVG uses `fill` on `<polyline>`, if `<polyline>` uses `lineStyle`, `fill` can not be specified. **[major factor]**
           + not easy to realize this special settings. If users intent to set opacity, it may be wried to set some opacity on `lineStyle` and some on `itemStyle`.
           + most of SVG uses `<path>`, which seems can only use `itemStyle` even it used to draws a line.
      
   
   At present, the implementation is "all use `itemStyle`".
   


-- 
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.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org