这两天琢磨了一下pyecharts这个库，自己总结了一些内容，具体如下：
大多数人在做用python库做数据分析的时候，都在用jupyter，用这个工具是没有错，而且非常方便就可以即时的显示数据，这个确实优秀。但是如果有这样的一个需求：是用Django做个数据分析类的可视化大屏BI系统，那还会像jupyter那样两人愉快吗？
我在查看了很多资料，有在Django中使用pandas/numpy/matplotlib来做这件事情的，但是我自己本身也不太懂那些繁琐的程序，我还需要继续提升“键魂”吧。
首先我查看了pyecharts的中文文档：http://pyecharts.org/#/zh-cn/intro
在看文档的时候，我看到了令人欣喜的的地方：可轻松集成至 Flask，Django 等主流 Web 框架
然后我迫不及待的查看类目里面的内容。
我先模仿者敲了前两个类别的代码：在模板中渲染和前后端分离这两个类目，后面两个动态的没有过多的研究，因为在看文档的时候，好多参数都记不住什么意思，只能前后来回的翻看。当我把两个小类目实现之后，我开始思考当前的需求：在一个页面中同时渲染出多个图表，我看到的这两个小类别都是只渲染了一个图表，于是我又疯狂的搜集资料，最后还是回到了文档里面来。
于是让人欣喜的地方来了：组合图表，目前只有四种组合图表的样式，而我当前需要的是平铺在页面上的，所以我着重的看前两个小类目，首先我模仿着第一种Grid在Django中实现了上下表，左右表，多Y轴表（我并不需要K线，就没有研究），做完这些之后，我就想着如何才能把上面这几种表综合起来呢？尽管我做了很多种方式的尝试，但还是不行，好像是覆盖掉了还是怎么回事，反正是乱套了，没有按照平铺的方式来显示图表，于是我又研究Page这个类，希望这个类能实现我想要的功能吧。在尝试了几次之后，发现同样的方法在页面上什么都渲染不出来，我不清楚到底是哪里出了问题，于是我去查看Page的源码。我仔细查看之后，发现了一些原因：
"""
`Page` A container object to present multiple charts vertically in a single page
"""
# 大概意思就是在一个页面显示多种图表吧
def render(
self,
path: str = "render.html",
template_name: str = "simple_page.html",
env: types.Optional[Environment] = None,
**kwargs,
) -> str:
self._prepare_render()
return engine.render(self, path, template_name, env, **kwargs)
# 下面还有两种render，有源码我就不复制了
大概这种情况就是：它只能渲染到指定的页面上面吧，那这不就是和Django没什么关系了吗，那我要怎么传参之类的呢？于是我只能放弃这个类
兜兜转转一圈，最后又回到了Grid类，
"""
`Gird` Drawing grid in rectangular coordinate. In a single grid,
at most two X and Y axes each is allowed. Line chart, bar chart,
and scatter chart (bubble chart) can be drawn in grid.
"""
但是表格类显示的图标又非常的有限，很多精美的图标又无法显示，鱼和熊掌不可兼得啊，总之能显示普通的多图表也行啊，于是我又开始查看文档里面的各种参数,反反复复不断的尝试，终于多图表出现了：
这完全是在Django中使用pyecharts来实现的，数据都是原生的模拟数据，至于如何灵活的使用pandas.numpy来给定参数，我觉得是传过来列表就好了，因为Faker.values()就是一个列表，可以用pandas的tolist功能吧，具体我还没有去实践过，还有如何在图标中添加十字虚线的提示等，只自学了两天，很多参数还得慢慢领悟。下面附上代码，让迷茫的小伙伴重新找到方向。
def grid_vertical() -> Grid: # 垂直网格
bar = (
Bar()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(
title_opts=opts.TitleOpts(title="Grid-Bar"),
legend_opts=opts.LegendOpts(pos_left="20%")
)
)
line = (
Line()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(
title_opts=opts.TitleOpts(title="Grid-Line", pos_top="48%"),
legend_opts=opts.LegendOpts(pos_top="48%", pos_left="20%")
)
)
scatter = (
Scatter()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(
title_opts=opts.TitleOpts(title="Grid-Scatter", pos_right="5%"),
legend_opts=opts.LegendOpts(pos_right="25%"),
)
)
line2 = (
Line()
.add_xaxis(Faker.choose())
.add_yaxis("商家A", Faker.values())
.add_yaxis("商家B", Faker.values())
.set_global_opts(
title_opts=opts.TitleOpts(title="Grid-Line2", pos_right="5%", pos_top="48%"),
legend_opts=opts.LegendOpts(pos_right="25%", pos_top="48%"),
)
)
grid = (
Grid() # 上下图和左右图
.add(chart=bar, grid_opts=opts.GridOpts(pos_bottom="60%", width="38%"))
.add(chart=line, grid_opts=opts.GridOpts(pos_top="60%", width="38%"))
.add(chart=scatter, grid_opts=opts.GridOpts(pos_left="55%", pos_bottom="60%"))
.add(chart=line2, grid_opts=opts.GridOpts(pos_left="55%", pos_top="60%"))
# 获取全局 options，JSON 格式（JsCode 生成的函数带引号，在前后端分离传输数据时使用）
.dump_options_with_quotes() # 官方解释：保留 JS 方法引号
)
return grid
这里只附上部分代码，想要源码的可加我微信：gcw-410,昵称：浅情人不知，勿忘备注：生而为魔
