正文

新手必看：轻松掌握echarts堆积图，实战案例解析，让数据可视化更简单

/0 浏览量
0726

在数据可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，它可以帮助我们轻松地创建各种类型的图表，其中堆积图是其中一种常用的图表类型。堆积图可以清晰地展示数据的多维度信息，对于新手来说，掌握堆积图的使用方法至关重要。本文将为你提供详细的实战案例解析，让你轻松掌握 ECharts 堆积图的使用技巧。

一、ECharts 堆积图基本概念

1.1 堆积图的定义

堆积图是一种将多个数据系列堆叠在一起，以展示不同系列之间关系和数据总和的图表类型。它适用于比较不同数据系列在不同时间点的累积值。

1.2 堆积图的特点

  • 能够直观地展示数据的累积变化；
  • 可以通过调整系列顺序来突出重点；
  • 支持多种堆积方式，如百分比堆积和绝对值堆积。

二、ECharts 堆积图的基本用法

2.1 引入 ECharts 库

在使用 ECharts 堆积图之前，首先需要在 HTML 文件中引入 ECharts 库。可以通过以下代码实现：

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

2.2 初始化图表

在 HTML 文件中，创建一个用于放置图表的容器元素，并为该元素添加一个 id 属性，如下所示：

<div id="main" style="width: 600px;height:400px;"></div>

2.3 配置图表

在 JavaScript 中，使用以下代码初始化 ECharts 实例，并配置堆积图：

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

var option = {
    title: {
        text: 'ECharts 堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列 1', '系列 2']
    },
    xAxis: {
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    yAxis: {},
    series: [{
        name: '系列 1',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 25],
        stack: '总量'
    }, {
        name: '系列 2',
        type: 'bar',
        data: [2, 5, 20, 30, 10, 5, 5],
        stack: '总量'
    }]
};

myChart.setOption(option);

2.4 添加交互功能

ECharts 提供了丰富的交互功能，如数据高亮、点击事件等。以下是一个示例，演示如何实现点击系列时切换堆积方式：

myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        var seriesName = params.seriesName;
        if (option.series[0].stack === seriesName) {
            option.series[0].stack = '';
            option.series[1].stack = '';
        } else {
            option.series[0].stack = seriesName;
            option.series[1].stack = seriesName;
        }
        myChart.setOption(option);
    }
});

三、实战案例解析

3.1 案例：展示一周内每天销售额

以下是一个使用 ECharts 堆积图展示一周内每天销售额的案例：

var data = {
    xAxis: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    series1: [5, 20, 36, 10, 10, 20, 25],
    series2: [2, 5, 20, 30, 10, 5, 5]
};

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

var option = {
    title: {
        text: '一周内每天销售额'
    },
    tooltip: {},
    legend: {
        data:['销售额']
    },
    xAxis: {
        data: data.xAxis
    },
    yAxis: {},
    series: [{
        name: '销售额',
        type: 'bar',
        data: data.series1,
        stack: '总量'
    }]
};

myChart.setOption(option);

3.2 案例：展示不同商品类别的销售额占比

以下是一个使用 ECharts 堆积图展示不同商品类别的销售额占比的案例：

var data = {
    legend: ['食品', '家电', '服装', '数码'],
    series: [{
        name: '销售额',
        type: 'bar',
        stack: '总量',
        data: [300, 200, 100, 400]
    }]
};

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

var option = {
    title: {
        text: '不同商品类别的销售额占比'
    },
    tooltip: {},
    legend: {
        data: data.legend
    },
    xAxis: {
        type: 'category',
        data: data.legend
    },
    yAxis: {},
    series: data.series
};

myChart.setOption(option);

四、总结

通过本文的介绍，相信你已经对 ECharts 堆积图有了基本的了解。在实际应用中，你可以根据需求调整堆积图的各种配置，使其更加美观和实用。希望本文能够帮助你轻松掌握 ECharts 堆积图的使用方法，让你的数据可视化更加简单。

-- 展开阅读全文 --