Vue脚手架中使用Mock模拟数据、aixos实现ecahrts

一 axios二次封装

安装axios：

npm i axios

在vue脚手架的main.js全局引入（axios不是插件，不能使用Vue.use方法引入）

import http from "axios";
Vue.prototype.$http = http;

创建api/config/index.js 文件：

export default{baseUrl:{dev:'/api/',//开发环境pro:'',//生产环境}
}

在api/axios.js封装axios类：

import axios from 'axios'
import config from '../config'const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.proclass HttpRequest {constructor (baseUrl) {this.baseUrl = baseUrl}getInsideConfig() {const config = {baseUrl: this.baseUrl,header: {}}return config}interceptors (instance) {// 添加请求拦截器instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器instance.interceptors.response.use(function (response) {// 对响应数据做点什么console.log(response)return response;}, function (error) {console.log(error, 'error')// 对响应错误做点什么return Promise.reject(error);});}request(options) {const instance =  axios.create()options = { ...this.getInsideConfig(), ...options }this.interceptors(instance)return instance(options)}
}export default new HttpRequest(baseUrl)

创建data.js:

import axios from './axios'
export const getMenu=(param)=>{return axios.request({url:'/permission/getMenu',method:'post',data:param})
}

二 mock数据模拟

（1）安装

npm i mock

（2）在api/mockServerData/home.js添加

// mock数据模拟
import Mock from 'mockjs'// 图表数据
let List = []
export default {getStatisticalData: () => {//Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位for (let i = 0; i < 7; i++) {List.push(Mock.mock({苹果: Mock.Random.float(100, 8000, 0, 0),vivo: Mock.Random.float(100, 8000, 0, 0),oppo: Mock.Random.float(100, 8000, 0, 0),魅族: Mock.Random.float(100, 8000, 0, 0),三星: Mock.Random.float(100, 8000, 0, 0),小米: Mock.Random.float(100, 8000, 0, 0)}))}return {code: 20000,data: {// 饼图videoData: [{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},}}}
}

在api/mock.js添加：

import Mock from 'mockjs'
import homeApi from './mockServerData/home'
//  拦截器规则        url地址        回调函数返回具体的数据
Mock.mock('/home/getData',homeApi.getStatisticalData)

（3）在main.js中进行引入

import "../api/mock.js";

三使用

(1)在data.js添加如下代码:

export const  getData=()=>{return axios.request({url:'/home/getData',methods:'get',})
}

(2)在public/index.html页面引入echarts

<script src="./js/echarts.min.js"></script>

(3)安装element-ui（全局引入）

终端输入:

npm i element-ui -s

在main.js加上下段代码 :

import ElementUI from 'element-ui'
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI)

(4)views/home/index.vue页面:

<template><el-card style="height:280px"><div style="height:280px" ref="echarts"></div></el-card><div class="graph"><el-card style="height:260px"><div style="height:240px" ref="userEcharts"></div></el-card><el-card style="height:260px"><div style="height:240px" ref="videoEcharts"></div></el-card></div>    </template>
<script>
import {getData} from '../../../api/data.js'export default {name:'home',mounted(){getData().then(res=>{const { code, data } = res.dataif (code === 20000) {const order=data.orderDataconst xData=order.dateconst keyArray=Object.keys(order.data[0])//["苹果"，"vivo","oppo"]const series=[]keyArray.forEach(key=>{series.push({name:key,data:order.data.map(item=>item[key]),type:'line'})})const option={xAxis:{data:xData},yAxis:{},legend:{data:keyArray},series}const E=echarts.init(this.$refs.echarts) E.setOption(option)//用户图const userOption={legend:{//图例文字颜色textStyle:{color:"#333",}},grid:{left:"20%"},tooltip:{trigger:"axis",},xAxis:{type:"category",//类目轴data:data.userData.map(item=>item.date),// 坐标轴线axisLine:{lineStyle:{color:"#17b3a3"}},// 坐标轴刻度标签的相关设置axisLable:{/**interval:* 坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。                可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。 */interval:0,color:"#333"}},yAxis:[{type:"value",axisLine:{lineStyle:{color:"#17b3a3"}}}],color:["#2ec7c9","#b6a2de"],series:[{name:'新增用户',data:data.userData.map(item=>item.new),type:'bar'},{name:'活跃用户',data:data.userData.map(item=>item.active),type:'bar'}]}const U=echarts.init(this.$refs.userEcharts) U.setOption(userOption)const videoOption={tooltip:{trigger:"item"},color:["#0f78f4","#dd536b","#9462e5","#a6a6a6","#e1bb22","#39c362","#3ed1cf",],series:[{data:data.videoData,type:'pie',}]}const V=echarts.init(this.$refs.videoEcharts)V.setOption(videoOption)//根据窗口的大小变动图表 window.onresize=function(){E.resize(),U.resize(),V.resize()}}})}}
</script>
<style></style>

实现效果图：

四封装Echarts

(1)在components文件夹创建Echarts.vue,并在上面添加如下代码

<template><div ref="echart"></div>
</template>
<script>
export default {
/*折线图和柱形图代码基本结构一致，而饼图没有坐标轴，所以可以分为两类*/props: {isAxisChart: {type: Boolean,default: true},chartData: {type: Object,default() {return {xData: [],series: []}}}},watch: {chartData: {handler: function () {this.initChart()},deep: true},},methods: {initChart() {this.initChartData()if (this.echart) {this.echart.setOption(this.options)  window.onresize=function(){this.echart.resize()}} else {this.echart = echarts.init(this.$refs.echart)this.echart.setOption(this.options)   window.onresize=function(){this.echart.resize()}}},initChartData() {if (this.isAxisChart) {this.axisOption.xAxis.data = this.chartData.xDatathis.axisOption.series = this.chartData.series} else {this.normalOption.series = this.chartData.series}}},data() {return {axisOption: {// 图例文字颜色legend:{},textStyle: {color: "#333",},grid: {left: "20%",},// 提示框tooltip: {trigger: "axis",},xAxis: {type: "category", // 类目轴data: [],axisLine: {lineStyle: {color: "#17b3a3",},},axisLabel: {interval: 0,color: "#333",},},yAxis: [{type: "value",axisLine: {lineStyle: {color: "#17b3a3",},},},],color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],series: [],},normalOption: {tooltip: {trigger: "item",},color: ["#0f78f4","#dd536b","#9462e5","#a6a6a6","#e1bb22","#39c362","#3ed1cf",],series: [],},echart: null}},computed: {options () {return this.isAxisChart ? this.axisOption : this.normalOption} }
}
</script>

（2）views/home/index.vue修改代码步骤

1）引入

import Echart from '../../components/Echarts.vue'

2）修改如红方框所示

3）添加如下红方框代码

4）

折线图代码：

柱状图代码：

饼图代码：

Vue脚手架中使用Mock模拟数据、aixos实现ecahrts相关推荐

vue项目中使用mock模拟数据
一.先在vue项目中安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save ...
VUE开发环境下mock模拟数据与后端接口对接示例
在以往的前端开发中,前端严重依赖后端,必须等待后端接口开发出来才能继续开发.使用mock,可以使得前后端开发异步进行,互不影响.Mock.js 是一个模拟数据生成器,使用它可以拦截ajax请求,直接模 ...
在微信小程序项目中使用mock模拟数据
之前对mockjs做了一个介绍,以及在js.vue中拦截ajax的方法,介绍是必看的,也是一些基础 mockjs介绍总结 mockjs拦截ajax 在vue项目中使用mock拦截axios请求这一篇 ...
在vue中使用Mock模拟数据
Q:为什么进行模拟数据? A:在做开发时,后端程序没有配齐,前端人员在做vue开发时,需要自己先模拟接口,模拟数据,等到后端数据配齐,提供好接口后,将项目中的接口换一下即可一.本地加载请求静态jso ...
vue中使用mock模拟数据
1.安装mock npm install mockjs --save-dev 2.在src下创建mock目录添加mock.js文件 mock.js const Mock = require('mock ...
vite+vue3中使用mock模拟数据
1.安装mockjs和vite-plugin-mock npm i mockjs vite-plugin-mock --save-dev 2.在vite.config.ts文件中配置vite-plug ...
前端开发中使用mock模拟数据
使用mock进行模拟数据开发第一步:npm i mockjs -D 这里必须加-D,因为我们只是开发环境使用第二步:在 main.js 文件中引入mock:import '@/mock' 第三步: ...
d2admin中使用mock模拟数据
第一次在d2admin中使用mock数据,花费了好长时间才知道怎么用,所以想要记录一下,但是其实很简单,只有简单的几步比如要生成一个虚拟的流程列表数据 step1: 在src–>mock–&g ...
vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能
文章目录什么是mock vue项目引入mock mock模拟数据生成列表并模拟实现已发起表单页面表格分页功能 mock实现数据的新增 mock实现数据列表的删除列表数据批量处理(如审核通过) 总结 ...

Vue脚手架中使用Mock模拟数据、aixos实现ecahrts

一 axios二次封装

二 mock数据模拟

三使用

四封装Echarts

Vue脚手架中使用Mock模拟数据、aixos实现ecahrts相关推荐

最新文章

热门文章

Vue脚手架中使用Mock模拟数据、aixos实现ecahrts

一 axios二次封装

二 mock数据模拟

三 使用

四 封装Echarts

Vue脚手架中使用Mock模拟数据、aixos实现ecahrts相关推荐

最新文章

热门文章

三使用

四封装Echarts