一种变通的方式是，依然通过 Sea.js 配置和加载 Mock.js，然后访问全局变量 Mock
在vue项目中创建mock文件 引入axios
mock/api
import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 请求拦截器
axios.interceptors.request.use(function(config) {
return config;
}, function(error) {
return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(function(response) {
return response;
}, function(error) {
return Promise.reject(error);
})
// 封装axios的post请求
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
})
.catch((error) => {
reject(error);
})
})
}
export default {
mockAjax(url, params) {
return fetch(url, params);
}
}
mock/index
// 引入mockjs
const Mock = require('mockjs');
console.log(Mock,"Mock");
// 首页echarts
var echartsTask = {},
echartsData = {},
middleData =[],
topRight = []
Mock.mock(/news\/goods/, 'post', (params) => {
var info = JSON.parse(params.body)
console.log(info,"参数");
echartsTask = {
name: "试验任务",
left: "center",
data: [
{ value: 735, name: "待分解735" },
{ value: 510, name: "审核中" },
{ value: 434, name: "分解通过" },
{ value: 335, name: "分解未通过" },
],
},
echartsData= {
name: "试验数据",
left: "center",
data: [
{ value: 10, name: "待提交" },
{ value: 4, name: "审核中" },
{ value: 5, name: "审核未通过" },
{ value: 33, name: "数据封存" },
],
},
middleData= [
{
name: "履历本文件",
left: "left",
data: [
{ value: 20, name: "待生成" },
{ value: 10, name: "待封存" },
{ value: 8, name: "已封存" },
],
},
{
name: "合格证",
left: "left",
data: [
{ value: 20, name: "待生成" },
{ value: 8, name: "已生成" },
],
},
{
name: "实验报告文件",
left: "left",
data: [
{ value: 20, name: "待生成" },
{ value: 10, name: "待封存" },
{ value: 8, name: "已封存" },
],
},
]
topRight= [
{
name: "履历本",
val: 3,
},
{
name: "履历本补页",
val: 1,
},
{
name: "实验报告",
val: 0,
},
{
name: "合格证",
val: 1,
},
{
name: "合格证补页",
val: 3,
},
]
return {
'code': '200',
'message': 'success',
'data': {
'data': {
echartsTask,
echartsData,
middleData,
topRight
},
}
}
})
// 获取 mock.Random 对象
const Random = Mock.Random;
const dataList = []
//用于接受生成数据的数组
for (let i = 0; i < 50; i++) { // 可自定义生成的个数
const template = {
username: Random.cname(),
name: Random.csentence(5, 30),
class: Random.csentence(5, 10),
date: Random.date() + ' ' + Random.time(),
date1: Random.date() + ' ' + Random.time()
}
dataList.push(template)
}
Mock.mock(/news\/index/, 'post', (params) => { //三个参数。第一个路径，第二个请求方式post/get，第三个回调，返回值
var info = JSON.parse(params.body)
var [index, size, total] = [info.pageNum, info.pageSize, dataList.length]
var len = total / size
var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
var newDataList = dataList.slice((index - 1) * size, index * size)
return {
'code': '200',
'message': 'success',
'data': {
'pageNum': index,
'pageSize': size,
'content': newDataList,
'total': total,
'totalPages': totalPages,
}
}
})
vue 入口文件main
require('./pages/home/mock');
在使用的页面引入api
import api from "./mock/api.js";
api.mockAjax("/news/goods", { time: 0 }).then((res) => {
console.log(res);
if(res.code == 200){
this.loading = false
let {data} = res.data
this.echartsTask = data.echartsTask
this.echartsData = data.echartsData
this.middleData = data.middleData
this.topRight = data.topRight
}
})
vue 引入echarts
<div id="myChart" :style="{ width: '74%', height: '300px' }"></div>
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
this.charts = echarts.init(this.$refs.barChart);
drawLine(query) {
let myChart = this.$echarts.init(
document.getElementById("myChart")
);
// 绘制图表
myChart.setOption({
title: {
text: "训练趋势（人次）",
left: "left",
padding: [5, 10, 5, 5],
// subtext: '训练趋势（人次）'
},
tooltip: { trigger: "axis" },
xAxis: {
data: this.coordinateX,
},
grid: {
x: 25,
y: 25,
x2: 5,
y2: 20,
borderWidth: 1,
top: "15%",
left: "3%",
containLable: true,
},
yAxis: {},
series: [
{
name:
(this.trainType == 1 ? "考试" : "训练") + "任务量",
type: "bar",
barWidth: 20,
itemStyle: {
color: "#02a7f0",
},
//||[10, 20, 10, 20, 53, 12,19,27,59,80,32]
data: this.coordinateY,
},
],
});
},
