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] DualAxis data domain error #2181

Closed
youngwinds opened this issue Jan 30, 2024 · 2 comments
Closed

[Bug] DualAxis data domain error #2181

youngwinds opened this issue Jan 30, 2024 · 2 comments
Assignees

Comments

@youngwinds
Copy link
Contributor

youngwinds commented Jan 30, 2024

双轴图在横向的时候, 数据顺序不正确.

Image

const spec = {
    "type": "common",
    "series": [
        {
            "id": "mainSeries",
            "type": "bar",
            "direction": "horizontal",
            "yField": [
                "240130175111018",
                "10001"
            ],
            "xField": "10011",
            "zIndex": 200,
            "seriesField": "20001",
            "data": {
                "id": "mainSeriesData",
                "values": [
                    {
                        "10001": "销售额的日均",
                        "10003": "240130175111021",
                        "10011": "16068954.132933617",
                        "20001": "销售额的日均",
                        "240130175111018": "总计",
                        "240130175111021": "16068954.132933617",
                        "combined": true
                    },
                    {
                        "10001": "销售额的日均",
                        "10003": "240130175111021",
                        "10011": "2447301.0141382217",
                        "20001": "销售额的日均",
                        "240130175111018": "华北",
                        "240130175111021": "2447301.0141382217",
                        "combined": false
                    },
                    {
                        "10001": "销售额的日均",
                        "10003": "240130175111021",
                        "10011": "4684506.442247391",
                        "20001": "销售额的日均",
                        "240130175111018": "华东",
                        "240130175111021": "4684506.442247391",
                        "combined": false
                    },
                    {
                        "10001": "销售额的日均",
                        "10003": "240130175111021",
                        "10011": "1303124.5089645386",
                        "20001": "销售额的日均",
                        "240130175111018": "西南",
                        "240130175111021": "1303124.5089645386",
                        "combined": false
                    },
                    {
                        "10001": "销售额的日均",
                        "10003": "240130175111021",
                        "10011": "4137415.0951108932",
                        "20001": "销售额的日均",
                        "240130175111018": "中南",
                        "240130175111021": "4137415.0951108932",
                        "combined": false
                    },
                    {
                        "10001": "销售额的日均",
                        "10003": "240130175111021",
                        "10011": "815039.5979347229",
                        "20001": "销售额的日均",
                        "240130175111018": "西北",
                        "240130175111021": "815039.5979347229",
                        "combined": false
                    },
                    {
                        "10001": "销售额的日均",
                        "10003": "240130175111021",
                        "10011": "2681567.4745378494",
                        "20001": "销售额的日均",
                        "240130175111018": "NE",
                        "240130175111021": "2681567.4745378494",
                        "combined": false
                    }
                ],
                "fields": {
                    "10001": {
                        "alias": "指标名称 "
                    },
                    "10011": {
                        "alias": "指标值(主轴) "
                    },
                    "10012": {
                        "alias": "指标值(次轴) "
                    },
                    "20001": {
                        "alias": "图例项 ",
                        "domain": [
                            "销售额的日均",
                            "数量的日均"
                        ],
                        "sortIndex": 0,
                        "lockStatisticsByDomain": true
                    },
                    "240130175111018": {
                        "alias": "地区",
                        "domain": [
                            "总计",
                            "NE",
                            "华北",
                            "华东",
                            "西北",
                            "西南",
                            "中南"
                        ],
                        "sortIndex": 0,
                        "lockStatisticsByDomain": true
                    },
                    "240130175111021": {
                        "alias": "销售额的日均"
                    },
                    "240130175111024": {
                        "alias": "数量的日均"
                    }
                }
            },
            "stackInverse": true,
            "label": {
                "visible": false,
                "offset": 3,
                "overlap": {
                    "hideOnHit": true,
                    "avoidBaseMark": false,
                    "strategy": [
                        {
                            "type": "position",
                            "position": []
                        }
                    ],
                    "clampForce": true
                },
                "style": {
                    "fontSize": 12,
                    "fontWeight": "normal",
                    "zIndex": 400,
                    "lineHeight": "100%",
                    "fill": "#363839",
                    "stroke": "rgba(255, 255, 255, 0.8)",
                    "lineWidth": 2,
                    "strokeOpacity": 1
                },
                "position": "outside",
                "smartInvert": false
            },
            "line": {
                "style": {
                    "curveType": {
                        "type": "ordinal",
                        "field": "20001",
                        "range": [
                            "linear"
                        ],
                        "domain": [
                            "销售额的日均",
                            "数量的日均"
                        ]
                    },
                    "lineWidth": {
                        "type": "ordinal",
                        "field": "20001",
                        "range": [
                            3
                        ],
                        "domain": [
                            "销售额的日均",
                            "数量的日均"
                        ]
                    },
                    "lineDash": {
                        "type": "ordinal",
                        "field": "20001",
                        "range": [
                            [
                                0,
                                0
                            ]
                        ],
                        "domain": [
                            "销售额的日均",
                            "数量的日均"
                        ]
                    }
                }
            },
            "area": {
                "style": {
                    "fillOpacity": 0.35
                },
                "visible": true
            },
            "point": {
                "style": {
                    "shape": {
                        "type": "ordinal",
                        "field": "20001",
                        "range": [
                            "circle"
                        ],
                        "domain": [
                            "销售额的日均",
                            "数量的日均"
                        ]
                    },
                    "size": {
                        "type": "ordinal",
                        "field": "20001",
                        "range": [
                            7.0898154036220635
                        ],
                        "domain": [
                            "销售额的日均",
                            "数量的日均"
                        ]
                    },
                    "stroke": {
                        "field": "20001",
                        "type": "ordinal",
                        "range": [
                            "#2E62F1",
                            "#4DC36A"
                        ],
                        "specified": {},
                        "domain": [
                            "销售额的日均",
                            "数量的日均"
                        ]
                    },
                    "strokeOpacity": {
                        "type": "ordinal",
                        "field": "20001",
                        "range": [
                            1
                        ],
                        "domain": [
                            "销售额的日均",
                            "数量的日均"
                        ]
                    },
                    "fillOpacity": {
                        "type": "ordinal",
                        "field": "20001",
                        "range": [
                            1
                        ],
                        "domain": [
                            "销售额的日均",
                            "数量的日均"
                        ]
                    }
                },
                "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",
            "markOverlap": true,
            "region": [
                {
                    "clip": true
                }
            ],
            "background": "rgba(255, 255, 255, 0)",
            "animation": false
        },
    ],
    "axes": [
        {
            "id": "dimensionAxis",
            "type": "band",
            "tick": {
                "visible": false
            },
            "grid": {
                "visible": false,
                "style": {
                    "zIndex": 150,
                    "stroke": "#DADCDD",
                    "lineWidth": 1,
                    "lineDash": [
                        4,
                        2
                    ]
                }
            },
            "orient": "left",
            "visible": true,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "#989999"
                }
            },
            "title": {
                "visible": false,
                "space": 5,
                "text": "地区",
                "style": {
                    "fontSize": 12,
                    "fill": "#363839",
                    "fontWeight": "normal"
                }
            },
            "maxHeight": null,
            "autoIndent": false,
            "sampling": false,
            "zIndex": 200,
            "label": {
                "visible": true,
                "space": 4,
                "style": {
                    "fontSize": 12,
                    "fill": "#6F6F6F",
                    "angle": 0,
                    "fontWeight": "normal",
                    "direction": "horizontal",
                    "maxLineWidth": 174
                },
                "autoHide": true,
                "autoHideMethod": "greedy",
                "flush": true,
                "lastVisible": true
            },
            "hover": true,
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    },
                    "hover_reverse": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "paddingInner": [
                0.15,
                0.1
            ],
            "paddingOuter": [
                0.075,
                0.1
            ]
        },
        {
            "id": "measureAxisLeft",
            "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": "bottom",
            "visible": true,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "title": {
                "visible": true,
                "text": "销售额的日均",
                "space": 8,
                "style": {
                    "fontSize": 12,
                    "fill": "#363839",
                    "fontWeight": "normal"
                }
            },
            "autoIndent": false,
            "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"
            },
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    },
                    "hover_reverse": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "zero": true,
            "nice": true,
            "seriesId": "mainSeries"
        },
        {
            "id": "measureAxisRight",
            "type": "linear",
            "tick": {
                "visible": false,
                "tickMode": "d3",
                "style": {
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "niceType": "accurateFirst",
            "zIndex": 200,
            "grid": {
                "visible": false,
                "style": {
                    "zIndex": 150,
                    "stroke": "#DADCDD",
                    "lineWidth": 1,
                    "lineDash": [
                        4,
                        2
                    ]
                }
            },
            "orient": "right",
            "visible": true,
            "domainLine": {
                "visible": true,
                "style": {
                    "lineWidth": 1,
                    "stroke": "rgba(255, 255, 255, 0)"
                }
            },
            "title": {
                "visible": true,
                "text": "数量的日均",
                "space": 8,
                "style": {
                    "fontSize": 12,
                    "fill": "#363839",
                    "fontWeight": "normal"
                }
            },
            "autoIndent": false,
            "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"
            },
            "background": {
                "visible": true,
                "state": {
                    "hover": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    },
                    "hover_reverse": {
                        "fillOpacity": 0.08,
                        "fill": "#141414"
                    }
                }
            },
            "zero": true,
            "nice": true,
            "seriesId": "subSeries",
            "sync": {
                "axisId": "measureAxisLeft",
                "zeroAlign": true
            }
        }
    ],
}

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

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

xile611 commented Jan 31, 2024

@youngwinds 坐标系的原点在画布的左下角,所以Y轴的起点是在底部,如果要实现Y轴起点在顶部的效果,可以配置

inverse: true

@xile611
Copy link
Contributor

xile611 commented Jan 31, 2024

通过配置 direction: 'horizontal'; 解决

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants