正文

新手必看！如何用ECharts轻松制作堆积图，数据分析可视化实操指南

/0 浏览量
0731

堆积图是一种展示多个数据系列通过堆积的方式显示的数据可视化图表。它非常适合展示数据的增长趋势和部分与整体的关系。ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松制作各种图表，包括堆积图。下面，我们就来一步步学习如何使用 ECharts 制作堆积图。

准备工作

在开始之前，请确保你已经安装了 Node.js 和 npm，这是使用 ECharts 的前提。接下来，你需要完成以下步骤：

  1. 安装 ECharts： 打开命令行工具，执行以下命令安装 ECharts：

    npm install echarts --save

  2. 引入 ECharts： 在你的 HTML 文件中引入 ECharts 的 CSS 和 JS 文件：

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.css">
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

创建堆积图

步骤一：初始化图表实例

在 HTML 文件中，创建一个用于放置图表的容器，并为其添加 id 属性，以便之后通过 JavaScript 获取：

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

然后，使用 JavaScript 初始化 ECharts 实例：

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

步骤二：设置图表的配置项

接下来，我们需要设置图表的配置项。堆积图的配置项主要包括以下几部分：

  1. 标题：设置图表的标题文本。
  2. 工具箱：提供一些常用的图表操作工具，如数据视图、保存为图片等。
  3. 坐标系：设置图表的坐标系类型，堆积图通常使用坐标轴。
  4. 系列：定义图表的数据系列，包括数据项和图形的样式。
  5. 颜色：自定义图表的颜色。

下面是一个简单的堆积图配置示例：

var option = {
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2']
    },
    xAxis: {
        data: ["A", "B", "C", "D", "E", "F", "G"]
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 25]
        },
        {
            name: '系列2',
            type: 'bar',
            data: [2, 5, 6, 8, 10, 10, 20]
        }
    ],
    color: ['#3398DB', '#FF8C00']
};

步骤三：使用配置项渲染图表

最后，使用 myChart.setOption(option) 方法将配置项应用到图表实例上，从而渲染出堆积图。

实操指南

  1. 准备数据：确保你的数据格式符合 ECharts 的要求，通常需要按照以下格式： 
    
var data = {
   xAxis: ["A", "B", "C", "D", "E", "F", "G"],
   series1: [5, 20, 36, 10, 10, 20, 25],
   series2: [2, 5, 6, 8, 10, 10, 20]
};
  2. 设置配置项：根据实际需求，修改配置项中的参数，如标题、坐标轴、数据系列等。
  3. 渲染图表：使用 myChart.setOption(option) 方法将配置项应用到图表实例上。

通过以上步骤，你就可以使用 ECharts 轻松制作堆积图了。当然，ECharts 提供了丰富的配置项和功能，你可以根据自己的需求进行扩展和优化。希望这篇实操指南能帮助你快速入门 ECharts 堆积图的制作。

-- 展开阅读全文 --