深入探究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/n/371420.html