echarts学习:基本使用和组件封装

前言

我在工作中使用echarts较少,这就导致每次使用时都要从头再来,这让我很头疼。因此我决心编写一系列文章将我参与工作后几次使用echarts所用到的知识记录下来,以便将来可以快速查阅。

一、基本使用

像我一样的新手,想要入门echarts还是建议要从官方文档的快速上手开始。我在这里会记录其中的几个简要的步骤。

1.安装

NPM

npm install echarts

CDN

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>

2.项目中引入

注意最新的版本一定要用这种带有as的方式,某些老的博客文章中可能写的是旧版的引入方式。

import * as echarts from 'echarts';

3.绘制图表

使用echarts绘制图表很简单,我把它称为“echarts的三步走战略”:准备容器获取实例设置选项

3.1准备容器

准备容器就是要准备一个element作为放置echarts图表的容器,许多的图表库都有这样的操作。容器元素的作用就是确定图表在我们应用中的位置,以及限制图表的范围,因此容器必须要设置尺寸样式(是谁忘了设置尺寸?哦,原来是我 (*/ω\*) ,那没事了)。

<!-- 记得给容器设置宽高 -->
<div id="main" style="width: 600px;height:400px;"></div>

还有一个需要注意的点是,如果在Vue中使用echarts,有时可能会出现无法获取到dom的情况。想要了解具体的问题情境和解决方法请浏览我的这篇文章:vue3中获取元素DOM的方法

3.2 获取实例

获取实例就是通过echarts.init()工厂方法获取一个echarts实例,init方法接收一个dom(容器dom)返回一个实例。

<template><div ref="container" style="width: 600px; height: 400px"></div>
</template><script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'// 容器元素
const container = ref(null)onMounted(() => {// 获取实例const chartInstance =  echarts.init(container.value)
})
</script>

3.3 设置选项

最后需要使用echarts实例的setoption方法设置配置项。配置项是echarts的核心,其内容博大精深,想了解更多有关echarts配置项的信息,请查阅echarts配置项手册。

<template><div ref="container" style="width: 600px; height: 400px"></div>
</template><script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'// 容器元素
const container = ref(null)onMounted(() => {// 获取实例const chartInstance = echarts.init(container.value)// 设置选项chartInstance.setOption({xAxis: {type: 'category',show: false,boundaryGap: false,},yAxis: {show: false,},series: [{type: 'line',data: [620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220,620,],areaStyle: {color: 'purple',},lineStyle: {width: 0,},itemStyle: {opacity: 0,},smooth: true,},],grid: {top: 0,bottom: 0,left: 0,right: 0,},})
})
</script>

最后绘出如下的图表

二、封装echarts组件

大概在一年前我在公司的某个项目中看到了封装的echarts组件,之后我也曾经研究过,但最后都半途而废了。如今我重头再来,希望这次可以成功。

1.为什么要封装echarts组件?

echarts组件的主要作用是对上面所提到的 "三步走战略" 进行一个封装,这样我们就不需要重复去执行这些步骤了。每次绘图时只需要给echarts组件传递配置项即可。

2.echarts组件需要实现的功能

我封装的echarts组件准备实现以下的功能:

基础功能

优化功能

拓展功能

  1. 基本的“三步走战略”
  2. 销毁实例
  3. 图表的重绘
  1. 图表尺寸的自适应(当页面大小变化时,图表尺寸跟着变化)
  2. 图表宽高可设置
  3. 展示loading动画
  1. 侦听图表的点击事件(这里也可以补充其它需要的事件)
  2. 暴露实例方法

3.封装基本功能

再复习一下,使用echarts绘制图表的“三步走战略”是:

  1. 准备容器
  2. 获取实例
  3. 设置选项
<template><div ref="container" style="width: 600px; height: 400px"></div>
</template><script setup>
import { onMounted, onUnmounted, ref ,nextTick} from 'vue'
import * as echarts from 'echarts'// props
const props = defineProps({option: {type: [Object, null],require: true,}, //配置项
})// 容器元素
const container = ref(null)
// 实例
const instance = ref(null)
// 初始化
function init() {if (!container.value) return//查看容器上是否已经挂载了echarts实例 , 如果已挂载就获取并使用该实例,如果未挂载就进行初始化instance.value = echarts.getInstanceByDom(container.value)if (!instance.value) {instance.value = echarts.init(container.value)}draw()
}
// 绘制图表
function draw() {if (!props.option || !instance.value) returninstance.value.setOption(props.option)
}onMounted(() => {nextTick(() => {init()})
})
</script>

考虑容器已被挂载echarts实例的情况

上面的代码中值得注意的一个点是,在初始化的时候考虑了容器可能已被挂载了实例的情况。

为了兼容这种情况就首先使用echarts.getInstanceByDom获取容器上的实例。如果容器已有实例就使用该实例,如果容器上没有实例就进行初始化。

