Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug] 双轴图中, 面积图阻碍柱状图交互导致tooltip表现与3.x不一致 #2030

Closed
skie1997 opened this issue Jan 14, 2024 · 0 comments · Fixed by #2051
Closed

[Bug] 双轴图中, 面积图阻碍柱状图交互导致tooltip表现与3.x不一致 #2030

skie1997 opened this issue Jan 14, 2024 · 0 comments · Fixed by #2051
Assignees
@zamhown
Labels
bug Something isn't working

Comments

@skie1997
Copy link
Contributor

Version

1.8.7

Link to Minimal Reproduction

vscreen

Steps to Reproduce

const spec = {
    "type": "common",
    "region": [
        {
            "clip": true
        }
    ],
    "series": [
        {
            "id": "mainSeries",
            "type": "bar",
            "xField": [
                "79wJY1PEs5AI",
                "30001"
            ],
            "yField": "10011",
            "zIndex": 200,
            "seriesField": "30001",
            "data": {
                "id": "mainSeriesData",
                "values": [
                    {
                        "10001": "Profit",
                        "10003": "0BVoHhqwRdDJ",
                        "10011": 64,
                        "30001": "Profit",
                        "79wJY1PEs5AI": "Labels",
                        "0BVoHhqwRdDJ": 64
                    },
                    {
                        "10001": "Profit",
                        "10003": "0BVoHhqwRdDJ",
                        "10011": 35,
                        "30001": "Profit",
                        "79wJY1PEs5AI": "Tables",
                        "0BVoHhqwRdDJ": 35
                    },
                    {
                        "10001": "Profit",
                        "10003": "0BVoHhqwRdDJ",
                        "10011": 115,
                        "30001": "Profit",
                        "79wJY1PEs5AI": "Storage",
                        "0BVoHhqwRdDJ": 115
                    },
                    {
                        "10001": "Profit",
                        "10003": "0BVoHhqwRdDJ",
                        "10011": 55,
                        "30001": "Profit",
                        "79wJY1PEs5AI": "Furn",
                        "0BVoHhqwRdDJ": 55
                    },
                    {
                        "10001": "Profit",
                        "10003": "0BVoHhqwRdDJ",
                        "10011": 92,
                        "30001": "Profit",
                        "79wJY1PEs5AI": "Art",
                        "0BVoHhqwRdDJ": 92
                    }
                ],
                "fields": {
                    "10001": {
                        "alias": "指标名称"
                    },
                    "10011": {
                        "alias": "指标值(主轴)"
                    },
                    "10012": {
                        "alias": "指标值(次轴)"
                    },
                    "30001": {
                        "alias": "图例项",
                        "domain": [
                            "Profit",
                            "Sales"
                        ],
                        "sortIndex": 0,
                        "lockStatisticsByDomain": false
                    },
                    "79wJY1PEs5AI": {
                        "alias": "Product",
                        "domain": [
                            "Labels",
                            "Tables",
                            "Storage",
                            "Furn",
                            "Art",
                            "Labels",
                            "Tables",
                            "Storage",
                            "Furn",
                            "Art"
                        ],
                        "sortIndex": 0,
                        "lockStatisticsByDomain": true
                    },
                    "0BVoHhqwRdDJ": {
                        "alias": "Profit"
                    },
                    "xjtdvQgEgwt0": {
                        "alias": "Sales"
                    }
                }
            },
            "stackInverse": true,
            "label": {
                "visible": false,
                "offset": 0,
                "overlap": {
                    "hideOnHit": true,
                    "avoidBaseMark": false,
                    "strategy": [
                        {
                            "type": "position",
                            "position": []
                        },
                        {
                            "type": "moveY",
                            "offset": [
                                -10,
                                -9,
                                -8,
                                -7,
                                -6,
                                -5,
                                -4,
                                -3,
                                -2,
                                -1,
                                0,
                                1,
                                2,
                                3,
                                4,
                                5,
                                6,
                                7,
                                8,
                                9,
                                10
                            ]
                        },
                        {
                            "type": "moveX",
                            "offset": [
                                -10,
                                -9,
                                -8,
                                -7,
                                -6,
                                -5,
                                -4,
                                -3,
                                -2,
                                -1,
                                0,
                                1,
                                2,
                                3,
                                4,
                                5,
                                6,
                                7,
                                8,
                                9,
                                10
                            ]
                        }
                    ],
                    "clampForce": true
                },
                "style": {
                    "fontSize": 12,
                    "fontFamily": "D-DIN",
                    "fontWeight": "normal",
                    "zIndex": 400,
                    "lineHeight": "100%",
                    "fill": "rgba(255,255,255,0.5)",
                    "strokeOpacity": 0
                },
                "position": "inside",
                "smartInvert": false
            },
            "line": {
                "style": {
                    "curveType": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            "linear"
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "lineWidth": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            2
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "lineDash": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            [
                                0,
                                0
                            ]
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    }
                }
            },
            "area": {
                "style": {
                    "fillOpacity": 0.35
                },
                "visible": true,
                interactive: false
            },
            "point": {
                "style": {
                    "shape": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            "circle"
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "size": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            5.317361552716548
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "stroke": {
                        "field": "30001",
                        "type": "ordinal",
                        "range": [
                            "rgb(0,110,255)",
                            "rgb(0,229,229)"
                        ],
                        "specified": {}
                    },
                    "strokeOpacity": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            1
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "fillOpacity": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            1
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    }
                },
                "state": {
                    "hover": {
                        "lineWidth": 2,
                        "fillOpacity": 1,
                        "strokeOpacity": 1,
                        "scaleX": 1.5,
                        "scaleY": 1.5
                    }
                }
            },
            "hover": {
                "enable": true
            },
            "select": {
                "enable": true
            },
            "bar": {
                "state": {
                    "hover": {
                        "cursor": "pointer",
                        "fillOpacity": 0.8,
                        "stroke": "#58595B",
                        "lineWidth": 1,
                        "zIndex": 500
                    },
                    "selected": {
                        "cursor": "pointer",
                        "fillOpacity": 1,
                        "stroke": "#58595B",
                        "lineWidth": 1
                    },
                    "selected_reverse": {
                        "fillOpacity": 0.3,
                        "strokeWidth": 0.3
                    }
                },
                "style": {
                    "cornerRadius": 0,
                    "fill": {
                        "gradient": "linear",
                        "x0": 0,
                        "y0": 1,
                        "stops": [
                            {
                                "offset": 0
                            },
                            {
                                "offset": 1
                            }
                        ]
                    },
                    "lineWidth": 2,
                    "stroke": {
                        "gradient": "linear",
                        "x0": 0,
                        "y0": 1,
                        "stops": [
                            {
                                "offset": 0
                            },
                            {
                                "offset": 1
                            }
                        ]
                    }
                }
            },
            "invalidType": "break",
            "seriesMark": "line",
            "region": [
                {
                    "clip": true
                }
            ],
            "background": "rgba(255, 255, 255, 0)",
            "animation": false,
            "barWidth": "60%",
            "animationAppear": {
                "point": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": true
                },
                "line": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": true
                },
                "bar": {
                    "type": "fadeIn",
                    "oneByOne": true,
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": true
                }
            },
            "animationEnter": {
                "point": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                },
                "line": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                },
                "bar": {
                    "type": "fadeIn",
                    "oneByOne": true,
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                }
            },
            "animationUpdate": {
                "point": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                },
                "line": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                },
                "bar": {
                    "type": "fadeIn",
                    "oneByOne": true,
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                }
            }
        },
        {
            "id": "subSeries",
            "type": "area",
            "xField": "79wJY1PEs5AI",
            "yField": "10012",
            "zIndex": 300,
            "seriesField": "30001",
            "data": {
                "id": "subSeriesData",
                "values": [
                    {
                        "10001": "Sales",
                        "10003": "xjtdvQgEgwt0",
                        "10012": 54,
                        "30001": "Sales",
                        "79wJY1PEs5AI": "Labels",
                        "xjtdvQgEgwt0": 54
                    },
                    {
                        "10001": "Sales",
                        "10003": "xjtdvQgEgwt0",
                        "10012": 30,
                        "30001": "Sales",
                        "79wJY1PEs5AI": "Tables",
                        "xjtdvQgEgwt0": 30
                    },
                    {
                        "10001": "Sales",
                        "10003": "xjtdvQgEgwt0",
                        "10012": 60,
                        "30001": "Sales",
                        "79wJY1PEs5AI": "Storage",
                        "xjtdvQgEgwt0": 60
                    },
                    {
                        "10001": "Sales",
                        "10003": "xjtdvQgEgwt0",
                        "10012": 20,
                        "30001": "Sales",
                        "79wJY1PEs5AI": "Furn",
                        "xjtdvQgEgwt0": 20
                    },
                    {
                        "10001": "Sales",
                        "10003": "xjtdvQgEgwt0",
                        "10012": 80,
                        "30001": "Sales",
                        "79wJY1PEs5AI": "Art",
                        "xjtdvQgEgwt0": 80
                    }
                ],
                "fields": {
                    "10001": {
                        "alias": "指标名称"
                    },
                    "10011": {
                        "alias": "指标值(主轴)"
                    },
                    "10012": {
                        "alias": "指标值(次轴)"
                    },
                    "30001": {
                        "alias": "图例项",
                        "domain": [
                            "Profit",
                            "Sales"
                        ],
                        "sortIndex": 0,
                        "lockStatisticsByDomain": true
                    },
                    "79wJY1PEs5AI": {
                        "alias": "Product",
                        "domain": [
                            "Labels",
                            "Tables",
                            "Storage",
                            "Furn",
                            "Art",
                            "Labels",
                            "Tables",
                            "Storage",
                            "Furn",
                            "Art"
                        ],
                        "sortIndex": 0,
                        "lockStatisticsByDomain": true
                    },
                    "0BVoHhqwRdDJ": {
                        "alias": "Profit"
                    },
                    "xjtdvQgEgwt0": {
                        "alias": "Sales"
                    }
                }
            },
            "stack": true,
            "stackInverse": true,
            "label": {
                "visible": false,
                "offset": 0,
                "overlap": {
                    "hideOnHit": true,
                    "avoidBaseMark": false,
                    "strategy": [
                        {
                            "type": "position",
                            "position": [
                                "top",
                                "bottom"
                            ]
                        },
                        {
                            "type": "moveY",
                            "offset": [
                                -5,
                                -4,
                                -3,
                                -2,
                                -1,
                                0,
                                1,
                                2,
                                3,
                                4,
                                5
                            ]
                        },
                        {
                            "type": "moveX",
                            "offset": [
                                -5,
                                -4,
                                -3,
                                -2,
                                -1,
                                0,
                                1,
                                2,
                                3,
                                4,
                                5
                            ]
                        }
                    ],
                    "clampForce": true
                },
                "style": {
                    "fontSize": 12,
                    "fontFamily": "D-DIN",
                    "fontWeight": "normal",
                    "zIndex": 400,
                    "lineHeight": "100%",
                    "fill": "rgba(255,255,255,0.5)",
                    "strokeOpacity": 0
                },
                "position": "center",
                "smartInvert": false
            },
            "line": {
                "style": {
                    "curveType": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            "linear"
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "lineWidth": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            2
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "lineDash": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            [
                                0,
                                0
                            ]
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    }
                }
            },
            "area": {
                "style": {
                    "fillOpacity": 0.35,
                    "lineWidth": 2,
                    "stroke": {
                        "gradient": "linear",
                        "x0": 0,
                        "y0": 1,
                        "stops": [
                            {
                                "offset": 0
                            },
                            {
                                "offset": 1
                            }
                        ]
                    }
                },
                "visible": true
            },
            "point": {
                "style": {
                    "shape": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            "circle"
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "size": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            5.317361552716548
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "stroke": {
                        "field": "30001",
                        "type": "ordinal",
                        "range": [
                            "rgb(0,110,255)",
                            "rgb(0,229,229)"
                        ],
                        "specified": {}
                    },
                    "strokeOpacity": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            1
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    },
                    "fillOpacity": {
                        "type": "ordinal",
                        "field": "30001",
                        "range": [
                            1
                        ],
                        "domain": [
                            "Profit",
                            "Sales"
                        ]
                    }
                },
                "state": {
                    "hover": {
                        "lineWidth": 2,
                        "fillOpacity": 1,
                        "strokeOpacity": 1,
                        "scaleX": 1.5,
                        "scaleY": 1.5
                    }
                }
            },
            "hover": {
                "enable": true
            },
            "select": {
                "enable": true
            },
            "bar": {
                "state": {
                    "hover": {
                        "cursor": "pointer",
                        "fillOpacity": 0.8,
                        "stroke": "#58595B",
                        "lineWidth": 1,
                        "zIndex": 500
                    },
                    "selected": {
                        "cursor": "pointer",
                        "fillOpacity": 1,
                        "stroke": "#58595B",
                        "lineWidth": 1
                    },
                    "selected_reverse": {
                        "fillOpacity": 0.3,
                        "strokeWidth": 0.3
                    }
                }
            },
            "invalidType": "break",
            "seriesMark": "line",
            "region": [
                {
                    "clip": true
                }
            ],
            "background": "rgba(255, 255, 255, 0)",
            "animation": false,
            "animationAppear": {
                "point": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": true
                },
                "line": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": true
                },
                "bar": {
                    "type": "fadeIn",
                    "oneByOne": true,
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": true
                }
            },
            "animationEnter": {
                "point": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                },
                "line": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                },
                "bar": {
                    "type": "fadeIn",
                    "oneByOne": true,
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                }
            },
            "animationUpdate": {
                "point": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                },
                "line": {
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                },
                "bar": {
                    "type": "fadeIn",
                    "oneByOne": true,
                    "duration": 1000,
                    "delayAfter": 4000,
                    "loop": false
                }
            }
        }
    ],
    "padding": {
        "left": 6,
        "right": 6,
        "top": 6,
        "bottom": 6
    },
    "labelLayout": "region",
    "data": [
        {
            "id": "data",
            "values": [
                {
                    "10001": "Profit",
                    "10003": "0BVoHhqwRdDJ",
                    "10011": 64,
                    "30001": "Profit",
                    "79wJY1PEs5AI": "Labels",
                    "0BVoHhqwRdDJ": 64
                },
                {
                    "10001": "Profit",
                    "10003": "0BVoHhqwRdDJ",
                    "10011": 35,
                    "30001": "Profit",
                    "79wJY1PEs5AI": "Tables",
                    "0BVoHhqwRdDJ": 35
                },
                {
                    "10001": "Profit",
                    "10003": "0BVoHhqwRdDJ",
                    "10011": 115,
                    "30001": "Profit",
                    "79wJY1PEs5AI": "Storage",
                    "0BVoHhqwRdDJ": 115
                },
                {
                    "10001": "Profit",
                    "10003": "0BVoHhqwRdDJ",
                    "10011": 55,
                    "30001": "Profit",
                    "79wJY1PEs5AI": "Furn",
                    "0BVoHhqwRdDJ": 55
                },
                {
                    "10001": "Profit",
                    "10003": "0BVoHhqwRdDJ",
                    "10011": 92,
                    "30001": "Profit",
                    "79wJY1PEs5AI": "Art",
                    "0BVoHhqwRdDJ": 92
                },
                {
                    "10001": "Sales",
                    "10003": "xjtdvQgEgwt0",
                    "10012": 54,
                    "30001": "Sales",
                    "79wJY1PEs5AI": "Labels",
                    "xjtdvQgEgwt0": 54
                },
                {
                    "10001": "Sales",
                    "10003": "xjtdvQgEgwt0",
                    "10012": 30,
                    "30001": "Sales",
                    "79wJY1PEs5AI": "Tables",
                    "xjtdvQgEgwt0": 30
                },
                {
                    "10001": "Sales",
                    "10003": "xjtdvQgEgwt0",
                    "10012": 60,
                    "30001": "Sales",
                    "79wJY1PEs5AI": "Storage",
                    "xjtdvQgEgwt0": 60
                },
                {
                    "10001": "Sales",
                    "10003": "xjtdvQgEgwt0",
                    "10012": 20,
                    "30001": "Sales",
                    "79wJY1PEs5AI": "Furn",
                    "xjtdvQgEgwt0": 20
                },
                {
                    "10001": "Sales",
                    "10003": "xjtdvQgEgwt0",
                    "10012": 80,
                    "30001": "Sales",
                    "79wJY1PEs5AI": "Art",
                    "xjtdvQgEgwt0": 80
                }
            ],
            "fields": {
                "10001": {
                    "alias": "指标名称"
                },
                "10011": {
                    "alias": "指标值(主轴)"
                },
                "10012": {
                    "alias": "指标值(次轴)"
                },
                "30001": {
                    "alias": "图例项",
                    "domain": [
                        "Profit",
                        "Sales"
                    ],
                    "sortIndex": 0,
                    "lockStatisticsByDomain": true
                },
                "79wJY1PEs5AI": {
                    "alias": "Product",
                    "domain": [
                        "Labels",
                        "Tables",
                        "Storage",
                        "Furn",
                        "Art",
                        "Labels",
                        "Tables",
                        "Storage",
                        "Furn",
                        "Art"
                    ],
                    "sortIndex": 0,
                    "lockStatisticsByDomain": true
                },
                "0BVoHhqwRdDJ": {
                    "alias": "Profit"
                },
                "xjtdvQgEgwt0": {
                    "alias": "Sales"
                }
            }
        }
    ],
    "stackInverse": true,
    "axes": [
        {
            "id": "dimensionAxis",
            "type": "band",
            "tick": {
                "style": {
                    "strokeOpacity": 0.2
                }
            },
            "grid": {
                "visible": false,
                "style": {
                    "zIndex": 150,
                    "stroke": "#FFFFFF",
                    "lineWidth": 1,
                    "lineDash": []
                }
            },
            "orient": "bottom",
            "visible": true,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "rgba(255,255,255,0.15)"
                }
            },
            "title": {
                "visible": false,
                "space": 5,
                "text": "",
                "style": {
                    "fontSize": 12,
                    "fill": "rgba(255,255,255,0.5)",
                    "fontFamily": "D-DIN",
                    "fontWeight": "normal"
                }
            },
            "sampling": false,
            "zIndex": 200,
            "label": {
                "visible": true,
                "space": 4,
                "style": {
                    "fontSize": 12,
                    "fill": "rgba(255,255,255,0.5)",
                    "angle": 0,
                    "fontFamily": "D-DIN",
                    "fontWeight": "normal",
                    "direction": "horizontal",
                    "maxLineWidth": 174
                },
                "autoHide": true,
                "autoHideMethod": "greedy",
                "flush": true
            },
            "hover": true,
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    },
                    "hover_reverse": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "paddingInner": [
                0.5,
                0.2
            ],
            "paddingOuter": [
                0.05,
                0.05
            ],
            "ticks": true,
            "rangeType": "rough"
        },
        {
            "id": "measureAxisLeft",
            "type": "linear",
            "tick": {
                "size": 4,
                "visible": true
            },
            "niceType": "accurateFirst",
            "zIndex": 200,
            "grid": {
                "visible": true
            },
            "orient": "left",
            "visible": true,
            "domainLine": {
                "visible": false,
                "style": {
                    "lineWidth": 1,
                    "stroke": "#d5d7e2"
                }
            },
            "title": {
                "visible": false,
                "text": "",
                "space": 8,
                "style": {
                    "fontSize": 12,
                    "fill": "rgba(255,255,255,0.5)",
                    "fontFamily": "D-DIN",
                    "fontWeight": "normal"
                }
            },
            "sampling": false,
            "label": {
                "visible": true,
                "space": 6,
                "flush": true,
                "padding": 0,
                "style": {
                    "fontSize": 12,
                    "maxLineWidth": 174,
                    "fill": "rgba(255,255,255,0.5)",
                    "angle": 0,
                    "fontFamily": "D-DIN",
                    "fontWeight": "normal",
                    "dy": -1,
                    "direction": "horizontal"
                },
                "autoHide": true,
                "autoHideMethod": "greedy",
                "rotateAngle": [
                    null
                ],
                "labelOverlap": "custom",
                "tighten": false
            },
            "hover": true,
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    },
                    "hover_reverse": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "expand": {
                "max": 0.016
            },
            "zero": true,
            "nice": true,
            "seriesId": "mainSeries",
            "rangeType": "rough",
            "paddingInner": [
                0.5,
                0.2
            ],
            "paddingOuter": [
                0.05,
                0.05
            ],
            "ticks": true
        },
        {
            "id": "measureAxisRight",
            "type": "linear",
            "tick": {
                "size": 4,
                "visible": true
            },
            "niceType": "accurateFirst",
            "zIndex": 200,
            "grid": false,
            "orient": "right",
            "visible": true,
            "domainLine": {
                "visible": false,
                "style": {
                    "lineWidth": 1,
                    "stroke": "#d5d7e2"
                }
            },
            "title": {
                "visible": false,
                "text": "",
                "space": 8,
                "style": {
                    "fontSize": 12,
                    "fill": "rgba(255,255,255,0.5)",
                    "fontFamily": "D-DIN",
                    "fontWeight": "normal"
                }
            },
            "sampling": false,
            "label": {
                "style": {
                    "visible": false
                }
            },
            "hover": true,
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    },
                    "hover_reverse": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "expand": {
                "max": 0.016
            },
            "zero": true,
            "nice": true,
            "seriesId": "subSeries",
            "sync": {
                "axisId": "measureAxisLeft",
                "zeroAlign": true
            },
            "paddingInner": [
                0.5,
                0.2
            ],
            "paddingOuter": [
                0.05,
                0.05
            ],
            "domain": false,
            "ticks": true
        }
    ],
    "seriesField": "30001",
    "color": {
        "field": "30001",
        "type": "ordinal",
        "range": [
            "rgb(0,110,255)",
            "rgb(0,229,229)"
        ],
        "specified": {}
    },
    "colorGradient": {
        "type": "linear",
        "x0": {
            "field": "30001",
            "type": "ordinal",
            "range": [
                0,
                0
            ]
        },
        "y0": {
            "field": "30001",
            "type": "ordinal",
            "range": [
                1,
                1
            ]
        },
        "x1": {
            "field": "30001",
            "type": "ordinal",
            "range": [
                0.00001,
                0.00001
            ]
        },
        "y1": {
            "field": "30001",
            "type": "ordinal",
            "range": [
                0,
                0
            ]
        },
        "stops": [
            {
                "offset": 0,
                "color": {
                    "field": "30001",
                    "type": "ordinal",
                    "range": [
                        "rgba(0,110,255,0.2)",
                        "rgba(0,229,229,0.2)"
                    ]
                }
            },
            {
                "offset": 1,
                "color": {
                    "field": "30001",
                    "type": "ordinal",
                    "range": [
                        "rgb(0,110,255)",
                        "rgb(0,229,229)"
                    ]
                }
            }
        ]
    },
    "legends": [
        {
            "type": "discrete",
            "visible": false,
            "padding": {
                "left": 10,
                "right": 0,
                "top": 0,
                "bottom": 12
            }
        }
    ],
    "tooltip": {
        "mark": {
            "visible": true
        },
        "style": {
            "panel": {
                "padding": {
                    "top": 5,
                    "bottom": 10,
                    "left": 10,
                    "right": 10
                },
                "backgroundColor": "rgba(47, 59, 82, 0.9)",
                "border": {
                    "color": "#fff",
                    "width": 0,
                    "radius": 4
                },
                "shadow": {
                    "x": 0,
                    "y": 4,
                    "blur": 12,
                    "spread": 0,
                    "color": "rgba(0, 0, 0, 0.2)"
                }
            },
            "titleLabel": {
                "fontSize": 12,
                "fontColor": "#fff",
                "align": "left",
                "lineHeight": 15,
                "fontWeight": "normal",
                "fontFamily": "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol"
            },
            "keyLabel": {
                "fontSize": 10,
                "fontColor": "#fff",
                "align": "left",
                "lineHeight": 15,
                "fontWeight": "normal",
                "fontFamily": "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol"
            },
            "valueLabel": {
                "fontSize": 10,
                "fontColor": "#fff",
                "align": "right",
                "lineHeight": 15,
                "fontWeight": "normal",
                "fontFamily": "PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol"
            },
            "shape": {
                "size": 6,
                "spacing": 6
            },
            "spaceRow": 10
        },
        "dimension": {
            "visible": true
        }
    },
    "crosshair": {
        "xField": {
            "visible": true,
            "line": {
                "style": {
                    "fillOpacity": 0.2
                }
            }
        },
        "gridZIndex": 100,
        "yField": {
            "line": {
                "style": {
                    "fillOpacity": 0.2
                }
            }
        }
    },
    "background": "rgba(0, 0, 0, 0=1)",
    "fillOpacity": {
        "fillOpacity": 1
    },
    "label": {
        "fontWeight": "normal",
        "style": {
            "fontFamily": "D-DIN"
        }
    },
    "axesPadding": true,
    "plotLayout": {
        "clip": false
    },
    "select": {
        "enable": true
    },
    "scales": [
        {
            "id": "gradientFillStop0",
            "type": "ordinal",
            "range": [
                "rgba(0,110,255,0.2)",
                "rgba(0,229,229,0.2)",
                "rgba(46,85,234,0.2)",
                "rgba(184,231,254,0.2)",
                "rgba(0,214,137,0.2)",
                "rgba(183,249,245,0.2)",
                "rgba(251,204,113,0.2)",
                "rgba(244,110,80,0.2)"
            ],
            "domain": [
                {
                    "dataId": "data",
                    "fields": [
                        "30001"
                    ]
                }
            ]
        },
        {
            "id": "gradientFillStop1",
            "type": "ordinal",
            "range": [
                "rgb(0,110,255)",
                "rgb(0,229,229)",
                "rgb(46,85,234)",
                "rgb(184,231,254)",
                "rgb(0,214,137)",
                "rgb(183,249,245)",
                "rgb(251,204,113)",
                "rgb(244,110,80)"
            ],
            "domain": [
                {
                    "dataId": "data",
                    "fields": [
                        "30001"
                    ]
                }
            ]
        },
        {
            "id": "gradientStrokeStop0",
            "type": "ordinal",
            "range": [
                "rgba(51, 139, 255, 0.2)",
                "rgba(25, 255, 255, 0.2)",
                "rgba(92, 123, 239, 0.2)",
                "rgba(234, 248, 255, 0.2)",
                "rgba(10, 255, 167, 0.2)",
                "rgba(230, 253, 252, 0.2)",
                "rgba(252, 222, 163, 0.2)",
                "rgba(247, 150, 128, 0.2)"
            ],
            "domain": [
                {
                    "dataId": "data",
                    "fields": [
                        "30001"
                    ]
                }
            ]
        },
        {
            "id": "gradientStrokeStop1",
            "type": "ordinal",
            "range": [
                "rgba(51, 139, 255, 1)",
                "rgba(25, 255, 255, 1)",
                "rgba(92, 123, 239, 1)",
                "rgba(234, 248, 255, 1)",
                "rgba(10, 255, 167, 1)",
                "rgba(230, 253, 252, 1)",
                "rgba(252, 222, 163, 1)",
                "rgba(247, 150, 128, 1)"
            ],
            "domain": [
                {
                    "dataId": "data",
                    "fields": [
                        "30001"
                    ]
                }
            ]
        },
        {
            "id": "gradientX1",
            "type": "ordinal",
            "range": [
                0.00001,
                0.00001,
                0.00001,
                0.00001,
                0.00001,
                0.00001,
                0.00001,
                0.00001
            ],
            "domain": [
                {
                    "dataId": "data",
                    "fields": [
                        "30001"
                    ]
                }
            ]
        },
        {
            "id": "gradientY1",
            "type": "ordinal",
            "range": [
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0
            ],
            "domain": [
                {
                    "dataId": "data",
                    "fields": [
                        "30001"
                    ]
                }
            ]
        }
    ],
    "hash": "f553e8f39e37aa34b20657d116152d1a",
    "animation": false
}

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

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

Current Behavior

image

Expected Behavior

image

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response
@skie1997 skie1997 added the bug Something isn't working label Jan 14, 2024
@zamhown zamhown mentioned this issue Jan 16, 2024
Merged
20 tasks
@github-actions github-actions bot mentioned this issue Jan 19, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@zamhown zamhown

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix/area interactive VisActor/VChart
2 participants
@zamhown @skie1997