Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Custom Theme created Apache Echarts Theme Builder #416

Open
Chudroy opened this issue Feb 1, 2024 · 2 comments
Open

Use Custom Theme created Apache Echarts Theme Builder #416

Chudroy opened this issue Feb 1, 2024 · 2 comments

Comments

@Chudroy
Copy link

Chudroy commented Feb 1, 2024

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
Copy link
Author

Chudroy commented Feb 1, 2024

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
Copy link
Author

Chudroy commented Feb 1, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant