正文

新手必看！ECharts堆积图轻松入门，实战案例教你如何高效应用

/0 浏览量
0422

堆积图是ECharts中一种非常实用的图表类型，它能够将多个数据系列叠加在一起，形成一个整体，通过颜色的深浅来表示不同数据系列的大小。对于新手来说，堆积图可以帮助我们直观地展示数据的趋势和分布。本文将带您从基础入门到实战案例，一步步学习如何高效应用ECharts堆积图。

一、ECharts堆积图基础

1.1 堆积图的基本概念

堆积图由多个数据系列组成，每个系列的数据点在x轴上对应的位置上叠加，形成一个整体。堆积图的颜色由数据系列的颜色决定，颜色越深表示数据量越大。

1.2 堆积图的类型

ECharts提供了多种堆积图类型，包括：

  • 普通堆积图：所有数据系列叠加在一起。
  • 百分比堆积图：每个数据系列的大小相对于整体的比例。
  • 堆叠柱状图：类似于堆积柱状图，但可以显示每个数据系列的具体数值。

二、ECharts堆积图入门

2.1 创建堆积图

首先，我们需要引入ECharts库。以下是创建一个简单堆积图的代码示例：

// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
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.2 设置堆积图样式

我们可以通过设置itemStyle属性来自定义每个数据点的样式，例如颜色、边框等。

series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    itemStyle: {
        color: function (params) {
            // 根据数据值设置颜色
            var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#e5323e','#b6a2de'];
            return colorList[params.dataIndex];
        }
    }
}]

三、实战案例：百分比堆积图

3.1 案例背景

假设我们有一组销售数据，需要展示每个产品的销售占比。

3.2 案例实现

以下是实现百分比堆积图的代码示例：

// ...（引入ECharts库和初始化echarts实例）

// 指定图表的配置项和数据
var option = {
    title: {
        text: '百分比堆积图示例'
    },
    tooltip: {
        trigger: 'axis',
        formatter: '{b}: {c} ({d}%)'
    },
    legend: {
        data:['产品A','产品B','产品C']
    },
    xAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '销量',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
            {value: 335, name: '产品A'},
            {value: 310, name: '产品B'},
            {value: 234, name: '产品C'}
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

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

通过以上实战案例，我们可以看到百分比堆积图在展示数据占比方面的强大功能。

四、总结

通过本文的学习，相信您已经对ECharts堆积图有了初步的了解。在实际应用中，我们可以根据需求选择合适的堆积图类型，并通过自定义样式和配置项来美化图表。希望本文能够帮助您高效地应用ECharts堆积图。

-- 展开阅读全文 --