正文

从入门到精通：echarts堆积图实战解析与应用技巧

/0 浏览量
0608

一、ECharts 堆积图简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于制作各种图表。堆积图是 ECharts 中的一种图表类型，用于显示多个系列的数据堆叠在一起的情况。它适用于展示数据在一段时间内的累积变化，例如销售额、股票价格等。

二、ECharts 堆积图基本使用

2.1 初始化图表

首先，需要引入 ECharts 的 JS 库。可以通过 CDN 链接或下载源码的方式引入。

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

2.2 基本配置

以下是一个简单的堆积图示例：

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

var option = {
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2']
    },
    xAxis: {
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    yAxis: {},
    series: [{
        name: '系列1',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 25],
        markPoint: {
            data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
            ]
        },
        markLine: {
            data: [
                {type: 'average', name: '平均值'}
            ]
        }
    }, {
        name: '系列2',
        type: 'bar',
        data: [2, 32, 10, 6, 20, 3, 4],
        markPoint: {
            data: [
                {name: '最大值', value: 20},
                {name: '最小值', value: 2}
            ]
        },
        markLine: {
            data: [
                {name: '平均值', value: 15}
            ]
        }
    }]
};

myChart.setOption(option);

2.3 容器设置

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

三、堆积图高级应用

3.1 堆积柱状图

在堆积图的基础上，可以将类型设置为 'bar' 来实现堆积柱状图。

series: [{
    name: '系列1',
    type: 'bar',
    stack: '总量',
    data: [5, 20, 36, 10, 10, 20, 25]
}, {
    name: '系列2',
    type: 'bar',
    stack: '总量',
    data: [2, 32, 10, 6, 20, 3, 4]
}]

3.2 堆积折线图

将类型设置为 'line' 来实现堆积折线图。

series: [{
    name: '系列1',
    type: 'line',
    stack: '总量',
    data: [5, 20, 36, 10, 10, 20, 25]
}, {
    name: '系列2',
    type: 'line',
    stack: '总量',
    data: [2, 32, 10, 6, 20, 3, 4]
}]

3.3 3D 堆积图

ECharts 也支持 3D 堆积图，可以通过设置 type: 'bar3D' 或 type: 'line3D' 来实现。

series: [{
    name: '系列1',
    type: 'bar3D',
    data: [[[0, 0, 0], [10, 10, 10]]]
}, {
    name: '系列2',
    type: 'bar3D',
    data: [[[10, 0, 0], [20, 20, 20]]]
}]

四、实战案例

4.1 销售数据堆积图

以下是一个展示销售数据的堆积图示例：

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

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

myChart.setOption(option);

4.2 股票价格堆积图

以下是一个展示股票价格堆积图的示例：

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

var option = {
    title: {
        text: '股票价格堆积图'
    },
    tooltip: {},
    legend: {
        data:['股票A', '股票B']
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '股票A',
        type: 'line',
        stack: '总量',
        data: [120, 200, 150, 80, 70, 110]
    }, {
        name: '股票B',
        type: 'line',
        stack: '总量',
        data: [60, 90, 120, 150, 180, 160]
    }]
};

myChart.setOption(option);

五、总结

通过本文的介绍，相信大家对 ECharts 堆积图有了一定的了解。在实际应用中，可以根据具体需求调整图表类型、样式和数据等。希望本文能对您在 ECharts 堆积图的使用过程中有所帮助。

-- 展开阅读全文 --