数据可视化 HL-Box大屏设计器操作文档

一、大屏简介

• • 大屏简介：大屏的简单介绍；

二、大屏大小

• • 大屏宽度：大屏大宽度，可根据投放显示器的屏幕大小来设置；

• • 大屏高度：大屏的高度是多少，可根据投放显示器的屏幕大小来设置；

三、大屏背景

• • 背景颜色：大屏的背景颜色（只有没有背景图的时候，才显示出来）；

• • 缩略图：大屏列表显示的图片；

• • 背景图：大屏的背景图片；

2.图表类组件

2.1柱形图组件

柱形图组件就是添加柱形图的组件。点击“ ”图标，再点击“柱形图”，即可创建新的图
像，如下图；

一、组件名称设置

选中该柱形图组件，在操作界面右侧的“图层名称”处可修改组件的名称，如图2.12。（名称
最好要设置一下，方便后期组件管理）

二、系统配色

选中该柱形图组件，在操作界面右侧，打开“系统配色”开关，在“配色选择”下拉框中选择
主题色，来修改柱形图组件的配色，如下图。

• • 默认配色：效果图如下左图；

• • 紫色主题：效果图如下中图；

• • 绿色主题：效果图如下右图；

三、位置设置

想达到下图图表的效果，可如下设置：

选中该柱形图组件，在操作界面右侧，打开“竖展示”开关，就可实现，操作步骤下图。

四、柱体设置

选中该柱形图组件，在操作界面右侧的“柱体设置”处可修改设置组件的外观特点，如下图。

• • 最大宽度：柱体的最大宽度，可以调节改变柱体的宽度；

• • 圆角：柱体4个角的弧度；

• • 最小高度：柱体最小不能低于的高度；

五、标题设置

选中该柱形图组件，在操作界面右侧的“标题设置”处可修改柱形图组件的标题样式，如下图。

• • 标题开关：该开关控制标题的显示与隐藏；

• • 标题：标题显示的内容；

• • 字体颜色：标题的颜色；

• • 字体粗细：标题字体的粗细；

• • 字体大小：标题字体大小；

• • 字体位置：标题的位置，分为：居中、左对齐、右对齐；

• • 副标题：副标题内容（如果不想显示副标题，不填写内容就不显示）；

• • 字体颜色：副标题字体颜色；

• • 字体粗细：副标题字体的粗细；

• • 字体大小：副标题字体大小；

六、X轴设置

选中该柱形图组件，在操作界面右侧的“X轴设置”处可修改柱形图组件的X轴样式，如下图。

• • 名称：X轴的名称；

• • 显示：X轴是否显示；

• • 显示网格：网格是否显示；

• • 轴线颜色：网格线颜色设置；

• • 标签间距：每个柱状图之间的距离；

• • 文字角度：X轴文字的旋转角度；

• • 轴反转：柱状图顺序左右调转；

• • 字号：X轴字体大小；

七、Y轴设置

选中该柱形图组件，在操作界面右侧的“Y轴设置”处可修改柱形图组件的Y轴样式，如下图。

• • 名称：Y轴的名称；

• • 显示：Y轴是否显示；

• • 轴网格线：网格是否显示；

• • 轴线颜色：网格线颜色设置；

• • 轴反转：柱状图顺序上下调转；打开轴翻转开关，效果图如下图；

• • 字号：Y轴字体大小；

八、字体设置

选中该柱形图，在操作界面右侧的“字体设置”处可修改柱体顶部文字的样式，如下图。

• • 显示：数值文字是否显示；

• • 字体大小：文字的大小；

• • 字体颜色：文字的颜色；

• • 字体粗细：文字的粗细；

九、提示语设置

选中该柱形图组件，在操作界面右侧的“提示语设置”处可修改柱形图组件的提示语，如下图。效果图如下；

• • 字体大小：提示语的字体大小；

• • 字体颜色：提示语的字体颜色；

十、坐标轴边距设置

选中该柱形图组件，在操作界面右侧的“坐标轴边距设置”处可修改柱形图距离左、右、上、下的距离，如下图。

十一、图例设置

选中该柱形图组件，在操作界面右侧的“图例设置”处可设置图例的样式，如图2.196；效果如图2.197。

• • 图例开关：是否显示图例；

• • 字体颜色：图例的字体颜色。如果要想自定义图例的颜色，需要关闭系统配色（图2.1971）和删除所有自定义配色（图2.1972）中的颜色。

• • 图例宽度：图例的宽度；

• • 横向位置：图例的位置，分为：居中、左对齐、右对齐，如图2.1973；

• • 纵向位置：图例的位置，分为：顶部、底部，如图2.1974；

• • 布局朝向：图例的排列顺序，分为：横排和竖排，如图2.1975；

• • 字体大小：图例的字体大小；

十二、自定义配色设置

选中该柱形图组件，在操作界面右侧的“自定义配色设置”处可配置上边不能设置的内容，如下图。

• • 文字颜色：X、Y轴字体的颜色；

• • 轴线颜色：X、Y轴轴线颜色；

• • 配色：柱体的颜色；如果开启了“系统配色”，需要先把系统配色先关掉，这样自定义的

• • 柱体颜色才起作用；

十三、接口设置

选中该柱形图组件，在操作界面右侧，点击下图按钮，可设置接口。

1.数据类型

数据类型分为静态数据和动态数据；

• • 静态数据：写死的数据；

• • 动态数据：会随着接口传过来的数据实时变化；（一般这种比较常用）

2. 接口地址

• • categories：X轴参数；

• • series：柱形内容；内部 name为柱形名称，data为柱形相对应Y轴的值；

（1）静态数据，接口地址传过来的内容要符合以下格式：

// （1）两个柱形图接口格式：
{
    "categories": [
        "苹果",
        "三星",
        "小米",
        "oppo",
        "vivo"
    ],
    "series": [
        {
            "name": "手机品牌",
            "dta": [
                1000879,
                3400879,
                2300879,
                5400879,
                3400879
            ]
        },
        {
            "name": "手机品牌销售",
            "data": [
                100087,
                340087,
                230087,
                540087,
                340087
            ]
        }
    ]
}
// （2）一个柱形图接口格式：
{
    "categories": [
        "苹果",
        "三星",
        "小米",
        "oppo",
        "vivo"
    ],
    "series": [
        {
            "name": "手机品牌",
            "dta": [
                1000879,
                3400879,
                2300879,
                5400879,
                3400879
            ]
        }
    ]
}

（2）动态数据，接口地址传过来的内容要符合以下格式：

// （1）两个柱形图接口格式如下，效果图如图2.1991；
{
    "data": {
        "categories": [
            "苹果",
            "三星",
            "小米",
            "oppo",
            "vivo"
        ],
        "series": [
            {
                "name": "手机品牌",
                "data": [
                    1000879,
                    3400879,
                    2300879,
                    5400879,
                    3400879
                ]
            },
            {
                "name": "手机品牌销售",
                "data": [
                    100087,
                    340087,
                    230087,
                    540087,
                    340087
                ]
            }
        ]
    }
}
// （2）一个柱形图接口格式如下，效果图如图2.1992；
{
    "data": {
        "categories": [
            "苹果",
            "三星",
            "小米",
            "oppo",
            "vivo"
        ],
        "series": [
            {
                "name": "手机品牌",
                "data": [
                    1000879,
                    3400879,
                    2300879,
                    5400879,
                    3400879
                ]
            }
        ]
    }
}

3. 刷新时间

这个参数主要针对动态数据设置的，完成数据的实时更新。

• • 如果你想设置成5秒刷新一次，可以将刷新时间设置成“5000”；

4. 刷新数据

这个参数主要是重新请求以下接口，完成数据的更新。

5. 接口参数

暂时未用到；

6. 数据处理

这个参数用于处理图表中的数据，比如：你在不方便修改接口的时候，想修改一下图表中的某
一个或某几个数据，可在这里边修改。

全局变量

全局变量，它可以作用于axios发送数据中

作用域

• • header头部

• • body发送体

• • url参数后面

他可以手动配置，也可以自动获取window.$glob全局变量下的参数

组件数据交互

组件请求回数据、完后返回组件可以识别的标准格式即可。

一、静态数据

直接配置成组件对应的数据格式即可

二、API接口数据

填写API地址，配置相关请求参数，返回的数据处理成组件对应的数据格式即可

三、SQL数据源数据

配数据源，编写对应的sql语法即可，数据格式处理和API一样

四、Websoket长链接数据

配置场链接地址即可返回数据

组件参数交互

组件之间的参数交互

选中你要交互的组件(可以是多个)，并且填写传递过去参数的名称，映射字段就是取你数据中的那个字段，默认
为value。

一、静态数据

可以在过滤器中去处理，过滤器中的params参数就是传递过来的参数，根据参数处理结果后返回即可

二、API接口数据

不需要在过滤器中去处理结果的，他会根据你的请求，自定把参数帮你带入

三、SQL数据源数据

sql语句可以是字符串也可以是一个函数，函数中的data字段就是传递过来的数据，用来组装你的sql语句

四、Websoket长链接数据

这里和API接口一样，会帮你把参数带入请求中

组件联动交互

组件之间的动态联动

点击查看示例

新建组件找到对应的交互事件地方

这里可JS处理逻辑，同时也可以拿到window.$glob全局变量

• • params参数为点击时候的数据

• • refs为画布中全部组件对象，其中ID就是组件的对应序号

function(params,refs){
}

比如我们做一个动态显隐和赋值，画布中新建3个对应组件，并且找到他们的ID

function(params, refs) {
    #图片组件
    let imgObj = refs['9cafb1a2-3b28-4468-81bb-b207501ea036'
    ]
    #文本组件
    let textObj = refs['7def40b9-61c1-4941-8637-7f46f408547c'
    ]
    if (params.value == 1) {
        imgObj.$el.style.display = "block"
        textObj.dataChart.value = '显示'
    } else {
        imgObj.$el.style.display = "none"
        textObj.dataChart.value = '隐藏'
    }
}