{site_name}

{site_name}

🌜 搜索

ECharts的visualMap是一种数据与视觉元素之间映射的组件,可以将数据

前端 𝄐 0
echarts visualmap属性详解,new echarts.graphic,echarts地图3d效果,echarts graph symbol,echarts markpoint tooltip,echarts 地图可视化
ECharts的visualMap是一种数据与视觉元素之间映射的组件,可以将数据和颜色、大小等视觉元素进行绑定,从而帮助用户更直观地理解数据。通常情况下,VisualMap主要用于展示连续性或分段式的数据,比如随着地区的变化显示温度、人口密度等信息。

visualMap配置可以定义在ECharts的option对象中的visualMap属性中,并提供以下属性:

- type:visualMap的类型,有continuous(连续型)和piecewise(分段型)两种,分别对应不同的数据类型。
- min/max:visualMap指定的最小值和最大值,用于限制映射的范围。
- range:visualMap选中范围,仅在分段型visualMap中有效。
- inRange/outOfRange:visualMap中数据映射到的视觉元素,在连续型visualMap中表示映射到的色条颜色,在分段型visualMap中则可自定义映射的颜色。
- controller:是否开启手动控制范围选择。

以下是一个简单的visualMap配置示例:


option = {
// ...
visualMap: {
type: 'piecewise',
min: 0,
max: 100,
pieces: [
{min: 0, max: 20, label: '低'},
{min: 20, max: 70, label: '中'},
{min: 70, max: 100, label: '高'}
],
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
series: [{
// ...
}]
};


该示例中定义了一个分段型visualMap,映射的范围为0~100,同时指定了三个不同的数据区间范围(低、中、高),并将这些区间映射到不同的颜色。在图表中使用visualMap,只需要将visualMap的配置对象作为option的visualMap属性传入即可。