正文

轻松上手ECharts堆积图：数据分析利器，可视化实战案例全解析

/0 浏览量
1031

堆积图是ECharts中一种常用的图表类型，它能够将多个数据系列按照一定的顺序堆叠在一起，直观地展示数据之间的累积关系。通过堆积图，我们可以轻松地分析数据的变化趋势、比较不同数据系列之间的关系。本文将带你轻松上手ECharts堆积图，并通过实战案例全解析，让你掌握数据分析的利器。

一、ECharts堆积图基础

1.1 堆积图类型

ECharts堆积图主要分为以下几种类型：

  • 普通堆积图：每个数据系列按照顺序堆叠。
  • 百分比堆积图：每个数据系列以百分比的形式堆叠。
  • 层叠堆积图：每个数据系列按照顺序堆叠，但每个数据点的值等于该点之前所有数据点的值之和。

1.2 堆积图数据格式

堆积图的数据格式通常为二维数组，每个数组元素代表一个数据系列，数组内部元素代表该系列的数据点。

二、ECharts堆积图实战案例

2.1 普通堆积图

以下是一个普通堆积图的示例代码：

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

option = {
    title: {
        text: '普通堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2', '系列3']
    },
    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, 15, 20, 5, 10]
        },
        {
            name: '系列3',
            type: 'bar',
            data: [10, 10, 10, 5, 20, 10]
        }
    ]
};

myChart.setOption(option);

2.2 百分比堆积图

以下是一个百分比堆积图的示例代码：

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

option = {
    title: {
        text: '百分比堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2', '系列3']
    },
    xAxis: {
        data: ["A", "B", "C", "D", "E", "F"]
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'pie',
            radius: '50%',
            center: ['25%', '50%'],
            data: [
                {value: 5, name: '系列1'},
                {value: 20, name: '系列2'},
                {value: 36, name: '系列3'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        {
            name: '系列2',
            type: 'pie',
            radius: '50%',
            center: ['75%', '50%'],
            data: [
                {value: 10, name: '系列1'},
                {value: 5, name: '系列2'},
                {value: 15, name: '系列3'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        {
            name: '系列3',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [
                {value: 10, name: '系列1'},
                {value: 10, name: '系列2'},
                {value: 5, name: '系列3'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);

2.3 层叠堆积图

以下是一个层叠堆积图的示例代码：

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

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

myChart.setOption(option);

三、总结

通过本文的学习，相信你已经对ECharts堆积图有了初步的了解。堆积图作为一种强大的数据分析工具，可以帮助我们更好地理解数据之间的关系。在实际应用中，可以根据需求选择合适的堆积图类型，并通过调整图表样式和配置项，使图表更加美观、易读。希望本文能帮助你轻松上手ECharts堆积图，为你的数据分析之路助力。

-- 展开阅读全文 --