正文

如何用 ECharts 制作实用的堆积图：轻松展示数据分层，助力决策分析

/0 浏览量
0824

使用 ECharts 制作实用的堆积图：轻松展示数据分层，助力决策分析

堆积图（Stacked Bar Chart）是一种在 ECharts 中非常实用的图表类型，它可以将多个数据系列堆叠在一起，使得同一时间点的多个数据可以直观地对比。通过堆积图，我们可以轻松展示数据的分层，这对于决策分析和数据展示非常有帮助。

一、ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、散点图、雷达图、地图等。ECharts 可以轻松地集成到各种 Web 项目中，并且易于定制。

二、堆积图的基本原理

堆积图由多个数据系列组成，每个数据系列都可以视为一个“层”，多个层叠加在一起形成整个图表。在 ECharts 中，堆积图通常使用 stack 属性来指定数据系列如何堆叠。

三、制作堆积图的步骤

  1. 准备数据

首先，我们需要准备数据。堆积图的数据通常包含多个维度，例如时间、类别和数值。以下是一个简单的数据示例：

   var data = [
       {name: '类别1', data: [120, 200, 150, 80, 70, 110, 130]},
       {name: '类别2', data: [60, 70, 90, 100, 120, 130, 140]},
       {name: '类别3', data: [90, 100, 120, 150, 160, 170, 180]}
   ];
  1. 配置 ECharts 实例

创建一个 ECharts 实例，并设置图表的配置项。

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

   var option = {
       title: {
           text: '堆积图示例'
       },
       tooltip: {},
       legend: {
           data:['类别1', '类别2', '类别3']
       },
       xAxis: {
           data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
       },
       yAxis: {},
       series: [{
           name: '类别1',
           type: 'bar',
           stack: '总量',
           data: [120, 200, 150, 80, 70, 110, 130]
       }, {
           name: '类别2',
           type: 'bar',
           stack: '总量',
           data: [60, 70, 90, 100, 120, 130, 140]
       }, {
           name: '类别3',
           type: 'bar',
           stack: '总量',
           data: [90, 100, 120, 150, 160, 170, 180]
       }]
   };

   myChart.setOption(option);
  1. 自定义样式

根据需求，我们可以自定义图表的样式，例如颜色、字体、边框等。

   option = {
       // ... 其他配置项
       series: [{
           name: '类别1',
           type: 'bar',
           stack: '总量',
           itemStyle: {
               color: '#facc14'
           },
           data: [120, 200, 150, 80, 70, 110, 130]
       }, {
           name: '类别2',
           type: 'bar',
           stack: '总量',
           itemStyle: {
               color: '#13c2c2'
           },
           data: [60, 70, 90, 100, 120, 130, 140]
       }, {
           name: '类别3',
           type: 'bar',
           stack: '总量',
           itemStyle: {
               color: '#f5222d'
           },
           data: [90, 100, 120, 150, 160, 170, 180]
       }]
   };

四、堆积图的应用场景

堆积图适用于以下场景：

  1. 数据对比：展示同一时间点的多个数据系列，例如不同产品的销售额、不同渠道的用户数量等。
  2. 趋势分析：分析数据随时间的变化趋势，例如月度销售额、季度用户增长等。
  3. 数据分层：展示数据的多个维度，例如不同地区、不同年龄段的用户数量等。

五、总结

通过 ECharts 制作堆积图，我们可以轻松地展示数据的分层，这对于决策分析和数据展示非常有帮助。在实际应用中，我们可以根据需求自定义图表的样式和配置项，以达到最佳的视觉效果。

-- 展开阅读全文 --