目前已解锁以下功能:

  • [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. SQL中只要用到聚合函数就一定要用到group by 吗?

    1.当聚集函数和非聚集函数出现在一起时,需要将非聚集函数进行group by2.当只做聚集函数查询时候,就不需要进行分组了.

  2. Spring学习(四)IOC详解

    一.简介 概念:控制反转是一种通过描述(在 Java 中可以是 XML 或者注解)并通过第三方(Spring)去产生或获取特定对象的方式.(被动创建) 优势: ① 降低对象之间的耦合 ② 我们不需要理 ...

  3. 【MySQL】面试官:如何添加新数据库到MySQL主从复制环境?

    写在前面 今天,一名读者反馈说:自己出去面试,被面试官一顿虐啊!为什么呢?因为这名读者面试的是某大厂的研发工程师,偏技术型的.所以,在面试过程中,面试官比较偏向于问技术型的问题.不过,技术终归还是要服 ...

  4. C#实现创建、编辑NX表达式

    在NX8.5中使用C#编辑表达式中有个坑,part.Expressions.Edit该方法鲁棒性很差,当表达式有错时也能编辑成功(手动在NX中增加错误表达式会有弹框,无法创建,而该方法却可以,疑是bu ...

  5. 解决 webpack .\src\main.js .\dist\bundle.js 错误

    打包的命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径 栗子: webpack .\src\main.js .\dist\bundle.js 提示错误,错误信息如下: 错误原因 w ...

  6. Redis深入浅出

    一.基础使用 常用命令 keys,expire(过期),ttl(查看生存时间),set,select,dbsize,flushdb(删除当前库),flushall(删除所有), get,append, ...

  7. 【CF1425H】Huge Boxes of Animal Toys 题解

    原题链接 题意简介: 已知分别处在 \((-\infty,-1]\) H.\((-1,0)\) .\((0,1)\) .\([1,\infty)\) 的实数的数量(下记为集合 \(A,B,C,D\) ...

  8. mysql-15-view

    #视图 /* 含义:虚拟表,和普通表一样使用.通过表动态生成的数据 只保存了sql逻辑,不保存查询结果 应用场景: 1.多个地方用到同样的查询结果 2.该查询结果使用的sql语句较为复杂 */ USE ...

  9. Django-Scrapy生成后端json接口

    Django-Scrapy生成后端json接口: 网上的关于django-scrapy的介绍比较少,该博客只在本人查资料的过程中学习的,如果不对之处,希望指出改正: 以后的博客可能不会再出关于djan ...

  10. 084 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 03 构造方法-this关键字

    084 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 03 构造方法-this关键字 本文知识点:构造方法-this关键字 说明:因为时间紧 ...