xieziyu/ngx-echarts

Use Custom Theme created Apache Echarts Theme Builder

Chudroy opened this issue · 2 comments

I'm trying to use the output of the apache echarts theme builder as the input of [theme] for my chart in angular. However, it doesn't work.

Theme:

export const TEST_THEME = {
  theme: {
    backgroundColor: 'rgba(0,0,0,0)',
    titleColor: '#333333',
    subtitleColor: '#aaaaaa',
    textColorShow: false,
    textColor: '#333',
    markTextColor: '#eeeeee',
    color: [
...

Component:

import { TEST_THEME, TEST_THEME_2, CoolTheme } from './test-theme';
@Component({
...
})
export class HeatmapComponent {
  options: EChartsOption;
  theme: string | ThemeOption = TEST_THEME.theme;

but it doesn't work. I've tried passing in TEST_THEME and TEST_THEME.theme

if you go to the theme builder at apache echarts, you can export a json file. Looking at the data tab in this example from the ngx-echarts docs, CoolTheme Seems to use a similar syntax, except CoolTheme has nested properties such as

 visualMap: {
    color: ['#00aecd', '#a2d4e6'],
  },

whereas the exported themes in theme builder uses the very similar property

visualMapColor: ['#e01f54', '#e7dbc3'],

Why are they different? Where does this different syntax come from? Is it possible to use the output of the theme builder .json as a custom theme for my chart? if so, how?

Forgive me if this is extremely obvious, this is my first day with apache echarts, and I'm having a difficult time finding relevant info, which makes me think that the answer is obvious.

image

update: the CoolTheme object of the docs is similar to the JSON you get when you click the download button on the theme builder. However, I'm still unable to pass this to [theme] to get it to work, like in the ngx-echarts docs.

nvm i think i was just passing in a theme with the same visualmap as the default one specified for the chart i was trying to render, causing no apparent visual change. I changed the theme to another one and could see the difference, so the way to get a theme from the theme builder and use it in angular is how i did it in my previous comment.