axios 和 Echarts的使用

实现登录
① 通过 axios 调用登录验证接口
② 登录成功之后保持用户 token 信息
③ 跳转到项目主页
const {data: res } = await this.http.post(′login′,this.loginForm)if(res.meta.status!==200)returnthis.http.post('login', this.loginForm) if (res.meta.status !== 200)return this.http.post(′login′,this.loginForm)if(res.meta.status!==200)returnthis.message.error(‘登录失败！’)
// 提示登录成功
this.message.success(′登录成功！′)//把登录成功的token保存到sessionStoragewindow.sessionStorage.setItem(′token′,res.data.token)//使用编程式导航，跳转到后台主页this.message.success('登录成功！') // 把登录成功的token保存到sessionStorage window.sessionStorage.setItem('token', res.data.token) // 使用编程式导航，跳转到后台主页 this.message.success(′登录成功！′)//把登录成功的token保存到sessionStoragewindow.sessionStorage.setItem(′token′,res.data.token)//使用编程式导航，跳转到后台主页this.router.push(’/home’)

通过接口获取菜单数据
通过axios请求拦截器添加token，保证拥有获取数据的权限
// axios请求拦截
axios.interceptors.request.use(config => {
// 为请求头对象，添加 Token 验证的 Authorization 字段
config.headers.Authorization = window.sessionStorage.getItem(‘token’)
return config
})

Echarts 是数据驱动， 只要用于图表
// 1.导入echarts
import echarts from “echarts”;
// js原生库 提供了合并的方法
import _ from “lodash”;

<div id="main" style="width: 800px;height:500px;"></div>

渲染完毕

//3. 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById("main"));
const { data: res } = await this.$http.get("reports/type/1");
if (res.meta.status !== 200) {
return this.$message.error("获取折线图数据失败");
}

// 4.准备数据和配置项
// 合并数据 res.data和options 数组和普通对象会递归合并

const reslut = _.merge(res.data, this.options);

// 5.展示数据

myChart.setOption(reslut);