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

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

示例：百度图表中有个日历图(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