echarts3 地图只显示南沙群岛，刷新页面显示正常
最近在使用echarts3 地圖時遇到一個奇怪的問題，進入頁面只顯示南沙群島部分，再次刷新頁面顯示正常，搜索無果后進行了摸索式探索，最終找到了問題的解決方案，現記錄于此希望幫到遇到同樣問題的朋友。
ECharts 3 中因為地圖精度的提高，不再內置地圖數據增大代碼體積，使用地圖時有兩種方式：
JavaScript 引入示例 <script src="echarts.js"></script> <script src="map/js/china.js"></script> <script> var chart = echarts.init(document.getElementById('main')); chart.setOption({series: [{type: 'map',map: 'china'}] }); </script> JSON 引入示例 $.get('map/json/china.json', function (chinaJson) {echarts.registerMap('china', chinaJson);var chart = echarts.init(document.getElementById('main'));chart.setOption({series: [{type: 'map',map: 'china'}]}); });
下面具體說下問題出現的應用場景：
1.基于ace admin的管理后臺
2.在index.html文件中引入echarts.js以及china.js一切正常，如果放在子頁面則不正常，具體有兩種：如果把echart.js放在index.html，把china.js放在子頁面里面就會出現本文所述的現象；把兩個js文件都放在子頁面html文件里面，則出現echarts沒有定義的錯誤
經過上述分析，相信小伙伴已經知道如何解決這個問題了：把echarts.js以及china.js文件都放在頂層index.html文件里面即可。
下面說說產生這個問題的原因：
圖1
上面這張圖截自chrome瀏覽器調試界面，相信大伙對這個界面一定也不陌生，這里只分析兩欄：XHR與JS，這是產生本文問題的最終原因。
前端開發人員最先接觸的引入js腳本文件的方式就是通過<script src="xxx.js"></script>這種方式引入，這也就是圖1中Type列所示的script方式，這是一種阻塞方式，遇到這種script標簽后瀏覽器就會執行“下載該腳本，然后執行該腳本”的流程；這種方式的缺點也很明顯，特別是當js文件過多時，就會導致瀏覽器渲染整個頁面的過程加長。
實際應用中有以下幾種方式，可以用于解決上述問題：
1.通過標準 DOM 函數創建<script>元素，這也是引入百度統計hm.js腳本文件的方式
var script = document.createElement ("script");script.type = "text/javascript";script.src = "script1.js";document.getElementsByTagName("head")[0].appendChild(script);
新的<script>元素加載 script1.js 源文件。此文件當元素添加到頁面之后立刻開始下載。此技術的重點在于：無論在何處啟動下載， 文件的下載和運行都不會阻塞其他頁面處理過程--異步。 您甚至可以將這些代碼放在<head>部分而不會對其余部分的頁面代碼造成影響（除了用于下載文件的 HTTP 連接）。
當文件使用動態腳本節點下載時，返回的代碼通常立即執行（除了 Firefox 和 Opera，他們將等待此前的所有動態腳本節點執行完畢）。當腳本是“自運行”類型時，這一機制運行正常，但是如果腳本只包含供頁面其他腳本調用調用的接口，則會帶來問題。這種情況下，您需要跟蹤腳本下載完成并是否準備妥善?？梢允褂脛討B <script> 節點發出事件得到相關信息。
Firefox、Opera, Chorme 和 Safari 3+會在<script>節點接收完成之后發出一個 onload 事件。您可以監聽這一事件，以得到腳本準備好的通知。
2.使用類似ace_ajax等一些異步加載js腳本框架來加載js文件
3.使用 XMLHttpRequest(XHR)對象，此技術首先創建一個 XHR 對象，然后下載 JavaScript 文件，接著用一個動態 <script> 元素將 JavaScript 代碼注入頁面。
var xhr = new XMLHttpRequest(); xhr.open("get", "script1.js", true); xhr.onreadystatechange = function(){if (xhr.readyState == 4){if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){var script = document.createElement ("script");script.type = "text/javascript";script.text = xhr.responseText;document.body.appendChild(script);}} }; xhr.send(null);
此代碼向服務器發送一個獲取 script1.js 文件的 GET 請求。onreadystatechange 事件處理函數檢查 readyState 是不是 4，然后檢查 HTTP 狀態碼是不是有效（2XX 表示有效的回應，304 表示一個緩存響應）。如果收到了一個有效的響應，那么就創建一個新的<script>元素，將它的文本屬性設置為從服務器接收到的 responseText 字符串。這樣做實際上會創建一個帶有內聯代碼的<script>元素。一旦新<script>元素被添加到文檔，代碼將被執行，并準備使用。
這種方法的主要優點是，您可以下載不立即執行的 JavaScript 代碼。由于代碼返回在<script>標簽之外（換句話說不受<script>標簽約束），它下載后不會自動執行，這使得您可以推遲執行，直到一切都準備好了。另一個優點是，同樣的代碼在所有現代瀏覽器中都不會引發異常。
此方法最主要的限制是：JavaScript 文件必須與頁面放置在同一個域內，不能從 CDN 下載（CDN 指"內容投遞網絡（Content Delivery Network）"，所以大型網頁通常不采用 XHR 腳本注入技術。
? ? ? ? // AMD. Register as an anonymous module.
? ? ? ? define(['exports', 'echarts'], factory);
? ? } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
? ? ? ? // CommonJS
? ? ? ? factory(exports, require('echarts'));
? ? } else {
? ? ? ? // Browser globals
? ? ? ? factory({}, root.echarts);
? ? }
由于在引入china.js文件之前引入了echarts.js文件,echarts文件里面定義了define為一個函數，這就會導致瀏覽器加載完china.js文件并執行時沒有進入china.js默認函數--初始化部分，所以導致中國地圖沒有初始化。
這里涉及到amd---異步模塊定義規范，后期會寫這方面相關的文章
PS：echarts地圖數據下載網址：http://echarts.baidu.com/download-map.html
總結
以上是生活随笔為你收集整理的echarts3 地图只显示南沙群岛，刷新页面显示正常的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python笔记本电脑推荐2020_20
- 下一篇： 网络编程-socket