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. tcp服务端socket

    import socket if __name__ == '__main__': # 创建tcp服务端socket tcp_server_socket = socket.socket(socket.A ...

  2. python核心编程2 第八章 练习

    8–2. 循环. 编写一个程序, 让用户输入三个数字: (f)rom, (t)o, 和 (i)ncrement . 以 i为步长, 从 f 计数到 t , 包括 f 和 t . 例如, 如果输入的是 ...

  3. javascript常用代码片段

    /** * * @desc 判断两个数组是否相等 * @param {Array} arr1 * @param {Array} arr2 * @return {Boolean} */ function ...

  4. 裸机——SD卡

    1.首先要对SD卡有个基础知识 (1) SD = nandflash + 主控IC. 主控IC负责了校验和坏块管理,所以SoC只需要依照时序就可以和SD卡上的主控IC进行数据交换等操作. (2) SD ...

  5. C语言进阶——enum, sizeof, typedef 分析11

    枚举类型的使用方法: enum是C语言的 一种自定义类型 enum值是可以根据需要自定义的整型值 第一个enum的值默认为0 默认情况下的enum值是在前一个定义值的基础上加 1 enum类型的变量只 ...

  6. 笔记-pyton内置数据类型

    笔记-pyton内置数据类型 1.      简介 The principal built-in types are numerics, sequences, mappings, classes, i ...

  7. 笔记-git-协作开发

    笔记-git-协作开发 1.      git协作开发 git协作的典型做法是,创建一个git服务器,被多个人操作. 示意图如下: 一般来说协作分为如下几个步骤: 创建一个git裸服务器 (git i ...

  8. Flume使用(案例分析)

    Flume官方文档 Usage: bin/flume-ng <command> [options]... commands: help display this help text age ...

  9. Android的Fragment介绍

    前言 fragment是从android3.0开始提出来的,用来支持大屏幕设备的ui设计.通过将activity划分为多个fragment,不仅提高了设计的灵活性,而且可以在程序运行时改变它们的特征, ...

  10. 使用阿里开源工具 TProfiler 在海量业务代码中精确定位性能代码 (jvm性能调优)

    技术交流群:233513714 本文是<JVM 性能调优实战之:一次系统性能瓶颈的寻找过程> 的后续篇,该篇介绍了如何使用 JDK 自身提供的工具进行 JVM 调优将 TPS 由 2.5 ...