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: '數(shù)量',
??????? ? ? ? type: 'map',
??????? ? ? ? mapType: "china",
? ? ? ? ? ? ? zoom: 1.2,
??????? ? ? ? mapLocation:{
??? ? ? ? ? ? ??},
??? ? ? ? ? ? ??itemStyle:{
? ? ? ? ????????borderWidth: 1,//邊際線大小
? ? ? ? ? ? ? ? borderColor:'#42ABEB',//邊界線顏色
? ? ? ? ? ? ? ? areaColor:'rgba(0, 0, 0, 0.1)',
? ? ? ? ? ? ??????emphasis:{//鼠標(biāo)移入樣式
? ? ? ? ? ? ? ? ? ? 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}]
??????? ? }]
??????? }
地圖數(shù)據(jù)輪詢
? ? ? var _self = this;
? ? ? const dataLength = chinaJson.features.length+1;
? ? ? // 用定時(shí)器控制高亮
? ? ? ? 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++;
? ? ? ? ? ? // 當(dāng)前下標(biāo)高亮
? ? ? ? ? ? _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);
鼠標(biāo)移入輪詢結(jié)束吧雹，移出輪詢開始
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();//輪詢函數(shù)開始
?});
地圖數(shù)據(jù)數(shù)組從下標(biāo)0開始遍歷闲坎，showTip和hideTip不能放的太近魏身，會(huì)失效
地圖點(diǎn)擊事件
this.echart.off('click')
this.echart.on('click',(params)=>{
? ??this.echarts.registerMap("china", chinaJson);//省份下鉆格侯，地圖重新渲染
})
