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柱狀圖漸變色的詳細講解，通過單一漸變色、多重混合色、動態漸變色和反向漸變色等多種方案，實現了不同風格的圖表色彩更加突出，展示數據更加生動的效果。在實際開發中，可以根據不同的需求選擇相應的漸變方案，來呈現出更加優美、豐富、時尚的數據圖表。