Hadoop大数据技术与项目实战 实训指导书2——5.3.7 布局并保存图表.pdf

山西职业技术学院《Hadoop大数据技术与项目实战》

布局并保存图表

一、任务描述

本任务中，将已经绘制好的各个图表组合到一个页面中，并进行合理布局，最后将

完成布局的页面保存下来。

二、能力目标

能使用Page的add方法实现图表的组合。

能使用save_resize_html方法

三、任务准备

1.安装python环境

2.安装jupyternotebook开发环境

3.安装pyecharts、bs4第三方库

4.绘制所需图表：需要组合的所有图表（包括：大屏标题、活跃用户柱状图、沉默

用户象形柱状图、轮播图、叠加图、水球图）

四、任务实施

1.组合图表

导入Page类，定义page_layout函数，实例化page对象并将其设置为

DraggablePageLayout可拖拽模式，然后用page对象调用add方法将各个图表添加至

page对象中，在函数末尾返回该page对象，在函数外部调用page_layout函数并将返

回结果赋值给page变量，将多个图表组合在一个页面中。运行以下代码：

1frompyechartsimportoptionsasopts

2frompyecharts.chartsimportPage

3

1

山西职业技术学院《Hadoop大数据技术与项目实战》

4defpage_layout():

5组合图表

6pagePage(layoutPage.DraggablePageLayout)#实例化page对象，并设置为可拖拽样式

7page.add(#添加各图表

8get_title(),

9get_bar_line_wastage_new(),

10get_bar_silent(),

11get_liquid(),

12get_bar_active(),

13get_pie()

14)

15returnpage

16

17pagepage_layout()#生成组合了多个图表的page对象

2.保存图表

用page对象调用render方法，将所有图表保存在result.html文件中。运行以下代

码：

1page.render(result.html)#将图表保存为result.html文件

3.布局图表

打开刚刚生成的result.html文件，发现各个图表是顺序从上到下排列的，拖拉、调

整图表位置和大小，当调整到一个适合的布局时，点击左上方的【SaveConfig】按钮，

下载chart_config.json配置文件。

2

山西职业技术学院《Hadoop大数据技术与项目实战》

将下载的“chart_config.json”文件放置在代码的同级目录下，如下图所示：

4.指定布局配置，再次渲染图表

用page对象调用save_resize_html方法，按chart_config.json文件的布局配置各个

图表的位置和大小，运行以下代码，再次渲染图表，生成新的re_result.html文件。

3

山西职业技术学院《Hadoop大数据技术与项目实战》

注意：在运行以下代码前，请注释掉上面的渲染代