[Feature] Change charts locale and theme dynamically

[hungtcs]

What problem does this feature solve?

In a multilingual website, switching the language of the website often means changing the locale setting of echarts at the same time, but the current API can only specify locale and theme when creating an instance.

const instance = echarts.init(element, theme, { locale });

What does the proposed API look like?

I hope to add two methods like setLocale and setTheme on the chart instance to change the language or theme instead of recreating a new instance every time.

[Ovilia]

There're a lot of setting to do so it may not be easy to dynamically change theme. Leave this issue open for future discussion.

Current way to do:

const option = {...};
chart.setOption(option);

// reset theme when necessary
chart = echarts.init(dom, 'theme-name');
chart.setOption(option, true); // Use notMerge: true to reset all options before.

[mistercrunch]

For Apache Superset, we're looking to also change themes dynamically as we're moving to antd-v5 and will allow users to customize their application and dashboard's theme. In our case, we assign tokens out of the antd theme into the echartOptions object which seems pretty straightforward. Given we're looking for something dynamic, registering named themes isn't ideal as the user may be altering their theme and looking at visual changes in real time, so that would mean registering one theme per iteration. I didn't find a way to re-register or delete a theme.

Now I tried simply merging-in my theme object in our echartOptions, and while this works, it creates artifacts, like x/yAxis lines on a pie chart for instance. I'm guessing it's not a good idea to merge in the whole theme inside echartOptions since there's many theme props that just don't make sense for some chart types.

Now I'm wondering what you all use internally to apply a theme to a specific chart type, I'm guessing there's some logic somewhere in echarts to only apply the parts of the theme that are relevant to the given chart type (ie: no axis theme in a Pie chart for instance) and if I could reuse this logic.

For the record, I did find the fairly new chart.setTheme({}) method (we're on 5.6.0) and it didn't seem to apply while calling before or after setOptions but it doesn't seem to apply properly.

Looking for solutions, and happy to help if I can.

[kingyue737]

Dynamic theme supported in #20705