ECharts實(shí)例二：實(shí)現(xiàn)日歷圖

2018-08-26 11:59 更新

在本節(jié)中，我們要在 ECharts 中快速實(shí)現(xiàn)一個(gè)日歷圖。

下面是 ECharts 中的日歷坐標(biāo)系：

點(diǎn)擊編輯實(shí)例》》

具體的實(shí)現(xiàn)步驟如下所述：

步驟一：引入 js 文件

我們只需要下載的最新完整版本的 echarts.min.js 即可，無(wú)需再單獨(dú)引入其他文件：

<script src="echarts.min.js"></script>
<script>
    // ...
</script>

步驟二：指定 DOM 元素作為圖表容器

和 ECharts 中的其他圖表一樣，創(chuàng)建一個(gè) DOM 來(lái)作為繪制圖表的容器：

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

使用 ECharts 進(jìn)行初始化：

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

步驟三：配置參數(shù)

以常見的日歷圖為例: calendar 坐標(biāo) + heatmap 圖：

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 圖的基礎(chǔ)上，加上 coordinateSystem: 'calendar',和calendar: { range: '2017' }heatmap 圖就秒變?yōu)槿諝v圖了。

提示：如果圖表沒有正確顯示出來(lái)，請(qǐng)您檢查是否發(fā)現(xiàn)以下幾種情況：JS文件是否正確加載；ECharts 變量是否存在；控制臺(tái)是否報(bào)錯(cuò);DOM 元素在 echarts.init 的時(shí)候是否有高度和寬度。若為 type: heatmap，檢查是否配置了 visualMap。

上述實(shí)例的完整代碼如下：

<!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'));

        // 模擬數(shù)據(jù)
        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>

上述操作實(shí)現(xiàn)的是一個(gè)最簡(jiǎn)單的日歷圖，當(dāng)然我們也可以利用 ECharts 中的自定義配置參數(shù)實(shí)現(xiàn)一些個(gè)人想要達(dá)到的效果。

自定義配置參數(shù)

使用 ECharts 日歷坐標(biāo)繪制日歷圖時(shí)，支持自定義的各項(xiàng)屬性:

range: 設(shè)置時(shí)間的范圍，可支持某年、某月、某天，還可支持跨年
cellSize: 設(shè)置日歷格的大小，可支持設(shè)置不同高寬，還可支持自適應(yīng)auto
width、height: 也可以直接設(shè)置改日歷圖的整體高寬，讓其基于已有的高寬全部自適應(yīng)
orient: 設(shè)置坐標(biāo)的方向，既可以橫著也可以豎著
splitLine: 設(shè)置分隔線樣式，也可以直接不顯示
itemStyle: 設(shè)置日歷格的樣式，背景色、方框線顏色大小類型、透明度均可自定義，甚至還能加陰影
dayLabel: 設(shè)置坐標(biāo)中星期樣式，可以設(shè)置星期從第幾天開始，快捷設(shè)置中英文、甚至是自定義中英文混搭、或局部不顯示、通過(guò)formatter 可以想怎么顯示就怎么顯示;
monthLabel: 設(shè)置坐標(biāo)中月樣式，和星期一樣，可快捷設(shè)置中英文和自定義混搭
yearLabel: 設(shè)置坐標(biāo)中年樣式，默認(rèn)顯示一年，通過(guò)formatter 文字可以想顯示什么就能通過(guò)string function任性自定義，上下左右方位隨便選;

完整的配置項(xiàng)參數(shù)參見：calendar API