instance.value = echarts.getInstanceByDom(container.value)
if (!instance.value) {instance.value = echarts.init(container.value)
}

4.将echats实例代理为响应式对象可能带来的风险

将echarts实例保存为响应式对象,可能会造成一系列意外的问题。因此在这里建议将echarts组件中的实例使用普通变量或者shallowRefshallowReactivemarkRaw等API进行保存。

我是使用了shallowRef来取代原来的ref:

// 实例
const instance = shallowRef(null)

想要了解更多的相关信息,可以浏览我写的这篇文章 将echats实例代理为响应式对象可能带来的风险 。

5.销毁实例

当echarts组件被卸载时,我们应当调用dispose方法销毁实例,以防止可能得内存泄漏。

onUnmounted(()=>{instance.value?.dispose()
})

6.图表重绘

我们希望当echarts组件中接收到的一些props(例如option)发生变化时可以重新绘制图表。

我一开始的写法是这样的

function draw() {if (!props.option || !instance.value) return// 先清空实例instance.value && instance.value.clear()// 然后再重新绘制instance.value.setOption(props.option)
}watch(props,()=>{draw()
})

后来发现只需要在调用setOption方法时将其notMerge选项设为true,就会自动的先清空组件然后再根据传入的配置项渲染新的图表。

function draw() {if (!props.option || !instance.value) returninstance.value.setOption(props.option, {notMerge: true,})
}watch(props,()=>{draw()
})

7.实现图表的自适应

我们希望当页面的尺寸发生变化时,图表的尺寸也会跟着变化。我实现这一功能的基本思路如下图所示:

我使用ResizeObserver监听容器元素的尺寸变化,当容器的尺寸变化时,调用chartInstance.resize方法重置图表尺寸。想了解与图表自适应相关的详细内容,请参考我的文章:图表自适应。


const resizeObserver = shallowRef(null) // 元素尺寸侦听器
const debounceTimer = ref(null) //防抖计时器id// 重置图表尺寸
function resize() {clearTimeout(debounceTimer.value)debounceTimer.value = setTimeout(() => {instance.value?.resize({animation: {duration: 300,},})debounceTimer.value = null}, 300)
}
resizeObserver.value = new ResizeObserver(resize)onMounted(() => {nextTick(() => {resizeObserver.value.observe(container.value)})
})onUnmounted(() => {resizeObserver.value?.disconnect()resizeObserver.value = nullclearTimeout(debounceTimer.value)debounceTimer.value = null
})

8.图表宽高可设置

我们希望可以在使用echarts组件的时候自定义图表的宽高。想要实现这一功能也很简单,只需要增加两个prop即可。

const props = defineProps({width: {type: String,default: '300px',},height: {type: String,default: '200px',},
})
<div ref="container" :style="{width: props.width, height: props.height}"></div>

9.显示loading动画

很多时候图表数据都是异步的,获取数据需要时间,此时就希望在数据获取的时候给用户展现loading动画效果,以提升用户体验。

以前我都是借助于第三方组件的的loading组件来实现这一功能的(例如Ant Design 的 <a-spin> 或者 Element-ui 的 v-loading)。

现在才知道其实echarts是有自带的loading动画效果的,可以通过实例的showLoadinghideLoading方法控制。现在我们就可以借助这两个方法来实现图表的loading效果:

const props = defineProps({loading: {type: Boolean,default: false,},
})// loading动画
watchEffect(() => {props.loading ? instance.value?.showLoading() : instance.value?.hideLoading()
})

让我们来看一下最终的效果:

10.侦听图表的事件

echarts图表有一套自己的事件系统,当我们需要实现一些与图表的交互效果的时候,可能就需要用到这些事件。我们可以在echarts组件中提前封装这些事件以便在将来使用。例如我添加一个图表的点击事件:

const props = defineProps({// 省略...onClick: {type: Function,},
})function init() {// 省略...addListeningChartEvent()
}// echarts事件绑定
function addListeningChartEvent() {// 点击事件props.onClick &&instance.value?.on('click','series', (e) => {props.onClick(e, instance.value, props.option)})
}

11.暴露echarts实例

上面提到了在组件中侦听图表事件,但授人以鱼不如授人以渔,比起琐碎的封装事件,不如直接将echarts实例暴露给使用者。

我们可以参考Vue官方文档了解如何从组件中暴露属性和方法:

于是我使用defineExpose方法在将我组件中的实例暴露出来:

defineExpose({getInstance: () => instance.value,resize,draw,
})

12.完整代码

