正文

从入门到精通：轻松掌握echarts堆积图，实现数据分析可视化

/0 浏览量
0807

ECharts 是一款使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、散点图等，可以方便地实现各种数据的可视化展示。堆积图是 ECharts 中的一种图表类型，它可以将多个数据系列按照一定的顺序堆叠在一起，形成一层层的视觉效果，非常适合展示多个数据系列之间的趋势和对比。本文将带您从入门到精通，轻松掌握 ECharts 堆积图，实现数据分析可视化。

初识 ECharts 堆积图

什么是堆积图？

堆积图（Stacked Chart）是一种通过将多个数据系列堆叠在一起来展示数据的图表类型。它可以将多个数据系列按照一定的顺序堆叠起来，形成一个整体，从而方便地观察各个数据系列之间的趋势和对比。

堆积图的适用场景

  • 展示多个数据系列在一段时间内的趋势对比。
  • 分析多个数据系列之间的相对大小。
  • 比较不同类别或组之间的数据变化。

入门：创建第一个 ECharts 堆积图

准备工作

  1. 引入 ECharts 库：在 HTML 文件中引入 ECharts 的 JS 文件。
  2. 创建一个用于绘制图表的 DOM 元素。
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        // 在这里编写你的 JavaScript 代码
    </script>
</body>
</html>

编写代码

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }, {
        name: '销量',
        type: 'bar',
        stack: '总量',
        data: [5, 10, 15, 20, 25, 30],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }]
};

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

浏览效果

在浏览器中打开 HTML 文件，您将看到一个包含堆积图的页面。这个简单的例子展示了如何使用 ECharts 创建一个基本的堆积图。

提升技能：进阶 ECharts 堆积图

添加交互效果

ECharts 提供了丰富的交互效果，例如鼠标悬停、点击事件等。您可以通过为图表元素添加事件监听器来实现这些效果。

myChart.on('click', function (params) {
    console.log(params);
});

调整图表样式

ECharts 允许您通过配置项来调整图表的样式，例如颜色、字体、边框等。

option = {
    // ... 其他配置项
    series: [{
        // ... 其他配置项
        itemStyle: {
            color: '#facc14' // 设置柱状图的填充颜色
        }
    }]
};

动态数据更新

在实际应用中，您可能需要动态地更新图表的数据。ECharts 提供了 setOption 方法来更新图表的配置项和数据。

// 假设有一个新的数据数组
var newData = [10, 20, 30, 40, 50, 60];
// 更新图表数据
myChart.setOption({
    series: [{
        data: newData
    }]
});

精通：实战 ECharts 堆积图

案例一：销售额分析

假设您需要分析某个电商平台的销售额情况，您可以创建一个堆积图来展示不同产品类别在一段时间内的销售额。

option = {
    // ... 其他配置项
    series: [{
        name: '销售额',
        type: 'bar',
        data: [200, 300, 400, 500, 600, 700],
        stack: '总量'
    }, {
        name: '增长率',
        type: 'line',
        stack: '总量',
        data: [10, 20, 30, 40, 50, 60]
    }]
};

案例二：用户行为分析

假设您需要分析用户在网站上的行为，您可以创建一个堆积图来展示不同行为类别在一段时间内的用户数量。

option = {
    // ... 其他配置项
    series: [{
        name: '用户数量',
        type: 'bar',
        data: [100, 200, 300, 400, 500, 600],
        stack: '总量'
    }, {
        name: '活跃用户',
        type: 'line',
        stack: '总量',
        data: [50, 100, 150, 200, 250, 300]
    }]
};

总结

通过本文的学习，您已经从入门到精通掌握了 ECharts 堆积图的使用方法。从简单的图表创建到进阶的交互效果和动态数据更新，再到实战案例分析，您已经具备了使用 ECharts 堆积图进行数据分析可视化的能力。希望本文能够帮助您在数据可视化领域取得更大的成就。

-- 展开阅读全文 --