其中resize-chart是一个封装的自适应组件JSinitTaskChart(){getTaskStatus({type:this.taskTimeType}).then(res=>{console.log('任务状态',res)if(res){constcolor=['#999999','#00cce2','#9962ff','#27dca1','#e9e536','','#1cbe6b','#f8a639','#f868b9','#4a8dfd','#f45151']lettaskStateList=JSON.parse(JSON.stringify(res))lettaskStateData=[]lettaskStatelegendData=[]lettaskTotal=0for（taskStateL的常量项ist){taskTotal+=item.counttaskStateData.push({name:this.taskStateArr[item.state],value:item.count,itemStyle:{normal:{color:this.statusColorHandle(item.state,color)}}})taskStatelegendData.push({name:this.taskStateArr[item.state],value:item.count,textStyle:{normal:{color:this.statusColorHandle(item.state,color)}}})}这个。taskChart=echarts.init(document.getElementById('taskChart'))this.taskChart.setOption({title:{text:taskTotal===0?'':taskTotal,//主要用于没有数据子文本时的处理：taskTotal!==0?'任务总数':'',x:'center',y:'center',textAlign:'center',itemGap:5,//主副标题间距top:'38%',left:'28%',//标题textStyle:{fontFamily:'PingFangSC-Medium',fontWeight:'normal',fontSize:20,color:'#333333'},//副标题subtextStyle:{fontWeight:'normal',fontSize:14,color:'#333333'}},图例：{type:'scroll',icon:'circle',orient:'vertical',y:'center',right:'5%',itemWidth:5,itemHeight:5,data:taskStatelegendData,//使用回调函数formatter:function(name){letcount,percentfor(constitemoftaskStatelegendData){if(item.name===name){count=item.valuepercent=((item.value/taskTotal)*100).toFixed(2)}}让arr=['{a|'+名称+'}','{b|'+count+'}','{c|'+percent+'}%']returnarr.join('')},textStyle:{rich:{a:{fontSize:12,width:50,color:'rgba(51,51,51,0.6)'},b:{fontSize:12,width:40,color:'#333'},c:{fontSize:12,width:38,color:'#333'}}}},工具提示：{trigger:'item',formatter:'{a}
{b}:{c}({d}%)'},series:[{name:'taskstatus',type:'pie',半径:['40%','55%'],//第一项是内半径，第二项是外半径，内半径为0的才是真正的蛋糕，不是圆心:['30%','50%'],//位置label:{normal:{show:false,//是否显示标签[default:false]position:'outside',//标签'outside'的位置饼图扇区外，由视觉连线引导至相应扇区。'inside','inner'与'inside'相同，位于饼图切片内部。'center'是饼图的中心位置。格式化程序：函数（参数）{返回（'{c|'+params.value+'}{d|'+params.percent+'%}\n{b|'+params.name+'}'）}，fontFamily:'PingFangSC-Regular',lineHeight:20,padding:[0,-55],rich:{c:{颜色:'#333333',fontSize:14,align:'left',padding:[0,0,0,10]},d:{color:'#333333',align:'left',fontSize:14},b:{color:'rgba(51,51,51,0.6)',fontSize:14,align:'left',padding:[0,0,0,10]}}}},labelLine:{//标签视觉引导线的样式，当标签位置设置为'outside'时，视觉引导线将正常显示:{show:false,//是否显示视觉引导线。length:20,//当标签位置设置为'outside'时，将显示视觉指南。length2:40,//视觉指南第二段的长度。lineStyle:{//视觉引导线样式//color:'#000',//width:1}}},data:taskStateData,itemStyle:{emphasis:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0,0,0,0.5)'}}}]},true//这个参数有它的作用)}this.taskLoading=false})}其中用到一个函数statusColorHandle，根据具体的分配status颜色值封装在这里：statusColorHandle(state,colorArr){state=~~statereturncolorArr[state%colorArr.length]}，这是其中一种，其他基本类似，下面是效果图implementation:code里面加了很多注释，方便大家自己查看，分享给大家。希望大家在使用的时候遇到问题可以作为参考。