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. Spring Boot Common application properties(转载)

    转自官方文档:http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.h ...

  2. JS - 属性描述符各配置的默认值的注意事项

    通过字面量或者obj.x = 1;创建的属性 与 通过Object.defineProperty创建的属性,他们的属性描述符的默认值是不同的,前者都为true,后者都为false.

  3. Linux终端显示控制字符

    在Linux中, 我们时常要将一个命令的输出作为另外一个命令的输入进行下一步处理操作. 有时, 如果一个命令的输出中有不可见的控制字符时, 有可能会导致后续操作出错. 而这些控制字符很可能是不可打印的 ...

  4. 虚拟机桥接模式下多台Ubuntu16.04系统互相连接

    1.首先新建一个虚拟机并在该虚拟机上安装Ubuntu16.04系统.为这台虚拟机起名为Ubuntu3. 2.对Ubuntu3进行克隆,为新克隆生成的虚拟机起名为Ubuntu2.(这时我们会发现Ubun ...

  5. MVC WebAPI 的基本使用

    1.什么是WebAPI Web API是网络应用程序接口.包含了广泛的功能,网络应用通过API接口,可以实现存储服务.消息服务.计算服务等能力,利用这些能力可以进行开发出强大功能的web应用. 它可以 ...

  6. 变量存储类型(auto static extern)

    auto 动态存储类型变量(函数内部变量存储默认为 auto型) auto只用于函数内部定义,单片机在执行这个函数时为它分配内存地址,当函数执行完毕返回后,auto变量会被销毁,再次进入这个函数时,它 ...

  7. wireshark 安装

    #yum install wireshark 安装完毕后 whereis wireshark 找不到可执行程序 /bin /sbin /usr/bin /usr/sbin下均没有. 实际上wiresh ...

  8. 剑指Offer - 九度1349 - 数字在排序数组中出现的次数

    剑指Offer - 九度1349 - 数字在排序数组中出现的次数2013-11-23 00:47 题目描述: 统计一个数字在排序数组中出现的次数. 输入: 每个测试案例包括两行: 第一行有1个整数n, ...

  9. 《Cracking the Coding Interview》——第18章:难题——题目10

    2014-04-29 04:22 题目:给定一堆长度都相等的单词,和起点.终点两个单词,请从这堆单词中寻找一条变换路径,把起点词变成终点词,要求每次变换只能改一个字母. 解法:Leetcode中有Wo ...

  10. 《Cracking the Coding Interview》——第2章:链表——题目7

    2014-03-18 02:57 题目:检查链表是否是回文的,即是否中心对称. 解法:我的做法是将链表从中间对半拆成两条,然后把后半条反转,再与前半条对比.对比完了再将后半条反转了拼回去.这样不涉及额 ...