正文

教你用 ECharts 堆积图轻松展示复杂数据，看懂项目进度和销售趋势

/0 浏览量
1106

堆积图是 ECharts 提供的一种图表类型，它可以直观地展示多个数据系列在某个时间或维度的累积变化。在项目管理、销售分析等领域，堆积图能够帮助我们清晰地了解数据的变化趋势和项目进度。下面，我将一步步教你如何使用 ECharts 创建堆积图，并展示如何应用它来分析项目进度和销售趋势。

准备工作

在使用 ECharts 堆积图之前，你需要做以下准备工作：

  1. 引入 ECharts 库：你可以在 ECharts 的官方网站上下载最新版本的 ECharts 库，或者通过 CDN 引入。
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
  1. 准备数据：根据你的需求，准备好要展示的数据。数据可以是一个数组，也可以是一个对象数组。

创建基本堆积图

以下是创建基本堆积图的步骤：

1. 创建 HTML 容器

首先，你需要在 HTML 中创建一个用于显示图表的容器。

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

2. 初始化 ECharts 实例

使用 echarts.init() 方法初始化一个 ECharts 实例。

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

3. 指定图表的配置项和数据

接下来，设置图表的配置项和数据。

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

4. 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

高级应用：项目进度和销售趋势分析

项目进度分析

假设你有一个包含项目进度数据的数组，你可以使用堆积图来展示不同阶段的项目进度。

var projectData = [
    {name: '需求分析', value: 20},
    {name: '设计', value: 40},
    {name: '开发', value: 60},
    {name: '测试', value: 80},
    {name: '上线', value: 100}
];

option = {
    title: {
        text: '项目进度'
    },
    tooltip: {},
    legend: {
        data:['项目进度']
    },
    xAxis: {
        data: projectData.map(item => item.name)
    },
    yAxis: {},
    series: [{
        name: '项目进度',
        type: 'bar',
        data: projectData.map(item => item.value)
    }]
};

销售趋势分析

同样，对于销售数据，你可以使用堆积图来展示不同时间段的销售趋势。

var salesData = [
    {month: '1月', sales: 500},
    {month: '2月', sales: 800},
    {month: '3月', sales: 1200},
    {month: '4月', sales: 1600},
    {month: '5月', sales: 2000}
];

option = {
    title: {
        text: '销售趋势'
    },
    tooltip: {},
    legend: {
        data:['销售额']
    },
    xAxis: {
        data: salesData.map(item => item.month)
    },
    yAxis: {},
    series: [{
        name: '销售额',
        type: 'bar',
        data: salesData.map(item => item.sales)
    }]
};

通过以上步骤，你就可以轻松地使用 ECharts 堆积图来展示复杂数据，并分析项目进度和销售趋势。希望这篇文章能够帮助你更好地理解和使用 ECharts 堆积图。

-- 展开阅读全文 --