Streamlit-echarts

Custom Components
30

Actually now I’m not sure what you mean about dynamic plots :o I was thinking about something unrelated

My technique when converting examples from the ECharts page to Python dict is to add console.log(option) at the end of the echarts example, open the web console in your browser devtools and then copy/analyze the option there

image
image2554×841 163 KB

If you understand my sample app in my previous answer, with some work you can replicate the line dynamic plot:

import datetime
import random
import time
import streamlit as st
from streamlit_echarts import JsCode
from streamlit_echarts import st_echarts

st.set_page_config(layout="wide")
st.title("Animated ECharts - Dynamic Data + Time Axis")

origin_day = datetime.date(1997, 9, 3)


def _generate_datum(origin_day, day):
    date = origin_day + datetime.timedelta(days=day)
    return {
        "name": date.strftime("%Y/%m/%d"),
        "value": [date.strftime("%Y/%m/%d"), random.randint(1800, 2000)],
    }


if "data" not in st.session_state:
    st.session_state["data"] = [
        _generate_datum(origin_day, day) for day in range(1, 365)
    ]

option = {
    "title": {"text": "Something"},
    "tooltip": {
        "trigger": "axis",
        "formatter": JsCode(
            "function(params){params=params[0];var date=new Date(params.name);return date.getDate()+'/'+(date.getMonth()+1)+'/'+date.getFullYear()+' : '+params.value[1]}"
        ).js_code,
        "axisPointer": {"animation": False},
    },
    "xAxis": {"type": "time", "splitLine": {"show": False}},
    "yAxis": {
        "type": "value",
        "boundaryGap": [0, "100%"],
        "splitLine": {"show": False},
    },
    "series": [
        {
            "name": "模拟数据",
            "type": "line",
            "showSymbol": False,
            "hoverAnimation": False,
            "data": st.session_state["data"],
        }
    ],
}

st_echarts(option, height="600px", key="chart")

latest_day = datetime.datetime.strptime(
    st.session_state["data"][-1]["name"], "%Y/%m/%d"
)
new_data = st.session_state["data"][5:] + [
    _generate_datum(latest_day, day) for day in range(1, 6)
]

time.sleep(1)
st.session_state["data"] = new_data
st.experimental_rerun()

test

Your second example is a radar plot, most of the JSON you can translate into Python code:

import streamlit as st
from streamlit_echarts import st_echarts

st.set_page_config(layout="wide")
st.title("Radar plot")

START_YEAR = 2001
END_YEAR = 2029


def _generate_datum(year):
    i = year - 2000
    return {
        "name": "浏览器（数据纯属虚构) ",
        "type": "radar",
        "symbol": "none",
        "lineStyle": {"width": 1},
        "emphasis": {"areaStyle": {"color": "rgba(0,250,0,0.3)"}},
        "data": [
            {
                "value": [
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    i * i / 2,
                ],
                "name": str(year),
            }
        ],
    }


option = {
    "title": {"text": "浏览器占比变化", "subtext": "纯属虚构", "top": 10, "left": 10},
    "tooltip": {"trigger": "item"},
    "legend": {
        "type": "scroll",
        "bottom": 10,
        "data": [str(y) for y in range(START_YEAR, END_YEAR)],
    },
    "visualMap": {
        "top": "middle",
        "right": 10,
        "color": ["red", "yellow"],
        "calculable": True,
    },
    "radar": {
        "indicator": [
            {"text": "IE8-", "max": 400},
            {"text": "IE9+", "max": 400},
            {"text": "Safari", "max": 400},
            {"text": "Firefox", "max": 400},
            {"text": "Chrome", "max": 400},
        ]
    },
    "series": [_generate_datum(year) for year in range(START_YEAR, END_YEAR)],
}

st_echarts(option, height="800px")

test2

With those under the belt, you can now replicate about 85-90% of the echarts gallery I’d say :slight_smile: !

1 Like