echarts条形图系列中的每个条形如何应用不同的线性渐变？

Question

现在我可以对所有条应用相同的渐变，但我需要根据一个值对每个条应用线性渐变颜色。即第一条从 color1 到 color2 的渐变，第二条可以是从 color1 到 color3 的渐变。我已经浏览了文档，但找不到必要的信息。

Answer 1

是的，很简单。

在酒吧系列中你有 option to define style for each datapoint. Please take a look on the 。在你的情况下，一切都是一样的，但纯色改变了我们的渐变。

对于控制渐变和他的颜色你需要使用这样的东西：

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>

echarts条形图系列中的每个条形如何应用不同的线性渐变？

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

charts

data-visualization

bar-chart

reactjs

echarts