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

布满荆棘的人生 2021-07-24 22:22 482阅读 0赞

(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);

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 3]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 4]

代码示例:

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
        }
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/3f6405ae780747b792637da70de50db2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201016170814915.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201016172938715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201022143456966.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210724/87270bb80f4f4df3a51cf9142a6b3eb1.png