From 0116b0c1eb6be6c3d112aa1a66e90ebfb5cc249b Mon Sep 17 00:00:00 2001
From: "xuying.xu" <xuying.xu@alibaba-inc.com>
Date: Sat, 14 Sep 2024 15:46:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=98=B6=E6=A2=AF?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/ci.yml                      |   2 +-
 packages/f2/src/index.ts                      |   1 -
 packages/f2/src/theme.ts                      |   9 ++
 ...30\266\346\242\257\345\233\276-1-snap.png" | Bin 0 -> 8307 bytes
 .../f2/test/components/line/line.test.tsx     | 112 ++++++++++++------
 5 files changed, 83 insertions(+), 41 deletions(-)
 create mode 100644 "packages/f2/test/components/line/__image_snapshots__/line-test-tsx-\346\212\230\347\272\277\345\233\276-\345\237\272\347\241\200\346\212\230\347\272\277\345\233\276-\351\230\266\346\242\257\345\233\276-1-snap.png"

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 810146281..6802f0713 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node_version: ['16', '18']
+        node_version: ['18']
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
diff --git a/packages/f2/src/index.ts b/packages/f2/src/index.ts
index 2b7897bf7..15a68fa4b 100644
--- a/packages/f2/src/index.ts
+++ b/packages/f2/src/index.ts
@@ -4,6 +4,5 @@ export * from '@antv/f-engine';
 export { default as Chart, ChartProps } from './chart';
 export { Scale, ScaleConfig } from './deps/f2-scale/src';
 export * from './components';
-
 //@ts-ignore
 export default { version: VERSION };
