正文

新手必看！轻松掌握ECharts堆积图，数据分析不再难，实战案例教学，让你快速上手！

/0 浏览量
0415

在当今数据驱动的世界里，可视化工具已经成为数据分析中不可或缺的一环。ECharts，作为国内一款非常受欢迎的JavaScript图表库，可以帮助我们轻松地将数据转化为图形，直观地展示数据之间的关系。堆积图作为一种常用的图表类型，能够很好地展示多个数据系列在整体中的占比情况。本文将带你轻松掌握ECharts堆积图，并通过实战案例教学，让你快速上手！

ECharts堆积图基础

1. 什么是堆积图？

堆积图是一种组合图表，可以同时展示多个数据系列在整体中的占比。它由多个系列组成，每个系列的数据会在前一个系列的基础上进行累加。

2. ECharts堆积图的特点

  • 直观易读：堆积图能够清晰地展示各个数据系列在整体中的占比，便于比较和分析。
  • 灵活配置：ECharts提供了丰富的配置选项，可以满足各种场景下的需求。
  • 丰富的交互：支持鼠标悬停、点击等交互方式，提供更丰富的用户体验。

ECharts堆积图实战案例

1. 环形堆积图

环形堆积图是一种特殊的堆积图，适用于展示多个数据系列在整体中的占比情况。以下是一个简单的环形堆积图案例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['系列1', '系列2', '系列3', '系列4', '系列5']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '系列1'},
                {value: 310, name: '系列2'},
                {value: 234, name: '系列3'},
                {value: 135, name: '系列4'},
                {value: 1548, name: '系列5'}
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

2. 柱状堆积图

柱状堆积图适用于展示多个数据系列在时间序列中的占比情况。以下是一个简单的柱状堆积图案例：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['系列1', '系列2', '系列3']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '系列1',
            type: 'bar',
            stack: '总量',
            data: [5, 20, 36, 10, 10, 20, 25, 20, 15, 30, 10, 5]
        },
        {
            name: '系列2',
            type: 'bar',
            stack: '总量',
            data: [2, 5, 8, 4, 5, 6, 7, 3, 4, 9, 5, 1]
        },
        {
            name: '系列3',
            type: 'bar',
            stack: '总量',
            data: [1, 2, 3, 3, 4, 5, 6, 4, 5, 7, 6, 3]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

总结

通过本文的学习，相信你已经对ECharts堆积图有了基本的了解。在实际应用中，你可以根据需求调整图表样式、交互效果等。希望这些案例能够帮助你快速上手ECharts堆积图，为你的数据分析之路提供助力！

-- 展开阅读全文 --