如何在ECharts中使用日曆圖展示時間數據-js教程-PHP中文網

如何在ECharts中使用日曆圖展示時間數據

王林

發布： 2023-12-18 08:52:06

原創

1632 人瀏覽過

如何在ECharts中使用日曆圖展示時間數據

如何在ECharts中使用日曆圖展示時間資料

ECharts（百度開源的JavaScript圖表庫）是一種強大且易於使用的資料視覺化工具。它提供了各種圖表類型，包括折線圖、長條圖、餅圖等。而日曆圖是ECharts中一個很有特色且實用的圖表類型，它可以用來展示與時間相關的數據。本文將介紹如何在ECharts中使用日曆圖，並提供具體的程式碼範例。

首先，你需要使用引入ECharts庫，並建立一個容器來顯示圖表。以下是一個簡單的HTML檔案範例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 日历图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 100%; height: 600px;"></div>
    <script>
        // 在这里编写JavaScript代码
    </script>
</body>
</html>

登入後複製

接下來，你需要準備數據，以便在日曆圖中展示。資料應該包含時間戳記和相應的數值。以下是一個範例資料集：

var data = [
    {time: "2022-01-01", value: 10},
    {time: "2022-01-02", value: 20},
    {time: "2022-01-03", value: 15},
    // 其他数据...
];

登入後複製

然後，在JavaScript程式碼部分，你需要進行下列步驟來繪製日曆圖：

建立ECharts實例，並指定圖表容器：

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

登入後複製

配置日曆圖的基本參數（如標題、座標軸等）：

var option = {
    title: {
        text: '时间数据的日历图示例',
        left: 'center'
    },
    tooltip: {},
    calendar: {
        left: 'center',
        top: 'middle',
        orient: 'horizontal',
        cellSize: [30, 30],
        range: ['2022-01-01', '2022-12-31']
    },
    series: [{
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: data
    }]
};

登入後複製

在上面的範例中，我們設定了日曆圖的標題為"時間資料的日曆圖範例"，並將日曆圖放置在中間位置。將cellSize設定為[30, 30]，可以控制每個日期方格的大小。使用range來設定圖表的時間範圍。