97 lines
2.2 KiB
HTML
97 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>ECharts 日曆圖 - 完整範例</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
#main {
|
|
width: 100%;
|
|
height: 450px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="main"></div>
|
|
|
|
<script type="text/javascript">
|
|
var chartDom = document.getElementById('main');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
// 隨機產生假資料的函式
|
|
function getVirtulData(year) {
|
|
year = year || '2024';
|
|
var date = +echarts.time.parse(year + '-01-01');
|
|
var end = +echarts.time.parse(+year + 1 + '-01-01');
|
|
var dayTime = 3600 * 24 * 1000;
|
|
var data = [];
|
|
for (var time = date; time < end; time += dayTime) {
|
|
data.push([
|
|
echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
|
|
Math.floor(Math.random() * 10000)
|
|
]);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
option = {
|
|
title: {
|
|
top: 30,
|
|
text: '2024 GitHub 提交次數',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
formatter: function (p) {
|
|
var format = echarts.time.format(p.data[0], '{yyyy}-{MM}-{dd}');
|
|
return format + ': ' + p.data[1] + ' 次提交';
|
|
}
|
|
},
|
|
visualMap: {
|
|
show: false, // 不顯示數值條
|
|
min: 0,
|
|
max: 10000,
|
|
calculable: true,
|
|
orient: 'horizontal',
|
|
left: 'center',
|
|
top: 'top',
|
|
inRange: {
|
|
color: ['#F2F6FC', '#409EFF'] // 這裡可以換顏色
|
|
}
|
|
},
|
|
calendar: {
|
|
top: 'middle',
|
|
left: 'center',
|
|
orient: 'vertical',
|
|
range: '2024',
|
|
cellSize: [30, 'auto'], // 設定每個方塊的大小
|
|
dayLabel: {
|
|
firstDay: 1, // 從星期一開始
|
|
nameMap: 'ZH'
|
|
},
|
|
monthLabel: {
|
|
nameMap: 'ZH'
|
|
}
|
|
},
|
|
series: {
|
|
type: 'heatmap',
|
|
coordinateSystem: 'calendar',
|
|
data: getVirtulData(2024)
|
|
}
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
// RWD
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|