日历坐标系图表绘制
需要绘制一个图表，展示竖轴范围为 0-30 号，横轴范围为 1 月 1 日至 12 月 31 日，用来显示每天对应的数据。
解决方案
可以使用 echarts 的日历坐标系来实现该图表。
使用 echarts 日历坐标系绘制图表
- 安装 echarts
npm install echarts
- 初始化图表
var mychart = echarts.init(document.getelementbyid('mychart'));- 设置日历坐标系
var calendaroption = {
calendar: {
range: '2022'
}
};- 配置系列
数据格式应该为：[{value: [日期, 数值]}, ...]。
var seriesoption = {
series: {
type: 'heatmap',
coordinatesystem: 'calendar',
data: [
{
value: [
'2022-01-01',
1
]
}
]
}
};- 合并选项并渲染图表
myChart.setOption(echarts.merge(calendaroption, seriesOption));
效果演示
