正文

掌握ECharts，轻松绘制堆积图：从入门到实战案例分析

/0 浏览量
0803

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一系列丰富的图表类型，包括折线图、柱状图、饼图、地图等，其中堆积图是其中一种非常实用的图表类型。堆积图可以清晰地展示多个数据系列在时间序列上的累积变化情况，非常适合用于展示趋势和比较。本文将带你从入门到实战，一步步掌握如何使用 ECharts 绘制堆积图。

一、ECharts 基础知识

在开始绘制堆积图之前，我们需要了解一些 ECharts 的基础知识。

1.1 ECharts 安装与引入

首先，你需要将 ECharts 引入到你的项目中。可以通过以下两种方式：

  • CDN 引入：在 HTML 文件中通过 <script> 标签引入 ECharts 的 CDN 链接。
  • 本地引入：下载 ECharts 的压缩包，将其放置在项目的合适位置，并在 HTML 文件中引入。

1.2 ECharts 配置项

ECharts 的配置项非常丰富，包括图表类型、数据、颜色、字体、标题等。以下是一些常用的配置项：

  • type：指定图表类型，如 'line'、'bar'、'pie' 等。
  • data：指定图表的数据。
  • color：指定图表的颜色。
  • title：指定图表的标题。
  • legend：指定图表的图例。

二、绘制堆积图

2.1 基础堆积图

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

// 基于准备好的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);

2.2 堆积柱状图

堆积柱状图与堆积折线图类似，只是图表类型不同。以下是一个堆积柱状图的示例：

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

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

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

2.3 堆积折线图

堆积折线图可以更直观地展示数据的变化趋势。以下是一个堆积折线图的示例：

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

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

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

三、实战案例分析

3.1 案例一：销售数据堆积图

假设你是一家服装公司的销售经理，需要分析不同产品类别的销售情况。以下是一个销售数据堆积图的示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '销售数据堆积图'
    },
    tooltip: {},
    legend: {
        data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    yAxis: {},
    series: [{
        name: '衬衫',
        type: 'bar',
        stack: '总量',
        data: [5, 20, 36, 10, 10, 20]
    }, {
        name: '羊毛衫',
        type: 'bar',
        stack: '总量',
        data: [10, 30, 45, 20, 15, 25]
    }, {
        name: '雪纺衫',
        type: 'bar',
        stack: '总量',
        data: [15, 25, 40, 30, 20, 35]
    }, {
        name: '裤子',
        type: 'bar',
        stack: '总量',
        data: [20, 35, 50, 40, 30, 45]
    }, {
        name: '高跟鞋',
        type: 'bar',
        stack: '总量',
        data: [25, 40, 55, 50, 45, 50]
    }, {
        name: '袜子',
        type: 'bar',
        stack: '总量',
        data: [30, 45, 60, 55, 50, 55]
    }]
};

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

3.2 案例二：网站流量堆积图

假设你是一家网站运营人员，需要分析不同渠道的网站流量情况。以下是一个网站流量堆积图的示例：

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

// 指定图表的配置项和数据
var option = {
    title: {
        text: '网站流量堆积图'
    },
    tooltip: {},
    legend: {
        data:['搜索引擎','直接访问','邮件营销','联盟广告','视频广告','社交媒体']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    yAxis: {},
    series: [{
        name: '搜索引擎',
        type: 'bar',
        stack: '总量',
        data: [5, 20, 36, 10, 10, 20]
    }, {
        name: '直接访问',
        type: 'bar',
        stack: '总量',
        data: [10, 30, 45, 20, 15, 25]
    }, {
        name: '邮件营销',
        type: 'bar',
        stack: '总量',
        data: [15, 25, 40, 30, 20, 35]
    }, {
        name: '联盟广告',
        type: 'bar',
        stack: '总量',
        data: [20, 35, 50, 40, 30, 45]
    }, {
        name: '视频广告',
        type: 'bar',
        stack: '总量',
        data: [25, 40, 55, 50, 45, 50]
    }, {
        name: '社交媒体',
        type: 'bar',
        stack: '总量',
        data: [30, 45, 60, 55, 50, 55]
    }]
};

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

四、总结

通过本文的介绍，相信你已经掌握了如何使用 ECharts 绘制堆积图。堆积图是一种非常实用的图表类型，可以帮助我们更好地展示数据的变化趋势和比较。在实际应用中，你可以根据自己的需求调整图表的样式和配置项，以达到最佳的效果。希望本文对你有所帮助！

-- 展开阅读全文 --