Echarts 柱状图渐变色

柱状图两种渐变色排列

Echarts 柱状图渐变色_第1张图片

核心代码
{
    itemStyle: {
      normal: {
        color: function (params) {
          let colorArray = [
            {
              top: 'rgba(34, 169, 255, 1)', // 蓝色
              bottom: 'rgba(11, 31, 52, 1)'
            }, {
              top: 'rgba(216, 184, 89, 1)', // 黄色
              bottom: 'rgba(6, 22, 42, 1)'
            }
          ]
          let num = colorArray.length
          return {
            type: 'linear',
            colorStops: [{
              offset: 0,
              color: colorArray[params.dataIndex % num].bottom
            }, {
              offset: 1,
              color: colorArray[params.dataIndex % num].top
            }]
          }
        }
      }
    }
}

柱状图两种单色排列

核心代码
{
    itemStyle: {
      normal: {
        color: function (params) {
          let colorArray = [
            '#22A9FF', '#D8B859'
          ]
         if (params.dataIndex % 2 === 0) {
           return colorArray[0]
         } else {
           return colorArray[1]
         }
       }
      }
   }
}

你可能感兴趣的:(echarts)