如何實現Echart不刷新頁面，多語言切換下的地圖數據從新加載，api請求數據加載，soketed數據實時加載

可視化項目中常常用到ecahrt，各類異步加載，鏈接socket，多語言切換等問題，如今彙總一下：

Ecahrt初始化，全局統一init，能夠初始化爲0，等待後續數據操做

一、若是是api從新請求，數據手動獲取這種方式，直接setOption;

二、 若是是socket實時數據傳輸展現，直接setOption，可是有tab切換等引發找不到dom的寬高，能夠監聽切換的事件，在正確的index下resize();

三、 若是是地圖數據，第一次也是手動加載：

 

import i18n from '@/assets/i18n'
if(i18n.locale == 'zh'){
    echarts.registerMap('china'。。。）
}else{
     echarts.registerMap('china'。。。）
}

 

而後用戶更改了語言版本，監測到該事件：

    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中數據實現多語言