1、背景:
在做项目中,经常会碰到主题切换的情况,针对不同的主题,在使用echarts的时候也需要注意,比如在深色背景下,要是echarts中使用的是浅色主题的,那么可能在显示上出现问题,所以就需要考虑echarts更换主题的功能。
2、思路:
(1)echarts主题配置,官网有配置的地方,可以导入导出
(2)从代码中引入主题
(3)使用echarts的主题
(4)监听系统的主题,根据系统的主题设置不同的echarts的主题
3、实现方案:
(1)在echarts的主题配置中设置不同的主题
链接: echarts主题配置
可以配置适合每种主题皮肤的echarts主题,配置完成后可以下载
(2)引入
本人是使用的vue项目,将下载的文件存放到了assets/echartsTheme/目录下面,然后在main.js中使用,代码如下:
import { registerTheme } from "echarts";
import dark from "@/assets/echartsTheme/dark.json";
import light from "@/assets/echartsTheme/light.json";
registerTheme("dark", dark);
registerTheme("light", light);
(3)在代码中使用
mounted() {
console.log("加载内容");
console.log(echarts);
this.chart = echarts.init(
this.$refs.linechart,
this.$store.state.settings.theme
);
this.chart.setOption(this.options, true);
}
(4)监听系统主题
项目中,把系统的主题存放到了store的state属性中,保存了一个settings对象,在对象中定义了theme这个属性,根据该属性判断主题的变化,当该属性值发生变化时,那么就更改echarts的样式
computed: {
listenstage() {
return this.$store.state.settings.theme;
},
},
watch: {
listenstage: function (ov, nv) {
this.chart = echarts.init(
this.$refs.linechart,
this.$store.state.settings.theme
);
this.chart.setOption(this.options, true);
},
},