apache / apache/echarts

[Bug] The legend is blurry in svg rendering mode

Open
#19,583 8 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.4.3

### Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=bar-simple&renderer=svg&code=PYBwLglsB2AEC8sDeAoW7YCIDGwA2wATpgFywDaaG1mAxAKwCMAggGwCirmANFdenXYAOegBEAnADFMfWAF1eNMMHyQQpZLOoBnABbAA7mQBmAQzzaAprIC-ijJjyWA5pegATDan4OARsDBlAFsNAAZ7H0wIXGgNTEJgAFcPACVLbDAeLQcIMEsggHUIdzBdDUYAFgj-KLyggAlLCGddTLJK6ppc_IBxU3UyACYq22rMZ0Jir2yBZQHYcJmsf0DgELIAZkWfASdjNthGQc6HSZaD4ZOBGLBTCGgAGVNfSzwNMEJE62o7WUwAD2Y_wg2mmOywYAAniBLHEAG7mL5ZH5jSFAkFgnaYKEwuLYUx5ZxESHIrHuAmmDSUcE0QCeGYA7t0YpJpWAZg2Z_Dkoz-VkmllBZGpO28LKw0FMQVhZEwgHBjQDgFoxFUqmVcajipctTMRVTRtLdsABrOLKW5vHUOPDPV6Y0UOPSGDRmCzfUW_W2YXxaoolMrtVjmgTk25UpbgkW2yLiyVxBkq0OizAIvBIsihAB09AA7KF6PGfG6I-hw4WHFGNZg2RyS1gkymFmmKkI8_wbM2ueCCz5i-DMGW4vL2QGIdDy57tc3MHrTIbjQFzFWsZaXm8yN2E_aDI7zFZm52aR6vcVSuV_ROg5TBc3qGvC72JeXYwvb7WNemKoNxLnq3vbTeI3fo2lSshx7F8wgzQYrwwVtbXbHYYIwLkbCAA

### Steps to Reproduce

option = {
"color": [
"#51A6E6",
"#E85D9F"
],
"tooltip": {
show: false
},
"legend": {
"bottom": 0,
"icon": "roundRect",
"itemWidth": 14,
"itemHeight": 14,
"itemGap": 24,
},
"grid": {
"top": 0,
"bottom": 30,
"left": 12,
"right": 24,
"containLabel": true
},
"xAxis": {
"type": "value",
},
"yAxis": {
"type": "category",
"data": [
"项目1",
"项目2",
]
},
"series": [
{
"name": "指标1111111",
"type": "bar",
"stack": "total",
"label": {
"show": false
},
"barWidth": 16,
"data": [
{
"name": "项目1",
"value": 0.5705
},
{
"name": "项目2",
"value": 0.48
}
]
},
{
"name": "指标2",
"type": "bar",
"stack": "total",
"label": {
"show": false
},
"barWidth": 16,
"data": [
{
"name": "项目1",
"value": 0.4295
},
{
"name": "项目2",
"value": 0.52
}
]
}
]
}

### Current Behavior

![image](https://github.com/apache/echarts/assets/46626842/a9b435ee-a311-43f8-ad96-8f14e43bf84a)
When the legend renders the path tag with transform="translate(x y)", if x or y is not an integer, it will be blurred in the corresponding direction. The reason for the blur is: when there are decimals, part of the graphic may be located in one pixel. in the middle, causing the browser to anti-alias these boundaries, resulting in blurring. The reason why this value is a decimal is that when rendering in zrender, the entire data is not placed in the round() method.
![image](https://github.com/apache/echarts/assets/46626842/9236ee93-02e1-4d7a-9bd8-421c17763339)
Should this code be: `translate(${round(m[4] * mul / mul)} ${round(m[5] * mul / mul)})` Put the entire `m[4] * mul / mul` into the round() method

### Expected Behavior

![image](https://github.com/apache/echarts/assets/46626842/33e00c5d-c420-4db5-8f67-98b142f4e1ea)
The desired behavior is that these legends are clear and not blurry.

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

Should that part of the zrender source code be modified? If it cannot be modified, what is the reason?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.