ECharts數據可視化課件 第8章 項目實戰(zhàn)-電商數據可視化系統(tǒng)

第8章項目實戰(zhàn)——電商數據可視化系統(tǒng)《ECharts數據可視化》學習目標/Target熟悉項目的整體結構，能夠歸納項目的整體結構掌握用戶數量及同比增長率圖表的開發(fā)，能夠獨立完成代碼掌握青年消費者的需求分布圖表的開發(fā)，能夠獨立完成代碼掌握用戶狀態(tài)分布圖表的開發(fā)，能夠獨立完成代碼掌握用戶分類圖表的開發(fā)，能夠獨立完成代碼學習目標/Target掌握年度銷售額圖表的開發(fā)，能夠獨立完成代碼掌握月度銷售額圖表的開發(fā)，能夠獨立完成代碼掌握平臺轉化率圖表的開發(fā)，能夠獨立完成代碼掌握各地區(qū)銷售分析圖表的開發(fā)，能夠獨立完成代碼學習目標/Target掌握單日訂單量圖表的開發(fā)，能夠獨立完成代碼掌握不同訂單狀態(tài)下的訂單數量圖表的開發(fā)，能夠獨立完成代碼掌握各地區(qū)訂單量分布情況圖表的開發(fā)，能夠獨立完成代碼掌握訂單配送方式分布情況圖表的開發(fā)，能夠獨立完成代碼章節(jié)概述/Summary通過之前的學習，相信讀者已經能夠熟練掌握如何使用ECharts繪制圖表。為了幫助讀者更深入地理解與應用ECharts，本章將帶領讀者綜合運用所學知識開發(fā)一個電商數據可視化系統(tǒng)，詳細講解電商數據可視化系統(tǒng)的開發(fā)過程。目錄/Contents8.18.28.3項目介紹項目初始化項目功能開發(fā)項目介紹8.18.1項目介紹

