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