首先上一下效果图: 左右的箭头和下方的标注以及环形图本身都可以控制环形图的选中状态。 首先讲一下思路: 布局很简单,我就不写了,主要讲下作图过程。 首先跟图需求可以知道,作出这样的效果需要一组对象,每个对象有颜色,所占比例,名字等,也就是这样: let chartData=[ {color:"#FD7A4F",title:"其他",percent:0.2}, {color:"#FDD764",title:"建筑/土木工程",percent:0.25}, *** ] 注意百分比加在一起必须是100%,也就是1,否则圆环可能不会画满,或者多处一部分。 根据每部分所占比例计算出每个部分所占的弧