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.67k stars 19.61k forks source link

[Bug] svg注册地图时，svg path 画扇形时，如果起点至终点为逆时针，则会鼠标交互无效 #17601

Open cieme opened 2 years ago

cieme commented 2 years ago

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

const svgStr = <svg viewBox="0 0 1024 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" xml:space="preserve"> <path d="M300.707,39.0422 A40.7058,40.7058 0 0,0 300.707,120.454 " name="uuid"></path><path d="M300.707,120.454 A40.7058,40.7058 0 0,0 300.707,39.0422 " name="uuid"></path></svg> echarts.registerMap('mapName', { svg: svgStr});

const option = { geo: { map:'mapName', // roam: this.canMouve, // 开启鼠标缩放和平移漫游 roam: 'move', // 开启鼠标缩放和平移漫游 move scale // roam: true, // 开启鼠标缩放和平移漫游 move scale selectedMode: false, // selectedMode: 'single', // selectedMode: 'multiple', layoutCenter: ['50%', '50%'], layoutSize: '100%', // 图的大小 scaleLimit: { min: 0.5, max: 10000 }, tooltip: { show: true }, itemStyle: { // color: '#bfbfbf', // borderColor: 'green', // areaColor: 'pink' // borderWidth: 1 }, label: { show: true, position: 'insideTopRight', color: 'rgb(64, 158, 255)', fontSize: 20, formatter: (params) => { if (params) { return '' } return ` } }, emphasis: { itemStyle: { // color: 'red' // borderColor: '#ffdf55', // areaColor: '#ffdf55' // borderWidth: 1 }, label: { show: true, position: 'insideTopRight', color: 'rgb(64, 158, 255)', fontSize: 20, formatter: (params) => { // console.log(params) // https://echarts.apache.org/zh/option.html#series-map.label.formatter if (params) { // return params.data.name return '*' } return*` } } },

      }

    }

Current Behavior

鼠标 放在 右侧半圆即 第二个path上无交互，放在左侧则有交互，但是将 两个path d属性的 a 属性，顺逆时针参数调整，即svg 变更为， const svgStr = <svg viewBox="0 0 1024 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" xml:space="preserve"> <path d="M300.707,39.0422 A40.7058,40.7058 0 0,1 300.707,120.454 " name="uuid"></path><path d="M300.707,120.454 A40.7058,40.7058 0 0,1 300.707,39.0422 " name="uuid"></path></svg> echarts.registerMap('mapName', { svg: svgStr});

Expected Behavior

预期，能正确解析svg 顺时针和逆时针，能顺利交互

Environment

- OS:macOS Monterey
- Browser:Chrome 104.0.5112.101
- Framework:vue@2

Any additional comments?

No response

echarts-bot[bot] commented 2 years ago

@cieme 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** [Bug] When the svg register map, when the svg path draws a fan shape, if the start point to the end point is counterclockwise, the mouse interaction will be invalid **BODY** ### Version 5.3.3 ### Link to Minimal Reproduction _No response_ ### Steps to Reproduce const svgStr = ` ` echarts.registerMap('mapName', { svg: svgStr}); const option = { geo: { map:'mapName', // roam: this.canMouve, // enable mouse zoom and pan roam roam: 'move', // enable mouse zoom and pan roam move scale // roam: true, // enable mouse zoom and pan roam move scale selectedMode: false, // selectedMode: 'single', // selectedMode: 'multiple', layoutCenter: ['50%', '50%'], layoutSize: '100%', // the size of the image scaleLimit: { min: 0.5, max: 10000 }, tooltip: { show: true }, itemStyle: { // color: '#bfbfbf', // borderColor: 'green', // areaColor: 'pink' // borderWidth: 1 }, label: { show: true, position: 'insideTopRight', color: 'rgb(64, 158, 255)', fontSize: 20, formatter: (params) => { if (params) { return '*' } return `*` } }, emphasis: { itemStyle: { // color: 'red' // borderColor: '#ffdf55', // areaColor: '#ffdf55' // borderWidth: 1 }, label: { show: true, position: 'insideTopRight', color: 'rgb(64, 158, 255)', fontSize: 20, formatter: (params) => { // console.log(params) // https://echarts.apache.org/en/option.html#series-map.label.formatter if (params) { // return params.data.name return '*' } return `*` } } }, } } ### Current Behavior The mouse is placed on the right semicircle, that is, there is no interaction on the second path, and there is interaction on the left, but the a attribute of the two path d attributes is adjusted clockwise and counterclockwise, that is, the svg is changed to, const svgStr = ` ` echarts.registerMap('mapName', { svg: svgStr}); ### Expected Behavior Expected, can correctly parse svg clockwise and counterclockwise, can interact smoothly ### Environment ````markdown - OS: macOS Monterey - Browser: Chrome 104.0.5112.101 - Framework:vue@2 ```` ### Any additional comments? _No response_
helgasoft commented 1 year ago

confirmed - no emphasis on right side except over label - Demo Code