vue延迟渲染组件_做一个可复用的 echarts-vue 组件(延迟动画加载)
在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1. 可视化的数据往往是异步加载的;2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 ),往往会导致该页面的渲染速度很慢并可能在几秒内卡死,产生极差的用户体验。3. 引入 echarts 组件导致编译后的文件过大从而使得首次访问的加载极慢。关于第三点,大家可以参考之前的撰文 优化 Vue 项目编译文件大小。以下针对上述前两点,给出数据异步、延迟渲染的 echarts vue 组件的设计和实现方式,并对实现之中可能存在的问题进行介绍。用Vue开发动态刷新Echarts组件
1. 抽离 echarts 公共部分形成基础组件
1.1 调研公共部分
首先,我们需要把 echarts 使用中公共的部分抽离出来,形成基础组件。
让我们在 官网 - 5 分钟上手 ECharts 教程中找到使用 echarts 的步骤:
# 1. 获取一个用于挂在 echarts 的 DOM 元素
let $echartsDOM = document.getElementById('echarts-dom')
# 2. 初始化
let myEcharts = echarts.init($echartsDOM)
# 3. 设置配置项
let option = {...}
# 4. 为 echarts 指定配置
myEcharts.setOption(option)
注:在 Vue 中,首先我们需要使用 import echarts from 'echarts' 以引入 echarts。
由上可知,在 echarts 使用中,除第三步设置配置项以外,其他的步骤都是重复的,即可以抽离出来放入组件中统一实现。
注:其实 option 配置中也存在可以抽离的部分,比如我们可以将 echarts 的颜色、散点大小、折线粗细等提取出来统一赋值,以保证 echarts 风格的统一。但由于不同类型的 ehcarts 图的颜色配置方式不同,因而实现起来相对繁琐,这里不进行说明,有兴趣的同学可以自行尝试。
1.2 实现 echarts 功能
首先我们书写一个简单 ehcart.vue,其中,配置项直接复制于官网的教程示例。
<style scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
<template>
<div>
<div class="echarts" id="echarts-dom"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'echarts',
data() {
return {}
},
mounted() {
let $echartsDOM = document.getElementById('echarts-dom')
let myEcharts = echarts.init($echartsDOM)
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
myEcharts.setOption(option)
}
}
</script>
然后在App.vue中引入这一组件,并设置 echarts 的宽高:
<style>
.echarts-container{
width: 100%;
height: 20rem;
}
</style>
<template>
<div id="app">
<i-echart class="echarts-container"></i-echart>
</div>
</template>
<script>
import iEchart from './components/echart'
export default {
name: 'app',
components: {
iEchart
}
}
</script>
刷新页面后,即可看到柱状图。
1.3 组件化
由于我们需要抽离 option 部分,最好的方式是将其作为组件的属性,即 props 交由调用方配置:
# echart.vue
import echarts from 'echarts'
export default {
name: 'echarts',
props: {
option: {
type: Object,
default(){
return {}
}
}
},
data() {
return {}
},
mounted() {
let $echartsDOM = document.getElementById('echarts-dom')
let myEcharts = echarts.init($echartsDOM)
let option = this.option
myEcharts.setOption(option)
}
}
1.4 调用组件
然后我们可以将 option 配置抽离到组件调用方,并通过「传参」的方式进行调用:
<i-echart :option="option" class="echarts-container"></i-echart>
1.5 提高组件强壮型
之前我们注意到,在 option 参数中,我们给出了默认值 {},即空对象。这样做其实是有问题的,即在 echarts 中,如果传入的 option 配置对象不含有 series 键,就会抛出错误:
Error: Option should contains series.
默认值处理是需要存在的,即当调用方传入的对象为空或不存在 series 配置时,应在页面上显示一些提示( 对用户友好的提示,而不是对编程人员 ),即避免因报错而造成空白的情况。
此外,当我们像之前那样给 option 这一参数进行类型限制后,倘若调用方传入非对象类型,Vue 会直接抛出错误——这一结果也不是我们想要的。我们应该取消类型限制,并在 option 发生变化时进行依次以下判断:
1. 是否为对象;
2. 是否为空对象;
3. 是否包含 series 键;
4. series 是否为数组;
5. series 数组是否为空。
代码实现如下:
function isValidOption(option){
return isObject(option) && !isEmptyObject(option)
&& hasSeriesKey(option)
&& isSeriesArray(option) && !isSeriesEmpty(option)
}
function isObject(option) {
return Object.prototype.isPrototypeOf(option)
}
function isEmptyObject(option){
return Object.keys(option).length === 0
}
function hasSeriesKey(option){
return !!option['series']
}
function isSeriesArray(option) {
return Array.isArray(option['series'])
}
function isSeriesEmpty(option){
return option['series'].length === 0
}
注:实际上,当判断出 option 为对象后,可以直接进行第三步的判断。
然后,当判断 option 符合上述三种情况时,在页面上显示如「数据为空」之类的提示:
import echarts from 'echarts'
export default {
name: 'echarts',
props: {
option: {
default(){
return {}
}
}
},
data() {
return { }
},
mounted() {
//# 1. 获取一个用于挂在 echarts 的 DOM 元素
let $echartsDOM = document.getElementById('echarts-dom')
//# 2. 初始化
let myEcharts = echarts.init($echartsDOM)
//# 3. 设置配置项 let option = {...}
//# 4. 为 echarts 指定配置 myEcharts.setOption(option)
this.myEcharts = myEcharts
this.checkAndSetOption()
},
watch: {
option(option){
this.checkAndSetOption()
}
},
methods: {
checkAndSetOption(){
let option = this.option //配置等于父组件传过来的数据
if(isValidOption(option)){
this.myEcharts.setOption(option); //渲染出来
this.myEcharts.hideLoading(); //隐藏加载动画
}else{
this.myEcharts.showLoading(); //加载动画
}
}
}
}
这里在书写代码时,有以下几点需要注意:
1、我们对 DOM 元素获取结果做了校验,即当 option 不符合要求时,ID 为 echarts-dom 的 DOM 元素是不存在的,此时 document.getElementById() 的返回结果为空,不能直接使用 echarts.init(),否则会抛出错误:Error: Initialize failed: invalid dom;
2、在 Vue 中,初始化的值不会被 watch 钩子捕捉,从而导致组件被调用方调用并赋予 option 参数时不会进入校验。虽然可以使用 immediate: true 使得 watch 钩子能够在属性初始化赋值时被触发,但这样做是不合适的。因为这样设置之后,在 option 初始化从而触发 watch 时,用于挂载 echarts 的 DOM 元素还未存在于页面中,从而导致出现 TypeError: Cannot read property 'setOption' of null 的错误。我们要重点注意 echarts 作用的生命周期,这一点后续还会涉及。
1.6 增强组件功能 - 数据加载提示
在实际场景中,用于渲染的数据常常是异步获取的,在异步加载数据之中,我们可能需要在页面中显示如「正在加载...」的字样来表示加载过程正在进行以提高用户体验。而加载过程就组件而言是无法直接获取的,所以,我们需要使用某一参数用于进行加载信息的显示
ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
//在App.vue中模拟3秒后获取数据
data() {
return {
option: {}
}
},
created(){
setTimeout(()=>{
this.option={
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
console.log(this.option);
},3000)
}
然后就可以在echarts组件里调用了
methods: {
checkAndSetOption(){
let option = this.option //配置等于父组件传过来的数据
if(isValidOption(option)){
this.myEcharts.setOption(option); //渲染出来
this.myEcharts.hideLoading(); //隐藏加载动画
}else{
this.myEcharts.showLoading(); //加载动画
}
}
}
1.7 增强组件功能 - 数据不合法提示
当传入的 option 值不符合规定时。基于这一标识,我们可以对 echarts 组件进行优化,当 option 不合法或数据为空时给出提示信息而不是显示空白甚至报错。
PS:暂时更新到这了,如果有后续,我回接着更新了
vue延迟渲染组件_做一个可复用的 echarts-vue 组件(延迟动画加载)相关推荐
- hide show vue 动画_做一个可复用的 echarts-vue 组件(延迟动画加载)
在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1. 可视化的数据往往是异步加载的:2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 ),往往会导致该页面的渲染速度很慢并可 ...
- js页面加载前执行_做一名合格的前端开发工程师:Javascript加载执行问题探索
做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一:原始情况 首先大家看看如下的代码: 估计90%的程序员都会把js文件放在head中,但是大家有没有深究过 ...
- vue 离开页面事件_【必看】58 道 Vue 常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度...
△ 是新朋友吗?记得先点web前端学习圈关注我哦- 1.vue优点? 答: 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb : 简单易学:国人开发,中文文档,不存在语言障碍 , ...
- vue-cli ——解决多次复用含有Echarts图表组件的问题
vue-cli --解决多次复用含有Echarts图表组件的问题 参考文章: (1)vue-cli --解决多次复用含有Echarts图表组件的问题 (2)https://www.cnblogs.co ...
- “在解决方案中的一个或多个项目由于以下原因未能加载 项目文件或网站已移动或重新命名,或者不在您的计算机上” 的解决办法...
用Visual studio.NET 2003/2005/2008在打开从网上下载的解决方案或从其他地方考来的解决方案时,往往会碰到一个这样的错误,提示说: "在解决方案中的一个或多个项目由 ...
- 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
- vue 筛选组件_记一个复杂组件(Filter)的从设计到开发
此文前端框架使用 rax,全篇代码暂未开源(待开源) 原文链接地址:Nealyang/PersonalBlog 前言 貌似在面试中,你如果设计一个 react/vue 组件,貌似已经是司空见惯的问题了 ...
- 草图大师里创建动态组件_【干货】SketchUp建模|教你做一个有生命的家具动态组件...
作者|活力网-Andrew 同学们大扎好! 本次专题来自SU建模情报局 其实Andrew准备了10几个建模案例 但是都没有时间录制成视频 之后也会加快更新的速度 本期是我们的 本期案例介绍 为家具模型 ...
- web大屏展示用到的组件_从零开始设计数据大屏—基于Vue
为什么要做数据大屏? 现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的生活.但大数据在不是从事技术开发的人来说没有很明显的感受,很多人对大数据的概念只是停留在每年网易云音乐对个人听歌的汇总上. ...
- python字节码执行函数_做一个字节码追踪器,从内部理解 Python 的执行过程
最近我在研究 Python 的执行模型.我对 Python 内部的东西挺好奇,比如:类似 YIELDVALUE 和 YIELDFROM 此类操作码的实现:列表表达式.生成器表达式以及一些有趣的Pyth ...
最新文章
- 图解CS版的皮肤界面编程示例
- 解决PyCharm中报出 “Shadows built-in name xxx“ 的警告
- VTK:网格之WindowedSincPolyDataFilter
- 推荐一个优化分页查询的办法(分页数很大的情况)
- AT2672 Coins
- 关于TCP协议的大部分,面试常问的几点都在这理里了
- category和extension的区别
- Ubuntu学习日记--Lesson4:环境变量详解
- python中str类型_python的str是什么类型
- SSD固态硬盘4K对齐一键分区
- 【无标题】2022施工员-设备方向-岗位技能(施工员)考试题模拟考试题库及模拟考试
- java运行环境搭建_java的运行环境
- android 酷我音乐接口,酷我音乐 各种付费歌曲,音质包括ape、flac无损音乐api接口...
- SQL SERVER 2000用户sa 登录失败的解决办法
- 【论文笔记】视频物体检测(VID)系列 FGFA:Flow-Guided Feature Aggregation for Video Object Detection
- 学计算机高中选那三科,高中选哪三科最吃香
- 关于英语学习和字幕的那点事儿
- 通俗易懂说:snprintf scnprintf
- Javascript基础知识 1(JS)
- 程序运行程序是出现的this application has requested the runtime to terminate it in an unusual way. 异常分析