1. 程式人生 > >如何實現Echart不刷新頁面,多語言切換下的地圖數據重新加載,api請求數據加載,soketed數據實時加載

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

oca class 頁面 har lse setoption bsp div 監聽

可視化項目中經常用到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中數據實現多語言

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