《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第十二篇（完结篇）:数据统计功能实现
🤟致敬读者
- 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉
📘博主相关
- 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息
文章目录
- 《从零搭建Vue3项目实战》（AI辅助搭建Vue3+ElemntPlus后台管理项目）零基础入门系列第十二篇（完结篇）:数据统计功能实现
- 1. 使用echarts
- 1.1 提问ai
- 1.2 安装echarts
- 2. 折线图实现
- 2.1 提示词
- 2.2 src/views/DataStaticsView.vue
- 2.3 页面效果
- 3. 折线图优化
- 3.1 src/views/DataStaticsView.vue
- 3.2 优化后的页面效果
- 4. 项目源码（完结）
📃文章前言
- 🔷文章均为学习工作中整理的笔记。
- 🔶如有错误请指正，共同学习进步。
《从零搭建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生成饼状图、柱状图等
以上就是数据统计功能的实现内容
📜文末寄语
- 🟠关注我，获取更多内容。
- 🟡技术动态、实战教程、问题解决方案等内容持续更新中。
- 🟢《全栈知识库》技术社区，集结全栈各领域开发者，期待你的加入。
- 🔵加入开发者的《专属社群》，分享交流，技术之路不再孤独，一起变强。
- 🟣点击下方名片获取更多内容🍭🍭🍭👇