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

echarts主题切换实现

news 来源：原创 2025/6/6 9:03:45

文章目录

一、实现方式
- 1.实现思路
- 2.指定主题
- 3.设置图表背景透明
二、具体实现
- 1.监听与销毁
- 2修改主题色细节

在这里插入图片描述

参考链接

一、实现方式

场景: 首先是我的项目有不同主题色，切换主题时候想要将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())
}