echarts体积很大,在移动端使用异步加载是一种提高渲染速度的方法,结合webpack的做法如下:

require.ensure([], function(require){
const echarts = require('assets/js/lib/echarts.min');
if(echarts){
_self.fInitEcharts(echarts);
if(_self.dateList.length && _self.rateList.length){
_self.fSetEcharts();
}
}
},'echarts'); //初始化echarts
fInitEcharts(echarts) {
var id = this.user.isInvest == 0 ? 'container' : 'container_invest';
var dom = document.getElementById(id);
this.myChart = echarts.init(dom);
} //设置echart选项
fSetEcharts(){
if(this.myChart){
const size = fGetChartFontSize();
const option = ...;
this.myChart.setOption(option, true);
}
}

echarts异步加载的更多相关文章

  1. echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.

    今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...

  2. 小程序中使用ECharts 异步加载数据

    官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-d ...

  3. 微信小程序中使用ECharts 异步加载数据 实现图表

    <!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="my ...

  4. H5+JS+JQuery+ECharts实现异步加载

    这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编 ...

  5. 学习Echarts:(二)异步加载更新

    这部分比较简单,对图表的异步加载和更新,其实只是异步获取数据然后通过setOption传入数据和配置而已. $.get('data.json').done(function (data) { myCh ...

  6. 26、首先通过javascript包的异步加载来学习echarts包的结构

    1.在这里先写一写前言,今天在公司搞定了一个对于滚动条进行定位的case,明天开始做TestManagement. 首先大家先来一起看一看流行的javascript文件的加载方式,这里采用别人博客上的 ...

  7. winform异步加载数据到界面

    做一个学习记录. 有两个需求: 1.点击按钮,异步加载数据,不卡顿UI. 2.把获取的数据加载到gridview上面. 对于需求1,2,代码如下: public delegate void ShowD ...

  8. 【Android】纯代码创建页面布局(含异步加载图片)

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  9. 【代码笔记】iOS-实现网络图片的异步加载和缓存

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...

随机推荐

  1. poj_3641_Pseudoprime numbers

    Fermat's theorem states that for any prime number p and for any integer a > 1, ap = a (mod p). Th ...

  2. xml的应用与dtd约束

    1.xml的应用 *不同的系统之间的传输数据(qq消息传输) *用来表示生活中有关系的数据(省市区的包含关系) *经常用在文件配置 **比如现在连接数据库,肯定知道数据库的名称和密码及用户名.    ...

  3. swoole中swoole_timer_tick回调函数使用对象方法

    swoole_timer_tick的回调函数无法使用类似于array($this, 'method')来调用对象方法,所以我用一下方法变通了一下来调用 swoole_timer_tick(1000, ...

  4. Java NIO 教程

    Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的Java IO API.本系列教程将有助于你学习和理解Java NIO. Java NIO提供了与 ...

  5. Spark机器学习之推荐引擎

    一. 最小二乘法建立模型 关于最小二乘法矩阵分解,我们可以参阅: 一.矩阵分解模型. 用户对物品的打分行为可以表示成一个评分矩阵A(m*n),表示m个用户对n各物品的打分情况.如下图所示: 其中,A( ...

  6. J2EE中getParameter与getAttribute以及对应的EL表达式

    摘自http://blog.csdn.net/woshixuye/article/details/8027089 getParameter ① 得到的都是String类型的.如http://name. ...

  7. TouTiao开源项目 分析笔记2

    1.Constant常量定义类 1.1.源代码 public class Constant { public static final String USER_AGENT_MOBILE = " ...

  8. NC-瑞士军刀NetCat

    NC——Telnet/Banner 连接之后可以命令互动,比如POP3\SMTP\HTTP等协议命令 root@kali:/# nc -v pop3..com //-v详细显示 DNS fwd/rev ...

  9. 1,flask简介

    一. Python 现阶段三大主流Web框架 Django Tornado Flask 对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不 ...

  10. Spring---资源访问工具类

    JDK所提供的访问资源的类并不能很好的满足各种底层资源的访问需求,因此,Spring设计了一个Resource接口,它为应用提供了更强大的访问底层资源的能力 主要方法 boolean exists() ...