[1]普通图形绘制-环形图演示

环形图假设我们现在有一组数据：vardata=[{type:"apple",number:124},{type:"banana",number:56},{type:"栗子",number:310}];我们想用圆形图来展示，最终效果如下：单例不考虑边缘的提示文字和折线，只考虑中间的圆环怎么画。首先我们要求解values的和，这样在绘制的时候就可以知道每个环的比例：varsum=0;for(vari=0;icx?点2[0]+10:点2[0]-10,点2[1]];这样就得到了三个点的位置，对于polyline，直接连接即可：painter.beginPath().moveTo(dot1[0],dot1[1]).lineTo(dot2[0],dot2[1]).lineTo(dot3[0],dot3[1]).stroke();文字直接在dot3的位置绘制即可，但是需要考虑文字是左对齐还是右对齐，和第三点类似，看代码即可：painter.config('textAlign',dot2[0]>cx?"left":"right").fillText(data[i].type,dot3[0],dot3[1]);具体代码见评论区【代码2】