如何实现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中数据实现多语言
如何实现Echart不刷新页面,多语言切换下的地图数据重新加载,api请求数据加载,soketed数据实时加载的更多相关文章
- ajax用get刷新页面元素在IE下无效解决~~
总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端 ...
- Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)
前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...
- Ajax回退刷新页面问题的解决办法
在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm 这篇文章主要介 ...
- js刷新页面方法大全
如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, ...
- 不使用Ajax,如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
- 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader
发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...
- .net 刷新页面防止表单二次提交
1.页面上按钮是服务器控件,现在刷新页面要防止按钮事件重复执行 原网址:http://blog.csdn.net/high_mount/article/details/51066056
- JS定时刷新页面及跳转页面
JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...
- 刷新页面时 select值保持不变
刷新页面时,要使下拉菜单(select).raido保持不变,用ajax是无法实现的.我想只能通过cookies才能实现.刷新前先把select或radio的值保存在cookies中,刷新后再填回去. ...
随机推荐
- .NET Core微服务之基于Steeltoe使用Zipkin实现分布式追踪
Tip: 此篇已加入.NET Core微服务基础系列文章索引 => Steeltoe目录快速导航: 1. 基于Steeltoe使用Spring Cloud Eureka 2. 基于Steelt ...
- 【Android Studio安装部署系列】四、Android SDK目录和作用分析
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android SDk Tool软件开发工具包(software development kit).被软件开发工程师用于为特定的软件 ...
- C++STL之Vector向量详解,用法和例子 一起学习 一起加油
C++ STL之vector用法总结 1 ...
- Java集合与泛型中的几个陷阱,你掉进了几个?
下面我总结了集合.泛型.数组转集合等一些常见的陷进,认真看完,相信你绝对有所收获. 1.List ,List<?> 与 List<Object> 有区别吗? 说实话,我敢保证很 ...
- Python:黑板课爬虫闯关第四关
第四关地址:http://www.heibanke.com/lesson/crawler_ex03/ 一开始看到的时候有点蒙,不知道啥意思,说密码需要找出来但也没说怎么找啊. 别急,随便输了个昵称和密 ...
- LVS负载均衡原理
一.LVS基本原理概述 LB集群的实现,LB即负载均衡集群 硬件:F5 BIG-IP,Citrix NetScaler,A10,Array,Redware 软件:Lvs,nginx,haproxy,a ...
- UML学习——类之间的关系
参考:UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现 空心菱形为聚合关系:部分与整体,部分可有可无.部分可以单独存在(车子和引擎,引擎可以单独存在) 实心菱形为组合关系:部分与整体,但是部 ...
- jsp内置对象-session对象
一.session概述 隐含对象session是javax.servlet.http.HttpSession接口实现类的对象,用于保存用户的状态信息. 在web开发中,服务器为每个用户浏览器创建一个会 ...
- 2019年3月29日至30日深圳共创力《成功的产品经理DNA》在深圳公开课成功举办
2019年3月29至30日,在深圳南山区中南海滨大酒店10楼行政厅,由深圳市共创力企业管理咨询有限公司举办的<成功的产品经理DNA>公开课成功举办,此次公开课由深圳市共创力咨询资深讲师冯老 ...
- Java日期的一些基本处理
今天工作中用到一些日期的处理.这里做一点浅显的整理. 1.日期的加减: 日期加减一般用到Calendar这个类比较好.这样不用处理12月加一个月和28.30.31.加一天等问题 String last ...