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

可視化項目中經常用到ecahrt，各種異步加載，連接socket，多語言切換等問題，現在匯總一下：

Ecahrt初始化，全局統一init，可以初始化為0，等待后續數據操作

1、如果是api重新請求，數據手動獲取這種方式，直接setOption;

2、 如果是socket實時數據傳輸展示，直接setOption，但是有tab切換等引起找不到dom的寬高，可以監聽切換的事件，在正確的index下resize();

3、 如果是地圖數據，第一次也是手動加載：

 

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