使用 Echarts 制作堆叠柱状图并在顶部显示总数值的技巧

最新推荐文章于 2025-03-24 18:40:53 发布

原创最新推荐文章于 2025-03-24 18:40:53 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #信息可视化 #前端

本文介绍了如何使用Echarts这个JavaScript数据可视化库创建堆叠柱状图，并在图例顶部显示总数值。通过设置图表组件、数据、计算总值并添加图形元素，可以实现直观的数据展示效果。

部署运行你感兴趣的模型镜像

在数据可视化中，堆叠柱状图是一种常见的图表类型，它可以同时展示多个维度的数据，并通过堆叠的方式呈现数据之间的关系。而在柱状图的顶部显示总数值则可以提供更直观的数据信息。本文将介绍如何使用 Echarts（一个流行的 JavaScript 数据可视化库）来制作堆叠柱状图，并在顶部显示总数值。

首先，确保你已经引入了 Echarts 库，并创建了一个 HTML 容器来显示图表。以下是一个简单的 HTML 模板：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>堆叠柱状图示例</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chartContainer" style="width: 600px; height: 400px;"></div>
  <script src="chart.js"></script>
</body>
</html>

在上面的模板中，我们引入了 Echarts 库，并在 <head> 标签中添加了一个 <script> 标签来引入图表的配置和数据。

接下来，我们创建一个 JavaScript 文件 chart.js，用于配置和渲染堆叠柱状图。下面是一个基本的示例，你可以根据自己的数据和需求进行修改：

// chart.js

// 假设我们有三个维度的数据，分别是 A、B 和 C
const data = [
  { name: '数据1', valueA: 10, valueB: 20, valueC: 30 },
  { name: '数据2', valueA: 15, valueB: 25, valueC: 35 },
  { name: '数据3', valueA: 20, valueB: 30, valueC: 40 }
];

// 创建一个 Echarts 实例
const chart = echarts.init(document.getElementById('chartContainer'));

// 设置图表的配置项
const option = {
  // 设置图表的标题
  title: {
    text: '堆叠柱状图示例'
  },
  // 设置图表的提示框组件
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  // 设置图表的图例组件
  legend: {
    data: ['A', 'B', 'C']
  },
  // 设置图表的 x 轴配置
  xAxis: {
    type: 'category',
    data: data.map(item => item.name)
  },
  // 设置图表的 y 轴配置
  yAxis: {
    type: 'value'
  },
  // 设置图表的系列（数据列）
  series: [
    {
      name: 'A',
      type: 'bar',
      stack: 'total',
      data: data.map(item => item.valueA)
    },
    {
      name: 'B',
      type: 'bar',
      stack: 'total',
      data: data.map(item => item.valueB)
    },
    {
      name: 'C',
      type: 'bar',
      stack: 'total',
      data: data.map(item => item.valueC)
    }
  ]
};

// 渲染图表
chart.setOption(option);

// 在图表顶部显示总数值
const totalValues = data.map(item => item.valueA + item.valueB + item.valueC);
const totalLabelStyle = {
  color: '#000',
  fontSize: 14,
  fontWeight: 'bold',
  textAlign: 'center',
  textBaseline: 'middle',
  position: 'top'
};

chart.setOption({
  graphic: data.map((item, index) => ({
    type: 'text',
    left: chart.convertToPixel('grid', index),
    top: chart.convertToPixel('grid', totalValues[index]),
    style: totalLabelStyle,
    z: 100,
    silent: true,
    text: totalValues[index].toString()
  }))
});