hydro-graph 1.0.0 → 1.0.2

package/dist/hydro-graph.umd.js

@@ -118,4 +118,4 @@ ${W.name}: ${W.value} ${W.unit}}`}),z}else{let z="";return(f.includes(w.name)||w
 ${w.seriesName}: ${te[1]} ${L.unit}`,label:{offset:oe||[-120,0]}}],C.value.series[ce].markPoint={symbol:"pin",symbolSize:20,label:{show:!0,position:"top",align:"left",fontSize:16,backgroundColor:L.backgroundColor?L.backgroundColor:i[L.name]?i[L.name].color:L.color,borderRadius:6,shadowColor:"#666666",shadowBlur:5,shadowOffsetX:3,shadowOffsetY:3,fontWeight:"bold",padding:[4,4,4,4],lineHeight:30,color:L.markPointColor?L.markPointColor:"#fff",formatter:z=>{let W="",me=L.tmType?L.tmType:"YYYY-MM-DD HH:mm";z.data&&z.data.coord&&z.data.coord[0]&&(W=we(z.data.coord[0]).format(me));let Ae="",ue="";if(z.name=="Max"||z.name=="Min"){if(z.name=="Max")return Ae=L.maxText?L.maxText:"最大值",L.unit.includes("m³")?ue=z.value?Ii(z.value):"--":L.unit.includes("mm")?ue=z.value?Number(z.value).toFixed(1):"--":L.unit.includes("m")?ue=z.value?Number(z.value).toFixed(2):"--":ue=z.value,L.tmText?`${Ae}: {a0|${ue}} ${L.unit}
 ${L.tmText}: {a1|${W}}`:`${L.tmText2?L.tmText2:"相应时间"}: {a1|${W}}
 ${Ae}: {a0|${ue}} ${L.unit}`}else return`相应时间: {a1|${we(z.data.coord[0]).format(me)}}
-${L.name}: {a0|${z.data.coord[1]}} ${L.unit}`},rich:{a0:{fontSize:25,fontFamily:"Times New Roman"},a1:{fontSize:20,fontFamily:"Times New Roman"}}},data:k},C.value.dataZoom[0]={...(J=m.getOption())==null?void 0:J.dataZoom[0]},m.setOption(C.value,!0),m.getOption().series.map(z=>{z.markPoint&&(p[z.name]=z.markPoint)})}}}),m.on("mousedown",function(w){m.setOption({tooltip:{show:!1}}),m.dispatchAction({type:"hideTip"});let J=w.seriesIndex,L=n.chartOption.series[J],te=L.stepTM?L.stepTM:60,ce="",_e="",ee="";if(L.openBarDrag){let k={},oe={},z=n.chartOption.yAxis[L.yAxisIndex],W=[];w.componentType=="markLine"&&L.data.name=="xAxis"?W=C.value.series.map((ge,Ne)=>ge.name=="开始"||ge.name=="结束"?JSON.parse(JSON.stringify(ge)):{}):W=C.value.series.map((ge,Ne)=>Ne==J?{data:JSON.parse(JSON.stringify(ge.data))}:{});let me,Ae,ue;n.chartOption.fixedTimePeriod&&(ce=n.chartOption.series.find(ge=>ge.name=="开始").data.value,_e=n.chartOption.series.find(ge=>ge.name=="结束").data.value,ee=we(_e).diff(we(ce),"hour")),m.getZr().off("mousemove"),m.getZr().off("mouseup"),m.getZr().on("mousemove",function(ge){if(w.componentType=="markLine"&&L.data.name=="xAxis"){let Ne=m.convertFromPixel({xAxisIndex:L.xAxisIndex},ge.offsetX),We=we(Ne).format("YYYY-MM-DD HH:00");if(We!==me){const vt=we(We),kt=we(P[P.length-1]),Lu=se?we(se):"";if(vt.isAfter(kt)||vt.isBefore(Lu))return;if(n.chartOption.fixedTimePeriod){if(L.name=="开始"?ue=we(We).add(ee,"hours").format("YYYY-MM-DD HH:00"):L.name=="结束"&&(ue=we(We).add(-ee,"hours").format("YYYY-MM-DD HH:00")),L.name=="开始"&&we(ue).isAfter(kt))return;if(L.name=="结束"&&we(ue).isBefore(Lu))return;W.forEach(Je=>{L.name=="开始"?Je.name=="开始"?(Je.markLine.data[0].xAxis=We,Je.markArea.data[0][0].xAxis=We,Je.markArea.data[0][1].xAxis=ue):Je.name=="结束"&&(Je.markLine.data[0].xAxis=ue):L.name=="结束"&&(Je.name=="开始"?(Je.markLine.data[0].xAxis=ue,Je.markArea.data[0][0].xAxis=ue,Je.markArea.data[0][1].xAxis=We):Je.name=="结束"&&(Je.markLine.data[0].xAxis=We))})}else W.forEach(Je=>{L.name=="开始"?Je.name=="开始"&&(Je.markLine.data[0].xAxis=We,Je.markArea.data[0][0].xAxis=We):L.name=="结束"&&(Je.name=="开始"?Je.markArea.data[0][1].xAxis=We:Je.name=="结束"&&(Je.markLine.data[0].xAxis=We))});m.setOption({series:W},{notMerge:!1,lazyUpdate:!0}),me=We}}else{let[Ne,We]=m.convertFromPixel({seriesIndex:J},[ge.offsetX,ge.offsetY]);if(we(Ne).format("YYYY-MM-DD HH:00")!==me||!Ae||Math.abs(We-Ae)>=.5){const vt=we(Ne).format("YYYY-MM-DD HH:00");oe[vt]=We;let kt=Object.keys(oe),Lu=new Set(kt);W[J].data.forEach(TA=>{Lu.has(TA[0])&&(TA[1]=oe[TA[0]])});let Je=LC(new Date(kt[0]),new Date(kt[kt.length-1]),te),md=Object.entries(oe),Y4=new Set(kt);Je.forEach(TA=>{Y4.has(TA)||md.push(ie(md,TA))});let Qo={};md.forEach(TA=>{Qo[TA[0]]=TA[1]});let X4=Object.keys(Qo),Z4=new Set(X4);W[J].data.forEach(TA=>{if(Z4.has(TA[0])){let Mu="";z.name.includes("m³")?Mu=Ii(Qo[TA[0]]):z.name.includes("mm")?Mu=Qo[TA[0]].toFixed(1):z.name.includes("m")&&(Mu=Qo[TA[0]].toFixed(2)),TA[1]=Mu}}),m.setOption({series:W},{notMerge:!1,lazyUpdate:!0}),me=vt,Ae=We}}}),m.getZr().on("mouseup",function(){if(m.getZr().off("mousemove"),m.getZr().off("mouseup"),w.componentType=="markLine"&&L.data.name=="xAxis"){if(me)if(ue){const ge=we(P[P.length-1]),Ne=se?we(se):"";L.name=="开始"&&we(ue).isAfter(ge)?ue=we(me).add(ee,"hours").format("YYYY-MM-DD HH:00"):L.name=="结束"&&we(ue).isBefore(Ne)&&(ue=we(me).add(-ee,"hours").format("YYYY-MM-DD HH:00")),k={name:"开始/结束",value:L.name=="开始"?`${me}/${ue}`:`${ue}/${me}`}}else k={name:L.name,value:me}}else k={name:w.seriesName,data:W[J].data};k.name&&a("getNewSeriesData",k),m.getZr().on("mousemove",function(ge){let Ne=ge.offsetX,We=ge.offsetY;m.dispatchAction({type:"showTip",x:Ne,y:We})})})}}),window.onresize=function(){m.resize()}},F=O=>{M.nextTick(()=>{m&&m.resize()})},E=(O,N)=>{m.dispatchAction({type:N?"legendSelect":"legendUnSelect",name:O})};function U(O){return O.month()===0&&O.date()===1&&O.hour()===0&&O.minute()===0}function x(O){O.preventDefault();let N=document.querySelector("body .chartMenu");N&&N.remove();let H=O.pageX,K=O.pageY,P=document.createElement("ul");P.style.position="absolute",P.style.left=H+"px",P.style.top=K+"px",P.className="chartMenu";let se=document.createElement("li");se.style.cursor="pointer",se.innerHTML=`<div><img src='${R4}'><span>还原缩放</span></div>`,P.appendChild(se);let ne=document.createElement("li");ne.style.cursor="pointer",ne.innerHTML=`<div><img src='${P4}'><span>复制图片</span></div>`,P.appendChild(ne);let xe=document.createElement("li");xe.style.cursor="pointer",xe.innerHTML=`<div><img src='${N4}'><span>导出图片</span></div>`,P.appendChild(xe),se.addEventListener("click",()=>{m.dispatchAction({type:"dataZoom",dataZoomIndex:0,start:0,end:100})}),ne.addEventListener("click",()=>{OQ(r.value,{useCORS:!0,scale:2,width:r.value.offsetWidth,height:r.value.offsetHeight+50,backgroundColor:"#fff",allowTaint:!0,removeContainer:!0}).then(Ie=>{const V=Ie.toDataURL("image/png"),le=b(V,"图片");I(le),NQ.ElMessage.success("复制成功")})}),xe.addEventListener("click",()=>{R()}),document.body.appendChild(P),document.addEventListener("click",()=>{P.parentNode&&document.body.removeChild(P)})}const b=(O,N="file")=>{const H=O.split(","),K=H[0].match(/:(.*?);/)[1],P=K.split("/")[1],se=window.atob(H[1]);let ne=se.length;const xe=new Uint8Array(ne);for(;ne--;)xe[ne]=se.charCodeAt(ne);return new File([xe],`${N}.${P}`,{type:K})},I=O=>{const N=new FileReader;N.onload=H=>{const K=H.target.result.toString(),P=new Image;P.src=K,P.onload=()=>{let se=T(P),ne=D(se.replace("data:image/png;base64,",""),"image/png",512);navigator.clipboard.write([new ClipboardItem({"image/png":ne})])}},N.readAsDataURL(O)},T=O=>{let N=document.createElement("canvas");return N.width=O.width,N.height=O.height,N.getContext("2d").drawImage(O,0,0,O.width,O.height),N.toDataURL("image/png")},D=(O,N,H)=>{N=N||"",H=H||512;let K=window.atob(O),P=[];for(let ne=0;ne<K.length;ne+=H){let xe=K.slice(ne,ne+H),Ie=new Array(xe.length);for(let le=0;le<xe.length;le++)Ie[le]=xe.charCodeAt(le);let V=new Uint8Array(Ie);P.push(V)}return new Blob(P,{type:N})},R=()=>{OQ(r.value,{useCORS:!0,scale:1,width:r.value.offsetWidth,height:r.value.offsetHeight+50,backgroundColor:"#fff",allowTaint:!0,removeContainer:!0}).then(O=>{const N=O.toDataURL("image/png"),H=document.createElement("a");H.href=N,H.download=n.chartOption.title,H.click()})},$=M.ref();function G(){return $.value?$.value.offsetHeight:0}function X(O,N){return new Promise(H=>{c2({STCD:n.chartOption.stationCode,rzw:O,rzwType:"rz"}).then(K=>{K.statusCode==200&&K.data?H(K.data):H(N*1e3)})})}function ie(O,N){if(O.length>0){let H=O.filter(P=>we(P[0]).isBefore(we(N))),K=O.filter(P=>we(P[0]).isAfter(we(N)));if(H.length==0)return[N,K[0][1]];if(K.length==0)return[N,H[H.length-1][1]];{let P=we(N).diff(we(H[H.length-1][0]),"seconds"),se=K[0][1]-H[H.length-1][1],ne=we(K[0][0]).diff(we(H[H.length-1][0]),"seconds"),xe=P*se/ne+H[H.length-1][1];return[N,Number(xe)]}}}function ve(O){var ne;let N=(ne=n.chartOption.series.find(xe=>xe.name=="开始"))==null?void 0:ne.data.value;const H=we(N),K=we(O),P=H.year()===K.year();return P&&H.month()===K.month()?K.format("DD HH:mm"):P?K.format("MM-DD HH:mm"):K.format("YYYY-MM-DD HH:mm")}return e({getLegendBoxHeight:G,onChange:g}),(O,N)=>{const H=M.resolveComponent("el-checkbox"),K=M.resolveComponent("svg-icon"),P=M.resolveComponent("el-icon"),se=M.resolveComponent("el-dropdown-item"),ne=M.resolveComponent("el-dropdown-menu"),xe=M.resolveComponent("el-dropdown"),Ie=M.resolveDirective("resize");return M.withDirectives((M.openBlock(),M.createElementBlock("div",{class:"box",ref_key:"chartBox",ref:r,onContextmenu:N[1]||(N[1]=V=>x(V))},[M.withDirectives((M.openBlock(),M.createElementBlock("div",K4,[M.createTextVNode(M.toDisplayString(t.chartOption.title),1)])),[[M.vShow,t.chartOption.title],[Ie,F]]),M.withDirectives((M.openBlock(),M.createElementBlock("div",V4,[M.createTextVNode(M.toDisplayString(t.chartOption.subTitle),1)])),[[M.vShow,t.chartOption.subTitle],[Ie,F]]),M.withDirectives((M.openBlock(),M.createElementBlock("div",{class:"legend-box",ref_key:"myLegend",ref:$},[c.value.length>1?(M.openBlock(),M.createBlock(H,{key:0,modelValue:h.value,"onUpdate:modelValue":N[0]||(N[0]=V=>h.value=V),label:"全选",onChange:d,style:{"--fill-color":"#409EFF"}},null,8,["modelValue"])):M.createCommentVNode("",!0),(M.openBlock(!0),M.createElementBlock(M.Fragment,null,M.renderList(c.value,(V,le)=>(M.openBlock(),M.createElementBlock(M.Fragment,{key:le},[V.children?M.createCommentVNode("",!0):(M.openBlock(),M.createBlock(H,{key:0,modelValue:V.isSelected,"onUpdate:modelValue":Se=>V.isSelected=Se,onChange:Se=>g(Se,V.name),style:M.normalizeStyle({"--fill-color":V.color?V.color:"#409EFF"})},{default:M.withCtx(()=>[V.icon?(M.openBlock(),M.createBlock(K,{key:0,"icon-class":V.icon,style:M.normalizeStyle({width:V.iconWidth?V.iconWidth+"px":"20px",height:V.iconHeight?V.iconHeight+"px":"20px"}),color:V.color},null,8,["icon-class","style","color"])):M.createCommentVNode("",!0),M.createElementVNode("span",{style:M.normalizeStyle({color:V.color,marginLeft:"3px"})},M.toDisplayString(V.key?V.key:V.name),5),V.children&&V.children.length>0?(M.openBlock(),M.createBlock(P,{key:1,class:"el-icon--right"},{default:M.withCtx(()=>[M.createVNode(M.unref(RQ))]),_:1})):M.createCommentVNode("",!0)]),_:2},1032,["modelValue","onUpdate:modelValue","onChange","style"])),V.children&&V.children.length>0?(M.openBlock(),M.createBlock(xe,{key:1,"hide-on-click":!1},{dropdown:M.withCtx(()=>[M.createVNode(ne,null,{default:M.withCtx(()=>[(M.openBlock(!0),M.createElementBlock(M.Fragment,null,M.renderList(V.children,(Se,AA)=>(M.openBlock(),M.createBlock(se,{key:AA},{default:M.withCtx(()=>[M.createVNode(H,{modelValue:Se.isSelected,"onUpdate:modelValue":Nt=>Se.isSelected=Nt,onChange:Nt=>g(Nt,Se.name),style:M.normalizeStyle({"--fill-color":Se.color?Se.color:"#409EFF"})},{default:M.withCtx(()=>[M.createElementVNode("div",G4,[Se.icon?(M.openBlock(),M.createBlock(K,{key:0,"icon-class":Se.icon,style:M.normalizeStyle({width:Se.iconWidth?Se.iconWidth+"px":"20px",height:Se.iconHeight?Se.iconHeight+"px":"20px"}),color:Se.color},null,8,["icon-class","style","color"])):M.createCommentVNode("",!0)]),M.createElementVNode("span",{style:M.normalizeStyle({color:Se.color,marginLeft:"3px"})},M.toDisplayString(Se.key?Se.key:Se.name),5)]),_:2},1032,["modelValue","onUpdate:modelValue","onChange","style"])]),_:2},1024))),128))]),_:2},1024)]),default:M.withCtx(()=>[M.createVNode(H,{modelValue:V.isSelected,"onUpdate:modelValue":Se=>V.isSelected=Se,onChange:Se=>g(Se,V.name),style:M.normalizeStyle({"--fill-color":V.color?V.color:"#409EFF"})},{default:M.withCtx(()=>[V.icon?(M.openBlock(),M.createBlock(K,{key:0,"icon-class":V.icon,style:M.normalizeStyle({width:V.iconWidth?V.iconWidth+"px":"20px",height:V.iconHeight?V.iconHeight+"px":"20px"}),color:V.color},null,8,["icon-class","style","color"])):M.createCommentVNode("",!0),M.createElementVNode("span",{style:M.normalizeStyle({color:V.color,marginLeft:"3px"})},M.toDisplayString(V.key?V.key:V.name),5),V.children&&V.children.length>0?(M.openBlock(),M.createBlock(P,{key:1,class:"el-icon--right"},{default:M.withCtx(()=>[M.createVNode(M.unref(RQ))]),_:1})):M.createCommentVNode("",!0)]),_:2},1032,["modelValue","onUpdate:modelValue","onChange","style"])]),_:2},1024)):M.createCommentVNode("",!0)],64))),128))])),[[Ie,F]]),M.createElementVNode("div",z4,[M.createElementVNode("div",{id:t.id,style:M.normalizeStyle({width:t.width,height:t.height})},null,12,W4)])],32)),[[Ie,F]])}}},[["__scopeId","data-v-bae20fc6"]]);Ft.HydroGraph=PQ,Ft.default=PQ,Object.defineProperties(Ft,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+${L.name}: {a0|${z.data.coord[1]}} ${L.unit}`},rich:{a0:{fontSize:25,fontFamily:"Times New Roman"},a1:{fontSize:20,fontFamily:"Times New Roman"}}},data:k},C.value.dataZoom[0]={...(J=m.getOption())==null?void 0:J.dataZoom[0]},m.setOption(C.value,!0),m.getOption().series.map(z=>{z.markPoint&&(p[z.name]=z.markPoint)})}}}),m.on("mousedown",function(w){m.setOption({tooltip:{show:!1}}),m.dispatchAction({type:"hideTip"});let J=w.seriesIndex,L=n.chartOption.series[J],te=L.stepTM?L.stepTM:60,ce="",_e="",ee="";if(L.openBarDrag){let k={},oe={},z=n.chartOption.yAxis[L.yAxisIndex],W=[];w.componentType=="markLine"&&L.data.name=="xAxis"?W=C.value.series.map((ge,Ne)=>ge.name=="开始"||ge.name=="结束"?JSON.parse(JSON.stringify(ge)):{}):W=C.value.series.map((ge,Ne)=>Ne==J?{data:JSON.parse(JSON.stringify(ge.data))}:{});let me,Ae,ue;n.chartOption.fixedTimePeriod&&(ce=n.chartOption.series.find(ge=>ge.name=="开始").data.value,_e=n.chartOption.series.find(ge=>ge.name=="结束").data.value,ee=we(_e).diff(we(ce),"hour")),m.getZr().off("mousemove"),m.getZr().off("mouseup"),m.getZr().on("mousemove",function(ge){if(w.componentType=="markLine"&&L.data.name=="xAxis"){let Ne=m.convertFromPixel({xAxisIndex:L.xAxisIndex},ge.offsetX),We=we(Ne).format("YYYY-MM-DD HH:00");if(We!==me){const vt=we(We),kt=we(P[P.length-1]),Lu=se?we(se):"";if(vt.isAfter(kt)||vt.isBefore(Lu))return;if(n.chartOption.fixedTimePeriod){if(L.name=="开始"?ue=we(We).add(ee,"hours").format("YYYY-MM-DD HH:00"):L.name=="结束"&&(ue=we(We).add(-ee,"hours").format("YYYY-MM-DD HH:00")),L.name=="开始"&&we(ue).isAfter(kt))return;if(L.name=="结束"&&we(ue).isBefore(Lu))return;W.forEach(Je=>{L.name=="开始"?Je.name=="开始"?(Je.markLine.data[0].xAxis=We,Je.markArea.data[0][0].xAxis=We,Je.markArea.data[0][1].xAxis=ue):Je.name=="结束"&&(Je.markLine.data[0].xAxis=ue):L.name=="结束"&&(Je.name=="开始"?(Je.markLine.data[0].xAxis=ue,Je.markArea.data[0][0].xAxis=ue,Je.markArea.data[0][1].xAxis=We):Je.name=="结束"&&(Je.markLine.data[0].xAxis=We))})}else W.forEach(Je=>{L.name=="开始"?Je.name=="开始"&&(Je.markLine.data[0].xAxis=We,Je.markArea.data[0][0].xAxis=We):L.name=="结束"&&(Je.name=="开始"?Je.markArea.data[0][1].xAxis=We:Je.name=="结束"&&(Je.markLine.data[0].xAxis=We))});m.setOption({series:W},{notMerge:!1,lazyUpdate:!0}),me=We}}else{let[Ne,We]=m.convertFromPixel({seriesIndex:J},[ge.offsetX,ge.offsetY]);if(we(Ne).format("YYYY-MM-DD HH:00")!==me||!Ae||Math.abs(We-Ae)>=.5){const vt=we(Ne).format("YYYY-MM-DD HH:00");oe[vt]=We;let kt=Object.keys(oe),Lu=new Set(kt);W[J].data.forEach(TA=>{Lu.has(TA[0])&&(TA[1]=oe[TA[0]])});let Je=LC(new Date(kt[0]),new Date(kt[kt.length-1]),te),md=Object.entries(oe),Y4=new Set(kt);Je.forEach(TA=>{Y4.has(TA)||md.push(ie(md,TA))});let Qo={};md.forEach(TA=>{Qo[TA[0]]=TA[1]});let X4=Object.keys(Qo),Z4=new Set(X4);W[J].data.forEach(TA=>{if(Z4.has(TA[0])){let Mu="";z.name.includes("m³")?Mu=Ii(Qo[TA[0]]):z.name.includes("mm")?Mu=Qo[TA[0]].toFixed(1):z.name.includes("m")&&(Mu=Qo[TA[0]].toFixed(2)),TA[1]=Mu}}),m.setOption({series:W},{notMerge:!1,lazyUpdate:!0}),me=vt,Ae=We}}}),m.getZr().on("mouseup",function(){if(m.getZr().off("mousemove"),m.getZr().off("mouseup"),w.componentType=="markLine"&&L.data.name=="xAxis"){if(me)if(ue){const ge=we(P[P.length-1]),Ne=se?we(se):"";L.name=="开始"&&we(ue).isAfter(ge)?ue=we(me).add(ee,"hours").format("YYYY-MM-DD HH:00"):L.name=="结束"&&we(ue).isBefore(Ne)&&(ue=we(me).add(-ee,"hours").format("YYYY-MM-DD HH:00")),k={name:"开始/结束",value:L.name=="开始"?`${me}/${ue}`:`${ue}/${me}`}}else k={name:L.name,value:me}}else k={name:w.seriesName,data:W[J].data};k.name&&a("getNewSeriesData",k),m.getZr().on("mousemove",function(ge){let Ne=ge.offsetX,We=ge.offsetY;m.dispatchAction({type:"showTip",x:Ne,y:We})})})}}),window.onresize=function(){m.resize()}},F=O=>{M.nextTick(()=>{m&&m.resize()})},E=(O,N)=>{m.dispatchAction({type:N?"legendSelect":"legendUnSelect",name:O})};function U(O){return O.month()===0&&O.date()===1&&O.hour()===0&&O.minute()===0}function x(O){O.preventDefault();let N=document.querySelector("body .chartMenu");N&&N.remove();let H=O.pageX,K=O.pageY,P=document.createElement("ul");P.style.position="absolute",P.style.left=H+"px",P.style.top=K+"px",P.className="chartMenu";let se=document.createElement("li");se.style.cursor="pointer",se.innerHTML=`<div><img src='${R4}'><span>还原缩放</span></div>`,P.appendChild(se);let ne=document.createElement("li");ne.style.cursor="pointer",ne.innerHTML=`<div><img src='${P4}'><span>复制图片</span></div>`,P.appendChild(ne);let xe=document.createElement("li");xe.style.cursor="pointer",xe.innerHTML=`<div><img src='${N4}'><span>导出图片</span></div>`,P.appendChild(xe),se.addEventListener("click",()=>{m.dispatchAction({type:"dataZoom",dataZoomIndex:0,start:0,end:100})}),ne.addEventListener("click",()=>{OQ(r.value,{useCORS:!0,scale:2,width:r.value.offsetWidth,height:r.value.offsetHeight+50,backgroundColor:"#fff",allowTaint:!0,removeContainer:!0}).then(Ie=>{const V=Ie.toDataURL("image/png"),le=b(V,"图片");I(le),NQ.ElMessage.success("复制成功")})}),xe.addEventListener("click",()=>{R()}),document.body.appendChild(P),document.addEventListener("click",()=>{P.parentNode&&document.body.removeChild(P)})}const b=(O,N="file")=>{const H=O.split(","),K=H[0].match(/:(.*?);/)[1],P=K.split("/")[1],se=window.atob(H[1]);let ne=se.length;const xe=new Uint8Array(ne);for(;ne--;)xe[ne]=se.charCodeAt(ne);return new File([xe],`${N}.${P}`,{type:K})},I=O=>{const N=new FileReader;N.onload=H=>{const K=H.target.result.toString(),P=new Image;P.src=K,P.onload=()=>{let se=T(P),ne=D(se.replace("data:image/png;base64,",""),"image/png",512);navigator.clipboard.write([new ClipboardItem({"image/png":ne})])}},N.readAsDataURL(O)},T=O=>{let N=document.createElement("canvas");return N.width=O.width,N.height=O.height,N.getContext("2d").drawImage(O,0,0,O.width,O.height),N.toDataURL("image/png")},D=(O,N,H)=>{N=N||"",H=H||512;let K=window.atob(O),P=[];for(let ne=0;ne<K.length;ne+=H){let xe=K.slice(ne,ne+H),Ie=new Array(xe.length);for(let le=0;le<xe.length;le++)Ie[le]=xe.charCodeAt(le);let V=new Uint8Array(Ie);P.push(V)}return new Blob(P,{type:N})},R=()=>{OQ(r.value,{useCORS:!0,scale:1,width:r.value.offsetWidth,height:r.value.offsetHeight+50,backgroundColor:"#fff",allowTaint:!0,removeContainer:!0}).then(O=>{const N=O.toDataURL("image/png"),H=document.createElement("a");H.href=N,H.download=n.chartOption.title,H.click()})},$=M.ref();function G(){return $.value?$.value.offsetHeight:0}function X(O,N){return new Promise(H=>{c2({STCD:n.chartOption.stationCode,rzw:O,rzwType:"rz"}).then(K=>{K.statusCode==200&&K.data?H(K.data):H(N*1e3)})})}function ie(O,N){if(O.length>0){let H=O.filter(P=>we(P[0]).isBefore(we(N))),K=O.filter(P=>we(P[0]).isAfter(we(N)));if(H.length==0)return[N,K[0][1]];if(K.length==0)return[N,H[H.length-1][1]];{let P=we(N).diff(we(H[H.length-1][0]),"seconds"),se=K[0][1]-H[H.length-1][1],ne=we(K[0][0]).diff(we(H[H.length-1][0]),"seconds"),xe=P*se/ne+H[H.length-1][1];return[N,Number(xe)]}}}function ve(O){var ne;let N=(ne=n.chartOption.series.find(xe=>xe.name=="开始"))==null?void 0:ne.data.value;const H=we(N),K=we(O),P=H.year()===K.year();return P&&H.month()===K.month()?K.format("DD HH:mm"):P?K.format("MM-DD HH:mm"):K.format("YYYY-MM-DD HH:mm")}return e({getLegendBoxHeight:G,onChange:g}),(O,N)=>{const H=M.resolveComponent("el-checkbox"),K=M.resolveComponent("svg-icon"),P=M.resolveComponent("el-icon"),se=M.resolveComponent("el-dropdown-item"),ne=M.resolveComponent("el-dropdown-menu"),xe=M.resolveComponent("el-dropdown"),Ie=M.resolveDirective("resize");return M.withDirectives((M.openBlock(),M.createElementBlock("div",{class:"box",ref_key:"chartBox",ref:r,onContextmenu:N[1]||(N[1]=V=>x(V))},[M.withDirectives((M.openBlock(),M.createElementBlock("div",K4,[M.createTextVNode(M.toDisplayString(t.chartOption.title),1)])),[[M.vShow,t.chartOption.title],[Ie,F]]),M.withDirectives((M.openBlock(),M.createElementBlock("div",V4,[M.createTextVNode(M.toDisplayString(t.chartOption.subTitle),1)])),[[M.vShow,t.chartOption.subTitle],[Ie,F]]),M.withDirectives((M.openBlock(),M.createElementBlock("div",{class:"legend-box",ref_key:"myLegend",ref:$},[c.value.length>1?(M.openBlock(),M.createBlock(H,{key:0,modelValue:h.value,"onUpdate:modelValue":N[0]||(N[0]=V=>h.value=V),label:"全选",onChange:d,style:{"--fill-color":"#409EFF"}},null,8,["modelValue"])):M.createCommentVNode("",!0),(M.openBlock(!0),M.createElementBlock(M.Fragment,null,M.renderList(c.value,(V,le)=>(M.openBlock(),M.createElementBlock(M.Fragment,{key:le},[V.children?M.createCommentVNode("",!0):(M.openBlock(),M.createBlock(H,{key:0,modelValue:V.isSelected,"onUpdate:modelValue":Se=>V.isSelected=Se,onChange:Se=>g(Se,V.name),style:M.normalizeStyle({"--fill-color":V.color?V.color:"#409EFF"})},{default:M.withCtx(()=>[V.icon?(M.openBlock(),M.createBlock(K,{key:0,"icon-class":V.icon,style:M.normalizeStyle({width:V.iconWidth?V.iconWidth+"px":"20px",height:V.iconHeight?V.iconHeight+"px":"20px"}),color:V.color},null,8,["icon-class","style","color"])):M.createCommentVNode("",!0),M.createElementVNode("span",{style:M.normalizeStyle({color:V.color,marginLeft:"3px"})},M.toDisplayString(V.key?V.key:V.name),5),V.children&&V.children.length>0?(M.openBlock(),M.createBlock(P,{key:1,class:"el-icon--right"},{default:M.withCtx(()=>[M.createVNode(M.unref(RQ))]),_:1})):M.createCommentVNode("",!0)]),_:2},1032,["modelValue","onUpdate:modelValue","onChange","style"])),V.children&&V.children.length>0?(M.openBlock(),M.createBlock(xe,{key:1,"hide-on-click":!1},{dropdown:M.withCtx(()=>[M.createVNode(ne,null,{default:M.withCtx(()=>[(M.openBlock(!0),M.createElementBlock(M.Fragment,null,M.renderList(V.children,(Se,AA)=>(M.openBlock(),M.createBlock(se,{key:AA},{default:M.withCtx(()=>[M.createVNode(H,{modelValue:Se.isSelected,"onUpdate:modelValue":Nt=>Se.isSelected=Nt,onChange:Nt=>g(Nt,Se.name),style:M.normalizeStyle({"--fill-color":Se.color?Se.color:"#409EFF"})},{default:M.withCtx(()=>[M.createElementVNode("div",G4,[Se.icon?(M.openBlock(),M.createBlock(K,{key:0,"icon-class":Se.icon,style:M.normalizeStyle({width:Se.iconWidth?Se.iconWidth+"px":"20px",height:Se.iconHeight?Se.iconHeight+"px":"20px"}),color:Se.color},null,8,["icon-class","style","color"])):M.createCommentVNode("",!0)]),M.createElementVNode("span",{style:M.normalizeStyle({color:Se.color,marginLeft:"3px"})},M.toDisplayString(Se.key?Se.key:Se.name),5)]),_:2},1032,["modelValue","onUpdate:modelValue","onChange","style"])]),_:2},1024))),128))]),_:2},1024)]),default:M.withCtx(()=>[M.createVNode(H,{modelValue:V.isSelected,"onUpdate:modelValue":Se=>V.isSelected=Se,onChange:Se=>g(Se,V.name),style:M.normalizeStyle({"--fill-color":V.color?V.color:"#409EFF"})},{default:M.withCtx(()=>[V.icon?(M.openBlock(),M.createBlock(K,{key:0,"icon-class":V.icon,style:M.normalizeStyle({width:V.iconWidth?V.iconWidth+"px":"20px",height:V.iconHeight?V.iconHeight+"px":"20px"}),color:V.color},null,8,["icon-class","style","color"])):M.createCommentVNode("",!0),M.createElementVNode("span",{style:M.normalizeStyle({color:V.color,marginLeft:"3px"})},M.toDisplayString(V.key?V.key:V.name),5),V.children&&V.children.length>0?(M.openBlock(),M.createBlock(P,{key:1,class:"el-icon--right"},{default:M.withCtx(()=>[M.createVNode(M.unref(RQ))]),_:1})):M.createCommentVNode("",!0)]),_:2},1032,["modelValue","onUpdate:modelValue","onChange","style"])]),_:2},1024)):M.createCommentVNode("",!0)],64))),128))])),[[Ie,F]]),M.createElementVNode("div",z4,[M.createElementVNode("div",{id:t.id,style:M.normalizeStyle({width:t.width,height:t.height})},null,12,W4)])],32)),[[Ie,F]])}}},[["__scopeId","data-v-bae20fc6"]]),q4="";Ft.HydroGraph=PQ,Ft.default=PQ,Object.defineProperties(Ft,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -1 +1 @@
-.box[data-v-bae20fc6]{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.box .title[data-v-bae20fc6]{color:red;font-size:25px;font-weight:700;text-align:center;height:25px;line-height:25px}.box .subTitle[data-v-bae20fc6]{color:#3a4ce1;font-size:14px;font-weight:700;text-align:center;height:25px;line-height:25px}.box .legend-box[data-v-bae20fc6]{margin-left:33px;z-index:10;display:flex;align-items:center;flex-wrap:wrap}.box .legend-box>.el-checkbox[data-v-bae20fc6]{margin-right:8px}.box .legend-box[data-v-bae20fc6] .el-dropdown{margin-right:8px}.box .legend-box[data-v-bae20fc6] .el-dropdown .el-tooltip__trigger{display:flex;align-items:center}.box .mychart[data-v-bae20fc6]{flex:1;position:relative}.box .mychart[data-v-bae20fc6] .line-name-tooltip-style{position:absolute;padding:8px;background:rgba(255,255,255,.95);border-radius:4px;box-shadow:0 4px 12px #0000001a;font-size:14px;pointer-events:none;opacity:0;transform:translate(-100%,-120%);transition:all .25s cubic-bezier(.4,0,.2,1);z-index:1000}[data-v-bae20fc6] .el-checkbox .el-checkbox__label{color:var(--fill-color);display:flex;align-items:center;padding-left:3px}[data-v-bae20fc6] .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner,[data-v-bae20fc6] .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:var(--fill-color);border-color:var(--fill-color)!important}[data-v-bae20fc6] .el-checkbox .el-checkbox__input.is-focus .el-checkbox__inner,[data-v-bae20fc6] .el-checkbox .el-checkbox__inner:hover{border-color:var(--fill-color)!important}
+.box[data-v-bae20fc6]{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.box .title[data-v-bae20fc6]{color:red;font-size:25px;font-weight:700;text-align:center;height:25px;line-height:25px}.box .subTitle[data-v-bae20fc6]{color:#3a4ce1;font-size:14px;font-weight:700;text-align:center;height:25px;line-height:25px}.box .legend-box[data-v-bae20fc6]{margin-left:33px;z-index:10;display:flex;align-items:center;flex-wrap:wrap}.box .legend-box>.el-checkbox[data-v-bae20fc6]{margin-right:8px}.box .legend-box[data-v-bae20fc6] .el-dropdown{margin-right:8px}.box .legend-box[data-v-bae20fc6] .el-dropdown .el-tooltip__trigger{display:flex;align-items:center}.box .mychart[data-v-bae20fc6]{flex:1;position:relative}.box .mychart[data-v-bae20fc6] .line-name-tooltip-style{position:absolute;padding:8px;background:rgba(255,255,255,.95);border-radius:4px;box-shadow:0 4px 12px #0000001a;font-size:14px;pointer-events:none;opacity:0;transform:translate(-100%,-120%);transition:all .25s cubic-bezier(.4,0,.2,1);z-index:1000}[data-v-bae20fc6] .el-checkbox .el-checkbox__label{color:var(--fill-color);display:flex;align-items:center;padding-left:3px}[data-v-bae20fc6] .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner,[data-v-bae20fc6] .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:var(--fill-color);border-color:var(--fill-color)!important}[data-v-bae20fc6] .el-checkbox .el-checkbox__input.is-focus .el-checkbox__inner,[data-v-bae20fc6] .el-checkbox .el-checkbox__inner:hover{border-color:var(--fill-color)!important}.box{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.box .title{color:red;font-size:25px;font-weight:700;text-align:center;height:25px;line-height:25px}.box .subTitle{color:#3a4ce1;font-size:14px;font-weight:700;text-align:center;height:25px;line-height:25px}.box .legend-box{margin-left:33px;z-index:10;display:flex;align-items:center;flex-wrap:wrap}.box .legend-box>.el-checkbox{margin-right:8px}.box .legend-box :deep(.el-dropdown){margin-right:8px}.box .legend-box :deep(.el-dropdown) .el-tooltip__trigger{display:flex;align-items:center}.box .mychart{flex:1;position:relative}.box .mychart :deep(.line-name-tooltip-style){position:absolute;padding:8px;background:rgba(255,255,255,.95);border-radius:4px;box-shadow:0 4px 12px #0000001a;font-size:14px;pointer-events:none;opacity:0;transform:translate(-100%,-120%);transition:all .25s cubic-bezier(.4,0,.2,1);z-index:1000}:deep(.el-checkbox) .el-checkbox__label{color:var(--fill-color);display:flex;align-items:center;padding-left:3px}:deep(.el-checkbox) .el-checkbox__input.is-checked .el-checkbox__inner,:deep(.el-checkbox) .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:var(--fill-color);border-color:var(--fill-color)!important}:deep(.el-checkbox) .el-checkbox__input.is-focus .el-checkbox__inner,:deep(.el-checkbox) .el-checkbox__inner:hover{border-color:var(--fill-color)!important}

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "hydro-graph",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A Vue 3 component for hydrograph visualization using ECharts",
   "main": "dist/hydro-graph.umd.js",
   "module": "dist/hydro-graph.es.js",
   "types": "dist/types/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "vite build",

package/src/App.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="app">
-    <h1>HydroGraph 组件测试</h1>
-    <div class="chart-container">
-      <HydroGraph 
-        :chartOption="chartOption"
-        :legendList="legendList"
-        width="100%"
-        height="500px"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import HydroGraph from './HydroGraph.vue'
-
-const chartOption = {
-  title: '水位流量关系图',
-  xAxis: [
-    {
-      type: 'time',
-      name: '时间',
-      gridIndex: 0
-    }
-  ],
-  yAxis: [
-    {
-      type: 'value',
-      name: '水位 (m)',
-      gridIndex: 0,
-      position: 'left'
-    },
-    {
-      type: 'value',
-      name: '流量 (m³/s)',
-      gridIndex: 0,
-      position: 'right'
-    }
-  ],
-  series: [
-    {
-      name: '实测水位',
-      type: 'line',
-      yAxisIndex: 0,
-      data: [
-        ['2024-01-01 00:00', 10.2],
-        ['2024-01-01 01:00', 10.5],
-        ['2024-01-01 02:00', 10.8],
-        ['2024-01-01 03:00', 11.0],
-        ['2024-01-01 04:00', 11.2],
-        ['2024-01-01 05:00', 11.5],
-        ['2024-01-01 06:00', 11.8],
-        ['2024-01-01 07:00', 12.0]
-      ]
-    },
-    {
-      name: '流量',
-      type: 'bar',
-      yAxisIndex: 1,
-      data: [
-        ['2024-01-01 00:00', 120],
-        ['2024-01-01 01:00', 150],
-        ['2024-01-01 02:00', 180],
-        ['2024-01-01 03:00', 200],
-        ['2024-01-01 04:00', 220],
-        ['2024-01-01 05:00', 250],
-        ['2024-01-01 06:00', 280],
-        ['2024-01-01 07:00', 300]
-      ]
-    }
-  ]
-}
-
-const legendList = [
-  {
-    name: '实测水位',
-    isSelected: true
-  },
-  {
-    name: '流量',
-    isSelected: true
-  }
-]
-</script>
-
-<style>
-.app {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.chart-container {
-  width: 100%;
-  height: 500px;
-  margin-top: 20px;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  padding: 20px;
-}
-</style>