无代码平台之可视化大屏

无代码平台就是一个一个的组件当成积木，通过拖拉拽的方式搭建起来，构建自己的应用。前端有前端组件，如果不够自己增加组件，后端有后端的组件，如果不够自己增加组件，用统一的组件间传参、组件穿透、前后端穿透等技术，组建出自己希望的个性化功能，和复杂的业务场景。

今天我们利用这两天刚增加的可视化大屏组件，做一个大屏Demo：

1、创建画面

2、在画面中创建工作区

这里需要设置padding:0

3、在工作区下增加大屏组件

预览效果

4、在大屏组件下增加大屏头

预览效果

5、希望在大屏头右侧增加两个下拉选择切换框，则在大屏头组件下增加下拉元素

6、在大屏组件下增加大屏区域

设置为纵向布局

7、在大屏区域下分隔上下半区

设置两行两个布局模块

8、在上半区下增加三个大屏块

每一个大屏块设置宽度为三分之一

9、在下半区下同样增加三个大屏块

每一个大屏块宽度设置为三分之一

预览效果

10、上下半区挨得太近，将上半区的高度为50%下边距设置为10px

预览效果

11、在上左区下增加一排三个大屏文字

布局模块下放三个大屏文字组件

预览效果

12、在上左区下再增加一排三个大屏文字

13、在上左区下再增加一排两个横排大屏文字

14、在上左区下再增加一排两个横排大屏文字

15、上下边距调整一下，让四行布满整个高度

16、上中区下增加一个大屏Echarts饼图

设置charttype为pie饼图

缺省预览效果

17、在初始化init前端JS函数中为饼图的内容赋值和环中间文字

this.resetConfigData('daping.middle1.middle11.barArr', [{label: '男女比例', value: 'value'}]);
this.resetConfigData('daping.middle1.middle11.barData', [{label: '男', value: '2345'}, {label: '女', value: '1897'}]);
this.resetConfigData('daping.middle1.middle11.centertext', '男女比例
1 : 0.8');
this.resetConfigData('daping.middle1.middle11.centerfont', 'color:#49d9fa;font-size:24px;font-weight:700
color:#FFF;fontSize:46px;font-weight:700');

18、上右区下增加一个大屏列表，并在其下级增加数据列

预览效果

19、在初始化init前端JS函数中为研究生招生计划列表赋值

this.resetConfigData('daping.right1.right11.tableData', [
{v1: '025100', v2: '金融', v3: '不区分研究方向', v4: '全日制', v5: '48'},
{v1: '145300', v2: '大数据', v3: '不区分研究方向', v4: '全日制', v5: '63'},
{v1: '085400', v2: '电子信息', v3: '光子技术与应用', v4: '全日制', v5: '38'},
{v1: '085400', v2: '电子信息', v3: '光电材料与器件', v4: '全日制', v5: '28'},
{v1: '085400', v2: '电子信息', v3: '激光加速器', v4: '全日制', v5: '43'},
{v1: '070501', v2: '自然地理学', v3: '不区分研究方向', v4: '全日制', v5: '39'},
{v1: '025100', v2: '人文地理学', v3: '不区分研究方向', v4: '全日制', v5: '48'},
]);

预览效果

20、下左区下增加一个大屏Echarts柱状图

charttype设置为bar

预览效果

21、在初始化init前端JS函数中为录取学生生源地前五名柱状图赋值

this.resetConfigData('daping.left2.left21.barArr', [{label: '录取学生生源地', value: 'value', color: 'yellow'}]);
this.resetConfigData('daping.left2.left21.barData', [{label: '北京', value: '145'}, {label: '上海', value: '97'},{label: '湖北', value: '55'}, {label: '江苏', value: '49'},{label: '山东', value: '48'}]);
this.resetConfigData('daping.left2.left21.barWidth', '20%');
this.resetConfigData('daping.left2.left21.legendtop', '10px');

预览效果

22、下中区下增加一个大屏Echarts雷达图

charttype设置为radar

预览效果

23、在初始化init前端JS函数中为学生身体综合机能雷达图赋值

this.resetConfigData('daping.middle2.middle21.barArr', [{label: '身高', value: 'value1'}, {label: '体重', value: 'value2'},{label: '立定跳远', value: 'value3'},{label: '弹跳摸高', value: 'value4'},{label: '心率', value: 'value5'}]);
this.resetConfigData('daping.middle2.middle21.barData', [{label: '学生身体综合机能', value1: '185', value2: '127', value3: '198', value4: '249', value5: '78'}]);

预览效果

24、下右区下增加一个大屏Echarts折线图

charttype设置为line

预览效果

23、在初始化init前端JS函数中为近5年录取最高分走势折线图赋值

this.resetConfigData('daping.right2.right21.barArr', [{label: '趋势1', value: 'value1', color: 'white'},{label: '趋势2', value: 'value2', color: 'yellow'},{label: '趋势3', value: 'value3', color: 'blue'},{label: '趋势4', value: 'value4', color: 'red'},{label: '趋势5', value: 'value5', color: ' green'}]);
this.resetConfigData('daping.right2.right21.barData', [{label: '2024', value1: '732', value2: '145', value3: '234', value4: '700', value5: '90'}, {label: '2023', value1: '702', value2: '345', value3: '324', value4: '648', value5: '100'},{label: '2022', value1: '726', value2: '456', value3: '435', value4: '569', value5: '98'}, {label: '2021', value1: '738', value2: '478', value3: '546', value4: '478', value5: '689'},{label: '2020', value1: '711', value2: '543', value3: '657', value4: '309', value5: '732'},{label: '2019', value1: '721', value2: '576', value3: '725', value4: '179', value5: '692'}]);
this.resetConfigData('daping.right2.right21.legendtop', '10px');

25、修改六个大屏块的标题