Python爬取豆瓣Top250并可视化（七）- 可视化 - 将电影评分图布局到WEB端

可视化第一篇文章戳此。这是可视化的第二篇笔记。从数据库里查询电影评分和各个评分数值的数量并柱状图到WEB端。

WEB模板还是用的前面的模板。也还是只布局到首页，没有做分页。先上最终效果：

后端代码很简单，就是从数据库里查出电影评分已经评分数量。

网页端代码比较多一些（主要看选的示例）很长，选取图表配置和数据项的代码展示：

WEB端代码步骤和解释：

1，在头部引入echarts官网下载的js文件；如下 :

2，为图表展示区定义一个DOM；如下：

3，基于创建好的DOM，创建一个js实例，如下：

注意DOM的id和实例的id必须相同。

4，指定图表的配置项和数据，js的代码的大部；

5，利用第3步创建的实例，并使用刚指定的配置项和数据在网页上展示图表，如下：

上面的步骤来自echarts官方，只是组织成了自己能让自己简单明了的语言。可参考：https://echarts.apache.org/handbook/zh/get-started/。

心得几点：

1，就是使用echarts的步骤；

2，图表可以在官方示例中先改好自己想要的风格，然后将代码复制到上述步骤中的第4步（指定图表的配置项和数据）；

3，配置项的标签不需要记，要用的时候，可以找一个相对代码较多的实例，将它里面自己喜欢的代码复制到自己的配置项中；也可以在官方文档中查：https://echarts.apache.org/zh/option.html#title；

4，有时候在官方实例中编辑代码，改成了自己想要的风格，但是复制代码又怕出错，也会出现不知道粘到哪里的情况。可以点击官方示例右下角的下载按钮将整个文档下载下来。然后再从本地的html文档中，提取上面说到的几部分，第一是在头部引入js文件，第二是构造DOM，第三是基于准备好的DOM创建实例，第四是图表配置项和数据，最后是利用实例展示图表。

可能会有一种情况（通常是数值到字符串转换的时候）：

可能会有这么一种情况，由于echarts的x轴坐标一般是字符串形式的，而数据本身是数值型的，在Flask中不小心将数值处理成了字符串，那么在WEB端可能会出现转义的问题，然后导致图表不显示，查看网页源码类似如下：

数据本身从Flask里出来没问题的。但是就是不显示图表了。这时候只需要在WEB端转义出错的代码的源码处将变量转换成json数据格式就行了。也就是：

通过这么一行，WEB端的数据转义就会没问题，图表也还会是那个图表。