Use registered theme

[lukasberbuer]

Confirmation

• [X] I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

<script> tag

Versions

├─┬ @vitejs/plugin-vue@4.2.3
│ └── vue@3.3.4 deduped
├── echarts@5.4.2
├─┬ vue-echarts@6.6.0
│ ├── echarts@5.4.2 deduped
│ ├─┬ vue-demi@0.13.11
│ │ └── vue@3.3.4 deduped
│ └── vue@3.3.4 deduped
└─┬ vue@3.3.4
  └─┬ @vue/server-renderer@3.3.4
    └── vue@3.3.4 deduped

Details

I try to load a custom theme, register it and use it by specifying the theme attribute, but the theme isn't applied. Default themes like "dark" work out of the box.

import theme from './theme.json';
registerTheme('shine', theme);

<v-chart class="chart" theme="shine" :option="option" autoresize />

Reproduction

https://stackblitz.com/edit/vue-echarts-vue-3-rhh8ph?file=src%2FApp.vue

[Justineo]

The schema of your theme file is incorrect. See https://stackblitz.com/edit/vue-echarts-vue-3-pvbxlz?file=src%2Ftheme.json

[lukasberbuer]

Thanks for the fast solution @Justineo! I was using the ECharts theme builder: https://echarts.apache.org/en/theme-builder.html Do you know why the exported themes have incompatible schemas?

Edit: Ok, it's just the property theme of the exported JSON 😄

[Justineo]

Ok, it's just the property theme of the exported JSON 😄

Yes and I don't know why the theme builder does not produce the actual theme object...