group嵌套定位问题echarts 配置项内容和展示
配置项如下
option = {
"graphic": {
"elements": [{
"type": "group",
"top": 60,
"left": "150",
"children": [{
"type": "circle",
"shape": {
"cx": 0,
"cy": 0,
"r": 10
},
"style": {
"fill": "#00bcbc"
}
},
{
"type": "text",
"style": {
"x": 20,
"y": -5,
"text": "整车在途运输",
"textVerticalAlign": "bottom",
"font": "14px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
},
{
"type": "text",
"style": {
"x": 20,
"y": 5,
"text": 0,
"textVerticalAlign": "top",
"font": "14px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
},
{
"type": "line",
"z": -1,
"shape": {
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 120
},
"style": {
"lineWidth": 3,
"stroke": "#dcdcdc"
}
}
]
},
{
"type": "group",
"top": 180,
"left": 150,
"children": [{
"type": "circle",
"shape": {
"cx": 0,
"cy": 0,
"r": 10
},
"style": {
"fill": "#00bcbc"
}
},
{
"type": "text",
"style": {
"x": 20,
"y": -5,
"text": "实际到达CDC",
"textVerticalAlign": "bottom",
"font": "14px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
},
{
"type": "text",
"style": {
"x": 20,
"y": 5,
"text": 0,
"textVerticalAlign": "top",
"font": "14px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
},
{
"type": "line",
"z": -1,
"shape": {
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 120
},
"style": {
"lineWidth": 3,
"stroke": "#dcdcdc"
}
},
{
"type": "group",
"top": -46,
"left": -124,
"children": [{
"type": "text",
"style": {
"x": 0,
"y": -4,
"text": "上海",
"textAlign": "right",
"textVerticalAlign": "bottom",
"font": "12px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
},
{
"type": "text",
"style": {
"x": 0,
"y": 4,
"text": 0,
"textAlign": "right",
"textVerticalAlign": "top",
"font": "12px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
},
{
"type": "polyline",
"shape": {
"points": [
[
0,
0
],
[
30,
0
],
[
30,
30
],
[
100,
30
]
]
},
"style": {
"lineWidth": 2,
"stroke": "#b7e8ea"
}
}
]
},
{
"type": "group",
"top": -3,
"left": -124,
"children": [{
"type": "text",
"style": {
"x": 0,
"y": -4,
"text": "北京",
"textAlign": "right",
"textVerticalAlign": "bottom",
"font": "12px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
},
{
"type": "text",
"style": {
"x": 0,
"y": 4,
"text": 0,
"textAlign": "right",
"textVerticalAlign": "top",
"font": "12px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
},
{
"type": "polyline",
"shape": {
"points": [
[
0,
0
],
[
30,
0
],
[
30, -30
],
[
100, -30
]
]
},
"style": {
"lineWidth": 2,
"stroke": "#b7e8ea"
}
}
]
}
]
},
{
"type": "group",
"top": 300,
"left": "150",
"children": [{
"type": "circle",
"shape": {
"cx": 0,
"cy": 0,
"r": 10
},
"style": {
"fill": "#00bcbc"
}
},
{
"type": "text",
"style": {
"x": 20,
"y": -5,
"text": "交付用户",
"textVerticalAlign": "bottom",
"font": "14px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
},
{
"type": "text",
"style": {
"x": 20,
"y": 5,
"text": 10,
"textVerticalAlign": "top",
"font": "14px \"Blue Sky Standard Regular\", \"Noto Sans SC Regular\""
}
}
]
}
]
}
};
截图如下
