【Streamlit学习笔记】Streamlit-ECharts热力图tooltip提示信息拓展

Streamlit-ECharts

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

安装模块库

pip install streamlit

pip install streamlit-echarts

绘制热力图展示

在基础热力图上拓展了tooltip提示信息，如图所示，基础热力图绘制数据为[0, 0, 5]，现需要将tooltip提示信息增加一个label，故源数据可能变为[0, 0, 5, ‘A’]，此时在不改变热力图绘制的前提下，拓展提示信息

实现代码(详细注释)

程序结构如下图：

heatmap.py程序如下：

from streamlit_echarts import st_echarts
from streamlit_echarts import JsCode

def render_basic_heatmap(x_data, y_data, v_data):
    data = v_data
    # 从 v_data 中提取绘制热力图需要的数据，即每个数据点的x、y坐标和值
    heatmap_data = [[row[0], row[1], row[2]] for row in data]
    # 定义ECharts的配置选项(即ECharts的option)
    option = {
        # 设置图表的提示信息，当鼠标悬停在数据点上时显示
        "tooltip": {"position": "top", # 提示框位置在数据点上方
                    'trigger': 'item', # 提示触发方式为单个数据点
                    # 使用JsCode来编写自定义的提示格式化函数
                    'formatter': JsCode(
                        "function (param) {const originalData = %s.find(d => d[0] === param.data[0] && d[1] === param.data[1] && d[2] === param.data[2]);\
                                        const temp = originalData ? originalData[3] : 'N/A';\
                                        return ['x: '+param.data[0],'y: '+param.data[1], 'value: '+param.data[2], 'label: '+temp].join('<br/>')}" % data
                        ).js_code}, # 将字符串转换为JavaScript代码
        "grid": {"height": "50%", "top": "10%"}, # 设置网格，这里设置网格高度为50%，顶部留出10%
        # 数据缩放，设置为内缩，垂直方向
        "dataZoom": [{
		    "type": 'inside',
            "orient": 'vertical',
	    },{
            "type": 'inside',
        }],
        # x轴配置，类型为类别轴，启用分隔区域
        "xAxis": {"type": "category", "data": x_data, "splitArea": {"show": True}},
        # y轴配置，类型为类别轴，启用分隔区域
        "yAxis": {"type": "category", "data": y_data, "splitArea": {"show": True}},
        # 设置视觉映射，用于颜色映射
        "visualMap": {
            "min": 0,
            "max": 10,
            "calculable": True,
            "orient": "horizontal",
            "left": "center",
            "bottom": "10%"
        },
        "series": [ 
            {
                "name": "CIC Value",
                "type": "heatmap", # 图表类型为热力图
                "data": heatmap_data,
                "emphasis": { # 高亮样式
                    "itemStyle": {"shadowBlur": 10, "shadowColor": "rgba(0, 0, 0, 0.5)"}
                }
            }
        ],
    }
    st_echarts(option, height="500px") # 渲染图表

app.py程序如下：

import streamlit as st
from heatmap import render_basic_heatmap

