ECharts数据可视化项目-项目二 水果销售管理系统.pptxVIP

;项目二 水果销售管理系统;;项目背景;项目目标;数据说明;表2-1 水果卖场销售数据;表2-2 水果卖场会员数据;表2-3 水果卖场产品销量数据;项目分析;表2-4 项目的任务列表;开发环境; 1.选择开发环境 在Windows10操作系统上开发本项目。前端开发使用的工具为Vscode1.57.1、后端开发使用的工具则为Pycharm专业版2020.2。 ? ;后端开发; ; 做好项目的准备工作之后，项目的目录结构如图2-2所示。;修改配置文件settings.py，代码如下：;处理数据;处理数据; 2.1 处理数据;获取全部卖场名称的markets函数，代码如下：;制作数据;?2.2 制作数据 ?? ???? 1.子任务1散点图所需数据 ;? ?? ???? 2.子任务2词云图所需数据 ; 使用循环获取所有卖场大屏展示的词云图所需的数据，全部保存在字典数据data3中。代码如下：;? 2.2.2 任务2关系图所需数据; 接下来得到“产品名称”节点和“产品分类”节点在关系图中的坐标，代码如下：;找到源数据中产品名称和产品分类存在关系的数据，得到列表数据links。代码如下：; 2.2.3 任务3 1.子任务1“大”箱线图所需数据;? 2.子任务2“小”箱线图所需数据;? 2.2.4 任务4展示数据所需数据 ;将所有所需要的卖场数据都存储到字典数据data4中，代码如下： ;? 2.2.5 任务5地图所需数据; 创建一个空列表data2，循环添加数据。代码如下： ;返回地图所需数据，代码如下：; 2.2.6 任务6 两图所需数据 子任务1 气泡图所需数据;? 2.子任务2 异型柱状图所需数据 ;? 2.2.7 任务7仪表图所需数据; 最后返回数据，代码如下： ;? ?? ???? 2.2.8 任务8折线图所需数据;实现数据接口;制作数据接口页面;? 2.4 制作数据接口页面;接下来完成页面左上角如图2-15所示的下拉框。; 下拉框的代码如下：;打开数据接口页面时默认显示华冠超市数据的JS脚本。代码如下：;update_market函数的代码如下：; 此时所有任务的表格已经建立，接下来设置相应的样式，样式代码放在head和/head之间，代码如下：; 将所有任务的表格、样式、JS脚本建好以后，数据接口页面就建立成功。前端人员可以通过地址“:5000/”来访问。 ;解决跨域问题; 2.5 解决??域问题 解决跨域问题的方法利用cors。;;;项目二 水果销售管理系统;;前端开发;制作可视化大屏布局;制作可视化大屏布局; 2.1 制作可视化大屏布局 准备好所有的目录和文件之后，在Vscode里形成的目录结构如图2-16所示。;布局如图2-17所示。;? 2.1.1 完成HTML代码;页面左上角下拉框如图2-18所示。;marketdata.js代码如下：;页面下面左边的三个容器代码如下：;页面下面中间两个容器代码如下：;? 2.1.2 完成样式代码;body样式设置代码如下：;页面上面部分代码如下：;页面下面部分的主体样式设置代码如下：;图形所在的容器样式代码如下：;显示关键数据文字样式代码如下：;地图所在容器样式代码如下：;;;项目二 水果销售管理系统;;展示图形;本任务是展示各省水果销售情况。选择散点图来完成图形展示。;图2-19 散点图;图2-20 散点图在页面展示;本任务是展示全国水果销售情况。选择词云图来完成图形展示。; 其余代码可以仿照任务1的子任务1完成。;图2-21 词云图;本任务是展示当前卖场的水果和所属科目关系。选择关系图来完成图形展示。; 关系图其余代码可以仿照任务1的子任务1完成。;图2-22 关系图;本任务是展示全部卖场销售预算的情况。选择箱线图来完成图形展示。; 箱线图提示tooltip的配置代码如下：; 箱线图y坐标轴yAxis的配置代码如下：; 箱线图series配置项的配置代码如下：;图2-23 左边箱线图;本任务是展示当前卖场销售预算的情况。选择箱线图来完成图形展示。;图2-24 右边箱线图;因此本任务是利用数据显示展示当前卖场的关键数据。直接从后端获取数据在前端展示。;将要绘制的图形和相应的容器绑定，代码如下：; 数据展示可以仿照任务1的子任务1完成。 数据展示最后呈现的结果如图2-25所示。 ;本任务是展示当前卖场各省份总销量和门店平均销量。选择地图来完成图形展示。;地图地理坐标系组件geo的配置代码如下：;地图series配置项的配置代码如下：; 地图其余代码仿照任务1的子任务1完成。 另外在地图所在容器上有两个超链接“各省总销量