用ECharts轻松呈现堆叠柱状图，还能直观展现总数值

2023-11-04 02:23:55

ECharts 堆叠柱状图简介

ECharts是一款功能强大的开源数据可视化库，可以帮助您轻松创建各种类型的图表。它不仅可以创建简单的柱状图，还可以创建堆叠柱状图，以便于比较不同系列的数据。

堆叠柱状图是一种特殊类型的柱状图，它将多个系列的数据堆叠在一起，以便于比较它们的相对大小。堆叠柱状图非常适合显示不同类别的数据在一段时间内的变化趋势。

在ECharts中显示堆叠柱状图的总数值

在ECharts中显示堆叠柱状图的总数值非常简单。您只需要在初始化图表时，将showTotal属性设置为true即可。

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

var option = {
  ...
  series: [{
    type: 'bar',
    stack: '总量',
    showTotal: true
  },
  ...
  ]
};

myChart.setOption(option);

防止点击隐藏图例时总数值仍然能准确显示

在默认情况下，当您点击图例隐藏某个系列时，相应的总数值也会被隐藏。为了防止这种情况发生，您可以在初始化图表时，将legend.selectedMode属性设置为'multiple'。

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

var option = {
  ...
  legend: {
    selectedMode: 'multiple'
  },
  series: [{
    type: 'bar',
    stack: '总量',
    showTotal: true
  },
  ...
  ]
};

myChart.setOption(option);

这样，当您点击图例隐藏某个系列时，相应的总数值仍然会显示。

完整的代码示例

以下是一个完整的代码示例，演示了如何在ECharts中显示堆叠柱状图的总数值，以及如何防止点击隐藏图例时总数值仍然能准确显示。

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

var option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    selectedMode: 'multiple'
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销售额',
    type: 'bar',
    stack: '总量',
    data: [1200, 1400, 1600, 1800, 2000, 2200, 2400, 2600, 2800, 3000, 3200, 3400],
    showTotal: true
  },
  {
    name: '成本',
    type: 'bar',
    stack: '总量',
    data: [800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900],
    showTotal: true
  },
  {
    name: '利润',
    type: 'bar',
    stack: '总量',
    data: [400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500],
    showTotal: true
  }]
};

myChart.setOption(option);