首页中部的统计图部分需要放在homenew vue文件中。为了实现这一功能,我们需要使用echarts插件,
首页中部的统计图部分需要放在homenew.vue文件中。为了实现这一功能,我们需要使用echarts插件,它比element plus自带的图表功能更为专业。
首先,需要安装echarts插件,执行以下命令:
npm install echarts --save登录后复制
由于统计图组件的代码量较大,我们可以创建一个独立的Vue文件来存放这些代码,然后像菜单组件一样将其引入到首页中。
打开新建的组件文件,进行以下编辑(以下代码基于echarts官网示例并进行了修改,视觉效果出众但也较为复杂,大家可以直接复制使用。未来我们会将数据部分通过接口获取,而样式细节等无需深究):
(使用次数由系统自动在每月1日进行统计)