DataGear不仅支持以编写HTML、JavaScript、CSS的源代码方式创建看板，还支持以直观、友好、快速的方式创建看板视觉模式。本文将利用看板可视化编辑模式提供的网格布局和样式设置功能，介绍如何制作适应大屏、PC、平板、手机等任何屏幕尺寸的数据可视化看板。首先在看板管理页面点击【添加】-【添加（新窗口）】按钮，新建一个空白看板，切换到【可视化模式】，如下图：在制作看板之前，必须先确定基本的网格结构，本文以三行三列的网格结构为例，点击【插入】-【外背插入】-【网格布局】菜单插入网格布局，如图下图：在空白页面插入网格布局时，会有一个【填充页面】设置项，默认开启，网格布局会填充整个页面，适应任何屏幕尺寸。点击【更多】-【元素边框】菜单，可以在页面中显示所有元素边框，方便查看和选择。看板页面的第一行通常是标题行，高度是一个固定的小尺寸，所以这里我们先调整网格布局第一行的高度，点击选中页面上的任意一个网格，然后点击【选择】-【父元素】菜单项，选中网格容器元素，然后点击【编辑】-【样式】菜单项，在弹出的面板中找到【尺寸】-【网格容器】，修改[RowDivision]输入项从repeat(3,1fr)改为3rem1fr1frrepeat(3,1fr)：三行网格平分整个高度。具体可以参考CSS网格布局的相关概念。3rem1fr1fr：固定第一行的高度为基本字体高度的三倍。第二行和第三行平分剩下的高度。具体可以参考CSS网格布局的概念。效果如下图：然后，将第一行的三个格子合并为一个，点击选中左上角的第一个格子，点击【编辑】-【样式】菜单项，找到【尺寸】-在弹出的面板【GridItem】中，填写以下内容：rowspanstart:1rowspanend:2columnspanstart:1columnspanEnd:4Gridspan从第一条水平网格线到第二条水平网格线网格线，以及从第一条垂直网格线到第四条垂直网格线。具体参考CSSGridLayout相关概念点击选中合并后的网格第一行，点击【编辑】-【文本内容】菜单项，填写“示例看板”的文本内容，点击【编辑】-【Style]菜单项，在弹出的面板中找到[Font]]，填写以下内容：字体大小：2rem字体粗细：粗体对齐方式：居中效果如下图所示：下面，我们调整居中看板的网格到跨越两条线且宽度更大的区域。网格调整宽度稍小的区域，可用于中间放置一张主图，两侧放置四张副图。点击选中页面任意一个网格，然后点击【选择】-【父元素】菜单项，选择网格容器元素，然后点击【编辑】-【样式】菜单项，在弹出的菜单中找到【尺寸】-面板【GridContainer】，将【ColumnDivision】的输入项由repeat(3,1fr)改为1fr1.5fr1fr1fr1.5fr1fr：第一列、第二列、第三列占1:1.5的比例:1整个宽度参考CSS网格布局的相关概念。点击选中页面第二行第二个网格，点击【编辑】-【样式】菜单项，在弹出的面板中找到【尺寸】-【网格项】，填写以下内容：RowSpanStart:2RowSpanEnd:4ColumnSpanStart:2ColumnSpanEnd:3网格从第二条水平网格线跨越到第四条水平网格线，从第二条垂直网格线跨越第三条垂直网格线。具体可以参考CSS网格布局的相关概念。效果如下图所示：至此，看板布局调整完毕。接下来需要做的是在页面的五个格子中插入图表，依次选中格子，点击【插入】-【向后插入】-【图表】，选中并插入图表，如下图图：然后，点击【编辑】-【全局样式】菜单项调整看板全局配色方案，点击【编辑】-【全局图表主题】菜单项调整看板全局图表主题，保存并展示，完成看板创建。最终展示效果如下图所示：对于任何屏幕尺寸，上面的看板都可以自适应，按比例缩放元素和图表尺寸。官网地址：http://datagear.tech源码地址：Gitee：https://gitee.com/datagear/datagearGithub：https://github.com/datageartech/datagear
