How to apply different linear gradient for each bar in echarts bar series?

Question

Right now i can apply same gradient to all bars but I need to apply linear gradient color to each bar based on a value. i.e first bar with gradient from color1 to color2 and second bar can be gradient from color1 to color3. I have gone through the docs but couldn't find the necessary info .

Answer 1

Yes, it's easy.

In the bar series you have the option to define style for each datapoint. Please take a look on the my previous answer. In you case all is the same but solid color changes to our gradient.

For control gradients and his colors you need to use something like this:

var myChart = echarts.init(document.getElementById('main'));
var graphic = echarts.graphic;

var barData = [5, 20, 36, 10, 10, 20];
var barColors = [
  ['rgba(176,196,222, 0.3)', 'rgba(176,196,222, 1)'],
  ['rgba(220,20,60, 0.3)', 'rgba(220,20,60, 1)'],
  ['rgba(189,183,107, 0.3)', 'rgba(189,183,107, 1)'],
  ['rgba(47,79,79, 0.3)', 'rgba(47,79,79, 1)'],
  ['rgba(30,144,255, 0.3)', 'rgba(30,144,255, 1)'],
  ['rgba(112,128,144, 0.3)', 'rgba(112,128,144, 1)'],
];
var chartData = seriesData(barData, barColors);

function seriesData(data, colors) {
  return data.map((val, idx) => {
    return {
      value: val,
      itemStyle: {
        color: new graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: colors[idx][0]
          },
          {
            offset: 1,
            color: colors[idx][1]
          }
        ])
      }
    }
  })
}

var option = {
  tooltip: {},
  xAxis: {
    data: ["Category1", "Category2", "Category3", "Category4", "Category5", "Category6"]
  },
  yAxis: {},
  series: [{
    name: 'Series',
    type: 'bar',
    data: chartData
  }]
};

myChart.setOption(option);

<script src='https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js'></script>
<div id="main" style="width: 600px;height:400px;"></div>