项目场景：
"vue": "^2.7.14",
"echarts": "^5.3.3",
项目场景：项目要使用中国地图以及四川地图
问题描述
Echarts官方在5+版本中移除了echarts/map/china.js文件
解决方案：
离线下载china.json文件并引入配置
下载地址：DataV.GeoAtlas地理小工具系列
这个地址里面也可以下载市级的离线json文件
1.引入
// 引入echart初始数据
let $echarts = require("echarts/lib/echarts");
import axios from 'axios'2.配置
<template>
<div class="bom-right0" ref="mapEcharts">
</template>
export default {
data() {
return {
seriesData: [
{name: '四川省', value: 20057.34},
{name: '湖南省', value: 15477.48},
{name: '内蒙古自治区', value: 31686.1},
],
map: null
}
},
mounted() {
this.drawChina();
},
methods: {
drawChina() {
axios.get('/china.json').then(res => {
console.log(res);
// 使用数据注册地图
$echarts.registerMap('china', res.data)
this.$nextTick(() => {
// 初始化地图
this.map = $echarts.init(this.$refs['mapEcharts'])
// 设置基础配置项
const option = {
// 标题
title:{
text:'用户位置分布图',
x:'center',
textStyle: {
color:'rgb(16,16,16)',
fontSize:18,
fontWeight:'bold',
}
},
// 数据和类型
series: [
{
type: "map",
map: "china",
roam: true, //是否开启鼠标缩放和平移漫游
label: {
normal: {
show: true, //省份名称
textStyle: { color: "#000" }
},
emphasis: { show: false }
},
data: this.seriesData //数据
}
],
visualMap:{
min: 0,
max: 50000,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['#BEDEFE', '#74B8FC', '#2690FA']
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return `${params.name}: ${params.value || 0}`
}
},
}
// 将配置应用到地图上
this.map.setOption(option)
})
})
},
}
}3.china效果图展示
4.优化
地图出来了 但是不想要下面的诸岛
找了一下改良版本chinaChange.json
下载地址：map: vue echart map - Gitee.com
注意name要和地图上保持一致才能生效
seriesData: [
{name: '四川', value: 20057.34},//name要和地图上保持一致才能生效
{name: '湖南', value: 15477.48},
{name: '内蒙古', value: 31686.1},
],效果图：
5.四川省json
其实和china.json使用配置差不多
<template>
<div class="bom-right0" ref="mapEcharts">
</template>
export default {
data() {
return {
seriesData: [
{name: '成都市', value: 20057.34},
{name: '广元市', value: 15477.48},
{name: '南充市', value: 31686.1},
{name: '绵阳市', value: 6992.6},
{name: '泸州市', value: 44045.49},
{name: '甘孜藏族自治州', value: 4045.49},
],
map: null
}
},
mounted() {
this.drawSc();
},
methods: {
drawSc() {
axios.get('/sichuan.json').then(res => {
console.log(res);
// 使用数据注册地图
$echarts.registerMap('sichuan', res.data)
this.$nextTick(() => {
// 初始化地图
this.map = $echarts.init(this.$refs['mapEcharts'])
// 设置基础配置项
const option = {
// 标题
title:{
text:'用户位置分布图',
x:'center',
textStyle: {
color:'rgb(16,16,16)',
fontSize:18,
fontWeight:'bold',
}
},
// 数据和类型
series: [
{
type: "map",
map: "sichuan",//这里要和注册地图的名字保持一致
roam: true, //是否开启鼠标缩放和平移漫游
label: {
normal: {
show: true, //省份名称
textStyle: { color: "#000" }
},
emphasis: { show: false }
},
data: this.seriesData //数据
}
],
visualMap:{
min: 0,
max: 50000,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['#BEDEFE', '#74B8FC', '#2690FA']
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return `${params.name}: ${params.value || 0}`
}
},
}
// 将配置应用到地图上
this.map.setOption(option)
})
})
},
}
}效果图： 
