可視化項目中常常用到ecahrt,各類異步加載,鏈接socket,多語言切換等問題,如今彙總一下:api
Ecahrt初始化,全局統一init,能夠初始化爲0,等待後續數據操做echarts
一、若是是api從新請求,數據手動獲取這種方式,直接setOption;dom
二、 若是是socket實時數據傳輸展現,直接setOption,可是有tab切換等引發找不到dom的寬高,能夠監聽切換的事件,在正確的index下resize();異步
三、 若是是地圖數據,第一次也是手動加載:socket
import i18n from '@/assets/i18n' if(i18n.locale == 'zh'){ echarts.registerMap('china'。。。) }else{ echarts.registerMap('china'。。。) }
而後用戶更改了語言版本,監測到該事件:this
languageChange(val) { switch (val) { case "zh": this.language = "中文"; break; case "en": this.language = "EN"; break; case "cz": this.language = "česky"; break; default: break; } Storage.set("lang", val); this.$i18n.locale = val; if(val == 'zh'){ $.getScript('/static/js/china_zh.js'); }else{ $.getScript('/static/js/china_en.js'); } }
能夠使用jq的getScript(),從新加載資源,這樣就能夠不刷新從新請求,並讓echart中數據實現多語言spa