echarts主题切换实现

---

参考链接

一、实现方式

场景: 首先是我的项目有不同主题色，切换主题时候想要将echarts的图表主题色也一并更改，暂时只设置’light’和’dark’明暗两种主题色

1.实现思路

• 监听主题色变化或者切换事件
• 将现有echarts图表注销
• 进行重绘（可以直接设置对应主题色等）

2.指定主题

第二个参数为主题色

3.设置图表背景透明

设置backgroundColor: ‘’,实现透明色
如不设置透明，切换后也是白色背景图

二、具体实现

1.监听与销毁

import { currentTheme } from '@/utils/theme.js'
watch(() => currentTheme.value, // 监听主题变量变化val => {myEcharts.dispose() // 销毁旧实例nextTick(() => {initChart(val) // 这里可以传递变量 例如该主题色对应的个颜色细节window.addEventListener("resize", handleResize) // 监听尺寸 使用你自己的方法即可})},{ deep: true, immediate: false } // immediate一定要false  初始没有图表的
)// 初始化图表
const initChart = (themeVale = 'light') => {if (!myEcharts?._dom) {myEcharts = echarts.init(chartEl.value, themeVale)}myEcharts.setOption(getChartOption())
}

2修改主题色细节

如果你不满足light和dark，还想要改变具体的图表内容颜色。那就去修改你的图表option配置
方法：通过主题参数，三元判断使用对应主题色细节即可