Pyecharts组合图表复用渲染模块实现方法

Pyecharts 组合图表 复用更新数据实现方法记录【一定要看说明文档】
2020-11-04

DraggablePageLayout 布局

page = Page(layout=Page.DraggablePageLayout)
page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype(), grid_mutil_yaxis())
page.render()

Note: DraggablePageLayout 需要 pyecharts 版本 v.1.4.0+

# DraggablePageLayout 利用 Jquery 以及 Echarts 本身的 resize 功能，实现了可拖拽布局。使用步骤如下
# 1.指定 Page 布局

page = Page(layout=Page.DraggablePageLayout)

# 正常 render 图表

page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype(), grid_mutil_yaxis())
page.render()

# 使用浏览器打开渲染后的 .html 文件，默认为 render.html。拖拉/调整图表位置和大小，当调整到一个适合
# 的布局时，点击左上方的 Save Config 按钮，下载 chart_config.json 配置文件，假设存放位置为
# ~/chart_config.json。再次渲染图表并指定其布局配置
# Warning: 请注释掉上面的的所有渲染代码，就是以下三行。因为 html 已经生成，并不需要再重新渲染一遍。
# page = Page(layout=Page.DraggablePageLayout)
# page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype(), grid_mutil_yaxis())
# page.render()
# render.html：第一步生成的原 html 文件
# chart_config.json：第二步下载的配置文件
# my_new_charts.html：新 html 文件路径

Page.save_resize_html("render.html", cfg_file="~/chart_config.json", dest="my_new_charts.html")

# 或者可以使用 json 数据
# cfg_dict 为 json 文件里面的内容

Page.save_resize_html("render.html", cfg_dict=cfg_dict, dest="my_new_charts.html")

# Question：能否复用渲染模板？
# Answer: 可以的，渲染配置 json 数据中是以 chart_id 来作为一个图形的唯一标识符的，所以只需要在*
# 第一次渲染的时候指定 chart_id 就可以啦。*
# example:
# bar = bar_datazoom_slider()
# bar.chart_id = “chenjiandongx_is_an_awesome_boy”
# line = line_markpoint()
# line.chart_id = “chenjiandongx_is_an_amazing_boy”
# pie = pie_rosetype()
# pie.chart_id = “chenjiandongx_is_an_adorable_boy”
# 然后只要以后都按这个 chart_id 来渲染图表的时候，你的布局配置就可以复用啦。
# cat chart_config.json，会发现 chart_id 是固定的啦。

page.add(bar_datazoom_slider(), line_markpoint(), pie_rosetype()))

from pyecharts.charts import Bar, Scatter, Funnel, Liquid
from pyecharts import options as opts
# 内置主题类型可查看 pyecharts.globals.ThemeType
from pyecharts.globals import ThemeType, SymbolType
from pyecharts.charts import WordCloud

# # V1 版本开始支持链式调用
# bar = (
#     Bar(init_opts=opts.InitOpts(theme=ThemeType.DARK,width="600px",height="300px"))
#     .add_xaxis(["衬衫", "毛衣", "领带", "裤子", "风衣", "高跟鞋", "袜子", "西服", "马卦", "秋裤", "皮鞋"])
#     .add_yaxis("商家A", [114, 55, 27, 101, 125, 27, 105, 200, 100, 50, 300])
#     .add_yaxis("商家B", [57, 134, 137, 129, 145, 60, 49, 120, 80, 90, 200])
#     .set_global_opts(title_opts=opts.TitleOpts(title="销售情况-商家销售业绩分析"))
# )
# # render 会生成本地 HTML 文件，默认会在当前目录生成 render.html 文件
# # 也可以传入路径参数，如 bar.render("mycharts.html")
# bar.render()

from pyecharts import options as opts
from pyecharts.charts import Bar, Grid, Line
from pyecharts.faker import Faker
from pyecharts.charts import Pie, Gauge, Map, Page

from sanic import Sanic
from sanic.response import json, html
from sanic import response

# 初始化 Sanic
app = Sanic(__name__)
app.static("/", "./")

