ECharts数据可视化课件 第8章 项目实战-电商数据可视化系统

第8章项目实战——电商数据可视化系统《ECharts数据可视化》学习目标/Target熟悉项目的整体结构，能够归纳项目的整体结构掌握用户数量及同比增长率图表的开发，能够独立完成代码掌握青年消费者的需求分布图表的开发，能够独立完成代码掌握用户状态分布图表的开发，能够独立完成代码掌握用户分类图表的开发，能够独立完成代码学习目标/Target掌握年度销售额图表的开发，能够独立完成代码掌握月度销售额图表的开发，能够独立完成代码掌握平台转化率图表的开发，能够独立完成代码掌握各地区销售分析图表的开发，能够独立完成代码学习目标/Target掌握单日订单量图表的开发，能够独立完成代码掌握不同订单状态下的订单数量图表的开发，能够独立完成代码掌握各地区订单量分布情况图表的开发，能够独立完成代码掌握订单配送方式分布情况图表的开发，能够独立完成代码章节概述/Summary通过之前的学习，相信读者已经能够熟练掌握如何使用ECharts绘制图表。为了帮助读者更深入地理解与应用ECharts，本章将带领读者综合运用所学知识开发一个电商数据可视化系统，详细讲解电商数据可视化系统的开发过程。目录/Contents8.18.28.3项目介绍项目初始化项目功能开发项目介绍8.18.1项目介绍

先定一个小目标！熟悉项目的整体结构，能够归纳项目的整体结构本项目是一个电商数据可视化系统，该系统通过数据可视化的方式展示电商数据，包括销售额、订单量、用户状态分布等，从而帮助平台管理人员更好地了解电商业务并做出更明智的决策。8.1项目介绍8.1项目介绍本项目的开发环境具体如下。操作系统：Windows10或更高版本。运行环境：Node.js16.17.0。前端框架：Vue.js3.2.47。数据可视化工具：ECharts5.4.1。浏览器：Chrome。编辑器：VisualStudioCode。本项目主要分为以下3个模块。用户分析模块销售分析模块订单分析模块8.1项目介绍用户分析模块用于展示用户信息，用户分析模块的页面效果如下图所示。8.1项目介绍1.用户分析模块用户分析模块中的4张图表用于从不同角度展示用户数据，接下来对各张图表进行简要介绍。用户数量及同比增长率：使用柱状图和折线图的混搭图表，展示该电商平台在2020—2023年期间用户数量逐年递增的趋势，同时也能反映同比增长率的变化趋势。青年消费者的需求分布：通过饼图展示该电商平台中青年消费者的需求分布。用户状态分布：通过圆环图展示该电商平台中活跃用户和流失用户的分布情况。用户分类：通过圆环图展示该电商平台中不同分类的用户数量。8.1项目介绍1.用户分析模块销售分析模块用于展示商品销售信息，销售分析模块页面效果如下图所示。8.1项目介绍2.销售分析模块销售分析模块中的4张图表从不同角度展示商品销售数据，接下来对各张图表进行简要介绍。年度销售额：通过仪表盘展示该电商平台年度销售额的达成率。月度销售额：通过横向柱状图展示该电商平台中5月份不同类目商品的实际销售额和预计销售额。平台转化率：通过漏斗图展示该电商平台中访客的转化率，转化率为20%。各地区销售分析：通过雷达图展示该电商平台中不同地区的销售能力，可以非常清晰地展示各个地区的销售情况。8.1项目介绍2.销售分析模块订单分析模块用于展示该电商平台中订单数据，订单分析模块页面效果如下图所示。8.1项目介绍3.订单分析模块订单分析模块中的4张图表从不同角度展示电商平台中的订单数据，接下来对各张图表进行简要介绍。单日订单量：通过区域面积图展示该电商平台4月26日不同时间的订单数量。不同订单状态下的订单数量：通过柱状图展示该电商平台中最近5天不同订单状态下的订单数量，可以直观地反映订单状态。各地区订单量占比情况：通过南丁格尔图展示该电商平台4月27日各地区的订单数量。订单配送方式分布情况：通过饼图展示该电商平台4月28日订单配送方式分布情况。8.1项目介绍3.订单分析模块项目初始化8.28.2项目初始化

