echarts的颜色渐变

官网文档解释

// 线性渐变，前四个参数分别是 x0, y0, x2, y2,
//范围从 0 - 1，相当于在图形包围盒中的百分比，
//如果 global 为 `true`，则该四个值是绝对的像素位置
{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
{
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}

折线图渐变

使用案例

option = {
  xAxis: {
    type: 'category',
    data: ['Mon',
    {
      value:'Tue',
      textStyle:{
        color:'red'
      }
    }, 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      itemStyle:{
        color:{
          type: 'liner',
          x: 0,
          y: 1,
          x2: 1,
          y2: 0,
          colorStops: [{
              offset: 0, color: '#00ffff' // 0% 处的颜色
          }, {
              offset: 1, color: 'yellow' // 100% 处的颜色
          }]
        }
      }

    }
  ]
};

效果图

单个柱子渐变

使用案例

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        120,
        {
          value: 200,
          itemStyle: {
            color: {
              type:'liner',
              x:1,
              y:0,
              x2:0,
              y2:1,
              colorStops:[
                {
                   offset: 0, color: '#00ffff'
                },
                {
                   offset: 0.5, color: 'yellow'
                },
                  {
                   offset: 1, color: 'red'
                },
                ],
            }
          }
        },
        150,
        80,
        70,
        110,
        130
      ],
      type: 'bar'
    }
  ]
};

效果图