正文

教你用ECharts轻松绘制堆积图，数据分析可视化实战指南

/0 浏览量
0922

1. 引言：什么是堆积图？

堆积图是一种常用的统计图表，用于显示多个数据系列的变化趋势。它将多个数据系列重叠在一起，形成一个整体，以便于比较不同数据系列之间的相对变化。ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地创建各种图表，包括堆积图。

2. 安装和配置ECharts

在开始绘制堆积图之前，你需要确保你的环境中已经安装了 ECharts。你可以通过以下步骤来安装和配置 ECharts：

2.1 安装 ECharts

你可以从 ECharts 的官方网站下载最新版本的 ECharts 库，或者使用 npm/yarn 进行安装：

# 使用 npm 安装
npm install echarts --save

# 使用 yarn 安装
yarn add echarts

2.2 引入 ECharts

在你的 HTML 文件中，引入 ECharts 的 JS 文件：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

或者，如果你通过 npm/yarn 安装了 ECharts，可以直接在 JavaScript 文件中引入：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

3. 创建堆积图的基本结构

在 HTML 文件中，你可以创建一个用于渲染图表的容器：

<div id="main" style="width: 600px;height:400px;"></div>

然后，使用 JavaScript 初始化图表：

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

4. 配置堆积图

现在，你可以配置堆积图的各种属性。以下是一个简单的堆积图配置示例：

var option = {
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2']
    },
    xAxis: {
        data: ["A", "B", "C", "D", "E", "F"]
    },
    yAxis: {},
    series: [{
        name: '系列1',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }, {
        name: '系列2',
        type: 'bar',
        data: [10, 5, 26, 20, 5, 10],
        itemStyle: {
            color: 'rgba(0,0,0,0)'
        },
        emphasis: {
            itemStyle: {
                color: '#333'
            }
        }
    }]
};

myChart.setOption(option);

在这个配置中，我们创建了一个包含两个系列（系列1 和 系列2）的堆积图。每个系列都包含一组数据，其中系列2 的数据被设置为透明（color: 'rgba(0,0,0,0)'），这样它就会在系列1 的数据上显示。

5. 交互和样式

ECharts 支持丰富的交互和样式配置。你可以通过以下方式添加交互：

  • 添加数据提示框（tooltip）
  • 添加图例（legend）
  • 添加标题（title）
  • 添加图例交互（legend.select 和 legend.unselect）

5.1 添加数据提示框

数据提示框可以显示鼠标悬停时的数据信息。以下是添加数据提示框的示例：

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
}

5.2 添加图例交互

图例交互允许用户通过点击图例来切换系列显示。以下是添加图例交互的示例：

legend: {
    data:['系列1', '系列2'],
    selectedMode: 'multiple'
}

6. 实战案例：分析销售数据

假设你有一组销售数据，包含不同产品在不同时间段的销售额。你可以使用堆积图来分析这些数据。

6.1 数据准备

首先，你需要准备你的数据。以下是一个示例数据集：

var data = {
    xAxisData: ['1月', '2月', '3月', '4月', '5月'],
    seriesData: [
        {name: '产品A', data: [100, 120, 150, 130, 140]},
        {name: '产品B', data: [80, 90, 100, 110, 120]},
        {name: '产品C', data: [60, 70, 80, 90, 100]}
    ]
};

6.2 创建堆积图

现在，你可以使用这些数据来创建堆积图：

var option = {
    title: {
        text: '销售数据堆积图'
    },
    tooltip: {},
    legend: {
        data: data.seriesData.map(item => item.name)
    },
    xAxis: {
        data: data.xAxisData
    },
    yAxis: {},
    series: data.seriesData.map(item => ({
        name: item.name,
        type: 'bar',
        data: item.data
    }))
};

myChart.setOption(option);

通过以上步骤，你可以轻松地使用 ECharts 创建堆积图，并将其应用于数据分析中。堆积图可以帮助你直观地比较不同数据系列之间的相对变化，从而更好地理解数据。

-- 展开阅读全文 --