1.获取地图json工具(仅中国):
http://datav.aliyun.com/tools/atlas/#&lat=42.35854391749705&lng=106.10595703125&zoom=5
2.整理地图json数据工具:
http://geojson.io/#map=2/20.0/0.0
导出类型必须为 geojson,将 .geojson 后缀改成 .json 就可以使用。
vue中使用
<template>
<div>
<div class="chart" id="XXX"></div>
</div>
</template>
<script>
import echarts from "echarts";
import "echarts/map/js/province/(市、县)所在省份.js";
import XXXJSON from "(市、县).json";
export default {
mounted() {
this.$nextTick(() => {
this.initCharts();
});
},
methods: {
initCharts() {
const node = document.getElementById("XXX");
const myChart = echarts.init(node);
echarts.registerMap("(市、县)名", XXXJSON);
myChart.setOption(this.optionsConfig());
window.onresize = () => {
myChart.resize();
};
},
optionsConfig() {
// 市,县信息
let data = [];
// 颜色数组
let colorList = [];
let seriesData = [];
data.forEach((item, index) => {
seriesData.push({
name: item.cityname,
value: item.count,
label: {
show: true,
color: "#fff",
position: ["50%", "50%"],
emphasis: {
//对应的鼠标悬浮效果
show: true,
textStyle: { color: "#fff" }
}
},
itemStyle: {
normal: {
areaColor: colorList[index],
borderColor: "#409eff"
},
emphasis: {
//对应的鼠标悬浮效果
borderWidth: 2,
borderColor: colorList[index],
areaColor: colorList[index]
}
}
});
});
let option = {
tooltip: {
trigger: "item"
},
toolbox: {
show: false,
orient: "vertical",
x: "right",
y: "center",
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: "(市、县)名", // "(市、县)名"一定要和 echarts.registerMap();中的一样
type: "map",
mapType: "(市、县)名", // "(市、县)名"一定要和 echarts.registerMap();中的一样
roam: false,
aspectScale: 1,
zlevel: 10,
zoom: 1.2,
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: seriesData
}
]
};
return option;
}
}
}
</script>