data = [[0, 0, 5, 'A'], [0, 1, 1, 'B'], [0, 2, 0, 'C'], [0, 3, 0, 'D'], [0, 4, 0, 'E'], [0, 5, 0, 'F'], 
        [0, 6, 0, 'G'], [0, 7, 0, 'H'], [0, 8, 0, 'I'], [0, 9, 0, 'J'], [0, 10, 0, 'K'], [0, 11, 2, 'L'], 
        [0, 12, 4, 'M'], [0, 13, 1, 'N'], [0, 14, 1, 'O'], [0, 15, 3, 'P'], [0, 16, 4, 'Q'], [0, 17, 6, 'R'], 
        [0, 18, 4, 'S'], [0, 19, 4, 'T'], [0, 20, 3, 'U'], [0, 21, 3, 'V'], [0, 22, 2, 'W'], [0, 23, 5, 'X'], 
        [1, 0, 7, 'A'], [1, 1, 0, 'B'], [1, 2, 0, 'C'], [1, 3, 0, 'D'], [1, 4, 0, 'E'], [1, 5, 0, 'F'], 
        [1, 6, 0, 'G'], [1, 7, 0, 'H'], [1, 8, 0, 'I'], [1, 9, 0, 'J'], [1, 10, 5, 'K'], [1, 11, 2, 'L'], 
        [1, 12, 2, 'M'], [1, 13, 6, 'N'], [1, 14, 9, 'O'], [1, 15, 11, 'P'], [1, 16, 6, 'Q'], [1, 17, 7, 'R'], 
        [1, 18, 8, 'S'], [1, 19, 12, 'T'], [1, 20, 5, 'U'], [1, 21, 5, 'V'], [1, 22, 7, 'W'], [1, 23, 2, 'X'], 
        [2, 0, 1, 'A'], [2, 1, 1, 'B'], [2, 2, 0, 'C'], [2, 3, 0, 'D'], [2, 4, 0, 'E'], [2, 5, 0, 'F'], 
        [2, 6, 0, 'G'], [2, 7, 0, 'H'], [2, 8, 0, 'I'], [2, 9, 0, 'J'], [2, 10, 3, 'K'], [2, 11, 2, 'L'], 
        [2, 12, 1, 'M'], [2, 13, 9, 'N'], [2, 14, 8, 'O'], [2, 15, 10, 'P'], [2, 16, 6, 'Q'], [2, 17, 5, 'R'], 
        [2, 18, 5, 'S'], [2, 19, 5, 'T'], [2, 20, 7, 'U'], [2, 21, 4, 'V'], [2, 22, 2, 'W'], [2, 23, 4, 'X'],
        [3, 0, 7, 'A'], [3, 1, 3, 'B'], [3, 2, 0, 'C'], [3, 3, 0, 'D'], [3, 4, 0, 'E'], [3, 5, 0, 'F'], 
        [3, 6, 0, 'G'], [3, 7, 0, 'H'], [3, 8, 1, 'I'], [3, 9, 0, 'J'], [3, 10, 5, 'K'], [3, 11, 4, 'L'], 
        [3, 12, 7, 'M'], [3, 13, 14, 'N'], [3, 14, 13, 'O'], [3, 15, 12, 'P'], [3, 16, 9, 'Q'], [3, 17, 5, 'R'], 
        [3, 18, 5, 'S'], [3, 19, 10, 'T'], [3, 20, 6, 'U'], [3, 21, 4, 'V'], [3, 22, 4, 'W'], [3, 23, 1, 'X'], 
        [4, 0, 1, 'A'], [4, 1, 3, 'B'], [4, 2, 0, 'C'], [4, 3, 0, 'D'], [4, 4, 0, 'E'], [4, 5, 1, 'F'], 
        [4, 6, 0, 'G'], [4, 7, 0, 'H'], [4, 8, 0, 'I'], [4, 9, 2, 'J'], [4, 10, 4, 'K'], [4, 11, 4, 'L'], 
        [4, 12, 2, 'M'], [4, 13, 4, 'N'], [4, 14, 4, 'O'], [4, 15, 14, 'P'], [4, 16, 12, 'Q'], [4, 17, 1, 'R'], 
        [4, 18, 8, 'S'], [4, 19, 5, 'T'], [4, 20, 3, 'U'], [4, 21, 7, 'V'], [4, 22, 3, 'W'], [4, 23, 0, 'X'], 
        [5, 0, 2, 'A'], [5, 1, 1, 'B'], [5, 2, 0, 'C'], [5, 3, 3, 'D'], [5, 4, 0, 'E'], [5, 5, 0, 'F'], 
        [5, 6, 0, 'G'], [5, 7, 0, 'H'], [5, 8, 2, 'I'], [5, 9, 0, 'J'], [5, 10, 4, 'K'], [5, 11, 1, 'L'], 
        [5, 12, 5, 'M'], [5, 13, 10, 'N'], [5, 14, 5, 'O'], [5, 15, 7, 'P'], [5, 16, 11, 'Q'], [5, 17, 6, 'R'], 
        [5, 18, 0, 'S'], [5, 19, 5, 'T'], [5, 20, 3, 'U'], [5, 21, 4, 'V'], [5, 22, 2, 'W'], [5, 23, 0, 'X'], 
        [6, 0, 1, 'A'], [6, 1, 0, 'B'], [6, 2, 0, 'C'], [6, 3, 0, 'D'], [6, 4, 0, 'E'], [6, 5, 0, 'F'], 
        [6, 6, 0, 'G'], [6, 7, 0, 'H'], [6, 8, 0, 'I'], [6, 9, 0, 'J'], [6, 10, 1, 'K'], [6, 11, 0, 'L'], 
        [6, 12, 2, 'M'], [6, 13, 1, 'N'], [6, 14, 3, 'O'], [6, 15, 4, 'P'], [6, 16, 0, 'Q'], [6, 17, 0, 'R'], 
        [6, 18, 0, 'S'], [6, 19, 0, 'T'], [6, 20, 1, 'U'], [6, 21, 2, 'V'], [6, 22, 2, 'W'], [6, 23, 6, 'X']]
y = [0, 1, 2, 3, 4, 5, 6]
x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
data = [[row[1], row[0], row[2], row[3]] for row in data]
render_basic_heatmap(x, y, data)

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

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