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);
    },
  },

vue中更换echarts的主题