Vue组件首先需要引入echarts包和中国地图数据，
import echarts from 'echarts'import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
有几点需要注意：
1.地图中需要的json数据需要包含主要：name:"省份名称必须为简称（如：陕西），不能带“省”字“,value:坐标（可以为省会的坐标）；
2.组件接收数据的时候需要对数据进行监听（watch: {}）;
以下为具体代码（其中包含我的项目中一些业务逻辑，及触发事件仅供参考）：
这里简述一下大概的业务：该组件包含：中国地图并显示每个省份的业务数量，要有冒泡效果和鼠标移动效果，事件：点击有业务数量的省份时页面右下方展示该省份项目信息，用户再次点击项目信息便可跳转到相应的页面。下面截图：
正文：
HTML部分：
<template><div class='echarts'><div class="map-china3" v-if="!isShangTou"><el-card shadow="always" body-style="padding: 10px;height: 150px;"><h4 class="h4-css-map">新加坡</h4><hr class="hr-css-map"><div @click="singaporeProList('新加坡')"><el-tooltip class="tool-item" effect="dark" placement="top"><div slot="content">在建项目数量<br />新加坡 : {{singaporeNum}}</div><div style='position:relative; width:150px; height:100px;padding-top:40px;'><div style='position:absolute; z-index:2; '><svg-icon icon-class="singapore"></svg-icon></div><div v-if="this.singaporeNum != 0" ><div style='position:absolute; z-index:3;'><img style="padding-left: 60px; padding-top: 45px;" src="@/assets/company/point.png"></div><div style='position:absolute; z-index:4;'><div style="padding-top: 42px; padding-left: 62px; font-size: 15px; color: #eee;">{{singaporeNum}}</div></div></div></div></el-tooltip></div></el-card></div><div class="map-layer" id="map" :style="{height:'900px',width:'100%',top:'-90px',}" ref='myEchart'></div><div class="map-projects"><div class="projectList"><el-card shadow="always" body-style="padding: 10px;"><h4 class="h4-css-font">选择{{projectName}}地区项目</h4><hr class="hr-css-map-project"><ul v-if="projectLists.length > 0"><li v-for="(item,index) of projectLists" :key="index" style="font-size: 15px;"><svg-icon icon-class="tagtwo" class="icon-css-public" /><a @click="toProject(item.projectid,item.projectname)" type="font-size: 8px;" :title="formatTitle(item.projectname)">{{formatName(item.projectname)}}</a></li></ul><ul v-else><li class="none">暂无数据</li></ul></el-card></div></div></div></template>
Javascript部分：
<script>import echarts from 'echarts'import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据import logo from '../../assets/company/icrelogo.png'import {getToken,setAuthType,setToken,setLineId,setArea,setSectionLine,setSectionId} from '@/utils/auth'import {getSectionLineDataByProId } from '../../api/company/comIndex'export default {name: 'echarts',props: ['userJson', 'mapDatas', 'messageList'],created() {const data = JSON.parse(getToken())if (data.code === 'wangyi') {this.isShangTou = true}},watch: {mapDatas(curVal, oldVal) {var _this = thisfor (var i = 0; i < _this.mapDatas.length; i++) {var count = _this.mapDatas[i].projectlist.lengthfor (var j = 0; j < _this.dataqi.length; j++) {if (_this.dataqi[j].name === _this.mapDatas[i].name) {_this.dataqi[j].value.push(count)_this.dataqi[j].value.push('在建项目数量')_this.dataqi[j].tooltip = _this.dataqi[j].name + ': ' + count_this.dataqi[j].project = _this.mapDatas[i].projectlist_this.dataqi2.push(_this.dataqi[j])}}if (_this.mapDatas[i].name === '新加坡') {_this.singaporeNum = count}_this.mapData.push({name: _this.mapDatas[i].name,value: count,project: _this.mapDatas[i].projectlist})}for (var k = 0; k < _this.dataqi.length; k++) {for (var n = 0; n < _this.mapDatas.length; n++) {if (_this.dataqi[k].name !== _this.mapDatas[n].name) {_this.mapData.push({name: _this.dataqi[k].name,value: 0,project: []})}}}if (curVal) {_this.chinaConfigure()}},projectLists(curVal, oldVal) {if (curVal) {this.chinaConfigure()}}},methods: {formatName(projectname) {if (projectname.length > 10) {return projectname.substring(0, 10) + '...'}return projectname},formatTitle(title) {return '点击进入 ' + title},singaporeProList(str) {var _this = this_this.projectLists = []for (var i = 0; i < _this.mapDatas.length; i++) {_this.projectName = strif (_this.mapDatas[i].name === str) {_this.projectLists = _this.mapDatas[i].projectlist}}},toProjectOpen() {setAuthType('project')const str = location.href.split('#')[0]window.open(`${str}#/project/projectinfo?type=1`)},toProject: function(projectId, projectName) {var _this = thisvar toKenData = JSON.parse(getToken())toKenData.project_id = projectIdtoKenData.project_name = projectNamesetToken(JSON.stringify(toKenData))getSectionLineDataByProId(toKenData.token, projectId).then(response => {if (response.data.code === 1) {setArea(JSON.stringify(response.data.data))var sections = response.data.data.sectionvar sectionIdvar sectionLinevar lineIdif (sections.length > 0) {for (var i = 0; i < sections.length; i++) {if (sections[i].line.length > 0) {for (var k = 0; k < sections[i].line.length; k++) {if (sections[i].line[k].lineId !== '') {lineId = sections[i].line[k].lineIdsectionLine =sections[i].sectionName +' / ' +sections[i].line[k].lineNamesectionId = sections[i].sectionIdbreak}}}setSectionId(sectionId)setSectionLine(sectionLine)setLineId(lineId)_this.toProjectOpen()break}} else {_this.toProjectOpen()}}})},mapFeatures: function() {return echarts.getMap('china').geoJson.mapFeatures},chinaConfigure() {const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置window.onresize = myChart.resizemyChart.setOption({// 进行相关配置backgroundColor: 'rgba(255, 255, 255, 0.5)',tooltip: {}, // 鼠标移到图里面的浮动提示框title: {text: '',subtext: '',x: 'right',textStyle: {color: 'rgb(55, 75, 113)',fontFamily: '等线',fontSize: '15'},subtextStyle: {fontSize: '15',fontFamily: '18'}},visualMap: {show: false,min: 0,max: 10,text: ['高', '低'],calculable: true,inRange: {color: ['#6A9DFF', 'blue']}},geo: {// 这个是重点配置区map: 'china', // 表示中国地图roam: false, // 支持扩大缩小label: {normal: {show: false, // 是否显示对应地名textStyle: {color: '#FFFFFF',fontSize: 15}},emphasis: {show: false}},itemStyle: {normal: {areaColor: {type: 'radial',x: 0.5,y: 0.6,r: 2.2,colorStops: [{offset: 1,color: '#6A9DFF' // 0% 处的颜色},{offset: 0,color: '#6A9DFF' // 100% 处的颜色}],globalCoord: false},borderColor: '#D3D3D3' // 鼠标移动到省份边框颜色},emphasis: {areaColor: 'rgba(39, 17, 235, 0.5)', // 鼠标移动到省份显示的颜色shadowBlur: 15,borderWidth: 1,shadowColor: 'rgba(39, 17, 235, 0.5)' // 鼠标移动地图周围阴影}}},series: [{name: '在建项目数量', // 浮动框的标题type: 'map',geoIndex: 0,data: this.mapData},{name: '在建项目数量',type: 'effectScatter',coordinateSystem: 'geo',data: this.dataqi2,symbolSize: function(val) {var sizeb = val[2] * val[2] / 6 + 8if (sizeb > 20) {sizeb = 20}return sizeb},rippleEffect: {brushType: 'stroke'},label: {normal: {formatter: '{b}',position: 'right',show: true,color: '#00FFFF',fontSize: 15}},itemStyle: {normal: {color: 'yellow'}}},{name: '在建项目数量',type: 'scatter',symbol: 'pin',coordinateSystem: 'geo',data: this.dataqi2,symbolSize: function(val) {var sizeb = val[2] * 3.5 + 20if (sizeb > 50) {sizeb = 50}return sizeb},label: {normal: {formatter: '{@[2]}',textStyle: {color: '#FFF',fontSize: 16},show: true}},itemStyle: {normal: {color: '#F62157',show: true}}}]})var adm = thismyChart.on('click', function(params) {if (!params.data.project === null) {adm.projectName = params.nameadm.projectLists = []} else {adm.projectName = params.nameadm.projectLists = params.data.project}})}},data() {return {skipType: 0,imgUrl: logo,isShangTou: false,chart: null,mapData: [],projectLists: [],projectName: '省市',activeName: '1',dataqi: [{name: '新疆',value: [87.500966, 43.983832],tooltip: '',project: []},{name: '西藏',value: [90.959657, 29.881987],tooltip: '',project: []},{name: '青海',value: [101.703679, 36.733408],tooltip: '',project: []},{name: '甘肃',value: [103.764176, 36.198433],tooltip: '',project: []},{name: '内蒙古',value: [111.711808, 40.98898],tooltip: '',project: []},{name: '宁夏',value: [106.192619, 38.605171],tooltip: '',project: []},{name: '四川',value: [103.984944, 30.712171],tooltip: '',project: []},{name: '云南',value: [102.733927, 25.025991],tooltip: '',project: []},{name: '陕西',value: [109.491289, 34.455365],tooltip: '',project: []},{name: '山西',value: [111.84183, 37.510421],tooltip: '',project: []},{name: '重庆',value: [106.413387, 29.689402],tooltip: '',project: []},{name: '贵州',value: [106.560565, 26.756654],tooltip: '',project: []},{name: '广西',value: [108.326706, 22.99805],tooltip: '',project: []},{name: '海南',value: [110.129641, 20.14162],tooltip: '',project: []},{name: '广东',value: [113.183592, 23.87],tooltip: '',project: []},{name: '澳门',value: [113.551538, 22.109432],tooltip: '',project: []},{name: '香港',value: [114.066662, 22.588638],tooltip: '',project: []},{name: '台湾',value: [121.49917, 25.12653],tooltip: '',project: []},{name: '福建',value: [119.107522, 26.193691],tooltip: '',project: []},{name: '江西',value: [115.722419, 28.882959],tooltip: '',project: []},{name: '湖南',value: [112.778851, 28.363482],tooltip: '',project: []},{name: '湖北',value: [114.177046, 30.743959],tooltip: '',project: []},{name: '安徽',value: [117.120614, 31.943998],tooltip: '',project: []},{name: '浙江',value: [119.990592, 30.361806],tooltip: '',project: []},{name: '江苏',value: [118.665986, 32.194658],tooltip: '',project: []},{name: '河南',value: [113.441154, 34.8448],tooltip: '',project: []},{name: '山东',value: [116.973435, 36.763019],tooltip: '',project: []},{name: '上海',value: [121.315197, 31.314325],tooltip: '',project: []},{name: '河北',value: [114.397814, 38.170754],tooltip: '',project: []},{name: '天津',value: [117.194203, 39.180291],tooltip: '',project: []},{name: '北京',value: [116.384722, 39.977552],tooltip: '',project: []},{name: '辽宁',value: [123.412489, 41.875105],tooltip: '',project: []},{name: '吉林',value: [125.252219, 43.850841],tooltip: '',project: []},{name: '黑龙江',value: [126.503235, 45.865719],tooltip: '',project: []}],dataqi2: [],singaporeNum: 0}}}</script>
style部分：
<style rel='stylesheet/scss' lang='scss' scoped>.map-china {color: rgba(0, 0, 0, 0);}.map-china3 {position: absolute;z-index: 1;opacity: 0.9;left: 9%;bottom: -680px;font-size: 150px;}.map-layer {position: absolute;left: 10px;top: -40px;width: 10px;}.map-projects {position: absolute;z-index: 1;opacity: 1;height: 160px;right: 0px;bottom: 0px;top: 500px;}.projectList {position: absolute;right: 20px;bottom: -20px;width: 220px;border-radius: 12px;}.projectList ul {background-color: rgb(255, 255, 255);list-style: none;margin: 5px;padding: 0px;border-radius: 3px;}.projectList ul li {line-height: 30px;text-align: left;width: 100%;}.projectList ul li a {color: #7c8286;}.projectList ul li.none {color: #7c8286;text-align: center;font-size: 15px;}.hr-css-map {margin-top: 0px;margin-bottom: -50px;border: 0;border-top: 1px solid #eee;}.hr-css-map-project {margin-top: 0px;margin-bottom: 0px;border: 0;border-top: 1px solid #eee;}.icon-css-public {width: 15px;height: 15px;color: rgb(63, 86, 192);}.h4-css-map {margin-top: -5px;margin-bottom: 5px;font-size: 15px;}.tool-item {margin: 4px;font-size: 15;}</style>
