echarts常用功能封装|抽象为mixin
目前已解锁以下功能:
- [x] 初始化echarts(initChart)
- [x] 获取echarts参数配置(getOption)
- [x] 生成echarts图表(setOption)
- [x] 监听resize事件触发echarts图表更新
- [x] 加载中loading
// charts.js
import echarts from 'echarts'
export default {
computed: {
// 初始化echarts
getChart () {
return this.$echarts.init(this.$refs.echart)
}
},
watch: {
chartData: {
handler (val) {
val && this.initChart()
}
}
},
mounted () {
this.getChart.showLoading()
window.addEventListener('resize', this.chartResize)
// 移除resize事件
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.chartResize)
})
},
methods: {
initChart () {
this.getChart.setOption(this.getOption())
this.getChart.hideLoading()
},
chartResize () {
this.getChart.resize()
}
}
}
example:
<template>
<div>
<div ref="echart" style="height: 600px"></div>
</div>
</template>
<script>
import Charts from '@/components/Charts.js'
export default {
// 混入Charts
mixins: [Charts],
data () {
return {
chartData: []
}
},
mounted () {
// 模拟ajax请求
setTimeout(() => {
this.chartData = [0, 1, 2, 3]
}, 2000)
},
methods: {
getOption () {
// 配置options
return {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
// 代码块...
}
}
}
}
</script>
ps:详情请查看examples
如何贡献
笔记内容是笔者一个字一个字打上去的,难免会有一些笔误,如果发现笔误可直接在相应文档进行编辑修改。
欢迎提交对本仓库的改进建议~
如果喜欢或者有所启发,欢迎 star,对作者也是一种鼓励。
echarts常用功能封装|抽象为mixin的更多相关文章
- js实现第一次打开网页弹出指定窗口(常用功能封装很好用)
js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...
- c++常用功能封装
C++文件读写的封装 在C++开发中,文件读写是很常用的功能,出于代码复用的考虑,将它们进行封装. 其中,默认读写的文件是文本文件,并且需要按行处理.调用者只需要关注读取出来的每一行的处理方式.写文件 ...
- cocos2D-X LUA 常用功能封装和工作经验的一些解决方案
--[[ Packaging_KernelEngine.h 文件说明:所有对象在建立时位置是优先的,传入位置参数必须cc.p(X,Y) CurObj:表示要传入当前的对象 将3.10 lua api ...
- cocos2D-X 常用功能封装
Packaging_Kernel.h #pragma once #include <string> #include <map> #include <vector> ...
- php一些常用功能封装
//二分查找 function bin_sch($array, $low, $high, $k) { if ($low <= $high) { $mid = intval(($low + $hi ...
- EXCEL2016 OLE/COM开发-常用功能封装代码
hpp #pragma once #include "stdafx.h" #include "CApplication.h" #include "CW ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- JavaScript 常用功能总结
小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...
- Android android-common 常用功能和工具集合
本文内容 环境 android-common 项目结构 演示 android-common 参考资料 android-common 主要包括如下内容: 缓存,包括图片缓存.预取缓存.网络缓存. 公共 ...
随机推荐
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- Java基础一篇过(五)Map这篇就够了
文章更新时间:2020/03/03 一.Map介绍 Map是Java的一个接口,没有继承,以Key--Value的形式来储存元素信息,常用到的有3个子类实现: HashMap 底层数据结构是散列桶(数 ...
- ISCC2018 writeup(web)
比较数字大小 F12 修改maxlength为4 web01 strcmp()函数遇到数组会返回NULL 而PHP是弱类型语言 在==比较的时候,如果有数值的话会先将字符串转换为数值在进行比较,而N ...
- 数据库图形表Navicat Premium
1.什么是数据库? 存储数据,为了方便查询和使用 web时代使用最广泛的关系型数据库 2.历史: 瑞典公司开发,卖给SUN,SUN又卖给ORACLE 开源,免费,支持多平台 3.数据库图形表Navic ...
- 新手C++ 练习项目--计算器
本篇博客用于记录我自己用C++实现的一个计算器,目标是完成加减乘除带括号的四则运算,并在后期用工厂设计模式加以优化. Part 1:calculate 1+1=2 实现这样的一个式子的计算,只需要用到 ...
- Linux下安装ZooKeeper-3.5.6
下载 官网下载地址是https://www.apache.org/dyn/closer.cgi/zookeeper,下载apache-zookeeper-3.5.6-bin.tar.gz. sta ...
- Electron安装过程深入解析(读完此文解决Electron应用无法启动,无法打包的问题)
1. 安装Electron依赖包 开发者往往通过npm install(或 yarn add)指令完成为Node.js工程安装依赖包的工作, 安装Electron也不例外,下面是npm和yarn的安装 ...
- nessus 本地扫描(一)
第一次使用nessus ,so 适合小白看看 1.新建扫描.配置策略:起个名字,description是详细记录,类似于说明:targets是要访问的主机ip地址或者网段,必填项 选择好之后sav ...
- Arduino 中 EEprom 写入读取清除
转自:https://www.arduino.cn/thread-1157-1-1.html EEPROM (Electrically Erasable Programmable Read-Only ...
- P5911 [POI2004]PRZ (状态压缩dp+枚举子集)
题目背景 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 题目描述 桥已经很旧了, 所以它不能承受太重的东西.任何时候队伍在桥上的人都不能超过一定的限制. 所以这只队伍过桥时 ...