如何在Streamlit中格式化ECharts数据标签为两位小数

问题背景 #

在原生ECharts中可通过JS函数形式的formatter实现标签保留两位小数，但在Streamlit中使用st_echarts时，配置选项需存入Python字典，无法直接传递JS函数，导致函数形式的formatter失效。

可行解决方案 #

方案1：使用ECharts字符串格式化语法 #

ECharts支持在formatter字符串中直接指定数值格式，无需编写JS函数，通过{@字段名:.2f}的语法即可实现保留两位小数。

修改后的完整代码：

import streamlit as st   
from streamlit_echarts import st_echarts
import pandas as pd

data = {
  "X": ['A','B','C'],
  "Y": [420.2456245, 380.2456254742, 390.2345624564],
}
df = pd.DataFrame(data)
dfec = [df.columns.tolist()] + df.values.tolist()

ec_option = {
            "dataset": [
                {"source": dfec}
            ],
            "xAxis": {"type": "category"},
            "yAxis": {},
            "series": [
                {
                    "name": "Y", 
                    "type": "bar", 
                    "symbol": "none", 
                    "encode": {"x": 'X', "y": 'Y'},
                    'label': {
                        'show': True,
                        'position': 'top',
                        'formatter': '{@Y:.2f}'  # 格式化语法保留两位小数
                    },
                },
            ],
            "legend": {},
        }

st_echarts(options=ec_option)

方案2：在Python端预处理数据 #

提前对DataFrame中的Y列数据进行格式化，保留两位小数后再传入ECharts配置：

import streamlit as st   
from streamlit_echarts import st_echarts
import pandas as pd

data = {
  "X": ['A','B','C'],
  "Y": [420.2456245, 380.2456254742, 390.2345624564],
}
df = pd.DataFrame(data)
# 预处理数据，保留两位小数
df['Y'] = df['Y'].round(2)
# 可选：转成字符串固定格式，避免科学计数法等问题
# df['Y'] = df['Y'].apply(lambda x: "{:.2f}".format(x))

dfec = [df.columns.tolist()] + df.values.tolist()

ec_option = {
            "dataset": [
                {"source": dfec}
            ],
            "xAxis": {"type": "category"},
            "yAxis": {},
            "series": [
                {
                    "name": "Y", 
                    "type": "bar", 
                    "symbol": "none", 
                    "encode": {"x": 'X', "y": 'Y'},
                    'label': {
                        'show': True,
                        'position': 'top',
                        'formatter': '{@Y}'  # 直接使用预处理后的数值
                    },
                },
            ],
            "legend": {},
        }

st_echarts(options=ec_option)

说明 #

Python字典最终会被序列化为JSON传递给前端，而JSON不支持函数类型，因此原生ECharts的JS函数式formatter无法在Streamlit中直接使用。上述两种方案均避开了函数传递的问题，可实现标签保留两位小数的需求。

内容的提问来源于stack exchange，提问作者Luitpold Wienerle