版本: 下个版本

区域翻牌器

配置

基础属性

参数	说明
图表宽度	组件的宽度，单位为px。可以通过直接输入数据或点击上下箭头改变图表宽度，步长为1。
图表高度	组件的高度，单位为px。可以通过直接输入数据或点击上下箭头改变图表宽度，步长为1。
横坐标	组件的横坐标，单位为px，为组件左上角距离页面左边界的像素距离。
纵坐标	组件的纵坐标，单位为px。纵坐标为组件左上角距离页面上边界的像素距离。
旋转角度	以组件的中心为中心点，进行旋转，单位为（°）。
透明度	取值范围为0~1。为0时，图表隐藏；为1时，图表全部显示。默认为1，步长为0.01。

全局样式

参数	说明
字体	针对该组件设置字体样式，通过点击选择字体样式。
边距	控制区域图与组件上下左右四个边界之间的距离，单位默认px。
翻牌器样式	控制翻牌器与组件的上、左边距，以及多个翻牌器之间的距离。

x轴

文本
- 颜色：x轴标签文本的颜色。
- 字号：x轴标签文本的大小。
- 字体粗细：x轴标签文本的字体粗细。
轴标签

x轴的数据值，显示在轴线下方。可通过点击控制是否显示。

数据类型：x轴的数据类型。分为类目型、数值型和时间型三种。
- 数值型：支持整数、浮点数等数值类型的数据。
- 类目型：支持字符、字符串等类目类型的数据。
- 时间型：时间类型的数据，需要配置数据格式
显示格式：当数据类型为时间型时，显示格式为可选项。

是否留白：开启后，x轴两端留有空白。
两端留白距离：是否留白开启后生效，控制留白距离。
最大值：x轴轴标签显示的最大值，可以选择数据最大值和自动取整两种方式。默认为数据最大值。
最小值：x轴轴标签显示的最小值，可以选择数据最小值和自动取整两种方式。默认为数据最小值。
单位：x轴的单位。
角度：x轴标签相对x轴旋转的角度。
轴线：

通过点击控制x轴轴线是否显示，并且通过颜色的选择控制轴线颜色。默认颜色为透明。

网格线：

通过点击控制x轴网格线是否显示，并通过颜色选项控制其颜色。

y轴

文本样式
- 颜色：y轴标签文本的颜色。
- 字号：y轴标签文本的大小。
- 字体粗细：y轴标签文本的字体粗细。
轴标签
- 最大值：y轴轴标签显示的最大值，可以选择数据最大值和自动取整两种方式。默认为数据最大值。
- 小数点位数：y轴轴标签的单位，可能被遮挡。
- 角度：控制y轴周标签相对y轴旋转的角度。
轴单位：y轴显示的单位。
轴线：与x轴类似。
网格线：与x轴类似。

图例

通过控制是否显示图例，图例名称默认和数据系列名一致。

文本：
- 字体：图例文本的字体样式。
- 字体粗细：图例文本的字体粗细。
- 字号：图例文本的大小。
- 颜色：图例文本的颜色。
布局
- 左右间距：控制多个图例之间的左右距离。
- 水平对齐：控制图例的水平位置，有左对齐、右对齐、居中三个选项。
- 垂直对齐：控制图例垂直方向位置，有顶部、底部、居中三个选项。

提示框

通过控制是否显示提示框，在预览或发布页面，鼠标悬浮或单击柱图时出现的提示框的样式。

参数	说明
触发类型	提示框被触发的目标类型，可选，包括数据项和坐标轴。
触发动作	提示框被触发的动作，可选，包括悬浮和点击。
消失延迟时间	当不满足触发条件时，提示框就会消失，此配置项设置提示框消失前延迟的时间，单位为ms。

