echarts：多组折线-图

最新推荐文章于 2024-02-20 18:33:57 发布

莫小封

最新推荐文章于 2024-02-20 18:33:57 发布

阅读量3.4k

点赞数 1

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_41390184/article/details/129909151

版权

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

echarts：多组折线-图

示例说明
1.创建HTML文件
2.准备数据
3.绘制图表
总结

示例说明

我们将使用一个虚构的数据集来说明如何使用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。

莫小封

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts：多组折线-图

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

扫一扫