1. 绘制地图使用的相关网站
2. Vue3项目的创建
2.1 Vue3项目创建的过程不再赘述,如果不会创建的小伙伴,请查看我之前的文章
2.2 安装 Echarts
2.2.1 进入到项目根目录下执行:npm install echarts
2.3 安装 axios 网络请求库(为了获取地图的网络数据)
2.3.1 npm install axios
3. Echarts绘制地图
3.1 项目src目录下创建api文件夹(用来存储获取地图数据的请求API)
3.2 项目src目录下创建json文件夹(用来存储地图相关的json格式数据)
3.3 获取地图的的相关数据,登录
3.3.1 左边是地图,右边显示的是左边选择区域的数据,如:JSON:API 等, 其右侧有JSON数据的链接地址,可以选择下载下来,也可以使用在线地址。
3.3.2 如左边选择河北省,右边会出来河北省对应的数据,如下图所示
3.4 在api目录下创建getChineseMap.js 文件(获取中国地图的数据)
3.4.1 内容为
import axios from 'axios'
export default axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
4. Echart地图配置
4.1 清空App.vue中多余的代码,只保留vue结构代码
<template>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
4.2 在对应的vue文件中,引入Echarts及对应的地图数据
import * as echarts from 'echarts';
import getChineseMap from './api/getChineseMap';
4.3 准备绘制地图的容器
<div style="width:800px;height:600px" ref="chartsDOM"></div>
注意:容器需要提前设置其宽/高, ref标记是为了对应vue获取dom的节点
4.4 绘制地图
4.4.1 地图在加载页面的时候,就应该将数据加载进去,在vue中使用mounted函数进行数据的预先加载
4.4.2 整个页面代码如下:
<template>
<div style="width:800px;height:600px" ref="chartsDOM"></div>
</template>
<script>
import * as echarts from 'echarts';
import getChineseMap from './api/getChineseMap';
import { onMounted } from 'vue';
export default {
name: 'App',
mounted: function(){
// 初始化统计图对象
var mapChart = echarts.init(this.$refs["chartsDOM"]);
// 显示 loading 动画
mapChart.showLoading();
// 获取数据并进行地图绘制
getChineseMap.then(res => {
// 关闭动画
mapChart.hideLoading();
// 注册地图数据
echarts.registerMap('Chinese', res.data);
var option = {
series: [
{
name: '中国地图',
type: 'map',
map: 'Chinese',// 此处map的内容与echarts.registerMap中自定义的名字一直
label: {
show: true
}
}
]
};
mapChart.setOption(option);
})
}
}
</script>
<style>
</style>
4.5 启动项目,并访问项目
至此中国地图绘制完成,如果打算绘制其他省份的地图,只需要将地图获取json数据地址进行修改即可
5. 地图颜色配置
5.1 根据每个区域的数据,可以设置每个区域的显示颜色
5.2 具体代码如下
<template>
<div style="width:800px;height:600px" ref="chartsDOM"></div>
</template>
<script>
import * as echarts from 'echarts';
import getChineseMap from './api/getChineseMap';
import { onMounted } from 'vue';
export default {
name: 'App',
mounted: function(){
// 初始化统计图对象
var mapChart = echarts.init(this.$refs["chartsDOM"]);
// 显示 loading 动画
mapChart.showLoading();
// 获取数据并进行地图绘制
getChineseMap.then(res => {
// 关闭动画
mapChart.hideLoading();
// 注册地图数据
echarts.registerMap('Chinese', res.data);
var option = {
//-地图配置属性
visualMap:{
min: 10,
max: 100,
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
title: {
text: '全国XXX质量的清空统计'
},
series: [
{
name: '中国地图',
type: 'map',
map: 'Chinese',// 此处map的内容与echarts.registerMap中自定义的名字一直
label: {
show: true
},
data: [
{ name: '河北省', value: 30 },
{ name: '河南省', value: 50 },
{ name: '陕西省', value: 30 },
{ name: '江西省', value: 70 },
{ name: '浙江省', value: 90 },
{ name: '云南省', value: 80 },
{ name: '青海省', value: 60 },
{ name: '内蒙古自治区', value: 5 },
]
},
]
};
mapChart.setOption(option);
})
}
}
</script>
<style>
</style>
5.3 运行结果图
更多Echarts配置信息,请查看Echarts官网:Apache ECharts
Echarts 地图 配置手册,请查看:Documentation - Apache ECharts