在本次的实例中，我们讲用js、html、数据库等制作一个螺蛳粉数据大屏。
一、大屏的html部分
这段代码是一个使用Vue.js框架编写的HTML页面，主要用于展示袋装螺蛳粉的销售数据。页面包括了各种图表（柱状图、折线图、地图和词云图）以及一些销售数据的显示。下面是对代码各部分的解释：
-
HTML头部信息:
<head>标签内包含了文档的元数据，如字符编码、标题和多个JavaScript库的引用。这些库包括ECharts（用于绘制图表）、jQuery和一个名为china.js的脚本。
-
主体内容:
<body>标签内包含了页面的主要内容。- 一个标题为“袋装螺蛳粉销售数据大屏”的
<div>元素。 - 一个类名为
mainbox的容器，内部分为三个列（column-1, column-2, column-1），每列包含不同的图表或数据展示区。- 第一列（column-1）包含两个图表：一个是柱状图（id="bar"），另一个是折线图（id="line"）。
- 第二列（column-2）顶部有两个数字标题：“今日销量”和“累计销量”，下方分别显示相应的数值（id="today" 和 id="total"）。底部是一个地图（id="map"）。
- 第三列（column-1）包含两个图表：一个是饼图（id="pie"），另一个是词云图（id="wordcloud"）。
-
JavaScript引用:
- 页面底部引用了多个JavaScript文件，这些文件对应于上述各个图表的实现逻辑。例如，
bar.js控制柱状图，line.js控制折线图，map.js控制地图，pie.js控制饼图，wordcloud.js控制词云图。
- 页面底部引用了多个JavaScript文件，这些文件对应于上述各个图表的实现逻辑。例如，
整体而言，这个页面通过整合多种图表和数据展示方式，为用户提供了一个直观的数据可视化界面，使得用户能够一目了然地了解袋装螺蛳粉的销售情况。
二、链接的数据部分
2.1柱形图
这段代码是使用JavaScript和ECharts库来创建一个简单的柱状图，显示各省份的销量。
title: 设置图表的标题为“各省份销量柱形图”，并让标题居中，同时设置了标题的文字样式（颜色、字体大小和粗细）。
xAxis: 设置X轴的类型为分类（category），数据为空数组，表示初始没有数据。
yAxis: 设置Y轴的类型为数值（value），用于显示销量。
series: 定义一个系列，类型为柱状图（bar），数据也为空数组。
tooltip: 默认配置，可以自定义显示提示框的内容。
使用jQuery的$.ajax()方法从服务器获取数据，URL为"/bar"。
成功获取数据后，将返回的数据中的省份名称赋值给X轴的数据，将总销量赋值给系列的数据。
使用myChart_bar.setOption(option_bar);将更新后的配置应用到图表上，从而更新图表的显示。
2.2折线图
title: 设置图表的标题为“每日销量折线图”，并让标题居中，同时设置了标题的文字样式（颜色、字体大小和粗细）。
xAxis: 设置X轴的类型为分类（category），数据为空数组，表示初始没有数据。
yAxis: 设置Y轴的类型为数值（value），用于显示销量。
series: 定义一个系列，类型为折线图（line），数据也为空数组。
tooltip: 默认配置，可以自定义显示提示框的内容。
使用jQuery的$.ajax()方法从服务器获取数据，URL为"/line"。
成功获取数据后，将返回的数据中的日期赋值给X轴的数据，将总销量赋值给系列的数据。
使用myChart_line.setOption(option_line);将更新后的配置应用到图表上，从而更新图表的显示。
2.3map地图
series: 定义一个系列，类型为地图（map），地图类型为中国（china）。label用于显示地名，颜色为白色。roam设置为true，允许用户缩放和平移地图。初始数据为空数组，稍后会通过Ajax请求更新。
title: 设置图表的标题为“各省份销量地图”，并让标题居中，同时设置了标题的文字样式（颜色、字体大小和粗细）。
tooltip: 默认配置，可以自定义显示提示框的内容。
visualMap: 设置视觉映射组件，最大值为500000，最小值为0，定义了颜色范围从深蓝到浅蓝
使用jQuery的$.ajax()方法从服务器获取数据，URL为"/map"。
成功获取数据后，将返回的数据赋值给系列的数据。
使用myChart_map.setOption(option_map);将更新后的配置应用到图表上，从而更新图表的显示。
2.4饼图
使用jQuery的$.ajax()方法从服务器获取数据，URL为"/pie"。
成功获取数据后，将返回的数据赋值给系列的数据。
使用myChart_pie.setOption(option_pie);将更新后的配置应用到图表上，从而更新图表的显示。
2.5词云图
title: 设置图表的标题为“城市线下网点词云图”，并让标题居中，同时设置了标题的文字样式（颜色、字体大小和粗细）。
series: 定义一个系列，类型为词云图（wordCloud），初始数据为空数组，稍后会通过Ajax请求更新。shape设置为圆形，sizeRange定义了单词的大小范围，rotationRange定义旋转范围，rotationStep定义旋转步长。textStyle用于设置文字的样式，包括字体和颜色（颜色随机生成）。
使用jQuery的$.ajax()方法从服务器获取数据，URL为"/wordcloud"。
成功获取数据后，将返回的数据赋值给系列的数据。
使用myChart_wordcloud.setOption(option_wordcloud);将更新后的配置应用到图表上，从而更新图表的显示。
总结来说，这段代码首先初始化一个ECharts图表实例，然后定义图表的基本配置（包括标题、系列类型、形状、大小范围等），接着通过Ajax请求从服务器获取数据，并将这些数据应用到图表上，最终生成一个展示城市线下网点关键词分布的词云图。
三、utils部分
创建连接的函数 get_conn():
这个函数用来建立与MySQL数据库的连接。
它使用pymysql.connect()方法连接到本地主机（localhost）上的MySQL服务器，端口为3306，用户名为root，密码为123456，数据库名为liao，字符集为utf8mb4。
然后创建一个游标对象cursor，并返回连接对象conn和游标对象cursor。
关闭连接的函数 close_conn(conn, cursor):
这个函数用来关闭数据库连接和游标。
它首先检查游标是否存在，如果存在则关闭游标。
然后检查连接是否存在，如果存在则关闭连接。
数据查询函数 query(sql):
这个函数接收一个SQL查询语句作为参数，并返回查询结果。
它首先调用get_conn()函数创建数据库连接和游标。
然后使用游标的execute()方法执行传入的SQL查询语句。
使用游标的fetchall()方法获取所有查询结果，并将其存储在变量res中。
最后调用close_conn()函数关闭数据库连接和游标，并返回查询结果。
获取省份数据的函数 get_province_data():
这个函数用来查询省份销售数据。
它定义了一个SQL查询语句，从sale_provinces表中选择省份和各种口味的总销售量。
然后调用query()函数执行查询，并返回查询结果。
获取每日数据的函数 get_daily_data():
这个函数用来查询每日销售数据。
它定义了一个SQL查询语句，从sale_products表中选择日期和各种口味的总销售量。
然后调用query()函数执行查询，并返回查询结果。
获取口味数据的函数 get_taste_data():
这个函数用来查询各种口味的总销售量。
它定义了一个SQL查询语句，从sale_products表中选择各种口味的总销售量。
然后调用query()函数执行查询，并返回查询结果。
获取城市数据的函数 get_city_data():
这个函数用来查询全国网点的城市数据。
它定义了一个SQL查询语句，从national_network表中选择城市名称。
然后调用query()函数执行查询，并返回查询结果。
主程序入口 if __name__ == "__main__"::
这个部分是Python脚本的主程序入口。它调用get_city_data()函数获取城市数据，并将结果打印到控制台。
总结来说，这段代码通过定义一系列的函数来连接MySQL数据库、执行SQL查询并获取数据。每个函数都封装了特定的数据库操作逻辑，使得代码结构清晰且易于维护。
四、app部分
首先我们先导入所需要的库，再创建一个Flask应用实例。
柱形图数据路由
从utils模块中获取省份数据。将数据转换为Pandas DataFrame。计算总销量并四舍五入到小数点后两位。根据总销量降序排列，并取前10条数据。返回JSON格式的数据。
折线图数据路由
从utils模块中获取省份数据。将数据转换为列表字典格式，用于地图显示。返回JSON格式的数据。
饼图数据路由
从utils模块中获取口味数据。将数据转换为列表字典格式，用于饼图显示。返回JSON格式的数据。
词云图数据路由
从utils模块中获取城市数据。为每个城市生成一个随机值（0到100之间），用于词云图显示。返回JSON格式的数据。
再渲染一个HTML模板，展示所有的图表。最后在app打开终端看最终的大屏结果。最后所展示的效果如图所示：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
