在vue项目中展示中国地图可以使用echarts库，根据配置数据区分不同颜色展示地图等功能。
先看效果
一、安装Echarts
npm install [email protected] --save 我这里安装的版本号是4.9.0
二、组件中引入js文件
// 引入echarts
import echarts from "echarts";
// 引入js
import "echarts/map/js/china.js";
三、放置一个地图容器
在组件页面中放置一个地图的容器标签，可以给设定宽高样式
<div style="display: flex; justify-content: center">
<div id="map-china" style="width: 1000px; height: 800px"></div>
</div>
四、创建echarts实例并配置地图相关参数
详细配置如下
initMap() {
// 初始化echarts实例
this.chinachart = echarts.init(document.getElementById("map-china"));
// 进行相关配置
this.chartOption = {
// geo配置详解： https://echarts.baidu.com/option.html#geo
geo: {
// 地理坐标系组件用于地图的绘制
map: "china", // 表示中国地图
// roam: true, // 是否开启鼠标缩放和平移漫游
zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
label: {
show: true,
},
itemStyle: {
// 地图区域的多边形 图形样式。
borderColor: "rgba(0, 0, 0, 0.2)",
emphasis: {
// 高亮状态下的多边形和标签样式
shadowBlur: 20,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
series: [
{
name: "各区域人数", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
type: "map",
geoIndex: 0,
label: {
show: true,
},
// 这是需要配置地图上的某个地区的数据（下面是定义的假数据）
data: [
{
name: "湖南", value: 3957 },
{
name: "北京", value: 2665 },
{
name: "上海", value: 1647 },
{
name: "江西", value: 79 },
{
name: "河南", value: 1592 },
{
name: "山西", value: 80 },
{
name: "四川", value: 1399 },
{
name: "湖北", value: 1194 },
{
name: "江苏", value: 1162 },
{
name: "内蒙古", value: 1152 },
{
name: "安徽", value: 354 },
{
name: "辽宁", value: 719 },
{
name: "广东", value: 1697 },
{
name: "浙江", value: 602 },
{
name: "济南", value: 535 },
{
name: "陕西", value: 516 },
{
name: "贵州", value: 470 },
{
name: "山东", value: 429 },
{
name: "云南", value: 429 },
{
name: "广西", value: 421 },
{
name: "吉林", value: 400 },
{
name: "南京", value: 353 },
{
name: "重庆", value: 337 },
{
name: "黑龙江", value: 282 },
{
name: "海南", value: 7 },
{
name: "新疆", value: 279 },
{
name: "福建", value: 213 },
{
name: "河北", value: 192 },
{
name: "天津", value: 166 },
{
name: "宁夏", value: 3 },
{
name: "甘肃", value: 8 },
{
name: "青海", value: 11 },
{
name: "西藏", value: 2 },
],
},
],
tooltip: {
// 鼠标移到图里面的浮动提示框
// formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
formatter(params, ticket, callback) {
// params.data 就是series配置项中的data数据遍历
let localValue, perf, downloadSpeep, usability, point;
if (params.data) {
localValue = params.data.value;
} else {
// 为了防止没有定义数据的时候报错写的
localValue = 0;
}
let htmlStr = `
<div style='font-size:18px;'> ${
params.name}</div>
<p style='text-align:left;margin-top:-10px;'>
区域对应数据value：${
localValue}<br/>
</p>
`;
return htmlStr;
},
backgroundColor:"#ff7f50",//提示标签背景颜色
textStyle:{
color:"#fff"} //提示标签字体颜色
},
// visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
visualMap: {
// 左下角的颜色区域
type: "piecewise", // 定义为分段型 visualMap
min: 0,
max: 1000,
itemWidth: 40,
bottom: 10,
left: 10,
pieces: [
// 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，
// 以及每一段的文字，以及每一段的特别的样式
{
gt: 999, label: ">1000人", color: "#82121b" }, // (1000, ]
{
gt: 100, lte: 999, label: "100-999人", color: "#bb2222" }, // (100, 999]
{
gt: 10, lte: 99, label: "10-99人", color: "#fe7b6c" }, // (10, 99]
{
gt: 0, lte: 9, label: "1-9人", color: "#ffaa85" }, // (0, 9]
],
},
};
// 使用刚指定的配置项和数据显示地图数据
this.chinachart.setOption(this.chartOption);
},
五、页面渲染完毕初始化地图
mounted() {
this.initMap();
},