正文

新手必看！轻松掌握echarts堆积图，可视化数据分析实战技巧全解析

/0 浏览量
0624

一、ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一整套图表的解决方案，可以轻松实现各种图表的绘制。堆积图是 ECharts 中的一种图表类型，它可以将多个数据系列堆叠在一起，形成一个整体，非常适合展示数据之间的累积关系。

二、ECharts 堆积图的基本使用

2.1 引入 ECharts 库

首先，你需要引入 ECharts 库。可以通过以下方式引入：

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

2.2 创建图表容器

在 HTML 中创建一个用于绘制图表的容器：

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

2.3 初始化图表

在 JavaScript 中，初始化一个图表实例，并设置图表的配置项和数据：

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

var option = {
    title: {
        text: 'ECharts 堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart.setOption(option);

2.4 设置堆积图

在 series 配置项中，将 type 属性设置为 'stack'，即可将数据系列堆叠在一起：

series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    stack: '总量'
}]

三、ECharts 堆积图的进阶使用

3.1 设置堆叠方式

ECharts 堆积图支持多种堆叠方式，包括 'value'、'sum'、'average' 等。可以通过 stack 属性设置堆叠方式：

series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    stack: '总量'
}, {
    name: '增长率',
    type: 'bar',
    data: [15, 10, 20, 5, 5, 15],
    stack: '总量'
}]

3.2 设置图例

通过 legend 配置项，可以设置图例的显示方式，例如：

legend: {
    data: ['销量', '增长率']
}

3.3 设置坐标轴

通过 xAxis 和 yAxis 配置项，可以设置坐标轴的显示方式，例如：

xAxis: {
    type: 'category',
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
    type: 'value'
}

四、实战案例：ECharts 堆积图应用

下面是一个使用 ECharts 堆积图展示销售额和利润的实战案例：

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

var option = {
    title: {
        text: '销售额与利润对比'
    },
    tooltip: {},
    legend: {
        data:['销售额', '利润']
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销售额',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110],
        stack: '总量'
    }, {
        name: '利润',
        type: 'bar',
        data: [60, 90, 60, 30, 40, 60],
        stack: '总量'
    }]
};

myChart.setOption(option);

通过以上步骤，你可以轻松地使用 ECharts 堆积图进行可视化数据分析。在实际应用中，你可以根据自己的需求调整图表的配置项，以达到最佳展示效果。

-- 展开阅读全文 --