dash学习（公开文档）

dash嵌套pyechart的html文件，显示水球图

import dash
from dash import html, Input, Output
from pyecharts import options as opts
from pyecharts.charts import Liquid

app = dash.Dash(__name__)

# 创建 Pyecharts 水球图
c1 = (
    Liquid()
    .add('lq', [0.35], center=['50%', '50%'], is_outline_show=False, shape='circle')
    .set_global_opts(title_opts=opts.TitleOpts(title='基本水球图-1', pos_top='30', pos_left='10%'))
)

# 渲染 Pyecharts 水球图为 HTML 文件
c1.render('基本水球图-1.html')

app.layout = html.Div([
    html.H1("Dash with Pyecharts Liquid Chart"),
    # 在布局中嵌入水球图的 HTML 元素
    html.Iframe(srcDoc=open('基本水球图-1.html', 'r').read(), width='50%', height='500')
])

if __name__ == '__main__':
    app.run_server(debug=True)

点击按钮再显示水球图

import dash
from dash import html, Input, Output, dcc
from pyecharts import options as opts
from pyecharts.charts import Liquid

app = dash.Dash(__name__)

# 创建 Pyecharts 水球图
c1 = (
    Liquid()
    .add('lq', [0.35], center=['50%', '50%'], is_outline_show=False, shape='circle')
    .set_global_opts(title_opts=opts.TitleOpts(title='基本水球图-1', pos_top='30', pos_left='10%'))
)

# 渲染 Pyecharts 水球图为 HTML 文件
c1.render('assets/基本水球图-1.html')

app.layout = html.Div([
    html.H1("Dash with Pyecharts Liquid Chart"),
    # 添加按钮，点击按钮后显示水球图
    html.Button("显示水球图", id="show-liquid-button"),
    # 使用 dcc.Loading 组件显示 Pyecharts 水球图
    html.Div(dcc.Loading(
        id="liquid-chart-loading",
        type="default",
        children=[
            html.Iframe(src='/assets/基本水球图-1.html', width="100%", height="500", id="liquid-chart")
        ]
    ))
])


@app.callback(
    Output("liquid-chart", "style"),
    Input("show-liquid-button", "n_clicks")
)
# def show_liquid_chart(n_clicks):  # 如果被点击就显示出基本水球图-1.html，没有被点击就一直隐藏基本水球图-1.html
#     if n_clicks:
#         return {'display': 'block'}
#     else:
#         return {'display': 'none'}

def show_liquid_chart(n_clicks):  # 如果点击单次就显示出基本水球图-1.html，被点击双次就一直隐藏基本水球图-1.html
    if n_clicks is None or n_clicks % 2 == 0:
        return {'display': 'none'}  # "显示水球图"
    else:
        return {'display': 'block'}  # "隐藏水球图"


if __name__ == '__main__':
    app.run_server(debug=True)