用户登录的侧边栏
之前做好的侧边栏需求是可以退出登录并且显示当前登录者的信息。
使用一个ref变量来标记用户的登录信息。
在挂载的时候发出请求,得到当前登录用户的信息。
显示判断:
然后点击退出登录的地方添加一个点击事件,弹窗提问是否退出,如果选择退出就删掉存好的jwt用户信息。
图表
来到统计图表界面,发现了一个bug,切换tab时发现了无法渲染图表的问题。 经过log测试,发现渲染了四次,但是并不能正确展示图表。 这可能是缓存问题,因为开始写的时候CSS都是一样的 在div中添加key,这样就不会缓存了
但是这样会造成强制渲染的问题。所以添加一个选项是否重新渲染的变量设置为true就是强制渲染,false就不会自动渲染。
如果有rerender选项就添加key不缓存重新渲染,否则就像之前一样缓存渲染。
添加上属性:
bug解决。
数据转换
一般来说从后台直接拿到的数据并不是echart直接能用的数据,所以需要做一下数据转换。 先mock一下数据,
Chart挂载时请求mock的数据,此时data1时拿到的mock的原始数据,是对象。
把这个对象data1通过computed转换成数组的形式,并且传输给折线图。
折线图接收
挂载时data是空数组,是渲染不出图表的,所以需要用watch来监听data的变化,实现重新渲染。
对折线图、饼图、条形图进行优化 效果如下