diff --git a/packages/f2/src/theme.ts b/packages/f2/src/theme.ts
index f4a70e844..e683bca96 100644
--- a/packages/f2/src/theme.ts
+++ b/packages/f2/src/theme.ts
@@ -117,6 +117,15 @@ export default {
       smooth: {
         smooth: true,
       },
+      'step-start': {
+        step: 'start',
+      },
+      'step-middle': {
+        step: 'middle',
+      },
+      'step-end': {
+        step: 'end',
+      },
       dash: {
         lineDash: ['8px', '8px'],
       },
diff --git "a/packages/f2/test/components/line/__image_snapshots__/line-test-tsx-\346\212\230\347\272\277\345\233\276-\345\237\272\347\241\200\346\212\230\347\272\277\345\233\276-\351\230\266\346\242\257\345\233\276-1-snap.png" "b/packages/f2/test/components/line/__image_snapshots__/line-test-tsx-\346\212\230\347\272\277\345\233\276-\345\237\272\347\241\200\346\212\230\347\272\277\345\233\276-\351\230\266\346\242\257\345\233\276-1-snap.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fb88b7e26c627a4e3698c0a53c6d39847f02d1ef
GIT binary patch
literal 8307
zcmdUVc{r5q-}g24CHqz>G-M~cQkH6DUm9dz+U&BHn6Z=XjwD-_5e-R5wq#!-*~u0$
zvSrB(ZVV=#bKLjyJKpE{>pkB8-s5mM9Ordj*ZDn{?`Qd*VvP;8m>5noKoG>Fqm4j9
z5DX3eo~5G!zq_58=O9P`(m`A`eQftT8<l0FnbH|DqRQbYM4u=mquR|LehwF@B~Y(+
zQ=o<Gg)JZdXO>OlX4;QeUgU}zDlHEu^S}aX1rYZv%^eiiBVzJGPtw7)!_P^c;#*<o
zTJ91;Xh&xB===XJOwB=e$RuZ!HrA{+JPi3WBlPgCVNidOJw`3)z>d06JCq9iAg^j*
z@1#u$(LaO0k0?=}f?WW{u1ybP2-c<O^>|KhrN&&+pb*la5Id*QVx*H>Ye4Rji<74%
ze?s6ql_*h+UZF;Z+=UapNPdI<btFWsem-nbNrya2c>fvjhCtX0RyqVh^BzCMLOIUg
z><aO_ySOZSczPbuhjKuEVpz4b{-uy-?4?t}<ZrYmXc&h#F*ln)j^<QHnYu+DR;%Zs
z9cnM;&{fUXvX7{KvHmlZMsIl2y{_l7wzjsJ@)<pB3qApX!pVCEwzfawRaI5}VZT_D
z;!o(YEmO;wA?yt4tsf+lr+!B>*Rh2s$py-R5wsv93gR2&3VX?RA?%7M+=HtnL@>E4
zOU-k-zLQ39U}9pzR6K=w$jV<qS-I&;Q&+@Z^OlC{NgEcA8BJGiQgwB8(Spxj05pfV
z=lja|qpn*JER?CBK@e_VL>HX4ycGXsIO5Xe;NXU0$#$|dg^j)ak)yr+OaOGN)*{i<
z0Zr)yoAZR_zt~48Wj6e{AI6@6yI@@{IXOK&&4jzi7NCn*r;@2{`p%Oi2KNyPwTGP)
zgnP0qx|dtjE2MS*aIH&nT~h+VTKoI&-tO(~l_)Nsvmo!&c#?*eR%elcfx)gwn0_x;
zFg8$`>yO8xYu48SCj}*?!=mEiRceR>`UVsIyT(6{n<PZ_M2)=f8Us`mZ0NZcqgGOO
z^^ehRZmS((hSFA*&ex2L`ZM7}74l2Aw}{!<+4(6*TEldi7W8g24|zu{I7GSQ<$Y_X
z@<%x?DxA<KxNT2hah_8jWydBbQC7abTSHcV3RJ-epXfQ`HM<sko>MUtaiVV#b+irk
zwJEv;ni*!`hSCyf#$D%Y<YN^p(#)W~ac-UlY+IfXcpBc=&45uw$3ugWRN4;46l=5A
zLQnKsoLFYy8VcuN>?d^z0V#%6wX;Y<@%Ga>@+oYl1-%YfHP^$yp_L=Qk?U_cTM_Na
zCh!sj{XUxCl=&kkdWR4ZcY29FuDRN5uAj!s!FcPlca9vvdG2N=`$qh?q|H?;#bDt_
z8G&lmB?pG=JE>n&`?MpvyoGRa8vQF95>Ss{l^y4*^V3#oEf3xH3rMZ6PLppp@;Enj
zCalG&F<gh*!x?inY`=KWf@exc{b~)LBg#)pbCO)0nNF^Lz_#%<-hbxIeL5_-<$_C(
z?lrgE)2uoinwZ@VhNhRld?e{35uxGy?BmZ04Zdeuic_o4pTYetWUL4hcI3;Q+Zru3
zCnCC2nNh^lt9h2rAU9vVVtROoq4B(3T6q7z-v)i1ov&x7hkM43VR03$H7D46uL)|j
zurPVN;V>acZG7TH>+!hUpm@cWi;I4u^etA5nEKe3K}`bPEifplK*32G7<i&0OFhG0
zcD(3v+6s(MLB=aozB1HrscBzD5-ew}X<{A!*9RK0@d|=r19ZlO>(_Z#+QBIG(qKvc
zneqRO>R_sErrMQMr8_I$Ez>@uf7h&*Z%I*q@^2qf_SxEKPEt}u+^{x7<9!7ihQ@xb
z;L{H(R_B;HM2V@bY~`n@XXGGh>Y1U>i1a<lGgH=ZB*E5D*nqS6RaRvKc5~6i<qg4-
z+T7PYpMP~L({cz={?c9h`!rIFsJ2T8;$~hiIV~2~KmI!Qj^h0D>Kaopb&@MmMeVK_
zaU)h!F-ORNGiVxYXVc42VGl`7Sr;}`r#)uwMoXfRVF7vaog%Q}jdrJ-e+PK}31`6#
zy8g`0EtlV8-4f4V*c3mzLnuCBsQ=_ZGR_YFd)b>uAb&kh=XBK18>fgqZAqD>EcZ7d
zk^52n0zDV?7plD8@ikF2>)VBKM(gv|vhaq;2KW53l?j^X?m9gozqsaN+hqSpYq*Pd
zI<9W1h?De@7R!AkN~{`)?;BnEsHv4Af!7vD0oxxe#}eM3_iJnVd4`AJ?k5Y$zMci2
zSYj~Txa9&TgZ+qA$PGk+r0u85Mhi(bDhHZS4@m6-e3v;YNtKi&GTwJ%pS+kdms%~u
z&l^i}pHJ)7d0+8F-r6C2W_0wCcCC#alS4$znzbmWT49wPg@Zlz+k(~VEw)n}v@K3i
z{DyK-suI-d?yXrfPc&A<NxF(hamW?NlI?{X1kHI4=mFp5M{B{>H4pw&js`Zytev85
zsiAj8x{Jo?#D23sSoWQIeu_=Kf%$c7S*5Fzqg)26dtsABJiLh~bOz=O8Pnoa*!I2}
zpS-N1!tGX4BZeJSP*jw{udQX>5>M%)o5Sl1Z-F4y4BS-D|Fze)6XLXmACz6an=w=n
zftvAMS*l(ucjm|JC@)sA9Qjw{Sq?Ia{i+S!Lj>QEV&K7(!KyAP;-0FTzsq_446mDT
zOP!EE${)w{9}HSGW%N2`FXsQAyxALm0bZbWl#bM`9OZyzmAu%0H@eTSf4LBgU1(3U
z3v|&fG7aQwMz94ulyRD9t6{nwD6WYqcEId%>pOP(r<!gPmijRv8bzj`a@iAfAVYIq
z+q^0@j%H`Jj4J2BJa0g0XQ6_)FS#tGUSh<x+0I=8fzhSM^@^(ryp*Wz$W4uZxDrVG
zL#H|K40R*!sk3FAz_~zAQ&RhWz<ti4h%F*h&8LD&IcsaYe4{H4jB*!K`@CWh?SF69
z#AxsKb$n>$PniF5h{?MsXXwql;5+rRL&Z4+X+1keF@(i!*{M_^#8s>@nuALXnrX5R
zZW)@fsEfV^iL6S>&0BoLcl@NbmwmUmytT$*9Z8Uy()%m6zqO^|yfD+Uvp#*~bQ}M2
zBN<OfNjJ{h&505>;%FNJq9F-%y#Dc=tf@q4ggHqkslue|;~^B0TL&O{jjFu&In$kc
zX44-=T1SM^9|!e6#$dAM=Nb-^y&POOlDHbFRnx*}Dgs+eLL1v#d*{<d&s=idFK~K3
zM<C?LJ!q5vNyk2ZD$I0;P&XEY_7SU?jLm48QvOvIoSY-aG~rXIa>o}nv|FBk6u3>a
zsp$x7{9PQP-q_JQ_IMi~&()|I2^bF`gw((=;GJ9=GK)0(0?@F>-VMtU227>M>Ja4#
z>&N1(KWcFtOQ|d5;VfrG)I4ip>@iHRTSV?xUjGO2oX`ygMAi<b{f;0-fdDUsy`l<n
zlupxYmp_4=7`i=uOvb0_Uz2gAP<Eu&iJdN*ye2lb)qdk`HFT^7fELHwSj1^<$V-}=
z*AW03EM~3eL-kr}yb{TA2|arZf)!DVoYJtMVh$i>El)J|q`zNG475urv9DPq)+yci
ztu?U9ze6l6c+=?PJFvy9I8%h`ORuh<>$;qCd9Tj1)@t}sHh@ADv3mJAUtODd&Lom%
zG@#)wcHJH|^`mgFy0h(8&VfQ`e%89)T(_Ii$ECnRH!I0h-D6@lK|0ELd=8L*c&m)C
zH+|sf>6X~!l<N6P)qSD%(+3feu?~FdkB7U;Up?&)ro8=+P*auwO6T}E_jy#q!ou;H
zqWksA$(R0wH|-Enck(?4o&LVe*G?1DeZd3Z?fE}HSEG-yEsqs#hrR2a0L~X!B$#eS
z>~S-k9Zgmmk%FxZ>hw4B68q?hl5uKyDR|3LgWp@#SJD9CgXV~Tvk@%G*v=V_c|F|1
zpsq8RSJp@OPge%=JbqeydPe|xOK1F5AI%MjnL7zr5p7?h2E>CM*2KeaNO}4g_u1&d
z_#?WJdM#z6$_YmNuzxb<98pK*EZ7P$tG`E1{ih8aq%(SHT>m>_z!M|1Wa1948q}G2
z{LdGJK+>B_ut`%lS<Sef3L$=F6nSBW&mQ<bIl1Oq!jD>yL~(5BwIy{79mjE#?oiuT
zoOzC7d6tJE%E-0EllnblC}wGE&*TNt3c&z5QvSNBYn#%)gg@;%3|RAilseAq^SSBU
zd$=FAJVD2EjKUR`Mqhw8K!#<-#nzK!V>NuumXH$VW7cL<>^IYr?H_QtdnthTZFdN?
ze9~sfMW%sb^CPLq0Ijb1$dqt?_jhrh?*s-C;d0!~>hWLpl&8F|&!tLP$3be;I1Xr<
zhHxEg+JId79I&;>w5LIz7S4Y&s$cx#xG(pLyIOo+Kk9B&)7D)!ZM{y(bMPhTBc%pU
zXjjV0p)qh1>2wYkpb!aoP(<yw!NGD1w*~{Ts)C{-mjEZHrAlOx-;JT8!y0w<aTLBF
znrH2$i^U%d-j*=;8t;^Qq#pPuR^q`lk$)+Z*5wL%;AurrjQP=FW94E;|DpTp%H^Fe
z2?2+LyEDNt7xtWYc4v7SNd<fNMs3uC|JWusK8iA0>RrRnr#1Ou2GcQogza#nB@f)*
zhmuFG+-Q?oC%KF!#gV#ED=vm8Eht?)L>=Nq%;%>lN7l$?^oVUO_M+TnoGfQ2pU9|O
z#z<(cOMR+;`|$o4i-wLFOH)b7Z-P&4ec-n@Hw{WkN_aKz1)O&%2-;#}yM!Lh)8q&Y
z478*4iixQ|S%uRYX>-EVjpncQ<%HuC9u7!o3J{l<XU*U4;wdk3ga){xltc476VBG%
z?oO2|HsCGv+3w4R`{=}#4c%r@|CN09C)$OL#L9N#(zbrZ$6~EB1#esNiEsB>tLy4e
zl|`GhH}+q;l}>mhs_r~K_!)me$$ay~p3lUPcSfuW8*^}=cZOM2$wT5-U+b^U&v=Z#
zDWTlojg_e$=IE4f2n#2Cn`&cm<p(rjzD&iT*qA}xCL3q@FBJV%qfSG$KdOFt6}8B|
zF<@Wxj^Kt}L4rIhQ?$a5n-C&qzgRvu5HK5?rR5R_3BjPA{^sVtt)T#zNk9cgp+<!{
zHQoG@PVb+o(QfhC&?c*TxnN9G1d8!ez{Maq-TT%Wy5xVY1Jj*rEi6w2oph97I|Qkp
zOXSf2m{O~sbk6#GnF65kH4uT+RE5%QF88O>$m^InZZQjKJ~7b!dI!G3%gghe2uq<6
z6&ccR`}_;()qde&9hUWi&3uiT+W$gO9*&msX~knLa-g8?I8b+#MSlFZ0U*y9QscD%
z2auj^9FW!3m#(&Dj;rLZ={C1Ordw0RNM$?ZdUNCH-UG9OJeKjAp`yeVjXB9_Hb6Jz
zHqY6dD*8#j(O+=Izb`#V3San{#IAjx<tS1_y3wm<f3UL@FaFXA|Kt#<yU-ia7!<4>
zGa5MH#1+k~+)j;tY8~?hc}Wq_@B6xUgv3BnxJaNM{sg14o9u=q!EKh^-x~ju+aIU1
zl?b>hrj`>u#?{!8)a8f?-l3ccYNjx7H((ATB-g!tvbm&KSz~0lDf^(@;7z1T2XJy;
z08?63$tLTW#!vd!AENP_;@Ry^bjpC1-kXpYn!Wvg6n;|$&B#eMZ`!Qn4GCX3HW5@Y
zWcrF=2lGri`9D7NJ{m)0^`Qh$Z<3#01-Jzaj%Fy?GRm0hY5CM<3Bgz-NJ5BMvY%~F
zCCiI}k6^f|e0s7^70Q7mNbS+jc!5ohc@Ca3?gP&WhCXIt5JSXQ7+CGqV@C+$B8Ncv
zPYCUy8p8(rR*?DU=9Kp~7AYld0U@9C8_tYU-0Ye3OFq09djICT->wE&FYk@`73<Q`
z3fpK^w6#yAuVL=8a03wYON@0k#&>UZx^KVfKHp|nynI8-Sf)Rcu%p>hCRceJ$FW85
z<U#XmmLK)@bT(`=Hr{x3w_3M-du8PH6+G62spPB0zsKQ@!?l*gtE`eX<94$L5=7v>
zZQyDt)I&pJoD5DbC217SR0OKfWW?+K`6n@d(GX~{-}d&<hlj5=KLf2YFKKW`1K7$4
z0gI2gI-IpYY|m@Q7W-;<%j$-P2Hxg9CMG8J_4V~&>ShYI+E;KQ3ydfbni%^f$eR_|
z_M`=C14a{qTPsgSIX)cow%Ctb%1WWMu+S+g=8P2^Q46|q0d6nJ$$%NOvcJ_;dCi6j
zXvHsm!T<f1Hv^S=_U;f{(go<FbY`!iM2fC0bc@m%Mi2<iW;lGp#9Jzv)_sJnI@ANz
z17VY>G+pe*ZIZ3IxszJb89VWm!;>AP+XtA@y~M*qVsxF}iiLAe;QG|l;<m4eqQvzr
zriKq?f6YxRS1<j=g_*t|kiLfx4ADZX`)AbZI+b;78mOy2Y`ZqL8r_hCT*0|3tt#+)
z%rv+?SWb@uVqCq*R6JwUzzF+rD=+39>^&B~V-8u|w6_oWoOQ`JF5;3~<1)>Awd5|6
zBfeobIIp6@*QdyIA373FJVX-*g67s|2#*$X<8VzYCc*ljuq0D+jLPCWG265m^jFk_
z4Y4DZI{z}3Q!VO`@E+Z1ImE?>S7xeKt?vOV!33$mY^2~bYyJp?G=)t0=B_%$<1@`z
z_~r_0c!-O1THVMa!IAOuXnUp-;$QdmMAXXPbR=_D`VIM}7``$lqDr<Cq52;fD&3-L
zv|7`>P-59lT^%)yJzw+%4*;)=A3K~Rsn!2^i!N9NNEV@%guAwOsa*_BsoI)OdM$|w
zK~fTh8iZk!*|FzzlpeMW!NzL7d^MoB@F0M;>Los$pHqZqi)s_=!I}U{2e*h<5j}s-
zaH4m6A}j{|TZ~2?60ZtHX0%~({Alat)rXc@-!~pDR^^fsC$9VsI?brmdn>|@jZ5BM
zYmJ#Yr2WkuMH%X2&2tKX@<CZZ>1Ze7>F$QGjoOSu&r-u)$d&>SMqFBH;p*>^??(H_
z6GN7iD&>2tR;GVAjvb4h9LC@^#oM6~MQgL3WdyM}ov&u^vB__|Jp7fYrOw_WjuaGh
zGlcw<+K=@JN^cSW_+3=<a!xqERLJCri2zw&Wu75dCV=dU?R?A-eC4Nc36B{0td9ss
z>9rJknet{o{>y3VCtI{@1HqP1yuh~bc!v;#3VzdXe~7*786`@6uCl84GZp%$ne$^U
z6>m`b0Uo+QtG)x9*P6()>CmuYPNp{{6C1LMFH=(4IEk;o;e+zktYNer5q{2gS5_vm
ztxq^ZT-=f_0N8Pw#Z5~-2WtKqJ4KQE^7~dJ$43Vw$JCyf0k>Pk)JwPztw5g2X|rYC
zBnUD?Y5Xrj1FY<&)8viT;{U{Rsg(`I20h=otleUy{|31r3bgU;Bg<Jb=VWSbf;t-V
zS|}H=5ACl%^?N$T(o>ub;vqAe&g}7b;Tp0suW+3LbbhyGfDCT>UJo2gy>8+6U+s6V
zP^<HK=kkOYkXh>n(7|NJt<Y9``AkC>kQPv{caT4plq=e)!V*42^COr62v4-J!0)Ut
z<>Km``naM+npX+YP7337^VnLO^;?X?Zw<hjoVJuaAxbQ#qs$%;BO4wu5X!FQ#gEGI
z^8mp?jTr@YN<?@hC|F)kpY<1*($)D;GP{!m;ETb`42`Ho8*j4jVd;-iMKj(IlszRH
zCwL0;Ms~4Cr&*t$Uk&r-;=n``oJ`i&Kv2LG*Wi2MG_kUS=?ila3hZr|1mRQ-aTGE6
z!64(VyXaZMLCM602QN$FVxLY6B$)G^3<@_weZPHye2mfYnVlP(!ER*bu=b&K=A-xB
z(wdsx%EiS+EO+S;aEzf;)f^6>MtRDHAs8rAXY98y4q^Sr9j#`^?AWZ)g30J!;4`3j
zZd&d4ob@Cqh5~xK%ArlJ(y^#Ky~t1hI*q&%<^I4J{-@aag4`4f95N`n{lk~n>4W#l
zTAQKSZNhygz1DZ>&=4_Ai4%bms0pdal~w=+=r>v3V#FTnW0xuzrUCj7(cl=NN0eT<
zG4+ygMi`pCnG;HbiN<^>J;r$#{fFxrRITTped243$$InR<?E`(v(4Y)a5L{-1S(<r
zXU@Y9U@~SQO3dW!y%^hXsUz@|3OU)vlT-o~@V4MtNa56shXrM2{WkfZ3=w@N#m_0Z
zj~fqI@w4P!cl+}k`L+vf1?n_DwIp4o%<Q}>J{~fz_wTj!vTUB85#M&oM83T&+3;PK
zKlA0wzUrX6Os}!SO~eEMlv|JuH7<~i&054oi@a(=#+SnesG5vL(PnNz%WrPx7t~Z&
zKX~`Utnc_TL&%sBJhn&J!QNkhwr+OTe?r_tOZ5$<l6OhFIY%Qm+!IeDb$ow8)hY~%
zqnR>GBIH|)bk<y4rx2@O1i9z`+mmOmEg1EX!vkIH5GC{yR{yfs(dg~e@-Rt!oOJCX
zCGHVh#t(ivwg6+XZ4EU{(*!9qCW`_m4duhoS_tV0S!ej2;6wr)<ZJXw9d@zEr|H$_
zl+3=2hmBJ3w8U@KA9k)n!D4XKlWfr}3{|)g>%hb$ZF3v6L;L=8Gp*+9BY*WH{JODI
znXzbAY1JWf=ncpX>N!(X5_6*N!LxVaSrQ{)L7Qj@NIkvofZxA=v%qAoNJ9h^q;<by
zq6S30m7(uw1uAJ!^F!g<7f5qpCeOo%Actb)N|w9QL3d+g<59`fmGv6R2qCyS&HKyX
zf+yV?fmd_=_C_9f78P($)3V?*F=hI|Ln-q|$of?6BCXq`eZ)lEmjj8TVD?ZoHd&o+
z9(tiC8YNC;@WoZ=3UxE*y&HrkF}U(m0?D1`J=EL;S(LpHpWoW!)pEYP_Q{(G@tyjJ
z9s-vwo{Ukg?j_rrx<$N|qvr8nP!c*-H^jCZKmoALr}oNqw;yj`?5DDkuD$X~9SyuH
zoLsBn*3dK>_+z~MuKmZ&uM%~Sw9h2lEX97I^ziWLe9?X1SHAX4=vc+X+B~wzlm!>H
zzrP=}*pp#$rf-z4J|@d#uU!UM*0DLwrYCR#xMFt0dA-!XmRDB3XLa365KZeI1~c|t
zSy{1j_wWb`id-rL=`%JkKxil}Eu9g=Hl_mmeWtIvyxhAi=^gLbmqIJTK?EGm4-p)&
zNST_Diw20E2<slLYr~rXMNK7w@I+B8-&<2+!L~eYa|I9yq_d&dPxJD|2L%Nce2xJ3
zM#@j$1Miu?)SJ1h&d4L(v%Ry^_<d+d?rlTEA9IMgj99Le)_r!XgV$5xgwte5=JHpM
zLVIwuw;vCd&C-4I+9`lNrfKGfU7^S2>lW#qK7Bg%={(6aXI6F$eT`<o#NJ-LwzPEp
zLfgd4Iv7j!dV(i++waS7kBq8t=2mjuP>->0P{)-dJw&O3$62;Zm2jd2jC2iQB@yDu
z0~TIJ%T2ZJi0>+V^CUDZ{M}JJP~J|g3gH&S6v`4Cvs{x&+xkx4L!e~)ED)a@DaeJ=
zQt4qDanp76N)u}~SqxoIX40M^5UnH2v!6z(TvbtEr%XUWcnj)?{jvylHf8jC<y}1g
z`r0X8D5US6oK|1<<=u&EuL#$nf|C6yuj-VY^}126q@q!oGp7q|2~X2AA9ZKI?@TX0
zjd}U?&>KRTKOpUVLay|n)janJi$}D#h+32~@Fstd7S<pwZd7`5B)Rz$oj;EDh{4m$
z#2L4QWVWJyZ`ay9=#Q8F^admtsk+HbA*&=tKM!~L%6S`cFA6wvc*6Q0Y5fCz6_pip
z<vhILth^<nXZPNuJzQ>l;xbJ$4TR@N;?bO+T<k)_@8oorn@pyrrgjNhDtkG=4AQMy
z>_7Rr1eIH?$?`9W^RJ#jnsi|#;fwKRzS~a&GTx$5?6F_kbc-+<sfL<<M_kRFuotlO
z3m%E=Z1PJxW1)==r%Y&Zf`Dr`?vy)QsYIJiTZ|^21*ML&2S?;2?C+gt<d#ey9~*OG
zPqqI}<0o*@fJjAg1yzvO)H@Yh^K<)zAg(Q2)i)S1&kIQ_^4O*qZ-9EnfkF4f$m+II
zUNy}+E~EspZC1{n!KFmr+&-vkxds2XSwJW%BF24ULSwke)5GJpvF`GrH(YL1C@ZG^
zX31}_;Ef|4fmo`ymrz!2RgX7*ZnUZT-i@hHe%sg>Je9zsyY|IhW-_UiSNRZJb7)2$
z9-B&SphVAwEmV?GpH&&$PW}J!<iyBJKkzRB(&YaI_`jXO5p8m5f<^ka#Aom(q@!tw
JD81$o{$C&K!8QN@

literal 0
HcmV?d00001

diff --git a/packages/f2/test/components/line/line.test.tsx b/packages/f2/test/components/line/line.test.tsx
index 7bd289ed1..2009f189c 100644
--- a/packages/f2/test/components/line/line.test.tsx
+++ b/packages/f2/test/components/line/line.test.tsx
@@ -1,4 +1,3 @@
-import { Rect } from '../../../src/coord';
 import { jsx, Component, Canvas, Chart, Line, Point, Axis, Legend } from '../../../src';
 import { createContext, delay } from '../../util';
 const data1 = [
@@ -384,44 +383,6 @@ describe('折线图', () => {
     });
 
     it('曲线', async () => {
-      const data = [
-        {
-          time: '2016-08-08 00:00:00',
-          tem: 10,
-        },
-        {
-          time: '2016-08-08 00:10:00',
-          tem: 22,
-        },
-        {
-          time: '2016-08-08 00:30:00',
-          tem: 20,
-        },
-        {
-          time: '2016-08-09 00:35:00',
-          tem: 26,
-        },
-        {
-          time: '2016-08-09 01:00:00',
-          tem: 20,
-        },
-        {
-          time: '2016-08-09 01:20:00',
-          tem: 26,
-        },
-        {
-          time: '2016-08-10 01:40:00',
-          tem: 28,
-        },
-        {
-          time: '2016-08-10 02:00:00',
-          tem: 20,
-        },
-        {
-          time: '2016-08-10 02:20:00',
-          tem: 18,
-        },
-      ];
       const context = createContext('曲线');
       const chartRef = { current: null };
       const lineRef = { current: null };
@@ -461,6 +422,79 @@ describe('折线图', () => {
       await delay(1000);
       expect(context).toMatchImageSnapshot();
     });
+
+    it('阶梯图', async () => {
+      const context = createContext('阶梯图', {
+        width: '380px',
+      });
+      const data = [];
+      [
+        {
+          time: '2016-08-01',
+          tem: 15,
+          type: 'start',
+        },
+        {
+          time: '2016-08-02',
+          tem: 22,
+          type: 'start',
+        },
+        {
+          time: '2016-08-03',
+          tem: 15,
+          type: 'start',
+        },
+        {
+          time: '2016-08-04',
+          tem: 26,
+          type: 'start',
+        },
+        {
+          time: '2016-08-05',
+          tem: 20,
+          type: 'start',
+        },
+        {
+          time: '2016-08-06',
+          tem: 26,
+          type: 'start',
+        },
+      ].map((d) => {
+        data.push(d);
+        data.push({ ...d, tem: d.tem + 15, type: 'middle' });
+        data.push({ ...d, tem: d.tem + 30, type: 'end' });
+      });
+
+      const { type, props } = (
+        <Canvas context={context}>
+          <Chart data={data}>
+            <Axis
+              field="time"
+              tickCount={2}
+              style={{
+                label: {
+                  align: 'between',
+                },
+              }}
+            />
+            <Axis field="tem" tickCount={5} max={60} />
+            <Line
+              x="time"
+              y="tem"
+              color="type"
+              shape={{
+                field: 'type',
+                range: ['step-start', 'step-middle', 'step-end'],
+              }}
+            />
+          </Chart>
+        </Canvas>
+      );
+      const canvas = new Canvas(props);
+      await canvas.render();
+      await delay(500);
+      expect(context).toMatchImageSnapshot();
+    });
   });
 
   describe('对比折线图', () => {