数据大屏解决方案采用vue-cli项目编写,可以完美嵌套与任何项目,此项目只是大屏的解决方案,如果想要用于生产或更多场景的支持需要自己根据情况二次开发,在线文档。
- 在线api(本项目采用了mock拦截方式模拟,具体文件/mock/index.js)
- 静态数据
- SQL数据库
- ...
执行npm run lib 打出对应的包(public/lib)
- index.css
- index.umd.min.js
引入相应的文件即可,可以参考public/view.html文件,传入对应的id,打开对应的大屏幕,例如view.html?id=xxxx - 例子1
- 例子2
- 图表
- 万能自定义组件
- 万能Echart组件
- dataV
- 柱状图
- 折线图
- 饼图
- 象形图
- 雷达图
- 散点图
- 漏斗图
- 地图
- 文字
- 文本框
- 跑马灯
- 超链接
- 实时时间
- 媒体
- 图片
- 图片框
- 轮播图
- iframe
- video
- 指标
- 翻牌器
- 环形图
- 进度条
- 仪表盘
- 字符云
- 表格
- 选项卡
- 表格
- ...
- 组件配置
- /src/components/test/index
- /src/components/test/option
- /src/components/index.js
- 添加组件
- /src/option/base.js
- /src/option/components.js
- vue //底层核心包
- axios //发送ajax请求数据的
- element-ui //底层ui支持包
- echart //底层的图表支持包
- echarts-wordcloud //字浮云支持包
- avue //大屏组件支持包
- swiper //滑动和轮播支持包
- Sortable和vuedraggable // 图拽支持包
//nginx为例子
location /{
root /data/avue/avue-data;
index index.html;
error_page 404 /index.html; //根据vue路由特性,这句一定要配置,否则会出现404问题
}