正文

新手必看：如何用echarts轻松制作堆积图，可视化数据分析入门教程

/0 浏览量
0607

了解堆积图

堆积图是一种常见的图表类型，用于展示多个系列数据在时间或类别上的累积情况。它可以帮助我们清晰地看到各个系列数据的增长趋势和占比情况。在使用 ECharts 制作堆积图之前，我们需要先了解堆积图的基本构成和特性。

准备工作

在开始制作堆积图之前，我们需要做一些准备工作：

  1. 安装 ECharts：首先，我们需要在项目中引入 ECharts 库。可以通过以下方式引入：
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  1. 准备数据：堆积图需要的数据通常包括类别数据、系列数据和值数据。以下是一个简单的示例数据：
var data = [
  {name: '类别A', value: [120, 200, 150, 80, 70, 110, 130]},
  {name: '类别B', value: [60, 70, 90, 100, 120, 130, 140]},
  {name: '类别C', value: [80, 100, 90, 120, 150, 130, 160]}
];

创建堆积图

以下是使用 ECharts 创建堆积图的步骤：

  1. 初始化图表：首先，我们需要在 HTML 中创建一个用于显示图表的容器。
<div id="main" style="width: 600px;height:400px;"></div>
  1. 配置图表：接下来，我们需要配置图表的选项。以下是一个简单的堆积图配置示例：
var myChart = echarts.init(document.getElementById('main'));

var option = {
  title: {
    text: '堆积图示例'
  },
  tooltip: {},
  legend: {
    data:['类别A', '类别B', '类别C']
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
  },
  yAxis: {},
  series: [
    {
      name: '类别A',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130]
    },
    {
      name: '类别B',
      type: 'bar',
      stack: '总量',
      data: [60, 70, 90, 100, 120, 130, 140]
    },
    {
      name: '类别C',
      type: 'bar',
      stack: '总量',
      data: [80, 100, 90, 120, 150, 130, 160]
    }
  ]
};

myChart.setOption(option);
  1. 运行图表：将以上代码保存为 HTML 文件，并在浏览器中打开，即可看到堆积图的效果。

总结

通过以上步骤，我们已经成功地使用 ECharts 制作了一个简单的堆积图。在实际应用中，我们可以根据需求调整图表的样式、颜色、数据等属性，以更好地展示数据。希望这个入门教程能帮助你快速掌握堆积图制作技巧。

-- 展开阅读全文 --