🤟致敬讀者

• 🟩感謝閱讀🟦笑口常開🟪生日快樂?早點睡覺

📘博主相關

• 🟧博主信息🟨博客首頁🟫專欄推薦🟥活動信息

---

---

📃文章前言

• 🔷文章均為學習工作中整理的筆記。
• 🔶如有錯誤請指正，共同學習進步。

---

《從零搭建Vue3項目實戰》（AI輔助搭建Vue3+ElemntPlus后臺管理項目）零基礎入門系列第十二篇（完結篇）:數據統計功能實現

從零搭建Vue3項目實戰，借助AI工具輔助學習和代碼生成，零基礎小白亦可輕松上手實現。

以下為系列篇所有文章：
《從零搭建Vue3項目實戰》零基礎入門系列第一篇:開發環境準備
《從零搭建Vue3項目實戰》零基礎入門系列第二篇:項目創建和初始化
《從零搭建Vue3項目實戰》零基礎入門系列第三篇:ElementPlus引入和應用
《從零搭建Vue3項目實戰》零基礎入門系列第四篇:登錄頁面實現
《從零搭建Vue3項目實戰》零基礎入門系列第五篇:登錄頁面優化及使用AI學習代碼
《從零搭建Vue3項目實戰》零基礎入門系列第六篇:頁面跳轉功能實現（Router的引入和使用）
《從零搭建Vue3項目實戰》零基礎入門系列第七篇:菜單欄實現
《從零搭建Vue3項目實戰》零基礎入門系列第八篇:菜單欄優化和階段項目源碼
《從零搭建Vue3項目實戰》零基礎入門系列第九篇:用戶管理功能實現
《從零搭建Vue3項目實戰》零基礎入門系列第十篇:商品管理功能實現
《從零搭建Vue3項目實戰》零基礎入門系列第十一篇:訂單管理功能實現
《從零搭建Vue3項目實戰》零基礎入門系列第十二篇（完結篇）:數據統計功能實現
《從零搭建Vue3項目實戰》零基礎入門一篇通關（AI輔助搭建Vue3+ElemntPlus后臺管理項目）

系列文章均收錄在前端vue3入門實戰專欄中，可訂閱專欄了解更多內容

---

數據統計使用echarts實現，使用柱狀圖來分析數據

使用以折線圖為例實現功能

1. 使用echarts

1.1 提問ai

如何在vue3項目中使用echarts

根據ai回答，安裝echarts
打開新的終端（Terminal）窗口，執行命令安裝echarts

1.2 安裝echarts

npm install echarts --save

注意：如果ai給出了數據統計頁面的新代碼，先不管，直接看下一步繼續提問ai生成折線圖

2. 折線圖實現

使用echarts實現折線圖，展示訂單與日期

2.1 提示詞

你是一名資深前端開發，現在已經使用vue3+elementplus搭建了一個基礎項目，需要你來實現數據統計頁面DataStatisticsView.vue組件中的代碼，使用echarts中的折線圖顯示訂單和時間，樣式盡量美觀

生成代碼如下

2.2 src/views/DataStaticsView.vue

代碼如下

<template><div><div ref="chart" style="width: 100%; height: 400px;"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';const chart = ref(null);// 模擬訂單數據
const orders = [{ time: '2023-10-01', count: 10 },{ time: '2023-10-02', count: 15 },{ time: '2023-10-03', count: 20 },{ time: '2023-10-04', count: 25 },{ time: '2023-10-05', count: 30 },{ time: '2023-10-06', count: 35 },{ time: '2023-10-07', count: 40 },
];onMounted(() => {const myChart = echarts.init(chart.value);const option = {title: {text: '訂單數量統計',left: 'center',textStyle: {fontSize: 18,fontWeight: 'bold',},},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985',},},},xAxis: {type: 'category',data: orders.map(order => order.time),axisLabel: {interval: 0,rotate: 45,fontSize: 12,},},yAxis: {type: 'value',name: '訂單數量',nameTextStyle: {fontSize: 14,},axisLabel: {formatter: '{value} 單',},},series: [{name: '訂單數量',type: 'line',data: orders.map(order => order.count),smooth: true,itemStyle: {color: '#409EFF',},areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: 'rgba(64, 158, 255, 0.5)' },{ offset: 1, color: 'rgba(64, 158, 255, 0)' },],global: false,},},},],grid: {left: '10%',right: '10%',bottom: '15%',},};myChart.setOption(option);
});
</script><style scoped></style>

2.3 頁面效果

頁面效果如下

這個模擬的數據有點不太正常，每日都比前一日多，我們修改一下數據，將后面幾個訂單量減少一些

3. 折線圖優化

修改后的代碼如下

3.1 src/views/DataStaticsView.vue

代碼

<template><div><div ref="chart" style="width: 100%; height: 400px;"></div></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';const chart = ref(null);// 模擬訂單數據
const orders = [{ time: '2025-01-01', count: 10 },{ time: '2025-01-02', count: 15 },{ time: '2025-01-03', count: 20 },{ time: '2025-01-04', count: 50 },{ time: '2025-01-05', count: 20 },{ time: '2025-01-06', count: 35 },{ time: '2025-01-07', count: 16 },
];onMounted(() => {const myChart = echarts.init(chart.value);const option = {title: {text: '訂單數量統計',left: 'center',textStyle: {fontSize: 18,fontWeight: 'bold',},},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985',},},},xAxis: {type: 'category',data: orders.map(order => order.time),axisLabel: {interval: 0,rotate: 45,fontSize: 12,},},yAxis: {type: 'value',name: '訂單數量',nameTextStyle: {fontSize: 14,},axisLabel: {formatter: '{value} 單',},},series: [{name: '訂單數量',type: 'line',data: orders.map(order => order.count),smooth: true,itemStyle: {color: '#409EFF',},areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: 'rgba(64, 158, 255, 0.5)' },{ offset: 1, color: 'rgba(64, 158, 255, 0)' },],global: false,},},},],grid: {left: '10%',right: '10%',bottom: '15%',},};myChart.setOption(option);
});
</script><style scoped></style>

3.2 優化后的頁面效果

修改后的頁面效果如下

---

4. 項目源碼（完結）

CSDN下載：前端 vue3 vue3入門實戰 從零搭建vue3+element-plus后臺管理項目 階段2項目源碼
GitHub源碼：

---

除此之外還可以按照上面的提問讓ai生成餅狀圖、柱狀圖等

以上就是數據統計功能的實現內容

---

📜文末寄語

• 🟠關注我，獲取更多內容。
• 🟡技術動態、實戰教程、問題解決方案等內容持續更新中。
• 🟢《全棧知識庫》技術社區，集結全棧各領域開發者，期待你的加入。
• 🔵?加入開發者的《專屬社群》，分享交流，技術之路不再孤獨，一起變強。
• 🟣點擊下方名片獲取更多內容🍭🍭🍭👇

---