以日历形式展示展会信息按照时间汇总统计数据

目标：某时间段展会信息按照展会开展时间进行汇总统计，并且用日历图表形式展示

示例：百度图表中有个日历图(calendar)

这个是展示某个人在2016年每天的步数，以日历的形式展示每天的步数，并且步数以渐变颜色区别。

展览会信息是在某天开始的，具有时间属性。可以按照具体的时间进行分组汇总统计，因为不是每天都有展会，如何保证时间的连续性呢？单独创建了一个时间表，里面存储了2000~2050年的每一天时间，汇总表和时间表关联即可。统计出来的数据以json字符串的形式存储在页面前端。代码如下，为了节省篇幅，中间部分数据省略。

<div id="calesumdate_1565216734" style="width:100%;height:200px;margin:0 auto"></div><script type="text/javascript"> var myChart = echarts.init(document.getElementById('calesumdate_1565216734'),'light'); function getVirtulData() { var json = "[{\"name\":\"2019-01-01\",\"value\":0},{\"name\":\"2019-01-02\",\"value\":1},{\"name\":\"2019-01-03\",\"value\":1},……,{\"name\":\"2019-12-30\",\"value\":0},{\"name\":\"2019-12-31\",\"value\":0}]"; var obj = JSON.parse(json); var data = []; for (var i = 0; i < obj.length; i++) { data.push([ obj[i].name, parseInt(obj[i].value) ]); } return data; } var option = { tooltip : {}, visualMap: { min: 0, max: 50, type: 'piecewise', orient: 'horizontal', left: 'center', top: 0, textStyle: { color: '#000' }, inRange: { color: ['#a5e7f0', '#0098d9'] } }, calendar: { top: 50, left: 30, right: 5, cellSize: ['auto', 18], range: ['2019-01-01','2019-12-31'], itemStyle: { normal: {borderWidth: 0.8,borderColor:'#000'} }, yearLabel: {show: false}, monthLabel: { nameMap: 'cn' }, dayLabel: { nameMap: 'cn' } }, series: { type: 'heatmap', coordinateSystem: 'calendar', data: getVirtulData() }, grid : { top : 10, bottom: 10, left:40, right:10 } }; myChart.setOption(option);</script>

其中代码

visualMap: { min: 0, max: 50, type: 'piecewise', orient: 'horizontal', left: 'center', top: 0, textStyle: { color: '#000' }, inRange: { color: ['#a5e7f0', '#0098d9'] } }

的意思时间日期单元格的取值范围和对应的颜色取值范围。单元格颜色会随着数值的大小体现深浅不一的颜色，慧展人的网站是以蓝色为主调，所以取['#a5e7f0', '#0098d9']，别的参数可以参考百度统计图表官网文档。

慧展人展会信息网上，《2019年展会统计分析 - 展会数量按时间统计》最终的效如下图（时间单元格中为什么有个是白色的呢？因为那天的数量超过了设置的最大值50）：

查看具体的动态效果可以访问：

http://www.expo.ren/article/detail/11.html