小例子:实现日历图

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

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

第一步:引入js文件

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

  1. <scriptsrc="echarts.min.js"></script>
  2. <script>
  3. // ...
  4. </script>

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

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

  1. <divid="main"style="width=100%; height =400px"></div>

使用ECharts进行初始化

  1. var myChart = echarts.init(document.getElementById('main'));

第三步:配置参数

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

  1. var option ={
  2. visualMap:{
  3. show:false
  4. min:0,
  5. max:1000
  6. },
  7. calendar:{
  8. range:'2017'
  9. },
  10. series:{
  11. type:'heatmap',
  12. coordinateSystem:'calendar',
  13. data:[['2017-01-02',900],['2017-01-02',877],['2017-01-02',699],...]
  14. }
  15. }
  16. myChart.setOption(option);

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

若发现图表没有正确显示,你可以检查以下几种可能:- JS文件是否正确加载;- echarts 变量是否存在;- 控制台是否报错;- DOM 元素在 echarts.init 的时候是否有高度和宽度。- 若为 type: heatmap,检查是否配置了 visualMap

附完整示例代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>ECharts</title>
  6. <scriptsrc="echarts.min.js"></script>
  7. </head>
  8. <body>
  9. <divid="main"style="width:100%;height:400px;"></div>
  10. <scripttype="text/javascript">
  11. var myChart = echarts.init(document.getElementById('main'));
  12. // 模拟数据
  13. function getVirtulData(year){
  14. year = year ||'2017';
  15. var date =+echarts.number.parseDate(year +'-01-01');
  16. var end =+echarts.number.parseDate(year +'-12-31');
  17. var dayTime =3600*24*1000;
  18. var data =[];
  19. for(var time = date; time <= end; time += dayTime){
  20. data.push([
  21. echarts.format.formatTime('yyyy-MM-dd', time),
  22. Math.floor(Math.random()*10000)
  23. ]);
  24. }
  25. return data;
  26. }
  27. var option ={
  28. visualMap:{
  29. show:false,
  30. min:0,
  31. max:10000
  32. },
  33. calendar:{
  34. range:'2017'
  35. },
  36. series:{
  37. type:'heatmap',
  38. coordinateSystem:'calendar',
  39. data: getVirtulData(2017)
  40. }
  41. };
  42. myChart.setOption(option);
  43. </script>
  44. </body>
  45. </html>

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

自定义配置参数

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

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

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

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

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

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

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

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

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

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

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

日历坐标系的其他形式

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

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

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

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

其他更丰富的效果

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

例如,制作农历: https://echarts.baidu.com/gallery/view.html?c=calendar-lunar&edit=1&reset=1

例如,使用 chart.convertToPixel 接口,在日历坐标系绘制饼图。 https://echarts.baidu.com/gallery/view.html?c=calendar-pie&edit=1&reset=1