小例子：在 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任性自定義，上下左右方位隨便選。