{
  "order": 14,
  "key": "heatmap-chart",
  "type": "heatmap-chart",
  "name": "热力图",
  "description": "用格子颜色深浅展示两个类目维度交叉处的数值大小",
  "tags": [
    "charts",
    "热力图",
    "heatmap-chart",
    "热力",
    "分布",
    "时段"
  ],
  "renderer": "echarts",
  "group": "charts",
  "icon": "solar:widget-bold",
  "sample_data": true,
  "usage_notes": [
    "默认图表数据仅用于演示，不是真实业务数据",
    "通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作",
    "数据源每行一个格子，三列分别对应 X、Y、数值，数值列需放在最后一列（visualMap 默认映射最后一个维度）",
    "visualMap.min / max 需按实际数据范围调整",
    "label.formatter 用 {@字段名} 引用数值列，修改数值字段时需同步修改"
  ],
  "field_groups": [
    "node-base",
    "chart-title",
    "chart-grid",
    {
      "key": "heatmap-axis",
      "label": "坐标轴",
      "description": "热力图的横轴和纵轴都是类目轴",
      "fields": [
        {
          "path": "props.option.xAxis.axisLabel.color",
          "label": "X轴文字色",
          "description": "横轴类目文字的颜色",
          "value_type": "color",
          "aliases": [
            "横轴文字颜色"
          ],
          "panel": false
        },
        {
          "path": "props.option.yAxis.axisLabel.color",
          "label": "Y轴文字色",
          "description": "纵轴类目文字的颜色",
          "value_type": "color",
          "aliases": [
            "纵轴文字颜色"
          ],
          "panel": false
        }
      ]
    },
    {
      "key": "heatmap-visual",
      "label": "色阶",
      "description": "数值到格子颜色的映射，数值越大颜色越接近高值颜色",
      "fields": [
        {
          "path": "props.option.visualMap.min",
          "label": "最小值",
          "description": "色阶的最小值，需按实际数据范围调整",
          "value_type": "number",
          "span": 12
        },
        {
          "path": "props.option.visualMap.max",
          "label": "最大值",
          "description": "色阶的最大值，需按实际数据范围调整",
          "value_type": "number",
          "span": 12
        },
        {
          "path": "props.option.visualMap.inRange.color.0",
          "label": "低值颜色",
          "description": "最小值对应的格子颜色",
          "value_type": "color",
          "span": 12
        },
        {
          "path": "props.option.visualMap.inRange.color.4",
          "label": "高值颜色",
          "description": "最大值对应的格子颜色",
          "value_type": "color",
          "span": 12
        },
        {
          "path": "props.option.visualMap.inRange.color",
          "label": "色阶颜色",
          "description": "从低到高的 5 个颜色，整体换配色时修改它",
          "value_type": "array",
          "item_type": "color",
          "aliases": [
            "配色",
            "渐变色"
          ],
          "panel": false
        }
      ]
    },
    {
      "key": "heatmap-label",
      "label": "数值标签",
      "description": "格子内显示的数值",
      "fields": [
        {
          "path": "props.option.series.0.label.show",
          "label": "显示数值",
          "description": "是否在每个格子内显示数值",
          "value_type": "boolean",
          "aliases": [
            "数值标签",
            "标签"
          ]
        },
        {
          "path": "props.option.series.0.label.formatter",
          "label": "数值格式",
          "description": "格子内数值的显示格式，用 {@字段名} 引用数值列，例如 {@value}；修改数值字段时需同步修改",
          "value_type": "string",
          "aliases": [
            "标签格式"
          ]
        },
        {
          "path": "props.option.series.0.label.color",
          "label": "数值文字色",
          "description": "格子内数值文字的颜色",
          "value_type": "color",
          "aliases": [
            "标签颜色"
          ],
          "panel": false
        }
      ]
    },
    "chart-dataset",
    "chart-encode-xy",
    {
      "key": "heatmap-value",
      "label": "数值映射",
      "description": "格子颜色使用的数值列",
      "fields": [
        {
          "path": "props.option.series.0.encode.value",
          "label": "数值字段",
          "description": "格子数值使用数据集中的哪一列，必须是 dataset.source 中的最后一列；修改后同步修改数值格式",
          "value_type": "string",
          "aliases": [
            "值字段"
          ]
        }
      ]
    }
  ],
  "eventOptions": [
    {
      "label": "点击事件",
      "value": "click"
    },
    {
      "label": "双击事件",
      "value": "dblclick"
    },
    {
      "label": "鼠标进入事件",
      "value": "mouseenter"
    },
    {
      "label": "鼠标离开事件",
      "value": "mouseleave"
    },
    {
      "label": "鼠标按下事件",
      "value": "mousedown"
    },
    {
      "label": "鼠标抬起事件",
      "value": "mouseup"
    },
    {
      "label": "鼠标移动事件",
      "value": "mousemove"
    },
    {
      "label": "鼠标滚轮事件",
      "value": "mousewheel"
    },
    {
      "label": "生命周期事件",
      "value": "vnodeMounted"
    }
  ],
  "schema": {
    "type": "heatmap-chart",
    "name": "热力图",
    "layout": {
      "x": 0,
      "y": 0,
      "width": 480,
      "height": 300
    },
    "props": {
      "option": {
        "title": {
          "text": "访问时段分布",
          "top": 8,
          "left": "center",
          "textStyle": {
            "color": "#e5eaf3",
            "fontSize": 16
          }
        },
        "tooltip": {
          "position": "top"
        },
        "dataset": {
          "source": [
            {
              "slot": "0-4点",
              "day": "周一",
              "value": 8
            },
            {
              "slot": "4-8点",
              "day": "周一",
              "value": 7
            },
            {
              "slot": "8-12点",
              "day": "周一",
              "value": 46
            },
            {
              "slot": "12-16点",
              "day": "周一",
              "value": 62
            },
            {
              "slot": "16-20点",
              "day": "周一",
              "value": 76
            },
            {
              "slot": "20-24点",
              "day": "周一",
              "value": 84
            },
            {
              "slot": "0-4点",
              "day": "周二",
              "value": 15
            },
            {
              "slot": "4-8点",
              "day": "周二",
              "value": 14
            },
            {
              "slot": "8-12点",
              "day": "周二",
              "value": 42
            },
            {
              "slot": "12-16点",
              "day": "周二",
              "value": 58
            },
            {
              "slot": "16-20点",
              "day": "周二",
              "value": 72
            },
            {
              "slot": "20-24点",
              "day": "周二",
              "value": 80
            },
            {
              "slot": "0-4点",
              "day": "周三",
              "value": 11
            },
            {
              "slot": "4-8点",
              "day": "周三",
              "value": 10
            },
            {
              "slot": "8-12点",
              "day": "周三",
              "value": 49
            },
            {
              "slot": "12-16点",
              "day": "周三",
              "value": 65
            },
            {
              "slot": "16-20点",
              "day": "周三",
              "value": 68
            },
            {
              "slot": "20-24点",
              "day": "周三",
              "value": 76
            },
            {
              "slot": "0-4点",
              "day": "周四",
              "value": 18
            },
            {
              "slot": "4-8点",
              "day": "周四",
              "value": 6
            },
            {
              "slot": "8-12点",
              "day": "周四",
              "value": 45
            },
            {
              "slot": "12-16点",
              "day": "周四",
              "value": 61
            },
            {
              "slot": "16-20点",
              "day": "周四",
              "value": 75
            },
            {
              "slot": "20-24点",
              "day": "周四",
              "value": 83
            },
            {
              "slot": "0-4点",
              "day": "周五",
              "value": 14
            },
            {
              "slot": "4-8点",
              "day": "周五",
              "value": 13
            },
            {
              "slot": "8-12点",
              "day": "周五",
              "value": 52
            },
            {
              "slot": "12-16点",
              "day": "周五",
              "value": 57
            },
            {
              "slot": "16-20点",
              "day": "周五",
              "value": 71
            },
            {
              "slot": "20-24点",
              "day": "周五",
              "value": 79
            },
            {
              "slot": "0-4点",
              "day": "周六",
              "value": 12
            },
            {
              "slot": "4-8点",
              "day": "周六",
              "value": 11
            },
            {
              "slot": "8-12点",
              "day": "周六",
              "value": 61
            },
            {
              "slot": "12-16点",
              "day": "周六",
              "value": 81
            },
            {
              "slot": "16-20点",
              "day": "周六",
              "value": 98
            },
            {
              "slot": "20-24点",
              "day": "周六",
              "value": 97
            },
            {
              "slot": "0-4点",
              "day": "周日",
              "value": 19
            },
            {
              "slot": "4-8点",
              "day": "周日",
              "value": 7
            },
            {
              "slot": "8-12点",
              "day": "周日",
              "value": 57
            },
            {
              "slot": "12-16点",
              "day": "周日",
              "value": 77
            },
            {
              "slot": "16-20点",
              "day": "周日",
              "value": 94
            },
            {
              "slot": "20-24点",
              "day": "周日",
              "value": 104
            }
          ]
        },
        "grid": {
          "top": 48,
          "right": 24,
          "bottom": 64,
          "left": 48,
          "containLabel": true
        },
        "xAxis": {
          "type": "category",
          "axisLine": {
            "lineStyle": {
              "color": "#4c4d4f"
            }
          },
          "axisLabel": {
            "color": "#cfd3dc"
          },
          "splitArea": {
            "show": true
          }
        },
        "yAxis": {
          "type": "category",
          "axisLine": {
            "lineStyle": {
              "color": "#4c4d4f"
            }
          },
          "axisLabel": {
            "color": "#cfd3dc"
          },
          "inverse": true,
          "splitArea": {
            "show": true
          }
        },
        "visualMap": {
          "min": 0,
          "max": 120,
          "calculable": true,
          "orient": "horizontal",
          "left": "center",
          "bottom": 4,
          "itemHeight": 120,
          "textStyle": {
            "color": "#cfd3dc"
          },
          "inRange": {
            "color": [
              "#1d2b44",
              "#337ecc",
              "#79bbff",
              "#e6a23c",
              "#f56c6c"
            ]
          }
        },
        "series": [
          {
            "name": "访问量",
            "type": "heatmap",
            "label": {
              "show": true,
              "formatter": "{@value}",
              "color": "#e5eaf3",
              "fontSize": 11
            },
            "itemStyle": {
              "borderColor": "#141414",
              "borderWidth": 2
            },
            "encode": {
              "x": "slot",
              "y": "day",
              "value": "value"
            }
          }
        ]
      }
    },
    "style": null,
    "events": []
  }
}