可视化项目中经常用到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数据实时加载的更多相关文章

  1. ajax用get刷新页面元素在IE下无效解决~~

    总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端 ...

  2. Vue路由实现之通过URL中的hash(#号)来实现不同页面之间的切换(图表展示、案例分析、附源码详解)

    前言 本篇随笔主要写了Vue框架中路由的基本概念.路由对象属性.vue-router插件的基本使用效果展示.案例分析.原理图解.附源码地址获取. 作为自己对Vue路由进行页面跳转效果知识的总结与笔记. ...

  3. Ajax回退刷新页面问题的解决办法

    在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm   这篇文章主要介 ...

  4. js刷新页面方法大全

    如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, ...

  5. 不使用Ajax,如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  6. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  7. .net 刷新页面防止表单二次提交

    1.页面上按钮是服务器控件,现在刷新页面要防止按钮事件重复执行 原网址:http://blog.csdn.net/high_mount/article/details/51066056

  8. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

  9. 刷新页面时 select值保持不变

    刷新页面时,要使下拉菜单(select).raido保持不变,用ajax是无法实现的.我想只能通过cookies才能实现.刷新前先把select或radio的值保存在cookies中,刷新后再填回去. ...

随机推荐

  1. Nginx学习笔记~目录索引

    回到占占推荐博客索引 前几天整理了<Docker的学习笔记索引>,受到了很多朋友的关注,今天把Nginx的文章也整理一下,以后将永久更新,像大叔之前的<EF文章系列>,< ...

  2. LVS(五)LVS的持久连接

    什么是持久链接 把某个客户端的请求始终定向到同一应用服务器上.对于LVS来说持久连接和算法没有关系.也就是使用任何算法LVS都可以实现同一客户端的请求转发到之前选定的应用服务器,以保持会话.而且还能实 ...

  3. 基于Log4Net本地日志服务简单实现

    背景 项目开发中,我们或多或少会使用诸如NLog,Log4Net,Kafka+ELK等等日志套件: 基于关注点分离原则,业务开发的时候不应该关注日志具体实现:并且后续能方便切换其他日志套件: 这里先实 ...

  4. element-ui 动态换肤

    1.在安装好 element-ui@2.x 以后,首先安装sass-loader npm i sass-loader node-sass -D 2.安装 element-theme npm i ele ...

  5. 从PRISM开始学WPF(六)MVVM(二)Command-更新至Prism7.1

    命令绑定(Command) [7.1updated]这一节除了基础app部分,并没有什么变化 什么是Command? 先看下微软官方的说明: Commanding is an input mechan ...

  6. 【JVM系列】一步步解析java执行内幕

    对于任何一门语言,要想达到精通的水平,研究它的执行原理(或者叫底层机制)不失为一种良好的方式.在本篇文章中,将重点研究java源代码的执行原理,即从程 序员编写JAVA源代码,到最终形成产品,在整个过 ...

  7. 表单数据验证方法(一)—— 使用validate.js实现表单数据验证

    摘要:使用validate.js在前端实现表单数据提交前的验证 好久没写博客了,真的是罪过,以后不能这样了,只学习不思考,学的都是白搭,希望在博客园能记录下自己学习的点滴,虽然记录的都是些浅显的技术, ...

  8. entity framework 实现按照距离排序

    在做项目时,经常会遇到“离我最近”这种需求.顾名思义,它需要根据用户的经纬度和事物的经纬度计算距离,然后进行排序,最后分页(当然这些操作要在数据库中进行,否则就变成假分页了). 我们通常可以用sql语 ...

  9. 学习笔记—XML

    XML XML简介 XML指可扩展标记语言(EXtensible Markup Language),是一种标记语言. XML是一种灵活的语言,标签没有被预定义,需要自行定义标签. 通常,XML被用于信 ...

  10. 再议Java中的static关键字

    再议Java中的static关键字 java中的static关键字在很久之前的一篇博文中已经讲到过了,感兴趣的朋友可以参考:<Java中的static关键字解析>. 今天我们再来谈一谈st ...