vite+vue3实现对Echarts的动态换肤。及页面动态换肤

页面换肤插件

vite-plugin-theme-preprocessor官网
使用这个插件很简单就能实现页面的动态换肤

Echarts 动态换肤的实现

1. 首先在Echarts主题编辑器里边生成想要的颜色主题
2. 导入到项目中
3. 配置动态切换

导入主题文件

ps： 本人这里Echarts使用的是按需引入，所以需要注册一下，特意试了一下不注册无法换肤。
定义全局变量

const app = createApp(App)

app.config.globalProperties.$echart = ref('default') //这里使用ref。因为不用这个我改变这个值的时候监听不到，不知道为什么

app.mount('#app')

这里改变全局变量的值。

 let b = false
 let buttonClickHandle = ()=>{
     b = !b
     proxy.$echart.value = b ?  'purplePassion' : 'default'
 }

效果截图