背景框样式：提示框的背景框样式。 | 参数 | 说明 | | --- | --- | | 背景色 | 提示框的背景颜色 | | 内边距 | 提示框的内部边距，单位为px。 | | 边框颜色 | 提示框的边框颜色。 | | 边框粗细 | 提示框边框的粗细，单位为px。 |
文本样式：提示框中文本的样式。 | 参数 | 说明 | | --- | --- | | 颜色 | 提示框文本的颜色。 | | 字体 | 提示框文本的字体系列。 | | 字号 | 提示框文本的大小。 | | 字体粗细 | 提示框文本的字体粗细。 |
坐标轴指示器：当提示框的触发类型为坐标轴，且执行触发动作时，展示的坐标轴指示器的样式。 | 参数 | 说明 | | --- | --- | | 类型 | 坐标轴指示器的类型，目前只支持直线指示器。 | | 指示线样式 | 指示线颜色、宽度和类型（类型可选，包括实线、虚线和点线）。 |

数据系列

通过点击增加一个数据系列，通过点击删除一个数据系列。

区域：区域部分的颜色，一般为渐变色。

折线
- 颜色：相应系列下的图表折线的颜色。
- 粗细：相应系列下的图表折线的粗细。
- 样式：相应系列下的图表折线的类型，有虚线、实线、点线三个可选项。
- 近似曲线：

通过点击控制折线是以直线的方式还是平滑的连接数据点。

圆点：此系列下数据点表现方式。
- 圆点颜色：控制数据点的颜色。
- 圆点半径：控制数据点的大小。
标签

每个数据点的y轴值，可通过控制值是否显示。

颜色：此系列下的值标签文本的颜色。
字号：此系列下的值标签文本的大小。
字体粗细：此系列下的值标签文本的粗细。
翻牌器
- 数字样式：取此系列下最后一个数据的y值作为翻牌器数据部分。

配置项	说明
颜色	翻牌器数字部分文本的颜色。
字号	翻牌器数字部分文本的字体大小。
字体粗细	翻牌器数字部分文本的字体粗细。
与前缀间距	翻牌器数字部分与前缀部分的距离。
四舍五入	翻牌器数字部分取值是否四舍五入，默认为打开状态（需要四舍五入）。
数字分隔符	翻牌器数字部分的千分位分隔符，每三位用“，”进行分隔。

前缀样式：翻牌器数字部分前面的文本。

配置项	说明
内容	翻牌器前缀的文本内容。
字体	翻牌器前缀部分文本的字体样式。
颜色	翻牌器前缀部分文本的字体颜色。
字号	翻牌器前缀部分文本的字体大小。
字体粗细	翻牌器前缀部分文本的字体粗细。

后缀样式：翻牌器数字部分后面的文本。

N5OSMI4(EYR3KSE)KDWY)IO.png

配置项	说明
内容	翻牌器后缀的文本内容。
字体	翻牌器后缀部分文本的字体样式。
颜色	翻牌器后缀部分文本的字体颜色。
字号	翻牌器后缀部分文本的字体大小。
字体粗细	翻牌器后缀部分文本的字体粗细。

动画

初始动画时长：组件第一次渲染时动画的时长，单位为ms。
缓动效果：动画的缓动效果，可选，系统提供多种常见的动画缓动效果供您选择。
更新动画时长：组件数据更新时的动画时长，单位为ms。

数据

上图中的示例JSON代码如下。

[
    {
        "x": "2010/01/01 00:00:00",
        "y": 300,
        "s": "系列1"
    },
    {
        "x": "2010/01/01 00:00:00",
        "y": 200,
        "s": "系列2"
    },
    {
        "x": "2010/02/01 00:00:00",
        "y": 200,
        "s": "系列1"
    },
    {
        "x": "2010/02/01 00:00:00",
        "y": 100,
        "s": "系列2"
    },
    {
        "x": "2010/03/01 00:00:00",
        "y": 200,
        "s": "系列1"
    },
    {
        "x": "2010/03/01 00:00:00",
        "y": 130,
        "s": "系列2"
    },
    {
        "x": "2010/04/01 00:00:00",
        "y": 200,
        "s": "系列1"
    },
    {
        "x": "2010/04/01 00:00:00",
        "y": 200,
        "s": "系列2"
    },
    {
        "x": "2010/05/01 00:00:00",
        "y": 300,
        "s": "系列1"
    },
    {
        "x": "2010/05/01 00:00:00",
        "y": 100,
        "s": "系列2"
    }
]

