小例子：在 ECharts 中实现日历图

时间 2019-11-29

标签例子 echarts 实现日历繁體版

原文原文链接

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

经过如下三个步骤便可实现上述效果：html

第一步：引入js文件

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

<script src="echarts.min.js"></script>
<script> // ... </script>复制代码

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

和ECharts中的其余图表同样，建立一个DOM来做为绘制图表的容器：git

<div id="main" style="width=100%; height = 400px"></div>复制代码

使用ECharts进行初始化：github

var myChart = echarts.init(document.getElementById('main'));复制代码

第三步：配置参数

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

var option = {
    visualMap: {
        show: false,
        min: 0,
        max: 1000
    },
    calendar: {
        range: '2017'
    },
    series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: [['2017-01-02', 900], ['2017-01-02', 877], ['2017-01-02', 699], ...]
    }
}
myChart.setOption(option);复制代码

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

若发现图表没有正确显示，你能够检查如下几种可能：ui

JS文件是否正确加载；

echarts 变量是否存在；

控制台是否报错;

DOM 元素在 echarts.init 的时候是否有高度和宽度。

若为 type: heatmap，检查是否配置了 visualMap。

附完整示例代码spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width:100%;height:400px;"></div>
    <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 模拟数据 function getVirtulData(year) { year = year || '2017'; var date = +echarts.number.parseDate(year + '-01-01'); var end = +echarts.number.parseDate(year + '-12-31'); var dayTime = 3600 * 24 * 1000; var data = []; for (var time = date; time <= end; time += dayTime) { data.push([ echarts.format.formatTime('yyyy-MM-dd', time), Math.floor(Math.random() * 10000) ]); } return data; } var option = { visualMap: { show: false, min: 0, max: 10000 }, calendar: { range: '2017' }, series: { type: 'heatmap', coordinateSystem: 'calendar', data: getVirtulData(2017) } }; myChart.setOption(option); </script>
</body>
</html>复制代码

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

自定义配置参数

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

range: 设置时间的范围，可支持某年、某月、某天，还可支持跨年。
cellSize: 设置日历格的大小，可支持设置不一样高宽，还可支持自适应auto。
width、height: 也能够直接设置改日历图的总体高宽，让其基于已有的高宽所有自适应。
orient: 设置坐标的方向，既能够横着也能够竖着。
splitLine: 设置分隔线样式，也能够直接不显示。
itemStyle: 设置日历格的样式，背景色、方框线颜色大小类型、透明度都可自定义，甚至还能加阴影。
dayLabel: 设置坐标中星期样式，能够设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、经过formatter 能够想怎么显示就怎么显示。
monthLabel: 设置坐标中月样式，和星期同样，可快捷设置中英文和自定义混搭。
yearLabel: 设置坐标中年样式，默认显示一年，经过formatter 文字能够想显示什么就能经过string function任性自定义，上下左右方位随便选。

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

日历坐标系的其余形式

日历坐标系是一种新的 ECharts 坐标系，提供了在日历上绘制图表的能力; 因此除了制做经常使用的日历图外，咱们能够在热力图、散点图、关系图中使用日历坐标系。

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

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

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

其余更丰富的效果

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

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

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

小结

以上，简单介绍了 ECharts 日历坐标系的一些基本用法，但愿可以帮助你们。

更完整的配置项请参考 ECharts官网上详细的文档，或者到 ECharts Gallery 上查看日历坐标系做品。

还有，不少很好玩的图表，你们能够一块儿来玩，解锁新玩法~