你手頭或許有包含地理坐標的數(shù)據(jù)似将，比如產(chǎn)品在不同地區(qū)被使用的情況氏淑。苦于手頭缺乏可用的工具簿训，你或許只能利用這些數(shù)據(jù)做扇形圖或者直方圖。現(xiàn)在你知道ECharts支持空間數(shù)據(jù)的可視化米间，那么為什么不試著在地圖上展示你的數(shù)據(jù)呢煎楣？
現(xiàn)在請跟隨筆者完成下面這張圖表，它描述的是2017年全國主要城市的工業(yè)及居民用電情況（筆者非常熱愛自己的國家车伞，但是由于統(tǒng)計方式的不同，數(shù)據(jù)中不包含香港澳門及臺灣的結(jié)果）喻喳。
數(shù)據(jù)來源：《中國城市統(tǒng)計年鑒-2018》（收錄了2017年全國各級城市社會經(jīng)濟發(fā)展等方面的主要統(tǒng)計數(shù)據(jù)）另玖。
正式開始
-
數(shù)據(jù)獲取：
本次的數(shù)據(jù)來源已經(jīng)給出。筆者通過鈔能力獲得了年鑒的 pdf 版本（412頁）谦去，其中342-349頁為主要城市用水慷丽、用電情況。筆者使用 wps 將需要的內(nèi)容分割出來鳄哭，并轉(zhuǎn)化為 word 版本要糊，將之粘貼到 excel 表中，調(diào)整格式妆丘，最終得到了可用的數(shù)據(jù)（筆者這種脫褲子放屁的操作源于 pdf 轉(zhuǎn) excel 的結(jié)果完全無法使用锄俄，格式全崩，但是 word 結(jié)果非常完美勺拣，粘貼到 excel 表中即可使用）奶赠。并且從網(wǎng)絡(luò)上可以免費獲得全國主要城市區(qū)縣的經(jīng)緯度數(shù)據(jù)。
現(xiàn)在药有，你已經(jīng)得到了本次繪制圖表所需的全部數(shù)據(jù)毅戈。
-
數(shù)據(jù)分析：
現(xiàn)在我們簡要分析一下數(shù)據(jù)的準確性，并將其轉(zhuǎn)化為 [json] 格式愤惰，以供直接使用苇经。
我們注意到部分城市的數(shù)據(jù)出現(xiàn)了缺失（這很正常），由于其數(shù)量不多宦言，故填充為0∩鹊ィ現(xiàn)在我們檢查一下，是否共計31個省市自治區(qū)（答案是“是的”）蜡励，現(xiàn)在應該沒有問題了令花，我們使用表格工具，將excel表內(nèi)容轉(zhuǎn)化為 [json] 格式凉倚。
兩個數(shù)據(jù)分別是：
數(shù)據(jù)準備全部完成兼都，接下來我們準備繪制初始圖表。
-
初始圖表+圖表美化：
有了上個散點圖的基礎(chǔ)稽寒，地圖的繪制也變得相當簡單扮碧。散點還是散點，只是坐標系換成了地圖杏糙，坐標值是經(jīng)緯度慎王。
-
我們引入ECharts，使用 [jsonp] 方式引入經(jīng)緯坐標宏侍、工業(yè)和居民用電的數(shù)據(jù)赖淤。
筆者認為有必要詳細介紹一下[jsonp]方法（盡量用通俗語句）：
為什么我不能隨意引用數(shù)據(jù)？因為瀏覽器出于安全考慮谅河，會禁止引用非同源的數(shù)據(jù)（非同源也就是地址不同咱旱，外部的數(shù)據(jù)難以保證安全性）确丢，但是函數(shù)并不受限制；
那我應該怎么辦吐限？所以我們需要做的就是將數(shù)據(jù)封裝在函數(shù)中鲜侥，讀者如果閱讀前文提供的 [json] 數(shù)據(jù)，就會發(fā)現(xiàn)數(shù)據(jù)全都被封裝在了一個函數(shù)中（比如居民用電數(shù)據(jù)就被封裝在 'cityValueHousehold' 這個函數(shù)的括號中）诸典；
我接下來該如何引用數(shù)據(jù)描函？你首先需要創(chuàng)建一個回調(diào)函數(shù)，并且函數(shù)名稱要與 [json] 數(shù)據(jù)中的函數(shù)名相同狐粱。然后在后文新建一個<script type="text/javascript" src="文件地址?callback=函數(shù)名"></script>引入數(shù)據(jù)來源并且調(diào)用回調(diào)函數(shù)舀寓，這樣你回調(diào)函數(shù)中的 [data] 變量就是你的數(shù)據(jù)本身了，這時你可以將數(shù)據(jù)賦給一個全局變量（下方代碼中經(jīng)緯度和工業(yè)用電量）脑奠，或者直接調(diào)用它（居民用電量）基公；
如果還有不懂，請聯(lián)系作者（guo842400579@gmail.com）宋欺。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jslib/jquery/jquery.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大泻涠埂（寬高）的Dom --> <div id="main" style="width:100%;height:900px;"></div> <script type="text/javascript"> // 基于準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); //jsonp方式 引入經(jīng)緯坐標數(shù)據(jù)的方法齿诞，下方使用回調(diào)函數(shù)為全局變量 geoCoordMap 賦值 var geoCoordMap = []; function geoMap(data){ geoCoordMap = data; }; //引入工業(yè)用電量的方法酸休，下方使用回調(diào)函數(shù)為全局變量 elcforIndustrialValue 賦值 var elcforIndustrialValue = []; function cityValueIndustrial(data){ elcforIndustrialValue = data; console.log(elcforIndustrialValue); }; //引入居民用電量的方法，函數(shù)中的 data 即為對應 json 中的數(shù)據(jù) function cityValueHousehold(data){ //后續(xù)編碼在此處進行 //后續(xù)編碼在此處進行 }; </script> <!--回調(diào)函數(shù)為全局變量 geoCoordMap 賦值--> <script type="text/javascript" src="https://guozhe-1300242195.cos.ap-beijing.myqcloud.com/2020-01-18-geoCoordMap.json?callback=geoMap"></script> <!--回調(diào)函數(shù)為全局變量 elcforIndustrialValue 賦值--> <script type="text/javascript" src="https://guozhe-1300242195.cos.ap-beijing.myqcloud.com/2020-01-18-elcforIndustrial.json?callback=cityValueIndustrial"></script> <!--回調(diào)函數(shù),當前data值即為居民用電量數(shù)據(jù)--> <script type="text/javascript" src="https://guozhe-1300242195.cos.ap-beijing.myqcloud.com/2020-01-18-householdElectricity.json?callback=cityValueHousehold"></script> </body> </html>
-
-
我們在回調(diào)函數(shù) [cityValueHousehold(data)] 中完成后續(xù)的代碼祷杈，使用 [option] 來表述圖表信息斑司。與之前不同的是，我們使用 [option.geo] 繪制地圖但汞，將其作為坐標系宿刮，在地圖上繪制散點。并且由于我們有兩份數(shù)據(jù)私蕾，所以我們在地圖上繪制兩次散點（只需要在 series 中用逗號隔開僵缺，并用中括號包裹即可 [{},{}] ）：
var option = { //地圖背景 backgroundColor: 'rgba(1, 1, 1, 1)', //圖表標題，已經(jīng)設(shè)置了部分的規(guī)則 title: { text: '2017年全國主要城市用電情況',//標題內(nèi)容 x:'center',//居中 top : 30 ,//距離上端30像素 //標題字體設(shè)置 textStyle: { color: '#fff',//字體顏色 fontSize:30,//字體大小 } }, //提示框組件 tooltip: {}, //圖例組件 //legend: {}, //視覺映射組件 //visualMap: {}, //geo組建繪制地圖踩叭，下方詳細介紹各設(shè)置 geo: { //地圖：中國 map: 'china', //是否允許縮放磕潮，拖動 roam: false, //縮放設(shè)置 scaleLimit:{ min:1//縮放最小程度為1，即最初狀態(tài) }, //文字設(shè)置（指各省名稱） label: { //僅當選中狀態(tài)下有設(shè)置 emphasis: { color: '#fff', //字體顏色白色 show: true, //是否顯示文字容贝，當前‘是’ } }, //距離頂端75個像素 top: 75, //各板塊設(shè)置 itemStyle: { //通常狀態(tài)下的設(shè)置 normal: { areaColor: '#2a333d', //板塊顏色 borderColor: '#111' //板塊邊框顏色 }, //選中狀態(tài)下的設(shè)置 emphasis: { areaColor: 'rgba(10,10,10,1)', //板塊顏色 borderColor: '#fff', //邊框顏色 shadowBlur: 3, //陰影寬度自脯，3像素 shadowColor: '#ffff99', //陰影顏色 } } }, series: [ { //浮點圖表示城市工業(yè)用電情況 //系列名稱，用于tooltip的顯示斤富，legend 的圖例篩選 name: '工業(yè)', //類型：散點圖 type: 'scatter', //系列使用的坐標系膏潮，可選'cartesian2d'笛卡爾坐標系，'polar'極坐標系满力，'geo'當前的地理坐標系 coordinateSystem: 'geo', //引入數(shù)據(jù)戏罢，當前為空 data: [], //字體設(shè)置 label: { //通常狀態(tài) normal: { show: false //不顯示文字 }, //選中狀態(tài) emphasis: { show: false //不顯示文字 } }, //圖形設(shè)置 itemStyle: { //通常狀態(tài) normal: { color:'#eac736', //圓形的顏色 shadowBlur: 20, //陰影寬度 shadowColor: '#ffff99',//陰影顏色 borderColor: '#fff', //邊框顏色 borderWidth: 1 //邊框?qū)挾? }, //選中狀態(tài) emphasis: { borderColor: '#fff', //邊框顏色 borderWidth: 2 //邊框?qū)挾? } }, }, { //浮點圖表示城市居民用電情況 //內(nèi)容完全相同屋谭，不再做額外注釋 name: '居民', type: 'scatter', coordinateSystem: 'geo', //引入數(shù)據(jù)，當前為空 data: [], label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { normal: { color:'#50a3ba', shadowBlur: 20, shadowColor: '#ffff99', borderColor: '#fff', borderWidth: 1 }, emphasis: { borderColor: '#fff', borderWidth: 2 } }, } ] }保存代碼龟糕，現(xiàn)在可以看到地圖已繪制好，選中區(qū)域顯示驶谠拧（自治區(qū)）名稱（簡稱）：
image
-
接下來我們引入數(shù)據(jù)讲岁，在地圖上繪制我們的散點圖。這里需要引入一個函數(shù) [convertData()]衬以，這個函數(shù)可以為我們數(shù)據(jù)中的城市和用電量之間增加經(jīng)緯度值缓艳，即使數(shù)據(jù)變?yōu)?
這樣的數(shù)據(jù)即可用于我們的圖表（為什么不直接令最初的數(shù)據(jù)就是這個結(jié)構(gòu)？）看峻。
//引入居民用電量的方法阶淘，函數(shù)中的 data 即為對應 json 中的數(shù)據(jù) function cityValueHousehold(data){ //函數(shù)converData(),可在地區(qū)的經(jīng)緯度后添加value值 var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; //console.log(geoCoord); if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; //console.log(convertData(data)); var option = { //地圖背景 backgroundColor: 'rgba(1, 1, 1, 1)', //圖表標題，已經(jīng)設(shè)置了部分的規(guī)則 title: { text: '2017年全國主要城市用電情況',//標題內(nèi)容 x:'center',//居中 top : 30 ,//距離上端30像素 //標題字體設(shè)置 textStyle: { color: '#fff',//字體顏色 fontSize:30,//字體大小 } }, //提示框組件 tooltip: {}, //geo組建繪制地圖互妓，下方詳細介紹各設(shè)置 geo: { //地圖：中國 map: 'china', //是否允許縮放溪窒，拖動 roam: false, //縮放設(shè)置 scaleLimit:{ min:1//縮放最小程度為1，即最初狀態(tài) }, //文字設(shè)置（指各省名稱） label: { //僅當選中狀態(tài)下有設(shè)置 emphasis: { color: '#fff', //字體顏色白色 show: true, //是否顯示文字冯勉，當前‘是’ } }, //距離頂端75個像素 top: 75, //各板塊設(shè)置 itemStyle: { //通常狀態(tài)下的設(shè)置 normal: { areaColor: '#2a333d', //板塊顏色 borderColor: '#111' //板塊邊框顏色 }, //選中狀態(tài)下的設(shè)置 emphasis: { areaColor: 'rgba(10,10,10,1)', //板塊顏色 borderColor: '#fff', //邊框顏色 shadowBlur: 3, //陰影寬度澈蚌，3像素 shadowColor: '#ffff99', //陰影顏色 } } }, series: [ { //浮點圖表示城市工業(yè)用電情況 //系列名稱，用于tooltip的顯示灼狰，legend 的圖例篩選 name: '工業(yè)', //類型：散點圖 type: 'scatter', //系列使用的坐標系宛瞄，可選'cartesian2d'笛卡爾坐標系，'polar'極坐標系交胚，'geo'當前的地理坐標系 coordinateSystem: 'geo', //引入數(shù)據(jù)份汗，使用函數(shù)處理原數(shù)據(jù) elcforIndustrialValue ，為其增加經(jīng)緯值 data: convertData(elcforIndustrialValue), //字體設(shè)置 label: { //通常狀態(tài) normal: { show: false //不顯示文字 }, //選中狀態(tài) emphasis: { show: false //不顯示文字 } }, //圖形設(shè)置 itemStyle: { //通常狀態(tài) normal: { color:'#eac736', //圓形的顏色 shadowBlur: 20, //陰影寬度 shadowColor: '#ffff99',//陰影顏色 borderColor: '#fff', //邊框顏色 borderWidth: 1 //邊框?qū)挾? }, //選中狀態(tài) emphasis: { borderColor: '#fff', //邊框顏色 borderWidth: 2 //邊框?qū)挾? } }, }, { //浮點圖表示城市居民用電情況 //內(nèi)容完全相同蝴簇，不再做額外注釋 name: '居民', type: 'scatter', coordinateSystem: 'geo', //引入數(shù)據(jù)杯活，使用函數(shù)處理原數(shù)據(jù) data ，為其增加經(jīng)緯值 data: convertData(data), label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { normal: { color:'#50a3ba', shadowBlur: 20, shadowColor: '#ffff99', borderColor: '#fff', borderWidth: 1 }, emphasis: { borderColor: '#fff', borderWidth: 2 } }, } ] } // 使用剛指定的配置項和數(shù)據(jù)顯示圖表军熏。 myChart.setOption(option); };不要著急轩猩，現(xiàn)在地圖中雖然有了散點，但是大小完全相同荡澎，無法體現(xiàn)其 [value] （用電量）上的差異均践，我們使用 [symbolSize] 規(guī)則對其進行設(shè)置。并且由于數(shù)值過大摩幔，我們將結(jié)果除以100（先開方彤委，但開方并不是由于數(shù)值過大）：
data: convertData(elcforIndustrialValue), //圖標大小設(shè)置，使用回調(diào)函數(shù)或衡，以數(shù)值的開方結(jié)果/100作為圓形的半徑 symbolSize: function (val) { return Math.sqrt( val[2] )/100;//工業(yè)用電較多焦影，除以100 },將這段代碼補充到 [data] 之下车遂，現(xiàn)在你已經(jīng)繪制出了你想要的圖表。藍色點代表居民用電斯辰，黃色點代表工業(yè)用電舶担。
image -
不要著急，我們還需要補充一些東西彬呻。
-
[legend] 圖例組件衣陶。有了圖例，只需要點擊開啟或關(guān)閉闸氮，整個系列的散點也會相應開啟或關(guān)閉剪况，便于查看圖表結(jié)果（交互式圖表的基本要求）：
//圖例組件 legend: [{ //圖例列表的布局朝向，'horizontal'橫排蒲跨，'vertical'縱排 orient: 'vertical', //豎直方向位置译断，當前置底 y: 'bottom', //水平方向位置，當前居右 x:'right', //對應名稱 name 為‘工業(yè)’的系列 data:['工業(yè)'], //文字設(shè)置 textStyle: { color: '#fff'//字體白色 } },{ orient: 'vertical', y: 'bottom', //水平方向位置或悲，當前居左 x:'left', //對應名稱 name 為‘居民’的系列 data:['居民'], textStyle: { color: '#fff' } }], -
[visualMap] 視覺映射組件孙咪。圖例可以將數(shù)據(jù)映射到視覺元素上（元素大小、顏色等）隆箩，且優(yōu)先級高于系列（series）中的元素設(shè)置该贾。本例中筆者設(shè)置了元素的顏色根據(jù)其數(shù)值大小漸變，但是由于不便于比較工業(yè)和居民用電情況捌臊，最終將其注釋掉杨蛋，使之不生效。讀者可以嘗試將其打開理澎，查看效果：
visualMap: { //組件定義域逞力，最大最小值設(shè)置，根據(jù)數(shù)據(jù)所處位置賦予其漸變效果 min: 0, max: 10000000, //是否顯示拖拽用的手柄 calculable: true, //顏色范圍糠爬，三段 inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] }, //文字規(guī)則寇荧，顏色白色 textStyle: { color: '#fff' } },筆者該例中未使用，但是 visualMap 在只有一套數(shù)據(jù)的圖表中相當好用执隧。
-
[tooltip]提示框組件揩抡。十分重要的組件，通過設(shè)置回調(diào)函數(shù)镀琉，當鼠標落于圖形上時峦嗤，可以顯示當前圖形的部分信息：
//提示框組件 tooltip: { //觸發(fā)類型，'item'圖形觸發(fā)屋摔，鼠標落于圖形上顯示烁设；'axis'坐標軸觸發(fā)；'none'什么都不觸發(fā) trigger: 'item', //回調(diào)函數(shù)钓试，顯示當前圖形對應的名稱及其第三個 value 值（用電量） formatter: function (params) { return params.name + ' : ' + params.value[2]; } }, -
現(xiàn)在給出最終的完整代碼装黑，讀者可以根據(jù)官方文檔自行修改副瀑，或者使用自己的數(shù)據(jù)，生成自己的專屬圖表：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jslib/jquery/jquery.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大辛堤贰（寬高）的Dom --> <div id="main" style="width:100%;height:900px;"></div> <script type="text/javascript"> // 基于準備好的dom糠睡，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); //引入經(jīng)緯坐標數(shù)據(jù)的方法，下方使用回調(diào)函數(shù)為全局變量 geoCoordMap 賦值 var geoCoordMap = []; function geoMap(data){ geoCoordMap = data; }; //引入工業(yè)用電量的方法箕别，下方使用回調(diào)函數(shù)為全局變量 elcforIndustrialValue 賦值 var elcforIndustrialValue = []; function cityValueIndustrial(data){ elcforIndustrialValue = data; console.log(elcforIndustrialValue); }; //引入居民用電量的方法铜幽，函數(shù)中的 data 即為對應 json 中的數(shù)據(jù) function cityValueHousehold(data){ //函數(shù)converData(),可在地區(qū)的經(jīng)緯度后添加value值 var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; //console.log(geoCoord); if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; //console.log(convertData(data)); var option = { //地圖背景 backgroundColor: 'rgba(1, 1, 1, 1)', //圖表標題，已經(jīng)設(shè)置了部分的規(guī)則 title: { text: '2017年全國主要城市用電情況',//標題內(nèi)容 x:'center',//居中 top : 30 ,//距離上端30像素 //標題字體設(shè)置 textStyle: { color: '#fff',//字體顏色 fontSize:30,//字體大小 } }, //提示框組件 tooltip: { //觸發(fā)類型串稀，'item'圖形觸發(fā)，鼠標落于圖形上顯示狮杨；'axis'坐標軸觸發(fā)母截；'none'什么都不觸發(fā) trigger: 'item', //回調(diào)函數(shù)，顯示當前圖形對應的名稱及其第三個 value 值（用電量） formatter: function (params) { return params.name + ' : ' + params.value[2]; } }, //圖例組件 legend: [{ //圖例列表的布局朝向橄教，'horizontal'橫排清寇，'vertical'縱排 orient: 'vertical', //豎直方向位置，當前置底 y: 'bottom', //水平方向位置护蝶，當前居右 x:'right', //對應名稱 name 為‘工業(yè)’的系列 data:['工業(yè)'], textStyle: { color: '#fff' } },{ orient: 'vertical', y: 'bottom', x:'left', data:['居民'], textStyle: { color: '#fff' } }], // //視覺映射組件 // visualMap: { // //組件定義域华烟，最大最小值設(shè)置，根據(jù)數(shù)據(jù)所處位置賦予其漸變效果 // min: 0, // max: 10000000, // //是否顯示拖拽用的手柄 // calculable: true, // //顏色范圍持灰，三段 // inRange: { // color: ['#50a3ba', '#eac736', '#d94e5d'] // }, // textStyle: { // color: '#fff' // } // }, //geo組建繪制地圖盔夜，下方詳細介紹各設(shè)置 geo: { //地圖：中國 map: 'china', //是否允許縮放，拖動 roam: false, //縮放設(shè)置 scaleLimit:{ min:1//縮放最小程度為1堤魁，即最初狀態(tài) }, //文字設(shè)置（指各省名稱） label: { //僅當選中狀態(tài)下有設(shè)置 emphasis: { color: '#fff', //字體顏色白色 show: true, //是否顯示文字喂链，當前‘是’ } }, //距離頂端75個像素 top: 75, //各板塊設(shè)置 itemStyle: { //通常狀態(tài)下的設(shè)置 normal: { areaColor: '#2a333d', //板塊顏色 borderColor: '#111' //板塊邊框顏色 }, //選中狀態(tài)下的設(shè)置 emphasis: { areaColor: 'rgba(10,10,10,1)', //板塊顏色 borderColor: '#fff', //邊框顏色 shadowBlur: 3, //陰影寬度，3像素 shadowColor: '#ffff99', //陰影顏色 } } }, series: [ { //浮點圖表示城市工業(yè)用電情況 //系列名稱妥泉，用于tooltip的顯示椭微，legend 的圖例篩選 name: '工業(yè)', //類型：散點圖 type: 'scatter', //系列使用的坐標系，可選'cartesian2d'笛卡爾坐標系盲链，'polar'極坐標系蝇率，'geo'當前的地理坐標系 coordinateSystem: 'geo', //引入數(shù)據(jù) data: convertData(elcforIndustrialValue), //圖標大小設(shè)置，使用回調(diào)函數(shù)刽沾，以數(shù)值的開方結(jié)果/100作為圓形的半徑 symbolSize: function (val) { return Math.sqrt( val[2] )/100;//工業(yè)用電較多本慕，除以100 }, //字體設(shè)置 label: { //通常狀態(tài) normal: { show: false //不顯示文字 }, //選中狀態(tài) emphasis: { show: false //不顯示文字 } }, //圖形設(shè)置 itemStyle: { //通常狀態(tài) normal: { color:'#eac736', //圓形的顏色 shadowBlur: 20, //陰影寬度 shadowColor: '#ffff99',//陰影顏色 borderColor: '#fff', //邊框顏色 borderWidth: 1 //邊框?qū)挾? }, //選中狀態(tài) emphasis: { borderColor: '#fff', //邊框顏色 borderWidth: 2 //邊框?qū)挾? } }, }, { //浮點圖表示城市居民用電情況 //內(nèi)容完全相同，不再做額外注釋 name: '居民', type: 'scatter', coordinateSystem: 'geo', //引入數(shù)據(jù) data: convertData(data), //圖標大小設(shè)置悠轩，使用回調(diào)函數(shù)间狂，以數(shù)值的開方結(jié)果/100作為圓形的半徑 symbolSize: function (val) { return Math.sqrt( val[2] )/100;//居民用電較多，除以100 }, label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { normal: { color:'#50a3ba', shadowBlur: 20, shadowColor: '#ffff99', borderColor: '#fff', borderWidth: 1 }, emphasis: { borderColor: '#fff', borderWidth: 2 } }, } ] } // 使用剛指定的配置項和數(shù)據(jù)顯示圖表火架。 myChart.setOption(option); }; </script> <!--回調(diào)函數(shù)為全局變量 geoCoordMap 賦值--> <script type="text/javascript" src="https://guozhe-1300242195.cos.ap-beijing.myqcloud.com/2020-01-18-geoCoordMap.json?callback=geoMap"></script> <script type="text/javascript" src="https://guozhe-1300242195.cos.ap-beijing.myqcloud.com/2020-01-18-elcforIndustrial.json?callback=cityValueIndustrial"></script> <script type="text/javascript" src="https://guozhe-1300242195.cos.ap-beijing.myqcloud.com/2020-01-18-householdElectricity.json?callback=cityValueHousehold"></script> </body> </html>最終的圖表如下鉴象。左右下角新增了兩個圖例忙菠，點擊可開啟或關(guān)閉：
image
-
-
圖表的意義-它述說了怎樣的故事：
對于絕大多數(shù)的城市，居民的用電量都小于工業(yè)用電量纺弊，三亞除外牛欢；
工業(yè)用電量沿海城市較多。其中珠三角淆游、長三角的居民用電量較多傍睹，而山東濱州、河北唐山的居民用電量相當少犹菱，說明后者是純工業(yè)城市拾稳，前者第三產(chǎn)業(yè)比較發(fā)達；
對于內(nèi)陸城市腊脱，重慶访得、包頭、鄂爾多斯陕凹、烏蘭察布悍抑、通遼相對較多，顯然內(nèi)蒙古的工業(yè)城市要遠多于其他地區(qū)杜耙；
-
地球處于浩瀚星空：
ECharts支持繪制三維圖形搜骡。筆者將地圖（坐標系）換成了三維地球，散點圖換做了三維柱形圖（bar3D）佑女，作出了如下的可視化圖形记靡。
或許你的老板比較喜歡這種圖形，但筆者認為這個圖形并不便于反映數(shù)據(jù)（雖然它可能真的COOLＩ罕）簸呈。
如果大家有興趣，可以訪問這個頁面自行觀察店茶。如果你想繪制三維圖形蜕便，可以訪問ECharts官方GL實例，對照文檔贩幻，自行學習三維可視化（因為筆者本人也知之甚少）轿腺。
image
故事結(jié)束
第二個故事主要講解如何將空間數(shù)據(jù)可視化。
地圖是一個非常直觀的可視化類型丛楚。
不論怎樣族壳，地圖都是一種理解數(shù)據(jù)的極佳手段。它們是真實世界按比例縮小后的版本趣些，而且它們無處不在仿荆。
現(xiàn)在你應該知道如何將手頭的空間數(shù)據(jù)可視化，本例將數(shù)據(jù)以散點大小（也就是面積）加以展示拢操，除此之外锦亦，你還可以將數(shù)據(jù)以區(qū)域顏色反映出來×罹常總而言之杠园，地圖具有極強的直觀性，可以為你（的努力）帶來豐厚的回報：
一方面豐富了我們呈現(xiàn)數(shù)據(jù)的形式舔庶，另一方面它也比靜態(tài)圖表更加利于我們深入地探索數(shù)據(jù)抛蚁。
并且，你的空間數(shù)據(jù)往往還附帶時間信息惕橙。筆者曾完成了一個動畫瞧甩，展示了自己負責的產(chǎn)品，在半年中的每一天被各個地區(qū)調(diào)用的情況弥鹦。這個動畫在年終總結(jié)會議中可以說賺足了眼球亲配。后文中將會介紹這個方法，但是因為需要額外的 javaScript 編碼惶凝，所以學習的難度可能相對較大，筆者也會盡量描述清晰犬钢。
故事的最后苍鲜，筆者想強調(diào)一點：散點圖通過各點「面積」體現(xiàn)相應數(shù)值的大小，而非直徑（半徑）玷犹。所以在設(shè)置散點半徑時務(wù)必使用數(shù)值的「開平方」結(jié)果混滔。如果你直接將數(shù)值作為散點的半徑，數(shù)值上的差別將被放大歹颓，你的讀者將可能對圖表產(chǎn)生誤解，進而無法了解實際情況。在繪制散點圖時請牢記這一點纠永。
好了腹侣，放松下你的頭腦，接下來才是重頭戲撤奸。