<template><divref="container":class="props.className":style="{ width: props.width, height: props.height }"></div>
</template><script setup>
import {nextTick,onMounted,onUnmounted,ref,shallowRef,watch,watchEffect,
} from 'vue'
import * as echarts from 'echarts'// props
const props = defineProps({option: {type: [Object, null],require: true,}, //配置项width: {type: String,default: '300px',},height: {type: String,default: '200px',},className: {type: String,default: 'cl-chartCom',},loading: {type: Boolean,default: false,},onClick: {type: Function,},
})const container = ref(null) // 容器元素
const instance = shallowRef(null) // 实例
const resizeObserver = shallowRef(null) // 元素尺寸侦听器
const debounceTimer = ref(null) //防抖计时器id// 初始化
function init() {if (!container.value) return//查看容器上是否已经挂载了echarts实例 , 如果已挂载就获取并使用该实例,如果未挂载就进行初始化instance.value = echarts.getInstanceByDom(container.value)if (!instance.value) {instance.value = echarts.init(container.value)}// 绘制图表draw()// 侦听图表事件addListeningChartEvent()
}
// 绘制图表
function draw() {if (!props.option || !instance.value) returninstance.value.setOption(props.option, {notMerge: true,})
}// 图表自适应
// 重置图表尺寸
function resize() {clearTimeout(debounceTimer.value)debounceTimer.value = setTimeout(() => {instance.value?.resize({animation: {duration: 300,},})debounceTimer.value = null}, 300)
}
resizeObserver.value = new ResizeObserver(resize)// 重绘图表
watch(props, () => {nextTick(() => {draw()})
})// loading动画
watchEffect(() => {props.loading ? instance.value?.showLoading() : instance.value?.hideLoading()
})// echarts事件绑定
function addListeningChartEvent() {// 点击事件props.onClick &&instance.value?.on('click', 'series', (e) => {props.onClick(e, instance.value, props.option)})
}onMounted(() => {nextTick(() => {init()resizeObserver.value.observe(container.value)})
})
onUnmounted(() => {instance.value?.dispose()resizeObserver.value?.disconnect()resizeObserver.value = nullclearTimeout(debounceTimer.value)debounceTimer.value = null
})defineExpose({getInstance: () => instance.value,resize,draw,
})
</script>

参考资料

  1. Vue3 封装 ECharts 通用组件_vue3如何封装echarts-CSDN博客
  2. Vue3 封装ECharts 组件 抽离复用 包含图表随着窗口宽高变化而变化-CSDN博客
  3. echartsInstance.setOption - Apache ECharts
  4. echartsInstance.showLoading - Apache ECharts
  5. events.鼠标事件.click - Apache ECharts
  6. 模板引用-Vue.js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/340782.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET IoC 容器(三)Autofac

目录 .NET IoC 容器&#xff08;三&#xff09;AutofacAutofacNuget 安装实现DI定义接口定义实现类依赖注入 注入方式构造函数注入 | 属性注入 | 方法注入注入实现 接口注册重复注册指定参数注册 生命周期默认生命周期单例生命周期每个周期范围一个生命周期 依赖配置Nuget配置文…

新手教程之使用LLaMa-Factory微调LLaMa3

文章目录 为什么要用LLaMa-Factory什么是LLaMa-FactoryLLaMa-Factory环境搭建微调LLaMA3参考博文 为什么要用LLaMa-Factory 如果你尝试过微调大模型&#xff0c;你就会知道&#xff0c;大模型的环境配置是非常繁琐的&#xff0c;需要安装大量的第三方库和依赖&#xff0c;甚至…

英伟达GPU架构加速狂飙

NVIDIA首席执行官黄仁勋在台湾大学体育馆发表主题演讲&#xff0c;展示了新一代Rubin架构&#xff0c;这是NVIDIA加速推出新架构的最新成果。 在讨论NVIDIA下一代架构时&#xff0c;黄仁勋提到了Blackwell Ultra GPU&#xff0c;并表示它可能会继续升级。然后他透露&#xff0c…

Unity 之 Android 【获取设备的序列号 (Serial Number)/Android_ID】功能的简单封装

Unity 之 Android 【获取设备的序列号 (Serial Number)/Android_ID】功能的简单封装 目录 Unity 之 Android 【获取设备的序列号 (Serial Number)/Android_ID】功能的简单封装 一、简单介绍 二、获取设备的序列号 (Serial Number) 实现原理 1、Android 2、 Unity 三、注意…

蓝牙网关和蓝牙mesh网关的对比

蓝牙网关和蓝牙Mesh网关是物联网&#xff08;IoT&#xff09;领域中两种重要的设备&#xff0c;它们各自有不同的特点和应用场景。以下是它们的一些主要对比和区别 1. 网络结构&#xff1a; - 蓝牙网关&#xff1a;通常采用点对点或星型拓扑结构&#xff0c;一个网关连接多个…

Scikit-Learn 基础教程

