echarts实现贵州地图
1. 添加标签
<div id="elementId" class="guizhou-map" style="width: 600px; height: 400px" ></div>
2.
import * as echarts from "echarts";
import mapGeoJson from "./guizhou.json"; //注册地图的数据
initMap() {
// 构造 tooltip 数据
let outData = {}
mapGeoJson.features.forEach(item=>{
outData[item.properties.name] = Math.floor(Math.random()*1000+1);
})
let option = {
// backgroundColor: "#0E0F35",
// backgroundColor: "#0E0F35",
tooltip: {
show: true,
formatter: function (params) {
return (
" " +
params.name +
" " +
outData[params.name] +
"亿元 "
);
},
},
series: [
{
name: "乡镇地图",
type: "map",
map: "townMap", //使用 registerMap 注册的地图名称
data: [],
label: {
normal: {
show: true,
},
emphasis: {
show: true,
},
},
},
],
};
let myChart = echarts.init(document.getElementById("elementId"));
echarts.registerMap("townMap", mapGeoJson);
option && myChart.setOption(option);
},
浙公网安备 33010602011771号