vue Echarts5 离线下载china.json配置

项目场景：

"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)
				          })
				      })
			},
	}
	
}复制

效果图：