ECharts中的visualMap是一种可视化组件,用于将数据值映射到颜色、大
▥前端
𝄐 0
echarts多图联动,echarts地图联动
ECharts中的visualMap是一种可视化组件,用于将数据值映射到颜色、大小等视觉属性上,从而帮助用户更好地理解数据。在visualMap配置中,controller属性用于设置是否显示控制器(slider或piecewise),以便用户可以交互式地调整视觉映射范围。
当controller属性为true时,会在visualMap下方显示一个控制器,用户可以通过拖动滑块或选择断点来调整数据范围并实时更新数据展示。当controller属性为false时,将不显示控制器,用户无法交互调整视觉映射范围,但仍可通过预设的视觉映射范围进行数据展示。
以下是一个例子,展示如何在ECharts中使用visualMap配置中的controller属性:
option = {
visualMap: {
type: 'continuous',
min: 0,
max: 100,
controller: {
inRange: {
color: ['#d94e5d', '#eac736', '#50a3ba']
},
outOfRange: {
color: ['#ccc']
}
}
},
series: [{
type: 'heatmap',
data: [[0, 1, 10], [0, 2, 20], [0, 3, 30], [1, 1, 40], [1, 2, 50], [1, 3, 60]]
}]
};
上述代码中,visualMap配置的controller属性设置为true,表示显示控制器。inRange和outOfRange分别用于设置在视觉映射范围内和外的颜色。series是数据系列,这里使用了heatmap图表类型,并通过data属性设置了6个数据点,每个数据点包含x轴、y轴和值。通过visualMap的配置,将数据值映射到heatmap上的颜色,用户可以通过控制器交互式地调整视觉映射范围。
ECharts中的visualMap是一种可视化组件,用于将数据值映射到颜色、大小等视觉属性上,从而帮助用户更好地理解数据。在visualMap配置中,controller属性用于设置是否显示控制器(slider或piecewise),以便用户可以交互式地调整视觉映射范围。
当controller属性为true时,会在visualMap下方显示一个控制器,用户可以通过拖动滑块或选择断点来调整数据范围并实时更新数据展示。当controller属性为false时,将不显示控制器,用户无法交互调整视觉映射范围,但仍可通过预设的视觉映射范围进行数据展示。
以下是一个例子,展示如何在ECharts中使用visualMap配置中的controller属性:
option = {
visualMap: {
type: 'continuous',
min: 0,
max: 100,
controller: {
inRange: {
color: ['#d94e5d', '#eac736', '#50a3ba']
},
outOfRange: {
color: ['#ccc']
}
}
},
series: [{
type: 'heatmap',
data: [[0, 1, 10], [0, 2, 20], [0, 3, 30], [1, 1, 40], [1, 2, 50], [1, 3, 60]]
}]
};
上述代码中,visualMap配置的controller属性设置为true,表示显示控制器。inRange和outOfRange分别用于设置在视觉映射范围内和外的颜色。series是数据系列,这里使用了heatmap图表类型,并通过data属性设置了6个数据点,每个数据点包含x轴、y轴和值。通过visualMap的配置,将数据值映射到heatmap上的颜色,用户可以通过控制器交互式地调整视觉映射范围。
本文地址:
/show-278003.html
版权声明:除非特别标注原创,其它均来自互联网,转载时请以链接形式注明文章出处。