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.
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.