目录 &#x1f40b;Scikit-Learn 基础教程 &#x1f40b;Scikit-Learn 简介 &#x1f40b; 数据预处理 &#x1f988;数据集导入 &#x1f988;数据清洗 &#x1f988;特征选择 &#x1f988;特征标准化 &#x1f40b; 模型选择 &#x1f988;分类模型 &#x1f988;回…

npm install 出错,‘proxy‘ config is set properly. See: ‘npm help config‘

背景 从远程clone下项目之后&#xff0c;使用命令 npm install 安装依赖&#xff0c;报错如下 意为&#xff1a; 报错&#xff1a; npm犯错!network与网络连通性有关的问题。 npm犯错!网络在大多数情况下&#xff0c;你背后的代理或有坏的网络设置。 npm犯错!网络 npm犯错…

React - 实现走马灯组件

一、实现效果 二、源码分析 import {useRef, useState} from "react";export const Carousel () > {const images [{id: 3, url: https://sslstage3.sephorastatic.cn/products/2/4/6/8/1/6/1_n_new03504_100x100.jpg}, {id: 1, url: https://sslstage2.sephor…

10-Django项目--Ajax请求

目录 Ajax请求 简单示范 html 数据添加 py文件 html文件 demo_list.html Ajax_data.py 图例 Ajax请求 简单示范 html <input type"button" id"button-one" class"btn btn-success" value"点我"> ​ ​ <script>/…

模板进阶

非类型模板参数&#xff08;常量参数&#xff09; 相当于向类传递常量&#xff08;编译前确定&#xff09;参数 只能传整型/size_t&#xff0c;不可double等 C20 后可以支持其他内置类型&#xff08;可指针&#xff09; 自定义类型的实参永远不行 array 可理解为固定size的…

10倍速提升音乐制作,FL Studio21.2.9中文版揭秘!

FL Studio21中文版是数字音频工作站软件领域的一颗璀璨明星&#xff0c;它以强大的功能和直观的操作界面&#xff0c;赢得了音乐制作人和爱好者的广泛青睐。无论是专业音乐人还是初学者&#xff0c;都能通过这款软件探索和实现他们对音乐的创作和想象。本文将详细介绍FL Studio…

Ubuntu24.04 LTS安装中文输入法

前言 最近&#xff0c;windows玩没了&#xff0c;一怒之下决定换一个操作系统&#xff0c;当然就是最新的Ubuntu24.04 LTS.&#xff0c;其中魔法和咒语&#xff08;汉语&#xff09;是inux遇到的第一大难关&#xff0c;我权限不够教不了魔法&#xff0c;但我可以教你咒语(๑•…

Pycharm 添加内容根

解决问题&#xff1a;包未能被正常引入时

LeetCode746使用最小花费爬楼梯

题目描述 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。请你计算并返回达到楼梯顶部的最低花费。 解析 动态…

JVM运行数据区-Java堆

Java堆 堆区&#xff08;Heap区&#xff09;是JVM运行时数据区占用内存最大的一块区域&#xff0c;每一个JVM进程只存在一个堆区&#xff0c;它在JVM启动时被创建&#xff0c;JVM规范中规定堆区可以是物理上不连续的内存&#xff0c;但必须是逻辑上连续的内存。 1、堆区是线程…

R语言探索与分析17-CPI的分析和研究

一、选题背景 CPI&#xff08;居民消费价格指数&#xff09;作为一个重要的宏观经济指标&#xff0c;扮演着评估通货膨胀和居民生活水平的关键角色。在湖北省这个经济活跃的地区&#xff0c;CPI的波动对于居民生活、企业经营以及政府宏观经济政策制定都具有重要的影响。因此&a…

【MATLAB】概述1

非 ~ 注释 % 定义 >> 数组 赋值 赋值&#xff1a;>> x1 函数 数组 x[x1,x2] 行向量&#xff08;&#xff0c;or ) x[x1;x2] 列向量 x. 转置等间隔向量 1-10 向量&#xff1a;>>xlinspace(1,10,10) 矩阵 矩阵&#xff1a;>>A[1,2,3;4,5,6;7,8,9] …

容器中运行ip addr提示bash: ip: command not found【笔记】

容器中运行ip addr提示bash: ip: command not found 原因没有安装ip命令。 rootdocker-desktop:/# ip addr bash: ip: command not found rootdocker-desktop:/# apt-get install -y iproute2

设计模式20——职责链模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 职责链模式&#xff08;Chain …

使用耳机,如何避免听力受损?

使用耳机&#xff0c;如何避免听力受损&#xff1f; 随着数字时代生活方式的改变&#xff0c;无线耳机近年来成为消费者智慧生活的新宠。不少人会在上班通勤的路上习惯性地戴上耳机&#xff0c;打开播客或聆听音乐。工作中戴上耳机视频会议。午休的时候戴上耳机看视频。但你知…