vue3 echarts 图表主题切换

news2024/11/19 7:32:35

我主要是用了localStoragecomposable来实现的。

  1. 先创建composable文件夹存储composable的操作方法;
    在这里插入图片描述
  2. 在App.vue文件里面,先将主题数据存储在localStorage里面;
    在这里插入图片描述
  3. 主题切换
    在这里插入图片描述
    在这里插入图片描述
  4. 图表theme包更换
    在这里插入图片描述
    在这里插入图片描述

为什么要用composable呢?
单纯的使用localStorage主题切换的时候,v-chart 的 theme 监听不到,getChartTheme方法没有执行(就是外面的切换了里面的没更新)。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CS61B sp21fall Project02 Gitlet

Project02 Gitlet 一、项目简介二、Git和Gitlet2.1 Git简介2.2 Gitlet简介 三、框架设计3.1 Blobs3.2 Trees3.3 Commits 四、.Gitlet文件结构设计4.1 .git文件架构4.1.1 重点介绍index(VSCode中无法查看,会乱码)objects(VSCode中无…

【汇编语言】初识汇编

【汇编语言】初识汇编 文章目录 【汇编语言】初识汇编前言由机器语言到汇编语言机器语言与机器指令汇编语言与汇编指令汇编语言程序示例 计算机组成指令和数据的表示计算机的存储单元计算机的总线 内存读写与地址空间CPU对存储器的读写内存地址空间 总结 前言 为什么要学习汇编…

精通MongoDB聚合操作API:深入探索高级技巧与实践

MongoDB 聚合操作API提供了强大的数据处理能力,能够对数据进行筛选、变换、分组、统计等复杂操作。本文介绍了MongoDB的基本用法和高级用法,高级用法涵盖了setWindowFields、merge、facet、expr、accumulator窗口函数、结果合并、多面聚合、查询表达式在…

动态库静态库linux

动态库静态库 静态库 静态库必须包含在可执行文件里,整个都要包含 缺点:消耗系统大,每个使用静态库的程序都要复制静态库(浪费内存) 影响使用场景: 在静态库内存小的时候,可以用来提升速度 制…

Linux(CentOS7)离线使用安装盘部署Telnet

# [pdf在线免费转word文档](https://orcc.online/pdf) https://orcc.online/pdf 挂载镜像CentOS-7-x86_64-DVD-1810.iso到/mnt下(其他位置也行),命令如下: mount /dev/sr0 /mnt 安装包默认在Packages目录下,需要安装…

【QT进阶】Qt Web混合编程之CMake VS2019编译并使用QCefView(图文并茂超详细版本)

往期回顾 【QT进阶】Qt Web混合编程之CEF、QCefView简单介绍-CSDN博客 【QT进阶】Qt Web混合编程之VS2019 CEF的编译与使用(图文并茂超详细介绍)-CSDN博客【QT进阶】Qt Web混合编程之QWebEngineView基本用法-CSDN博客【QT进阶】Qt Web混合编程之VS2019 C…

AI生图美学在淘宝的实践应用

本文介绍了如何制定和应用美学标准来评估和改善人工智能生成的图像质量,特别是在电商领域的应用,主要分为制定美学标准、训练美学模型、应用美学模型、升级淘宝风格模型四个步骤。 美学的定义与分析 图像质量标准:现代设计框架下,…

类和对象【二】this指针,构造函数和成员初始化列表【超详细】

文章目录 this指针this指针的定义this指针的“工作”原理this指针的作用this指针的特点 构造函数构造函数的定义构造函数的作用构造函数的特点构造函数的调用方式括号法无参构造或者全缺省构造需要传参才能调用的构造函数 隐式类型转换法是只传一个参数就能调用的构造函数是要传…

HCIE-Shell实验1

要求: 判断当前磁盘剩余空间是否有20G,如果小于20G,则将报警邮件发送给管理员,每天检查一次磁盘剩余空间。判断web服务是否运行(1、査看进程的方式判断该程序是否运行,2、通过查看端口的方式判断该程序是否运行)&…

大模型应用开发基础

AGI 时代,AI 无处不在,形成新的社会分层: AI 使用者,使用别人开发的 AI 产品AI 产品开发者,设计和开发 AI 产品基础模型相关,训练基础大模型,或为大模型提供基础设施 越向下层,重要…

Leetcode-168.Excel表列名称

题目描述 给你一个整数 columnNumber ,返回它在 Excel 表中相对应的列名称。 例如: A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 ...示例 1: 输入:columnNumber 1 输出:"A"…

ROS2学习笔记(一) 基本概念

1. Node 节点 节点: 完成具体功能的模块 相关命令 #运行命令 ros2 run <package_name> <executable_name>#当前节点查询查询 ros2 node list#重映射 Remapping ros2 run <package_name> <executable_name> --ros-args --remap __node:<node_na…

揭开ChatGPT面纱(一):准备工作(搭建开发环境运行OpenAI Demo)

文章目录 序言&#xff1a;探索人工智能的新篇章一、搭建开发环境二、编写并运行demo1.代码2.解析3.执行结果 本博客的gitlab仓库&#xff1a;地址&#xff0c;本博客对应01文件夹。 序言&#xff1a;探索人工智能的新篇章 随着人工智能技术的飞速发展&#xff0c;ChatGPT作为…

虚拟ip地址怎么弄到手机上

在当下的社会&#xff0c;手机已经变得至关重要&#xff0c;它融入了我们的日常生活&#xff0c;无论是上网冲浪、社交互动&#xff0c;还是工作学习&#xff0c;都离不开它。但有时候&#xff0c;由于某些限制&#xff0c;我们可能无法充分享受网络带来的便利。这时&#xff0…

《苍穹外卖》Day02部分知识点记录

一、属性的拷贝以及密码的加密 使用org.springframework.beans中的BeanUtils.copyProperties()方法时&#xff0c;二者的属性名必须要一致。 /*** 新增员工* param employeeDTO*/Overridepublic void save(EmployeeDTO employeeDTO) {Employee employee new Employee();// 对…

spring webflux 小结

一、WebFlux 简介 WebFlux 是 Spring Framework5.0 中引入的一种新的反应式Web框架。通过Reactor项目实现Reactive Streams规范&#xff0c;完全异步和非阻塞框架。本身不会加快程序执行速度&#xff0c;但在高并发情况下借助异步IO能够以少量而稳定的线程处理更高的吞吐&…

COIN++: Neural Compression Across Modalities 论文阅读笔记

1. 论文基本信息 发布于&#xff1a; TMLR 2022 2. 创新点 使用元学习将编码时间减少了两个数量级以上&#xff0c;将编码共享结构进行编码&#xff0c;并对该网络应用调制来编码实例特定信息。量化和熵编码调制。虽然我们的方法在压缩和速度方面都大大超过了 COIN&#xff0…

Navicat导入sql文件图文教程

本文使用的MySQL工具为:Navicat.默认已经连接数据库!! 步骤: 1.右键自己的数据库,选择新建数据库. 2.输入数据库名称&#xff0c;字符集选择“utf8”&#xff0c;排序规则选择“ utf8_general_ci”,确定. 3.双击新建好的“数据库”。右键点击“运行SQL文件”。 4.选择本地的s…

Linux上的uname

2024年4月19日&#xff0c;周五上午 这是我第一篇用CSDN上的markdown编辑器写的博客&#xff0c;感觉还不错 uname 是一个常用的命令行工具&#xff0c;uname 的全称是 “Unix Name”&#xff0c;它是一个 Unix 和类 Unix 操作系统上的命令行工具&#xff0c;用于获取操作系统相…

同旺科技 USB TO SPI / I2C适配器读写24LC256--页写

所需设备&#xff1a; 1、USB 转 SPI I2C 适配器&#xff1b;内附链接 2、24LC256芯片 适应于同旺科技 USB TO SPI / I2C适配器升级版、专业版&#xff1b; 从00地址开始写入64个字节&#xff0c;然后再将64个字节读回&#xff1b; 页写时序&#xff1a; 读时序&#xff1a…