echarts柱状图渐变色详解

一、设计理念

echarts是一款开源的，基于Javascript的可视化界面库，用于在Web页面中炫酷的呈现数据。和大多数js图表库不同的是，echarts将图形和数据分离，将数据和图形传递给图形组件，使用option设置组件的各种属性、数据和交互事件。echarts主要包括直观的数据管理、主题可配置、快速绘制及海量数据展示等功能。在数据展示方面，通过柱状图、折线图、散点图、饼状图、地图等多种图表，可满足各种复杂数据展示方案。

关于柱状图渐变色的设计理念，设计师们的灵感来源于色彩的变化和变幻，它的设计思路就是渐变色，将色彩渐变过程当成柱状图的高度与数据的关系，通过饱和度和亮度变化，表现出不同的数据层次感。

二、基础柱状图

首先我们需要通过option设置series中的data数据，data是一个数组，在数组中包含多个对象，在对象中设置name和value属性。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }]
};

以上代码显示的柱状图是一种基础形式，仅仅展现了数据和柱形的关系，而没有任何装饰和美化。下面，我们将在基础柱状图的基础上，实现各种渐变色效果。

三、单一渐变色

单一渐变色简单易实现，仅需要设置color属性为渐变色即可。在series的data属性中，加入color属性，如下所示：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    color: new echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        { offset: 0, color: '#00ffe0' },
        { offset: 1, color: '#007fd6' }
      ]
    )
  }]
};

其中，color属性的值为一个echarts.graphic.LinearGradient类型的渐变对象，它接收四个参数，分别表示渐变的方向和起始终止坐标，最后一个参数是数组，表示在该渐变坐标系内，渐变的色值可以设多个颜色值，做出更复杂的渐变效果。

四、多重混合色

多重混合色是将多个颜色和谐混合在一起，呈现出一种新的颜色感觉。通过echarts.graphic.LinearGradient接收的color数组，我们可以设置多个颜色值，如下代码：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    color: new echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        { offset: 0, color: '#d70934' },
        { offset: 0.1, color: '#e8336b' },
        { offset: 0.3, color: '#f6c8a1' },
        { offset: 0.6, color: '#cab3e9' },
        { offset: 1, color: '#8c7ae6' }
      ]
    )
  }]
};

在颜色对象中，通过offset属性设置不同的色值渐变区段，使得颜色更加和谐。

五、动态渐变色

动态渐变色是一种流动的渐变感，柱形的高度跟随渐变的颜色依次变化，呈现出一种时尚 stylish 的效果。这个效果的实现，需要有随着柱状图的高度逐渐变化的渐变色。

option = {
  xAxis: {
    type: 'value',
    max: 100,
    min: 0
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [46, 50, 24, 18, 64, 80, 55],
    itemStyle: {
      normal: {
        color: function(params) {
          var colorList = [
            [
              '#E8B0D6',
              '#ffa750'
            ],
            [
              '#C6C8F3',
              '#F4E8C1'
            ],
            [
              '#97B5F1',
              '#FEC074'
            ],
            [
              '#V94F87',
              '#E32F46'
            ],
            [
              '#00c2ff',
              '#ffb30f'
            ],
            [
              '#AEE0FB',
              '#FF9F7F'
            ],
            [
              '#74ABE2',
              '#EFE994'
            ]
          ];
          var index = params.dataIndex;
          if (params.type == 'bar') {
            return {
              type: 'linear',
              colorStops: [{
                offset: 0,
                color: colorList[index][0]
              }, {
                offset: 1,
                color: colorList[index][1]
              }]
            }
          }
        }
      }
    }
  }]
};

对比上面的代码，可以看到，我们通过设置itemStyle的normal属性为动态渐变色，color属性接收了一个匿名函数，该函数接受params，返回一个类型为‘linear’渐变对象，渐变对象中，通过colorStops数组，设置渐变的色值区间。

六、反向渐变色

反向渐变色与单一渐变色的实现类似，只需颜色设置相反即可。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    color: new echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        { offset: 0, color: '#007fd6' },
        { offset: 1, color: '#00ffe0' }
      ]
    )
  }]
};

从横向对比角度看，反向渐变色的柱形图和单一渐变色的柱形图相比，显得更加突出。

七、总结

以上就是对于echarts柱状图渐变色的详细讲解，通过单一渐变色、多重混合色、动态渐变色和反向渐变色等多种方案，实现了不同风格的图表色彩更加突出，展示数据更加生动的效果。在实际开发中，可以根据不同的需求选择相应的渐变方案，来呈现出更加优美、丰富、时尚的数据图表。