卡比记账项目——Axios可视化图表

89 阅读2分钟

用户登录的侧边栏

之前做好的侧边栏需求是可以退出登录并且显示当前登录者的信息。

使用一个ref变量来标记用户的登录信息。

在挂载的时候发出请求,得到当前登录用户的信息。

截屏2022-11-27 13.23.36.png

显示判断:

截屏2022-11-27 13.24.16.png

截屏2022-11-27 13.24.40.png

然后点击退出登录的地方添加一个点击事件,弹窗提问是否退出,如果选择退出就删掉存好的jwt用户信息。

截屏2022-11-27 13.25.19.png

图表

来到统计图表界面,发现了一个bug,切换tab时发现了无法渲染图表的问题。 经过log测试,发现渲染了四次,但是并不能正确展示图表。 这可能是缓存问题,因为开始写的时候CSS都是一样的 在div中添加key,这样就不会缓存了

截屏2022-11-27 14.01.11.png

但是这样会造成强制渲染的问题。所以添加一个选项是否重新渲染的变量设置为true就是强制渲染,false就不会自动渲染。

截屏2022-11-27 14.02.47.png

如果有rerender选项就添加key不缓存重新渲染,否则就像之前一样缓存渲染。 截屏2022-11-27 14.03.59.png

添加上属性: 截屏2022-11-27 14.05.00.png

bug解决。

数据转换

一般来说从后台直接拿到的数据并不是echart直接能用的数据,所以需要做一下数据转换。 先mock一下数据,

截屏2022-11-27 14.18.49.png

Chart挂载时请求mock的数据,此时data1时拿到的mock的原始数据,是对象。 截屏2022-11-27 14.23.25.png

把这个对象data1通过computed转换成数组的形式,并且传输给折线图。 截屏2022-11-27 14.24.09.png

截屏2022-11-27 14.24.38.png

折线图接收 截屏2022-11-27 14.24.53.png

截屏2022-11-27 14.25.08.png

挂载时data是空数组,是渲染不出图表的,所以需要用watch来监听data的变化,实现重新渲染。 截屏2022-11-27 14.26.54.png

对折线图、饼图、条形图进行优化 效果如下

截屏2022-11-28 14.45.25.png