四时宝库

程序员的知识宝库

颜色渐变的柱状图(颜色渐变的柱状图片)

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

}]

}

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

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接