echarts设置主题 -echarts5

之前的echarts设置主题，一般是我们从官网设置好自己想要的主题或者是已有的主题，下载好的json，如 theme.json;

在main.js中引入

import ECharts from 'vue-echarts/components/Echarts.vue';（我这里使用的是vue-echarts，也可以使用echart， import Echarts from “echarts”）;

import theme from '../src/assets/theme/theme.json';

 

Vue.component('echarts', ECharts);

ECharts.registerTheme('lighttheme', theme);

 

Vue.prototype.theme = 'lighttheme';

<echarts 
        style="width:100%;height:95%;"
        :theme="theme"
        ref="chart"
        class="chart"
        @click="handleChartClick(arguments,'bar')"
        @init="chartInit"
        :auto-resize="true"
        :initOptions="initOptions"
        :options="options">
  </echarts>

---------------------------------------------------------------分割线-----------------------------------------------------

使用echarts 5版本之后（官网地址）

https://echarts.apache.org/zh/tutorial.html#ECharts%205%20%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97

 

 /********************************************** 之前搞错了(原因是使用ECharts.registerTheme方法，必须在Vue.component('echarts', ECharts);之后，而我放在了之前，所以一直报错)，使用的别的方式修改主题*******************************/

直接使用ECharts.registerTheme('lighttheme', theme); 报错registerTheme 不是一个函数

最后根据文档，在option中设置color来定义不同的主题（这样只修改默认的出现颜色的顺序，不会更改label啊，x轴或者legth的颜色）

option.color= [
        "#5a62b3",
        "#efae9c",
        "#f293ac",
        "#14cfbf",
        "#92daed",
        "#cbb0e3"
   ];

 ***************************************/

 正确的方式

import ECharts  from 'vue-echarts/components/ECharts.vue';

import dark from "@/assets/theme/dark.json";
import light from "@/assets/theme/light.json";
import chalk from "@/assets/theme/chalk.json";

Vue.component('echarts', ECharts);

echarts.registerTheme('dark', dark);
echarts.registerTheme('light', light);
echarts.registerTheme('chalk', chalk);

组件页面 - 使用的是vue-echart

<echarts v-if="!flag" 
        ref="chart"
        class="chart"
        @click="handleChartClick"
        :auto-resize="true"
        :options="options"
        :theme="themevalue">   这个themevalue的值就可以选dark，light，chalk

</echarts>

如果使用的是echarts，根据官网的提示去在使用主题就ok echarts.init(dom,'dark')