echarts柱状图渐变（根据数据大小，进行渐变）

效果

1、定义五种渐变颜色

// 柱状图渐变色
// 修改color中的x、y、x2、y2, 即可改变横向、纵向展示效果
var colorList = [];
colorList[0] = {color: '#11d56d'};
colorList[1] = {
color: {
  type: 'linear',
  x: 0,
  y: 1,
  x2: 0,
  y2: 0,
  global: false, // 缺省为 false
  colorStops: [{
    offset: 0,
    color: '#11d56d'
  }, {
    offset: 1,
    color: '#ffda30'
  }]
}
};
colorList[2] = {
color: {
  type: 'linear',
  x: 0,
  y: 1,
  x2: 0,
  y2: 0,
  global: false, // 缺省为 false
  colorStops: [{
    offset: 0,
    color: '#11d56d'
  }, {
    offset: 0.5,
    color: '#ffda30'
  }, {
    offset: 1,
    color: '#ff7e00'
  }]
}
};
colorList[3] = {
color: {
  type: 'linear',
  x: 0,
  y: 1,
  x2: 0,
  y2: 0,
  global: false, // 缺省为 false
  colorStops: [{
    offset: 0,
    color: '#11d56d'
  }, {
    offset: 0.33,
    color: '#ffda30'
  }, {
    offset: 0.66,
    color: '#ff7e00'
  }, {
    offset: 1,
    color: '#ff0000'
  }]
}
};
colorList[4] = {
color: {
  type: 'linear',
  x: 0,
  y: 1,
  x2: 0,
  y2: 0,
  global: false, // 缺省为 false
  colorStops: [{
    offset: 0,
    color: '#11d56d'
  }, {
    offset: 0.25,
    color: '#ffda30'
  }, {
    offset: 0.5,
    color: '#ff7e00'
  }, {
    offset: 0.75,
    color: '#ff0000'
  }, {
    offset: 1,
    color: '#99004c'
  }]
}
};

2、分装一个方法

function dataChange(list) {
// max是这个柱状图最大值，第三行可以不要，直接在第四行修改max为固定最大值
const max = Math.max.apply(null, list)
const oneCopy = max / 4;
let newList = [];
list.forEach(item => {
  let index = parseInt(item / oneCopy);
  newList.push({
    value: item,
    itemStyle: colorList[index]
  });
});
return newList;
}

3、使用dataChange

let echart = this.$echarts.init(this.$refs.ec);
  echart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
  xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
  yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.8)'
        },
        data: dataChange(allList)
      }
    ]
  })

借鉴了银子先生项目，pc上没有问题，小程序上有问题我自己修改了下