xieziyu / ngx-echarts

An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
https://xieziyu.github.io/ngx-echarts/
MIT License
1.1k stars 193 forks source link

Use Custom Theme created Apache Echarts Theme Builder #416

Open Chudroy opened 7 months ago

Chudroy commented 7 months ago

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.

Chudroy commented 7 months ago

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.

Chudroy commented 7 months ago

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.