先定一個小目標！熟悉項目的整體結構，能夠歸納項目的整體結構本項目是一個電商數據可視化系統(tǒng)，該系統(tǒng)通過數據可視化的方式展示電商數據，包括銷售額、訂單量、用戶狀態(tài)分布等，從而幫助平臺管理人員更好地了解電商業(yè)務并做出更明智的決策。8.1項目介紹8.1項目介紹本項目的開發(fā)環(huán)境具體如下。操作系統(tǒng)：Windows10或更高版本。運行環(huán)境：Node.js16.17.0。前端框架：Vue.js3.2.47。數據可視化工具：ECharts5.4.1。瀏覽器：Chrome。編輯器：VisualStudioCode。本項目主要分為以下3個模塊。用戶分析模塊銷售分析模塊訂單分析模塊8.1項目介紹用戶分析模塊用于展示用戶信息，用戶分析模塊的頁面效果如下圖所示。8.1項目介紹1.用戶分析模塊用戶分析模塊中的4張圖表用于從不同角度展示用戶數據，接下來對各張圖表進行簡要介紹。用戶數量及同比增長率：使用柱狀圖和折線圖的混搭圖表，展示該電商平臺在2020—2023年期間用戶數量逐年遞增的趨勢，同時也能反映同比增長率的變化趨勢。青年消費者的需求分布：通過餅圖展示該電商平臺中青年消費者的需求分布。用戶狀態(tài)分布：通過圓環(huán)圖展示該電商平臺中活躍用戶和流失用戶的分布情況。用戶分類：通過圓環(huán)圖展示該電商平臺中不同分類的用戶數量。8.1項目介紹1.用戶分析模塊銷售分析模塊用于展示商品銷售信息，銷售分析模塊頁面效果如下圖所示。8.1項目介紹2.銷售分析模塊銷售分析模塊中的4張圖表從不同角度展示商品銷售數據，接下來對各張圖表進行簡要介紹。年度銷售額：通過儀表盤展示該電商平臺年度銷售額的達成率。月度銷售額：通過橫向柱狀圖展示該電商平臺中5月份不同類目商品的實際銷售額和預計銷售額。平臺轉化率：通過漏斗圖展示該電商平臺中訪客的轉化率，轉化率為20%。各地區(qū)銷售分析：通過雷達圖展示該電商平臺中不同地區(qū)的銷售能力，可以非常清晰地展示各個地區(qū)的銷售情況。8.1項目介紹2.銷售分析模塊訂單分析模塊用于展示該電商平臺中訂單數據，訂單分析模塊頁面效果如下圖所示。8.1項目介紹3.訂單分析模塊訂單分析模塊中的4張圖表從不同角度展示電商平臺中的訂單數據，接下來對各張圖表進行簡要介紹。單日訂單量：通過區(qū)域面積圖展示該電商平臺4月26日不同時間的訂單數量。不同訂單狀態(tài)下的訂單數量：通過柱狀圖展示該電商平臺中最近5天不同訂單狀態(tài)下的訂單數量，可以直觀地反映訂單狀態(tài)。各地區(qū)訂單量占比情況：通過南丁格爾圖展示該電商平臺4月27日各地區(qū)的訂單數量。訂單配送方式分布情況：通過餅圖展示該電商平臺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編輯器的菜單欄中選擇“終端”-“新建終端”命令，然后在新的終端下執(zhí)行如下命令，啟動項目。npmrundev項目啟動后，可以使用URL地址:5173/進行訪問。8.2項目初始化在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。項目功能開發(fā)8.3用戶數量及同比增長率【任務8.3.1】任務需求要想經營好一個電商平臺，必不可少的是對其數據的掌握。因此，優(yōu)秀的電商平臺必須定期對過往的用戶數據進行詳細分析。小夏是某電商平臺的運營工作人員，她整理了該電商平臺2020—2023年的用戶數量及同比增長率。本任務需要基于用戶數量及同比增長率繪制柱狀圖和折線圖的混搭圖表。用戶數量及同比增長率如下表所示。年份（年）2020202120222023用戶數量（人）10000250005000074000同比增長率（%）015010048任務需求任務實現

先定一個小目標！掌握用戶數量及同比增長率圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\User.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。從該文件的<style>標簽中找到本頁面樣式的相關代碼。從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼，實現用戶數量及同比增長率圖表的制作。步驟1步驟2步驟3基于用戶數量及同比增長率繪制柱狀圖和折線圖的混搭圖表青年消費者的需求分布【任務8.3.2】任務需求在經濟學中有一個觀點——需求決定供給。想要成為一個成功的賣家，必須明確、清晰地了解買家的需求，這樣才能獲得成功并達到自己的目標。因此，賣家可以根據不同年齡層消費者的需求和偏好來選擇出售的產品，以提高轉化率和銷售量。小夏整理了青年消費者的需求分布。本任務需要基于青年消費者的需求分布繪制餅圖。青年消費者的需求分布如下表所示。數據名衣食住行用戶數量（人）12000320001000020000任務需求任務實現

先定一個小目標！掌握青年消費者的需求分布圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\User.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼實現青年消費者中需求分布圖表的制作。步驟1步驟2基于青年消費者的需求分布繪制餅圖用戶狀態(tài)分布【任務8.3.3】任務需求電商平臺的用戶管理目標之一是保留老用戶和發(fā)掘新用戶。在吸引新用戶的同時，還需要提升他們的活躍度，使他們能夠持續(xù)創(chuàng)造價值。一旦用戶活躍度下降，用戶就會逐漸遠離，并最終流失。因此，可以將用戶狀態(tài)分為活躍用戶和流失用戶兩種。小夏整理了2023年的用戶狀態(tài)分布。本任務需要基于用戶狀態(tài)分布繪制圓環(huán)圖。用戶狀態(tài)分布如下表所示。數據名活躍用戶流失用戶用戶數量（人）5700017000任務需求任務實現

