const spec = {
"type": "common",
"seriesField": "color",
"data": [
{
"id": "data-0",
"values": [
{
"Total GMV": 27799866,
"tag": "Total GMV",
"time": "2023-04-01",
"Total GMV-amount": "27799866",
"Total GMV-amountFormatted": "$27,799,866",
"Total GMV-currencySymbol": "$",
"Total GMV-decimalPlace": "27,799,866",
"originData": {
"time": "2023-04-01",
"value": {
"amountFormatted": "$27,799,866",
"decimalPlace": "27,799,866",
"amount": "27799866",
"currencySymbol": "$"
}
}
},
{
"Total GMV": 26718937,
"tag": "Total GMV",
"time": "2023-04-02",
"Total GMV-amount": "26718937",
"Total GMV-amountFormatted": "$26,718,937",
"Total GMV-currencySymbol": "$",
"Total GMV-decimalPlace": "26,718,937",
"originData": {
"time": "2023-04-02",
"value": {
"amountFormatted": "$26,718,937",
"decimalPlace": "26,718,937",
"amount": "26718937",
"currencySymbol": "$"
}
}
},
{
"Total GMV": 28955951,
"tag": "Total GMV",
"time": "2023-04-03",
"Total GMV-amount": "28955951",
"Total GMV-amountFormatted": "$28,955,951",
"Total GMV-currencySymbol": "$",
"Total GMV-decimalPlace": "28,955,951",
"originData": {
"time": "2023-04-03",
"value": {
"amountFormatted": "$28,955,951",
"decimalPlace": "28,955,951",
"amount": "28955951",
"currencySymbol": "$"
}
}
},
{
"Total GMV": 21373336,
"tag": "Total GMV",
"time": "2023-04-04",
"Total GMV-amount": "21373336",
"Total GMV-amountFormatted": "$21,373,336",
"Total GMV-currencySymbol": "$",
"Total GMV-decimalPlace": "21,373,336",
"originData": {
"time": "2023-04-04",
"value": {
"amountFormatted": "$21,373,336",
"decimalPlace": "21,373,336",
"amount": "21373336",
"currencySymbol": "$"
}
}
},
{
"Total GMV": 28668578,
"tag": "Total GMV",
"time": "2023-04-05",
"Total GMV-amount": "28668578",
"Total GMV-amountFormatted": "$28,668,578",
"Total GMV-currencySymbol": "$",
"Total GMV-decimalPlace": "28,668,578",
"originData": {
"time": "2023-04-05",
"value": {
"amountFormatted": "$28,668,578",
"decimalPlace": "28,668,578",
"amount": "28668578",
"currencySymbol": "$"
}
}
},
{
"Total GMV": 24042718,
"tag": "Total GMV",
"time": "2023-04-06",
"Total GMV-amount": "24042718",
"Total GMV-amountFormatted": "$24,042,718",
"Total GMV-currencySymbol": "$",
"Total GMV-decimalPlace": "24,042,718",
"originData": {
"time": "2023-04-06",
"value": {
"amountFormatted": "$24,042,718",
"decimalPlace": "24,042,718",
"amount": "24042718",
"currencySymbol": "$"
}
}
},
{
"Total GMV": 29640125,
"tag": "Total GMV",
"time": "2023-04-07",
"Total GMV-amount": "29640125",
"Total GMV-amountFormatted": "$29,640,125",
"Total GMV-currencySymbol": "$",
"Total GMV-decimalPlace": "29,640,125",
"originData": {
"time": "2023-04-07",
"value": {
"amountFormatted": "$29,640,125",
"decimalPlace": "29,640,125",
"amount": "29640125",
"currencySymbol": "$"
}
}
}
]
},
{
"id": "data-1",
"values": [
{
"Self-promotion GMV": 17799866,
"tag": "Self-promotion GMV",
"time": "2023-04-01",
"Self-promotion GMV-amount": "17799866",
"Self-promotion GMV-amountFormatted": "$17,799,866",
"Self-promotion GMV-currencySymbol": "$",
"Self-promotion GMV-decimalPlace": "17,799,866",
"originData": {
"time": "2023-04-01",
"value": {
"amountFormatted": "$17,799,866",
"decimalPlace": "17,799,866",
"amount": "17799866",
"currencySymbol": "$"
}
}
},
{
"Self-promotion GMV": 16718937,
"tag": "Self-promotion GMV",
"time": "2023-04-02",
"Self-promotion GMV-amount": "16718937",
"Self-promotion GMV-amountFormatted": "$16,718,937",
"Self-promotion GMV-currencySymbol": "$",
"Self-promotion GMV-decimalPlace": "16,718,937",
"originData": {
"time": "2023-04-02",
"value": {
"amountFormatted": "$16,718,937",
"decimalPlace": "16,718,937",
"amount": "16718937",
"currencySymbol": "$"
}
}
},
{
"Self-promotion GMV": 18955951,
"tag": "Self-promotion GMV",
"time": "2023-04-03",
"Self-promotion GMV-amount": "18955951",
"Self-promotion GMV-amountFormatted": "$18,955,951",
"Self-promotion GMV-currencySymbol": "$",
"Self-promotion GMV-decimalPlace": "18,955,951",
"originData": {
"time": "2023-04-03",
"value": {
"amountFormatted": "$18,955,951",
"decimalPlace": "18,955,951",
"amount": "18955951",
"currencySymbol": "$"
}
}
},
{
"Self-promotion GMV": 20373336,
"tag": "Self-promotion GMV",
"time": "2023-04-04",
"Self-promotion GMV-amount": "20373336",
"Self-promotion GMV-amountFormatted": "$20,373,336",
"Self-promotion GMV-currencySymbol": "$",
"Self-promotion GMV-decimalPlace": "20,373,336",
"originData": {
"time": "2023-04-04",
"value": {
"amountFormatted": "$20,373,336",
"decimalPlace": "20,373,336",
"amount": "20373336",
"currencySymbol": "$"
}
}
},
{
"Self-promotion GMV": 18668578,
"tag": "Self-promotion GMV",
"time": "2023-04-05",
"Self-promotion GMV-amount": "18668578",
"Self-promotion GMV-amountFormatted": "$18,668,578",
"Self-promotion GMV-currencySymbol": "$",
"Self-promotion GMV-decimalPlace": "18,668,578",
"originData": {
"time": "2023-04-05",
"value": {
"amountFormatted": "$18,668,578",
"decimalPlace": "18,668,578",
"amount": "18668578",
"currencySymbol": "$"
}
}
},
{
"Self-promotion GMV": 14042718,
"tag": "Self-promotion GMV",
"time": "2023-04-06",
"Self-promotion GMV-amount": "14042718",
"Self-promotion GMV-amountFormatted": "$14,042,718",
"Self-promotion GMV-currencySymbol": "$",
"Self-promotion GMV-decimalPlace": "14,042,718",
"originData": {
"time": "2023-04-06",
"value": {
"amountFormatted": "$14,042,718",
"decimalPlace": "14,042,718",
"amount": "14042718",
"currencySymbol": "$"
}
}
},
{
"Self-promotion GMV": 19640125,
"tag": "Self-promotion GMV",
"time": "2023-04-07",
"Self-promotion GMV-amount": "19640125",
"Self-promotion GMV-amountFormatted": "$19,640,125",
"Self-promotion GMV-currencySymbol": "$",
"Self-promotion GMV-decimalPlace": "19,640,125",
"originData": {
"time": "2023-04-07",
"value": {
"amountFormatted": "$19,640,125",
"decimalPlace": "19,640,125",
"amount": "19640125",
"currencySymbol": "$"
}
}
}
]
},
{
"id": "data-2",
"values": [
{
"Affiliate GMV": 6496393,
"tag": "Affiliate GMV",
"time": "2023-04-01",
"Affiliate GMV-amount": "6496393",
"Affiliate GMV-amountFormatted": "$6,496,393",
"Affiliate GMV-currencySymbol": "$",
"Affiliate GMV-decimalPlace": "6,496,393",
"originData": {
"time": "2023-04-01",
"value": {
"amountFormatted": "$6,496,393",
"decimalPlace": "6,496,393",
"amount": "6496393",
"currencySymbol": "$"
}
}
},
{
"Affiliate GMV": 6797073,
"tag": "Affiliate GMV",
"time": "2023-04-02",
"Affiliate GMV-amount": "6797073",
"Affiliate GMV-amountFormatted": "$6,797,073",
"Affiliate GMV-currencySymbol": "$",
"Affiliate GMV-decimalPlace": "6,797,073",
"originData": {
"time": "2023-04-02",
"value": {
"amountFormatted": "$6,797,073",
"decimalPlace": "6,797,073",
"amount": "6797073",
"currencySymbol": "$"
}
}
},
{
"Affiliate GMV": 6671346,
"tag": "Affiliate GMV",
"time": "2023-04-03",
"Affiliate GMV-amount": "6671346",
"Affiliate GMV-amountFormatted": "$6,671,346",
"Affiliate GMV-currencySymbol": "$",
"Affiliate GMV-decimalPlace": "6,671,346",
"originData": {
"time": "2023-04-03",
"value": {
"amountFormatted": "$6,671,346",
"decimalPlace": "6,671,346",
"amount": "6671346",
"currencySymbol": "$"
}
}
},
{
"Affiliate GMV": 7068594,
"tag": "Affiliate GMV",
"time": "2023-04-04",
"Affiliate GMV-amount": "7068594",
"Affiliate GMV-amountFormatted": "$7,068,594",
"Affiliate GMV-currencySymbol": "$",
"Affiliate GMV-decimalPlace": "7,068,594",
"originData": {
"time": "2023-04-04",
"value": {
"amountFormatted": "$7,068,594",
"decimalPlace": "7,068,594",
"amount": "7068594",
"currencySymbol": "$"
}
}
},
{
"Affiliate GMV": 6715436,
"tag": "Affiliate GMV",
"time": "2023-04-05",
"Affiliate GMV-amount": "6715436",
"Affiliate GMV-amountFormatted": "$6,715,436",
"Affiliate GMV-currencySymbol": "$",
"Affiliate GMV-decimalPlace": "6,715,436",
"originData": {
"time": "2023-04-05",
"value": {
"amountFormatted": "$6,715,436",
"decimalPlace": "6,715,436",
"amount": "6715436",
"currencySymbol": "$"
}
}
},
{
"Affiliate GMV": 6867434,
"tag": "Affiliate GMV",
"time": "2023-04-06",
"Affiliate GMV-amount": "6867434",
"Affiliate GMV-amountFormatted": "$6,867,434",
"Affiliate GMV-currencySymbol": "$",
"Affiliate GMV-decimalPlace": "6,867,434",
"originData": {
"time": "2023-04-06",
"value": {
"amountFormatted": "$6,867,434",
"decimalPlace": "6,867,434",
"amount": "6867434",
"currencySymbol": "$"
}
}
},
{
"Affiliate GMV": 7165164,
"tag": "Affiliate GMV",
"time": "2023-04-07",
"Affiliate GMV-amount": "7165164",
"Affiliate GMV-amountFormatted": "$7,165,164",
"Affiliate GMV-currencySymbol": "$",
"Affiliate GMV-decimalPlace": "7,165,164",
"originData": {
"time": "2023-04-07",
"value": {
"amountFormatted": "$7,165,164",
"decimalPlace": "7,165,164",
"amount": "7165164",
"currencySymbol": "$"
}
}
}
]
}
],
"padding": [
16,
32,
10,
10
],
"tooltip": {
"style": {
"shape": {
"shapeType": "roundLine"
}
},
"mark": {
"position": "left",
"content": {}
},
"dimension": {
"position": "rb",
"content": {}
}
},
"crosshair": {
"xField": {
"visible": true,
"line": {
"visible": true,
"type": "line"
}
}
},
"axes": [
{
"id": "leftYAxis",
"orient": "left",
"zero": true,
"label": {
"space": 12,
"minGap": 20
},
"seriesId": [
"line-0-Total GMV",
"line-1-Self-promotion GMV",
"line-2-Affiliate GMV"
],
"title": {
"autoRotate": false,
"position": "start",
"style": {
"dy": -24,
"dx": 12,
"textAlign": "left"
},
"visible": false
}
},
{
"orient": "bottom",
"type": "band",
"trimPadding": true,
"label": {
"visible": true,
"space": 8,
"minGap": 40,
"style": {
"maxLineWidth": 94
}
}
}
],
"series": [
{
"type": "line",
"id": "line-0-Total GMV",
"dataId": "data-0",
"name": "Total GMV",
"seriesField": "tag",
"xField": "time",
"yField": "Total GMV",
"stack": false,
"activePoint": true,
"point": {
"visible": false,
"style": {
"pickable": false
},
"state": {
"dimension_hover": {
"stroke": "#fff",
"shadowColor": "rgba(0, 0, 0, 0.08)",
"shadowOffsetY": 2,
"lineWidth": 2,
"size": 10
}
}
},
"line": {
"state": {
"hover_reverse": {
"style": {
"strokeOpacity": 0.3
}
},
"__commerce-materials_legend_hover_reverse": {
"style": {
"strokeOpacity": 0.3
}
}
}
}
},
{
"type": "line",
"id": "line-1-Self-promotion GMV",
"dataId": "data-1",
"name": "Self-promotion GMV",
"seriesField": "tag",
"xField": "time",
"yField": "Self-promotion GMV",
"stack": false,
"activePoint": true,
"point": {
"visible": false,
"style": {
"pickable": false
},
"state": {
"dimension_hover": {
"stroke": "#fff",
"shadowColor": "rgba(0, 0, 0, 0.08)",
"shadowOffsetY": 2,
"lineWidth": 2,
"size": 10
}
}
},
"line": {
"state": {
"hover_reverse": {
"style": {
"strokeOpacity": 0.3
}
},
"__commerce-materials_legend_hover_reverse": {
"style": {
"strokeOpacity": 0.3
}
}
}
}
},
{
"type": "line",
"id": "line-2-Affiliate GMV",
"dataId": "data-2",
"name": "Affiliate GMV",
"seriesField": "tag",
"xField": "time",
"yField": "Affiliate GMV",
"stack": false,
"activePoint": true,
"point": {
"visible": false,
"style": {
"pickable": false
},
"state": {
"dimension_hover": {
"stroke": "#fff",
"shadowColor": "rgba(0, 0, 0, 0.08)",
"shadowOffsetY": 2,
"lineWidth": 2,
"size": 10
}
}
},
"line": {
"state": {
"hover_reverse": {
"style": {
"strokeOpacity": 0.3
}
},
"__commerce-materials_legend_hover_reverse": {
"style": {
"strokeOpacity": 0.3
}
}
}
}
}
],
"legends": {
"id": "@commerce-materials/trend__legend",
"type": "discrete",
"orient": "top",
"position": "start",
"item": {
"shape": {
"style": {
"symbolType": "roundLine"
}
}
}
},
"markLine": [
{
"y": 15000000
}
],
"markArea": [
{
"x": "2023-04-01",
"x1": "2023-04-03",
"label": {
"text": "Event name"
}
},
{
"x": "2023-04-04",
"x1": "2023-04-05",
"label": {
"type": "rich",
"text": [
{
"text": "Long long long long event name"
}
],
"style": {
"maxWidth": 100
}
}
}
],
"markPoint": [
{
"x": "2023-04-03",
"y": 6671346,
"itemContent": {
"type": "text",
"offsetX": 0,
"offsetY": 0,
"position": "insideTop",
"text": {
"text": "$6,671,346",
"labelBackground": {
"visible": false
},
"style": {
"textAlign": "center",
"fontSize": 14,
"lineHeight": 1,
"dx": -16,
"dy": -12,
"fill": "rgba(0, 0, 0, 0.92)"
}
}
},
"targetSymbol": {
"visible": true,
"style": {
"size": 12,
"symbolType": "circle",
"stroke": "#fff",
"lineWidth": 2,
"fill": "#306BCF"
}
},
"itemLine": {
"visible": false
}
}
],
"color": {
"type": "ordinal",
"domain": [
"Total GMV",
"Self-promotion GMV",
"Affiliate GMV"
],
"range": [
"#02A5A0",
"#306BCF",
"#9583FF",
"#507700",
"#DD68B9",
"#8D630E",
"#DF7256",
"#017976",
"#6091FF",
"#616B94"
]
}
}
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.0
Link to Minimal Reproduction
null
Steps to Reproduce
Current Behavior
点击第一个图例之后,出现报错,同时 markline & markarea 消失。
Expected Behavior
markline & markarea 正常显示
Environment
Any additional comments?
No response