script setup langtsimport{ref,onMounted}fromvueimport*asechartsfromecharts;constpolarChartRefref(null)constmyChartref(null)// 三相电压数据 constphaseData{A:{angle:0.00,amplitude:224.68,name:A相,color:#f0a500},B:{angle:-119.65,amplitude:225.48,name:B相,color:#27ae60},C:{angle:120.15,amplitude:236.68,name:C相,color:#e74c3c},};constamplitudes[phaseData.A.amplitude,phaseData.B.amplitude,phaseData.C.amplitude];// 计算电压最大值 给radiusAxis.maxconstmaxRadiusMath.ceil(Math.max(...amplitudes)*1.2/10)*10;// 例如380*1.2456→460// 动态计算额定电压三相平均值constnominalVoltageMath.round((phaseData.A.amplitudephaseData.B.amplitudephaseData.C.amplitude)/3*10)/10;// 生成参考圆数据functiongenerateCircleData(radius,steps360){constdata[];for(leti0;isteps;i){constangle(i/steps)*360;data.push([radius,angle]);}returndata;}constnominalCircleDatagenerateCircleData(nominalVoltage,360);console.log(nominalCircleData);// 极坐标配置 // startAngle: 0 → 0°在右侧3点钟方向// clockwise: false → 逆时针为正方向// 极坐标配置 constpolarConfig{center:[50%,52%],radius:[0,56%],};constangleAxis{type:value,startAngle:0,clockwise:false,min:0,max:360,interval:30,axisLine:{show:true,lineStyle:{color:#c5cdd5,width:1.5},},axisTick:{show:true,length:5,lineStyle:{color:#c5cdd5},},splitLine:{show:false,},};constradiusAxis{type:value,min:0,max:maxRadius,splitNumber:3,axisLabel:{show:true,formatter:{value}V,},splitLine:{show:true,lineStyle:{color:#e8ecf1,type:solid,width:1},},};// 构建series constseries[];// 1. 额定电压参考圆series.push({name:额定电压参考,type:line,coordinateSystem:polar,data:nominalCircleData,symbol:none,lineStyle:{color:#bcc4cf,width:1.5,type:dashed,opacity:0.7,},z:1,silent:true,animation:true,animationDuration:1000,animationDelay:200,});// 2. 中心点series.push({name:中性点,type:scatter,coordinateSystem:polar,data:[[0,0]],symbol:circle,symbolSize:12,itemStyle:{color:#3b4a5c,borderColor:#ffffff,borderWidth:3,shadowBlur:12,shadowColor:rgba(0,0,0,0.3),},z:20,silent:true,animation:true,animationDuration:800,animationDelay:0,animationEasing:cubicOut,});// 3. 三相矢量线 箭头方向修正去除白色描边箭头沿径向向外移动constphaseKeys[A,B,C];constphaseGlowColors{A:rgba(240,165,0,0.5),B:rgba(39,174,96,0.5),C:rgba(231,76,60,0.5),};constdelays{A:400,B:1000,C:1600};// 根据角度计算箭头向外偏移量像素functiongetArrowOffset(angleDeg,distance10){constrad(angleDeg*Math.PI)/180;return[distance*Math.cos(rad),-distance*Math.sin(rad)];}phaseKeys.forEach(function(key){constpdphaseData[key];constarrowRotatepd.angle-90;// 箭头默认朝上旋转后指向目标角度constoffsetgetArrowOffset(pd.angle,10);// 向外移动10像素constvectorData[{value:[0,pd.angle],symbol:none,label:{show:false}},{value:[pd.amplitude,pd.angle],symbol:arrow,symbolSize:14,symbolRotate:arrowRotate,symbolOffset:offset,// 关键沿径向向外平移itemStyle:{color:pd.color,shadowBlur:12,shadowColor:phaseGlowColors[key],},label:{show:true,position:right,distance:14,formatter:pd.name\npd.amplitude.toFixed(2)V\npd.angle.toFixed(2)°,fontSize:11,fontWeight:600,color:pd.color,backgroundColor:rgba(255,255,255,0.88),borderRadius:6,padding:[5,9],lineHeight:17,borderColor:pd.color,borderWidth:1,shadowBlur:6,shadowColor:rgba(0,0,0,0.06),},emphasis:{symbolSize:22,itemStyle:{shadowBlur:20,shadowColor:phaseGlowColors[key],},label:{fontSize:12,fontWeight:700,padding:[7,11],shadowBlur:10,},},},];series.push({name:pd.name,type:line,coordinateSystem:polar,data:vectorData,symbol:none,lineStyle:{color:pd.color,width:3.2,cap:round,shadowBlur:8,shadowColor:phaseGlowColors[key],},z:10,animation:true,animationDuration:1200,animationDelay:delays[key],animationEasing:cubicOut,emphasis:{lineStyle:{width:5,shadowBlur:16,shadowColor:phaseGlowColors[key],},},});});// 完整option constoption{polar:polarConfig,angleAxis:angleAxis,radiusAxis:radiusAxis,series:series,tooltip:{trigger:item,formatter:function(params){if(!params||!params.data)return;constvalparams.data;letradius,angle;if(Array.isArray(val)){radiusval[0];angleval[1];}elseif(valval.valueArray.isArray(val.value)){radiusval.value[0];angleval.value[1];}else{return;}if(radius0||radiusnull||radiusundefined){if(params.seriesName中性点)returnb⚫ 中性点/bbr/参考电位零点;return;}if(params.seriesName额定电压参考){returnb⭕ 额定电压参考/bbr/nominalVoltageV (三相平均值);}constangleRoundedparseFloat(angle).toFixed(2);constampRoundedparseFloat(radius).toFixed(2);returnbparams.seriesName/bbr/ 角度bangleRounded°/bbr/ 幅值bampRounded V/b;},backgroundColor:rgba(255,255,255,0.96),borderColor:#dde3ea,borderWidth:1,borderRadius:10,padding:[10,14],textStyle:{color:#2c3e50,fontSize:12,lineHeight:20},},legend:{show:true,bottom:6,left:center,data:[A相,B相,C相,额定电压参考],},animation:false,};console.log(option,option);onMounted((){constchartDompolarChartRef.valueif(!chartDom){console.error(chartDom is null, cannot init echarts)return}myChart.valueecharts.init(chartDom,null,{devicePixelRatio:window.devicePixelRatio||1});myChart.value.setOption(option);})// 渲染图表 /scripttemplatedivclasschart-wrapperdividpolarChartrefpolarChartRef/div/div/templatestyle scoped langless .chart-wrapper{position:relative;width:100%;height:580px;cursor:default;#polarChart{width:100%;height:100%;}}/style