代码参考来自 <https://www.cnblogs.com/lude1994/p/12482355.html>

json数据自己收集保存，包含世界坐标、全国坐标及各省份内的坐标

附代码及json数据下载：https://download.csdn.net/download/loa_loa/19339991?spm=1001.2014.3001.5503

地图json数据：

http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json

1.安装echarts

npm install echarts --save

2.在main.js中引入

import echarts from 'echarts';//引入遇到报错 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’//新版本需要使用该代码引入 ：const echarts = require('echarts');import 'echarts/map/js/china.js'; //node_modules中 官方依赖已不提供map文件 需要自行导入其中Vue.prototype.$echarts = echarts

3.在页面中使用：

<div ref="map" style="height:300px;" ></div>

4.将函数写在methods中，然后再mounted中调用

js函数方法：

getmap() {// 基于准备好的dom(myEchartPillar)，初始化echarts实例let myChart = this.$echarts.init(this.$refs.map);this.$echarts.registerMap('china',china);var mapName = 'china'var data = [{code: "10",name: "其他",value: 5},{code: "11",name: "北京市",value: 26},{code: "12",name: "天津市",value: 1},{code: "13",name: "河北省",value: 3},{code: "31",name: "上海市",value: 6},{code: "32",name: "江苏省",value: 8},{code: "33",name: "浙江省",value: 3},{code: "34",name: "安徽省",value: 2},{code: "35",name: "福建省",value: 1},{code: "37",name: "山东省",value: 4},{code: "41",name: "河南省",value: 3},{code: "42",name: "湖北省",value: 3},{code: "44",name: "广东省",value: 25},{code: "61",name: "陕西省",value: 3}];var geoCoordMap = {};var toolTipData= [{code: "10",name: "其他",value: 5},{code: "11",name: "北京市",value: 26},{code: "12",name: "天津市",value: 1},{code: "13",name: "河北省",value: 3},{code: "31",name: "上海市",value: 6},{code: "32",name: "江苏省",value: 8},{code: "33",name: "浙江省",value: 3},{code: "34",name: "安徽省",value: 2},{code: "35",name: "福建省",value: 1},{code: "37",name: "山东省",value: 4},{code: "41",name: "河南省",value: 3},{code: "42",name: "湖北省",value: 3},{code: "44",name: "广东省",value: 25},{code: "61",name: "陕西省",value: 3}];/*获取地图数据*/myChart.showLoading();var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;myChart.hideLoading();mapFeatures.forEach(function(v) {// 地区名称var name = v.properties.name;// 地区经纬度geoCoordMap[name] = v.properties.cp;});var max = 480,min = 9; // todovar maxSize4Pin = 100,minSize4Pin = 20;var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;};//指定图表的配置项和数据，绘制图表myChart.setOption({tooltip: {trigger: 'item',formatter: function(params) {var toolTiphtml = ''if (typeof(params.value)[2] == "undefined") {for (let i = 0; i < toolTipData.length; i++) {if (params.name == toolTipData[i].name) {toolTiphtml += toolTipData[i].name + '：'+toolTipData[i].value}}console.log(toolTiphtml)// console.log(convertData(data))return toolTiphtml;} else {for (let i = 0; i < toolTipData.length; i++) {if (params.name == toolTipData[i].name) {toolTiphtml += toolTipData[i].name + '：'+toolTipData[i].value}}console.log(toolTiphtml)// console.log(convertData(data))return toolTiphtml;}}},// legend: {//     orient: 'vertical',//     y: 'bottom',//     x: 'right',//     data: ['credit_pm2.5'],//     textStyle: {//         color: '#fff'//     }// },visualMap: {show: true,min: 0,max: 25,left: 'left',top: 'bottom',text: ['高', '低'], // 文本，默认为数值文本calculable: true,seriesIndex: [1],inRange: {color: ['#83c5ff', '#c6eb68'] // 蓝绿}},geo: {show: true,map: mapName,label: {normal: {show: false},emphasis: {show: false,}},roam: true,itemStyle: {normal: {areaColor: '#f8f8f8',borderColor: '#3B5077',},emphasis: {areaColor: '#2B91B7',}}},series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function(val) {return val[2] / 10;},label: {normal: {formatter: '{b}',position: 'right',show: true},emphasis: {show: true}},itemStyle: {normal: {color: '#05C3F9'}}},{type: 'map',map: mapName,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077',},emphasis: {areaColor: '#2B91B7'}},animation: false,data: data},{name: '点',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin', //气泡symbolSize: function(val) {var a = (maxSize4Pin - minSize4Pin) / (max - min);var b = minSize4Pin - a * min;b = maxSize4Pin - a * max;return a * val[2] + b;},label: {normal: {show: true,textStyle: {color: '#fff',fontSize: 9,}}},itemStyle: {normal: {color: '#9c0a16', //标志颜色}},zlevel: 6,data: convertData(data),},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(data.sort(function(a, b) {return b.value - a.value;}).slice(0, 5)),symbolSize: function(val) {return val[2] / 10;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: 'yellow',shadowBlur: 10,shadowColor: 'yellow'}},zlevel: 1},]});//解决自适应setTimeout(function() {window.addEventListener("resize", () => {myChart.resize();});}, 500);}

调用：

this.getmap();

5.效果图

vue 使用echarts地图实现全国地图相关推荐

使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
vue 引入json地图_使用vue+echarts快速进行全国地图与各省市地图联动(下钻地图)，引入省份js文件...
项目源码附js/json地图数据(下载项目源码后请使用Npm install 来安装相关依赖) 效果使用前请使用npm(cnpm)安装echarts,详情见官网. 本文作为笔记demo只引入5个省( ...
vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录前言一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结前言公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...
vue中用echarts 绘制geo 中国地图
前言由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
vue中Echarts实现伪3D地图
1.需求3d切面地图,颜色渐变,选中阴影,可切换地市,点击时展示地理数据,由于echarts 3d地图无法渐变,地图比例大小效果不好改成理想效果,所以通过伪3d方式实现.最终实现如下图: 2.代码 & ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
echarts全国地图资源，省份名称居中
echarts 全国地图资源 echarts全国地图资源全国地图山东黑龙江吉林辽宁北京天津河北河南山西陕西内蒙古安徽江苏上海浙江福建台湾广东香港澳门广西江 ...
vue用 echarts 显示区域地图并用不同颜色显示每个区域
认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年. 用 echarts 做动态中国区域地图或者全国地图效果如下做这些必须先引入echarts 怎么引入的自己 ...
echart之全国地图切换省级地图
这是在基础地图地图的基础上结合echarts2的改进版本,echarts2中的版本只有左上角的全国地图的比较简单的实例代码. <一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实 ...

vue 使用echarts地图实现全国地图