1.样式

在样式中可以设置组件的基本属性、全局、坐标轴、系列和提示框。

1.1基本属性

1.1.1位置尺寸

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

*尺寸调整不影响组件内容显示、组件动画。

*组件位置尺寸说明

1.1.2默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。

1.2 全局

在全局中支持配置组件边距、外间距、图例、数据动画等样式。

1.2.1边距

图表距离整个组件四边（上、下、左、右）的边距。

*边距样式说明

1.2.2外间距

曲线与图表外围的间距，取值范围0-1。

*外间距说明

1.2.3图例

在图例中可以调整组件的文本样式、图标尺寸、间距、布局、点击交互和未选中样式。

a. 文本样式

可对文本样式按需修改

b. 图标尺寸

自定义图例图标尺寸，散点图默认圆点。

c. 间距

用来调整图例图标与文字之间的间距。

d. 布局

在「布局」中支持进一步调整图例列数、间距、位置和偏移。

e.点击交互

开启「点击交互」后，可通过点击标签筛选并显示对应数据，关闭该功能后无法进行点击交互。

同时，可在「未选中样式」中配置透明度来区分未选中时的样式。

*点击交互 - 未选中样式

*点击交互 - 效果演示

1.2.4数据动画

默认开启状态，首次加载兼数据变化时可显性展示出数据更新的过程。

*数据动画 - 效果演示

1.3 坐标轴

组件坐标轴分为x轴、y轴、z轴，可通过「启用」来控制是否开启某一轴的数据。

如下图所示，当取消开启x轴后可以看到x轴和x轴的相关配置项消失。

*启用x轴

1.3.1X轴

通过「启用」控制X轴显隐，可通过轴标签、轴线、刻度和网格线进行坐标轴样式配置：

其中，X轴标签分为类目型和时间型两个不同维度：

类目型：以类目为单位，标签名由数据源提供。

时间型：以时间为单位，如下图 👇

注：展示标签的数量会根据原标签数量进行整除后展示,如果输入的数量不能被整出，则会出现不能如期按照输入数量进行展示的情况。（因为组件本身逻辑，在处理标签显示时，会整除后按间距调整数量分布，如果不能整除，则无法正确分配间距）

例如原标签数量为12，则可展示3、4、6个（可被整除）标签的的展示等。如果想展示输入数量的标签也可启动轮播。

1.3.2Y轴

通过「启用」控制Y轴显隐，可通过轴标签、轴单位、轴线、刻度和网格线进行坐标轴样式配置：

其中，Y轴标签支持以下刻度配置：

「数值范围」支持自定义输入，也支持系统选择，置空时系统根据数据中的最大/小值和指标点的个数自动计算；

「标签刻度」支持开启「刻度自适应」或设置「数量强制」和「步长强制」，非自适应情况下可自定义编辑标签、步长数量及小数位数；

*轴标签 两种刻度模式

1.3.3Z轴

通过「启用」控制Z轴显隐，可通过轴标签、轴单位、轴线、刻度和网格线进行坐标轴样式配置：

1.4系列

当图表数据存在多类型展示需求时，组件默认将数据划分成多个系列，用户可通过对各系列数据进行自定义数据映射，从而完成对每个系列配置相应样式。

其中，数据系列操作支持：

：增加一个系列数据

：删除一个系列数据

：调整系列的显示格式（纵向展示、横向展示）

1.4.1数据系列

*系列 - 数据映射 字段名和显示名

1.5 提示框

1.5.1悬停触发

支持鼠标焦点移入到对应的数据点后会显示当前对应的数据提示框。

*悬停触发 提示框效果

1.5.2提示框

提示框整体分为两部分，提示框样式和框内数据：

*框内数据 对应样式配置

2数据

2.1 组件数据格式

*组件数据格式说明

2.2 JSON数据案例

[
	{
		"x": 146,
		"y": 40,
		"s": "系列一"
	},
	{
		"x": 147,
		"y": 45,
		"s": "系列一"
	},
	{
		"x": 148,
		"y": 48,
		"s": "系列一"
	},
	{
		"x": 150,
		"y": 60,
		"s": "系列一"
	},
	{
		"x": 153,
		"y": 54,
		"s": "系列一"
	},
	{
		"x": 155,
		"y": 58,
		"s": "系列一"
	},
	{
		"x": 160,
		"y": 70,
		"s": "系列一"
	},
	{
		"x": 165,
		"y": 60,
		"s": "系列一"
	},
	{
		"x": 167,
		"y": 64,
		"s": "系列一"
	},
	{
		"x": 171,
		"y": 58,
		"s": "系列一"
	},
	{
		"x": 173,
		"y": 62,
		"s": "系列一"
	},
	{
		"x": 175,
		"y": 60,
		"s": "系列一"
	},
	{
		"x": 177,
		"y": 66,
		"s": "系列一"
	},
	{
		"x": 179,
		"y": 82,
		"s": "系列一"
	},
	{
		"x": 182,
		"y": 77,
		"s": "系列一"
	},
	{
		"x": 184,
		"y": 76,
		"s": "系列一"
	},
	{
		"x": 186,
		"y": 81,
		"s": "系列一"
	},
	{
		"x": 187,
		"y": 80,
		"s": "系列一"
	},
	{
		"x": 188,
		"y": 88,
		"s": "系列一"
	},
	{
		"x": 147,
		"y": 56,
		"s": "系列二"
	},
	{
		"x": 151,
		"y": 70,
		"s": "系列二"
	},
	{
		"x": 153,
		"y": 64.5,
		"s": "系列二"
	},
	{
		"x": 159,
		"y": 70,
		"s": "系列二"
	},
	{
		"x": 160,
		"y": 80,
		"s": "系列二"
	},
	{
		"x": 167,
		"y": 79,
		"s": "系列二"
	},
	{
		"x": 170,
		"y": 78,
		"s": "系列二"
	},
	{
		"x": 172,
		"y": 72,
		"s": "系列二"
	},
	{
		"x": 175,
		"y": 72,
		"s": "系列二"
	},
	{
		"x": 176,
		"y": 59,
		"s": "系列二"
	},
	{
		"x": 178,
		"y": 69,
		"s": "系列二"
	},
	{
		"x": 180,
		"y": 72,
		"s": "系列二"
	},
	{
		"x": 182,
		"y": 62,
		"s": "系列二"
	},
	{
		"x": 182,
		"y": 62,
		"s": "系列二"
	},
	{
		"x": 183,
		"y": 66,
		"s": "系列二"
	},
	{
		"x": 185,
		"y": 65,
		"s": "系列二"
	},
	{
		"x": 186,
		"y": 69,
		"s": "系列二"
	},
	{
		"x": 187,
		"y": 70,
		"s": "系列二"
	}
]

2.3 数据配置项说明

2.4 数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

3.交互

当前组件可通过载入动画、回调参数、自定义事件进行交互配置。

3.1载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

3.2回调参数

回调参数即为全局性的参数变量，用于控制组件之间参数的传递，可通过设置回调参数来实现数据驱动交互。

其中，字段值即参数变量，变量名即对字段值的重命名。

详细的回调参数教学👉 回调的使用

3.3自定义事件

自定义事件支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑。

详细的自定义事件教学👉自定义事件教学