码迷,mamicode.com
首页 > 其他好文 > 详细

颜色渐变的柱状图

时间:2018-02-26 23:29:19      阅读:341      评论:0      收藏:0      [点我收藏+]

标签:class   data   min   bsp   col   div   var   网上   数据   

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

  }]

}

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

 

颜色渐变的柱状图

标签:class   data   min   bsp   col   div   var   网上   数据   

原文地址:https://www.cnblogs.com/sc60/p/8476258.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!