热力图直角坐标系

概览

• 内置组件/图表/热力图直角坐标系：

• 拖入画布后：

• 在后面板生成一个节点，其中含有一个输入端口：

数据

• 接收上游节点发送来的数据。
• 接收数据类型为：至少含有三列数据的二维数组的json。
• 默认数据

[
  ['day', 'hour', 'Punch Card'],
  ['Saturday', '12a', 5],
  ['Saturday', '1a', 1],
  ['Saturday', '11a', 2],
  ['Saturday', '12p', 4],
  ['Saturday', '1p', 1],
  ['Saturday', '2p', 1],
  ['Saturday', '3p', 3],
  ['Saturday', '4p', 4],
  ['Saturday', '5p', 6],
  ['Saturday', '6p', 4],
  ['Saturday', '7p', 4],
  ['Saturday', '8p', 3],
  ['Saturday', '9p', 3],
  ['Saturday', '10p', 2],
  ['Saturday', '11p', 5],
  ['Friday', '12a', 7],
  ['Friday', '10a', 5],
  ['Friday', '11a', 2],
  ['Friday', '12p', 2],
  ['Friday', '1p', 6],
  ['Friday', '2p', 9],
  ['Friday', '3p', 11],
  ['Friday', '4p', 6],
  ['Friday', '5p', 7],
  ['Friday', '6p', 8],
  ['Friday', '7p', 12],
  ['Friday', '8p', 5],
  ['Friday', '9p', 5],
  ['Friday', '10p', 7],
  ['Friday', '11p', 2],
  ['Thursday', '12a', 1],
  ['Thursday', '1a', 1],
  ['Thursday', '10a', 3],
  ['Thursday', '11a', 2],
  ['Thursday', '12p', 1],
  ['Thursday', '1p', 9],
  ['Thursday', '2p', 8],
  ['Thursday', '3p', 10],
  ['Thursday', '4p', 6],
  ['Thursday', '5p', 5],
  ['Thursday', '6p', 5],
  ['Thursday', '7p', 5],
  ['Thursday', '8p', 7],
  ['Thursday', '9p', 4],
  ['Thursday', '10p', 2],
  ['Thursday', '11p', 4],
  ['Wednesday', '12a', 7],
  ['Wednesday', '1a', 3],
  ['Wednesday', '8a', 1],
  ['Wednesday', '10a', 5],
  ['Wednesday', '11a', 4],
  ['Wednesday', '12p', 7],
  ['Wednesday', '1p', 14],
  ['Wednesday', '2p', 13],
  ['Wednesday', '3p', 12],
  ['Wednesday', '4p', 9],
  ['Wednesday', '5p', 5],
  ['Wednesday', '6p', 5],
  ['Wednesday', '7p', 10],
  ['Wednesday', '8p', 6],
  ['Wednesday', '9p', 4],
  ['Wednesday', '10p', 4],
  ['Wednesday', '11p', 1],
  ['Tuesday', '12a', 1],
  ['Tuesday', '1a', 3],
  ['Tuesday', '5a', 1],
  ['Tuesday', '9a', 2],
  ['Tuesday', '10a', 4],
  ['Tuesday', '11a', 4],
  ['Tuesday', '12p', 2],
  ['Tuesday', '1p', 4],
  ['Tuesday', '2p', 4],
  ['Tuesday', '3p', 14],
  ['Tuesday', '4p', 12],
  ['Tuesday', '5p', 1],
  ['Tuesday', '6p', 8],
  ['Tuesday', '7p', 5],
  ['Tuesday', '8p', 3],
  ['Tuesday', '9p', 7],
  ['Tuesday', '10p', 3],
  ['Monday', '12a', 2],
  ['Monday', '1a', 1],
  ['Monday', '3a', 3],
  ['Monday', '8a', 2],
  ['Monday', '10a', 4],
  ['Monday', '11a', 1],
  ['Monday', '12p', 5],
  ['Monday', '1p', 10],
  ['Monday', '2p', 5],
  ['Monday', '3p', 7],
  ['Monday', '4p', 11],
  ['Monday', '5p', 6],
  ['Monday', '7p', 5],
  ['Monday', '8p', 3],
  ['Monday', '9p', 4],
  ['Monday', '10p', 2],
  ['Sunday', '12a', 1],
  ['Sunday', '10a', 1],
  ['Sunday', '12p', 2],
  ['Sunday', '1p', 1],
  ['Sunday', '2p', 3],
  ['Sunday', '3p', 4],
  ['Sunday', '8p', 1],
  ['Sunday', '9p', 2],
  ['Sunday', '10p', 2],
  ['Sunday', '11p', 6]
]