先定一個小目標！掌握用戶狀態(tài)分布圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\User.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼實現用戶狀態(tài)分布圖表的制作。步驟1步驟2基于用戶狀態(tài)分布繪制圓環(huán)圖用戶分類【任務8.3.4】任務需求在用戶關系管理中，用戶細分是一個重要的理論組成部分，也是企業(yè)為了滿足用戶多樣化需求，以及高效率完成任務而進行的合理化規(guī)劃。在電商平臺上，用戶細分體現在平臺根據用戶的需求、愛好等因素對用戶進行分類，并提供針對性的措施，以確保不同用戶都能夠獲得優(yōu)質服務，并提高用戶對平臺的歸屬感。本任務需要基于用戶分類繪制圓環(huán)圖。用戶分類如下表所示。數據名買家賣家合伙人用戶數量（人）669007000100任務需求任務實現

先定一個小目標！掌握用戶分類圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\User.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼實現用戶分類圖表的制作。步驟1步驟2基于用戶分類繪制圓環(huán)圖年度銷售額【任務8.3.5】任務需求小正是某電商平臺的財務人員，整理了該電商平臺截至5月份的年度銷售額為120萬元，目標年度銷售額為300萬元。實際年度銷售額除以目標年度銷售額為40%，該數據為實際年度銷售額達成率。本任務需要基于實際年度銷售額和目標年度銷售額繪制儀表盤。任務實現

先定一個小目標！掌握年度銷售額圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\Commodity.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。填寫的實際年度銷售額和目標年度銷售額。從該文件的<style>標簽中找到本頁面樣式的相關代碼。步驟1步驟2步驟3基于實際年度銷售額和目標年度銷售額繪制儀表盤從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼實現年度銷售額圖表的制作。步驟3月度銷售額【任務8.3.6】任務需求電商平臺月度銷售額是指該平臺某月售出的所有商品的總收入。如果今年5月份某電商平臺售出了10萬元的商品，而且發(fā)現該月的銷售額比4月份的增長了，那么說明5月份的銷售情況非常好，用戶可能在促銷活動中購買了更多的商品。反之，如果銷售額下降了，則可能需要分析原因并采取相應措施來提高銷售額，例如增大促銷力度、優(yōu)化用戶體驗等。本任務需要基于5月份不同類目商品的銷售額繪制橫向柱狀圖。5月份不同類目商品的銷售額（單位：萬元）如下表所示。類目實際銷售額預計銷售額類目實際銷售額預計銷售額潮流女裝1815針織衫68時尚男裝1715寶寶奶粉78羽絨服1415休閑零食58生鮮果蔬108四季茗茶48運動鞋68---任務需求任務實現

先定一個小目標！掌握月度銷售額圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\Commodity.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼實現月度銷售額圖表的制作。步驟1步驟2基于5月份不同類目商品的銷售額繪制橫向柱狀圖平臺轉化率【任務8.3.7】任務需求在電商平臺中，商家經常會在平臺上開展一些營銷活動來引入新流量，提升店鋪知名度。但是很多商家沒有注意到一個重要指標，那就是平臺轉化率，即訪問者與購買者之間的比例，商家需要認識到流量的增多不代表購買力的增強，在這一階段，商家更應該穩(wěn)中求勝，不斷優(yōu)化自身策略，以使平臺轉化率升高，從而獲得更好的銷量。本任務需要基于平臺轉化率繪制漏斗圖。某公司近期的平臺轉化率如下表所示。數據名訪客收藏加購訂購用戶數量（人）1000600200轉化率（%）1006020任務需求任務實現

