使用echarts绘制地图的时候遇到一个问题,不知道为什么data中的value赋不上去,总是显示NAN
代码如下
import * as echarts from "echarts";
import { reactive, onMounted } from "vue";
import chinaJson from "../assets/source/chinaMap.json";
const state = reactive({
province: "",
option: {
title: {
text: "",
left: "center"
},
tooltip: {
trigger: "item",
backgroundColor: "white",
formatter: "{b} - {c}"
},
visualMap: {
top: "center",
left: "left",
type: "continuous"
},
series: [
{
type: "map",
mapType: "china",
roam: true,
label: {
show: true,
color: "black"
},
labelLayout(params) {
return {
hideOverlap: true,
fontSize: Math.max(params.rect.width / 10, 8)
};
},
data: [
{ name: "北京", value: 350000 },
{ name: "天津", value: 120000 },
{ name: "上海", value: 300000 },
{ name: "重庆", value: 92000 },
{ name: "河北", value: 25000 },
{ name: "河南", value: 20000 },
{ name: "云南", value: 500 },
{ name: "辽宁", value: 3050 },
{ name: "黑龙江", value: 80000 },
{ name: "湖南", value: 2000 },
{ name: "安徽", value: 24580 },
{ name: "山东", value: 40629 },
{ name: "新疆", value: 36981 },
{ name: "江苏", value: 13569 },
{ name: "浙江", value: 24956 },
{ name: "江西", value: 15194 },
{ name: "湖北", value: 41398 },
{ name: "广西", value: 41150 },
{ name: "甘肃", value: 17630 },
{ name: "山西", value: 27370 },
{ name: "内蒙古", value: 27370 },
{ name: "陕西", value: 97208 },
{ name: "吉林", value: 88290 },
{ name: "福建", value: 19978 },
{ name: "贵州", value: 94485 },
{ name: "广东", value: 89426 },
{ name: "青海", value: 35484 },
{ name: "西藏", value: 97413 },
{ name: "四川", value: 54161 },
{ name: "宁夏", value: 56515 },
{ name: "海南", value: 54871 },
{ name: "台湾", value: 48544 },
{ name: "香港", value: 49474 },
{ name: "澳门", value: 34594 }
],
emphasis: {
label: { show: true },
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
select: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
});
onMounted(() => {
let myChart = echarts.init(document.querySelector("#chinaMap"));
myChart.showLoading();
echarts.registerMap("china", chinaJson);
myChart.setOption(state.option);
myChart.hideLoading();
});