New Component: raw_echarts, config Echarts option with full API support

Custom Components
1

Echarts is an opensource chart library written by pure JavaScript. It can be integrated to streamlit easily with streamlit-echarts component. However an issue echarts.graphic.LinearGradient not working was reported because of echarts.xxx API missing after webpack building.

So I write a new component in pure js/html without nodejs, keeping echarts object in global JavaScript namespace. User can write echarts option with any echarts.xxx API supported.

For example:

Install the component first:
pip install streamlit-raw-echarts

import streamlit as st
from streamlit_raw_echarts import st_echarts,JsCode,CustomMap
import random


with st.echo('below'):
    option={
        'backgroundColor':'#fff',
        'title':{
            'text':'example chart',
            'subtext':'using pyecharts-assets',
        },
        'tooltip':{
            'trigger':'item',
        },
        'visualMap':{
            'seriesIndex':1,
        },
        'grid':{'bottom':'55%'},
        'xAxis':{
            'data':[1,2,3,4,5],
        },
        'yAxis':{},
        'series':[
            {
                'type':'bar',
                'name':'KPI',
                'data':[1,2,3,4,5],
                'label':{
                    'show':True,
                    'position':'top',
                },
                'visualMap':False,
                'color':JsCode('new echarts.graphic.LinearGradient(0,0,0,1,[{"offset":0,"color":"red"},{"offset":1,"color":"yellow"}])')             
            },
            {
                'name':'users',
                'type':'map',
                'mapType':'world',
                'top':'55%',
                'label':{'show':False},
                'roam':True,
                'data':[
                    {
                        'name':'China',
                        'value':150,
                        'label':{
                            'show':True,
                            'formatter':JsCode('function(p){return p.data.name+":"+p.value;}')
                            }
                    },
                    {
                        'name':'United States',
                        'value':200,
                        'label':{
                            'show':True,
                            'formatter':JsCode('function(p){return p.data.name+":"+p.value;}')
                            }
                    },
                    {'name':'Brazil','value':100},
                ]
            }
        ]
    }

    st.title('example:')

    for i in range(3):
        option['series'][1]['data'][i]['value']=random.randint(1,200)
    for i in range(5):
        option['series'][0]['data'][i]=random.randint(1,10)

    chart=st_echarts(option=option,
                    theme='shine',
                    height=600,
                    events={
                        'click':'function(param){alert("your click:"+param.data.name);}'
                        },
                    returnData={},
                    key='echarts1',
                    )
    st.button('refresh',help='update chart dynamiclly')
    if chart:
        st.write('the component returns as :')
        st.write(chart[:25]+' ... '+chart[-25:])
        st.markdown('<a href="{}" download="{}">download chart as picture</a>'.format(chart,'echarts1.png'),unsafe_allow_html=True)

More information can be found on the github.

3 Likes
2

Hi, I found after install your package, will change streamlit_echarts’s effect, and both of this have same function st_echarts but with different useage. streamlit-raw-echarts has different theme with streamlit_echarts, and can not use theme in one program at same time.
@andfanilo @liunux

3

You can probably from streamlit_echarts import st_echarts as st_original_echarts for example, that way you can manage both methods and pass different options

Have a nice day,
Fanilo

4

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.