先定一個小目標！掌握平臺轉化率圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\Commodity.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼實現平臺轉化率圖表的制作。步驟1步驟2基于平臺轉化率繪制漏斗圖各地區(qū)銷售分析【任務8.3.8】任務需求“凡事豫則立，不豫則廢”。制定正確的決策必須先進行詳細的前期調研。只有深入調查和準確分析，才能胸有成竹地制定出有助于合理配置資源的決策，實現利潤最大化。某電商平臺管理層已初步決定調整公司戰(zhàn)略，計劃優(yōu)化各地區(qū)代理資源，為此需要進行具體情況的調研。小夏整理了2023年的各地區(qū)銷售分析。本任務基于各地區(qū)銷售分析繪制雷達圖。各地區(qū)銷售分析（單位：萬元）如下表所示。數據名東北西北華南華中西南銷售額5060807666任務需求任務實現

先定一個小目標！掌握各地區(qū)銷售分析圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\Commodity.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼實現各地區(qū)銷售分析圖表的制作。步驟1步驟2基于各地區(qū)銷售分析繪制雷達圖單日訂單量【任務8.3.9】任務需求為了在日益復雜的市場環(huán)境中脫穎而出，電商企業(yè)進行訂單數量分析勢在必行。進行訂單數量分析可以幫助企業(yè)明確自身發(fā)展優(yōu)勢、把握發(fā)展方向，以確保企業(yè)在采購環(huán)節(jié)中“對癥下藥”，保障企業(yè)利益。小夏整理了4月26日不同時間的訂單數量。本任務需要基于4月26日不同時間的訂單數量繪制區(qū)域面積圖。4月26日不同時間的訂單數量如下表所示。時間訂單數量（單）時間訂單數量（單）時間訂單數量（單）10:0020313:0020016:0031011:0026014:0013017:0012012:0017015:00260--任務需求任務實現

先定一個小目標！掌握單日訂單量圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\Order.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。從該文件的<style>標簽中找到本頁面樣式的相關代碼。從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼實現單日訂單量圖表的制作。步驟1步驟2步驟3基于4月26日不同時間的訂單數量繪制區(qū)域面積圖不同訂單狀態(tài)下的訂單數量【任務8.3.10】任務需求當用戶在電商平臺提交訂單并付款后，電商平臺通常會按照以下流程進行處理。①電商平臺通知商家發(fā)貨。②商家將商品打包后交給物流公司進行寄送，此時該商品的訂單在平臺上的狀態(tài)為“已攬收”。③待物流公司開始寄送時，該商品的訂單在平臺上的狀態(tài)為“運輸中”。④待用戶接收到包裹時，該商品的訂單在平臺上的狀態(tài)為“已簽收”。小夏整理了某電商平臺最近5天的不同訂單狀態(tài)下的訂單數量。本任務需要基于最近5天的不同訂單狀態(tài)下的訂單數量表繪制柱狀圖。最近5天的不同訂單狀態(tài)下的訂單數量如下表所示。訂單狀態(tài)5月1日5月2日5月3日5月4日5月5日已攬收135398210231165已簽收260157300260123運輸中364292235176196任務需求任務實現

先定一個小目標！掌握不同訂單狀態(tài)下的訂單數量圖表的開發(fā)，能夠獨立完成代碼任務實現打開src\components\subcomponents\Order.vue文件，從該文件的<template>標簽中找到本任務的注釋，在注釋的下一行定義一個圖表容器。從該文件的<script>標簽中找到本任務頁面邏輯的相關代碼，在此基礎上編寫代碼實現不同訂單狀態(tài)下的訂單數量圖表的制作。步驟1步驟2基于最近5天的不同訂單狀態(tài)下的訂單數量表繪制柱狀圖各地區(qū)訂單量分布情況【任務8.3.11】任務需求對于電商平臺來說，分析各地區(qū)的訂單數量非常重要，因為這有助于了解不同地區(qū)的市場需求和銷售情況。小夏整理了某電商平臺4月27日各地區(qū)的訂單數量。本任務需要基于4月27日各地區(qū)的訂單數量繪制南丁格爾圖。4月27日各地區(qū)的訂單數量如下表所示。西北東北西南華北華南華東200150420210400320任務需求任務實現

先定一個小目標！掌握各地區(qū)訂單量