St_echarts_events, a new method to get the echarts-chart return value from the front-end event

Hi,

I just made a component that can easily access the echarts chart , receive the value returned from the front-end event., such as the x-axis and y-axis values returned in the click event.

Video_2021-12-06_163114

Source code in github

Here is the doc.

Streamlit Echarts Events

a bi-directional streamlit components with pyecharts plots

return event value from js-side to python-side。if no events designed, just display a chart.

Installation


pip install streamlit-ehcarts-events

Usage

only three steps using it , generate a pyecharts object, passing interested events and parameters

Inputs:

chart: pyecharts object

events: list , echarts events, eg. [‘click’,‘dblclick’]

params: list , events value for echarts events,declared in echarts API DOC, eg. [‘name’,‘data’,‘value’]

Outputs:

return status and values.

status

0: get a value

-1: get no value or an error occurs.

return_data

python dictionary, key is params,value is value for params.

Example

from pyecharts.charts import Bar
from st_echarts_events import st_echarts_events
import streamlit as st
bar = Bar()
bar.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
bar.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])

st.header("Pyecharts Events Feedback Test")    

chart=bar
events=['click']  
params=['name','value','data']
status,return_data = st_echarts_events(chart=chart,events=events,params=params)    

st.markdown("Return data : %s " % return_data)

if you want test the package, deploy environment like this:streamlit template

Notes:

if no data. return ‘no data.’

if error, return error message.

map are not working well so far, need further implement.

6 Likes

Hey @Bright!

:wave: Welcome to the Streamlit Community!!! :tada: :partying_face: :partying_face: :tada: :tada:

This is great! Thanks for sharing!

Is your component on the community tracker made by @andfanilo? if not, add it here :point_down:

Happy Streamlit-ing!
Marisa

Nice :smiley: more echarts in Streamlit!

1 Like

thanks~ I’ll give it a try.

Thanks~ I like your wonderful components, too.