dashboard-echarts

Dashboard ECharts

Task Objectives

• This Skill is used for: creating interactive charts with ECharts
• Capabilities include: PyECharts charts, Streamlit-ECharts integration, chart configuration
• Trigger conditions: when complex interactive charts need to be displayed in a dashboard

Operation Steps

Install Dependencies

uv pip install streamlit-echarts pyecharts
# 或
uv pip install streamlit-echarts[pyecharts]

Basic Line Chart

import streamlit as st
from streamlit_echarts import st_echarts

options = {
    "xAxis": {
        "type": "category",
        "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    "yAxis": {"type": "value"},
    "series": [{
        "data": [820, 932, 901, 934, 1290, 1330, 1320],
        "type": "line",
        "smooth": True
    }]
}

st_echarts(options=options, height="400px")

Bar Chart

options = {
    "xAxis": {"type": "category", "data": ["A", "B", "C", "D"]},
    "yAxis": {"type": "value"},
    "series": [{
        "data": [120, 200, 150, 80],
        "type": "bar",
        "itemStyle": {"color": "#5470C6"}
    }]
}
st_echarts(options=options)

Pie Chart

options = {
    "series": [{
        "type": "pie",
        "radius": ["40%", "70%"],
        "data": [
            {"value": 1048, "name": "搜索引擎"},
            {"value": 735, "name": "直接访问"},
            {"value": 580, "name": "邮件营销"}
        ],
        "label": {"show": True, "formatter": "{b}: {c} ({d}%)"}
    }]
}
st_echarts(options=options)

Scatter Chart

import random
data = [[random.randint(1, 100) for _ in range(10)] for _ in range(3)]

options = {
    "xAxis": {"type": "value"},
    "yAxis": {"type": "value"},
    "series": [{
        "type": "scatter",
        "symbolSize": 20,
        "data": data[0],
        "itemStyle": {"color": "#5470C6"}
    }]
}
st_echarts(options=options, height="500px")

Multi-series Chart

options = {
    "legend": {"data": ["蒸发量", "降水量"]},
    "xAxis": {"type": "category", "data": ["1月", "2月", "3月", "4月", "5月"]},
    "yAxis": {"type": "value"},
    "series": [
        {
            "name": "蒸发量",
            "type": "bar",
            "data": [2.0, 4.9, 7.0, 23.2, 25.6]
        },
        {
            "name": "降水量",
            "type": "bar",
            "data": [2.6, 5.9, 9.0, 26.4, 28.7]
        }
    ]
}
st_echarts(options=options)

PyECharts Approach

from pyecharts import options as opts
from pyecharts.charts import Bar, Line
from streamlit_echarts import st_pyecharts

# 使用 PyECharts 构建图表
bar = (
    Bar()
    .add_xaxis(["Microsoft", "Amazon", "IBM", "Oracle", "Google"])
    .add_yaxis("2023营收(亿)", [2100, 1850, 650, 520, 1820])
    .set_global_opts(
        title_opts=opts.TitleOpts(title="云服务商营收对比"),
        toolbox_opts=opts.ToolboxOpts(),
        legend_opts=opts.LegendOpts(selected_mode="single")
    )
)
st_pyecharts(bar, height="400px")

Dynamic Interaction

from streamlit_echarts import st_echarts

options = {
    "tooltip": {"trigger": "axis"},
    "legend": {"data": ["销量"]},
    "xAxis": {"type": "category", "data": ["衬衫", "毛衣", "领带", "裤子", "高跟鞋"]},
    "yAxis": {"type": "value"},
    "series": [{"data": [5, 20, 36, 10, 10], "type": "line"}]
}

# 添加点击事件
events = {
    "click": "function(params) { return params.name; }"
}
result = st_echarts(options=options, events=events, key="chart1")
st.write(f"点击了: {result}")

Map Visualization

from pyecharts import options as opts
from pyecharts.charts import Map
from streamlit_echarts import st_pyecharts

# 中国地图示例
china_map = (
    Map()
    .add("销售额", 
         [("广东", 500), ("北京", 350), ("上海", 420), ("浙江", 380)], 
         "china")
    .set_global_opts(
        title_opts=opts.TitleOpts(title="中国地图"),
        visualmap_opts=opts.VisualMapOpts(max_=500)
    )
)
st_pyecharts(china_map, height="500px")

Theme Configuration

# 深色主题
st_echarts(options=options, theme="dark", height="400px")

# 自定义主题色
custom_theme = {
    "color": ["#5470C6", "#91CC75", "#FAC858", "#EE6666"]
}
st_echarts(options=options, theme=custom_theme)

Responsive Sizing

st_echarts(
    options=options,
    height="400px",      # 高度
    width="100%",        # 宽度
    renderer="canvas"   # 或 "svg"
)

Common Configuration

Title and Toolbox

opts.TitleOpts(
    title="主标题",
    subtitle="副标题",
    pos_left="center"
)

opts.ToolboxOpts(
    feature=opts.ToolBoxFeatureSaveAsImage()
)

Legend Configuration

opts.LegendOpts(
    data=["系列1", "系列2"],
    selected_mode=False  # 禁用图例点击
)

Tooltip

opts.TooltipOpts(
    trigger="item",  # 或 "axis"
    trigger_on="mousemove",
    formatter="{b}: {c}"
)

Resource Index

• Streamlit-ECharts：https://github.com/andfanilo/streamlit-echarts
• PyECharts Documentation:https://pyecharts.readthedocs.io/
• ECharts Examples:https://echarts.apache.org/examples/

Notes

• Using PyECharts to build complex charts is more convenient
• st_echarts supports native ECharts configuration
• height and width support CSS units
• renderer="svg" is more suitable for printing and accessibility
• Use the on_select parameter to handle selection events