Echarts图形-热力图

概要说明

热力图是指用x轴和y轴表示的两个分类字段确定数值点的位置，通过相应位置的矩形颜色去表现数值的大小，颜色深代表的数值大。

热力图的特点说明如下：

优势：好看、易于理解，数据信息更直观有效。

劣势：不适合比较单一变量的大小。

数据要求：两个分类轴，一个指标轴，分类轴的数据量不宜太少。

适用场景：热力图主要用于展示连续型数据的分布情况。例如用颜色展现某一范围内不同地区数据量的差异，网站分析等等。

不适用场景：

1) 两个分类维度的组合40%以上都不具有度量值，导致矩形空缺过多的数据。

2) 大部分的度量值数据差值百分比都低于5%，会导致大部分矩形颜色会过于相近，难以辨别，无法查看各度量值的大小比较信息。

实现方案

业务情景描述：查看公司各个发货区域产品销售数量的差异。

数据结构：

基础数据以明细表的形式存储。

定制要点：

设置“发货区域”字段、“产品目录名称”字段为分类项，“数量”字段为指标项。

预览效果：

属性

属性			普通柱图	堆积柱图	瀑布图	普通横条图	堆积横条图	3D柱图
数据设置	字段		√	√	√	√	√	√
	分类(X)轴		√	√	√	√	√	√
	指标(Y)轴		√	√	√	√	√	√
	并列轴		√	√		√	√
	指标(Z)轴							√
基本设置	通用	画布大小	√	√	√	√	√
		背景颜色	√	√	√	√	√	√
		显示方式	√	√	√	√
		边距	√	√	√	√	√
		初始化动画	√	√	√	√	√
		防止Y轴标签溢出	√	√	√	√	√
		防止X轴标签溢出	√	√	√	√	√
		宽度						√
		高度						√
		空间坐标系宽度						√
		空间坐标系高度						√
		空间坐标系深度						√
		是否显示坐标系						√
	坐标轴线	线条样式						√
	刻度标签	是否显示						√
	刻度标签	刻度标签样式						√
	坐标轴刻度	是否显示						√
	坐标轴刻度	线条样式						√
	分隔线	是否显示						√
	分隔线	分隔线样式						√
	分隔区域	是否显示						√
	视角控制	投影方式						√
		是否自动旋转						√
		旋转方向						√
		旋转速度						√
		恢复时间						√
标题	标题		√	√	√	√	√	√
	标题样式		√	√	√	√	√	√
	水平位置		√	√	√	√	√	√
坐标轴	分类轴/指标轴	坐标轴名称	√	√	√	√	√	√
		坐标轴名称样式	√	√	√	√	√	√
		坐标轴名称位置	√	√	√	√	√
		名称到轴线的距离	√	√	√	√	√	√
		标注步长	√	√	√	√	√
		刻度标签显示方式	√	√	√	√	√
		标签间隔						√
		刻度标签样式	√	√	√	√	√	√
		数据格式	√	√	√	√	√	√
		是否应用于标签	√	√	√	√	√	√
		刻度设置	√	√	√	√	√
		分隔线	√	√	√	√	√
		分隔区域	√	√	√	√	√
		坐标轴线	√	√	√	√	√
图例	位置		√	√	√	√	√
图例	文字样式		√	√	√	√	√
提示	是否显示		√	√	√	√	√	√
	背景颜色		√	√	√	√	√	√
	边框宽度		√	√	√	√	√	√
	提示文本样式		√	√	√	√	√	√
	添加其他列		√	√	√	√	√	√
工具	功能按钮设置	数据视图	√	√	√	√	√	√
		数据区域缩放	√	√	√	√	√
		配置项还原	√	√	√	√	√	√
		保存图片	√	√	√	√	√	√
序列	柱子宽度		√	√	√	√	√
	堆积名称			√			√
	倒角尺寸							√
	倒角光滑度							√
	普通状态设置	系列主色	√	√	√	√	√	√
		图形透明度						√
		数据项标签	√	√	√	√	√	√
		位置	√	√	√	√	√
		标签与图形距离						√
		文本样式	√	√	√	√	√	√
	高亮状态设置	系列主色	√	√	√	√	√	√
		图形透明度						√
		数据项标签	√	√	√	√	√	√
		位置	√	√	√	√	√
		标签与图形距离						√
		文本样式	√	√	√	√	√	√
	数据标注设置		√	√	√	√	√
	数据标线设置	标线类型	√	√	√	√	√
	数据标线设置	标记颜色	√	√	√	√	√
高级	图形标识		√	√	√	√	√	√
	图形数据动态变化							√
	图形输出行数		√	√	√	√	√	√
	图形主题		√	√	√	√	√	√
	排序	排序顺序	√	√	√	√	√
	排序	排序指标	√	√	√	√	√
扩展属性			√	√	√	√	√	√

关注我们

服务支持

页面树结构

Echarts图形-热力图

概要说明

实现方案

属性