ECharts数据可视化项目-项目一 天虎网上超市销售管理系统.pptxVIP

项目一 天虎网上超市销售管理系统;;项目背景; 随着互联网技术的发展，国内的网上超市如雨后春笋般地出现。在这里，消费者足不出户就可以浏览超市中的所有商品、查看打折商品、参与促销活动或下单购买商品等，因此消费者能够很方便地查找到自己所需要的商品并直接在网上购买。消费者还可以在网上直接与超市客服进行沟通和交流，如询问自己感兴趣的问题、得到自己遇到问题的解决方法等。网上超市的出现给国内人民生活带来了极大的便利，它是一种典型的数字经济。;项目目标;数据说明;项目分析;开发环境; 前端开发使用的工具为Vscode、后端开发使用的工具则为Pycharm专业版（也可以用社区版）。;后端开发;清洗数据;清洗数据; Pycharm里Flask项目结构;ENV = development # 设置开发模式 DEBUG = True # 提供报错信息 JSON_AS_ASCII=False # 解决json返回中文乱码问题;import pandas as pd # 读取数据 df1 = pd.read_csv(datas/GoodsOrder.csv, encoding=gbk) df2 = pd.read_csv(datas/GoodsTypes.csv, encoding=gbk) #异常数据处理，删除缺失值 df1 = df1.dropna() df2 = df2.dropna();制作数据;df_1 = df[df[Types] == 非酒精饮料] df_2 = df_1.groupby([Goods]).count();??? # 返回字典格式数据 return { ??? # name为非酒精饮料类型的商品名称、value为商品数量 ??????? name: name, ??????? value: value ?????????? };df_1 = df.groupby([Goods]).count();返回数据;? 1.2.3 任务3瀑布图所需数据;? 1.2.4 任务4折线图所需数据 ??;? 1.2.5 任务5雷达图所需数据 ;? 1.2.6 任务任务6玫瑰图所需数据 ??;? 1.2.7 任务7环形图所需数据 ?;? 1.2.8 任务8旭日图所需数据??;# 返回字典格式数据 return {data: l,name:flag};? 1.2.9 任务9树图所需数据 ;得到数据data_dict;# 返回字典形式数据 return {data: data_dict};实现数据接口;制作数据接口页面; ;数据通过JS脚本来完成显示;解决跨域问题; from flask_cors import CORS;远程访问;;;项目一 天虎网上超市销售管理系统;;前端开发;大屏布局;大屏布局;图1-17 前端初始目录结构;本??目布局分为上下两个部分：上面为标题和时间显示；下面为三行三列的九个容器。如图1-18所示。;? 1.1.1 完成HTML代码; 在布局的上面部分，要完成标题和时间显示，则需要设置h1标签和放置JS插件的div标签。代码如下： ;建立左边三容器，其它类似。代码如下：;? 1.1.2 完成样式代码;头部样式设置，代码如下：;主体样式设置，代码如下：;? 所有放置图形的容器外都放置panel容器，代码如下： ;四半角修饰，代码如下：;左上角的半角框修饰。如图1-19所示。;右上角框。代码如下：;panel-footer容器作用就是为了能形成左下角半角框和右下角半角框，代码如下：;左下角、右下角代码如下：; 在Vscode里打开index.html文件后，选择菜单“运行”，然后选择“启动调试”，可以看到图1-18所示的布局已经成功显示。;;;项目一 天虎网上超市销售管理系统;;展示图形;1.2 展示图形;1.2 展示图形;本任务展示属于非酒精饮料类型的各个商品在购物篮中的数量。; 柱状图title代码如下：; 柱状图x坐标轴xAxis代码如下：; 柱状图y坐标轴yAxis代码如下：; 柱状图series代码如下：;图1-20 使用渐变色生成器前后对比;柱状图最后呈现的结果如图1-21所示。; 柱状图出现在页面的结果则如图1-22所示。;本任务是展示购物篮中数量排名前十的商品。;title代码如下：; 条形图series配置项的配置代码如下：;条形图最后呈现的结果如图1-23所示。;本任务展示全部商品类型以及所属的商品总数量。; 瀑布图x轴xAxis的配置代码如下：;瀑布图最后呈现的结果如图1-24所示。;