脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → echarts多组折线图

使用Echarts绘制一个多组折线图

 更新时间：2023年09月05日 11:27:31   作者：Aurora Dreamer  
这篇文章主要给大家介绍了关于使用Echarts绘制一个多组折线图的相关资料,Echarts是一个功能强大的可视化库,可以用来绘制各种类型的图表,包括多组折线图,需要的朋友可以参考下

前言

Echarts是一个基于JavaScript的开源可视化库，它可以用来绘制各种类型的图表，包括折线图、柱状图、饼图等等。在本文中，我们将使用Echarts绘制一个多组折线-图的完整示例。

示例说明

我们将使用一个虚构的数据集来说明如何使用Echarts绘制多组折线图。该数据集包含了三个城市（北京、上海、广州）在2018年每个季度的GDP数据，我们将使用Echarts将这些数据绘制成折线图。

数据集格式如下：

var data = {
    "北京": [12000, 14000, 16000, 18000],
    "上海": [10000, 12000, 14000, 16000],
    "广州": [8000, 10000, 12000, 14000]
};

其中，每个城市的GDP数据以数组的形式存储，数组中的每个元素表示一个季度的GDP值。

1.创建HTML文件

首先，我们需要创建一个HTML文件，并引入Echarts库。以下是一个基本的HTML文件模板：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多组折线图</title>
    <!-- 引入Echarts库 -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 在这里添加Echarts图表 -->
</body>
</html>

2.准备数据

接下来，我们需要将上面的数据集转换成Echarts所需的格式。Echarts要求数据以一定的格式传递给它，具体格式如下：

var option = {
    legend: {
        data: ['北京', '上海', '广州']
    },
    xAxis: {
        type: 'category',
        data: ['第一季度', '第二季度', '第三季度', '第四季度']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '北京',
            type: 'line',
            data: [12000, 14000, 16000, 18000]
        },
        {
            name: '上海',
            type: 'line',
            data: [10000, 12000, 14000, 16000]
        },
        {
            name: '广州',
            type: 'line',
            data: [8000, 10000, 12000, 14000]
        }
    ]
};

其中， legend 表示图例， xAxis 表示X轴， yAxis 表示Y轴， series 表示数据系列。每个数据系列包含了该系列的名称、类型（这里是折线图）、以及数据。

我们可以使用以下代码将数据转换成Echarts所需的格式：

var option = {
    legend: {
        data: Object.keys(data)
    },
    xAxis: {
        type: 'category',
        data: ['第一季度', '第二季度', '第三季度', '第四季度']
    },
    yAxis: {
        type: 'value'
    },
    series: []
};
for (var city in data) {
    option.series.push({
        name: city,
        type: 'line',
        data: data[city]
    });
}

这段代码中，我们使用了 Object.keys() 方法获取了数据集中所有城市的名称，并将它们添加到了图例中。然后，我们使用 for...in 循环遍历数据集，为每个城市创建一个数据系列，并将其添加到 series 数组中。

3.绘制图表

现在，我们已经准备好了数据，可以开始使用Echarts绘制图表了。以下是绘制图表的代码：

var chart = echarts.init(document.body);
chart.setOption(option);

这段代码中，我们首先使用 echarts.init() 方法创建了一个Echarts实例，将其绑定到了 document.body 元素上。然后，我们使用 setOption() 方法将上面准备好的数据传递给Echarts实例，让它绘制出多组折线图。

完整代码

以下是完整的HTML文件代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多组折线图</title>
    <!-- 引入Echarts库 -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 在这里添加Echarts图表 -->
    <div id="chart" style="width: 800px; height: 500px;"></div>
    <script>
        var data = {
            "北京": [12000, 14000, 16000, 18000],
            "上海": [10000, 12000, 14000, 16000],
            "广州": [8000, 10000, 12000, 14000]
        };
        var option = {
            legend: {
                data: Object.keys(data)
            },
            xAxis: {
                type: 'category',
                data: ['第一季度', '第二季度', '第三季度', '第四季度']
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };
        for (var city in data) {
            option.series.push({
                name: city,
                type: 'line',
                data: data[city]
            });
        }
        var chart = echarts.init(document.getElementById('chart'));
        chart.setOption(option);
    </script>
</body>
</html>

输出结果为：

在这个示例中，我们创建了一个<div>元素，将其ID设置为chart，并在其中绘制了多组折线图。我们还为该<div>元素设置了宽度和高度，以便图表可以正确地显示。

总结

Echarts是一个功能强大的可视化库，可以用来绘制各种类型的图表。在本文中，我们使用Echarts绘制了一个多组折线图的完整示例，该示例展示了如何准备数据、创建Echarts实例、以及将数据传递给Echarts实例。如果您需要绘制折线图或其他类型的图表，可以考虑使用Echarts。

到此这篇关于使用Echarts绘制一个多组折线图的文章就介绍到这了,更多相关echarts多组折线图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论