正文

从零开始，学会用 ECharts 制作实用堆积图，可视化数据分析不再难

/0 浏览量
0518

堆积图（Stacked Bar Chart）是一种常见的统计图表，用于显示多个数据系列在时间或其他分类轴上的累积总和。ECharts 是一款功能强大的开源可视化库，可以轻松实现堆积图等复杂的图表。本文将从零开始，带你一步步学会使用 ECharts 制作实用的堆积图。

一、ECharts 简介

ECharts 是一款基于 JavaScript 的开源可视化库，由百度团队开发。它提供丰富的图表类型，包括折线图、柱状图、饼图、地图等，可以满足各种可视化需求。ECharts 具有以下特点：

  • 丰富的图表类型：支持多种图表类型，满足不同场景需求。
  • 易用性：简单易学，上手快。
  • 高性能：采用 Canvas 渲染，性能优秀。
  • 开源免费：遵循 Apache-2.0 协议，完全免费。

二、安装 ECharts

要使用 ECharts，首先需要在项目中引入 ECharts 库。可以通过以下几种方式引入：

  1. CDN 链接：直接从 CDN 链接引入 ECharts 库。
  2. npm 包：使用 npm 安装 ECharts 包。
  3. git 仓库：克隆 ECharts 仓库到本地。

以下是使用 CDN 链接引入 ECharts 的示例代码：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

三、创建堆积图

1. 准备数据

首先，需要准备堆积图所需的数据。以下是一个示例数据：

var data = [
  {name: '系列1', value: [120, 200, 150, 80, 70, 110, 130]},
  {name: '系列2', value: [60, 100, 80, 70, 120, 90, 100]}
];

2. 配置选项

接下来，配置堆积图的选项。以下是一个简单的堆积图配置示例：

var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['系列1', '系列2']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '系列1',
      type: 'bar',
      stack: '总量',
      data: [120, 200, 150, 80, 70, 110, 130]
    },
    {
      name: '系列2',
      type: 'bar',
      stack: '总量',
      data: [60, 100, 80, 70, 120, 90, 100]
    }
  ]
};

3. 初始化图表

最后，使用 ECharts 初始化图表，并传入配置选项：

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

四、扩展功能

堆积图支持多种扩展功能，例如：

  • 数据标签：显示数据值。
  • 图例：切换数据系列显示。
  • 数据筛选：筛选特定数据系列。
  • 工具箱：保存图表、数据导出等功能。

五、总结

通过本文的介绍，相信你已经学会了如何使用 ECharts 制作实用的堆积图。堆积图可以有效地展示多个数据系列在时间或其他分类轴上的累积总和，帮助您更好地理解和分析数据。在实际应用中，可以根据需求调整堆积图的样式和功能，使其更加美观和实用。

-- 展开阅读全文 --