先定一个小目标！掌握项目初始化，能够使用初始项目完成项目的搭建8.2项目初始化从本书的配套资源中找到本章项目的初始版本，将文件解压并保存在一个指定目录下，例如D:\ECharts\chapter08\shop，将该目录作为项目目录。演示如何使用初始项目步骤1步骤28.2项目初始化使用VSCode编辑器打开项目目录，项目目录结构如右图所示。步骤1步骤2演示如何使用初始项目8.2项目初始化下面对项目目录结构中的主要文件进行介绍。src\components\subcomponents\Commodity.vue：用于展示销售分析模块的相关信息。src\components\subcomponents\Order.vue：用于展示订单分析模块的内容。src\components\subcomponents\User.vue：用于展示用户分析模块的内容。src\components\Index.vue：用于展示整体页面结构。src\router\router.js：用于配置路由信息。8.2项目初始化在VSCode编辑器的菜单栏中选择“终端”-“新建终端”命令，然后在新的终端下执行如下命令，启动项目。npmrundev项目启动后，可以使用URL地址:5173/进行访问。8.2项目初始化在浏览器中访问:5173/，初始页面效果如下图所示。项目功能开发8.3用户数量及同比增长率【任务8.3.1】任务需求要想经营好一个电商平台，必不可少的是对其数据的掌握。因此，优秀的电商平台必须定期对过往的用户数据进行详细分析。小夏是某电商平台的运营工作人员，她整理了该电商平台2020—2023年的用户数量及同比增长率。本任务需要基于用户数量及同比增长率绘制柱状图和折线图的混搭图表。用户数量及同比增长率如下表所示。年份（年）2020202120222023用户数量（人）10000250005000074000同比增长率（%）015010048任务需求任务实现

先定一个小目标！掌握用户数量及同比增长率图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\User.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。从该文件的<style>标签中找到本页面样式的相关代码。从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码，实现用户数量及同比增长率图表的制作。步骤1步骤2步骤3基于用户数量及同比增长率绘制柱状图和折线图的混搭图表青年消费者的需求分布【任务8.3.2】任务需求在经济学中有一个观点——需求决定供给。想要成为一个成功的卖家，必须明确、清晰地了解买家的需求，这样才能获得成功并达到自己的目标。因此，卖家可以根据不同年龄层消费者的需求和偏好来选择出售的产品，以提高转化率和销售量。小夏整理了青年消费者的需求分布。本任务需要基于青年消费者的需求分布绘制饼图。青年消费者的需求分布如下表所示。数据名衣食住行用户数量（人）12000320001000020000任务需求任务实现

先定一个小目标！掌握青年消费者的需求分布图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\User.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码实现青年消费者中需求分布图表的制作。步骤1步骤2基于青年消费者的需求分布绘制饼图用户状态分布【任务8.3.3】任务需求电商平台的用户管理目标之一是保留老用户和发掘新用户。在吸引新用户的同时，还需要提升他们的活跃度，使他们能够持续创造价值。一旦用户活跃度下降，用户就会逐渐远离，并最终流失。因此，可以将用户状态分为活跃用户和流失用户两种。小夏整理了2023年的用户状态分布。本任务需要基于用户状态分布绘制圆环图。用户状态分布如下表所示。数据名活跃用户流失用户用户数量（人）5700017000任务需求任务实现

先定一个小目标！掌握用户状态分布图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\User.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码实现用户状态分布图表的制作。步骤1步骤2基于用户状态分布绘制圆环图用户分类【任务8.3.4】任务需求在用户关系管理中，用户细分是一个重要的理论组成部分，也是企业为了满足用户多样化需求，以及高效率完成任务而进行的合理化规划。在电商平台上，用户细分体现在平台根据用户的需求、爱好等因素对用户进行分类，并提供针对性的措施，以确保不同用户都能够获得优质服务，并提高用户对平台的归属感。本任务需要基于用户分类绘制圆环图。用户分类如下表所示。数据名买家卖家合伙人用户数量（人）669007000100任务需求任务实现

先定一个小目标！掌握用户分类图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\User.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码实现用户分类图表的制作。步骤1步骤2基于用户分类绘制圆环图年度销售额【任务8.3.5】任务需求小正是某电商平台的财务人员，整理了该电商平台截至5月份的年度销售额为120万元，目标年度销售额为300万元。实际年度销售额除以目标年度销售额为40%，该数据为实际年度销售额达成率。本任务需要基于实际年度销售额和目标年度销售额绘制仪表盘。任务实现

先定一个小目标！掌握年度销售额图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\Commodity.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。填写的实际年度销售额和目标年度销售额。从该文件的<style>标签中找到本页面样式的相关代码。步骤1步骤2步骤3基于实际年度销售额和目标年度销售额绘制仪表盘从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码实现年度销售额图表的制作。步骤3月度销售额【任务8.3.6】任务需求电商平台月度销售额是指该平台某月售出的所有商品的总收入。如果今年5月份某电商平台售出了10万元的商品，而且发现该月的销售额比4月份的增长了，那么说明5月份的销售情况非常好，用户可能在促销活动中购买了更多的商品。反之，如果销售额下降了，则可能需要分析原因并采取相应措施来提高销售额，例如增大促销力度、优化用户体验等。本任务需要基于5月份不同类目商品的销售额绘制横向柱状图。5月份不同类目商品的销售额（单位：万元）如下表所示。类目实际销售额预计销售额类目实际销售额预计销售额潮流女装1815针织衫68时尚男装1715宝宝奶粉78羽绒服1415休闲零食58生鲜果蔬108四季茗茶48运动鞋68---任务需求任务实现

