颜色渐变的柱状图
做项目时的一个需求:根据数值大小使用颜色渐变的方块表示,效果是很多小方块排成一排(类似于横向的堆叠柱状图,不过不同颜色之间有空隙,宽高相同),方块颜色为其数值大小m,取a颜色(对应数值min)到b颜色(对应数值max)的渐变色中相对应的颜色
echarts官网上有一个例子可以借鉴,是使用visualMap视觉映射组件。通常visualMap都是映射的数据轴数值大小,现在要求柱状图一样高,所以映射到x轴上,由于x轴是类目轴,所以它会按照下标来映射
var min = 7,max = 33;
var color_min = 'red',color_max = 'blue';
var optiion = {
xAxis:{...,data:[7,8,...,32,33]},
yAxis:{...},
grid:{...},
visualMap:{
...
min:0,
max:max - min,
demission:0,
inRange:{
color:[color_min,color_max]
},
..
},
series:[{
...,
data:[1,1,...,1,1]
}]
}
配置项大致就是上面这个样子,有兴趣的可以试一下