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

1.官方文档

• 1.1 官方文档

• 1.2 DraggablePageLayout 布局

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

• 1.3 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()))

2. 我的例子：Page - Page_draggable_layout

• 请注意坑在chart_id的属性这里，请注意jason文件的chart_id。
• 需要将实例化后的对象放在add()中。
• 运行步骤分为三步：第一是运行下面程式，拖动原网页的布局，并生成json文件。第二将生成的json文件放在指定路径。第三是重新运行下面程式，查看布局变化。

2.1 第一是运行下面程式，拖动原网页的布局，并生成json文件。

from pyecharts import options as opts
from pyecharts.charts import Bar, Grid, Line, Liquid, Page, Pie, Geo
from pyecharts.commons.utils import JsCode
from pyecharts.components import Table
from pyecharts.faker import Faker
from django.shortcuts import render
from django.http import HttpResponsedef bar_datazoom_slider() -> Bar:c = (Bar().add_xaxis(Faker.days_attrs).add_yaxis("商家A", Faker.days_values).set_global_opts(title_opts=opts.TitleOpts(title="Bar-DataZoom（slider-水平）"),datazoom_opts=[opts.DataZoomOpts()],))return cdef line_markpoint() -> Line:c = (Line().add_xaxis(Faker.choose()).add_yaxis("商家A",Faker.values(),markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="min")]),).add_yaxis("商家B",Faker.values(),markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="max")]),).set_global_opts(title_opts=opts.TitleOpts(title="Line-MarkPoint")))return cdef pie_rosetype() -> Pie:v = Faker.choose()c = (Pie().add("",[list(z) for z in zip(v, Faker.values())],radius=["30%", "75%"],center=["25%", "50%"],rosetype="radius",label_opts=opts.LabelOpts(is_show=False),).add("",[list(z) for z in zip(v, Faker.values())],radius=["30%", "75%"],center=["75%", "50%"],rosetype="area",).set_global_opts(title_opts=opts.TitleOpts(title="Pie-玫瑰图示例")))return cdef grid_mutil_yaxis() -> Grid:x_data = ["{}月".format(i) for i in range(1, 13)]bar = (Bar().add_xaxis(x_data).add_yaxis("蒸发量",[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],yaxis_index=0,color="#d14a61",).add_yaxis("降水量",[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],yaxis_index=1,color="#5793f3",).extend_axis(yaxis=opts.AxisOpts(name="蒸发量",type_="value",min_=0,max_=250,position="right",axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="#d14a61")),axislabel_opts=opts.LabelOpts(formatter="{value} ml"),)).extend_axis(yaxis=opts.AxisOpts(type_="value",name="温度",min_=0,max_=25,position="left",axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="#675bba")),axislabel_opts=opts.LabelOpts(formatter="{value} °C"),splitline_opts=opts.SplitLineOpts(is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=1)),)).set_global_opts(yaxis_opts=opts.AxisOpts(name="降水量",min_=0,max_=250,position="right",offset=80,axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color="#5793f3")),axislabel_opts=opts.LabelOpts(formatter="{value} ml"),),title_opts=opts.TitleOpts(title="Grid-多 Y 轴示例"),tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross"),))line = (Line().add_xaxis(x_data).add_yaxis("平均温度",[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],yaxis_index=2,color="#675bba",label_opts=opts.LabelOpts(is_show=False),))bar.overlap(line)return Grid().add(bar, opts.GridOpts(pos_left="5%", pos_right="20%"), is_control_axis_index=True)def liquid_data_precision() -> Liquid:c = (Liquid().add("lq",[0.3254],label_opts=opts.LabelOpts(font_size=50,formatter=JsCode("""function (param) {return (Math.floor(param.value * 10000) / 100) + '%';}"""),position="inside",),).set_global_opts(title_opts=opts.TitleOpts(title="Liquid-数据精度")))return cdef table_base() -> Table:table = Table()headers = ["City name", "Area", "Population", "Annual Rainfall"]rows = [["Brisbane", 5905, 1857594, 1146.4],["Adelaide", 1295, 1158259, 600.5],["Darwin", 112, 120900, 1714.7],["Hobart", 1357, 205556, 619.5],["Sydney", 2058, 4336374, 1214.8],["Melbourne", 1566, 3806092, 646.9],["Perth", 5386, 1554769, 869.4],]table.add(headers, rows).set_global_opts(title_opts=opts.ComponentTitleOpts(title="Table"))return tabledef page_draggable_layout():page = Page(layout=Page.DraggablePageLayout)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"grid = grid_mutil_yaxis()grid.chart_id = "chenjiandongx_is_an_ad_boy"liquid = liquid_data_precision()liquid.chart_id = "chenjiandongx_is_an_po_boy"table = table_base()table.chart_id = "chenjiandongx_is_an_po_boy"page.add(bar,line,pie,grid,liquid,table,)#page.render("page_draggable_layout.html")Page.save_resize_html("page_draggable_layout.html", cfg_file=r"chart_config (6).json", dest="my_new_charts.html")if __name__ == "__main__":page_draggable_layout()

2.2 第二将生成的json文件放在指定路径。

• chart_config.json如下

[{"cid":"chenjiandongx_is_an_awesome_boy","width":"900px","height":"500px","top":"281px","left":"381px"},{"cid":"chenjiandongx_is_an_amazing_boy","width":"900px","height":"500px","top":"32px","left":"-1px"},{"cid":"chenjiandongx_is_an_adorable_boy","width":"900px","height":"500px","top":"1077px","left":"8px"},{"cid":"chenjiandongx_is_an_ad_boy","width":"900px","height":"500px","top":"1600px","left":"8px"},{"cid":"chenjiandongx_is_an_po_boy","width":"900px","height":"500px","top":"2123px","left":"8px"},{"cid":"chenjiandongx_is_an_po_boy","width":"900px","height":"500px","top":"2123px","left":"8px"}]

2.3 第三是重新运行下面程式，查看布局变化。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！