apache / echarts

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

svg render bug on label of markline #9452

Closed xuchao008 closed 3 years ago

xuchao008 commented 5 years ago

General Questions

the Echarts svg renderer is different on markline label with canvas renderer.

PLEASE MAKE SURE OF ALL THE FOLLOWING OPTIONS IN REQUIRED FIELDS ARE TICKED (with x)! Otherwise, the issue will not be answered. And think before you tick. :) 请确保以下每项都打上勾了!并且确保都做了这些事哦~ 这将大量简化我们的工作流程,使你的问题更快速得到解答。

In this issue, I have provided information with: 在这个 issue 中我提供了以下信息:

Issue Type

Issue Details

{DESCRIBE_HERE}

Expected Behavior

Label'backgroundColor on markline is effict.

{DESCRIBE_HERE}

Current Behavior

{DESCRIBE_HERE}

Online Example

THIS IS REQUIRED FOR ALL BUG REPORTS AND QUESTIONS!!! 如果是提问或报 bug 一定要提供这一项!

{ADD_LINK_OF_DEMO_HERE}

var dom = document.getElementById('div')
var myE = echarts.init(dom, null)
var option = {
    "ext_js_list": [],
    "title": {
        "y": "",
        "text": "",
        "textStyle": {
            "fontWeight": 700
        },
        "x": "center",
        "show": false
    },
    "color": ["#8AB6D5", "#A5D9FD", "#B2CBE1", "#A6A6A6", "#D3D3D3", "#7D9BBB", "#78BCF9", "#93819A", "#E5EFF6", "#295378"],
    "series": [{
        "markLine": {
            "data": [{
                "label": {
                    "normal": {
                        "padding": [
                            4,
                            4
                        ],
                        "fontStyle": "normal",
                        "fontSize": 12,
                        "backgroundColor": null,
                        "show": true,
                        "color": null,
                        "position": "middle",
                        // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 1, millesimal: false, showText: true, showAxis: false, wrapText: false, isMarkline: true, marklineTitle: '\u5168\u56fd\u603b\u5206'})
                    }
                },
                "lineStyle": {
                    "normal": {
                        "color": "#FD3C3C",
                        "width": "2",
                        "type": "dashed"
                    }
                },
                "name": "",
                "yAxis": 90.55458675373666
            }, {
                "label": {
                    "padding": [
                        4,
                        4
                    ],
                    "fontStyle": "normal",
                    "fontSize": 12,
                    "backgroundColor": "#f66",
                    "show": true,
                    "color": "#000",
                    "position": "start"
                },
                "lineStyle": {
                    "normal": {
                        "color": "#4E6F56",
                        "width": "2",
                        "type": "dashed"
                    }
                },
                "name": "",
                "yAxis": 92.12229838799301
            }],
            "precision": 1,
            "label": {
                "normal": {
                    "fontStyle": "normal",
                    "show": true,
                    "padding": [
                        4,
                        4
                    ],
                    "fontSize": 12,
                    "position": "middle",
                    "formatter": "{a} {b} : {c}"
                }
            }
        },
        "name": "\u603b\u5206",
        "barGap": "10%",
        "itemStyle": {
            "normal": {
                "color": "#7BADD2"
            }
        },
        "barMaxWidth": "100",
        "field_id": "5b8e1d5962e376257b85aa75",
        "tooltip": {
            // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 1, millesimal: false, showText: true, showAxis: true, wrapText: false, isMarkline: false, marklineTitle: ''})
        },
        "label": {
            "normal": {
                "position": "insideBottom",
                "align": "center",
                // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 1, millesimal: false, showText: false, showAxis: false, wrapText: false, isMarkline: false, marklineTitle: ''}), 
                "textBorderWidth": 2,
                "show": true
            }
        },
        "animation": false,
        "data": [
            95.31360112755463,
            78.7878787878788,
            96.53679653679654,
            89.43360403037822,
            86.13636363636364,
            88.52511125238398,
            93.63636363636364,
            94.8051948051948,
            95.6387047296138,
            91.81818181818183
        ],
        "type": "bar",
        "id": "5b8e1d5962e376257b85aa75"
    }],
    "yAxis": [{
        "nameLocation": "middle",
        "axisTick": {
            "show": false
        },
        "scale": true,
        "name": "",
        "show": true,
        "axisLabel": {
            "textStyle": {
                "color": "#787878",
                "fontSize": 10
            },
            // "formatter": this.getNormalFormatterHandler({ttype: 'num', digit: 1, millesimal: false, showText: false, showAxis: false, wrapText: false, isMarkline: false, marklineTitle: ''}), 
            "show": true
        },
        "splitLine": {
            "lineStyle": {
                "color": "#e9e9e9"
            }
        },
        "nameTextStyle": {
            "color": "#787878",
            "fontSize": 10
        },
        "splitNumber": 5,
        "axisLine": {
            "show": false
        },
        "nameGap": 35,
        "type": "value"
    }],
    "tooltip": {
        "axisPointer": {
            "type": "shadow"
        },
        "trigger": "item",
        "extraCssText": "border-radius: 0px;",
        "textStyle": {
            "fontSize": 12
        }
    },
    "visualMap": [],
    "grid": [{
        "top": 40,
        "right": 20,
        "bottom": 20,
        "containLabel": true,
        "left": 20
    }],
    "xAxis": [{
        "nameLocation": "middle",
        "splitNumber": "10",
        "minInterval": 1,
        "name": "",
        "show": true,
        "data": ["\u9752\u5c9b\u5206\u533a", "\u70df\u5a01\u5206\u533a", "\u8c6b\u5357\u5206\u533a", "\u8c6b\u4e2d\u5206\u533a", "\u4e34\u6c82\u5206\u533a", "\u5408\u80a5\u5206\u533a", "\u7696\u5317\u5206\u533a", "\u8c6b\u5317\u5206\u533a", "\u6d4e\u5357\u5206\u533a", "\u5c71\u897f\u5206\u533a"],
        "axisLabel": {
            "textStyle": {
                "color": "#787878",
                "fontSize": 10
            },
            "inside": false,
            "rotate": 0,
            "show": true
        },
        "boundaryGap": ["10%", "10%"],
        "nameTextStyle": {
            "color": "#787878",
            "fontSize": 10
        },
        "nameGap": 35,
        "axisLine": {
            "lineStyle": {
                "color": "#A6A6A6"
            },
            "show": true
        },
        "triggerEvent": true,
        "z": 10,
        "type": "category",
        "axisTick": {
            "show": false
        }
    }],
    "dataZoom": [{
        "end": 100,
        "bottom": "0%",
        "show": false,
        "xAxisIndex": [
            0
        ],
        "start": 0,
        "type": "slider"
    }],
    "toolbox": {
        "feature": {
            "restore": {
                "show": true
            },
            "saveAsImage": {
                "show": true
            },
            "dataView": {
                "readOnly": false,
                "show": true
            },
            "mark": {
                "show": true
            },
            "myDownloadData": {
                "title": "\u4e0b\u8f7d\u6570\u636e",
                "icon": "image://http://echarts.baidu.com/images/favicon.png",
                "onclick": self.downloadData,
                "show": true
            },
            "myShowOption": {
                "title": "\u7f16\u8f91",
                "icon": "image://http://echarts.baidu.com/images/favicon.png",
                "onclick": self.showOption,
                "show": true
            },
            "myGoBack": {
                "title": "\u8fd4\u56de",
                "icon": "image://http://echarts.baidu.com/images/favicon.png",
                "onclick": self.goBack,
                "show": false
            }
        },
        "show": false
    },
    "legend": {
        "textStyle": {
            "padding": 0,
            "lineHeight": 10,
            "fontSize": 10
        },
        "show": false,
        "itemHeight": 12,
        "itemGap": 5,
        "padding": 0,
        "itemWidth": 12,
        "pageTextStyle": {},
        "data": [{
            "name": "\u603b\u5206",
            "icon": "circle"
        }],
        "left": "center"
    }
}
myE.setOption(option)

Topics

Anything Else We Need to Know

svg renderer

image

canvas renderer

image

canvas renderer exist backgroundColor on markline' label, but svg renderer is not.

{DESCRIBE_HERE}

Environment

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.

Ovilia commented 3 years ago

Checked with 5.2.0 and this problem has already been fixed.