使用ECharts 实现类似github的Punch Card 图

思路：

使用ECharts的Demo 里混搭图中的散饼图的思想

效果：

图1：ECharts散饼图

图2：github Punch Card图

图3：使用ECharts实现的效果图

HTML代码：

<div id="chart1" style="height:350px;"></div>

<script type="text/javascript">
    var myChart1;
    var sData1 = (function () {
        var data = [[79,66,91,65,85,77,42,56,84,52,33,52,49,19,0,0,0,6,31,22,103,83,60,87],
                    [78,90,77,61,35,53,81,35,59,61,17,9,42,0,0,0,2,9,6,13,15,16,18,50],
                    [3,26,12,23,45,51,98,102,84,56,74,30,25,15,4,0,1,0,2,2,11,5,8,6],
                    [9,17,24,33,32,121,69,106,88,73,56,41,53,25,0,1,14,3,0,2,2,2,3,1],
                    [2,24,15,31,57,45,101,83,110,61,52,38,27,7,0,4,3,8,1,8,0,2,12,3],
                    [8,52,39,49,29,55,107,75,73,30,64,32,34,29,1,3,6,3,12,9,6,15,4,3],
                    [31,62,42,70,23,32,68,68,41,71,70,35,18,17,4,0,2,3,36,79,97,86,59,74]];
        var d = [];
        var len = 24*7;
        var value;
        for(var i=0;i<data.length;i++){
            for(var j=0;j<data[0].length;j++)
                d.push([j,i,data[i][j]]);
        }
        return d;
    })();
    var option1 = {
        color : ['rgba(255, 69, 0, 0.5)'],
        title : {
            text: 'Punch Card of mahmoud',
            subtext : 'San Jose[UTC/GMT -6]'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c}"
        },
        toolbox: {
            show : true,
            feature : {
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        xAxis : [
            {
                type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                data: ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a','12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'],
                axisTick:{
                    show:false
                },
                axisLine:{
                    show:false,
                },
            }
        ],
        yAxis : [
            {
                type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
                data: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                axisTick:{
                    show:false
                },
                axisLine:{
                    show:false,
                },
            }
        ],
        animation: false,
        series : [
            {
                type:'scatter',
                symbol: 'none',
                data: sData1
            },
            //{
            //    type:'scatter',
            //    symbol: 'none',
            //    data: sData2
            //}
        ]
    };
require.config({
        paths: {
            echarts: './js'
        }
    });

    require(
        [
            'echarts',
            'echarts/chart/pie',
            'echarts/chart/line',
            'echarts/chart/scatter'
        ],
        function (ec) {
            //--- 折柱 ---
            myChart1 = ec.init(document.getElementById('chart1'));
            myChart1.setOption(option1);
        }
    );

function buildPieSeries(){
        var xAxis1 = myChart1.component.xAxis.getAxis(0);
        var yAxis1 = myChart1.component.yAxis.getAxis(0);
        var len1 = sData1.length;
        //option.series = option.series.slice(0,2);
        //option.legend = {
        //    data : ['系列1', '系列2']
        //};
        while (len1--) {
            option1.series.push({
                type: 'pie',
                itemStyle : {
                    normal : {
                        label : {
                            show : false
                        },
                        labelLine : {
                            show : false
                        }
                    }
                },
                radius : Math.round(sData1[len1][2]/150*21),
                center: [
                    xAxis1.getCoordByIndex(sData1[len1][0]),
                    yAxis1.getCoordByIndex(sData1[len1][1])
                ],
                data: [
                    {name: 'contributions', value: sData1[len1][2]}
                ]
            })
        }
        option1.animation = true;
        myChart1.setOption(option1, true);
        window.onresize = buildPieSeries;
    }
    // 构造出一系列的饼图代替原来的散点，需要在散点画出来后才能获取到散点的坐标，setTimeout！
    setTimeout(buildPieSeries, 100);
    </script>

说明：

1.ECharts 散饼图Demo中是用pie图取代散点图中的点，因此Demo中pie图有两组数据，这里根据需求只导入一组数据。

2.buildPieSeries函数用来将数组中的数据以pie图的形式添加到option.series中

3.将源数据数组转化为形为[[positionx,positiony,value],] 的二维中间数组，然后在buildPieSeries函数中根据positionx，positiony获取pie图圆心坐标，根据value确定pie图半径。

4.注意源数组数据 与 图中数据对应。这个例子中根据需求，源数组中数据与图中数据y轴相反。

5.使用的ECharts包版本是2.2.1 文件路径示意：

--js

|-chart

|-bar.js

|-pie.js

...

|-echarts.js

--index.html