目前已解锁以下功能:

  • [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的更多相关文章

  1. js实现第一次打开网页弹出指定窗口(常用功能封装很好用)

    js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...

  2. c++常用功能封装

    C++文件读写的封装 在C++开发中,文件读写是很常用的功能,出于代码复用的考虑,将它们进行封装. 其中,默认读写的文件是文本文件,并且需要按行处理.调用者只需要关注读取出来的每一行的处理方式.写文件 ...

  3. cocos2D-X LUA 常用功能封装和工作经验的一些解决方案

    --[[ Packaging_KernelEngine.h 文件说明:所有对象在建立时位置是优先的,传入位置参数必须cc.p(X,Y) CurObj:表示要传入当前的对象 将3.10 lua api ...

  4. cocos2D-X 常用功能封装

    Packaging_Kernel.h #pragma once #include <string> #include <map> #include <vector> ...

  5. php一些常用功能封装

    //二分查找 function bin_sch($array, $low, $high, $k) { if ($low <= $high) { $mid = intval(($low + $hi ...

  6. EXCEL2016 OLE/COM开发-常用功能封装代码

    hpp #pragma once #include "stdafx.h" #include "CApplication.h" #include "CW ...

  7. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  8. JavaScript 常用功能总结

    小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...

  9. Android android-common 常用功能和工具集合

    本文内容 环境 android-common 项目结构 演示 android-common 参考资料 android-common 主要包括如下内容: 缓存,包括图片缓存.预取缓存.网络缓存. 公共 ...

随机推荐

  1. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  2. Java基础一篇过(五)Map这篇就够了

    文章更新时间:2020/03/03 一.Map介绍 Map是Java的一个接口,没有继承,以Key--Value的形式来储存元素信息,常用到的有3个子类实现: HashMap 底层数据结构是散列桶(数 ...

  3. ISCC2018 writeup(web)

    比较数字大小 F12 修改maxlength为4 web01 strcmp()函数遇到数组会返回NULL 而PHP是弱类型语言  在==比较的时候,如果有数值的话会先将字符串转换为数值在进行比较,而N ...

  4. 数据库图形表Navicat Premium

    1.什么是数据库? 存储数据,为了方便查询和使用 web时代使用最广泛的关系型数据库 2.历史: 瑞典公司开发,卖给SUN,SUN又卖给ORACLE 开源,免费,支持多平台 3.数据库图形表Navic ...

  5. 新手C++ 练习项目--计算器

    本篇博客用于记录我自己用C++实现的一个计算器,目标是完成加减乘除带括号的四则运算,并在后期用工厂设计模式加以优化. Part 1:calculate 1+1=2 实现这样的一个式子的计算,只需要用到 ...

  6. Linux下安装ZooKeeper-3.5.6

    下载 官网下载地址是https://www.apache.org/dyn/closer.cgi/zookeeper,下载apache-zookeeper-3.5.6-bin.tar.gz.   sta ...

  7. Electron安装过程深入解析(读完此文解决Electron应用无法启动,无法打包的问题)

    1. 安装Electron依赖包 开发者往往通过npm install(或 yarn add)指令完成为Node.js工程安装依赖包的工作, 安装Electron也不例外,下面是npm和yarn的安装 ...

  8. nessus 本地扫描(一)

    第一次使用nessus ,so 适合小白看看 1.新建扫描.配置策略:起个名字,description是详细记录,类似于说明:targets是要访问的主机ip地址或者网段,必填项   选择好之后sav ...

  9. Arduino 中 EEprom 写入读取清除

    转自:https://www.arduino.cn/thread-1157-1-1.html EEPROM (Electrically Erasable Programmable Read-Only ...

  10. P5911 [POI2004]PRZ (状态压缩dp+枚举子集)

    题目背景 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 题目描述 桥已经很旧了, 所以它不能承受太重的东西.任何时候队伍在桥上的人都不能超过一定的限制. 所以这只队伍过桥时 ...