颜色渐变的柱状图

做项目时的一个需求：根据数值大小使用颜色渐变的方块表示，效果是很多小方块排成一排（类似于横向的堆叠柱状图，不过不同颜色之间有空隙，宽高相同），方块颜色为其数值大小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]

　　}]

}

配置项大致就是上面这个样子，有兴趣的可以试一下

 

转载于:https://www.cnblogs.com/sc60/p/8476258.html