【Streamlit学习笔记】Streamlit-ECharts箱型图添加均值和最值label

Streamlit-ECharts

Streamlit-ECharts是一个Streamlit组件，用于在Python应用程序中展示ECharts图表。ECharts是一个由百度开发的JavaScript数据可视化库Apache ECharts

安装模块库

pip install streamlit

pip install streamlit-echarts

绘制箱型图展示

在基础箱型图上添加了均值(黄色菱形)和每个box的最大值和最小值，如图所示：

实现代码(详细注释)

程序结构如下图：

boxplot.py程序如下：

from streamlit_echarts import st_echarts
from streamlit_echarts import JsCodedef render_basic_boxplot(text_name,xlable_name,ylable_name,dataset_list,y_min,y_max):mean_data = [sum(i) / len(i) for i in dataset_list] # 计算每个boxplot的均值max_data = [int(max(sublist)) for sublist in dataset_list] # 计算每个boxplot的最大值min_data = [int(min(sublist)) for sublist in dataset_list] # 计算每个boxplot的最小值option = {"title": [{"text": text_name, "left": "center"} # 标题，居中],"dataset": [{"source": dataset_list # 数据集，每个boxplot的数值},{"transform": { # 对数据集进行转换，得到boxplot的上下四分位数"type": "boxplot", # 转换类型为boxplot"config": {"itemNameFormatter": "#{value}" # 数值标签格式化},}},{"fromDatasetIndex": 1, "fromTransformResult": 1}, # 取出转换后的boxplot数据],"tooltip": {"trigger": "item", # 提示框触发方式为item"axisPointer": {"type": "shadow"}, # 坐标轴指示器类型为阴影"formatter": JsCode("function (param) {return ['芯片: '+param.data[0],'upper: ' + param.data[5],'Q3: ' + param.data[4],'median: ' + param.data[3],'Q1: ' + param.data[2],'lower: ' + param.data[1]].join('<br/>')}").js_code # 自定义提示框内容格式化函数},"grid": {"left": "10%", "right": "10%", "bottom": "15%"}, # 网格设置"dataZoom": [{"type": 'inside', # 内置缩放组件"orient": 'vertical', # 垂直方向缩放},{"type": 'inside', # 内置缩放组件"orient": 'horizontal', # 水平方向缩放}],"xAxis": {"type": "category", # 类目轴类型"name": xlable_name, # x轴名称"boundaryGap": True, # 类目轴两边留白策略"nameGap": 10, # 类目轴名称与轴线之间的距离"splitArea": {"show": False}, # 去除分割区域"splitLine": {"show": False}, # 去除分割线},"yAxis": {"type": "value", # 数值轴类型"name": ylable_name, # y轴名称"splitArea": {"show": True}, # 显示分割区域"min":y_min, # y轴最小值"max": y_max # y轴最大值},"series": [{"name": "boxplot",  # 系列名称"type": "boxplot",  # 图表类型为boxplot"datasetIndex": 1   # 对应数据集索引},{"name": "outlier",  # 系列名称"type": "scatter",  # 图表类型为散点图"datasetIndex": 2   # 对应数据集索引},{"name":"mean", # 系列名称"type":"scatter", # 图表类型为散点图"symbol":"diamond", # 标记形状为菱形"data":mean_data # 散点图数据为boxplot的均值},{"name":"max", # 系列名称"type":"scatter", # 图表类型为散点图"symbolSize":0, # 标记大小为0"data":max_data, # 散点图数据为boxplot的最大值"label":{"show":True, # 显示标签"position":"top" # 标签位置为上方}},{"name":"min", # 系列名称"type":"scatter", # 图表类型为散点图"symbolSize":0, # 标记大小为0"data":min_data, # 散点图数据为boxplot的最小值"label": {"show":True, # 显示标签"position":"bottom" # 标签位置为下方}}]}st_echarts(option, height="500px") # 渲染图表

app.py程序如下：

import streamlit as st
from boxplot import render_basic_boxplottext_name = "Basic Boxplot"
xlable_name = "X-axis"
ylable_name = "Y-axis"
dataset_list =  [[850,740,900,1070,930,850,950,980,980,880,1000,980,930,650,760,810,1000,1000,960,960,],[960,940,960,940,880,800,850,880,900,840,830,790,810,880,880,830,800,790,760,800,],[880,880,880,860,720,720,620,860,970,950,880,910,850,870,840,840,850,840,840,840,],[890,810,810,820,800,770,760,740,750,760,910,920,890,860,880,720,840,850,850,780,],[890,840,780,810,760,810,790,810,820,850,870,870,810,740,810,940,950,800,810,870,],]
y_min = 500
y_max = 1200
render_basic_boxplot(text_name,xlable_name,ylable_name,dataset_list,y_min,y_max)

希望本文对大家有帮助，上文若有不妥之处，欢迎指正

分享决定高度，学习拉开差距