Auve-data数据大屏展示（avue-echart）
Auve-data数据大屏展示（avue-echart）
Auve-data数据大屏展示（avue-echart）
- Auve-data数据大屏展示（avue-echart）
- 项目简介
- 常用组件
- 折线图 （avue-echart-line ）数据详情
- 未完待续……
项目简介
数据大屏解决方案采用vue-cli项目编写，可以完美嵌套与任何项目，此项目只是大屏的解决方案，如果想要用于生产或更多场景的支持需要自己根据情况二次开发。（摘至开发文档）
常用组件
- 图表
- 柱状图
- 折线图
- 饼图
- 象形图
- 雷达图
- 散点图
- 漏斗图
- 地图
- 文字
- 文本框
- 跑马灯
- 超链接
- 实时时间
- 媒体
- 图片
- 图片框
- 轮播图
- iframe
- video
- 指标
- 翻牌器
- 环形图
- 进度条
- 仪表盘
- 字符云
- 表格
- 选项卡
- 表格
- …
折线图 （avue-echart-line ）数据详情
{
"name": "折线图", //名称
"title": "折线图", //标题
"icon": "icon-line", //图标
"dataType": 1, //数据类型
"dataMethod": "get", //获取数据使用的HTTP请求方式 默认为GET
"dara": {
"categories": [ //类别
"苹果",
"三星",
"小米",
"oppo",
"vivo"
],
"series": [ //echart中：系列列表。每个系列通过 type 决定自己的图表类型
{
"name": "手机品牌", //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
"data": [ //系列中的数据内容数组。数组项通常为具体的数据项。
//注意，如果系列没有指定 data，并且 option 有 dataset，那么默认使用第一个 dataset。如果指定了 data，则不会再使用 dataset。
1000879,
3400879,
2300879,
5400879,
3400879
]
}
]
},
"dataFormatter": "", //数据格式换程序，由界面弹出框录入
"url": "./bar", //HTTP调用地址，用于数据更新
"time": 5000, //更新速度，默认5秒
"component": { //组件的宽高，类型，名称
"width": 600,
"height": 300,
"name": "line",
"prop": "line"
},
"option": { //配置项
"gridX": 90, //距x 轴距离
"gridY": 0, //距y 轴距离
"gridX2": 0,
"gridY2": 0,
"nameColor": "#eee", //名字的颜色
"lineColor": "#eee", //折线的颜色
"lineWidth": 5, //折线宽度
"xNameFontSize": 16, //X轴文字的大小
"yNameFontSize": 16, //y轴文字的大小
"labelShow": false, //是否显示标题
"labelShowFontSize": 14, //标签显示的字体大小
"labelShowFontWeight": 300, //标签显示的字体加粗
"yAxisInverse": false,
"xAxisInverse": false,
"xAxisShow": true,
"yAxisShow": true,
"xAxisSplitLineShow": false,
"yAxisSplitLineShow": false,
"barWidth": 30,
"barRadius": 8,
"barColor": [
{
"color1": "#83bff6",
"color2": "#188df0",
"postion": 90,
"$index": 0,
"_show": true
},
{
"color1": "#23B7E5",
"color2": "#564AA3",
"postion": 50,
"$index": 1,
"_show": true
}
],
"barMinHeight": 2
},
"left": 396, // 距左侧所处位置
"top": 469, // 距顶部所处位置
"index": "5e98029c-b7c3-4750-95c0-56eaa5a21ee9", //调用时使用的键
"zIndex": 0
}