正文

教你轻松掌握 ECharts3：统计堆积图入门与应用技巧

/0 浏览量
0827

引言

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供丰富的图表类型，包括折线图、柱状图、饼图、散点图等等。其中，统计堆积图是 ECharts3 中一种非常有用的图表类型，它可以用来展示多个数据系列在时间轴上的变化趋势，特别是在需要展示数据累计效果的场景中。本文将带你从入门到精通，掌握 ECharts3 统计堆积图的应用技巧。

一、统计堆积图的基本概念

1.1 什么是统计堆积图

统计堆积图是一种组合图表，它将多个数据系列堆叠在一起，形成一个整体，用于展示多个数据系列随时间或类别变化的趋势。在 ECharts3 中，统计堆积图可以分为普通堆积图和百分比堆积图。

1.2 普通堆积图与百分比堆积图的区别

  • 普通堆积图：所有数据系列叠加在一起，展示每个数据系列的变化趋势。
  • 百分比堆积图：所有数据系列的数值被转化为百分比，展示每个数据系列占总量的比例。

二、ECharts3 统计堆积图的配置

2.1 基本配置

以下是 ECharts3 统计堆积图的基本配置：

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

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar'
    }]
};

myChart.setOption(option);

2.2 数据系列配置

  • type: 指定图表类型为 ‘stack’ 或 ‘percent’。
  • data: 指定数据系列的数据数组。
series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'stack',
    name: '系列1'
}, {
    data: [720, 711, 811, 921, 890, 900, 950],
    type: 'stack',
    name: '系列2'
}]

2.3 其他配置

  • title: 图表标题配置。
  • tooltip: 鼠标悬停提示框配置。
  • legend: 图例配置。
  • grid: 布局配置。

三、统计堆积图的应用场景

  • 营销数据分析：展示不同产品、不同渠道的销售额变化趋势。
  • 财务数据分析：展示不同时间段、不同项目的收入和支出情况。
  • 生产数据分析：展示不同生产线、不同工序的产量变化情况。

四、实战案例

4.1 案例一：展示一周内每日销售额

option = {
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销售额',
        type: 'stack',
        data: [120, 200, 150, 80, 70, 110, 130]
    }]
};

4.2 案例二：展示不同渠道的销售额占比

option = {
    xAxis: {
        type: 'category',
        data: ['线上', '线下']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销售额',
        type: 'percent',
        data: [
            {value: 55, name: '线上'},
            {value: 45, name: '线下'}
        ]
    }]
};

五、总结

本文介绍了 ECharts3 统计堆积图的基本概念、配置方法、应用场景和实战案例。通过学习本文，相信你已经掌握了统计堆积图的应用技巧。在实际项目中，你可以根据自己的需求调整图表配置，展示更加丰富的数据信息。希望本文能对你有所帮助！

-- 展开阅读全文 --