如何为echarts bar系列中的每个bar应用不同的线性梯度？

编程问答 2022-08-11

问题描述

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

解决方法

是的，很简单。

enter image description here

在小节系列中，每个数据点都有option to define style。请看一下my previous answer。在您的情况下，所有内容都是相同的，但纯色会更改为我们的渐变。

对于控制渐变和他的颜色，您需要使用如下代码：

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

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

function seriesData(data,colors) {
  return data.map((val,idx) => {
    return {
      value: val,itemStyle: {
        color: new graphic.LinearGradient(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>

bar-chartchartsdata-visualizationechartsechartsreactjsreactjsreactjsreactjs