正文

从入门到精通：echarts堆积图实战解析与案例分享

/0 浏览量
0811

堆积图简介

堆积图是ECharts中的一种图表类型，用于展示多个数据系列在时间或类别的累积情况。它可以将多个数据系列叠加在一起，形成一种累积效果，便于观察各数据系列之间的比较和趋势。

入门篇

1.1 ECharts基础

在开始使用堆积图之前，我们需要对ECharts有一个基本的了解。ECharts是一个使用JavaScript实现的开源可视化库，可以轻松地生成各种图表。以下是一些ECharts的基础概念：

  • 图表类型：ECharts支持多种图表类型，如折线图、柱状图、饼图、地图等。
  • 配置项：图表的配置项包括数据、布局、样式、事件等。
  • 使用方法：通过编写JavaScript代码，将ECharts库引入到项目中，并配置图表的参数。

1.2 堆积图配置

堆积图的基本配置如下：

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

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],
            stack: '总量'
        },
        {
            name: '系列2',
            type: 'bar',
            data: [10, 5, 15, 5, 5, 10],
            stack: '总量'
        }
    ]
};

myChart.setOption(option);

在上面的代码中，我们创建了一个包含两个数据系列的堆积图。stack属性用于设置数据系列是否叠加。

进阶篇

2.1 饼图堆积

堆积图不仅可以用于柱状图，还可以用于饼图。以下是一个饼图堆积的示例：

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

var option = {
    title: {
        text: '饼图堆积示例'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data:['系列1', '系列2']
    },
    series: [
        {
            name: '系列1',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'系列1'},
                {value:310, name:'系列2'},
                {value:234, name:'系列3'},
                {value:135, name:'系列4'},
                {value:1548, name:'系列5'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);

2.2 多维度堆积

在实际应用中，堆积图通常用于展示多个维度上的数据。以下是一个多维度堆积的示例：

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"]
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            data: [5, 20, 36, 10, 10, 20]
        },
        {
            name: '系列2',
            type: 'bar',
            stack: '总量',
            data: [10, 5, 15, 5, 5, 10]
        },
        {
            name: '系列3',
            type: 'bar',
            stack: '总量',
            data: [15, 5, 25, 10, 10, 20]
        }
    ]
};

myChart.setOption(option);

实战篇

3.1 项目背景

假设我们需要展示一家公司的月销售额，包括线上和线下销售。以下是一个实战案例：

3.1.1 数据准备

首先，我们需要准备以下数据：

月份 线上销售 线下销售
1月 5000 8000
2月 6000 7000
3月 7000 6000
4月 8000 5000
5月 9000 4000
6月 10000 3000

3.1.2 图表配置

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

var option = {
    title: {
        text: '月销售额堆积图'
    },
    tooltip: {},
    legend: {
        data:['线上销售', '线下销售']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    yAxis: {},
    series: [
        {
            name: '线上销售',
            type: 'bar',
            data: [5000, 6000, 7000, 8000, 9000, 10000]
        },
        {
            name: '线下销售',
            type: 'bar',
            data: [8000, 7000, 6000, 5000, 4000, 3000]
        }
    ]
};

myChart.setOption(option);

3.2 结果分析

通过观察堆积图，我们可以发现以下信息：

  • 6月份的销售额最高，达到10000元。
  • 线上销售额呈现上升趋势，而线下销售额呈现下降趋势。
  • 3月份的销售额最低，为7000元。

总结

本文从入门到精通，详细介绍了ECharts堆积图的配置、实战案例和结果分析。通过学习本文，读者可以掌握堆积图的基本用法，并将其应用于实际项目中。希望本文对大家有所帮助！

-- 展开阅读全文 --