## :-: 全国地图：宏观的显示不同地理位置的数据差异（map） ``` <div style="width:600px;height:400px;margin:100px auto;border:1px solid red" id="chart"></div> ``` 1.先下载echarts地图json数据 2.请求json数据，注册到echarts ``` chart(){ //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); //通过axios（也可以通过jquery）获取本地的地图json数据（要放在publi文件夹下） this.$http.get('http://localhost:8080/china.json').then(res=>{ console.log(res) //通过echarts注册地图数据 this.$echarts.registerMap('chinaMap',res.data);//对象名，数据 // 配置项,尽量放在axios数据请求内，先注册，再使用 var option = { geo : { type : 'map',//地图类型 map : 'chinaMap',//注册到全局的对象，依赖的数据 roam : true,//是否允许缩放和拖动 //名称配置 label : { show : true,//显示 }, zoom : 1,//初始化缩放比例，默认1 // center : [87.617733,43.792818],//设置地图中心点的坐标，json中有经纬度 } }; myCharts.setOption(option); }) }, ``` 常规显示： :-:  ## 空气质量图配置： ``` //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); //空气质量数据 var airData = [ {name:'北京',value :35.8}, {name:'上海',value :38.8}, {name:'天津',value :48.9}, {name:'河北',value :41.8}, {name:'河南',value :62.8}, {name:'云南',value :58.4}, {name:'新疆',value :42.4}, {name:'辽宁',value :42.6}, {name:'江西',value :46.6}, {name:'广东',value :51.6}, {name:'江苏',value :41.6}, {name:'安徽',value :56.6}, {name:'黑龙江',value :45.6}, {name:'湖南',value :49.6}, ]; //通过axios（也可以通过jquery）获取本地的地图json数据（要放在publi文件夹下） this.$http.get('http://localhost:8080/china.json').then(res=>{ console.log(res) //通过echarts注册地图数据 this.$echarts.registerMap('chinaMap',res.data);//对象名，数据 // 配置项,尽量放在axios数据请求内，先注册，再使用 var option = { title : { text : "全国空气质量", }, geo : { type : 'map',//地图类型 map : 'chinaMap',//注册到全局的对象，依赖的数据 roam : true,//是否允许缩放和拖动 //名称配置 label : { show : true,//显示 }, zoom : 1,//初始化缩放比例，默认1 // center : [87.617733,43.792818],//设置地图中心点的坐标，json中有经纬度 }, //关联geo配置 series : [ { data : airData, geoIndex : 0,//将数据和第0个geo配置关联在一起 type : 'map', }], //数据颜色控制 visualMap : { min : 0,//最小值 max : 300,//最大值 inRange : { color : ['white','red'],//控制颜色渐变的范围 }, calculable : true,//出现滑块效果，筛选数据 } }; myCharts.setOption(option); }) ``` 空气质量： :-:  ## :-: 地图配合散点图显示出涟漪效果 ``` chart(){ //初始化 var myCharts = this.$echarts.init(document.getElementById('chart')); //空气质量数据 var airData = [ {name:'北京',value :35.8}, {name:'上海',value :38.8}, {name:'天津',value :48.9}, {name:'河北',value :41.8}, {name:'河南',value :62.8}, {name:'云南',value :58.4}, {name:'新疆',value :42.4}, {name:'辽宁',value :42.6}, {name:'江西',value :46.6}, {name:'广东',value :51.6}, {name:'江苏',value :41.6}, {name:'安徽',value :56.6}, {name:'黑龙江',value :45.6}, {name:'湖南',value :49.6}, ]; //坐标信息，地图和散点配合使用 var sctterData = [ {value:[117.283042,31.86119]}, ]; //通过axios（也可以通过jquery）获取本地的地图json数据（要放在publi文件夹下） this.$http.get('http://localhost:8080/china.json').then(res=>{ console.log(res) //通过echarts注册地图数据 this.$echarts.registerMap('chinaMap',res.data);//对象名，数据 // 配置项,尽量放在axios数据请求内，先注册，再使用 var option = { title : { text : "全国空气质量", }, geo : { type : 'map',//地图类型 map : 'chinaMap',//注册到全局的对象，依赖的数据 roam : true,//是否允许缩放和拖动 //名称配置 label : { show : true,//显示 }, zoom : 1,//初始化缩放比例，默认1 // center : [87.617733,43.792818],//设置地图中心点的坐标，json中有经纬度 }, series : [ { data : airData, geoIndex : 0,//将数据和第0个geo配置关联在一起 type : 'map', }, { data : sctterData,//配置散点的坐标数据 type : 'effectScatter',//涟漪动画类型 coordinateSystem : 'geo',//指明散点的坐标系统 geo的坐标系统 rippleEffect : {//涟漪效果样式 scale : 10, color : 'red' } } ], visualMap : { min : 0,//最小值 max : 300,//最大值 inRange : { color : ['white','red'],//控制颜色渐变的范围 }, calculable : true,//出现滑块效果，筛选数据 } }; myCharts.setOption(option); }) }, ``` 地图涟漪效果