效果圖：
html:
?<div?@click="mapClick"?ref="oroptionmapjsonr"??:style="{width:'100%',height:'100%'}"></div>
vue data:
???oroptionmapjsonr:?{???//地圖option
??????????textStyle:?{
????????????color:?"#9cbfde",
????????????fontSize:?10.67,
??????????},
??????????color:?['#fff'],?//手動(dòng)設(shè)置每個(gè)圖例的顏色
??????????legend:?{
????????????show:?false
??????????},
??????????toolbox:?{
????????????show:?true,
????????????orient:?'vertical',
????????????x:?'right',
????????????y:?'center',
??????????},
??????????roamController:?{
????????????show:?true,
????????????x:?'right',
????????????mapTypeControl:?{
??????????????'china':?true
????????????}
??????????},
??????????series:?[{
????????????name:?'iphoneX',
????????????type:?'map3D',????//設(shè)置3d
????????????mapType:?'china',
????????????roam:?false,
????????????left:?'2%',
????????????top:?'10%',
????????????//?zoom:?1,
????????????//?center:?[115.97,?29.71],
????????????zoom:?13,
????????????center:?[111.999,?37.40],
????????????aspectScale:1,
????????????selectedMode:'single',????//默認(rèn)一個(gè)選中
??????????????//??data:[
??????????????//?????{name:'太古區(qū)',?selected:true}?//?selected:true?默認(rèn)選中
??????????????//?],
????????????//?aspectScale:1,
????????????itemStyle:{
??????????????normal:?{
????????????????color:?{
????????????????????repeat:?'repeat'?
????????????????},
????????????????borderColor:?'rgba(147,?235,?248,?1)',
????????????????borderWidth:?1,
????????????????areaColor:?{
??????????????????type:?'radial',
??????????????????x:?0.5,
??????????????????y:?0.5,
??????????????????r:?0.8,
??????????????????colorStops:?[{
????????????????????offset:?0,
????????????????????color:?'rgba(175,238,238,?0)'
??????????????????},
??????????????????{
????????????????????offset:?1,
????????????????????color:?'rgba(?47,79,79,?.2)'?
??????????????????}],
??????????????????globalCoord:?false?
????????????????},
????????????????shadowColor:?'rgba(116,?232,?252,?0.73)',
????????????????//地圖陰影顏色
????????????????//?shadowColor:?'rgba(255,?255,?255,?1)',
????????????????shadowOffsetX:?-2,
????????????????shadowOffsetY:?2,
????????????????shadowBlur:?10
??????????????},
??????????????emphasis:?{
????????????????areaColor:?'#00c7ff',??//鼠標(biāo)放在地圖的區(qū)域顏色
????????????????borderWidth:?0?//鼠標(biāo)放在地圖的邊框?qū)挾?/p>
??????????????},
????????????},
????????????label:?{
??????????????normal:?{
????????????????show:?true,?????????//是否顯示地區(qū)名稱(chēng)
????????????????color:'#ffffff',?????//字體的顯示顏色
????????????????fontSize:?12?????????//字體大小
??????????????},
??????????????emphasis:?{
????????????????show:?true,
????????????????color:'#ffffff'?????//鼠標(biāo)移動(dòng)上去的字體顏色
??????????????}
????????????},
????????????//?data:?ltopdata
????????????data:[
??????????????{?name?:?'太古區(qū)',?selected?:?true?}? ? ? ? //當(dāng)前太古去是選中狀態(tài)
????????????]
??????????}],
??????????geo:?{
????????????show:?true,
????????????map:?'太古區(qū)',
????????????label:?{
??????????????normal:?{
????????????????show:?false
??????????????},
??????????????emphasis:?{
????????????????show:?false
??????????????}
????????????},
????????????roam:?true,
????????????itemStyle:?{
??????????????normal:?{
????????????????areaColor:?"red",
????????????????borderColor:?"yellow"
??????????????},
??????????????emphasis:?{
????????????????areaColor:?"#2B91B7"
??????????????}
????????????}
??????????},
????????},
引入的js ????定義的參數(shù)
import?chinaJson?from?'echarts/map/json/china.json'? ? ? ? //地圖js 數(shù)據(jù)
??var?ltopdata?=?[
????{???name:?'榆次區(qū)',id:'140702'???},
????{???name:?'太古區(qū)',id:'140726'???},
????{???name:?'祁縣',id:'140727'??},
????{???name:?'平遙縣',id:'140728'???},
????{???name:?'介休市',id:'140781'???},
????{???name:?'靈石縣',id:'140729'???},
????{???name:?'榆社縣',id:'140721'???},
????{???name:?'左權(quán)縣',id:'140722'???},
????{???name:?'和順縣',id:'140723'???},
????{???name:?'昔陽(yáng)縣',id:'140724'???},
????{???name:?'壽陽(yáng)縣',id:'140725'???},
??];
事件：
?echarts()?{?????//MarZhang??2021/3/4????地圖echarts?注冊(cè)
????????this.$echarts.registerMap('china',?chinaJson);
????????var?oroptionmapjsonr_charts?=?this.$echarts.init(this.$refs.oroptionmapjsonr);
????????oroptionmapjsonr_charts.setOption(this.oroptionmapjsonr)
????},
初始化調(diào)取? ? ? ??
?mounted()?
????this.echarts();???//地圖
????//MarZhang??2021/3/4????點(diǎn)擊獲取地圖的選中名稱(chēng)
????var?oroptionmapjsonr =?this.$echarts.init(this.$refs.oroptionmapjsonr);
????oroptionmapjsonr.on('click',?function?(params)?{
????????console.log(params);
????});
版本：
echarts版本? 4.9.0? 自帶中國(guó)地圖和世界地圖的數(shù)據(jù)
