如何在Echarts图表中添加多个系列（series）？

Echarts是一款非常流行的JavaScript图表库，它可以为我们的网站或应用程序提供丰富多样的数据可视化功能。在Echarts中，series（系列）是绘图的核心部分，它表示图表中的一组数据。

在某些场景下，我们可能需要在一个图表中展示多个系列的数据。本文将介绍如何在Echarts图表中添加多个系列。

1. 准备工作

在开始之前，确保你已经引入了Echarts库。你可以通过下载官方提供的压缩包或者通过CDN引入Echarts。在HTML页面中引入Echarts库的方法如下：

1	`<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>` HTML

2. 创建一个基本的图表

首先，我们需要创建一个基本的图表。这里以柱状图为例。首先，在HTML页面中添加一个div元素作为图表的容器：

1	`<div id="chart" style="width: 600px; height: 400px;"></div>` HTML

然后，在JavaScript中创建一个图表实例，并绑定到容器上：

1	`var chart = echarts.init(document.getElementById('chart'));` JAVASCRIPT

接下来，我们需要定义图表的基本配置项：

var option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    series: []
};
JAVASCRIPT

上述代码中，我们定义了一个基本的坐标系，x轴为类别轴，y轴为数值轴。并且在series属性中留空，这是因为我们将在后面动态添加系列。

最后，我们将配置项应用到图表中：

1	`chart.setOption(option);` JAVASCRIPT

现在，你应该能够看到一个空白的柱状图。

3. 添加系列数据

接下来，我们将添加两个系列的数据到图表中。假设我们要展示两个不同城市的销售数据。

首先，我们需要定义每个系列的配置项。这里以系列1为例：

var series1 = {
    name: '城市A',
    type: 'bar',
    data: [120, 200, 150, 80, 70]
};
JAVASCRIPT

其中，name属性表示系列的名称，type属性表示系列的类型（这里使用的是柱状图），data属性表示系列的具体数据。

接下来，我们将系列数据添加到配置项的series属性中：

1	`option.series.push(series1);` JAVASCRIPT

然后，我们重复上述步骤，添加系列2的数据：

var series2 = {
    name: '城市B',
    type: 'bar',
    data: [90, 180, 120, 60, 50]
};

option.series.push(series2);
JAVASCRIPT

最后，我们更新图表的配置项：

1	`chart.setOption(option);` JAVASCRIPT

现在，你应该能够看到一个包含两个系列的柱状图。

4. 自定义系列样式

除了基本的数据定义，Echarts还提供了丰富的方式来自定义系列的样式。这里我们以系列1为例，为其添加自定义的样式：

var series1 = {
    name: '城市A',
    type: 'bar',
    data: [120, 200, 150, 80, 70],
    itemStyle: {
        color: 'orange'
    }
};
JAVASCRIPT

在上述代码中，我们为itemStyle属性添加了一个自定义的样式，将柱子的颜色设置为橙色。

同样地，你可以通过设置其他属性来自定义不同系列的样式，如lineStyle、areaStyle等。