先定一个小目标！掌握月度销售额图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\Commodity.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码实现月度销售额图表的制作。步骤1步骤2基于5月份不同类目商品的销售额绘制横向柱状图平台转化率【任务8.3.7】任务需求在电商平台中，商家经常会在平台上开展一些营销活动来引入新流量，提升店铺知名度。但是很多商家没有注意到一个重要指标，那就是平台转化率，即访问者与购买者之间的比例，商家需要认识到流量的增多不代表购买力的增强，在这一阶段，商家更应该稳中求胜，不断优化自身策略，以使平台转化率升高，从而获得更好的销量。本任务需要基于平台转化率绘制漏斗图。某公司近期的平台转化率如下表所示。数据名访客收藏加购订购用户数量（人）1000600200转化率（%）1006020任务需求任务实现

先定一个小目标！掌握平台转化率图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\Commodity.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码实现平台转化率图表的制作。步骤1步骤2基于平台转化率绘制漏斗图各地区销售分析【任务8.3.8】任务需求“凡事豫则立，不豫则废”。制定正确的决策必须先进行详细的前期调研。只有深入调查和准确分析，才能胸有成竹地制定出有助于合理配置资源的决策，实现利润最大化。某电商平台管理层已初步决定调整公司战略，计划优化各地区代理资源，为此需要进行具体情况的调研。小夏整理了2023年的各地区销售分析。本任务基于各地区销售分析绘制雷达图。各地区销售分析（单位：万元）如下表所示。数据名东北西北华南华中西南销售额5060807666任务需求任务实现

先定一个小目标！掌握各地区销售分析图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\Commodity.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码实现各地区销售分析图表的制作。步骤1步骤2基于各地区销售分析绘制雷达图单日订单量【任务8.3.9】任务需求为了在日益复杂的市场环境中脱颖而出，电商企业进行订单数量分析势在必行。进行订单数量分析可以帮助企业明确自身发展优势、把握发展方向，以确保企业在采购环节中“对症下药”，保障企业利益。小夏整理了4月26日不同时间的订单数量。本任务需要基于4月26日不同时间的订单数量绘制区域面积图。4月26日不同时间的订单数量如下表所示。时间订单数量（单）时间订单数量（单）时间订单数量（单）10:0020313:0020016:0031011:0026014:0013017:0012012:0017015:00260--任务需求任务实现

先定一个小目标！掌握单日订单量图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\Order.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。从该文件的<style>标签中找到本页面样式的相关代码。从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码实现单日订单量图表的制作。步骤1步骤2步骤3基于4月26日不同时间的订单数量绘制区域面积图不同订单状态下的订单数量【任务8.3.10】任务需求当用户在电商平台提交订单并付款后，电商平台通常会按照以下流程进行处理。①电商平台通知商家发货。②商家将商品打包后交给物流公司进行寄送，此时该商品的订单在平台上的状态为“已揽收”。③待物流公司开始寄送时，该商品的订单在平台上的状态为“运输中”。④待用户接收到包裹时，该商品的订单在平台上的状态为“已签收”。小夏整理了某电商平台最近5天的不同订单状态下的订单数量。本任务需要基于最近5天的不同订单状态下的订单数量表绘制柱状图。最近5天的不同订单状态下的订单数量如下表所示。订单状态5月1日5月2日5月3日5月4日5月5日已揽收135398210231165已签收260157300260123运输中364292235176196任务需求任务实现

先定一个小目标！掌握不同订单状态下的订单数量图表的开发，能够独立完成代码任务实现打开src\components\subcomponents\Order.vue文件，从该文件的<template>标签中找到本任务的注释，在注释的下一行定义一个图表容器。从该文件的<script>标签中找到本任务页面逻辑的相关代码，在此基础上编写代码实现不同订单状态下的订单数量图表的制作。步骤1步骤2基于最近5天的不同订单状态下的订单数量表绘制柱状图各地区订单量分布情况【任务8.3.11】任务需求对于电商平台来说，分析各地区的订单数量非常重要，因为这有助于了解不同地区的市场需求和销售情况。小夏整理了某电商平台4月27日各地区的订单数量。本任务需要基于4月27日各地区的订单数量绘制南丁格尔图。4月27日各地区的订单数量如下表所示。西北东北西南华北华南华东200150420210400320任务需求任务实现

先定一个小目标！掌握各地区订单量