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

可視化項目中常常用到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

相關文章
相關標籤/搜索