echarts 地图(区域渐变等)、地图和散点图结合、点击省份进入省份地图(双击切换回来)

(1)地图:
	1、下载矢量地图.json文件	
	
	2、请求.json文件
		var map=await axios.get('./static/矢量地图数据/china.json');
	
	3、注册地图
		echarts.registerMap('chinaMap',map.data);
	
	4、配置geo
		options中和series同级设置
		
		geo:{
	        type:'map',
	        map:'chinaMap',  和注册地图的名称相同
	        roam:true, 	是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成'scale'或者'move'。设置成true为都开启
	        selectedMode:'multiple',   是否显示点击选中地区,'single'|'multiple'
	        label:{   是否显示数据中的name
	          show:true
	        },
	        emphasis:{   设置鼠标滑动高亮样式
	          itemStyle:{
	            color:'purple'
	          }
	        }
	        regions: [{  对指定区域进行配置
               name: '地图上的区域名称',
               itemStyle: {
                   areaColor: 'red',
                   borderColor: 'rgba(0, 10, 52, 1)',

               },
            }],
	        zoom:2,  设置初始化缩放比例
	        center:[87.6,43.79],  设置地图中心点,值为经纬度
	   },

	5、配置数据和类型series
	  	  数据类型:[{name:'省份',value:数值}]
	  	  
		  series:[
	        {
	          type:'map',
	          data:airData,
	          geoIndex:0,  将数据和第一个geo关联在一起
	        }
	      ],
	 
	 6、添加visualMap对地图进行筛选样式
	 	和series同级设置
		
		visualMap:{
	        min:0,   筛选最小值,用来限制数据中的value
	        max:300,		筛选最大值
	        range: [4, 15],   定义初始筛选值
	        inRange: {   选中样式的渐变色样式,个数无要求
	            color: ['red', 'orange', 'green'],
	        },
	        outOfRange:{	未选中样式的渐变色样式,个数无要求,需设置calculable
	          color:['purple','blue']
	        },
	        hoverLink:true,   使得筛选器会有数值显示
	        calculable:true,   增加首尾三角筛选器,使得outOfRange可以显示
	        orient:'horizontal'  定义筛选器方向,'vertical'
	      }

(2)地图和散点图结合:
	1、配置散点图数据
		[[经度,纬度],[精度,纬度]]
	
	2、在地图的配置基础上,series中配置散点图
       {
         type:'effectScatter',  
         data:scatterData,
         coordinateSystem:'geo',   将散点图坐标系更改为地理坐标系
         rippleEffect:{		设置涟漪动画
           scale:10,
           color:'purple'
         }
       }
       
(3)点击省份进入省份地图(双击切换回来)
	1、监听地图点击事件
		当点击时,获取到省份名称,然后根据名称获取到省份地图矢量数据
		
	2、当未曾注册过省份地图时
		(1)echarts.registerMap注册;
		
		(2)设置option={
			    geo:{
                    map:'注册地图名称'
                }
			}
	    (3)echarts.init对象.setOption(option);
	    
   3、双击屏幕切换回原来地图
	   	监听整个容器的双击事件,事件中调用
   	      const option={
              geo:{
                  map:'之前注册的地图'
              }
          }
          echarts.init对象.setOption(option);

效果图:

代码示例:

export default {
  name: 'App',
  mounted:async function(){


    var myMap=echarts.init(document.querySelector('.map'));
    
    var airData = [  //name必须和省份保持一致
        { name: '北京', value: 39.92 },
        { name: '天津', value: 39.13 },
        { name: '上海', value: 31.22 },
        { name: '重庆', value: 66 },
        { name: '河北', value: 147 },
        { name: '河南', value: 113 },
        { name: '云南', value: 25.04 },
        { name: '辽宁', value: 50 },
        { name: '黑龙江', value: 114 },
        { name: '湖南', value: 175 },
        { name: '安徽', value: 117 },
        { name: '山东', value: 92 },
        { name: '新疆', value: 84 },
        { name: '江苏', value: 67 },
        { name: '浙江', value: 84 },
        { name: '江西', value: 96 },
        { name: '湖北', value: 273 },
        { name: '广西', value: 59 },
        { name: '甘肃', value: 99 },
        { name: '山西', value: 39 },
        { name: '内蒙古', value: 58 },
        { name: '陕西', value: 61 },
        { name: '吉林', value: 51 },
        { name: '福建', value: 29 },
        { name: '贵州', value: 71 },
        { name: '广东', value: 38 },
        { name: '青海', value: 57 },
        { name: '西藏', value: 24 },
        { name: '四川', value: 58 },
        { name: '宁夏', value: 52 },
        { name: '海南', value: 54 },
        { name: '台湾', value: 88 },
        { name: '香港', value: 66 },
        { name: '澳门', value: 77 },
        { name: '南海诸岛', value: 55 }
    ]
    
    //数据类型一
    // var scatterData = [
    //   {
    //     value: [117.283042, 31.86119]
    //   },
    //   {
    //     value: [86, 49]
    //   }
    // ]
	
	//数据类型二
    var scatterData=[[117.283042, 31.86119],[86, 49]]

    var map=await axios.get('./static/矢量地图数据/china.json');

    echarts.registerMap('chinaMap',map.data);


    var option = {
      geo:{
        type:'map',
        map:'chinaMap',
        roam:true, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成'scale'或者'move'。设置成true为都开启
        // selectedMode:'multiple',  //是否点击选中地区,'single'|'multiple'
        label:{
          show:true
        },
        emphasis:{	//设置鼠标滑动高亮样式
          itemStyle:{
            color:'purple'
          }
        }
        
        // zoom:2,  //设置初始化缩放比例
        // center:[87.6,43.79],  //设置地图中心点,值为经纬度
      },
      series:[
        {
          type:'map',
          data:airData,
          geoIndex:0,  //将数据和第一个geo关联在一起

        },
        {
          type:'effectScatter',
          data:scatterData,
          coordinateSystem:'geo',
          rippleEffect:{
            scale:10,
            color:'purple'
          }
        }
      ],
      visualMap:{
        min:0,
        max:300,
        // range: [4, 15],  //定义初始筛选值
        inRange: {
            color: ['red', 'orange', 'green'],
        },
        outOfRange:{
          color:['purple','blue']
        },
        hoverLink:true,  //使得筛选器会有数值显示
        calculable:true, //增加首尾三角筛选器,使得outOfRange可以显示
        // orient:'horizontal'  定义筛选器方向,'vertical'
      }
    };

    myMap.setOption(option);


  }
}

