echart实现柱状图的柱条随数据变色和hsl转换rgb

文章有两个部分：echart实现柱条随数据变色；hsla转换rgba。

为了让颜色分明，我们采用hsla格式显示颜色。

hsla格式是（230，80%，50%，100%）

注意代码中hsla的透明度错误

代码中hsla的透明度没有带百分号是为了：当数据为零是透明度为0，数据不为零时透明度正常显示（因为透明度格式错误，所有默认100%）

代码中实现的颜色是根据柱条数据变化而变化，数据为1到10。

option = {
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5','1', '2', '3', '4', '5','11']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
        type: 'bar',
        itemStyle: {
          color: function (params) {
            return('hsla('+ (230 - params.data * 28)+','+ '80%'+','+ '50%'+','+ (params.data*100 )+')');      
        }
    }
    }]
};

结果如图 

 下面除了 hsl转换rgb函数，还加了IF函数，是为了让数据超过一定范围后，柱条颜色不再变化。

 hsl转换rgb

function hslToRgb(h,s,l,t) {
                  var h = h / 360;
                  var s = s / 100;
                  var l = l / 100;
                  var t = t ;
                  if (s === 0) {
                    var r = g = b = l; // 灰色
                  } else {
                    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                    var p = 2 * l - q;
                    var r = hueToRgb(p, q, h + 1 / 3);
                    var g = hueToRgb(p, q, h);
                    var b = hueToRgb(p, q, h - 1 / 3);
                  }
                  return 'rgba('+(Math.round(r * 255))+','+(Math.round(g * 255))+','+(Math.round(b * 255))+','+ t +')';
                }
                function hueToRgb(p, q, t) {
                  if (t < 0) t += 1;
                  if (t > 1) t -= 1;
                  if (t < 1 / 6) return p + (q - p) * 6 * t;
                  if (t < 1 / 2) return q;
                  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                  return p;
                }
option = {
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5','1', '2', '3', '4', '5','11']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9,  10, 11],
        type: 'bar',
        itemStyle: {
          color: function (params) {
              if(params.data <= 10){
                    console.log(hslToRgb( (230 - params.data * 28), 80, 50,params.data*100 ));
                    return(hslToRgb( (230 - params.data * 28), 80, 50, params.data*100 ));
              }else{
                   return('rgba(168,25,230,100)')
              }
              
        }
    }
    }]
};