正文

从入门到精通：轻松上手echarts堆积图，可视化数据分析实战技巧

/0 浏览量
0906

了解 ECharts 堆积图

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一套丰富的图表类型，包括折线图、柱状图、饼图、地图等。堆积图是 ECharts 中的一种图表类型，它可以将多个数据系列堆叠在一起，以展示数据的总和。

堆积图的特点

  • 数据堆叠：可以将多个数据系列堆叠在一起，便于比较不同数据系列之间的总和。
  • 颜色区分：可以通过不同的颜色来区分不同的数据系列。
  • 交互性：支持鼠标悬停、点击等交互操作，可以查看详细数据。

入门：搭建 ECharts 环境

在开始使用 ECharts 堆积图之前，首先需要搭建一个 ECharts 的环境。

1. 引入 ECharts 库

可以通过以下方式引入 ECharts 库：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

2. 创建图表容器

在 HTML 中创建一个用于显示图表的容器：

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

基础：绘制简单的堆积图

接下来，我们将使用 ECharts 绘制一个简单的堆积图。

1. 准备数据

var data = [
    {name: 'A', value: [120, 200, 150]},
    {name: 'B', value: [80, 100, 90]},
    {name: 'C', value: [70, 110, 130]}
];

2. 配置 ECharts 选项

var option = {
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['A', 'B', 'C']
    },
    xAxis: {
        data: ["1月", "2月", "3月"]
    },
    yAxis: {},
    series: [{
        name: 'A',
        type: 'bar',
        stack: '总量',
        data: [120, 200, 150]
    }, {
        name: 'B',
        type: 'bar',
        stack: '总量',
        data: [80, 100, 90]
    }, {
        name: 'C',
        type: 'bar',
        stack: '总量',
        data: [70, 110, 130]
    }]
};

3. 初始化图表

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

进阶：自定义堆积图

在了解了 ECharts 堆积图的基础之后，我们可以进一步学习如何自定义堆积图。

1. 颜色配置

可以通过 itemStyle 属性来配置颜色：

itemStyle: {
    color: function (params) {
        // 根据数据系列返回颜色
        return '#'+Math.floor(Math.random()*16777215).toString(16);
    }
}

2. 标题和图例配置

title: {
    text: '自定义堆积图',
    left: 'center'
},
legend: {
    orient: 'vertical',
    left: 'left'
}

3. 坐标轴配置

xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
},
yAxis: {
    type: 'value'
}

实战：使用堆积图进行数据分析

在实际应用中，我们可以使用堆积图来展示各种数据，例如销售数据、库存数据等。

1. 数据准备

var data = [
    {name: '产品1', value: [120, 200, 150, 180, 100, 130, 160]},
    {name: '产品2', value: [80, 100, 90, 110, 90, 120, 100]},
    {name: '产品3', value: [70, 110, 130, 120, 110, 130, 140]}
];

2. 配置 ECharts 选项

var option = {
    title: {
        text: '产品销售数据'
    },
    tooltip: {},
    legend: {
        data:['产品1', '产品2', '产品3']
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: {},
    series: [{
        name: '产品1',
        type: 'bar',
        stack: '总量',
        data: [120, 200, 150, 180, 100, 130, 160]
    }, {
        name: '产品2',
        type: 'bar',
        stack: '总量',
        data: [80, 100, 90, 110, 90, 120, 100]
    }, {
        name: '产品3',
        type: 'bar',
        stack: '总量',
        data: [70, 110, 130, 120, 110, 130, 140]
    }]
};

3. 初始化图表

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

通过以上步骤，我们可以轻松上手 ECharts 堆积图，并将其应用于数据分析中。希望这篇文章能够帮助你更好地理解和掌握 ECharts 堆积图。

-- 展开阅读全文 --