如何实现Echart不刷新页面，多语言切换下的地图数据从新加载，api请求数据加载，soketed数据实时加载

时间 2019-11-24 标签如何实现 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