基于vue-grid-layout 实现自定义首页视图
基本需求:左侧为视图区域,右侧为可配置的界面,通过拖拽的方式,实现可配置的首页图表
最终实现效果为下图
项目支持:
- 通过拖拽的方式,实现了操作上的简单、方便(技术难点需要动态的计算可拖拽视图的放置位置,目前没有实现拖那放那,而是依次往后放)
- 每个小卡片的内容实现了自适应大小,适配各种屏幕
- 每个图表的类型支持自定义配置,同一组数据可展示为不同的视图
- 柱状图支持筛选(前端缓存数据、进行前、后、或者全部的展示)
- 支持全屏预览
- 支持下载(echarts视图官方支持下载,非echarts视图利用html2canvas)
- 参考了企业微信中的自定义KPI的功能
核心依赖
- vue-grid-layout
- vue动态组件