## :-: 全國地圖：宏觀的顯示不同地理位置的數據差異（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); }) }, ``` 地圖漣漪效果