快捷導(dǎo)航

使用Echarts繪制一個多組折線圖

更新時間：2023年09月05日 11:27:31 作者：Aurora?Dreamer

這篇文章主要給大家介紹了關(guān)于使用Echarts繪制一個多組折線圖的相關(guān)資料,Echarts是一個功能強(qiáng)大的可視化庫,可以用來繪制各種類型的圖表,包括多組折線圖,需要的朋友可以參考下

前言

Echarts是一個基于JavaScript的開源可視化庫，它可以用來繪制各種類型的圖表，包括折線圖、柱狀圖、餅圖等等。在本文中，我們將使用Echarts繪制一個多組折線-圖的完整示例。

示例說明

我們將使用一個虛構(gòu)的數(shù)據(jù)集來說明如何使用Echarts繪制多組折線圖。該數(shù)據(jù)集包含了三個城市（北京、上海、廣州）在2018年每個季度的GDP數(shù)據(jù)，我們將使用Echarts將這些數(shù)據(jù)繪制成折線圖。

數(shù)據(jù)集格式如下：

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

其中，每個城市的GDP數(shù)據(jù)以數(shù)組的形式存儲，數(shù)組中的每個元素表示一個季度的GDP值。

1.創(chuàng)建HTML文件

首先，我們需要創(chuàng)建一個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.準(zhǔn)備數(shù)據(jù)

接下來，我們需要將上面的數(shù)據(jù)集轉(zhuǎn)換成Echarts所需的格式。Echarts要求數(shù)據(jù)以一定的格式傳遞給它，具體格式如下：

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 表示數(shù)據(jù)系列。每個數(shù)據(jù)系列包含了該系列的名稱、類型（這里是折線圖）、以及數(shù)據(jù)。

我們可以使用以下代碼將數(shù)據(jù)轉(zhuǎn)換成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() 方法獲取了數(shù)據(jù)集中所有城市的名稱，并將它們添加到了圖例中。然后，我們使用 for...in 循環(huán)遍歷數(shù)據(jù)集，為每個城市創(chuàng)建一個數(shù)據(jù)系列，并將其添加到 series 數(shù)組中。

3.繪制圖表

現(xiàn)在，我們已經(jīng)準(zhǔn)備好了數(shù)據(jù)，可以開始使用Echarts繪制圖表了。以下是繪制圖表的代碼：

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

這段代碼中，我們首先使用 echarts.init() 方法創(chuàng)建了一個Echarts實(shí)例，將其綁定到了 document.body 元素上。然后，我們使用 setOption() 方法將上面準(zhǔn)備好的數(shù)據(jù)傳遞給Echarts實(shí)例，讓它繪制出多組折線圖。

完整代碼

以下是完整的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>

輸出結(jié)果為：

在這個示例中，我們創(chuàng)建了一個<div>元素，將其ID設(shè)置為chart，并在其中繪制了多組折線圖。我們還為該<div>元素設(shè)置了寬度和高度，以便圖表可以正確地顯示。

總結(jié)

Echarts是一個功能強(qiáng)大的可視化庫，可以用來繪制各種類型的圖表。在本文中，我們使用Echarts繪制了一個多組折線圖的完整示例，該示例展示了如何準(zhǔn)備數(shù)據(jù)、創(chuàng)建Echarts實(shí)例、以及將數(shù)據(jù)傳遞給Echarts實(shí)例。如果您需要繪制折線圖或其他類型的圖表，可以考慮使用Echarts。

到此這篇關(guān)于使用Echarts繪制一個多組折線圖的文章就介紹到這了,更多相關(guān)echarts多組折線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: