simplify the official website demo, and as a result, the map only shows the South China Sea islands and each point.
the Vue code is as follows:
drawMap () {
let data = [
{name: "", value: 9},
{name: "", value: 12},
{name: "", value: 12},
{name: "", value: 12},
{name: "", value: 14},
{name: "", value: 15},
{name: "", value: 16},
{name: "", value: 18},
{name: "", value: 18},
{name: "", value: 19},
{name: "", value: 21}
]
let geoCoordMap = {
"": [121.15, 31.89],
"": [109.781327, 39.608266],
"": [120.38, 37.35],
"": [122.207216, 29.985295],
"": [123.97, 47.33],
"": [120.13, 33.38],
"": [118.87, 42.28],
"": [120.33, 36.07],
"": [121.52, 36.89],
"": [102.188043, 38.520089],
"": [118.58, 24.93]
}
let convertData = function (data) {
var res = []
for (var i = 0; i < data.length; iPP) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
})
}
}
return res
}
let option = {
tooltip: {
trigger: "item",
formatter: function (params) {
return params.name + " : " + params.value[2]
}
},
geo: {
map: "china",
roam: true,
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: "-sharpa19cef",
borderColor: "-sharpc4c2f5"
},
emphasis: {
areaColor: "-sharp8c86f7"
}
}
},
series: [
{
name: "house",
type: "scatter",
coordinateSystem: "geo",
data: convertData(data),
symbolSize: 20,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "-sharpf1f425"
},
emphasis: {
borderColor: "-sharpfff",
borderWidth: 1
}
}
}
]
}
this.chartMap = echarts.init(document.getElementById("chartMap"))
this.chartMap.setOption(option)
}call this.drawMap () in mounted
I don"t know what the problem is. Try it with the Echart3 version, the same question