DataV.GeoAtlas地理小工具：http://datav.aliyun.com/portal/school/atlas/area_selector
echarts+vue，main.js中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
index.vue
import chinaJson from "@/common/echart/china.json";
this.$echarts.registerMap("china", chinaJson);
this.echart.setOption(this.mapOptions)
window.addEventListener('resize', () => {
this.echart.resize()
})
mapOptions:{
silent:true,
layoutCenter:['35%','48.8%'],//地图位置
layoutSize:'98%',//地图大小
geo: {
left:'1000',
zoom: 1.5,
},
title: {
text: '地市分布',
show: false
},
tooltip: {
trigger: 'item',
backgroundColor:"transparent",//弹窗背景色
formatter: function (val) {
return `<div style="background-image: url(${require('../../assets/img/wangsheng.png')})"><div>`//弹窗样式
}
},
series: [{
name: '数量',
type: 'map',
mapType: "china",
zoom: 1.2,
mapLocation:{
},
itemStyle:{
borderWidth: 1,//边际线大小
borderColor:'#42ABEB',//边界线颜色
areaColor:'rgba(0, 0, 0, 0.1)',
emphasis:{//鼠标移入样式
borderWidth:2,
borderColor:'rgba(106,7,17,1)',
areaColor: 'rgba(106,7,17,0.7)',
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
label: {
normal: {show: true,
textStyle: {
fontSize: 18,
color: '#FFFFFF'
}},
emphasis: {show: true}
},
data:[{name:“云南”,value:11}]
}]
}
地图数据轮询
var _self = this;
const dataLength = chinaJson.features.length+1;
// 用定时器控制高亮
this.mTime = setInterval(() => {
// 清除之前的高亮
_self.echart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: _self.index
});
_self.echart.dispatchAction({
type: 'hideTip',
seriesIndex: 0,
dataIndex: _self.index
});
_self.index++;
// 当前下标高亮
_self.echart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: _self.index
});
_self.echart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: _self.index
});
if (_self.index > dataLength) {
_self.index = 0;
}
}, 5000);
鼠标移入轮询结束，移出轮询开始
this.echart.off('mouseover')
this.echart.on("mouseover", (params) => {
this.echart.dispatchAction({
type: 'downplay'
});
clearInterval(this.mTime);
});
this.echart.off('mouseout')
this.echart.on("mouseout", (params) => {
this.timeout();//轮询函数开始
});
地图数据数组从下标0开始遍历，showTip和hideTip不能放的太近，会失效
地图点击事件
this.echart.off('click')
this.echart.on('click',(params)=>{
this.echarts.registerMap("china", chinaJson);//省份下钻，地图重新渲染
})
