深入探究echarts柱狀圖堆疊

一、echarts柱狀圖堆疊混合

echarts柱狀圖堆疊是一種常用的可視化方式，通過堆疊不同數據項的數值，可以直觀地比較不同數據之間的關係。而在實際應用中，很多情況下我們需要在同一個圖表中同時展示多組數據，這時候就需要使用echarts柱狀圖堆疊混合功能。

下面是一個簡單的示例代碼：

{
  tooltip: {},
  legend: {
    data:['蒸發量','降水量','平均溫度']
  },
  xAxis: {
    data: ["1月","2月","3月","4月","5月","6月"]
  },
  yAxis: {},
  series: [{
    name: '蒸發量',
    type: 'bar',
    stack: '總量',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
  },{
    name: '降水量',
    type: 'bar',
    stack: '總量',
    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
  },{
    name: '平均溫度',
    type: 'line',
    yAxisIndex: 1,
    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
  }]
}

在這個例子中，我們定義了三種數據，分別為蒸發量、降水量和平均溫度。前兩個數據是使用堆疊柱狀圖展示的，而第三個數據是使用折線圖展示的。通過這種方式，我們可以很方便地展示多組數據，同時進行比較。

二、echarts柱狀圖堆疊順序

在實際應用中，我們會發現echarts柱狀圖堆疊時，每個數據的位置有時候並不如我們的想像那樣。這時候，我們就需要掌握如何調整echarts柱狀圖堆疊順序。

在echarts中，我們可以通過stack屬性來指定數據的堆疊順序。在多個數據項的stack屬性相同時，數據項會相互堆疊。在多個數據項的stack屬性不同時，會按照stack屬性值從小到大的順序依次堆疊。

下面是一個簡單的示例代碼：

{
  tooltip: {},
  legend: {
    data:['蒸發量','降水量','平均溫度']
  },
  xAxis: {
    data: ["1月","2月","3月","4月","5月","6月"]
  },
  yAxis: {},
  series: [{
    name: '蒸發量',
    type: 'bar',
    stack: 'A',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
  },{
    name: '降水量',
    type: 'bar',
    stack: 'C',
    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
  },{
    name: '平均溫度',
    type: 'line',
    yAxisIndex: 1,
    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2],
    stack: 'B'
  }]
}

在上面的例子中，我們設置了三個數據，分別為蒸發量、降水量和平均溫度。在第一個數據中，我們將堆疊順序設置為了”A”，在第二個和第三個數據中，堆疊順序分別設置為”C”和”B”。可以看出，最終的圖表中，三個數據被按照”A”、”B”、”C”的順序依次堆疊。

三、echarts柱狀圖邊框設置

echarts柱狀圖邊框設置是一個常用的需求，通過設置柱狀圖的邊框樣式，我們可以使得柱狀圖更加美觀、易讀。

在echarts中，我們可以通過itemStyle屬性下的borderColor、borderWidth、borderType屬性來設置邊框的顏色、寬度和樣式。下面是一個簡單的示例代碼：

{
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["1月","2月","3月","4月","5月","6月"]
  },
  yAxis: {},
  series: [{
    name: '蒸發量',
    type: 'bar',
    stack: 'A',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
    itemStyle: {
      borderColor: '#000',
      borderWidth: 2,
      borderType: 'solid'
    }
  }]
}

在上面的例子中，我們為柱狀圖添加了邊框樣式，顏色為黑色，寬度為2像素，樣式為實線。

四、echarts堆疊條形圖

除了豎直方向的柱狀圖外，echarts還支持堆疊條形圖。在堆疊條形圖中，數據項不是按照y軸方向堆疊，而是按照x軸方向堆疊。

下面是一個簡單的示例代碼：

{
  tooltip: {},
  legend: {
    data:['蒸發量','降水量']
  },
  yAxis: {
    data: ["1月","2月","3月","4月","5月","6月"]
  },
  xAxis: {},
  series: [{
    name: '蒸發量',
    type: 'bar',
    stack: '總量',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
  },{
    name: '降水量',
    type: 'bar',
    stack: '總量',
    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
  }]
}

在這個例子中，我們使用y軸來展示月份，使用堆疊條形圖來分別展示蒸發量和降水量。可以看出，在堆疊條形圖中，不同的數據項所代表的矩形會按照x軸方向堆疊在一起。

五、echarts橫向堆疊柱狀圖

除了標準的豎直方向的堆疊柱狀圖外，echarts還支持橫向堆疊柱狀圖。在橫向堆疊柱狀圖中，x軸與y軸的位置發生了顛倒，數據項按照y軸方向堆疊。

下面是一個簡單的示例代碼：

{
  tooltip: {},
  legend: {},
  xAxis: {},
  yAxis: {
    data: ["1月","2月","3月","4月","5月","6月"]
  },
  series: [{
    name: '蒸發量',
    type: 'bar',
    stack: 'A',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
  },{
    name: '降水量',
    type: 'bar',
    stack: 'A',
    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
  }]
}

在這個例子中，我們使用y軸來展示月份，使用橫向堆疊柱狀圖來分別展示蒸發量和降水量。可以看出，在橫向堆疊柱狀圖中，不同的數據項所代表的矩形會按照y軸方向堆疊在一起。

六、echarts柱狀圖怎麼堆疊

前面我們已經介紹了如何使用stack屬性來指定echarts柱狀圖的堆疊順序。除此之外，我們還可以通過series中的stack屬性來實現數據的堆疊。

下面是一個簡單的示例代碼：

{
  tooltip: {},
  legend: {},
  xAxis: {
    data: ["1月","2月","3月","4月","5月","6月"]
  },
  yAxis: {},
  series: [{
    name: '蒸發量',
    type: 'bar',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
    stack: 'A'
  },{
    name: '降水量',
    type: 'bar',
    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
    stack: 'A'
  }]
}

在這個例子中，我們使用了series中的stack屬性，將蒸發量和降水量數據堆疊在了一起。可以看到，蒸發量和降水量數據的位置發生了變化，變成了相互堆疊的狀態。

七、echarts堆疊柱狀圖的圖例

echarts中可以通過legend.show屬性來控制圖例的顯示與否。

下面是一個簡單的示例代碼：

{
  tooltip: {},
  legend: {
    show: false
  },
  xAxis: {
    data: ["1月","2月","3月","4月","5月","6月"]
  },
  yAxis: {},
  series: [{
    name: '蒸發量',
    type: 'bar',
    stack: 'A',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
  },{
    name: '降水量',
    type: 'bar',
    stack: 'A',
    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
  }]
}

在這個例子中，我們通過設置legend.show屬性為false，來隱藏堆疊柱狀圖的圖例。

八、echarts柱狀圖粗細選取

echarts中可以通過barWidth屬性來控制柱狀圖的寬度，也可以通過barMaxWidth和barMinWidth屬性來控制柱狀圖的最大和最小寬度。

下面是一個簡單的示例代碼：

{

tooltip: {},

legend: {},

xAxis: {

data: ["1月","2月","3月","4月","5月","6月"]

},

yAxis: {},

series: [{

name: '蒸發量',

type: 'bar',

data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],

barWidth: 20,

barMaxWidth: 50,

barMinWidth: 10

},{

name: '降水量',

type: 'bar',

data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7],

barWidth: 20,

barMaxWidth:
原創文章，作者：GMIGD，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/371420.html