{site_name}

{site_name}

🌜 搜索

ECharts中的visualMap是一种用于将数据映射至可视化颜色、大小等属性的组件

前端 𝄐 0
echarts echarts-gl的3d饼图设置饼图大小,echarts echarts-gl的3d饼图的曲面角度,echarts echarts
ECharts中的visualMap是一种用于将数据映射至可视化颜色、大小等属性的组件。visualMap有不同的类型,其中分段型视觉映射组件可以将数据分成若干个区间,然后为每个区间设置对应的可视化属性。

分段型视觉映射组件的属性包括:

1. type:visualMap的类型,设置为"piecewise"表示分段型。
2. pieces:分段信息,数组类型,每个元素对应一个分段,包括分段的范围和对应的可视化属性值。
3. inRange:分段内的颜色或大小范围,可以设置渐变色或单色。
4. outOfRange:分段外的颜色或大小范围,同样可以设置渐变色或单色。

下面是一个示例代码,展示如何使用分段型视觉映射组件来将数据映射至散点图的颜色属性:

javascript
option = {
xAxis: {},
yAxis: {},
series: [{
type: 'scatter',
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
itemStyle: {
color: '#ddd'
}
}],
visualMap: {
type: 'piecewise',
pieces: [
{min: 4, max: 6, label: 'Low', color: 'green'},
{min: 6, max: 8, label: 'Medium', color: 'yellow'},
{min: 8, max: 10, label: 'High', color: 'red'}
],
inRange: {
color: ['#e0ffff', '#006edd']
},
outOfRange: {
color: '#fff'
}
}
};


在上述示例中,我们首先定义了一个散点图,并将其所有点的颜色设置为灰色。然后我们添加了一个分段型视觉映射组件visualMap,将数据分成三个区间(4-6,6-8和8-10),每个区间对应的颜色分别为绿色、黄色和红色。在inRange属性中,我们使用了渐变色来表示形成的颜色区域,而在outOfRange中则将超出范围的部分设置为白色。运行代码后,就可以看到不同数据点的颜色已经根据其数值大小被映射至不同的颜色了。