《ECharts数据可视化项目实践06水果前端讲义教学课件.pptx》由会员分享，可在线阅读，更多相关《ECharts数据可视化项目实践06水果前端讲义教学课件.pptx（109页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、ECharts数据可视化项目实践06水果前端讲义E C h a r t s 数 据 可 视 化 项 目 实 践邵辉可视化项目二 水果销售管理系统项目目录数据说明项目分析开发环境项目目标项目背景后端开发前端开发项目总结对接岗位数据可视化展示图形数据可视化数据可视化数据可视化数据可视化本任务是展示各省水果销售情况。选择散点图来完成图形展示。2.2.1 2.2.1 任务任务1 1 两两图展示图展示 1.子任务1散点图展示数据可视化数据可视化数据可视化数据可视化数据可视化数据可视化数据可视化数据可视化数据可视化图2-19 散点图散点图最后呈现的结果如图2-19所示。数据可视化图2-20 散点图在页面展
2、示 散点图出现在页面的结果则如图2-20所示。数据可视化本任务是展示全国水果销售情况。选择词云图来完成图形展示。2.子任务2词云图展示数据可视化数据可视化数据可视化数据可视化 其余代码可以仿照任务1的子任务1完成。数据可视化图2-21 词云图词云图最后呈现的结果如图2-21所示。数据可视化本任务是展示当前卖场的水果和所属科目关系。选择关系图来完成图形展示。任务所需Echarts知识点：关系图的绘制和配置。2.2.2 2.2.2 任务任务2 2 关系关系图展示图展示数据可视化数据可视化数据可视化数据可视化数据可视化 关系图其余代码可以仿照任务1的子任务1完成。数据可视化图2-22 关系图关系图最
3、后呈现的结果如图2-22所示。数据可视化本任务是展示全部卖场销售预算的情况。选择箱线图来完成图形展示。2.2.3 2.2.3 任务任务3 3 两两图展示图展示 1.子任务1“大”箱线图展示数据可视化数据可视化数据可视化数据可视化 箱线图提示tooltip的配置代码如下：数据可视化数据可视化数据可视化 箱线图y坐标轴yAxis的配置代码如下：数据可视化 箱线图series配置项的配置代码如下：数据可视化数据可视化图2-23 左边箱线图 箱线图其余代码可以仿照任务1的子任务1完成。箱线图最后呈现的结果如图2-23所示。数据可视化本任务是展示当前卖场销售预算的情况。选择箱线图来完成图形展示。任务所需
4、Echarts知识点：箱线图的绘制和配置。2.子任务2“小”箱线图展示数据可视化数据可视化数据可视化图2-24 右边箱线图本任务的箱线图代码可以仿照任务1的子任务1完成。本任务的箱线图最后呈现的结果如图2-24所示。数据可视化因此本任务是利用数据显示展示当前卖场的关键数据。直接从后端获取数据在前端展示。任务所需的任务所需的EchartsEcharts知识点：知识点：后端数据展示在前端页面的方法后端数据展示在前端页面的方法 2.2.4 2.2.4 任务任务4 4 数据数据展示展示数据可视化数据可视化将要绘制的图形和相应的容器绑定，代码如下：数据可视化数据可视化 数据展示可以仿照任务1的子任务1完
5、成。数据展示最后呈现的结果如图2-25所示。图2-25 数据展示数据可视化本任务是展示当前卖场各省份总销量和门店平均销量。选择地图来完成图形展示。任务所需的Echarts知识点：地图的绘制和配置。2.2.5 任务任务5 5 地地图展示图展示数据可视化数据可视化数据可视化数据可视化数据可视化地图地理坐标系组件geo的配置代码如下：数据可视化数据可视化地图series配置项的配置代码如下：数据可视化 地图其余代码仿照任务1的子任务1完成。另外在地图所在容器上有两个超链接“各省总销量”和“各省门店平均销量”，代码如下：数据可视化数据可视化本任务是展示各省水果科目销售情况。选择气泡图来完成图形展示。任
6、务所需的Echarts知识点：气泡图的绘制和配置。2.2.6 2.2.6 任务任务6 6玫瑰图展示玫瑰图展示 1.子任务1气泡图展示数据可视化数据可视化数据可视化数据可视化 气泡图x轴xAxis的配置代码如下：数据可视化 气泡图y轴yAxis的配置代码如下：数据可视化 气泡图series配置项的配置代码如下：数据可视化 气泡图其余代码可以仿照任务1的子任务1完成。气泡图最后呈现的结果如图2-26所示。图2-26 气泡图数据可视化本任务是展示全国水果科目销售情况。选择异型柱状图来完成图形展示。任务所需的Echarts知识点：异型柱状图的绘制和配置。2.子任务2异型柱状图展示数据可视化数据可视化
7、数据可视化数据可视化数据可视化数据可视化 数据可视化异型柱状图y轴yAxis的配置代码如下：数据可视化 异型柱状图series配置项的配置代码如下：数据可视化 数据可视化 数据可视化图2-27 异型柱状图 异型柱状图其余代码仿照任务1的子任务1完成。异型柱状图最后呈现的结果如图2-27所示。数据可视化本任务是展示当前卖场销量占全部卖场总销量的比重。选择仪表图来完成图形展示。任务所需Echarts知识点：仪表图的绘制和配置。2.2.7 2.2.7 任务任务7 7仪表图展示仪表图展示数据可视化数据可视化数据可视化 仪表图series配置项的配置代码如下：数据可视化 数据可视化 数据可视化 数据可视
8、化 仪表图其余代码仿照任务1的子任务1完成。仪表图最后呈现的结果如图2-28所示。图2-28 仪表图数据可视化 本任务是展示当前卖场每月增加的会员人数。选择折线图来完成图形展示。任务所需Echarts知识点：折线图的绘制和配置。2.2.8 2.2.8 任务任务8 8折线图展示折线图展示数据可视化数据可视化数据可视化数据可视化 折线图y坐标轴yAxis的配置如下：数据可视化 折线图series配置项代码如下数据可视化 数据可视化 数据可视化图2-29 折线图 折线图其余代码仿照任务1的子任务1完成。折线图最后呈现的结果如图2-29所示。项目总结捌数据可视化完成可视化大屏项目重难点数据可视化完成可视化大屏数据可视化 1.1.完成可视化大屏完成可视化大屏图2-30 可视化大屏 本项目最后实现的可视化大屏效果如图2-30所示。数据可视化项目重难点数据可视化 2.2.项目重难点项目重难点对接岗位玖数据可视化对接岗位数据可视化 本项目对应的就业岗位是大数据可视化开发工程师，如表2-5所示。【对接岗位】【对接岗位】表2-5 大数据可视化开发工程师岗位要求感谢您的观看可化视