参数

图表公共参数

• 数据源：url，一个json文件的url，json文件中的数据需要遵循Echarts图表的标准数据格式。
• 背景色：颜色值。
• 边框颜色：颜色值。
• 字体颜色：包含图表中标签、名称、图例字体的颜色
• 图表色系：图表中各个系列的颜色，格式为英文逗号分隔的颜色值。
  • 默认：

#0084ff, #339cff, #66b5ff, #99ceff, #cce6ff

• 参考色系：
  • #37a2da,#32c5e9,#67e0e3,#9fe6b8,#ffdb5c,#ff9f7f,#fb7293,#e062ae,#e690d1,#e7bcf3,#9d96f5,#8378ea,#96bfff
  • #6ea8e5,#ff962e,#ff5c5f,#70cc62,#86d1ca
• 图表名称：字符串，默认null。
• 名称位置：英文逗号, 分隔的两个字符串或数值，分别定义名称相对于图表左侧和上方的位置。默认 left, top 即名称位于左上角。还可以是 40, 20 等数字，表示距离左侧40像素，距离上方20像素。
• 名称颜色：color值，定义图表名称的字体颜色。

图例参数

• 图例：选项 "无"、"水平"、"垂直" ，默认 无 ，即图表中不渲染图例。
  • 水平：图例水平排列
  • 垂直：图例垂直排列。
• 图例位置：两个冒号: 分隔的键值对。
  • : 左侧填写图例的相对位置，一个是水平方向（left或right），另一个是垂直方向（top或bottom）；
  • : 右侧填写水平或垂直方向对应的位置，可以是数值、百分比，若水平方向也可以填 left、right、center、auto，若垂直方向也可以是 top、bottom、center、auto。
  • 配合图例的 水平/垂直 方向，可以设置为图表的任何位置。
  • 示例：

• 图例映射：一对或多对由英文冒号: 分隔的数据，: 左侧是数据表中表头的字段，右侧是自定义的表头。如果要自定义多对，那么用英文逗号, 分隔。
• 图例字号：number类型值，定义图例的字体大小，单位px。默认12。最小 8 。
• 图例字体：选项 "默认"、"庞门正道"、"DS-Digital" 。
• 图例间隔：number类型值，定义图例之间的间距，单位px。默认10。最小 4 。
• 图例标记类型：选项 '圆形'、'矩形'、'圆角矩形'、'三角形'、'菱形'、'大头针'、'箭头'、'无' ，默认 圆角矩形。
• 图例标记宽度：number类型值，定义图例标记的宽度，单位px。默认25 。最小 4 。
• 图例标记高度：number类型值，定义图例标记的高度，单位px。默认14 。最小 4 。

坐标系参数

• 容器边距（左,上,右,下）：英文逗号分隔的四个数字或百分数，分别表示图表距离容器左、上、右、下边的距离。默认 10%,60,10%,60

坐标轴参数

