Skip to content

Instantly share code, notes, and snippets.

@shershen08

shershen08/calendar-heatmap.html

Created January 30, 2020 17:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shershen08/3f7dde124752f51c9db966e396bd9cb1 to your computer and use it in GitHub Desktop.
Save shershen08/3f7dde124752f51c9db966e396bd9cb1 to your computer and use it in GitHub Desktop.
Download ZIP
Ams events heatmap
Raw
calendar-heatmap.html
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
const events = [
'2020-02-06',
'2020-02-27',
'2020-03-05',
'2020-04-02',
'2020-04-16',
'2020-04-17',
'2020-06-05',
]
function getVirtulData(year) {
year = year || '2017';
var date = +echarts.number.parseDate(year + '-01-01');
var end = +echarts.number.parseDate((+year + 1) + '-01-01');
var dayTime = 3600 * 24 * 1000;
var data = [];
for (var time = date; time < end; time += dayTime) {
data.push([
echarts.format.formatTime('yyyy-MM-dd', time),
0
]);
}
console.log(data)
data = data.map(day => {
console.log(events.indexOf(day[0]))
return [
day[0],
events.indexOf(day[0]) > -1 ? 1 : 0
]
})
return data;
}
option = {
title: {
top: 30,
left: 'center',
text: '2020'
},
tooltip: {},
visualMap: {
min: 0,
max: 3,
orient: 'horizontal',
left: 'center',
top: 65,
textStyle: {
color: '#000'
}
},
calendar: {
top: 120,
left: 30,
right: 30,
//cellSize: ['auto', 13],
range: '2020',
itemStyle: {
borderWidth: 0.5
},
yearLabel: {show: false}
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: getVirtulData(2020)
}
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment