1、安装echarts依赖
npm install echarts --save
2、main.js中引入echarts
import echarts from 'echarts';//引入echartsVue.prototype.$echarts = echarts;
3、HTML部分
<!-- 地图容器div --><div class="overview_mian_mapBox" id="mapChart" ref="mapChart" ></div>
4、JS部分
引入json文件
<!-- 按需引入省市对应json -->import china from '../../public/mapJson/china' //引入中国地图json数据import anhui from '../../public/mapJson/anhui'import aomen from '../../public/mapJson/aomen'import beijing from '../../public/mapJson/beijing'import chongqing from '../../public/mapJson/chongqing'import fujian from '../../public/mapJson/fujian'import gansu from '../../public/mapJson/gansu'....
数据及方法
export default {data(){return{map: {center: {lng: 112,lat: 37},zoom: 10,markList: [],clickMarkIndex: '',},mapOption: {tooltip: {trigger: 'item',backgroundColor: 'rgba(11, 24, 84, 0.8)',borderColor: '#0008ff',borderWidth: 1,padding: 15,textStyle:{textAlign: 'center'},formatter: function (params) {var alarmLevel;if(params.data.value[2] > 4){alarmLevel = '正常'}else{alarmLevel = "故障等级：" + params.data.value[2] + "级"}return "点位名称：" + params.data.name + "<br />" + alarmLevel;}},visualMap: {show: true,type: 'continuous',min: 1,max: 5,top: '5%',left: 'center',text: ['正常', '一级警告'],textStyle: {color: '#fff'},//dimension: 2, //指定用数据的『哪个维度』，映射到视觉元素上inverse: true, //是否反转 visualMap 组件seriesIndex: [0,1], //指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。color: ['#6ff22d', '#00fff0', '#dedb00', '#ff9c00', '#fd045f'],calculable: true, //显示拖拽手柄realtime: true, //拖拽时，是否实时更新orient: 'horizontal', //水平放置组件align: 'left', //指定组件中手柄和文字的摆放位置hoverLink: true, //鼠标位置对应的数值 在 图表中对应的图形元素，会高亮range:[1, 5]},roamController: {show: true,x: "right",mapTypeControl: {china: true}},geo: {roam: true,zoom: 1.2,label: {normal: {show: false,color: '#fff'},emphasis: {show: true,color: '#eeeeee'}},itemStyle: {normal: {areaColor: '#047ec9',borderColor: '#060c50',borderWidth: 1.5,shadowColor: '#02aae0',shadowBlur: 15},emphasis: {areaColor: '#0654b2'}}},series: [{type: "effectScatter",//带有涟漪特效动画的散点（气泡）图coordinateSystem: "geo",symbolSize: 7,rippleEffect: {//涟漪特效period: 4, //动画时间，值越小速度越快brushType: "fill", //波纹绘制方式 stroke, fillscale: 3 //波纹圆环最大限制，值越大波纹越大},legendHoverLink: true, //是否启用图例 hover 时的联动高亮。hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。}]},//标注点数据格式pointList:[{ name:'测试点位1', value:[112.669449492188, 37.8167617011719, 1]},{ name:'测试点位2', value:[112.680682402344, 37.9509682441406, 2]},{ name:'测试点位3', value:[112.349537382813, 37.941322248047, 3]},{ name:'测试点位4', value:[112.095592070313, 38.1639479804688, 4]},{ name:'测试点位5', value:[112.417345, 38.0238430000001, 99]}],mapCityCode:'',}},methods:{drawMapChart(){switch(this.mapCityCode){case "china":this.$echarts.registerMap('city', china);break;case "anhui":this.$echarts.registerMap('city', anhui);break;case "aomen":this.$echarts.registerMap('city', aomen);break;case "beijing":this.$echarts.registerMap('city', beijing);break;case "chongqing":this.$echarts.registerMap('city', chongqing);break;case "fujian":this.$echarts.registerMap('city', fujian);break;case "gansu":this.$echarts.registerMap('city', gansu);break;case "guangdong":this.$echarts.registerMap('city', guangdong);break;case "guangxi":this.$echarts.registerMap('city', guangxi);break;case "guizhou":this.$echarts.registerMap('city', guizhou);break;case "hainan":this.$echarts.registerMap('city', hainan);break;case "henan":this.$echarts.registerMap('city', henan);break;case "heilongjiang":this.$echarts.registerMap('city', heilongjiang);break;case "hebei":this.$echarts.registerMap('city', hebei);break;case "hubei":this.$echarts.registerMap('city', hubei);break;case "hunan":this.$echarts.registerMap('city', hunan);break;case "jiangsu":this.$echarts.registerMap('city', jiangsu);break;case "jiangxi":this.$echarts.registerMap('city', jiangxi);break;case "jilin":this.$echarts.registerMap('city', jilin);break;case "liaoning":this.$echarts.registerMap('city', liaoning);break;case "neimenggu":this.$echarts.registerMap('city', neimenggu);break;case "ningxia":this.$echarts.registerMap('city', ningxia);break;case "qinghai":this.$echarts.registerMap('city', qinghai);break;case "shandong":this.$echarts.registerMap('city', shandong);break;case "shanghai":this.$echarts.registerMap('city', shanghai);break;case "shanxi":this.$echarts.registerMap('city', shanxi);break;case "shanxi1":this.$echarts.registerMap('city', shanxi1);break;case "sichuan":this.$echarts.registerMap('city', sichuan);break;case "taiwan":this.$echarts.registerMap('city', taiwan);break;case "tianjin":this.$echarts.registerMap('city', tianjin);break;case "world":this.$echarts.registerMap('city', world);break;case "xianggang":this.$echarts.registerMap('city', xianggang);break;case "xinjiang":this.$echarts.registerMap('city', xinjiang);break;case "xizang":this.$echarts.registerMap('city', xizang);break;case "yunnan":this.$echarts.registerMap('city', yunnan);break;case "zhejiang":this.$echarts.registerMap('city', zhejiang);break;}var mapChart = this.$echarts.init(document.getElementById('mapChart'));if(mapChart.getOption()){this.mapOption.visualMap.range = mapChart.getOption().visualMap[0].range; //获取手柄位置，刷新地图数据手柄位置不变}this.mapOption.geo.map = 'city';this.mapOption.series[0].data = this.pointList;mapChart.setOption(this.mapOption, true);var provinces = ['shanghai', 'heibei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjing', 'chongqing', 'xianggang', 'aomen', 'taiwan'];var provincesText = ['上海','河北', '山西', '内蒙古', '辽宁','吉林', '黑龙江', '江苏', '浙江','安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东','广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆','北京', '天津','重庆','香港','澳门', '台湾'];var that = this;mapChart.on('click', function (param) {that.mapCityCode = provinces[provincesText.indexOf(param.name)] || 'china'that.getProvinceMapOpt()})},//显示各省地图getProvinceMapOpt(){switch(this.mapCityCode){case "china": //此处代表省级回跳全国，也可下跳各市县，同理全国点击跳转省this.$echarts.registerMap('city', china);break;case "anhui":this.$echarts.registerMap('city', anhui);break;case "aomen":this.$echarts.registerMap('city', aomen);break;case "beijing":this.$echarts.registerMap('city', beijing);break;case "chongqing":this.$echarts.registerMap('city', chongqing);break;case "fujian":this.$echarts.registerMap('city', fujian);break;case "gansu":this.$echarts.registerMap('city', gansu);break;case "guangdong":this.$echarts.registerMap('city', guangdong);break;case "guangxi":this.$echarts.registerMap('city', guangxi);break;case "guizhou":this.$echarts.registerMap('city', guizhou);break;case "hainan":this.$echarts.registerMap('city', hainan);break;case "henan":this.$echarts.registerMap('city', henan);break;case "heilongjiang":this.$echarts.registerMap('city', heilongjiang);break;case "hebei":this.$echarts.registerMap('city', hebei);break;case "hubei":this.$echarts.registerMap('city', hubei);break;case "hunan":this.$echarts.registerMap('city', hunan);break;case "jiangsu":this.$echarts.registerMap('city', jiangsu);break;case "jiangxi":this.$echarts.registerMap('city', jiangxi);break;case "jilin":this.$echarts.registerMap('city', jilin);break;case "liaoning":this.$echarts.registerMap('city', liaoning);break;case "neimenggu":this.$echarts.registerMap('city', neimenggu);break;case "ningxia":this.$echarts.registerMap('city', ningxia);break;case "qinghai":this.$echarts.registerMap('city', qinghai);break;case "shandong":this.$echarts.registerMap('city', shandong);break;case "shanghai":this.$echarts.registerMap('city', shanghai);break;case "shanxi":this.$echarts.registerMap('city', shanxi);break;case "shanxi1":this.$echarts.registerMap('city', shanxi1);break;case "sichuan":this.$echarts.registerMap('city', sichuan);break;case "taiwan":this.$echarts.registerMap('city', taiwan);break;case "tianjin":this.$echarts.registerMap('city', tianjin);break;case "world":this.$echarts.registerMap('city', world);break;case "xianggang":this.$echarts.registerMap('city', xianggang);break;case "xinjiang":this.$echarts.registerMap('city', xinjiang);break;case "xizang":this.$echarts.registerMap('city', xizang);break;case "yunnan":this.$echarts.registerMap('city', yunnan);break;case "zhejiang":this.$echarts.registerMap('city', zhejiang);break;}var mapChart = this.$echarts.init(document.getElementById('mapChart'));if(mapChart.getOption()){this.mapOption.visualMap.range = mapChart.getOption().visualMap[0].range;}this.mapOption.geo.map = 'city';this.mapOption.series[0].data = this.pointList;mapChart.setOption(this.mapOption, true);},},mounted() {this.drawMapChart();}}
5、CSS部分
/*设置容器宽高*/.overview_mian_mapBox{width: 100%;height: 100%;}
6、效果
全国展示
北京市（在全国展示中点击北京市区域进入）
另附：JSON文件下载地址
