效果图：
html:
<div @click="mapClick" ref="oroptionmapjsonr" :style="{width:'100%',height:'100%'}"></div>
vue data:
oroptionmapjsonr: { //地图option
textStyle: {
color: "#9cbfde",
fontSize: 10.67,
},
color: ['#fff'], //手动设置每个图例的颜色
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', //设置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', //默认一个选中
// data:[
// {name:'太古区', selected:true} // selected:true 默认选中
// ],
// 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', //鼠标放在地图的区域颜色
borderWidth: 0 //鼠标放在地图的边框宽度
},
},
label: {
normal: {
show: true, //是否显示地区名称
color:'#ffffff', //字体的显示颜色
fontSize: 12 //字体大小
},
emphasis: {
show: true,
color:'#ffffff' //鼠标移动上去的字体颜色
}
},
// data: ltopdata
data:[
{ name : '太古区', selected : true } //当前太古去是选中状态
]
}],
geo: {
show: true,
map: '太古区',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: "red",
borderColor: "yellow"
},
emphasis: {
areaColor: "#2B91B7"
}
}
},
},
引入的js 定义的参数
import chinaJson from 'echarts/map/json/china.json' //地图js 数据
var ltopdata = [
{ name: '榆次区',id:'140702' },
{ name: '太古区',id:'140726' },
{ name: '祁县',id:'140727' },
{ name: '平遥县',id:'140728' },
{ name: '介休市',id:'140781' },
{ name: '灵石县',id:'140729' },
{ name: '榆社县',id:'140721' },
{ name: '左权县',id:'140722' },
{ name: '和顺县',id:'140723' },
{ name: '昔阳县',id:'140724' },
{ name: '寿阳县',id:'140725' },
];
事件：
echarts() { //MarZhang 2021/3/4 地图echarts 注册
this.$echarts.registerMap('china', chinaJson);
var oroptionmapjsonr_charts = this.$echarts.init(this.$refs.oroptionmapjsonr);
oroptionmapjsonr_charts.setOption(this.oroptionmapjsonr)
},
初始化调取
mounted()
this.echarts(); //地图
//MarZhang 2021/3/4 点击获取地图的选中名称
var oroptionmapjsonr = this.$echarts.init(this.$refs.oroptionmapjsonr);
oroptionmapjsonr.on('click', function (params) {
console.log(params);
});
版本：
echarts版本 4.9.0 自带中国地图和世界地图的数据
