Skip to content

[Bug] click on legend and markline & markarea disapeared #4117

@purpose233

Description

@purpose233

Version

2.0.0

Link to Minimal Reproduction

null

Steps to Reproduce

const spec = {
    "type": "common",
    "seriesField": "color",
    "data": [
        {
            "id": "data-0",
            "values": [
                {
                    "Total GMV": 27799866,
                    "tag": "Total GMV",
                    "time": "2023-04-01",
                    "Total GMV-amount": "27799866",
                    "Total GMV-amountFormatted": "$27,799,866",
                    "Total GMV-currencySymbol": "$",
                    "Total GMV-decimalPlace": "27,799,866",
                    "originData": {
                        "time": "2023-04-01",
                        "value": {
                            "amountFormatted": "$27,799,866",
                            "decimalPlace": "27,799,866",
                            "amount": "27799866",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Total GMV": 26718937,
                    "tag": "Total GMV",
                    "time": "2023-04-02",
                    "Total GMV-amount": "26718937",
                    "Total GMV-amountFormatted": "$26,718,937",
                    "Total GMV-currencySymbol": "$",
                    "Total GMV-decimalPlace": "26,718,937",
                    "originData": {
                        "time": "2023-04-02",
                        "value": {
                            "amountFormatted": "$26,718,937",
                            "decimalPlace": "26,718,937",
                            "amount": "26718937",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Total GMV": 28955951,
                    "tag": "Total GMV",
                    "time": "2023-04-03",
                    "Total GMV-amount": "28955951",
                    "Total GMV-amountFormatted": "$28,955,951",
                    "Total GMV-currencySymbol": "$",
                    "Total GMV-decimalPlace": "28,955,951",
                    "originData": {
                        "time": "2023-04-03",
                        "value": {
                            "amountFormatted": "$28,955,951",
                            "decimalPlace": "28,955,951",
                            "amount": "28955951",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Total GMV": 21373336,
                    "tag": "Total GMV",
                    "time": "2023-04-04",
                    "Total GMV-amount": "21373336",
                    "Total GMV-amountFormatted": "$21,373,336",
                    "Total GMV-currencySymbol": "$",
                    "Total GMV-decimalPlace": "21,373,336",
                    "originData": {
                        "time": "2023-04-04",
                        "value": {
                            "amountFormatted": "$21,373,336",
                            "decimalPlace": "21,373,336",
                            "amount": "21373336",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Total GMV": 28668578,
                    "tag": "Total GMV",
                    "time": "2023-04-05",
                    "Total GMV-amount": "28668578",
                    "Total GMV-amountFormatted": "$28,668,578",
                    "Total GMV-currencySymbol": "$",
                    "Total GMV-decimalPlace": "28,668,578",
                    "originData": {
                        "time": "2023-04-05",
                        "value": {
                            "amountFormatted": "$28,668,578",
                            "decimalPlace": "28,668,578",
                            "amount": "28668578",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Total GMV": 24042718,
                    "tag": "Total GMV",
                    "time": "2023-04-06",
                    "Total GMV-amount": "24042718",
                    "Total GMV-amountFormatted": "$24,042,718",
                    "Total GMV-currencySymbol": "$",
                    "Total GMV-decimalPlace": "24,042,718",
                    "originData": {
                        "time": "2023-04-06",
                        "value": {
                            "amountFormatted": "$24,042,718",
                            "decimalPlace": "24,042,718",
                            "amount": "24042718",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Total GMV": 29640125,
                    "tag": "Total GMV",
                    "time": "2023-04-07",
                    "Total GMV-amount": "29640125",
                    "Total GMV-amountFormatted": "$29,640,125",
                    "Total GMV-currencySymbol": "$",
                    "Total GMV-decimalPlace": "29,640,125",
                    "originData": {
                        "time": "2023-04-07",
                        "value": {
                            "amountFormatted": "$29,640,125",
                            "decimalPlace": "29,640,125",
                            "amount": "29640125",
                            "currencySymbol": "$"
                        }
                    }
                }
            ]
        },
        {
            "id": "data-1",
            "values": [
                {
                    "Self-promotion GMV": 17799866,
                    "tag": "Self-promotion GMV",
                    "time": "2023-04-01",
                    "Self-promotion GMV-amount": "17799866",
                    "Self-promotion GMV-amountFormatted": "$17,799,866",
                    "Self-promotion GMV-currencySymbol": "$",
                    "Self-promotion GMV-decimalPlace": "17,799,866",
                    "originData": {
                        "time": "2023-04-01",
                        "value": {
                            "amountFormatted": "$17,799,866",
                            "decimalPlace": "17,799,866",
                            "amount": "17799866",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Self-promotion GMV": 16718937,
                    "tag": "Self-promotion GMV",
                    "time": "2023-04-02",
                    "Self-promotion GMV-amount": "16718937",
                    "Self-promotion GMV-amountFormatted": "$16,718,937",
                    "Self-promotion GMV-currencySymbol": "$",
                    "Self-promotion GMV-decimalPlace": "16,718,937",
                    "originData": {
                        "time": "2023-04-02",
                        "value": {
                            "amountFormatted": "$16,718,937",
                            "decimalPlace": "16,718,937",
                            "amount": "16718937",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Self-promotion GMV": 18955951,
                    "tag": "Self-promotion GMV",
                    "time": "2023-04-03",
                    "Self-promotion GMV-amount": "18955951",
                    "Self-promotion GMV-amountFormatted": "$18,955,951",
                    "Self-promotion GMV-currencySymbol": "$",
                    "Self-promotion GMV-decimalPlace": "18,955,951",
                    "originData": {
                        "time": "2023-04-03",
                        "value": {
                            "amountFormatted": "$18,955,951",
                            "decimalPlace": "18,955,951",
                            "amount": "18955951",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Self-promotion GMV": 20373336,
                    "tag": "Self-promotion GMV",
                    "time": "2023-04-04",
                    "Self-promotion GMV-amount": "20373336",
                    "Self-promotion GMV-amountFormatted": "$20,373,336",
                    "Self-promotion GMV-currencySymbol": "$",
                    "Self-promotion GMV-decimalPlace": "20,373,336",
                    "originData": {
                        "time": "2023-04-04",
                        "value": {
                            "amountFormatted": "$20,373,336",
                            "decimalPlace": "20,373,336",
                            "amount": "20373336",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Self-promotion GMV": 18668578,
                    "tag": "Self-promotion GMV",
                    "time": "2023-04-05",
                    "Self-promotion GMV-amount": "18668578",
                    "Self-promotion GMV-amountFormatted": "$18,668,578",
                    "Self-promotion GMV-currencySymbol": "$",
                    "Self-promotion GMV-decimalPlace": "18,668,578",
                    "originData": {
                        "time": "2023-04-05",
                        "value": {
                            "amountFormatted": "$18,668,578",
                            "decimalPlace": "18,668,578",
                            "amount": "18668578",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Self-promotion GMV": 14042718,
                    "tag": "Self-promotion GMV",
                    "time": "2023-04-06",
                    "Self-promotion GMV-amount": "14042718",
                    "Self-promotion GMV-amountFormatted": "$14,042,718",
                    "Self-promotion GMV-currencySymbol": "$",
                    "Self-promotion GMV-decimalPlace": "14,042,718",
                    "originData": {
                        "time": "2023-04-06",
                        "value": {
                            "amountFormatted": "$14,042,718",
                            "decimalPlace": "14,042,718",
                            "amount": "14042718",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Self-promotion GMV": 19640125,
                    "tag": "Self-promotion GMV",
                    "time": "2023-04-07",
                    "Self-promotion GMV-amount": "19640125",
                    "Self-promotion GMV-amountFormatted": "$19,640,125",
                    "Self-promotion GMV-currencySymbol": "$",
                    "Self-promotion GMV-decimalPlace": "19,640,125",
                    "originData": {
                        "time": "2023-04-07",
                        "value": {
                            "amountFormatted": "$19,640,125",
                            "decimalPlace": "19,640,125",
                            "amount": "19640125",
                            "currencySymbol": "$"
                        }
                    }
                }
            ]
        },
        {
            "id": "data-2",
            "values": [
                {
                    "Affiliate GMV": 6496393,
                    "tag": "Affiliate GMV",
                    "time": "2023-04-01",
                    "Affiliate GMV-amount": "6496393",
                    "Affiliate GMV-amountFormatted": "$6,496,393",
                    "Affiliate GMV-currencySymbol": "$",
                    "Affiliate GMV-decimalPlace": "6,496,393",
                    "originData": {
                        "time": "2023-04-01",
                        "value": {
                            "amountFormatted": "$6,496,393",
                            "decimalPlace": "6,496,393",
                            "amount": "6496393",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Affiliate GMV": 6797073,
                    "tag": "Affiliate GMV",
                    "time": "2023-04-02",
                    "Affiliate GMV-amount": "6797073",
                    "Affiliate GMV-amountFormatted": "$6,797,073",
                    "Affiliate GMV-currencySymbol": "$",
                    "Affiliate GMV-decimalPlace": "6,797,073",
                    "originData": {
                        "time": "2023-04-02",
                        "value": {
                            "amountFormatted": "$6,797,073",
                            "decimalPlace": "6,797,073",
                            "amount": "6797073",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Affiliate GMV": 6671346,
                    "tag": "Affiliate GMV",
                    "time": "2023-04-03",
                    "Affiliate GMV-amount": "6671346",
                    "Affiliate GMV-amountFormatted": "$6,671,346",
                    "Affiliate GMV-currencySymbol": "$",
                    "Affiliate GMV-decimalPlace": "6,671,346",
                    "originData": {
                        "time": "2023-04-03",
                        "value": {
                            "amountFormatted": "$6,671,346",
                            "decimalPlace": "6,671,346",
                            "amount": "6671346",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Affiliate GMV": 7068594,
                    "tag": "Affiliate GMV",
                    "time": "2023-04-04",
                    "Affiliate GMV-amount": "7068594",
                    "Affiliate GMV-amountFormatted": "$7,068,594",
                    "Affiliate GMV-currencySymbol": "$",
                    "Affiliate GMV-decimalPlace": "7,068,594",
                    "originData": {
                        "time": "2023-04-04",
                        "value": {
                            "amountFormatted": "$7,068,594",
                            "decimalPlace": "7,068,594",
                            "amount": "7068594",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Affiliate GMV": 6715436,
                    "tag": "Affiliate GMV",
                    "time": "2023-04-05",
                    "Affiliate GMV-amount": "6715436",
                    "Affiliate GMV-amountFormatted": "$6,715,436",
                    "Affiliate GMV-currencySymbol": "$",
                    "Affiliate GMV-decimalPlace": "6,715,436",
                    "originData": {
                        "time": "2023-04-05",
                        "value": {
                            "amountFormatted": "$6,715,436",
                            "decimalPlace": "6,715,436",
                            "amount": "6715436",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Affiliate GMV": 6867434,
                    "tag": "Affiliate GMV",
                    "time": "2023-04-06",
                    "Affiliate GMV-amount": "6867434",
                    "Affiliate GMV-amountFormatted": "$6,867,434",
                    "Affiliate GMV-currencySymbol": "$",
                    "Affiliate GMV-decimalPlace": "6,867,434",
                    "originData": {
                        "time": "2023-04-06",
                        "value": {
                            "amountFormatted": "$6,867,434",
                            "decimalPlace": "6,867,434",
                            "amount": "6867434",
                            "currencySymbol": "$"
                        }
                    }
                },
                {
                    "Affiliate GMV": 7165164,
                    "tag": "Affiliate GMV",
                    "time": "2023-04-07",
                    "Affiliate GMV-amount": "7165164",
                    "Affiliate GMV-amountFormatted": "$7,165,164",
                    "Affiliate GMV-currencySymbol": "$",
                    "Affiliate GMV-decimalPlace": "7,165,164",
                    "originData": {
                        "time": "2023-04-07",
                        "value": {
                            "amountFormatted": "$7,165,164",
                            "decimalPlace": "7,165,164",
                            "amount": "7165164",
                            "currencySymbol": "$"
                        }
                    }
                }
            ]
        }
    ],
    "padding": [
        16,
        32,
        10,
        10
    ],
    "tooltip": {
        "style": {
            "shape": {
                "shapeType": "roundLine"
            }
        },
        "mark": {
            "position": "left",
            "content": {}
        },
        "dimension": {
            "position": "rb",
            "content": {}
        }
    },
    "crosshair": {
        "xField": {
            "visible": true,
            "line": {
                "visible": true,
                "type": "line"
            }
        }
    },
    "axes": [
        {
            "id": "leftYAxis",
            "orient": "left",
            "zero": true,
            "label": {
                "space": 12,
                "minGap": 20
            },
            "seriesId": [
                "line-0-Total GMV",
                "line-1-Self-promotion GMV",
                "line-2-Affiliate GMV"
            ],
            "title": {
                "autoRotate": false,
                "position": "start",
                "style": {
                    "dy": -24,
                    "dx": 12,
                    "textAlign": "left"
                },
                "visible": false
            }
        },
        {
            "orient": "bottom",
            "type": "band",
            "trimPadding": true,
            "label": {
                "visible": true,
                "space": 8,
                "minGap": 40,
                "style": {
                    "maxLineWidth": 94
                }
            }
        }
    ],
    "series": [
        {
            "type": "line",
            "id": "line-0-Total GMV",
            "dataId": "data-0",
            "name": "Total GMV",
            "seriesField": "tag",
            "xField": "time",
            "yField": "Total GMV",
            "stack": false,
            "activePoint": true,
            "point": {
                "visible": false,
                "style": {
                    "pickable": false
                },
                "state": {
                    "dimension_hover": {
                        "stroke": "#fff",
                        "shadowColor": "rgba(0, 0, 0, 0.08)",
                        "shadowOffsetY": 2,
                        "lineWidth": 2,
                        "size": 10
                    }
                }
            },
            "line": {
                "state": {
                    "hover_reverse": {
                        "style": {
                            "strokeOpacity": 0.3
                        }
                    },
                    "__commerce-materials_legend_hover_reverse": {
                        "style": {
                            "strokeOpacity": 0.3
                        }
                    }
                }
            }
        },
        {
            "type": "line",
            "id": "line-1-Self-promotion GMV",
            "dataId": "data-1",
            "name": "Self-promotion GMV",
            "seriesField": "tag",
            "xField": "time",
            "yField": "Self-promotion GMV",
            "stack": false,
            "activePoint": true,
            "point": {
                "visible": false,
                "style": {
                    "pickable": false
                },
                "state": {
                    "dimension_hover": {
                        "stroke": "#fff",
                        "shadowColor": "rgba(0, 0, 0, 0.08)",
                        "shadowOffsetY": 2,
                        "lineWidth": 2,
                        "size": 10
                    }
                }
            },
            "line": {
                "state": {
                    "hover_reverse": {
                        "style": {
                            "strokeOpacity": 0.3
                        }
                    },
                    "__commerce-materials_legend_hover_reverse": {
                        "style": {
                            "strokeOpacity": 0.3
                        }
                    }
                }
            }
        },
        {
            "type": "line",
            "id": "line-2-Affiliate GMV",
            "dataId": "data-2",
            "name": "Affiliate GMV",
            "seriesField": "tag",
            "xField": "time",
            "yField": "Affiliate GMV",
            "stack": false,
            "activePoint": true,
            "point": {
                "visible": false,
                "style": {
                    "pickable": false
                },
                "state": {
                    "dimension_hover": {
                        "stroke": "#fff",
                        "shadowColor": "rgba(0, 0, 0, 0.08)",
                        "shadowOffsetY": 2,
                        "lineWidth": 2,
                        "size": 10
                    }
                }
            },
            "line": {
                "state": {
                    "hover_reverse": {
                        "style": {
                            "strokeOpacity": 0.3
                        }
                    },
                    "__commerce-materials_legend_hover_reverse": {
                        "style": {
                            "strokeOpacity": 0.3
                        }
                    }
                }
            }
        }
    ],
    "legends": {
        "id": "@commerce-materials/trend__legend",
        "type": "discrete",
        "orient": "top",
        "position": "start",
        "item": {
            "shape": {
                "style": {
                    "symbolType": "roundLine"
                }
            }
        }
    },
    "markLine": [
        {
            "y": 15000000
        }
    ],
    "markArea": [
        {
            "x": "2023-04-01",
            "x1": "2023-04-03",
            "label": {
                "text": "Event name"
            }
        },
        {
            "x": "2023-04-04",
            "x1": "2023-04-05",
            "label": {
                "type": "rich",
                "text": [
                    {
                        "text": "Long long long long event name"
                    }
                ],
                "style": {
                    "maxWidth": 100
                }
            }
        }
    ],
    "markPoint": [
        {
            "x": "2023-04-03",
            "y": 6671346,
            "itemContent": {
                "type": "text",
                "offsetX": 0,
                "offsetY": 0,
                "position": "insideTop",
                "text": {
                    "text": "$6,671,346",
                    "labelBackground": {
                        "visible": false
                    },
                    "style": {
                        "textAlign": "center",
                        "fontSize": 14,
                        "lineHeight": 1,
                        "dx": -16,
                        "dy": -12,
                        "fill": "rgba(0, 0, 0, 0.92)"
                    }
                }
            },
            "targetSymbol": {
                "visible": true,
                "style": {
                    "size": 12,
                    "symbolType": "circle",
                    "stroke": "#fff",
                    "lineWidth": 2,
                    "fill": "#306BCF"
                }
            },
            "itemLine": {
                "visible": false
            }
        }
    ],
    "color": {
        "type": "ordinal",
        "domain": [
            "Total GMV",
            "Self-promotion GMV",
            "Affiliate GMV"
        ],
        "range": [
            "#02A5A0",
            "#306BCF",
            "#9583FF",
            "#507700",
            "#DD68B9",
            "#8D630E",
            "#DF7256",
            "#017976",
            "#6091FF",
            "#616B94"
        ]
    }
}

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Current Behavior

Image

点击第一个图例之后,出现报错,同时 markline & markarea 消失。

Expected Behavior

markline & markarea 正常显示

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions