# 基本散点图
散点图是一种通过散点的疏密程度和变化趋势表示连续变量的数量关系的图形。
# 属性
# 基础
组件标题： 用于在图层中显示组件的名称。1.1+
组件尺寸： 组件的宽度和高度，单位为
px。组件位置： 组件在大屏中的位置，通过横纵坐标来定义，单位为
px。背景颜色： 组件的背景颜色。
# 系列
散点图为单维度，多量度的图表，因此需要分别设置每个系列下的散点的属性。
系列 1：
图形顺序： 控制图形的前后顺序。值小的图形会被值大的图形覆盖。
标记设置： 对散点的设置。
标记图形： 散点的形状。
标记宽： 散点的宽度。
标记高： 散点的高度。
缩放比例： 散点大小的缩放比例。
最大值： 缩放后的最大值。
最小值： 缩放后的最小值。
标记旋转： 散点的旋转角度。
提示：
当数值中没有值时，散点的大小是由散点大小配置控制全部散点的大小，此时散点的缩放比例，最大值，最小值配置不生效。如果想设置各散点大小不同，可将数据中的一个量度值拖入数值中，此时散点大小配置不生效，散点的大小由缩放比例，数值的值，最大值，最小值配置控制。
标记颜色： 对散点颜色的设置。
渐变色： 散点是否渐变。
圆心颜色： 散点圆心的颜色。
圆边颜色： 散点圆边的颜色。
颜色： 散点的颜色。
阴影颜色： 散点的阴影颜色。
水平偏移： 阴影水平方向的偏移大小。
垂直偏移： 阴影垂直方向的偏移大小。
警告：
渐变色的圆心颜色和圆边颜色配置不能为空。
涟漪设置： 对散点涟漪特效的设置。
涟漪特效： 是否开启涟漪特效。
涟漪颜色： 散点涟漪的颜色。
动画周期： 散点涟漪的动画周期。
缩放比例： 散点涟漪动画的缩放比例。
绘制方式： 散点涟漪的绘制方式。
文本标签： 对散点文本的设置。
显示： 是否显示文本。
位置： 文本的位置。
距离： 文本距散点的位置。
内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用
\n换行。字符串模板变量
{a}: 系列名。{b}: 数据名。{c}: 数据值。
例如：
{b}: {c}回调函数
可用参数为
data。示例：
return data.data[i];参数
data是 内容格式器需要的单个数据资源。格式如下：{ // i的值，代表的数据 0: x值, 1: y值, 2: 系列值, 3: 大小, 4: name值 }字体颜色： 文本标签字体颜色。
字体大小： 文本标签字体大小。
字体粗细： 文本标签字体粗细。
字体： 文本标签字体样式。
- 系 列 2：与系 列 1属性配置相同。
# 视区
显示： 是否显示直角坐标系网格。
左边距： 离容器左侧的距离。
右边距： 离容器上侧的距离。
上边距： 离容器右侧的距离。
下边距： 离容器下侧的距离。
# X 轴
显示坐标： 是否显示 x 轴坐标。
坐标轴位置： x 轴的的坐标显示位置。
坐标轴名称： x 轴的坐标名称。
坐标轴名称位置： 坐标轴名称的显示位置。开端、中端、末端。
坐标轴与名称间距： 坐标轴与名称之间的距离。
反向坐标轴系： 是否反向显示坐标轴数据。
名称文本样式： 坐标轴名称的字体样式设置。
字体颜色： 坐标轴名称字体颜色。
字体大小： 坐标轴名称字体大小。
字体粗细： 坐标轴名称字体粗细。
字体： 坐标轴名称字体样式。
标签： 坐标轴刻度标签的相关设置
显示： 是否显示刻度标签。
内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
字符串模板：模板变量为
{value}。{value}kg回调函数
可用参数：
- data： 刻度默认文本。
- index： 刻度索引。
return data;
字体颜色： 标签字体颜色。
字体大小： 标签字体大小。
字体粗细： 标签字体粗细。
字体： 标签字体样式。
轴线： 坐标轴轴线相关设置
显示： 是否显示轴线。
颜色： 轴线颜色。
宽度： 轴线宽度。
类型： 轴线类型。
刻度： 坐标轴刻度相关设置
显示： 是否显示坐标轴刻度。
刻度线与标签对齐： 刻度线是否与标签对齐显示。
分割线：
显示： 是否显示分割线。
颜色： 分割线颜色。
宽度： 分割线宽度。
类型： 分割线类型。
分隔区域：
显示： 是否显示分隔区域。
奇数颜色： 奇数区域颜色选择填充。
偶数颜色： 偶数区域颜色选择填充。
缩放区域：
区域缩放： 是否区域缩放。
鼠标缩放： 是否鼠标缩放。
滑块缩放： 是否滑块缩放。
数据窗口百分比： 滑块所占数据窗口的百分比。
滑块组件高度： 滑块组件高度。
水平位置： 滑块水平位置。
垂直位置： 滑块垂直位置。
滑块区域背景： 滑块区域背景颜色。
滑动显示文本： 是否滑动显示文本。
锁定滑块： 是否锁定滑块。
线条颜色： 线条颜色。
线条宽度： 线条宽度。
线条类型：
- 实线
- 虚线
- 点线
# Y 轴
显示坐标： 是否显示 Y 轴坐标。
坐标轴位置： Y 轴的的坐标显示位置。
坐标轴名称： Y 轴的坐标名称。
坐标轴名称位置： 坐标轴名称的显示位置。开端、中端、末端。
坐标轴与名称间距： 坐标轴与名称之间的距离。
反向坐标轴系： 是否反向显示坐标轴数据。
名称文本样式： 坐标轴名称的字体样式设置。
字体颜色： 坐标轴名称字体颜色。
字体大小： 坐标轴名称字体大小。
字体粗细： 坐标轴名称字体粗细。
字体： 坐标轴名称字体样式。
标签： 坐标轴刻度标签的相关设置
显示： 是否显示刻度标签。
内容格式器： 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
字符串模板：模板变量为
{value}。{value}kg回调函数
可用参数：
- data： 刻度默认文本。
- index： 刻度索引。
return data;
字体颜色： 标签字体颜色。
字体大小： 标签字体大小。
字体粗细： 标签字体粗细。
字体： 标签字体样式。
轴线： 坐标轴轴线相关设置
显示： 是否显示轴线。
颜色： 轴线颜色。
宽度： 轴线宽度。
类型： 轴线类型。
刻度： 坐标轴刻度相关设置
显示： 是否显示坐标轴刻度。
刻度线与标签对齐： 刻度线是否与标签对齐显示。
分割线：
显示： 是否显示分割线。
颜色： 分割线颜色。
宽度： 分割线宽度。
类型： 分割线类型。
分隔区域：
显示： 是否显示分隔区域。
奇数颜色： 奇数区域颜色选择填充。
偶数颜色： 偶数区域颜色选择填充。
缩放区域：
区域缩放： 是否区域缩放。
鼠标缩放： 是否鼠标缩放。
滑块缩放： 是否滑块缩放。
数据窗口百分比： 滑块所占数据窗口的百分比。
滑块组件高度： 滑块组件高度。
水平位置： 滑块水平位置。
垂直位置： 滑块垂直位置。
滑块区域背景： 滑块区域背景颜色。
滑动显示文本： 是否滑动显示文本。
锁定滑块： 是否锁定滑块。
线条颜色： 线条颜色。
线条宽度： 线条宽度。
线条类型：
- 实线
- 虚线
- 点线
# 视觉映射组件
显示： 是否开启视觉映射组件。
类型： 连续型/分段型。
映射数据： 映射的数据。
最小值： 最小值。
最大值： 最大值。
显示映射器： 是否显示映射器组件。
映射器配置： 对映射器组件的设置。
是否拖动： 映射器组件是否能拖动。
宽度： 映射器组件的宽度。
高度： 映射器组件的高度。
选中颜色： 映射器组件选中的颜色。
未选中颜色： 映射器组件未选中的颜色。
上端文本： 映射器组件上端的文本。
下端文本： 映射器组件下端的文本。
水平对齐： 映射器组件水平方向的位置。
垂直对齐： 映射器组件垂直方向的位置。
字体颜色： 映射器组件两端文本的字体颜色。
字体大小： 映射器组件两端文本的字体大小。
字体粗细： 映射器组件两端文本的字体粗细。
字体： 映射器组件两端文本的字体样式。
自动分段： 是否自动分段。
分段信息： 各段的配置。
开始区间： 分段的开始区间。
结束区间： 分段的结束区间。
分段标签： 这一段分段的名称。
提示：
当自动分段为false时，分段信息配置才会显示。 当类型配置为分段型时，分段配置才有意义。
视觉元素： 选中时视觉元素的配置。
颜色
大小
明暗度
未选中样式： 未选中时视觉元素的配置。
- 颜色
# 标题
显示标题： 是否显示标题
内容：
标题
主： 主标题内容。
副： 副标题内容。
超链接
主： 主标题超链接。
副： 副标题超链接。
位置
水平对齐
垂直对齐
外观
内边距
主副间隔
主标题文本样式
字体颜色： 主标题字体颜色。
字体大小： 主标题字体大小。
字体粗细： 主标题字体粗细。
字体： 主标题字体样式。
副标题文本样式
字体颜色： 副标题字体颜色。
字体大小： 副标题字体大小。
字体粗细： 副标题字体粗细。
字体： 副标题字体样式。
# 图例
显示图例： 是否显示图例。
选中模式： 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。
内容格式器： 用来格式化图例文本，支持字符串模板和回调函数两种形式。
字符串模板：
{name}回调函数：
return data;
位置
排列方式： 图例列表的布局朝向。
水平位置： 水平排列。
垂直位置： 垂直排列。
文字样式
字体颜色： 图例字体颜色。
字体大小： 图例字体大小。
字体粗细： 图例字体粗细。
字体： 图例字体样式。
# 提示框
显示提示框： 是否显示提示框。
提示模板 ：提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
字符串模板
模板变量有
{a},{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在触发点为坐标轴的时候，会有多个系列的数据，此时可以通过{a0},{a1},{a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a},{b},{c},{d}在不同图表类型下代表数据含义为：- 折线（区域）图、柱状（条形）图、K 线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无） - 散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无） - 地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无） - 饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
- 折线（区域）图、柱状（条形）图、K 线图 :
回调函数
"return data;"
触发点：
坐标轴： 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
数据项： 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
提示外观
背景颜色： 提示框浮层的背景颜色。
边框颜色： 提示框浮层的边框颜色。
边框宽度： 提示框浮层的边框宽度。
内边距： 提示框浮层内边距。
文本样式
字体颜色： 提示框字体颜色。
字体大小： 提示框字体大小。
字体粗细： 提示框字体粗细。
字体： 提示框字体样式。
# 工具栏
显示工具栏： 是否显示工具栏。
功能按钮
保存为图片按钮
还原按钮
数据视图按钮
位置朝向
排列方式： 功能按钮的布局朝向。
水平位置： 水平排列。
垂直位置： 垂直排列。
图表尺寸
图标大小
间隔
# 图形元素
离左侧距离： 图形元素离左侧的距离。
离上侧距离： 图形元素离上侧的距离。
文字样式
字体颜色： 图形元素字体颜色。
字体大小： 图形元素字体大小。
字体粗细： 图形元素字体粗细。
字体： 图形元素字体样式。
# 数据
# 静态数据
上图中的示例JSON代码如下：
[
{
"xAxis": 53,
"yAxis": 32,
"name": "2015",
"value": 81
},
{
"xAxis": 10,
"yAxis": 32,
"name": "2015",
"value": 45
},
{
"xAxis": 50,
"yAxis": 63,
"name": "2015",
"value": 20
},
{
"xAxis": 62,
"yAxis": 31,
"name": "2015",
"value": 68
},
{
"xAxis": 65,
"yAxis": 21,
"name": "2015",
"value": 95
},
{
"xAxis": 31,
"yAxis": 21,
"name": "2015",
"value": 85
},
{
"xAxis": 54,
"yAxis": 38,
"name": "2015",
"value": 45
},
{
"xAxis": 77,
"yAxis": 7,
"name": "2015",
"value": 55
},
{
"xAxis": 88,
"yAxis": 8,
"name": "2015",
"value": 66
},
{
"xAxis": 99,
"yAxis": 9,
"name": "1990",
"value": 44
},
{
"xAxis": 65,
"yAxis": 8,
"name": "1990",
"value": 77
},
{
"xAxis": 7,
"yAxis": 69,
"name": "1990",
"value": 66
},
{
"xAxis": 88,
"yAxis": 4,
"name": "1990",
"value": 38
},
{
"xAxis": 3,
"yAxis": 33,
"name": "1990",
"value": 77
},
{
"xAxis": 8,
"yAxis": 65,
"name": "1990",
"value": 57
},
{
"xAxis": 65,
"yAxis": 54,
"name": "1990",
"value": 79
},
{
"xAxis": 91,
"yAxis": 36,
"name": "1990",
"value": 45
},
{
"xAxis": 45,
"yAxis": 66,
"name": "1990",
"value": 78
},
{
"xAxis": 74,
"yAxis": 69,
"name": "1990",
"value": 65
}
]
xAxis： 量度，X 轴的值。
yAxis： 量度，Y 轴的值。
name： 维度，系列名。
value： 量度，散点的大小。
散点图是单维度、多量度的数据，所以坐标轴中解析拖入的前两个字段，分类中解析拖入的前两个字段，数值中解析拖入的第一个字段多余字段在图表中不解析。
提示：
分类中的第一个字段解析为系列分类，第二个字段解析为数据中的最后一个值。
# 数据资源
# 交互
# 单击散点交互事件
勾选启用，开启组件交互功能。当单击散点图散点时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。
# 数据响应
散点图支持数据响应配置。
# 数据上卷、下钻
散点图支持数据上卷、下钻功能。
# 节点编程
# 事件
单击散点交互事件： 散点单击触发事件。
- 抛出的参数： 散点所携带的数据。
图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
图例切换事件： 图表图例切换时触发。
- 抛出的参数： 切换的图例名称及选中状态。
# 动作
导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。
设置图例： 设置图例的选中状态。
- 接收的参数：
{ "类型一": true, "类型二": false, "类型三": false }