518 lines
13 KiB
JSON
518 lines
13 KiB
JSON
{
|
|
"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": []
|
|
}
|
|
}
|