在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
接口,在日历坐标系绘制饼图。