search

apache / echarts

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

SVG 渲染地图鼠标移开后 label 不消失 #8324

Closed petezhang closed 3 years ago

petezhang commented 6 years ago

One-line summary [问题简述]

echarts4.0使用svg模式渲染地图,鼠标悬浮到地图上时显示地区标签名称，但是鼠标移开时显示地区名没有消失;改用canvas模式渲染没有该问题

Version & Environment [版本及环境]

Expected behaviour [期望结果]

页面显示正常

ECharts option [ECharts配置项]

option ={
    "tooltip": {
        "show": false
    },
    "visualMap": {
        "show": true,
        "x": 22,
        "splitNumber": 0,
        "realtime": false,
        "text": ["High", "Low"],
        "inRange": {
            "color": ["#446d00", "#9ad888"]
        },
        "outOfRange": {
            "color": "#eee"
        },
        "calculable": true,
        "itemHeight": 100,
        "min": 2,
        "max": 58339
    },
    "theme": "default",
    "series": [{
        "name": "Group name 639",
        "data": [{
            "key": "Australia",
            "value": 5763,
            "dataIndex": 0,
            "name": "Australia",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Australia",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Canada",
            "value": 9820,
            "dataIndex": 1,
            "name": "Canada",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Canada",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Switzerland",
            "value": 4380,
            "dataIndex": 2,
            "name": "Switzerland",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Switzerland",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "China",
            "value": 2,
            "dataIndex": 3,
            "name": "China",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "China",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Germany",
            "value": 83,
            "dataIndex": 4,
            "name": "Germany",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Germany",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Spain",
            "value": 9,
            "dataIndex": 5,
            "name": "Spain",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Spain",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Finland",
            "value": 559,
            "dataIndex": 6,
            "name": "Finland",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Finland",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "France",
            "value": 227,
            "dataIndex": 7,
            "name": "France",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "France",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "United Kingdom",
            "value": 8428,
            "dataIndex": 8,
            "name": "United Kingdom",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "United Kingdom",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "India",
            "value": 266,
            "dataIndex": 9,
            "name": "India",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "India",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Italy",
            "value": 73,
            "dataIndex": 10,
            "name": "Italy",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Italy",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Japan",
            "value": 609,
            "dataIndex": 11,
            "name": "Japan",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Japan",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "South Korea",
            "value": 4,
            "dataIndex": 12,
            "name": "South Korea",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "South Korea",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Netherlands",
            "value": 3,
            "dataIndex": 13,
            "name": "Netherlands",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Netherlands",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Norway",
            "value": 58339,
            "dataIndex": 14,
            "name": "Norway",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Norway",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Russia",
            "value": 155,
            "dataIndex": 15,
            "name": "Russia",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Russia",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Sweden",
            "value": 6243,
            "dataIndex": 16,
            "name": "Sweden",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Sweden",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "USA",
            "value": 45,
            "dataIndex": 17,
            "name": "USA",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "USA",
            "tooltip": {
                "show": true
            }
        }, {
            "key": "Taiwan",
            "value": 1238,
            "dataIndex": 20,
            "name": "Taiwan",
            "seriesData": {
                "name": "Group name 639",
                "title": "Group name 639"
            },
            "title": "Taiwan",
            "tooltip": {
                "show": true
            }
        }],
        "type": "map",
        "showLegendSymbol": false,
        "roam": true,
        "scaleLimit": {
            "min": 1,
            "max": 3
        },
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#555"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "#555",
                    "fontWeight": "bold"
                }
            }
        },
        "itemStyle": {
            "normal": {
                "show": false,
                "areaColor": "#f5f5f5",
                "label": {
                    "show": false,
                    "textStyle": {
                        "color": "#555"
                    }
                }
            }
        },
        "markPoint": {
            "clickable": true,
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#555"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#555",
                        "fontWeight": "bold"
                    }
                }
            },
            "itemStyle": {
                "normal": {
                    "show": true,
                    "color": "#f5f5f5"
                },
                "emphasis": {
                    "color": "#ccc"
                }
            },
            "data": [{
                "key": "WO",
                "value": 91,
                "dataIndex": 18,
                "name": "WIPO(PCT)",
                "seriesData": {
                    "name": "Group name 639",
                    "title": "Group name 639"
                },
                "title": "WO",
                "label": "WIPO\n91",
                "symbol": "circle",
                "symbolSize": 50,
                "x": 50,
                "y": 40
            }, {
                "key": "EP",
                "value": 186,
                "dataIndex": 19,
                "name": "European Patent Office",
                "seriesData": {
                    "name": "Group name 639",
                    "title": "Group name 639"
                },
                "title": "EP",
                "label": "EPO\n186",
                "symbol": "circle",
                "symbolSize": 50,
                "x": 50,
                "y": 110
            }]
        },
        "mapType": "world"
    }],
    "legend": {
        "formatter": null,
        "selectedMode": true
    }
}

Other comments [其他信息]

image

clfeng commented 5 years ago

请问下当前这个问题是否有临时解决方案

clfeng commented 5 years ago

可以这么临时处理，将label都行显示出来，但是是透明的，悬浮的时候再改成非透明

label: {
                normal: {
                    show: true,
                    color: 'transparent' // 地图改用svg的方式进行渲染的话，会出现鼠标悬浮过去之后label不消失的情况
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
github-actions[bot] commented 3 years ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 3 years ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!