Add support for Echarts API

[mazenbesher]

It would be really helpful if somehow the API for some instance can be called from python to update the chart dynamically for instance.

[andfanilo]

Hi @mazenbesher !

This component is basically a wrapper around ECharts for React, so features implemented there can be easily ported to this Component.
For example I can easily add a parameter for notMerge and lazyUpdate at initialization. Then if you add a key parameter to the eCharts call, any time you change options the instance updates dynamically with the new data and behavior from notMerge and lazyUpdate , example :

import random
from pyecharts.charts import Bar
from streamlit_echarts import st_pyecharts

b = (
	Bar()
	.add_xaxis(["Microsoft", "Amazon", "IBM", "Oracle", "Google", "Alibaba"])
	.add_yaxis(
		"2017-2018 Revenue in (billion $)", random.sample(range(100), 10)
	)
	.set_global_opts(
		title_opts=opts.TitleOpts(
			title="Top cloud providers 2018", subtitle="2017-2018 Revenue"
		),
		toolbox_opts=opts.ToolboxOpts(),
	)
)
st_pyecharts(
	b, key="echarts"
)  # Add key argument to not remount component at every Streamlit run
st.button("Randomize data")

---

Maybe I'm not used to eCharts yet, so diggin in the docs :

You can use the API to do:

binding / unbinding event.
dynamic charts with dynamic data.
get the echarts dom / dataURL / base64, save the chart to png.
release the charts.

What kind of behavior would you like to see prioritzed with the eCharts instance so we can draft a pseudocode example of how Python will interact with the echarts Instance on the React side ? We have access to the ECharts instance so it's looking for the best way to call JS functions from Python.

[mazenbesher]

Thanks a lot for your thorough response ... sorry, if this was a silly request, I not an expert in the field and only use it from the python side 😓
I basically wanted to replicate this example from eCharts in my code.
It seems that a call to convertToPixel is required to compute the middle point of each day in the calendar to plot the pie charts. Thus, I need to call an API method on the echart instance that holds the calendar.
Until now, I only used the st_echarts interface (not st_pyecharts) ....should I use st_pyecharts to accomplish this?
A minimal example with a call to convertToPixel would be highly appreciated and thanks again

[andfanilo]

Hey @mazenbesher :) I'm also not very familiar with the eCharts API so I'm very open to any new use case !

• If you're able to convert into a Pyecharts chart that should do, but it doesn't seem like there's a way to call convertToPixel in the Pyecharts API. There's no convertToPixel in Pyecharts Gallery either 😕
• The other solution with st_echarts would be to convert ant JS code to Python when possible (like the function getVirtulData you should be able to Pythonize it) and otherwise put the JS string in JsCode (take a look at this example). But I'm not sure the echarts instance is accessible in JsCode call, I think I can actually import echarts inside any Js string you define though...

Hey, that seems like a moderately hard thing to do, I'll look into it and come back to you !

Fanilo

[andfanilo]

Comment from @liunux4odoo that I don't want to lose #10 (comment)

yes, you are right, the global variable echarts does not exist anymore after webpacking, so the LinearGradient will not work with the built chunks. variable echarts has lots of APIs that can be set to chart option in runtime. In webpack environment, you can only use them when developing , e.g. echarts.registerMap, in build chunks it does not exist either.