效果如上图，开始默认为全国地图，选择省或者市渲染为对应的地图
index.html
<script type="text/javascript" src="/maps?v=1.4.15&key=你的key&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.PlaceSearch,AMap.Autocomplete,AMap.Pixel,AMap.DistrictSearch"></script><!-- UI组件库 1.0 --><script src="/ui/1.0/main.js?v=1.0.11"></script>
mixin.js
import AMap from 'AMap';import AMapUI from 'AMapUI';export default {data() {return {district: null,country: {},proObj: {},provinceList: [{id: '110000',name: '北京市'},{id: '120000',name: '天津市'},{id: '130000',name: '河北省'},{id: '140000',name: '山西省'},{id: '150000',name: '内蒙古自治区'},{id: '210000',name: '辽宁省'},{id: '220000',name: '吉林省'},{id: '230000',name: '黑龙江省'},{id: '310000',name: '上海市'},{id: '320000',name: '江苏省'},{id: '330000',name: '浙江省'},{id: '340000',name: '安徽省'},{id: '350000',name: '福建省'},{id: '360000',name: '江西省'},{id: '370000',name: '山东省'},{id: '410000',name: '河南省'},{id: '420000',name: '湖北省'},{id: '430000',name: '湖南省'},{id: '440000',name: '广东省'},{id: '450000',name: '广西壮族自治区'},{id: '460000',name: '海南省'},{id: '500000',name: '重庆市'},{id: '510000',name: '四川省'},{id: '520000',name: '贵州省'},{id: '530000',name: '云南省'},{id: '540000',name: '西藏自治区'},{id: '610000',name: '陕西省'},{id: '620000',name: '甘肃省'},{id: '630000',name: '青海省'},{id: '640000',name: '宁夏回族自治区'},{id: '650000',name: '新疆维吾尔自治区'},{id: '710000',name: '台湾省'},{id: '810000',name: '香港特别行政区'},{id: '820000',name: '澳门特别行政区'}],cityList: [],show: false,showFence: false,select: {},selectCity: {}};},components: {},mounted() {this.init();},methods: {init() {this.opts = {subdistrict: 1, //返回下一级行政区showbiz: false //最后一级返回街道信息};this.district = new AMap.DistrictSearch(this.opts); //注意：需要使用插件同步下发功能才能这样直接使用// this.district.search('全国', (status, result) => { // 默认值是全国，status （complete，error,no_data）// console.log(result);// if (status == 'complete') {//this.loadMapData(100000); // 可以初始化provinceList// }// });},// 可以获取 boundaries new AMap.Polygon 画边界线searchMap(cityCode, flag = false) {this.district.search(cityCode, (status, result) => {console.log(result);if (status == 'complete') {this.loadMapData(cityCode, flag);}});},// 行政边界查询loadMapData(areaCode, flag = false) {AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {//创建一个实例var districtExplorer = (window.districtExplorer = new DistrictExplorer({eventSupport: true, //打开事件支持map: this.map}));districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {if (error) {console.error(error);return;}let mapJson = {};mapJson.type = 'FeatureCollection';mapJson.features = areaNode.getSubFeatures();this.mapJson = mapJson;console.log(mapJson);// 直辖市 就不用格式化市级下拉if (!flag &&areaCode != 110000 &&areaCode != 120000 &&areaCode != 310000 &&areaCode != 500000 &&areaCode != 810000 &&areaCode != 820000)this.formatCity(mapJson);this.setChartOption([]);});});},// 格式化 城市列表formatCity(mapJson) {if (!mapJson) return;let cityList = mapJson.features.map((item) => {return { name: item.properties.name, id: item.properties.adcode };});this.cityList = cityList;},// 选择省chose(row) {this.select = row;this.show = false;this.showFence = false;this.selectCity = {};this.cityList = [];this.loadMapData(row.id);},// 选择市choseFence(row) {this.selectCity = row;this.showFence = false;this.loadMapData(row.id, true);}}};
map.vue
<template><div class="chart-wrap" :style="chartWrapStyle"><!-- 社区下拉框 --><div class="drop-down"><chart-box class="full-height"><div class="display-flex align-items-center drop-con position-relative"><div class="drop-left flex-1" @click="show = !show">{{ select.name ? select.name : '选择省' }}</div><div class="drop-icon"><imgclass="more-icon"src="../icons/more.png":style="{transform: show ? 'rotate(180deg)' : 'rotate(0deg)'}"alt=""/></div><div class="drop-list position-absolute" :class="{ show }"><divclass="list-item"v-for="(item, index) in provinceList":key="index"@click="chose(item)":title="item.name">{{ item.name }}</div></div></div></chart-box></div><!-- 围栏下拉框 --><div class="drop-down drop-down1"><chart-box class="full-height"><div class="display-flex align-items-center drop-con position-relative"><divclass="drop-left flex-1"@click="showFence = !showFence":title="selectCity.name">{{ selectCity.name ? selectCity.name : '选择市' }}</div><div class="drop-icon"><imgclass="more-icon"src="../icons/more.png":style="{transform: showFence ? 'rotate(180deg)' : 'rotate(0deg)'}"alt=""/></div><div class="drop-list position-absolute" :class="{ show: showFence }"><divclass="list-item"v-for="(item, index) in cityList":key="index":title="item.name"@click="choseFence(item)">{{ item.name }}</div></div></div></chart-box></div><div :id="domId" class="chart-content"></div></div></template><script>// import echarts from 'echarts';import chengdu_geo from '../china.json';import { autoTooltipMap } from '@/utils/echarts-auto-tooltip-map'; import mixn from '../mixin';import ChartBox from '@/components/ChartBox.vue'; // 只是一个边框样式export default {name: 'MapChart',props: {domId: {type: String,default: ''},chartData: {type: Array,default: () => []},chartStyle: {type: String,default: ''}},components: { ChartBox },mixins: [mixn],data() {return {chart: null,timer: null,mapJson: chengdu_geo,optionline: {tooltip: {trigger: 'item',formatter: function(params) {},textStyle: {color: 'rgba(218, 218, 218, 1)',fontSize: 12},extraCssText: `background:rgba(46,49,73,1);border:1px solid rgba(108,118,150,1);opacity:0.8;width:130px;height:65px;box-sizing: border-box`},geo: [//重合边线高亮{map: 'CD',zoom: 1.1,aspectScale: 0.85,roam: false,top: '7%',z: 1,itemStyle: {normal: {areaColor: '#031A3C',borderColor: '#0F98FF',borderWidth: 3,shadowColor: '#0F98FF',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 0}}},//错开的阴影{map: 'CD',aspectScale: 0.85, //长宽比zoom: 1.1,top: '10%',roam: false,itemStyle: {normal: {areaColor: '#031A3C',shadowColor: '#0F98FF',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 35},emphasis: {areaColor: '#031A3C',borderWidth: 0,color: 'green',label: {show: false}}}}],series: [{name: '机构数量',type: 'map',aspectScale: 0.85,mapType: 'CD', // 自定义扩展图表类型label: {normal: {show: true,textStyle: {color: '#fff'}},emphasis: {textStyle: {color: '#fff'}}// position: 'inside'},zoom: 1.1,itemStyle: {normal: {areaColor: '#081439',borderColor: '#1c6bc4'},emphasis: {areaColor: '#233E93',color: '#FFFFFF'}},top: '7%',data: []},{name: '订单数量',type: 'map',mapType: 'CD', // 自定义扩展图表类型label: {normal: {show: true,textStyle: {color: '#fff'}},emphasis: {textStyle: {color: '#fff'}}// position: 'inside'},zoom: 1.1,itemStyle: {normal: {areaColor: '#081439',borderColor: '#1c6bc4'},emphasis: {areaColor: '#233E93',color: '#FFFFFF'}},top: '5%',data: []},{type: 'effectScatter',coordinateSystem: 'geo',// geoIndex: 0,zlevel: 100,symbolSize: function(params) {let num = 0;console.log(params);if (params.length > 2) {let size = params[2] / 100;num = size > 20 ? 20 : size < 10 ? 10 : size;}return [num, num];},// z: 100,showEffectOn: 'render',rippleEffect: {period: 55,scale: 3,brushType: 'fill'},hoverAnimation: true,itemStyle: {normal: {color: '#00CFF9',shadowBlur: 9,shadowColor: '#31C1FF'},emphasis: {color: '#E6B214',shadowBlur: 9,shadowColor: '#FED27A'}},data: []}]}};},watch: {chartData: {handler(newData, oldData) {// this.setChartOption(newData);},deep: true,immediate: true}},created() {},mounted() {this.setChartOption([]);// this.drawLine();this.$once('hook:beforeDestroy', () => {clearInterval(this.timer);});},computed: {chartWrapStyle() {return `${this.chartStyle}`;}},methods: {formatToolip() {let _this = this;this.optionline.tooltip.formatter = function(params) {//定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面var res = ''; //`<div style="color:rgba(187,210,255,1);font-weight:500;">${params.name}</div>`;// console.log(params);//定义一个变量来保存series数据系列var myseries = _this.optionline.series;//循环遍历series数据系列for (var i = 0; i < myseries.length - 1; i++) {//在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示for (var k = 0; k < myseries[i].data.length; k++) {//console.log(myseries[i].data[k].name);//如果data数据中的name和地区名称一样if (myseries[i].data[k].name === params.name) {//将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中res = `<div style="text-align: left;margin: 6px 0"><p style='margin-bottom:5px;font-size:12px;font-weight: 400;color: #F9F9F9;line-height: 22px;'>${myseries[i].data[k].name}</p><span style='color:#E6B214;margin-right:10px;'>订单数量:</span> <span style="font-family: Bebas;">${myseries[i].data[k].value}</span>个</div>`;}}}return res;};},drawLine: function(chartData) {//基于准本好的DOM，初始化echarts实例let dataTip = [];let dataScatter = [];// chartData = chartData.concat([// { areaCode: 510104, suborderCount: 12 },// { areaCode: 510106, suborderCount: 22 },// { areaCode: 510131, suborderCount: 127 },// { areaCode: 510105, suborderCount: 12 },// { areaCode: 510181, suborderCount: 92 },// { areaCode: 510183, suborderCount: 12 },// { areaCode: 510185, suborderCount: 12 }// ]);if (chartData.length > 0) {chartData.forEach((item) => {let current = this.mapJson.features.find((child) => {return child.properties.adcode == item.areaCode;});if (!current) return;dataTip.push({name: current.properties.name,value: item.suborderCount});dataScatter.push({name: current.properties.name,value: [...current.properties.center, item.suborderCount]});});}this.optionline.series[1].data = dataTip;this.optionline.series[0].data = dataTip;this.optionline.series[2].data = dataScatter;this.formatToolip();console.log(this.optionline.series);this.$echarts.registerMap('CD', this.mapJson);this.$echarts.init(document.getElementById(this.domId)).dispose();let chart = this.$echarts.init(document.getElementById(this.domId));chart.setOption(this.optionline);console.log(dataTip);if (dataTip.length > 0)this.timer = autoTooltipMap(chart, dataTip.length);// });},setChartOption(chartData) {chartData = [{ areaCode: 510104, suborderCount: 12 },{ areaCode: 510106, suborderCount: 22 },{ areaCode: 510131, suborderCount: 127 }];if (chartData.length < 1) return;this.drawLine(chartData);}}};</script><style scoped lang="scss">.chart-wrap {height: 100%;position: relative;.chart-content {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}}.top-item,.main-list,.drop-down,.drop-list {background: rgba($color: #0a1740, $alpha: 0.5);}.drop-down {position: absolute;left: 0px;top: 0px;width: 232px;height: 50px;z-index: 99;cursor: pointer;.drop-con {padding: 0 20px 0 16px;font-size: 16px;font-weight: 400;color: #f9f9f9;line-height: 50px;text-align: left;}.drop-list {width: 100%;top: 70px;left: 0;height: 0;z-index: 99;border: 1px solid #0f3f64;border-width: 0;transition: all 0.6s;overflow: hidden;font-size: 16px;text-indent: 20px;&.show {height: 500px;border-width: 1px;overflow: auto;}&::-webkit-scrollbar {/*滚动条整体样式*/width: 1px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px;}& .list-item:nth-of-type(odd) {background: rgba(9, 61, 110, 0.2);}.list-item:hover {background: rgba(9, 61, 110, 0.2);}}.more-icon {width: 16px;height: 10px;transition: all 0.5s;}}.drop-down1 {left: 252px;}</style>
