如何用ECharts绘制包含每日数值的年历图？

要使用ECharts绘制包含每日数值的年历图，你可以使用ECharts的calendar坐标系和heatmap系列来实现。以下是一个简单的示例代码，展示如何绘制一个包含每日数值的年历图。

1. 引入ECharts库

首先，确保你已经引入了ECharts库。你可以通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>

2. 创建HTML容器

在HTML中创建一个容器来放置图表：

<div id="calendarChart" style="width: 1000px; height: 400px;"></div>

3. 编写JavaScript代码

接下来，编写JavaScript代码来配置和渲染年历图。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('calendarChart'));

// 模拟数据：每日数值
var data = [
    ['2023-01-01', 10],
    ['2023-01-02', 20],
    ['2023-01-03', 30],
    // 更多数据...
    ['2023-12-31', 50]
];

// 配置项
var option = {
    tooltip: {
        position: 'top'
    },
    visualMap: {
        min: 0,
        max: 100,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        top: 'top'
    },
    calendar: {
        top: 'middle',
        left: 'center',
        orient: 'vertical',
        cellSize: [20, 20],
        yearLabel: {
            show: true,
            textStyle: {
                fontSize: 30
            }
        },
        dayLabel: {
            firstDay: 1,
            nameMap: 'cn'
        },
        monthLabel: {
            nameMap: 'cn'
        },
        range: '2023'
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: data
    }
};

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

4. 解释代码

• data: 这是一个包含每日数值的数组，每个元素是一个数组，第一个元素是日期（格式为YYYY-MM-DD），第二个元素是该日期的数值。
• calendar: 这是ECharts的日历坐标系配置，range指定了年份范围，cellSize指定了每个日期的单元格大小。
• series: 这里使用了heatmap系列来绘制热力图，coordinateSystem指定为calendar表示使用日历坐标系。

5. 运行代码

将上述代码放入HTML文件中，并在浏览器中打开，你将看到一个包含每日数值的年历图。

6. 自定义

你可以根据需要调整visualMap的颜色范围、calendar的样式、tooltip的显示内容等，以满足你的具体需求。

7. 数据动态更新

如果你需要动态更新数据，可以使用myChart.setOption方法重新设置数据。

myChart.setOption({
    series: {
        data: newData
    }
});

通过这种方式，你可以轻松地使用ECharts绘制包含每日数值的年历图。