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.

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

[Bug] Area Chart, seriesMark="line" not working. #1388

Closed
youngwinds opened this issue Nov 1, 2023 · 0 comments · Fixed by #1391
Closed

[Bug] Area Chart, seriesMark="line" not working. #1388

youngwinds opened this issue Nov 1, 2023 · 0 comments · Fixed by #1391
Assignees
Labels
bp bug Something isn't working

Comments

@youngwinds
Copy link
Contributor

youngwinds commented Nov 1, 2023

seriesMark设置为line, 但取颜色系列时, 依旧使用的是area.

const spec = {
    "type": "area",
    "xField": [
        "231101113104072"
    ],
    "yField": [
        "10002"
    ],
    "direction": "vertical",
    "sortDataByAxis": true,
    "seriesField": "20001",
    "padding": 0,
    "labelLayout": "region",
    "data": [
        {
            "id": "data",
            "values": [
                {
                    "10001": "利润",
                    "10002": "74619.75556704402",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2016-Q1",
                    "231101113104080": "74619.75556704402"
                },
                {
                    "10001": "利润",
                    "10002": "67965.72293605655",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2016-Q2",
                    "231101113104080": "67965.72293605655"
                },
                {
                    "10001": "利润",
                    "10002": "115089.47884425521",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2016-Q3",
                    "231101113104080": "115089.47884425521"
                },
                {
                    "10001": "利润",
                    "10002": "109814.24307518452",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2016-Q4",
                    "231101113104080": "109814.24307518452"
                },
                {
                    "10001": "利润",
                    "10002": "68298.4681391716",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2017-Q1",
                    "231101113104080": "68298.4681391716"
                },
                {
                    "10001": "利润",
                    "10002": "130010.43252191693",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2017-Q2",
                    "231101113104080": "130010.43252191693"
                },
                {
                    "10001": "利润",
                    "10002": "124834.63288863003",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2017-Q3",
                    "231101113104080": "124834.63288863003"
                },
                {
                    "10001": "利润",
                    "10002": "151832.20592651516",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2017-Q4",
                    "231101113104080": "151832.20592651516"
                },
                {
                    "10001": "利润",
                    "10002": "85811.10306631774",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2018-Q1",
                    "231101113104080": "85811.10306631774"
                },
                {
                    "10001": "利润",
                    "10002": "140353.16420313716",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2018-Q2",
                    "231101113104080": "140353.16420313716"
                },
                {
                    "10001": "利润",
                    "10002": "171414.31356932223",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2018-Q3",
                    "231101113104080": "171414.31356932223"
                },
                {
                    "10001": "利润",
                    "10002": "220411.1280696392",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2018-Q4",
                    "231101113104080": "220411.1280696392"
                },
                {
                    "10001": "利润",
                    "10002": "118321.60917430371",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2019-Q1",
                    "231101113104080": "118321.60917430371"
                },
                {
                    "10001": "利润",
                    "10002": "189884.11389011145",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2019-Q2",
                    "231101113104080": "189884.11389011145"
                },
                {
                    "10001": "利润",
                    "10002": "183023.4217978567",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2019-Q3",
                    "231101113104080": "183023.4217978567"
                },
                {
                    "10001": "利润",
                    "10002": "185760.57367435098",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2019-Q4",
                    "231101113104080": "185760.57367435098"
                },
                {
                    "10001": "利润",
                    "10002": "10094.559784412384",
                    "10003": "231101113104080",
                    "20001": "利润",
                    "231101113104072": "2020-Q1",
                    "231101113104080": "10094.559784412384"
                }
            ],
            "fields": {
                "10001": {
                    "alias": "指标名称 "
                },
                "10002": {
                    "alias": "指标值 "
                },
                "20001": {
                    "alias": "图例项 ",
                    "domain": [
                        "利润"
                    ],
                    "sortIndex": 0,
                    "lockStatisticsByDomain": true
                },
                "231101113104072": {
                    "alias": "发货日期",
                    "domain": [
                        "2016-Q1",
                        "2016-Q2",
                        "2016-Q3",
                        "2016-Q4",
                        "2017-Q1",
                        "2017-Q2",
                        "2017-Q3",
                        "2017-Q4",
                        "2018-Q1",
                        "2018-Q2",
                        "2018-Q3",
                        "2018-Q4",
                        "2019-Q1",
                        "2019-Q2",
                        "2019-Q3",
                        "2019-Q4",
                        "2020-Q1"
                    ],
                    "sortIndex": 0,
                    "lockStatisticsByDomain": true
                },
                "231101113104075": {
                    "alias": "销售额"
                },
                "231101113104080": {
                    "alias": "利润"
                }
            }
        }
    ],
    "stack": true,
    "stackInverse": true,
    "axes": [
        {
            "type": "band",
            "tick": {
                "visible": false
            },
            "grid": {
                "visible": false,
                "style": {
                    "zIndex": 150,
                    "stroke": "#DADCDD",
                    "lineWidth": 1,
                    "lineDash": [
                        4,
                        2
                    ]
                }
            },
            "orient": "bottom",
            "visible": false,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "#989999"
                }
            },
            "title": {
                "visible": false,
                "space": 5,
                "text": "",
                "style": {
                    "fontSize": 12,
                    "fill": "#363839",
                    "fontWeight": "normal"
                }
            },
            "sampling": false,
            "zIndex": 200,
            "label": {
                "visible": true,
                "space": 4,
                "style": {
                    "fontSize": 12,
                    "fill": "#6F6F6F",
                    "angle": 0,
                    "fontWeight": "normal",
                    "direction": "horizontal"
                },
                "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.36249999999999993,
            "paddingOuter": 0.175
        },
        {
            "type": "linear",
            "tick": {
                "visible": false,
                "tickMode": "d3",
                "style": {
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "niceType": "accurateFirst",
            "zIndex": 200,
            "grid": {
                "visible": true,
                "style": {
                    "zIndex": 150,
                    "stroke": "#DADCDD",
                    "lineWidth": 1,
                    "lineDash": [
                        4,
                        2
                    ]
                }
            },
            "orient": "left",
            "visible": false,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "title": {
                "visible": false,
                "text": "",
                "space": 8,
                "style": {
                    "fontSize": 12,
                    "fill": "#363839",
                    "fontWeight": "normal"
                }
            },
            "sampling": false,
            "label": {
                "visible": true,
                "space": 6,
                "flush": true,
                "padding": 0,
                "style": {
                    "fontSize": 12,
                    "maxLineWidth": 174,
                    "fill": "#6F6F6F",
                    "angle": 0,
                    "fontWeight": "normal",
                    "dy": -1,
                    "direction": "horizontal"
                },
                "autoHide": true,
                "autoHideMethod": "greedy"
            },
            "hover": true,
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    },
                    "hover_reverse": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "zero": true,
            "nice": true
        }
    ],
    "color": {
        "field": "20001",
        "type": "ordinal",
        "range": [
            "#2E62F1",
            "#4DC36A"
        ],
        "specified": {},
        "domain": [
            "销售额",
            "利润"
        ]
    },
    "legends": [
        {
            "type": "discrete",
            "visible": false
        }
    ],
    "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,
            "fontWeight": "normal",
            "zIndex": 400,
            "fill": "#363839",
            "stroke": "rgba(255, 255, 255, 0.8)",
            "lineWidth": 1,
            "strokeOpacity": 1
        },
        "position": "top",
        "smartInvert": false
    },
    "tooltip": {
        "handler": {}
    },
    "point": {
        "style": {
            "shape": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                    "circle"
                ],
                "domain": [
                    "销售额",
                    "利润"
                ]
            },
            "size": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                    7.0898154036220635
                ],
                "domain": [
                    "销售额",
                    "利润"
                ]
            },
            "fill": {
                "field": "20001",
                "type": "ordinal",
                "range": [
                    "#2E62F1",
                    "#4DC36A"
                ],
                "specified": {},
                "domain": [
                    "销售额",
                    "利润"
                ]
            },
            "stroke": {
                "field": "20001",
                "type": "ordinal",
                "range": [
                    "#2E62F1",
                    "#4DC36A"
                ],
                "specified": {},
                "domain": [
                    "销售额",
                    "利润"
                ]
            },
            "strokeOpacity": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                    0
                ],
                "domain": [
                    "销售额",
                    "利润"
                ]
            },
            "fillOpacity": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                    0
                ],
                "domain": [
                    "销售额",
                    "利润"
                ]
            }
        },
        "state": {
            "hover": {
                "lineWidth": 2,
                "fillOpacity": 1,
                "strokeOpacity": 1,
                "scaleX": 1.5,
                "scaleY": 1.5
            }
        }
    },
    "line": {
        "style": {
            "curveType": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                    "monotoneX"
                ],
                "domain": [
                    "销售额",
                    "利润"
                ]
            },
            "lineWidth": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                    2
                ],
                "domain": [
                    "销售额",
                    "利润"
                ]
            },
            "lineDash": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                    [
                        0,
                        0
                    ]
                ],
                "domain": [
                    "销售额",
                    "利润"
                ]
            }
        }
    },
    "seriesMark": "line",
    "area": {
        "visible": true,
        "style": {
            "fillOpacity": 0.5,
            "fill": {
                "gradient": "linear",
                "x0": 0.5,
                "y0": 0,
                "x1": 0.5,
                "y1": 1,
                "stops": [
                    {
                        "offset": 0,
                        "opacity": 0.7
                    },
                    {
                        "offset": 1,
                        "opacity": 0,
                        "color": "#fff"
                    }
                ]
            }
        }
    },
    "region": [
        {
            "clip": true
        }
    ],
    "background": "rgba(255, 255, 255, 0)",
    "crosshair": {
        "xField": {
            "line": {
                "visible": true,
                "type": "line",
                "width": 3,
                "style": {
                    "stroke": "#D1D5DA",
                    "opacity": 1,
                    "lineDash": [
                        5,
                        5
                    ]
                }
            }
        }
    },
    "invalidType": "break",
    "animation": false,
    "brush": {
        "inBrush": {
            "fillOpacity": 1,
            "stroke": "#58595B",
            "lineWidth": 1,
            "colorAlpha": 1
        },
        "outOfBrush": {
            "colorAlpha": 0.2,
            "fillOpacity": 0.3,
            "strokeWidth": 0.3
        }
    },
    "hash": "3ee1ec9d48354fd418989f2abfdea635"
}

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

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bp bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants