当前位置: 首页 > news >正文

基于 Vue 3 封装一个 ECharts 图表组件

在前端开发中,数据可视化是展示数据的重要方式之一。ECharts 是一个强大的开源可视化库,能够帮助我们轻松地创建各种图表。本文将介绍如何在 Vue 3 项目中使用 ECharts 封装一个图表组件。

代码

<template><div ref="chartRef" style="height: 100%; width: 100%"></div>
</template><script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, onUnmounted, shallowRef, watch } from "vue";const props = defineProps(["option"]);// 使用 shallowRef 来创建一个对 div 元素的引用
const chartRef = shallowRef(null);let chartInstance: echarts.ECharts | null = null;// 初始化图表,如果图表容器不可用或图表已初始化,则不执行任何操作。
const initChart = () => {if (!chartRef.value) {console.error("图表容器不可用。");return;}if (chartInstance) {// 防止重复初始化return;}try {chartInstance = echarts.init(chartRef.value);chartInstance.setOption(props.option);} catch (error) {console.error("无法加载图标:", error);}
};// 当组件挂载时调用的函数,用于初始化图表并添加窗口大小调整的监听器
onMounted(() => {initChart();const handleResize = () => {if (chartInstance) {chartInstance.resize();}};// 监听窗口大小改变,并重新调整图表大小window.addEventListener("resize", handleResize);// 当组件卸载时调用的函数,用于清理资源onUnmounted(() => {if (chartInstance) {chartInstance.dispose();chartInstance = null;}window.removeEventListener("resize", handleResize);});
});// 监听 props.option 的变化,以更新图表选项
watch(() => props.option,(newOption: echarts.EChartsOption) => {if (chartInstance) {chartInstance.setOption(newOption);}}
);
</script>

说明

容器定义

<template><div ref="chartRef" style="height: 100%; width: 100%"></div>
</template>

这段代码用于创建图表容器,并使用 ref 指令获取该元素的引用。相比于使用 id,ref 更加灵活,避免了 id 重复的问题,且更符合 Vue 的响应式编程风格。

引用实例

const chartRef = shallowRef(null);
let chartInstance: echarts.ECharts | null = null;

使用 shallowRef 创建对 div 元素的引用。shallowRef 和 ref 的区别在于,shallowRef 仅对引用对象的第一层做响应式处理,避免了不必要的性能消耗。本文引用的 DOM 元素不需要深层次的响应式处理,所以选择 shallowRef

初始化

const initChart = () => {if (!chartRef.value) {console.error("图表容器不可用。");return;}if (chartInstance) {// 防止重复初始化return;}try {chartInstance = echarts.init(chartRef.value);chartInstance.setOption(props.option);} catch (error) {console.error("无法加载图标:", error);}
};

通过 echarts.init 初始化图表实例,并设置图表配置。该函数首先检查 chartRef 是否存在,以避免在容器不可用时初始化图表。然后,通过 echarts.init 初始化图表实例,并设置图表配置。

挂载卸载

onMounted(() => {initChart();const handleResize = () => {if (chartInstance) {chartInstance.resize();}};// 监听窗口大小改变,并重新调整图表大小window.addEventListener("resize", handleResize);// 当组件卸载时调用的函数,用于清理资源onUnmounted(() => {if (chartInstance) {chartInstance.dispose();chartInstance = null;}window.removeEventListener("resize", handleResize);});
});

挂载不必解释,卸载是为了及时清理,防止可能的内存泄露问题。

及时更新

watch(() => props.option,(newOption: echarts.EChartsOption) => {if (chartInstance) {chartInstance.setOption(newOption);}}
);

图表是有可能动态变化的,因此要设置一个监听,这样的话,数据就能得到及时的更新。

相关文章:

基于 Vue 3 封装一个 ECharts 图表组件

在前端开发中&#xff0c;数据可视化是展示数据的重要方式之一。ECharts 是一个强大的开源可视化库&#xff0c;能够帮助我们轻松地创建各种图表。本文将介绍如何在 Vue 3 项目中使用 ECharts 封装一个图表组件。 代码 <template><div ref"chartRef" styl…...

LeetCode 算法: 旋转图像c++

原题链接&#x1f517;&#xff1a; 旋转图像 难度&#xff1a;中等⭐️⭐️ 题目 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图…...

Java Android 静态内部类 以及优雅实现单例模式/避免handler内存泄漏

前言 Java 中的静态内部类(Static Nested Class)是定义在另一个类里面的一个静态类。它和普通的内部类有些区别,主要是静态内部类不需要依赖于外部类的实例就可以被创建和访问。这种类的特性使得它非常适合用来作为辅助类,用于支持外部类的功能。 特点以及使用场景 静态内…...

Flink协调器Coordinator及自定义Operator

Flink协调器Coordinator及自定义Operator 最近的项目开发过程中&#xff0c;使用到了Flink中的协调器以及自定义算子相关的内容&#xff0c;本篇文章主要介绍Flink中的协调器是什么&#xff0c;如何用&#xff0c;以及协调器与算子间的交互。 协调器Coordinator Flink中的协调…...

C调用C++中的类

文章目录 测试代码 测试代码 在C语言中调用C类&#xff0c;需要遵循几个步骤&#xff1a; 在C代码中&#xff0c;确保C类的函数是extern “C”&#xff0c;这样可以防止名称修饰&#xff08;name mangling&#xff09;。 使用头文件声明C类的公共接口&#xff0c;并且为这个…...

NFTScan 正式上线 Sei NFTScan 浏览器和 NFT API 数据服务

2024 年 6 月 12 号&#xff0c;NFTScan 团队正式对外发布了 Sei NFTScan 浏览器&#xff0c;将为 Sei 生态的 NFT 开发者和用户提供简洁高效的 NFT 数据搜索查询服务。NFTScan 作为全球领先的 NFT 数据基础设施服务商&#xff0c;Sei 是继 Bitcoin、Ethereum、BNBChain、Polyg…...

2024年高考:计算机相关专业前景分析与选择建议

2024年高考结束&#xff0c;面对计算机专业是否仍具有吸引力的讨论&#xff0c;本文将从行业趋势、就业市场、个人兴趣与能力、专业选择建议等多个角度进行深入分析&#xff0c;以帮助考生和家长做出明智的决策。 文章目录 一、行业趋势与就业市场1. 计算机行业的发展与变革2. …...

SQL聚合函数---汇总数据

此篇文章内容均来自与mysql必知必会教材&#xff0c;后期有衍生会继续更新、补充知识体系结构 文章目录 SQL聚集函数表&#xff1a;AGV()count()根据需求可以进行组合处理 max()min()max&#xff08;&#xff09;、min&#xff08;&#xff09;、avg&#xff08;&#xff09;组…...

webpack5新特性

webpack5新特性 持久化缓存资源模块moduleIds & chunkIds的优化更智能的tree shakingnodeJs的polyfill脚本被移除支持生成e6/es2015的代码SplitChunk和模块大小Module Federation 持久化缓存 缓存生成的webpack模块和chunk,来改善构建速度cache 会在开发模式被设置成 ty…...

java单体服务自定义锁名称工具类

需求&#xff1a; 操作员能够对自己权限下的用户数据进行数据填充&#xff0c;但是不同操作员之间可能会有重复的用户数据&#xff0c;为了避免操作员覆盖数据或者重复操作数据&#xff0c;应该在操作用户数据时加锁&#xff0c;要求加的这一把锁必须是细粒度的锁&#xff0c;…...

整理好了!2024年最常见 20 道并发编程面试题(四)

上一篇地址&#xff1a;整理好了&#xff01;2024年最常见 20 道并发编程面试题&#xff08;三&#xff09;-CSDN博客 七、请解释什么是条件变量&#xff08;Condition Variable&#xff09;以及它的用途。 条件变量是一种同步机制&#xff0c;用于在多线程编程中协调线程间的…...

持续交付一

一、 你的项目依赖的 jQuery 版本是 1.0.0 &#xff0c;Bootstrap 依赖的版本是 1.1.0&#xff0c;而 Chosen 依赖的版本是 1.2.0&#xff0c;看上去都是小版本不一致&#xff0c;一开始并没有发现任何问题&#xff0c;但是如果到后期发现不兼容&#xff0c;可能就为时已晚了。…...

基于 Python 解析 XML 文件并将数据存储到 MongoDB 数据库

1. 问题背景 在软件开发中&#xff0c;我们经常需要处理各种格式的数据。XML 是一种常用的数据交换格式&#xff0c;它可以存储和传输结构化数据。很多网站会提供 XML 格式的数据接口&#xff0c;以便其他系统可以方便地获取数据。 我们有这样一个需求&#xff1a;我们需要从…...

Interview preparation--案例加密后数据的模糊查询

加密数据的模糊查询实现方案 我们知道加密后的数据对模糊查询不是很友好&#xff0c;本篇就针对加密数据模糊查询这个问题来展开讲一讲实现的思路&#xff0c;希望对大家有所启发。为了数据安全我们在开发过程中经常会对重要的数据进行加密存储&#xff0c;常见的有&#xff1…...

一个简单的R语言数据分析案例

在R语言中&#xff0c;数据分析可以涵盖广泛的领域&#xff0c;包括描述性统计、探索性数据分析、假设检验、数据可视化、机器学习等。以下是一个简单的R语言数据分析案例&#xff0c;该案例将涵盖数据导入、数据清洗、描述性统计、数据可视化以及一个简单的预测模型。 案例&a…...

springCloudAlibaba之分布式事务组件---seata

Seata Sea学习分布式事务Seata二阶段提交协议AT模式TCC模式 Seata服务搭建Seata Server&#xff08;事务协调者TC&#xff09;环境搭建seata服务搭建-db数据源seata服务搭建-nacos启动seata服务 分布式事务代码搭建-client端搭建接入微服务应用 Sea学习 事务&#xff1a;事务是…...

无公网IP与服务器完成企业微信网页应用开发远程调试详细流程

文章目录 前言1. Windows安装Cpolar2. 创建Cpolar域名3. 创建企业微信应用4. 定义回调本地接口5. 回调和可信域名接口校验6. 设置固定Cpolar域名7. 使用固定域名校验 前言 本文主要介绍如何在企业微信开发者中心通过使用内网穿透工具提供的公网域名成功验证回调本地接口服务! …...

CSS 字体颜色渐变

CSS 字体颜色渐变 css 代码: 注意&#xff1a;background: linear-gradient&#xff08;属性&#xff09;&#xff0c;属性可以调整方向 例如&#xff1a;to bottom 上下结构&#xff0c;to right 左右结构font-family: DIN, DIN;font-weight: normal;font-size: 22px;color:…...

【机器学习】基于CTC模型的语音转换可编辑文本研究

1.引言 1.1语音识别技术的研究背景 1.1.1.语音识别技术的需求 语音识别技术的研究和发展&#xff0c;对于提升人类与机器的交互方式具有深远的影响。首先&#xff0c;它极大地提高了工作效率和便利性。通过语音指令控制设备&#xff0c;用户可以更快捷地完成任务&#xff0c…...

数据结构错题答案汇总

王道学习 第一章 绪论 1.1 3.A 数据的逻辑结构是从面向实际问题的角度出发的&#xff0c;只采用抽象表达方式&#xff0c;独立于存储结构&#xff0c;数据的存储方式有多种不同的选择;而数据的存储结构是逻辑结构在计算机上的映射&#xff0c;它不能独立于逻辑结构而存在。数…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...