Using Echarts to implement a github-like punch Card diagram

Ideas:

The idea of using the Echarts in the demo to mix up the pie chart

Effect:

Figure 1:echarts Hash Pie chart

Figure 2:github Punch card diagram

Figure 3: Using the Echarts implementation

HTML code:

<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,9 8,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,3 9,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, 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}, SA                   Veasimage: {show:true}}, Xaxis: [{type: ' Category ', Axis type, the horizontal axis is the default category axis, the value axis reference yaxis description 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 ',//axis type, horizontal axis default to the class axes, value axis reference YAxis Description 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 ', ' Echar Ts/chart/scatter '], function (EC) {//---folding column---myChart1 = ec.init (document.geteleme            Ntbyid (' 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: [' Series 1 ', ' Series 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;    }//Construct a series of pie charts instead of the original scatter points, which need to be drawn in order to obtain the coordinates of the scatter points, settimeout!    SetTimeout (buildpieseries, 100); </script>

Description:

The 1.ECharts pie chart replaces points in a scatter plot with a pie chart, so there are two sets of data for the pie chart in the demo, where only one set of data is imported as needed.

The 2.buildPieSeries function is used to add the data in the array to the option.series as a pie chart

3. Convert the source data array into a two-dimensional intermediate array of [[Positionx,positiony,value],], and get the center coordinates of the pie chart in the Buildpieseries function according to Positionx,positiony. Determines the pie graph radius based on value.

4. Note that the source array data corresponds to the data in the diagram. In this example, the data in the source array is the opposite of the y-axis of the data in the graph, as required.

5. The version of the Echarts package used is 2.2.1 File path schematic:

--js

|-chart

|-bar.js

|-pie.js

...

|-echarts.js

--index.html

Using Echarts to implement a github-like punch Card diagram