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

来源：互联网发布：英国历史书籍知乎编辑：程序博客网时间：2024/05/16 00:46

思路：

使用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

3 0