正文

新手必看！如何用 ECharts 堆积图轻松展示复杂数据分析

/0 浏览量
0423

堆积图（Stacked Chart）是一种在 ECharts 中常用的图表类型，它能够将多个数据系列叠加在一起，从而展示各个数据系列在总数中的占比情况。对于新手来说，堆积图可以帮助你更直观地理解数据的分布和变化趋势。下面，我将详细介绍如何使用 ECharts 创建堆积图，并展示一些复杂数据分析的应用实例。

一、ECharts 堆积图基本概念

在 ECharts 中，堆积图主要有以下几种类型：

  1. 面积堆积图：强调数据系列的总和。
  2. 百分比堆积图：强调每个数据系列在总和中的占比。
  3. 普通堆积图：强调每个数据系列的变化趋势。

二、创建 ECharts 堆积图

1. 准备工作

首先，你需要引入 ECharts 库。可以通过以下方式引入：

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

2. 基本配置

下面是一个简单的 ECharts 堆积图配置示例：

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

var option = {
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2', '系列3']
    },
    xAxis: {
        data: ["A", "B", "C", "D", "E", "F", "G"]
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'stack',
            data: [5, 20, 36, 10, 10, 20, 25]
        },
        {
            name: '系列2',
            type: 'stack',
            data: [2, 5, 15, 3, 5, 10, 15]
        },
        {
            name: '系列3',
            type: 'stack',
            data: [1, 4, 9, 1, 4, 9, 1]
        }
    ]
};

myChart.setOption(option);

3. 高级配置

ECharts 提供了丰富的配置项，你可以根据需求进行定制。以下是一些常见的配置项：

  • series.type：设置图表类型，如 ‘line’、’bar’、’pie’ 等。
  • series.stack：设置是否叠加。
  • series.label：设置数据标签的显示方式。
  • series.areaStyle：设置面积填充样式。

三、复杂数据分析应用实例

1. 按时间段分析

以下是一个按时间段分析的堆积图示例，展示了某产品在不同时间段内的销量情况：

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

var option = {
    title: {
        text: '按时间段分析'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2', '系列3']
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'stack',
            data: [100, 150, 120, 90, 110, 130]
        },
        {
            name: '系列2',
            type: 'stack',
            data: [120, 140, 110, 130, 150, 160]
        },
        {
            name: '系列3',
            type: 'stack',
            data: [150, 160, 140, 130, 120, 110]
        }
    ]
};

myChart.setOption(option);

2. 按地区分析

以下是一个按地区分析的堆积图示例，展示了某产品在不同地区的销售情况：

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

var option = {
    title: {
        text: '按地区分析'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2', '系列3']
    },
    xAxis: {
        type: 'category',
        data: ['华北', '华东', '华南', '华中', '东北', '西南']
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'stack',
            data: [300, 400, 500, 600, 700, 800]
        },
        {
            name: '系列2',
            type: 'stack',
            data: [400, 500, 600, 700, 800, 900]
        },
        {
            name: '系列3',
            type: 'stack',
            data: [500, 600, 700, 800, 900, 1000]
        }
    ]
};

myChart.setOption(option);

通过以上实例，你可以了解到如何使用 ECharts 堆积图进行复杂数据分析。在实际应用中，你可以根据自己的需求调整图表样式和数据，以更好地展示你的数据。

-- 展开阅读全文 --