vue3 echarts 图表主题切换

文章讲述了作者如何使用localStorage存储主题数据,并通过引入composable组件解决在App.vue中主题切换时v-chart组件无法实时响应的问题,确保外部主题变化能同步更新内部图表主题。
摘要由CSDN通过智能技术生成

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

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

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

注:其实不需要写这么多花里浮哨的,echarts图表本身就支持主题切换,手动修改没有办法做到100%,不是很建议手动配置图表样式,用原生的就挺好。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值