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

思路：

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

效果：

图1：ECharts散饼图

图2：github Punch Card图

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

HTML代码：

说明：

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