可视化项目中经常用到 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 中数据实现多语言
来源: http://www.bubuko.com/infodetail-2922466.html