echarts 4.0.4怎么下载_小例子：在 ECharts 中实现日历图

在 ECharts 发布的 3.5 版本中，新增了日历坐标系，用于在日历中绘制图表。如何快速写出一个日历图呢？

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

第一步：引入js文件

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

第二步：指定DOM元素作为图表容器。

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

使用ECharts进行初始化：

第三步：配置参数

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

在 heatmap 图的基础上，

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

附完整示例代码

以上就是绘制最简日历图的步骤了，如若还想进一步私人定制，还可以通过自定义配置参数来实现。

自定义配置参数

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

• range: 设置时间的范围，可支持某年、某月、某天，还可支持跨年。

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

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

• orient: 设置坐标的方向，既可以横着也可以竖着。

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

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

• dayLabel: 设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示。

• monthLabel: 设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭。

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

完整的配置项参数参见：calendar API

日历坐标系的其他形式

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

在日历坐标系中使用热力图：代码 + 效果地址

在日历坐标系中使用散点图：代码 + 效果地址

还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：代码 + 效果地址

其他更丰富的效果

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

例如，制作农历：代码 + 效果地址

例如:

使用 chart.convertToPixel 接口，在日历坐标系绘制饼图：代码 + 效果地址。

小结

以上，简单介绍了 ECharts 日历坐标系的一些基本用法，希望能够帮助大家。

编辑整理丨Mmm