在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？ https://echarts.baidu.com/gallery/view.html?c=calendar-simple&edit=1&reset=1

通过以下三个步骤即可实现上述效果：

下载的最新完整版本echarts.min.js即可，无需再单独引入其他文件哦

和ECharts中的其他图表一样，创建一个DOM来作为绘制图表的容器

使用ECharts进行初始化

以常见的日历图为例: calendar坐标 + heatmap图

在heatmap图的基础上，加上和calendar: { range: '2017' }heatmap图就秒变为日历图了。

附完整示例代码

使用日历坐标绘制日历图时，支持自定义各项属性:

• :

• cellSize: 设置日历格的大小，可支持设置不同高宽，还可支持自适应auto

• 、height: 也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应

• : 设置分隔线样式，也可以直接不显示

• itemStyle: 设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影

• :

• yearLabel: 设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;

完整的配置项参数参见：

日历坐标系是一种新的 ECharts 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。

在日历坐标系中使用热力图： https://echarts.baidu.com/gallery/view.html?c=calendar-heatmap&edit=1&reset=1

在日历坐标系中使用散点图：

还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图： https://echarts.baidu.com/gallery/view.html?c=calendar-graph&edit=1&reset=1

其他更丰富的效果

灵活利用 ECharts 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。

例如，使用 chart.convertToPixel 接口，在日历坐标系绘制饼图。