def chart_base():
    bar = (
        Bar(init_opts=opts.InitOpts(width="400px", height="220px", theme=ThemeType.MACARONS))
        .add_xaxis(Faker.choose())
        .add_yaxis("商家A", Faker.values())
        .add_yaxis("商家B", Faker.values())
        .set_global_opts(title_opts=opts.TitleOpts(title="数据-平台", pos_top="10px"),
                         legend_opts=opts.LegendOpts(pos_top="10", pos_left="150px"))
    )
    barA = (
        Bar(init_opts=opts.InitOpts(width="400px", height="220px", theme=ThemeType.INFOGRAPHIC))
        .add_xaxis(Faker.choose())
        .add_yaxis("商家C", Faker.values())
        .add_yaxis("商家D", Faker.values())
        .set_global_opts(title_opts=opts.TitleOpts(title="数据-统计", pos_top="10px"),
                         legend_opts=opts.LegendOpts(pos_top="10px", pos_left="150px"))
    )

    line = (
        Line(init_opts=opts.InitOpts(width="400px", height="220px", theme=ThemeType.WONDERLAND))
        .add_xaxis(Faker.choose())
        .add_yaxis("商家E", Faker.values())
        .add_yaxis("商家F", Faker.values())
        .set_global_opts(
            title_opts=opts.TitleOpts(title="Grid-Line", pos_left="500px", pos_top="105px"),
            legend_opts=opts.LegendOpts(pos_top="110px", pos_left="600px"),
        )
    )
    lineA = (
        Line(init_opts=opts.InitOpts(width="400px", height="220px", theme=ThemeType.MACARONS))
        .add_xaxis(Faker.choose())
        .add_yaxis("商家G", Faker.values())
        .add_yaxis("商家H", Faker.values())
        .set_global_opts(
            title_opts=opts.TitleOpts(title="Grid-Line", pos_left="500px", pos_top="380px"),
            legend_opts=opts.LegendOpts(pos_top="390px", pos_left="600px"),
        )
    )

    lineB = (
        Line(init_opts=opts.InitOpts(width="400px", height="220px", theme=ThemeType.MACARONS))
        .add_xaxis(Faker.choose(), )
        .add_yaxis("商家I", Faker.values())
        .set_global_opts(
            title_opts=opts.TitleOpts(title="Grid-Line", pos_left="500px", pos_top="380px"),
            legend_opts=opts.LegendOpts(pos_top="390px", pos_left="600px")
        )
    )

    gauge = (
        Gauge(init_opts=opts.InitOpts(width="400px", height="220px", theme=ThemeType.MACARONS))
        .add("", [("完成率", 96.6)], radius="100px",
             title_label_opts=opts.LabelOpts(font_size=20, color="blue", font_family="Microsoft YaHei"),
             )
        .set_global_opts(title_opts=opts.TitleOpts(title="完成情况"),
                         legend_opts=opts.LegendOpts(pos_left="10px", pos_top="10px")
                         )
    )

    gaugeA = (
        Gauge(init_opts=opts.InitOpts(width="400px", height="220px", theme=ThemeType.MACARONS, chart_id="gauageA_1"))
        .add("", [("上升率", 50.6)], radius="100px",
             title_label_opts=opts.LabelOpts(font_size=20, color="blue", font_family="Microsoft YaHei"),
             )
        .set_global_opts(title_opts=opts.TitleOpts(title="上升情况"),
                         legend_opts=opts.LegendOpts(pos_left="10px", pos_top="10px")
                         )
    )


    mmap = (
        Map(init_opts=opts.InitOpts(width="400px", height="220px", theme=ThemeType.MACARONS))
        .add("商家A", [list(z) for z in zip(Faker.provinces, Faker.values())], "china",
             is_map_symbol_show=False,
             )
        .set_global_opts(
            title_opts=opts.TitleOpts(
                title="全国数据分析",
                subtitle="人口密度数据", pos_top="50px", pos_left="100px",
            ),
            visualmap_opts=opts.VisualMapOpts(
                min_=80,
                max_=500,
                range_text=["High", "Low"],
                is_calculable=True,
            ),
        )
    )


    name = [
        ("资源数据展示平台", "1"),
        ]
    wd = (
        WordCloud(init_opts=opts.InitOpts(width="600px", height="120px", theme=ThemeType.SHINE))
        .add("", name, word_size_range=(40, 40), shape=SymbolType.DIAMOND)
    )

    funnel = (
        Funnel(init_opts=opts.InitOpts(width="400px", height="220px", theme=ThemeType.MACARONS))
        .add("商品", [list(z) for z in zip(Faker.choose(), Faker.values())])
        .set_global_opts(title_opts=opts.TitleOpts(title="Funnel-基本示例"))
    )

    x_data = ["展现", "点击", "访问", "咨询", "订单"]
    y_data = [100, 80, 60, 40, 20]

    data = [[x_data[i], y_data[i]] for i in range(len(x_data))]

    funnrl2 = (
        Funnel(init_opts=opts.InitOpts(width="400px", height="220px"))
        .add(
            series_name="",
            data_pair=data,
            gap=2,
            tooltip_opts=opts.TooltipOpts(trigger="item", formatter="{a} <br/>{b} : {c}%"),
            label_opts=opts.LabelOpts(is_show=True, position="inside"),
            itemstyle_opts=opts.ItemStyleOpts(border_color="#fff", border_width=1),
        )
        .set_global_opts(title_opts=opts.TitleOpts(title="漏斗图", subtitle="纯属虚构"))
    )

    liquid = (
        Liquid(init_opts=opts.InitOpts(width="400px", height="220px"))
        .add("lq", [0.2], label_opts=opts.LabelOpts(
                font_size=30,
                position="inside",
            ),
            )
        .set_global_opts(title_opts=opts.TitleOpts(title="Liquid-基本示例"))
    )

    pie = (
        Pie(init_opts=opts.InitOpts(width="400px", height="220px"))
        .add("", [list(z) for z in zip(Faker.choose(), Faker.values())])
        .set_colors(["blue", "green", "yellow", "red", "pink", "orange", "purple"])
        .set_global_opts(title_opts=opts.TitleOpts(title="Pie-设置颜色"))
        .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
    )

    # grid = (
    #     Grid(init_opts=opts.InitOpts(width="1440px", height="900px", page_title="标题设置-数据分析大屏展示"
    #                                  , theme=ThemeType.WONDERLAND))
    #     # .add(bar, grid_opts=opts.GridOpts(pos_left="60px", pos_top="140px", width="300px", height="180px"))
    #     # .add(line, grid_opts=opts.GridOpts(pos_left="550px", pos_top="140px", width="400px", height="220px"))
    #     # .add(lineB, grid_opts=opts.GridOpts(pos_left="1100px", pos_top="140px", width="300px", height="180px"))
    #     # .add(barA, grid_opts=opts.GridOpts(pos_left="60px", pos_top="440px", width="300px", height="180px"))
    #     # .add(lineA, grid_opts=opts.GridOpts(pos_left="550px", pos_top="440px", width="400px", height="220px"))
    #     # .add(pie, grid_opts=opts.GridOpts(pos_left="1100px", pos_top="440px"))
    #     .add(mmap, grid_opts=opts.GridOpts(pos_left="50px", pos_top="440px", width="5500", height="500"))
    #     .render("grid_vertical.html")
    # )

    page = Page(layout=Page.DraggablePageLayout)
    page.add(bar, barA, line, lineA, lineB, mmap, gauge, gaugeA, wd, funnel, funnrl2, liquid, pie)
    # 生成模板
    page.render("test.html")
    # page.render("test.html")
    # 生成渲染文件
    Page.save_resize_html("test.html",
                          cfg_file="chart_config.json",
                          dest="my_test.html")
    return page


@app.route("/")
async def index(request):
    page = chart_base()

    return html(open("index.html").read())
    # return json({"hello": "world"})

if __name__ == '__main__':
    # app.run(host="127.0.0.1", port=8900)
    page = chart_base()