• X轴名称：string类型，定义X轴的名称。
• Y轴名称：string类型，定义Y轴的名称。
• X轴类型：选项'category', 'value', 'time'，分别为"类目轴"，"数据轴"，"时间轴"。默认 category。
• Y轴类型：选项'category', 'value', 'time'，分别为"类目轴"，"数据轴"，"时间轴"。默认 category。
• 坐标轴颜色：color值，定义X、Y轴的轴线及刻度线的颜色。默认 #333。
• X轴区域分割：布尔值，定义是否显示X轴的分割区域。默认true
• Y轴区域分割：布尔值，定义是否显示Y轴的分割区域。默认true
• 分割区颜色：color值，定义X、Y轴的分割区域颜色。实际的分割区域颜色是该色值的30%透明度和10%透明度的间隔。若分割区颜色为#000，那么实际的分割区颜色设置为 ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.1)'] 。
• 分割区透明度：number类型值，最小0，最大100，步长1。定义X、Y轴分割区域的透明度。
• X轴数据索引：number类型，定义二维数组中，作为X轴坐标数据的那一列的数据维度。默认 0，即第一列数据。
• X轴标签旋转：number类型，定义X轴标签的旋转角度，常用于X轴的数据中，字段过长时。

数据维度参数

• X轴维度：number类型，最小0，步长1。定义二维数组中，作为X轴坐标数据的那一列的数据维度。默认 0，即第1列数据。
• Y轴维度：number类型，最小0，步长1。定义二维数组中，作为Y轴坐标数据的那一列的数据维度。默认 1，即第2列数据。
• 值维度：number类型，最小0，步长1。定义二维数组中，作为标签和视觉映射的那一列的数据维度。默认 2，即第3列数据。

标签参数

• 标签：布尔值，是否显示标签。默认true。
• 标签颜色：color值，定义标签的字体颜色。

连续型视觉映射

• 视觉映射：选项 '无'、'顶部居左'、'顶部居右'、'中部居左'、'中部居右'、'底部居左'、'底部居右'。
  • 无：不设置视觉映射。
  • 其他：设置视觉映射，并定义视觉映射图例的位置。
• 视觉映射朝向：选项'水平'、'垂直'。定义视觉映射图例的方向。默认 水平。
• 视觉最小值：number类型值，默认0。定义视觉映射允许的最小值，和最大值一起形成了视觉映射的『定义域』。
• 视觉最大值：number类型值，默认10。定义视觉映射允许的最大值，和最小值一起形成了视觉映射的『定义域』。
• 颜色透明度：英文逗号,分隔的0~1的数值。定义 在选中范围中 的图元的颜色的透明度。默认'0, 1'，表示值维度的数据中，数据与视觉最小值相等的图元颜色为完全透明，数据与视觉最大值相等的图元颜色为不透明。图元的透明度根据数值维度的数据在0~1之间变化。
• 颜色明暗度：英文逗号,分隔的0~1的数值。定义 在选中范围中 的图元的颜色的明暗度。默认null。
  • 示例：
• 颜色饱和度：英文逗号,分隔的0~1的数值。定义 在选中范围中 的图元的颜色的饱和度。默认null。
• 颜色色调：英文逗号,分隔的0~359的数值。定义 在选中范围中 的图元的颜色的色调。默认null。
  • 示例：
• 范围内颜色：单个颜色值，或多个由英文逗号,分隔的颜色值。定义 在选中范围中 的图元的颜色，默认 #0084ff。
• 范围外颜色：单个颜色值，或多个由英文逗号,分隔的颜色值。定义 在选中范围外 的颜色。默认rgba(0,0,0,0.2)

放大镜参数

• 放大镜开始(%)：一个数值，单位是%，表示图表左侧的开始数据是所有数据的第百分之几条，默认0，表示第一条数据。如上图默认数据中，若放大镜开始为50%，则图表默认显示的X轴第一个数据是“three”。
• 放大镜结束(%)：一个数值，单位是%，表示图表右侧的结束数据是所有数据的第百分之几条，默认100，最后一条数据。如上图默认数据中，若放大镜开始为0，结束为50%，则图表默认显示的X轴第一条数据是“one”，最后一条数据是“three”。在图表中滑动滚轮可以放大或缩小放大镜，若放大镜显示了部分数据，按住鼠标左键拖动可以左右移动放大镜。