日历图是一种将时间数据以日历的形式呈现的图表类型，常用于显示时间变化的趋势。在 ECharts 中，我们可以通过使用日历坐标系（calendar）来实现日历图。以下是一个简单的 ECharts 日历图实例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts 实例：日历图</title>
  <!-- 引入 ECharts 库 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>

<!-- 创建一个容器用于放置图表 -->
<div id="myChart" style="width: 800px; height: 600px;"></div>

<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));

// 模拟数据，表示每天的销售额
var data = [
    ['2023-01-01', 120],
    ['2023-01-02', 200],
    // ... 其他日期和销售额数据
];

// 将日期字符串转换为 JavaScript Date 对象
var dateList = data.map(function (item) {
    return item[0];
});

// 获取最小日期和最大日期
var minDate = new Date(Math.min.apply(null, dateList));
var maxDate = new Date(Math.max.apply(null, dateList));

// 配置项
var option = {
    title: {
        text: '日历图示例'
    },
    tooltip: {
        formatter: function (params) {
            return '日期：' + params.data[0] + '<br>销售额：' + params.data[1];
        }
    },
    calendar: {
        range: [minDate.getFullYear() + '-01-01', maxDate.getFullYear() + '-12-31'],
        cellSize: ['auto', 20],
        dayLabel: {
            show: false // 不显示日历坐标系上的日期
        },
        monthLabel: {
            show: true
        }
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: data
    }
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

</script>

</body>
</html>

在这个示例中，我们使用了 ECharts 的 calendar 坐标系配置项来创建日历图。数据 data 中包含了每天的销售额信息，通过 heatmap 系列类型将数据映射到日历坐标系上。

你可以根据实际需求调整日期格式、图表样式以及其他配置项，以适应不同的应用场景。


转载请注明出处：http://www.zyzy.cn/article/detail/5071/ECharts