apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.48k stars 19.62k forks source link

[Feature] bmap百度地图插件在series实现反向镂空效果(利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层) #17111

Closed IMdaya closed 2 years ago

IMdaya commented 2 years ago

What problem does this feature solve?

百度地图api是可以实现反向遮罩的,如长沙区域内高亮,其他区域遮罩,但在echarts的series里面的自定义功能中,使用renderItem方法去增加覆盖物时,调用的api中,fill没办法填空,默认是黑色的,使得就算我外层镂空用了百度地图api的getBoundary,也没有办法使得内部镂空,需要实现的效果如下链接:https://www.bianchengquan.com/article/270629.html echarts中 renderItem的方法 return { type: 'polygon', shape: { points: echarts.graphic.clipPointsByRect(points, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }) }, // style: api.style() style: api.style({ fill: '#000', stroke: '#b66464', lineWidth: 3, opacity: 0.4 }) }

What does the proposed API look like?

echarts中 renderItem的方法 return { type: 'polygon', shape: { points: echarts.graphic.clipPointsByRect(points, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }) }, // style: api.style() style: api.style({ fill: '', stroke: '#b66464', lineWidth: 3, opacity: 0.4 }) }

fill传入为空时可以跟百度地图的api一样没有颜色

echarts-bot[bot] commented 2 years ago

@IMdaya It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** [Feature] The bmap Baidu map plug-in realizes the reverse hollowing effect in the series (using the collection of administrative division points and the peripheral custom southeast and northwest to form an annular mask layer) **BODY** ### What problem does this feature solve? Baidu map api can implement reverse masking, such as highlighting in Changsha area and masking other areas, but in the custom function in the series of echarts, when using the renderItem method to increase the overlay, in the api called, There is no way for fill to fill in the blanks, the default is black, so even if I use the getBoundary of Baidu map api for the outer hollowing out, there is no way to make the inner hollowing out. The effect that needs to be achieved is as follows: https://www.bianchengquan.com/article/ 270629.html The method of renderItem in echarts ` return { type: 'polygon', shape: { points: echarts.graphic.clipPointsByRect(points, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }) }, // style: api.style() style: api.style({ fill: '#000', stroke: '#b66464', lineWidth: 3, opacity: 0.4 }) }` ### What does the proposed API look like? The method of renderItem in echarts ` return { type: 'polygon', shape: { points: echarts.graphic.clipPointsByRect(points, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }) }, // style: api.style() style: api.style({ fill: '', stroke: '#b66464', lineWidth: 3, opacity: 0.4 }) }` When fill is passed in empty, it can have no color like the api of Baidu map
plainheart commented 2 years ago

Try to set fill to be transparent or rgba(0, 0, 0, 0).

echarts-bot[bot] commented 2 years ago

This issue is closed due to not being active. Please feel free to open it again (for the author) or create a new one and reference this (for others) if you have further questions.