Home >Web Front-end >JS Tutorial >How to use calendar charts to display time data in ECharts

How to use calendar charts to display time data in ECharts

王林Original: 2023-12-18 08:52:061688browse

ECharts (Baidu’s open source JavaScript chart library) is a powerful and easy-to-use data visualization tool. It offers a variety of chart types, including line charts, bar charts, pie charts, and more. The calendar chart is a very distinctive and practical chart type in ECharts, which can be used to display time-related data. This article will introduce how to use calendar charts in ECharts and provide specific code examples.

First, you need to use the ECharts library and create a container to display the chart. Here is a simple HTML file example:

<!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>

Next, you need to prepare the data for display in the calendar chart. The data should contain timestamps and corresponding values. The following is a sample data set:

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

Then, in the JavaScript code part, you need to perform the following steps to draw the calendar chart:

Create an ECharts instance and specify the chart container:

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

Configure the basic parameters of the calendar chart (such as title, axis, etc.):

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
    }]
};

In the above example, we set the title of the calendar chart Be "Example of Calendar Chart for Time Data" and place the calendar chart in the middle. Set cellSize to [30, 30] to control the size of each date grid. Use range to set the time range of the chart.

Apply the configuration items to the chart:

chart.setOption(option);

Finally, you only need to open the HTML file to see the drawn calendar chart!

In summary, it is very simple to use ECharts’ calendar chart to display time data. You just need to prepare your data and follow the steps above to configure and render the chart. Of course, you can also adjust the display effect and style of the chart according to your own needs.

Note: The above example is for demonstration only and does not provide a complete data set and complete code. In actual application, please make corresponding modifications according to your own needs.

I hope this article will help you understand how to use calendar charts to display time data in ECharts!

The above is the detailed content of How to use calendar charts to display time data in ECharts. For more information, please follow other related articles on the PHP Chinese website!

JavaScript echarts html

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：ECharts chart optimization: how to improve rendering performanceNext article：ECharts chart optimization: how to improve rendering performance

See more

How to use calendar charts to display time data in ECharts

Related articles