正文

从新手到高手：轻松上手echarts堆积图，可视化数据分析技巧大揭秘

/0 浏览量
1103

一、ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于绘制各种图表，如折线图、柱状图、饼图、地图等。堆积图是 ECharts 中的一种图表类型，它能够直观地展示数据的多维度信息，是数据分析中常用的图表之一。

二、ECharts 堆积图基础

2.1 堆积图类型

ECharts 堆积图主要分为以下几种类型：

  • 普通堆积图：用于展示不同类别的数据累积情况。
  • 百分比堆积图：展示各部分占总体的百分比。
  • 时间堆积图：展示随时间变化的数据累积情况。

2.2 堆积图基本结构

堆积图的基本结构包括：

  • X 轴：通常用于表示时间或类别。
  • Y 轴：表示数据的大小。
  • 系列：堆叠的各个数据序列。

三、新手入门：创建一个简单的堆积图

下面是一个简单的 ECharts 堆积图示例，用于展示不同类别数据的累积情况。

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

这段代码创建了一个包含六种商品销量的堆积图，X 轴表示商品类别，Y 轴表示销量。

四、进阶技巧：自定义堆积图

4.1 自定义颜色

在 ECharts 中，可以为堆积图的系列设置自定义颜色。

series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20],
    itemStyle: {
        color: '#f00' // 红色
    }
}]

4.2 隐藏 X 轴和 Y 轴

如果需要隐藏 X 轴和 Y 轴，可以在相应的配置项中设置 show: false。

xAxis: {
    show: false
},
yAxis: {
    show: false
}

4.3 添加图例

如果需要添加图例，可以在 legend 配置项中设置 data 属性。

legend: {
    data: ['系列1', '系列2']
},
series: [{
    name: '系列1',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
}, {
    name: '系列2',
    type: 'bar',
    data: [20, 30, 40, 10, 20, 30]
}]

五、实战演练：制作一个时间堆积图

下面是一个时间堆积图的示例，用于展示随时间变化的数据累积情况。

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '时间堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2']
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {},
    series: [{
        name: '系列1',
        type: 'line',
        stack: '总量',
        data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
    }, {
        name: '系列2',
        type: 'line',
        stack: '总量',
        data: [20, 30, 40, 10, 20, 30, 20, 30, 40, 10, 20, 30]
    }]
};

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

这个例子中，X 轴表示月份，Y 轴表示数据值，通过 stack 属性设置系列堆叠。

六、总结

通过本文的学习，相信你已经对 ECharts 堆积图有了基本的了解。在实际应用中，你可以根据自己的需求，结合 ECharts 的其他功能，制作出更加美观、实用的图表。不断实践和总结，相信你会成为 ECharts 堆积图的高手！

-- 展开阅读全文 --