日历图

概述

在 Apache ECharts (incubating)TM 中新增了日历坐标系，如何快速写出一个日历图呢？
日历图可以与多种图表结合，如散点图、热力图、饼状图等。

实例

这里我们以热力图为例

在热力图的基础上进行如下修改

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);

加上coordinateSystem: ‘calendar’,和calendar: { range: ‘2017’ }heatmap图就可以变为日历图了。
其中calendar是日历坐标系组件。

效果图

完整代码：

<!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)
            },

            title:{
                text:'日历图',
            }

        };

        myChart.setOption(option);

    </script>
</body>
</html>

旭日图的颜色等样式调整散点图

评论区（0）

日历图

概述

实例

效果图

完整代码：

评论 取消

评论取消