🤟致敬读者

• 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉

📘博主相关

• 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息

---

---

📃文章前言

• 🔷文章均为学习工作中整理的笔记。
• 🔶如有错误请指正，共同学习进步。

---

《从零搭建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生成饼状图、柱状图等

以上就是数据统计功能的实现内容

---

📜文末寄语

• 🟠关注我，获取更多内容。
• 🟡技术动态、实战教程、问题解决方案等内容持续更新中。
• 🟢《全栈知识库》技术社区，集结全栈各领域开发者，期待你的加入。
• 🔵​加入开发者的《专属社群》，分享交流，技术之路不再孤独，一起变强。
• 🟣点击下方名片获取更多内容🍭🍭🍭👇

---