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')