| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- import{e,c as t,S as a,a as i,b as r,i as n,u as l,d as s,f as o,p as h,m as d,g as u}from"./echarts-a77f8af6.js";import{Q as p,J as g,_ as v,O as c,N as m,F as y}from"./zrender-ee9f2f6d.js";e({type:"series.liquidFill",optionUpdated:function(){var e=this.option;e.gridSize=Math.max(Math.floor(e.gridSize),4)},getInitialData:function(e,i){var r=t(e.data,{coordDimensions:["value"]}),n=new a(r,this);return n.initData(e.data),n},defaultOption:{color:["#294D99","#156ACF","#1598ED","#45BDFF"],center:["50%","50%"],radius:"50%",amplitude:"8%",waveLength:"80%",phase:"auto",period:"auto",direction:"right",shape:"circle",waveAnimation:!0,animationEasing:"linear",animationEasingUpdate:"linear",animationDuration:2e3,animationDurationUpdate:1e3,outline:{show:!0,borderDistance:8,itemStyle:{color:"none",borderColor:"#294D99",borderWidth:8,shadowBlur:20,shadowColor:"rgba(0, 0, 0, 0.25)"}},backgroundStyle:{color:"#E3F7FF"},itemStyle:{opacity:.95,shadowBlur:50,shadowColor:"rgba(0, 0, 0, 0.4)"},label:{show:!0,color:"#294D99",insideColor:"#fff",fontSize:50,fontWeight:"bold",align:"center",baseline:"middle",position:"inside"},emphasis:{itemStyle:{opacity:.8}}}});const f=i({type:"ec-liquid-fill",shape:{waveLength:0,radius:0,radiusY:0,cx:0,cy:0,waterLevel:0,amplitude:0,phase:0,inverse:!1},buildPath:function(e,t){null==t.radiusY&&(t.radiusY=t.radius)
- /**
- * We define a sine wave having 4 waves, and make sure at least 8 curves
- * is drawn. Otherwise, it may cause blank area for some waves when
- * wave length is large enough.
- */;
- // map phase to [-Math.PI * 2, 0]
- for(var a=Math.max(2*Math.ceil(2*t.radius/t.waveLength*4),8);t.phase<2*-Math.PI;)t.phase+=2*Math.PI;for(;t.phase>0;)t.phase-=2*Math.PI;var i=t.phase/Math.PI/2*t.waveLength,r=t.cx-t.radius+i-2*t.radius;
- /**
- * top-left corner as start point
- *
- * draws this point
- * |
- * \|/
- * ~~~~~~~~
- * | |
- * +------+
- */
- e.moveTo(r,t.waterLevel);for(
- /**
- * top wave
- *
- * ~~~~~~~~ <- draws this sine wave
- * | |
- * +------+
- */
- var n=0,l=0;l<a;++l){var s=l%4,o=w(l*t.waveLength/4,s,t.waveLength,t.amplitude);e.bezierCurveTo(o[0][0]+r,-o[0][1]+t.waterLevel,o[1][0]+r,-o[1][1]+t.waterLevel,o[2][0]+r,-o[2][1]+t.waterLevel),l===a-1&&(n=o[2][0])}t.inverse?(
- /**
- * top-right corner
- * 2. draws this line
- * |
- * +------+
- * 3. draws this line -> | | <- 1. draws this line
- * ~~~~~~~~
- */
- e.lineTo(n+r,t.cy-t.radiusY),e.lineTo(r,t.cy-t.radiusY),e.lineTo(r,t.waterLevel)):(
- /**
- * top-right corner
- *
- * ~~~~~~~~
- * 3. draws this line -> | | <- 1. draws this line
- * +------+
- * ^
- * |
- * 2. draws this line
- */
- e.lineTo(n+r,t.cy+t.radiusY),e.lineTo(r,t.cy+t.radiusY),e.lineTo(r,t.waterLevel)),e.closePath()}});
- /**
- * Using Bezier curves to fit sine wave.
- * There is 4 control points for each curve of wave,
- * which is at 1/4 wave length of the sine wave.
- *
- * The control points for a wave from (a) to (d) are a-b-c-d:
- * c *----* d
- * b *
- * |
- * ... a * ..................
- *
- * whose positions are a: (0, 0), b: (0.5, 0.5), c: (1, 1), d: (PI / 2, 1)
- *
- * @param {number} x x position of the left-most point (a)
- * @param {number} stage 0-3, stating which part of the wave it is
- * @param {number} waveLength wave length of the sine wave
- * @param {number} amplitude wave amplitude
- */function w(e,t,a,i){return 0===t?[[e+.5*a/Math.PI/2,i/2],[e+.5*a/Math.PI,i],[e+a/4,i]]:1===t?[[e+.5*a/Math.PI/2*(Math.PI-2),i],[e+.5*a/Math.PI/2*(Math.PI-1),i/2],[e+a/4,0]]:2===t?[[e+.5*a/Math.PI/2,-i/2],[e+.5*a/Math.PI,-i],[e+a/4,-i]]:[[e+.5*a/Math.PI/2*(Math.PI-2),-i],[e+.5*a/Math.PI/2*(Math.PI-1),-i/2],[e+a/4,0]]}var M=h;function I(e){return e&&0===e.indexOf("path://")}r({type:"liquidFill",render:function(e,t,a){var i=this,r=this.group;r.removeAll();var h=e.getData(),w=h.getItemModel(0),P=w.get("center"),b=w.get("radius"),x=a.getWidth(),L=a.getHeight(),S=Math.min(x,L),C=0,D=0,F=e.get("outline.show");F&&(C=e.get("outline.borderDistance"),D=M(e.get("outline.itemStyle.borderWidth"),S));var T,E,Y,z=M(P[0],x),A=M(P[1],L),O=!1,W=e.get("shape");("container"===W?(
- // a shape that fully fills the container
- O=!0,E=[(T=[x/2,L/2])[0]-D/2,T[1]-D/2],Y=[M(C,x),M(C,L)],b=[Math.max(E[0]-Y[0],0),Math.max(E[1]-Y[1],0)]):(E=(T=M(b,S)/2)-D/2,Y=M(C,S),b=Math.max(E-Y,0)),F)&&(N().style.lineWidth=D,r.add(N()));var _=O?0:z-b,k=O?0:A-b,B=null;r.add(
- /**
- * Create background
- */
- function(){
- // Seperate stroke and fill, so we can use stroke to cover the alias of clipping.
- var t=G(b);t.setStyle(e.getModel("backgroundStyle").getItemStyle()),t.style.fill=null,
- // Stroke is front of wave
- t.z2=5;var a=G(b);a.setStyle(e.getModel("backgroundStyle").getItemStyle()),a.style.stroke=null;var i=new p;return i.add(t),i.add(a),i}
- /**
- * wave shape
- */());
- // each data item for a wave
- var U=this._data,j=[];
- /**
- * Get path for outline, background and clipping
- *
- * @param {number} r outter radius of shape
- * @param {boolean|undefined} isForClipping if the shape is used
- * for clipping
- */
- function G(e,t){if(W){
- // customed symbol path
- if(I(W)){var a=d(W.slice(7),{}),i=a.getBoundingRect(),r=i.width,n=i.height;r>n?(n*=2*e/r,r=2*e):(r*=2*e/n,n=2*e);var l=t?0:z-r/2,s=t?0:A-n/2;return a=d(W.slice(7),{},new m(l,s,r,n)),t&&(a.x=-r/2,a.y=-n/2),a}if(O){
- // fully fill the container
- var o=t?-e[0]:z-e[0],h=t?-e[1]:A-e[1];return u("rect",o,h,2*e[0],2*e[1])}h=t?-e:A-e;return"pin"===W?h+=e:"arrow"===W&&(h-=e),u(W,o=t?-e:z-e,h,2*e,2*e)}return new y({shape:{cx:t?0:z,cy:t?0:A,r:e}})}
- /**
- * Create outline
- */function N(){var t=G(T);return t.style.fill=null,t.setStyle(e.getModel("outline.itemStyle").getItemStyle()),t}function q(t,a,i){var r=O?b[0]:b,n=O?L/2:b,l=h.getItemModel(t),o=l.getModel("itemStyle"),d=l.get("phase"),u=M(l.get("amplitude"),2*n),p=M(l.get("waveLength"),2*r),g=n-h.get("value",t)*n*2;d=i?i.shape.phase:"auto"===d?t*Math.PI/4:d;var v=o.getItemStyle();if(!v.fill){var c=e.get("color"),m=t%c.length;v.fill=c[m]}var y=new f({shape:{waveLength:p,radius:r,radiusY:n,cx:2*r,cy:0,waterLevel:g,amplitude:u,phase:d,inverse:a},style:v,x:z,y:A});y.shape._waterLevel=g;var w=l.getModel("emphasis.itemStyle").getItemStyle();w.lineWidth=0,y.ensureState("emphasis").style=w,s(y);
- // clip out the part outside the circle
- var I=G(b,!0);
- // set fill for clipPath, otherwise it will not trigger hover event
- return I.setStyle({fill:"white"}),y.setClipPath(I),y}function H(e,t,a){var i=h.getItemModel(e),r=i.get("period"),n=i.get("direction"),l=h.get("value",e),s=i.get("phase");s=a?a.shape.phase:"auto"===s?e*Math.PI/4:s;var o=0;o="auto"===r?function(t){var a=h.count();return 0===a?t:t*(.2+(a-e)/a*.8)}(5e3):"function"==typeof r?r(l,e):r;
- // phase for moving left/right
- var d=0;"right"===n||null==n?d=Math.PI:"left"===n?d=-Math.PI:"none"===n&&(d=0),
- // wave animation of moving left/right
- "none"!==n&&i.get("waveAnimation")&&t.animate("shape",!0).when(0,{phase:s}).when(o/2,{phase:d+s}).when(o,{phase:2*d+s}).during((function(){B&&B.dirty(!0)})).start()}
- /**
- * text on wave
- */h.diff(U).add((function(t){var a=q(t,!1),i=a.shape.waterLevel;a.shape.waterLevel=O?L/2:b,n(a,{shape:{waterLevel:i}},e),a.z2=2,H(t,a,null),r.add(a),h.setItemGraphicEl(t,a),j.push(a)})).update((function(t,a){for(var n=U.getItemGraphicEl(a),s=q(t,!1,n),o={},d=["amplitude","cx","cy","phase","radius","radiusY","waterLevel","waveLength"],u=0
- // new wave is used to calculate position, but not added
- ;u<d.length;++u){var p=d[u];s.shape.hasOwnProperty(p)&&(o[p]=s.shape[p])}var g={},v=["fill","opacity","shadowBlur","shadowColor"];for(u=0;u<v.length;++u){p=v[u];s.style.hasOwnProperty(p)&&(g[p]=s.style[p])}O&&(o.radiusY=L/2),
- // changes with animation
- l(n,{shape:o,x:s.x,y:s.y},e),e.isUniversalTransitionEnabled&&e.isUniversalTransitionEnabled()?l(n,{style:g},e):n.useStyle(g);
- // instant changes
- var c=n.getClipPath(),m=s.getClipPath();n.setClipPath(s.getClipPath()),n.shape.inverse=s.inverse,c&&m&&i._shape===W&&!I(W)&&
- // Can be animated.
- l(m,{shape:c.shape},e,{isFrom:!0}),H(t,n,n),r.add(n),h.setItemGraphicEl(t,n),j.push(n)})).remove((function(e){var t=U.getItemGraphicEl(e);r.remove(t)})).execute(),w.get("label.show")&&r.add(function(t){var a=w.getModel("label");function i(){var t=e.getFormattedLabel(0,"normal"),a=100*h.get("value",0),i=h.getName(0)||e.name;return isNaN(a)||(i=a.toFixed(0)+"%"),null==t?i:t}var r={z2:10,shape:{x:_,y:k,width:2*(O?b[0]:b),height:2*(O?b[1]:b)},style:{fill:"transparent"},textConfig:{position:a.get("position")||"inside"},silent:!0},n={style:{text:i(),textAlign:a.get("align"),textVerticalAlign:a.get("baseline")}};Object.assign(n.style,o(a));var l=new g(r),s=new g(r);s.disableLabelAnimation=!0,l.disableLabelAnimation=!0;var d=new v(n),u=new v(n);l.setTextContent(d),s.setTextContent(u);var m=a.get("insideColor");u.style.fill=m;var y=new p;y.add(l),y.add(s);
- // clip out waves for insideText
- var f=G(b,!0);return B=new c({shape:{paths:t},x:z,y:A}),B.setClipPath(f),s.setClipPath(B),y}(j)),this._shape=W,this._data=h},dispose:function(){
- // dispose nothing here
- }});
- //# sourceMappingURL=echarts-liquidfill-bd8f0ed5.js.map
|