效果图
一.准备json
1.考虑是否存在已经有人写好的地图json,贴上网站(最小单位市)
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
2.若实在没有,则要自己绘制地图,贴上网站
http://geojson.io/#map=2/20.0/0.0
以长春净月潭为例,先放大地图
点击右侧多边形工具,分区截取,这里截了三块
可以看到,随着截取地图,右边出现了同等的json代码,截取完毕后先不着急拷贝
点击各个区域,添加属性name,再输入值,这样后续就不用再处理了
添加选区,不能添加marker,否则会无法运行。
全部完成后,在vue项目的static文件夹中新建一个changli.json(文件名自定,注意和下文的对应),将网页里右侧的json代码拷贝进去
二.使用echart
<div style="width:500px;height:500px" ref="chart"></div>
export default {
data() {
return {};
},
methods: {
getEchart() {
let that = this;
that.axios.get("../../static/changli.json").then(data => {
that.$echarts.registerMap("changli", data.data);
let chart = that.$echarts.init(that.$refs.chart);
chart.setOption({
tooltip: {
trigger: "item"
},
series: [
{
type: "map",
map: "changli",
data: [
{ name: "北区", value: 100 },
{ name: "南区", value: 100 },
{ name: "东区", value: 10 }
]
}
]
});
});
}
},
mounted() {
this.getEchart();
}
};