VChart
VChart copied to clipboard
VisActor
[Bug] About theme: When a component's style configuration is an array structure, the theme's configuration cannot be applied.
Version
latest
Link to Minimal Reproduction
NA
Steps to Reproduce
markLine.line.style, markArea.label and axes[i].breaks
spec:
const spec = {
"direction": "vertical",
"type": "common",
"color": [
"#0A345E",
"#18ADED",
"#A6A7AD",
"#1A82EB",
"#74CEF4",
"#E1E2E4",
"#138ABE",
"#76B4F3",
"#898A91",
"#0E688E"
],
"series": [
{
"direction": "vertical",
"type": "line",
"stack": false,
"label": {
"visible": true,
"position": "top",
"smartInvert": true,
"overlap": false,
"formatConfig": {},
"interactive": true,
"style": {
"pickMode": "imprecise"
}
},
"seriesLabel": {
"visible": true,
"position": "end",
"label": {
"formatConfig": {
"content": "series"
}
}
},
"xField": "_editor_dimension_field",
"yField": "_editor_value_field",
"dataId": "0",
"id": "series-0",
"EDITOR_SERIES_DATA_KEY": "系列 1",
"seriesField": "_editor_type_field",
"line": {
"state": {
"editor_diff_marker_hover_reverse": {
"opacity": 0.1
}
}
},
"point": {
"state": {
"editor_diff_marker_hover_reverse": {
"opacity": 0.1
},
"editor_diff_marker_hover_start": {
"symbolType": "circle",
"size": 8,
"fill": "#fff",
"stroke": "#3073F2",
"lineWidth": 1,
"outerBorder": {
"visible": true,
"stroke": "#3073F2",
"lineWidth": 3,
"distance": 1.5,
"strokeOpacity": 0.3
},
"shadowBlur": 4,
"shadowOffsetX": 0,
"shadowOffsetY": 2,
"shadowColor": "rgba(0, 0, 0, 0.3)",
"zIndex": 2,
"boundsPadding": 4,
"pickMode": "imprecise"
},
"editor_diff_marker_hover_end": {
"symbolType": "circle",
"size": 8,
"fill": "#fff",
"stroke": "#FF9D22",
"lineWidth": 1,
"outerBorder": {
"visible": true,
"stroke": "#FF9D22",
"lineWidth": 3,
"distance": 1.5,
"strokeOpacity": 0.3
},
"shadowBlur": 4,
"shadowOffsetX": 0,
"shadowOffsetY": 2,
"shadowColor": "rgba(0, 0, 0, 0.3)",
"zIndex": 2,
"boundsPadding": 4,
"pickMode": "imprecise"
}
}
},
"area": {
"state": {
"editor_diff_marker_hover_reverse": {
"opacity": 0.1
}
}
},
"totalLabel": {
"alwayCalculateTotal": true
}
},
{
"direction": "vertical",
"type": "line",
"stack": false,
"label": {
"visible": true,
"position": "top",
"smartInvert": true,
"overlap": false,
"formatConfig": {},
"interactive": true,
"style": {
"pickMode": "imprecise"
}
},
"seriesLabel": {
"visible": true,
"position": "end",
"label": {
"formatConfig": {
"content": "series"
}
}
},
"xField": "_editor_dimension_field",
"yField": "_editor_value_field",
"dataId": "1",
"id": "series-1",
"EDITOR_SERIES_DATA_KEY": "系列 2",
"seriesField": "_editor_type_field",
"line": {
"state": {
"editor_diff_marker_hover_reverse": {
"opacity": 0.1
}
}
},
"point": {
"state": {
"editor_diff_marker_hover_reverse": {
"opacity": 0.1
},
"editor_diff_marker_hover_start": {
"symbolType": "circle",
"size": 8,
"fill": "#fff",
"stroke": "#3073F2",
"lineWidth": 1,
"outerBorder": {
"visible": true,
"stroke": "#3073F2",
"lineWidth": 3,
"distance": 1.5,
"strokeOpacity": 0.3
},
"shadowBlur": 4,
"shadowOffsetX": 0,
"shadowOffsetY": 2,
"shadowColor": "rgba(0, 0, 0, 0.3)",
"zIndex": 2,
"boundsPadding": 4,
"pickMode": "imprecise"
},
"editor_diff_marker_hover_end": {
"symbolType": "circle",
"size": 8,
"fill": "#fff",
"stroke": "#FF9D22",
"lineWidth": 1,
"outerBorder": {
"visible": true,
"stroke": "#FF9D22",
"lineWidth": 3,
"distance": 1.5,
"strokeOpacity": 0.3
},
"shadowBlur": 4,
"shadowOffsetX": 0,
"shadowOffsetY": 2,
"shadowColor": "rgba(0, 0, 0, 0.3)",
"zIndex": 2,
"boundsPadding": 4,
"pickMode": "imprecise"
}
}
},
"area": {
"state": {
"editor_diff_marker_hover_reverse": {
"opacity": 0.1
}
}
},
"totalLabel": {
"alwayCalculateTotal": true
}
}
],
"legends": [
{
"id": "legend-discrete",
"visible": false,
"autoPage": false,
"position": "start",
"interactive": false,
"_originalVisible": false
}
],
"region": [
{
"id": "region-0",
"stackInverse": false
}
],
"tooltip": {
"visible": true,
"mark": {
"content": [
{}
]
},
"dimension": {
"content": [
{}
]
}
},
"title": {
"id": "chart_title",
"visible": true,
"subtextStyle": {
"visible": false
},
"_initialize_": true,
"textType": "text",
"text": "双击添加标题",
"textStyle": {
"lineHeight": "150%",
"fontSize": 16,
"fontWeight": "bold",
"fontStyle": "normal",
"underline": 0,
"stroke": false,
"align": "left",
"textBaseline": "middle",
"fontFamily": "LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",Tahoma,\"PingFang SC\",\"Microsoft Yahei\",Arial,\"Hiragino Sans GB\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
"fill": "#ccc",
"background": false
}
},
"axes": [
{
"orient": "left",
"id": "axis-left",
"type": "linear",
"label": {
"autoLimit": false,
"autoHide": true,
"formatConfig": {}
},
"domainLine": {
"visible": true
},
"tick": {
"visible": true
},
"grid": {
"visible": false,
"style": {
"pickStrokeBuffer": 2
}
},
"autoIndent": false,
"sampling": true,
"maxWidth": null,
"maxHeight": null,
"breaks": [
{
"range": [
20.598591549295772,
20.598591549295772
],
"gap": 5,
"scopeType": "count",
"breakSymbol": {
"style": {
"lineWidth": 1,
"stroke": "#000",
"size": 8,
"pickable": false
},
"visible": true
}
},
{
"range": [
4.383802816901409,
4.383802816901409
],
"gap": 5,
"scopeType": "count",
"breakSymbol": {
"style": {
"lineWidth": 1,
"stroke": "#4b4f54",
"size": 8,
"pickable": false
},
"visible": true
}
}
],
"zIndex": 550
},
{
"orient": "bottom",
"id": "axis-bottom",
"type": "band",
"label": {
"autoLimit": false,
"autoHide": true,
"formatConfig": {}
},
"domainLine": {
"visible": true,
"onZero": true
},
"tick": {
"visible": true
},
"grid": {
"visible": false,
"style": {
"pickStrokeBuffer": 2
}
},
"autoIndent": false,
"sampling": true,
"maxWidth": null,
"maxHeight": null,
"trimPadding": true,
"paddingInner": [
0.2,
0
],
"paddingOuter": [
0.2,
0
]
}
],
"data": [
{
"id": "0",
"sourceKey": "系列 1",
"values": [
{
"_editor_value_field": 10,
"_editor_type_field": "系列 1",
"_editor_dimension_field": "2020"
},
{
"_editor_value_field": 14,
"_editor_type_field": "系列 1",
"_editor_dimension_field": "2021"
},
{
"_editor_value_field": 12,
"_editor_type_field": "系列 1",
"_editor_dimension_field": "2022"
}
],
"specField": {
"_editor_dimension_field": {
"type": "dimension",
"order": 0
},
"_editor_type_field": {
"type": "series",
"order": 0
},
"_editor_value_field": {
"type": "value",
"order": 0
}
},
"fields": {
"_editor_dimension_field": {
"alias": "年份"
},
"_editor_type_field": {
"alias": "分组"
},
"_editor_value_field": {
"alias": "数值"
}
}
},
{
"id": "1",
"sourceKey": "系列 2",
"values": [
{
"_editor_value_field": 8,
"_editor_type_field": "系列 2",
"_editor_dimension_field": "2020"
},
{
"_editor_value_field": 6,
"_editor_type_field": "系列 2",
"_editor_dimension_field": "2021"
},
{
"_editor_value_field": 14,
"_editor_type_field": "系列 2",
"_editor_dimension_field": "2022"
}
],
"specField": {
"_editor_dimension_field": {
"type": "dimension",
"order": 0
},
"_editor_type_field": {
"type": "series",
"order": 0
},
"_editor_value_field": {
"type": "value",
"order": 0
}
},
"fields": {
"_editor_dimension_field": {
"alias": "年份"
},
"_editor_type_field": {
"alias": "分组"
},
"_editor_value_field": {
"alias": "数值"
}
}
}
],
"theme": {
"fontFamily": "LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",Tahoma,\"PingFang SC\",\"Microsoft Yahei\",Arial,\"Hiragino Sans GB\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
"colorScheme": {
"default": {
"palette": {
"primaryFontColor": "red",
"axisLabelFontColor": "red",
"axisFontColor": "red",
"axisGridColor": "#404349",
"axisDomainColor": "#4b4f54",
"markLabelBackgroundColor": "#4b4f54",
"markLineStrokeColor": "yellow",
"markAreaColor": "#3073F2"
}
}
},
"component": {
"axis": {
"breaks": {
"breakSymbol": {
"style": {
"lineWidth": 1,
"stroke": "red",
"size": 12
}
}
},
},
"markLine": {
"line": {
"style": {
"lineWidth": 3,
"stroke": 'red'
}
}
},
"markArea": {
"label": {
"style": {
"fontSize": 16,
"fontFamily": "LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",Tahoma,\"PingFang SC\",\"Microsoft Yahei\",Arial,\"Hiragino Sans GB\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
"fill": 'red'
},
"labelBackground": {
"style": {
"stroke": 'red',
"lineWidth": 1,
"cornerRadius": 4,
"fillOpacity": 1,
"fill":'#fff'
}
}
}
},
}
},
"markArea": [
{
"id": "84b7d564-1098-4af7-bb2a-e9709b5ec21e",
"name": "mark-area",
"interactive": true,
"x": "18.425341473509935%",
"x1": "60.356736341059616%",
"y": "100%",
"y1": "0%",
"label": [
{
"style": {
"fontSize": 16,
"fontFamily": "LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",Tahoma,\"PingFang SC\",\"Microsoft Yahei\",Arial,\"Hiragino Sans GB\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
"fill": "#fdfdfd"
},
"labelBackground": {
"style": {
"stroke": "#4b4f54",
"lineWidth": 1,
"cornerRadius": 4,
"fillOpacity": 1,
"fill": "#4b4f54"
},
"visible": true
},
"padding": 4,
"boundsPadding": 4,
"pickable": true,
"childrenPickable": false,
"position": "right",
"text": "0 - 30",
"dx": 6,
"bindAxis": "y"
},
{
"style": {
"fontSize": 16,
"fontFamily": "LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",Tahoma,\"PingFang SC\",\"Microsoft Yahei\",Arial,\"Hiragino Sans GB\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
"fill": "#fdfdfd"
},
"labelBackground": {
"style": {
"stroke": "#4b4f54",
"lineWidth": 1,
"cornerRadius": 4,
"fillOpacity": 1,
"fill": "#4b4f54"
},
"visible": true
},
"padding": 4,
"boundsPadding": 4,
"pickable": true,
"childrenPickable": false,
"position": "top",
"text": "2020 - 2021",
"dy": -6,
"bindAxis": "x"
}
],
"_originValue_": [
[
0,
14
],
[
"2020",
"2021"
]
],
"_editor_marker_label_": [
"0 - 14",
"2020 - 2021"
],
"zIndex": 500,
"_originLabel": [
{
"labelBackground": {
"visible": true
},
"padding": 4,
"boundsPadding": 4,
"pickable": true,
"childrenPickable": false,
"position": "right",
"text": "0 - 30",
"dx": 6,
"bindAxis": "y"
},
{
"labelBackground": {
"visible": true
},
"padding": 4,
"boundsPadding": 4,
"pickable": true,
"childrenPickable": false,
"position": "top",
"text": "2020 - 2021",
"dy": -6,
"bindAxis": "x"
}
],
"_editor_marker_format_": false
}
],
"markLine": [
{
"id": "59f6a9a6-c6a3-41c9-8384-c293858180af",
"interactive": true,
"name": "hierarchy-diff-line",
"type": "type-step",
"coordinates": [
{
"_editor_value_field": 10,
"_editor_type_field": "系列 1",
"_editor_dimension_field": "2020",
"__VCHART_DEFAULT_DATA_INDEX": 0,
"__VCHART_DEFAULT_DATA_KEY": 0,
"refRelativeSeriesId": "series-0"
},
{
"_editor_value_field": 14,
"_editor_type_field": "系列 1",
"_editor_dimension_field": "2021",
"__VCHART_DEFAULT_DATA_INDEX": 1,
"__VCHART_DEFAULT_DATA_KEY": 1,
"refRelativeSeriesId": "series-0"
}
],
"connectDirection": "right",
"expandDistance": "50%",
"label": {
"position": "middle",
"text": [
"+40%"
],
"refY": 0,
"pickable": true,
"childrenPickable": false
},
"line": {
"multiSegment": true,
"mainSegmentIndex": 1,
"style": [
{
"lineWidth": 1,
"stroke": "#4b4f54",
"pickStrokeBuffer": 10,
"lineDash": [
3,
3
]
},
{
"lineWidth": 1,
"stroke": "#4b4f54",
"pickStrokeBuffer": 10
},
{
"lineWidth": 1,
"stroke": "#4b4f54",
"pickStrokeBuffer": 10,
"lineDash": [
3,
3
]
}
],
"_originStyle": [
{
"pickStrokeBuffer": 10,
"lineDash": [
3,
3
]
},
{
"pickStrokeBuffer": 10
},
{
"pickStrokeBuffer": 10,
"lineDash": [
3,
3
]
}
]
},
"endSymbol": {
"originSymbolType": "solidArrow",
"symbolType": "M -1 1.5 L 0 0 L 1 1.5 Z",
"refX": 0,
"style": {
"fillOpacity": 1,
"fill": "#4b4f54",
"lineWidth": 0
}
},
"startSymbol": {
"originSymbolType": "solidArrow",
"symbolType": "M -1 1.5 L 0 0 L 1 1.5 Z",
"refX": 0,
"style": {
"fillOpacity": 1,
"fill": "#4b4f54",
"lineWidth": 0
}
},
"_originValue_": [
10,
14
],
"_editor_marker_label_": "+40%",
"_editor_marker_index": 0,
"zIndex": 510,
"_editor_marker_format_": false
}
],
"width": 640,
"height": 360
};
Current Behavior
Expected Behavior
The configuration in the theme will take effect.
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
