小例子：实现日历图

小例子：实现日历图

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

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

第一步：引入js文件

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

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

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

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

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

使用ECharts进行初始化

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

第三步：配置参数

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

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

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

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

附完整示例代码

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

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

自定义配置参数

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

  • range: 设置时间的范围，可支持某年、某月、某天，还可支持跨年
  • cellSize: 设置日历格的大小，可支持设置不同高宽，还可支持自适应auto
  • width、height: 也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应
  • 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