Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 —— 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 —— 后台管理系统( pc端 ) 第一篇 _0.活在风浪里的博客-CSDN博客此典型项目，与企业级开发很是接近！掌握即可领悟雷电，如果你是大学生，它完全可以作为你毕业设计，毕竟你确实写过，项目开发全程采用组件化思想。适合谁1 、大学即将毕业 或者 自学前端 缺乏项目经验的2 、入职以后需要做vue 后台管理系统的3 、后端开发 没有前端经验 要做vue + java 后台管理项目的4、缺乏vue实战项目经验 基础不是很好的 本教程非常的详细 每一步都总结在md文档里...https://blog.csdn.net/m0_57904695/article/details/124823989?spm=1001.2014.3001.5501
目录
第二篇完成度
Mock模拟数据
源码:
折线图
图例
X轴
series配置数据
源码
柱状图
template
js mounted
饼图
template
js mounted
完整效果
第二篇完成度
- 接下来模拟数据写图表
- 使用 Mock可以模拟真实 API 返回，相对一大堆的官方解释，大概率要马冬梅，推荐一篇极简mock使用教程，官方文档自己百度下都有
- Mock的简单使用点击查看详情
Mock模拟数据
页面响应的数据
源码:
位置：src/mock.js
import Mock from "mockjs";
let url = "http://localhost:8080";
let list = [];
// 自调用函数
(function() {for (let i = 0; i < 7; i++) {list.push({苹果: Math.round(Math.random() * (10, 8000)),vivo: Math.round(Math.random() * (10, 8000)),oppo: Math.round(Math.random() * (10, 8000)),魅族: Math.round(Math.random() * (10, 8000)),三星: Math.round(Math.random() * (10, 8000)),小米: Math.round(Math.random() * (10, 8000))})}
}())
// 或 命名函数手动调用
// fn();// function fn() {
// for (let i = 0; i < 7; i++) {
// list.push({
// 苹果: Math.round(Math.random() * (10, 8000)),
// vivo: Math.round(Math.random() * (10, 8000)),
// oppo: Math.round(Math.random() * (10, 8000)),
// 魅族: Math.round(Math.random() * (10, 8000)),
// 三星: Math.round(Math.random() * (10, 8000)),
// 小米: Math.round(Math.random() * (10, 8000))
// })// }
// }
Mock.mock(url, "post", {code: 200,data: {// 表格数据tableData: [{name: "oppo",todayBuy: 500,monthBuy: 3500,totalBuy: 22000,},{name: "vivo",todayBuy: 300,monthBuy: 2200,totalBuy: 24000,},{name: "苹果",todayBuy: 800,monthBuy: 4500,totalBuy: 65000,},{name: "小米",todayBuy: 1200,monthBuy: 6500,totalBuy: 45000,},{name: "三星",todayBuy: 300,monthBuy: 2000,totalBuy: 34000,},{name: "魅族",todayBuy: 350,monthBuy: 3000,totalBuy: 22000,},],// 饼图tableData: [{name: "小米",value: 2999,},{name: "苹果",value: 5999,},{name: "vivo",value: 1500,},{name: "oppo",value: 1999,},{name: "魅族",value: 2200,},{name: "三星",value: 4500,},],// 柱状图userData: [{date: "周一",new: 5,active: 200,},{date: "周二",new: 10,active: 500,},{date: "周三",new: 12,active: 550,},{date: "周四",new: 60,active: 800,},{date: "周五",new: 65,active: 550,},{date: "周六",new: 53,active: 770,},{date: "周日",new: 33,active: 170,},],// 折线图orderData: {date: ["20191001","20191002","20191003","20191004","20191005","20191006","20191007",],data: list,},},
});export default url;位置：src/main.js
import Vue from "vue";
import App from "./App.vue";
import http from "axios";
import url from "./mock";import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "assets/common.css";
import "assets/reset.css";// 全局注册el
Vue.use(ElementUI);
// 挂载到原型上 在页面就可以this.$http(),也可以单独在页面引入
Vue.prototype.$http = http;
// mock公共地址
Vue.prototype.$url = url;// 时间过滤器
Vue.filter("formateTime", (val) => {const dt = new Date(val);const y = dt.getFullYear();const m = (dt.getMonth() + 1 + "").padStart(2, "0");const d = (dt.getDate() + "").padStart(2, "0");const hh = (dt.getHours() + "").padStart(2, "0");const mm = (dt.getMinutes() + "").padStart(2, "0");const ss = (dt.getSeconds() + "").padStart(2, "0");// yyyy-mm-dd hh:mm:ssreturn `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
});//使用过滤器就会保留两位小数 在页面使用 {{price| formatePrice}}
Vue.filter("formatePrice", (val) => {//console.log(val) // 过滤的数据return val.toFixed(2);
});new Vue({router,store,render: (h) => h(App),
}).$mount("#app");折线图
- echarts实例需要获取dom，所以需要在mounted中初始化
图例
X轴
series配置数据
- name和data一样都需要遍历
data=orderData.map(item=>item[key])
源码
mounted() {//echarts实例需要获取dom，所以需要在mounted中初始化this.$http.post(this.$url).then((res) => {// console.log(res);const { data, code } = res.data;if (code != 200) {this.$message.error("获取数据失败");}console.log(data);const orderData = data.orderData.data;const orderDate = data.orderData.date;// Object.keys()得到数组的集合const keyArray = Object.keys(orderData[0]);// console.log(keyArray);const series = [];keyArray.map((key) => {series.push({name: key, //series应该和legend图例一样// line pie bar 线 柱 饼type: "line",// data应该与name一样，不一样会报图例与数据不一样，所以循环数据拿到对应的keydata: orderData.map((item) => {return item[key];}),});});var myChart = echarts.init(document.getElementById("eacharts"));// 指定图表的配置项和数据var option = {title: {text: "折线图 ",},// 提示框组件tooltip: {},// 最上面的X轴图例legend: {data: series.name,},// X轴xAxis: {data: orderDate,},// y轴yAxis: {},// 所需要展示的数据,需要配置遍历series: series,};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);});},柱状图
template
js mounted
饼图
- 毫无难度的饼图
template
js mounted
完整效果
更新中...
2022/5/19 22:25
祝大家2022越来越强
Vue项目实战 —— 后台管理系统( pc端 ) 第三篇相关推荐
- Vue项目实战 —— 后台管理系统( pc端 ) 第一篇
前期回顾 我只写注释 -- 让Ai写代码_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_0.活在风浪里的博客-CSDN博客https://b ...
- Vue项目实战 —— 后台管理系统( pc端 )
前期回顾 我只写注释 -- 让Ai写代码_的博客-CSDN博客前期回顾 Vue项目实战 -- 哔哩哔哩移动端开发-- 第二篇_的博客-CSDN博客https://blog.csdn.net/m0_57 ...
- vue项目实现大屏PC端字体自适应
vue项目实现大屏PC端字体自适应 我们字体自适应选择使用rem作为单位,通过监听窗口大小的变化,更新1rem的对应的px数来实现字体自适应. 注意该方法,我们需要在APP.vue文件中实现, 首先A ...
- [ABP项目实战]-后台管理系统-目录
学习ABP也有一段时间了,但是总是学习了后面的忘记了前面的,为了巩固所学到的知识以及记录所学到的东西,因此有了本系列的诞生. ABP ASP.NET Boilerplate Project(ABP.N ...
- Vue 项目应用 —— 后台管理系统模板
登陆页效果预览 目前只实现了简单的登录和客户档案的添加和显示功能,后面会进一步更新功能. 用户名:dk 密码:123 源码:https://github.com/dk-lan/vue... 项目说明 ...
- vue3-ts-cms（项目实战-后台管理系统）(二、登录页面)
登录页面 1.首先搭建页面结构 页面结构 页面结构代码 登录逻辑 点击登录按钮首先验证账号密码是否符合定义的规则,如果符合再判断是否需要记住密码.如果符合规则的话开始执行真正的登录逻辑的代码.以下这些 ...
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录 前言完 效果图 : 登录含签权 注册带正则 个人中心 下拉加载更多主页 修改个人中心 视频播放加关注+收藏 评论盖楼A回复B B回复C C回复A类似 项目开始 封装登录.注册 封装登录 从零到一 ...
- Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
前期回顾 30秒学会 -- <获取验证码基本操作>_0.活在风浪里的博客-CSDN博客前期回顾 懒人必备 -- 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用, ...
- Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
最新文章
- SLAM的通用框架：GSLAM
- php 指定表格字体大小_PHPExcel根据单元格值设置字体/背景颜色
- 解决安装jdk后使用cmd校验出现has value '1.8',but'1.7' is required.的方法
- 关于云计算最新趋势的讨论
- “error LNK1169: 找到一个或多个多重定义的符号”的解决方法
- 深度学习之生成对抗网络（8）WGAN-GP实战
- Entity Framework Core的贴心：优雅处理带默认值的数据库字段
- mysql 5.7 binlog 压缩_mysql binlog压缩处理
- 读取html文件转换字符串,读取HTML文件，生成HTML字符串
- 数据挖掘 numpy进阶之技巧和提示
- 《羊了个羊》创始人被母校制成展牌......
- PCIe简介及引脚定义
- 树莓派 vnc Cannot currently show the desktop
- html 圆圈项目符号,html5 项目符号
- wxpython使用_wxpython的demo使用
- 如何制作出漂亮精致的思维导图？MindNow来帮你
- ioc和aop全称是什么
- LightOJ - 1395 A Dangerous Maze (II) —— 期望
- 英语单词（持续更新）
- 互联网产品经理职业规划图(转载)