echarts Silver Earth Baidu Map, want to use map coordinates to locate the pie chart, but the actual effect is still displayed according to pixel positioning. All the pie charts overlap
option:
const option = {
// name:"pie-map",
bmap: {
center: [121.579317, 29.883219],
zoom: 10,
roam: true,
mapStyle:{...}
},
series:[]
}
pieData.forEach(item => {
option.series.push({
type:"pie",
radius:"15%",
coordinateSystem: "bmap", //
center: item.center,
data: item.value
})
})
data:
[
{
"center": [
121.40519,
109.943418
],
"name": "1",
"value": [
{
"name": "A",
"value": 2
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.40519,
29.943418
],
"name": "1",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 5
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.416688,
29.867279
],
"name": "2",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 8
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.525922,
29.946423
],
"name": "3",
"value": [
{
"name": "A",
"value": 5
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.519023,
29.874294
],
"name": "4",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.562717,
29.878303
],
"name": "5",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.606411,
29.884315
],
"name": "6",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.594912,
29.935406
],
"name": "7",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.598362,
29.852244
],
"name": "8",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.529372,
29.79409
],
"name": "9",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.854774,
29.898343
],
"name": "10",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
},
{
"center": [
121.759338,
29.805122
],
"name": "11",
"value": [
{
"name": "A",
"value": 1
},
{
"name": "B",
"value": 2
},
{
"name": "c",
"value": 3
}
]
}
]