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保存到sessionStoragewindow.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);