地图和geo如何同步缩放

ColinCLL commented 7 years ago

One-line summary [问题简述]

我一共用了两层地图，一层是series里面，一层是geo里面，使用raom缩放只能缩放最外面一层不能同步缩放。

Version & Environment [版本及环境]

ECharts version [ECharts 版本]:
Browser version [浏览器类型和版本]:
OS Version [操作系统类型和版本]:

Expected behaviour [期望结果]

同步缩放两层地图

ECharts option [ECharts配置项]


option = {"color":["#9d70e3","#9d70e3"],"textStyle":{"fontFamily":"Microsoft YaHei","fontSize":12,"fontStyle":"normal","fontWeight":"normal"},"animation":"auto","animationDuration":1000,"animationDurationUpdate":300,"animationEasing":"exponentialOut","animationEasingUpdate":"cubicOut","animationThreshold":2000,"progressiveThreshold":3000,"progressive":400,"hoverLayerThreshold":3000,"useUTC":false,"title":[{"text":"地图","subtext":"副标题","left":"center","zlevel":0,"z":6,"show":true,"target":"blank","subtarget":"blank","top":0,"backgroundColor":"rgba(0,0,0,0)","borderColor":"#ccc","borderWidth":0,"padding":5,"itemGap":10,"textStyle":{"fontSize":18,"fontWeight":"bolder","color":"#333"},"subtextStyle":{"color":"#aaa"},"right":null}],"geo":[{"map":"china","zoom":1,"roam":true,"label":{"normal":{"show":false,"textStyle":{"color":"#000"}},"emphasis":{"show":false,"textStyle":{"color":"rgb(100,0,0)"}}},"itemStyle":{"normal":{"label":{"show":true},"borderColor":"#80a9c3","areaStyle":{"color":"fff"},"borderWidth":0.5,"color":"#eee"},"emphasis":{"label":{"show":false},"color":"rgba(255,215,0,0.8)"}},"zlevel":0,"z":0,"show":true,"left":"center","top":"center","aspectScale":0.75,"silent":false,"boundingCoords":null,"center":null,"scaleLimit":null,"regions":[{"name":"台湾"},{"name":"河北"},{"name":"山西"},{"name":"内蒙古"},{"name":"辽宁"},{"name":"吉林"},{"name":"黑龙江"},{"name":"江苏"},{"name":"浙江"},{"name":"安徽"},{"name":"福建"},{"name":"江西"},{"name":"山东"},{"name":"河南"},{"name":"湖北"},{"name":"湖南"},{"name":"广东"},{"name":"广西"},{"name":"海南"},{"name":"四川"},{"name":"贵州"},{"name":"云南"},{"name":"西藏"},{"name":"陕西"},{"name":"甘肃"},{"name":"青海"},{"name":"宁夏"},{"name":"新疆"},{"name":"北京"},{"name":"天津"},{"name":"上海"},{"name":"重庆"},{"name":"香港"},{"name":"澳门"}]}],"axisPointer":[{"show":"auto","triggerOn":null,"zlevel":0,"z":50,"type":"line","snap":false,"triggerTooltip":true,"value":null,"status":null,"link":[],"animation":null,"animationDurationUpdate":200,"lineStyle":{"color":"#aaa","width":1,"type":"solid"},"shadowStyle":{"color":"rgba(150,150,150,0.3)"},"label":{"show":true,"formatter":null,"precision":"auto","margin":3,"textStyle":{"color":"#fff"},"padding":[5,7,5,7],"backgroundColor":"auto","borderColor":null,"borderWidth":0,"shadowBlur":3,"shadowColor":"#aaa"},"handle":{"show":false,"icon":"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z","size":45,"margin":50,"color":"#333","shadowBlur":3,"shadowColor":"#aaa","shadowOffsetX":0,"shadowOffsetY":2,"throttle":40}}],"tooltip":[{"detail":true,"zlevel":0,"z":8,"show":true,"showContent":true,"trigger":"item","triggerOn":"mousemove|click","alwaysShowContent":false,"displayMode":"single","confine":false,"showDelay":0,"hideDelay":100,"transitionDuration":0.4,"enterable":false,"backgroundColor":"rgba(50,50,50,0.7)","borderColor":"#333","borderRadius":4,"borderWidth":0,"padding":5,"extraCssText":"","axisPointer":{"type":"line","axis":"auto","animation":"auto","animationDurationUpdate":200,"animationEasingUpdate":"exponentialOut","crossStyle":{"color":"#999","width":1,"type":"dashed","textStyle":{}}},"textStyle":{"color":"#fff","fontSize":14}}],"series":[{"name":"流入","type":"map","mapType":"china","showLegendSymbol":false,"itemStyle":{"normal":{"areaColor":"#ecf9ff","borderColor":"#8fc3e8","borderWidth":0.5},"emphasis":{"label":null,"areaColor":"#ff9a4a"}},"label":{"normal":{"show":false,"textStyle":{"color":"#000"}},"emphasis":{"show":true,"textStyle":{"color":"rgb(100,0,0)"}}},"data":[{"name":"四川","value":1000},{"name":"西藏","value":300},{"name":"广西","value":900},{"name":"青海","value":300},{"name":"甘肃","value":500},{"name":"陕西","value":500},{"name":"河北","value":850},{"name":"北京","value":610},{"name":"河南","value":530},{"name":"海南","value":950},{"name":"云南","value":550},{"name":"北海","value":50},{"name":"海口","value":50},{"name":"昆明","value":50},{"name":"台湾"},{"name":"山西"},{"name":"内蒙古"},{"name":"辽宁"},{"name":"吉林"},{"name":"黑龙江"},{"name":"江苏"},{"name":"浙江"},{"name":"安徽"},{"name":"福建"},{"name":"江西"},{"name":"山东"},{"name":"湖北"},{"name":"湖南"},{"name":"广东"},{"name":"贵州"},{"name":"宁夏"},{"name":"新疆"},{"name":"天津"},{"name":"上海"},{"name":"重庆"},{"name":"香港"},{"name":"澳门"}],"zoom":1,"roam":true,"map":"china","zlevel":0,"z":2,"coordinateSystem":"geo","left":"center","top":"center","aspectScale":0.75,"dataRangeHoverLink":true,"boundingCoords":null,"center":null,"scaleLimit":null},{"name":"流出","type":"map","mapType":"china","showLegendSymbol":false,"itemStyle":{"normal":{"areaColor":"#ecf9ff","borderColor":"#8fc3e8","borderWidth":0.5},"emphasis":{"label":null,"areaColor":"#ff9a4a"}},"label":{"normal":{"show":false,"textStyle":{"color":"#000"}},"emphasis":{"show":true,"textStyle":{"color":"rgb(100,0,0)"}}},"data":[{"name":"四川","value":500},{"name":"西藏","value":700},{"name":"广西","value":50},{"name":"青海","value":50},{"name":"甘肃","value":1000},{"name":"陕西","value":500},{"name":"河北","value":750},{"name":"北京","value":558},{"name":"河南","value":750},{"name":"海南","value":950},{"name":"云南","value":950},{"name":"北海","value":50},{"name":"海口","value":50},{"name":"昆明","value":50},{"name":"台湾"},{"name":"山西"},{"name":"内蒙古"},{"name":"辽宁"},{"name":"吉林"},{"name":"黑龙江"},{"name":"江苏"},{"name":"浙江"},{"name":"安徽"},{"name":"福建"},{"name":"江西"},{"name":"山东"},{"name":"湖北"},{"name":"湖南"},{"name":"广东"},{"name":"贵州"},{"name":"宁夏"},{"name":"新疆"},{"name":"天津"},{"name":"上海"},{"name":"重庆"},{"name":"香港"},{"name":"澳门"}],"zoom":1,"roam":true,"map":"china","zlevel":0,"z":2,"coordinateSystem":"geo","left":"center","top":"center","aspectScale":0.75,"dataRangeHoverLink":true,"boundingCoords":null,"center":null,"scaleLimit":null}],"markArea":[{"zlevel":0,"z":1,"tooltip":{"trigger":"item"},"animation":false,"label":{"normal":{"show":true,"position":"top"},"emphasis":{"show":true,"position":"top"}},"itemStyle":{"normal":{"borderWidth":0}}}],"markLine":[{"zlevel":0,"z":5,"symbol":["circle","arrow"],"symbolSize":[8,16],"precision":2,"tooltip":{"trigger":"item"},"label":{"normal":{"show":true,"position":"end"},"emphasis":{"show":true}},"lineStyle":{"normal":{"type":"dashed"},"emphasis":{"width":3}},"animationEasing":"linear"}],"markPoint":[{"zlevel":0,"z":5,"symbol":"pin","symbolSize":50,"tooltip":{"trigger":"item"},"label":{"normal":{"show":true,"position":"inside"},"emphasis":{"show":true}},"itemStyle":{"normal":{"borderWidth":2}}}],"marker":[],"visualMap":[{"min":0,"max":1900,"left":"left","top":"bottom","text":["高","低"],"calculable":true,"inRange":{"color":["#ddf5ff","#5fb0ff"]},"show":true,"zlevel":0,"z":4,"seriesIndex":[0,1],"dimension":null,"outOfRange":null,"right":null,"bottom":null,"itemWidth":null,"itemHeight":null,"inverse":false,"orient":"vertical","backgroundColor":"rgba(0,0,0,0)","borderColor":"#ccc","contentColor":"#5793f3","inactiveColor":"#aaa","borderWidth":0,"padding":5,"textGap":10,"precision":0,"color":null,"formatter":null,"textStyle":{"color":"#333"},"align":"auto","range":[0,1900],"realtime":true,"hoverLink":true,"hoverLinkDataSize":null,"hoverLinkOnHandle":true,"target":{"inRange":{"color":["#ddf5ff","#5fb0ff"]},"outOfRange":{"color":["rgba(0,0,0,0)"],"opacity":[0,0]}},"controller":{"inRange":{"color":["#ddf5ff","#5fb0ff"],"symbol":["roundRect"],"symbolSize":[20,20]},"outOfRange":{"color":["#aaa"],"symbol":["roundRect"],"symbolSize":[20,20]}}}],"dataZoom":[],"brush":[],"legend":[{"orient":"vertical","top":"bottom","left":"right","data":["流入","流出"],"zlevel":0,"z":4,"show":true,"align":"auto","backgroundColor":"rgba(0,0,0,0)","borderColor":"#ccc","borderWidth":0,"padding":5,"itemGap":10,"itemWidth":25,"itemHeight":14,"inactiveColor":"#ccc","textStyle":{"color":"#333"},"selectedMode":true,"tooltip":{"show":false},"right":null,"bottom":null,"selected":{}}]}

### Other comments [其他信息]
<!-- For example: Screenshot or Online demo -->
<!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->

jarben commented 7 years ago

I'm also struggling to synchronize two map layers, any solution to this?

@ColinCLL , your provided sample shows Errors exist in code, is it possible to provide a demo that can pasted to the https://ecomfe.github.io/echarts-examples editor?

jarben commented 7 years ago

I was actually able to achieve this by setting geoIndex:0, however, I can't use itemStyle for data items if this is linked. This is potentially related to:

"When geoIndex specified, series-map.map other style configurations like series-map.itemStyle will not work, but cooresponding configurations in geo component will be used."

I understand why geo is used for shared styles but shouldn't the data style have a priority?

ColinCLL commented 7 years ago

@jarben Did you want this example ?