省份切换:

<template>
   <div class='s-c'>
     <div class='s-chart' ref='map' @dblclick="backChina">
       
     </div>
   </div>
</template>

<script>
import axios from 'axios';
import {getProvinceMapInfo} from '../utils/pingying'

export default {
  name:'trender',
  data(){
    return{
      myMap:null,
      data:[],
      mapCity:{}
    }
  },
  mounted()
  {
      this._initChart();
      this._getData();
      window.onresize=this._resize;
      //第一次适配调用
      this._resize();
      
  },
  destroyed()
  {
      window.removeEventListener('resize',this._resize);
  },
  methods:{
      async _initChart()
      {
          this.myMap=this.$echarts.init(this.$refs.map,'chalk');
          
          //配置地图
          var map=await this.$axios.get('http://localhost:8080/static/map/china.json');
          this.$echarts.registerMap('chinaMap',map.data);


          const option={
            title: {
                text: '▎ 商家分布',
                left: 20,
                top: 20
            },
            geo: {
                type: 'map',
                map: 'chinaMap',
                top: '5%',
                bottom: '5%',
                itemStyle: {
                    areaColor: '#2E72BF',
                    borderColor: '#333'
                },
                label:{   
                    show:true
                },
            },
            legend: {
                left: '5%',
                bottom: '5%',
                orient: 'vertical'
            }

          };
          this.myMap.setOption(option);
          
          //点击监听,获取点击省份的矢量地图数据
          this.myMap.on('click',async (e)=>{

              let path=getProvinceMapInfo(e.name);
              
              //是否已经注册过
              if(!this.mapCity[path.key])
              {
                let res= await axios.get(path.path);
                this.mapCity[path.key]=res.data
                //注册地图
                this.$echarts.registerMap(path.key,res.data);
              }
                const option={
                    geo:{
                        map:path.key
                    }
                }
                this.myMap.setOption(option);
              
          })    
      },
      async _getData()
      {
          let res=await this.$axios.get('/api/map');
          this.data=res.data;

          this._updateChart();
      },
      _updateChart()
      {
          let scatter=this.data.map((item,index)=>{
              //一个类别的多个散点
              return{
                  type:'effectScatter',
                  name:item.name,
                  data:item.children,
                  coordinateSystem:'geo',
                  rippleEffect:{		
                    scale:10,
                    
                  }
              }
          })

          let legendArr=this.data.map((item,index)=>{
              return item.name
          })

          const option={
            legend:{
                data:legendArr
            },
            series:scatter,
          };
          this.myMap.setOption(option);
      },
      _resize()
      {
          let container = this.$refs.map.offsetWidth;
          let titleFontSize=container/100*3.6;
          const option={
              title:{
                  textStyle:{
                      fontSize:titleFontSize
                  }
              },
              legend:{
                  itemWidth:titleFontSize/2,
                  itemHeight:titleFontSize/2,
                  textStyle:{
                      fontSize:titleFontSize/2
                  }
              }
          };

          this.myMap.setOption(option);
          this.myMap.resize();
      },
      //双击回到中国地图
      backChina()
      {
          const option={
              geo:{
                  map:'chinaMap'
              }
          }
          this.myMap.setOption(option);
      }
  }

}
</script>

<style lang='less' scoped>
.s-c{
    width: 100%;
    height:100%;
    .s-chart{
      width: 100%;
      height:100%;
    }
}
</style>

工具代码:

const name2pinyin = {
    安徽: 'anhui',
    陕西: 'shanxi1',
    澳门: 'aomen',
    北京: 'beijing',
    重庆: 'chongqing',
    福建: 'fujian',
    甘肃: 'gansu',
    广东: 'guangdong',
    广西: 'guangxi',
    贵州: 'guizhou',
    海南: 'hainan',
    河北: 'hebei',
    黑龙江: 'heilongjiang',
    河南: 'henan',
    湖北: 'hubei',
    湖南: 'hunan',
    江苏: 'jiangsu',
    江西: 'jiangxi',
    吉林: 'jilin',
    辽宁: 'liaoning',
    内蒙古: 'neimenggu',
    宁夏: 'ningxia',
    青海: 'qinghai',
    山东: 'shandong',
    上海: 'shanghai',
    山西: 'shanxi',
    四川: 'sichuan',
    台湾: 'taiwan',
    天津: 'tianjin',
    香港: 'xianggang',
    新疆: 'xinjiang',
    西藏: 'xizang',
    云南: 'yunnan',
    浙江: 'zhejiang'
  }
  
  export function getProvinceMapInfo (arg) {
    const path = `http://localhost:8080/static/map/province/${name2pinyin[arg]}.json`
    return {
      key: name2pinyin[arg],
      path: path
    }
  }