表 1. 字段说明

字段	说明
x	折线图中每个数据点的类目，即x轴的值。该字段类型与格式须与配置项中x轴的标签数据种类与格式保持一致。
y	折线图中每个数据点的值，即y轴的值。
s	（可选）系列值，当配置项开启系列映射，数据系列中映射字段与s相匹配。

表 2. 配置项说明

配置项	说明
受控模式	打开开关，组件初始化状态下不请求数据，仅通过回调ID或蓝图编辑器配置的方法发起请求数据；关闭开关，可以使用自动更新请求数据。
自动更新请求	选中后可以设置动态轮询，还可以手动输入轮询的时间频次。清除后则不会自动更新，需要手动刷新页面，或通过蓝图编辑器和回调ID事件来触发请求更新数据。
数据源	可以选择数据源，如下图。

数据响应结果	展示数据请求的响应结果。当数据源发生改变时，可单击右侧的查看响应数据，实时查看数据响应结果。

交互

当点击数据项时：选中启用，开启组件交互功能。当单击区域翻牌器折线上的数据点时，会触发数据请求，抛出回调值，动态加载不同折线数据点的数据。默认抛出数据中的x、y和s值，具体配置请参见回调ID实现图表联动功能。

蓝图编辑器交互配置

在画布编辑器页面，右键单击组件，选择导出到蓝图编辑器。
单击页面左上角的图标。
在蓝图编辑器配置页面，单击导入节点栏内的区域翻牌器组件，在画布中可以看到如下图所示的区域翻牌器的蓝图编辑器配置参数。

事件

事件	说明
当数据接口请求完成时	数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。具体数据请参见上文的数据系列。
当点击数据项时	当单击区域翻牌器的圆点时抛出的事件，同时抛出该圆点对应的数据项。
当点击图例时	当单击区域翻牌器的图例时，会触发数据请求，抛出回调值，动态加载不同的数据。默认抛出数据中的s值，具体配置请参见回调ID实现图表联动功能。

动作

动作	说明
请求数据接口	重新请求服务端数据，上游数据处理节点或图层节点抛出的数据将作为参数。例如区域翻牌器配置了API数据源为`[http://api.test](http://api.test)`，传到请求区域翻牌器接口动作的数据为`{ id: '1'}`，则最终请求接口为`[http://api.test?id=1](http://api.test?id=1)`。
导入数据接口	按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。具体数据请参见上文的数据系列。
高亮	高亮数据项对应的元素。参数示例如下：。`{data: {x: '上海' //可列举多个高亮条件，类似filter。},options: {style: {fill: 'red'},selectMode: 'single',cancelHighlightFirst: true}}`
取消高亮	取消数据项对应元素的高亮。参数示例如下。`{data: {x: '上海'},options: {mode: 'single' // 当为single时，多个数据项命中时，只取消一个高亮；当为multiple时，多个数据项命中时，取消所有高亮。}}`
更新组件配置	动态更新组件的样式配置。需要先在组件的配置面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值。
显示	显示组件，不需要参数。
隐藏	隐藏组件，不需要参数。
切换显隐状态	切换组件显示或者隐藏。
移动	将组件移动到指定位置。`{// 移动方式。绝对定位：to，相对定位：by。默认值：to。"positionType": "to",// 指定位置。x坐标，y坐标。"attr": {"x": 0,"y": 0},// 动画方式。"animation": {"enable": false,// 动画延时。"animationDuration": 1000,// 动画曲线。可选值为：linear\|easeInOutQuad\|easeInOutExpo。"animationEasing": "linear"}}`

配置​

基础属性​

全局样式​

x轴​

y轴​

图例​

提示框​

数据系列​

动画​

数据​

交互​

蓝图编辑器交互配置​

配置

基础属性

全局样式

x轴

y轴

图例

提示框

数据系列

动画

数据

交互

蓝图编辑器交互配置