const spec = {
"direction": "vertical",
"type": "common",
"series": [
{
"type": "waterfall",
"stack": true,
"calculationMode": "increase",
"bar": {
"state": {
"hover": {
"stroke": "#000",
"lineWidth": 1
}
}
},
"label": {
"visible": true,
"position": "inside",
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"fontSize": 16,
"fontWeight": "bold",
"pickMode": "imprecise"
},
"overlap": {
"strategy": []
},
"smartInvert": true,
"formatConfig": {
"content": "value"
},
"interactive": true
},
"totalLabel": {
"visible": true,
"position": "withChange",
"overlap": false,
"clampForce": false,
"formatConfig": {
"fixed": 0,
"content": "value"
},
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"fill": "#1F2329",
"stroke": "#ffffff",
"fontSize": 16,
"fontWeight": "bold",
"pickMode": "imprecise"
},
"interactive": true,
"alwayCalculateTotal": true
},
"stackLabel": {
"visible": false
},
"direction": "vertical",
"xField": "_editor_dimension_field",
"yField": "_editor_value_field",
"dataId": "waterfall",
"id": "series-waterfall",
"seriesField": "_editor_type_field",
"total": {
"type": "field",
"tagField": "_editor_waterfall_total",
"valueField": "_editor_waterfall_total_value"
},
"seriesLabel": {
"visible": true,
"position": "end",
"label": {
"style": {
"lineHeight": "100%",
"lineWidth": 1,
"stroke": "#ffffff",
"fontSize": 16,
"fontWeight": "bold"
},
"space": 10,
"formatConfig": {
"content": "series"
}
}
},
"stackType": "stack"
}
],
"axes": [
{
"orient": "left",
"id": "axis-left",
"type": "linear",
"label": {
"autoLimit": false,
"autoHide": true,
"style": {
"fill": "#1F2329",
"fontSize": 16,
"lineWidth": 1
},
"formatConfig": {},
"visible": true,
"_originStyle": {
"fill": "#1F2329",
"fontSize": 16,
"lineWidth": 1
}
},
"domainLine": {
"visible": true,
"style": {
"stroke": "#000000"
}
},
"tick": {
"visible": true,
"style": {
"stroke": "#000000"
}
},
"grid": {
"visible": false,
"style": {
"stroke": "#bbbfc4"
}
},
"autoIndent": false,
"sampling": true,
"maxWidth": null,
"maxHeight": null,
"title": {
"visible": false
},
"visible": true
},
{
"orient": "bottom",
"id": "axis-bottom",
"type": "band",
"label": {
"autoLimit": false,
"autoHide": true,
"style": {
"fill": "#1F2329",
"fontSize": 16,
"lineWidth": 1
},
"formatConfig": {},
"visible": true,
"_originStyle": {
"fill": "#1F2329",
"fontSize": 16,
"lineWidth": 1
}
},
"domainLine": {
"visible": true,
"style": {
"stroke": "#000000"
},
"onZero": true
},
"tick": {
"visible": true,
"style": {
"stroke": "#000000"
}
},
"grid": {
"visible": false,
"style": {
"stroke": "#bbbfc4"
}
},
"autoIndent": false,
"sampling": true,
"maxWidth": null,
"maxHeight": null,
"trimPadding": false,
"paddingInner": [
0.2,
0
],
"paddingOuter": [
0.2,
0
],
"title": {
"visible": false
},
"visible": true
}
],
"data": [
{
"id": "waterfall",
"sourceKey": "total",
"values": [
{
"_editor_value_field": 220,
"_editor_type_field": "3C电器",
"_editor_dimension_field": "2021年",
"_editor_type_field_waterfall_raw": 220,
"_editor_dimension_field_waterfall_raw": "2021年"
},
{
"_editor_value_field": 260,
"_editor_type_field": "3C电器",
"_editor_dimension_field": "3C电器",
"_editor_type_field_waterfall_raw": 260,
"_editor_dimension_field_waterfall_raw": "3C电器"
},
{
"_editor_value_field": 480,
"_editor_type_field": "3C电器",
"_editor_dimension_field": "2022年",
"_editor_type_field_waterfall_raw": 480,
"_editor_dimension_field_waterfall_raw": "2022年"
},
{
"_editor_value_field": 1280,
"_editor_type_field": "服装配饰",
"_editor_dimension_field": "2021年",
"_editor_type_field_waterfall_raw": 1280,
"_editor_dimension_field_waterfall_raw": "2021年"
},
{
"_editor_value_field": 680,
"_editor_type_field": "服装配饰",
"_editor_dimension_field": "服装配饰",
"_editor_type_field_waterfall_raw": 680,
"_editor_dimension_field_waterfall_raw": "服装配饰"
},
{
"_editor_value_field": 1960,
"_editor_type_field": "服装配饰",
"_editor_dimension_field": "2022年",
"_editor_type_field_waterfall_raw": 1960,
"_editor_dimension_field_waterfall_raw": "2022年"
},
{
"_editor_value_field": 266,
"_editor_type_field": "美妆个护",
"_editor_dimension_field": "2021年",
"_editor_type_field_waterfall_raw": 266,
"_editor_dimension_field_waterfall_raw": "2021年"
},
{
"_editor_value_field": 280,
"_editor_type_field": "美妆个护",
"_editor_dimension_field": "美妆个护",
"_editor_type_field_waterfall_raw": 280,
"_editor_dimension_field_waterfall_raw": "美妆个护"
},
{
"_editor_value_field": "e",
"_editor_type_field": "美妆个护",
"_editor_dimension_field": "2022年",
"_editor_waterfall_total": true
},
{
"_editor_value_field": 262,
"_editor_type_field": "日化母婴",
"_editor_dimension_field": "2021年",
"_editor_type_field_waterfall_raw": 262,
"_editor_dimension_field_waterfall_raw": "2021年"
},
{
"_editor_value_field": 330,
"_editor_type_field": "日化母婴",
"_editor_dimension_field": "日化母婴",
"_editor_type_field_waterfall_raw": 330,
"_editor_dimension_field_waterfall_raw": "日化母婴"
},
{
"_editor_value_field": 592,
"_editor_type_field": "日化母婴",
"_editor_dimension_field": "2022年",
"_editor_type_field_waterfall_raw": 592,
"_editor_dimension_field_waterfall_raw": "2022年"
},
{
"_editor_value_field": 380,
"_editor_type_field": "食品饮料",
"_editor_dimension_field": "2021年",
"_editor_type_field_waterfall_raw": 380,
"_editor_dimension_field_waterfall_raw": "2021年"
},
{
"_editor_value_field": 360,
"_editor_type_field": "食品饮料",
"_editor_dimension_field": "食品饮料",
"_editor_type_field_waterfall_raw": 360,
"_editor_dimension_field_waterfall_raw": "食品饮料"
},
{
"_editor_value_field": 740,
"_editor_type_field": "食品饮料",
"_editor_dimension_field": "2022年",
"_editor_type_field_waterfall_raw": 740,
"_editor_dimension_field_waterfall_raw": "2022年"
}
],
"fields": {
"_editor_dimension_field": {
"domain": [
"category",
"2021年",
"3C电器",
"服装配饰",
"美妆个护",
"日化母婴",
"食品饮料",
"2022年",
"_editor_waterfall_total"
],
"alias": "category",
"sortIndex": 0
},
"_editor_type_field": {
"domain": [
"3C电器",
"服装配饰",
"美妆个护",
"日化母婴",
"食品饮料"
],
"alias": "分组"
},
"_editor_value_field": {
"alias": "数值"
}
}
}
],
region:[
{
"id": "region-0",
"stackInverse": true
}
],
legends: {
visible: true
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Version
2.0.6
Link to Minimal Reproduction
NA
Steps to Reproduce
Current Behavior
Expected Behavior
堆叠顺序应该同图例顺序保持一致
Environment
Any additional comments?
No response