[Bug] 瀑布图 负值柱子方向异常

[lym-009]

Version

2.1.1

Link to Minimal Reproduction

https://www.visactor.com/vchart/chartPage?specId=8198614942&timestamp=1783066440104&version=2.0.19&theme=light

Steps to Reproduce

const spec = {
"hover": {
"dimension": {
"enable": true
}
},
"__isSeriesWithinPointsSpec": true,
"__innerSpecType": "IWaterfallSpec",
"__configChartType": "waterfall",
"type": "waterfall",
"data": [
{
"id": "allData",
"values": [
{
"group": "_3xj1kmdtu",
"groupAlias": "正值",
"index": 0,
"name": "Nomination Estimate",
"labelValue": "-4993",
"seriesIndex": 0,
"dataIndex": 0,
"value": -4993,
"valueAxis": "value0",
"waterfall-value0": -4993,
"unStackIndex": "0"
},
{
"group": "_3xj1kmdtu",
"groupAlias": "正值",
"index": 1,
"name": "△ Nomination",
"labelValue": "482",
"seriesIndex": 0,
"dataIndex": 1,
"value": 482,
"valueAxis": "value0",
"waterfall-value0": 482,
"unStackIndex": "1"
},
{
"group": "_3xj1kmdtu-negative",
"groupAlias": "负值",
"index": 2,
"name": "△ P-data",
"labelValue": "-34",
"seriesIndex": 0,
"dataIndex": 2,
"value": -34,
"valueAxis": "value0",
"waterfall-value0": -34,
"originGroup": "_3xj1kmdtu",
"isNegative": true,
"unStackIndex": "2"
},
{
"group": "_3xj1kmdtu",
"groupAlias": "正值",
"index": 3,
"name": "△ ECR",
"labelValue": "20",
"seriesIndex": 0,
"dataIndex": 3,
"value": 20,
"valueAxis": "value0",
"waterfall-value0": 20,
"unStackIndex": "3"
},
{
"group": "_3xj1kmdtu-total",
"groupAlias": "小计",
"index": 3,
"name": "小计",
"labelValue": "5461",
"seriesIndex": 0,
"dataIndex": 3,
"value": 5461,
"valueAxis": "value0",
"waterfall-value0": 5461,
"isTotal": true,
"originGroup": "_3xj1kmdtu",
"unStackIndex": "4"
}
],
"fields": {
"group": {
"domain": [
"_3xj1kmdtu",
"_3xj1kmdtu-negative",
"_3xj1kmdtu-total"
]
}
}
}
],
"xField": "unStackIndex",
"yField": "value",
"seriesField": "group",
"stack": false,
"total": {
// "type": "custom",
"tagField": "isTotal"
},
"stackLabel": {
"visible": false
},
"legends": {
"orient": "bottom",
"position": "middle",
"noOuterPadding": false,
"item": {
"spaceCol": 30,
"spaceRow": 8,
"background": {
"visible": false,
"style": {
"cursor": "default"
},
"state": {
"hover": {
"cursor": "default"
},
"unSelected": {
"cursor": "default"
}
}
},
"label": {
"style": {
"cursor": "default",
"fill": "rgba(46, 47, 50, 0.8)"
},
"state": {
"selectedHover": {
"opacity": 1
},
"unSelected": {
"fill": "rgb(187, 191, 196)",
"fillOpacity": 1,
"cursor": "default"
},
"hover": {
"cursor": "default"
}
}
},
"shape": {
"space": 16,
"style": {
"symbolType": "square",
"cursor": "default",
"size": 10,
"outerBorder": {
"stroke": "#dee0e3",
"lineWidth": 1,
"distance": 1.5
}
},
"state": {
"selectedHover": {
"opacity": 1
},
"unSelected": {
"fill": "rgb(187, 191, 196)",
"fillOpacity": 1,
"cursor": "default"
},
"hover": {
"cursor": "default"
},
"unSelectedHover": {}
}
},
"padding": 0,
"maxWidth": "100%",
"value": {
"style": {
"cursor": "default"
},
"state": {
"hover": {
"cursor": "default"
},
"unSelected": {
"cursor": "default"
}
}
}
},
"pager": {
"textStyle": {
"fillOpacity": 0,
"fontSize": 1
},
"offsetY": -1,
"handler": {
"style": {
"size": 10,
"fillOpacity": 1,
"fill": "#646a73"
},
"state": {
"hover": {
"fill": "rgba(31,35,41,0.1)",
"cursor": "pointer"
},
"disable": {
"fill": "#bbbfc4"
}
},
"preShape": "M10.8536 8.14645C10.6583 8.34171 10.3417 8.34171 10.1464 8.14645L6 4L1.85355 8.14645C1.65829 8.34171 1.34171 8.34171 1.14645 8.14645C0.951185 7.95119 0.951185 7.6346 1.14645 7.43934L5.29289 3.29289C5.68342 2.90237 6.31658 2.90237 6.70711 3.29289L10.8536 7.43934C11.0488 7.6346 11.0488 7.95119 10.8536 8.14645Z",
"nextShape": "M1.14645 3.85355C1.34171 3.65829 1.65829 3.65829 1.85355 3.85355L6 8L10.1464 3.85355C10.3417 3.65829 10.6583 3.65829 10.8536 3.85355C11.0488 4.04881 11.0488 4.3654 10.8536 4.56066L6.70711 8.70711C6.31658 9.09763 5.68342 9.09763 5.29289 8.70711L1.14645 4.56066C0.951184 4.3654 0.951184 4.04882 1.14645 3.85355Z"
},
"space": 12,
"padding": 0,
"width": 22,
"height": 10,
"layout": "horizontal"
},
"maxCol": 1,
"_legendHoverReverseEnabled": true,
"select": false,
"type": "discrete",
"visible": true,
"padding": {
"top": 16,
"left": 0,
"bottom": 8,
"right": 0
}
},
"tooltip": {
"mark": {
"title": {},
"content": {}
},
"dimension": {
"title": {},
"content": {},
"maxLineCount": null
}
},
"waterfall": {
"state": {
"legend_hover_reverse": {
"opacity": 0.4
}
}
},
"label": {
"syncState": true,
"state": {
"legend_hover_reverse": {
"opacity": 0.4
}
},
"visible": true,
"style": {
"strokeOpacity": 0,
"fontFamily": "LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote,-apple-system, BlinkMacSystemFont, Helvetica Neue PingFang SC,Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji""
},
"offset": 6,
"smartInvert": {
"mode": "WCAG",
"fillStrategy": "invertBase",
"interactInvertType": "inside"
},
position:'inside-top',
"overlap": {
"hideOnHit": false,
"clampForce": false,
"strategy": [
{
"type": "bound",
"position": [
"top"
],
"restorePosition": false
},
{
"type": "moveY",
"offset": [
-4,
-8,
-20,
-24,
-28,
-32,
-36,
-40
]
},
{
"type": "bound",
"position": [
"bottom"
],
"restorePosition": false
},
{
"type": "moveY",
"offset": [
4,
8,
20,
24,
28,
32,
36,
40
]
}
]
}
},
"axes": [
{
"orient": "bottom",
"trimPadding": false,
"label": {
"labelPadding": 12,
"flush": false,
"labelColor": "#1f2329",
"space": 12,
"visible": true,
"autoHide": true,
"style": {
"fontSize": 12,
"fill": "#1f2329",
"fontFamily": "LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote,-apple-system, BlinkMacSystemFont, Helvetica Neue PingFang SC,Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji""
},
"autoRotateAngle": [
0,
-45,
-90
],
"autoRotate": true,
"autoLimit": true
},
"interactive": true,
"domain": [
0,
1,
2,
3,
4
],
"title": {
"style": {
"fill": "#1f2329",
"textAlign": "center"
},
"visible": false,
"text": "",
"space": 4
},
"grid": {
"visible": false,
"style": {
"stroke": "#bbbfc4",
"lineWidth": 0.5
},
"alignWithLabel": false
},
"tick": {
"visible": false,
"tickSize": 8,
"style": {
"lineWidth": 1,
"stroke": "#51565d"
}
},
"domainLine": {
"style": {
"stroke": "#51565d",
"lineWidth": 1
},
"visible": true
},
"density": 1.4,
"id": "waterfall-index-axis",
"seriesIndex": [
0
],
"type": "band",
"paddingOuter": 0.1,
"visible": true,
"sampling": false,
"range": {}
},
{
"orient": "left",
"label": {
"labelOverlap": "parity",
"labelPadding": 12,
"flush": false,
"labelColor": "#1f2329",
"visible": true,
"autoHide": true,
"style": {
"fontSize": 12,
"fill": "#1f2329",
"fontFamily": "LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote,-apple-system, BlinkMacSystemFont, Helvetica Neue PingFang SC,Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji""
},
"autoRotateAngle": [
0
],
"autoRotate": true,
"autoLimit": true
},
"interactive": true,
"domain": true,
"title": {
"style": {
"fill": "#1f2329",
"textAlign": "center"
},
"visible": false,
"text": "",
"position": "middle",
"space": 4
},
"grid": {
"visible": true,
"style": {
"stroke": "#bbbfc4",
"lineWidth": 0.5
}
},
"tick": {
"visible": false,
"tickSize": 8,
"style": {
"lineWidth": 1,
"stroke": "#51565d"
}
},
"domainLine": {
"style": {
"stroke": "#51565d",
"lineWidth": 1
},
"visible": false
},
"density": 1.4,
"id": "waterfall-value-axis",
"seriesIndex": [
0
],
"type": "linear",
"visible": true,
"sampling": false,
"range": {}
}
],
"leaderLine": {
"visible": true,
"style": {
"stroke": "#646a73",
"strokeOpacity": 1,
"lineDash": [
6,
2
],
"lineWidth": 1
}
},
"color": {
"type": "ordinal",
"field": "group",
"domain": [
"_3xj1kmdtu",
"_3xj1kmdtu-negative",
"_3xj1kmdtu-total"
],
"range": [
"#5383f1",
"#55c6ef",
"#bbbfc4"
],
"specified": {
"_3xj1kmdtu": "#5383f1",
"_3xj1kmdtu-negative": "#55c6ef",
"_3xj1kmdtu-total": "#bbbfc4"
}
},
"bar": {
"style": {
"cursor": "pointer"
},
"state": {
"_ser_sel": {
"outerBorder": {
"stroke": "#4e83fd",
"lineWidth": 1,
"distance": 3
}
},
"_pt_sel": {
"outerBorder": {
"stroke": "#4e83fd",
"lineWidth": 1,
"distance": 3
}
}
}
},
"crosshair": {
"xField": {
"visible": true
}
},
"title": {
"padding": {
"top": -1
},
"visible": true,
"text": "BOM Cost变化趋势",
"textStyle": {
"cursor": "pointer",
"align": "center",
"lineClamp": 2,
"verticalDirection": "top",
"ellipsis": "...",
"wordBreak": "break-word",
"visible": true,
"fontSize": 16,
"lineHeight": 20,
"fill": "#1f2329",
"underline": 0,
"lineThrough": 0
},
"subtextStyle": {
"cursor": "pointer",
"align": "left",
"lineClamp": 2,
"verticalDirection": "top",
"ellipsis": "...",
"wordBreak": "break-word",
"visible": false,
"fill": "#8f959e",
"fontSize": 14,
"lineHeight": 18
}
},
"padding": {},
"theme": {
"colorScheme": {
"default": [
"#5383f1",
"#55c6ef",
"#bbbfc4"
]
}
},
"animation": true,
"animationUpdate": false,
"animationExit": false,
"animationEnter": false,
"animationDisappear": false
}

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

设置标签位置‘inside-top‘后，
负值柱子标签位置与正值柱子标签位置一致，
标签重叠时避让设置避让position:['top‘],正值柱子避让方向一致

Expected Behavior

设置标签位置‘inside-top‘后，
负值柱子标签位置与正值柱子标签位置相反，
标签重叠时设置避让position:['top'],负值柱子与正值柱子避让方向应该相反

Environment

- OS:mac
- Browser:google
- Framework:

Any additional comments?

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

Title: [Bug] Waterfall chart has abnormal direction of negative value columns