visualMap视觉映射组件

官方文档

简介

由ECharts2 中的 dataRange 组件改名以及扩展而来

视觉元素类型：

1. symbol: 图元的图形类别。
2. symbolSize: 图元的大小。
3. color: 图元的颜色。
4. colorAlpha: 图元的颜色的透明度。
5. opacity: 图元以及其附属物（如文字标签）的透明度。
6. colorLightness: 颜色的明暗度。
7. colorSaturation: 颜色的饱和度。
8. colorHue: 颜色的色调。

visualMap映射方式

在 visualMap 组件所控制的 series 中，如果 series 中某个数据项需要避开 visualMap 映射

series: {
    type: '...',
    data: [
        {name: 'Shanghai', value: 251},
        {name: 'Haikou', value: 21},
        // 设置 `visualMap: false` 则 visualMap 不对此项进行控制，此时系列
        // 可使用自身的视觉参数（color/symbol/ ...控制此项的显示。
        {name: 'Beijing', value: 821, visualMap: false},
        ...
    ]
}

type为continuous时，连续型------ 加粗部分有详细解释---斜体属于两种类型共有的属性

属性	类型	值	释义
min/max	number	-	指定 visualMapContinuous 组件的允许的最小/大值
range	Array	-	指定手柄对应数值的位置（在min-max范围内）不设置则默认[min, max]
calculable	boolean	-	是否显示拖拽用的手柄
realtime	boolean	-	拖拽时，是否实时更新
inverse	boolean	-	是否反转 visualMap 组件
precision	number	-	数据展示的小数精度，默认0，无小数点，为1，一位小数...
itemWidth/itemHeight	number	-	图形的宽/高度，即长条的宽/高度
aligin	string	auto/left/top/right/bottom	指定组件中手柄和文字的摆放位置
text	Array	（顺序参照inverse两端文字主体之间的距离）	两端的文本
textGap	number	-	两端文字主体之间的距离
show	-	-	-
dimension	number	-	指定用数据的『哪个维度』，映射到视觉元素上
seriesIndex	number/Array	-	指定取哪个系列的数据，即哪个系列的 series.data
hoverLink	bollean	-	打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。反之，鼠标悬浮到图表中的图形元素上时，在 visualMap 组件的相应位置会有三角提示其所对应的数值
inRange	-	-	定义 在选中范围中 的视觉元素
outOfRange	-	-	定义 在选中范围外 的视觉元素
controller	Object	inRange/outOfRange	visualMap 组件中，控制器 的 inRange outOfRange 设置。如果没有这个 controller 设置，控制器 会使用外层的 inRange outOfRange 设置
z/zlevel	number	-	zlevel用于 Canvas 分层/z用于组件的所有图形的z值
left/top/right/bottom	nunber/string（%）	-	visualMap 组件离容器左/上/右/下侧的距离
orient	string	horizontal/vertical	如何放置 visualMap 组件
padding	-	-	内边距，默认5
backgroundColor/color	-	-	-
borderColor/borderWidth	-	-	-
textStyle	-	-	visualMap 文字样式
formatter	-	-	标签的格式化工具
handle相关	-	-	手柄的样式配置
indicator相关	-	-	指示器的形状，默认为圆形

关于inverse的详细解释

1. inverse为false时，数据大小的位置规则，和直角坐标系相同
   当 visualMap.orient 为'vertical'时，数据上大下小
   当 visualMap.orient 为'horizontal'时，数据右大左小
2. inverse为true时，相反

关于align

1. auto：自动决定
2. left：手柄和label在右，orient 为 horizontal 时有效
3. right：手柄和label在左，orient 为 horizontal 时有效
4. top：手柄和label在下，orient 为 vertical 时有效
5. bottom：手柄和label在上，orient 为 vertical 时有效

关于dimension

数据就是 series.data。 可以把 series.data 理解成一个二维数组。例：

[
    [12, 23, 43],
    [12, 23, 43],
    [43, 545, 65],
    [92, 23, 33]
]

其中每个列是一个维度，即 dimension。 例如 dimension 为 1 时，取第二列（即 23，23，545，23），映射到视觉元素上。
默认取 data 中最后一个维度

关于inRange和outOfRange

关于可用的视觉元素在文章开头已经提出来了

handle相关与indicator指示器相关

handle相关

指示器相关，形状大小样式

指示器形状

被控制的组件

type为piecewise时，分段型------ 加粗部分有详细解释

属性	类型	值	释义
splitNumber	number	-	对于连续型数据，自动平均切分成几段
pieces	Array	-	自定义每一段的范围
categories	Array	-	用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集
minOpen/maxOpen	boolean	-	当 type 为 piecewise 且使用 min/max/splitNumber 时，此参数有效,当值为 true 时，界面上会额外多出一个"min"的选块
selectedMode	-	multiple/single	选择模式
itemGap	-	-	每两个图元之间的间隔距离
itemSymbol	-	-	默认的图形
showLabel	boolean	-	是否显示每项的文本标签

minOpen/maxOpen为true时

itemSymbol

showLabel