全局请求器和响应器上加loading样式
请求发起后,开启loading效果
请求结束后,关闭loading效果
需要注意的是,开启时生成一个loading实例,关闭时把这个实例结束掉即可
import { Loading } from 'element-ui'
let loadingInstace;
在请求器中间,return config之前,加入loadingInstace = Loading.service();
在响应器中间,返回数据和返回错误之前,加入loadingInstace.close();
echarts简单实用方法
1. npm i echarts -S; //安装echarts包
2. 在需要实用的组件或页面中,script顶部引入import echarts from "echarts"
3. 模板里面,加入一个div,放图标区域<div id="charts" ref="echarts"></div>
4. 在mounted里面,请求数据,设置选项,完成渲染
let temp = await this.$http.get("/userlist");
this.tableData = temp.res;
let man = temp.res.filter(item=>{
return item.sex=="m"
}); //获取到echartsOption下面要用的数据
let woman = temp.res.filter(item=>{
return item.sex=="f"
});
let echartsOption = {
title: {
text: "注册人员性别比例"
},
tooltip: {
trigger: "item"
},
series: [
{
name: "性别",
type: "pie",
data: [
{ name: "男", value: man.length }, //这里是真正的数据
{ name: "女", value: woman.length }
]
}
]
};
const myChart = echarts.init(this.$refs.echarts); //vue里面进来避免直接操作dom
myChart.setOption(echartsOption);