u-charts.js 289 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284628562866287628862896290629162926293629462956296629762986299630063016302630363046305630663076308630963106311631263136314631563166317631863196320632163226323632463256326632763286329633063316332633363346335633663376338633963406341634263436344634563466347634863496350635163526353635463556356635763586359636063616362636363646365636663676368636963706371637263736374637563766377637863796380638163826383638463856386638763886389639063916392639363946395639663976398639964006401640264036404640564066407640864096410641164126413641464156416641764186419642064216422642364246425642664276428642964306431643264336434643564366437643864396440644164426443644464456446644764486449645064516452645364546455645664576458645964606461646264636464646564666467646864696470647164726473647464756476647764786479648064816482648364846485648664876488648964906491649264936494649564966497649864996500650165026503650465056506650765086509651065116512651365146515651665176518651965206521652265236524652565266527652865296530653165326533653465356536653765386539654065416542654365446545654665476548654965506551655265536554655565566557655865596560656165626563656465656566656765686569657065716572657365746575657665776578657965806581658265836584658565866587658865896590659165926593659465956596659765986599660066016602660366046605660666076608660966106611661266136614661566166617661866196620662166226623662466256626662766286629663066316632663366346635663666376638663966406641664266436644664566466647664866496650665166526653665466556656665766586659666066616662666366646665666666676668666966706671667266736674667566766677667866796680668166826683668466856686668766886689669066916692669366946695669666976698669967006701670267036704670567066707670867096710671167126713671467156716671767186719672067216722672367246725672667276728672967306731673267336734673567366737673867396740674167426743674467456746674767486749675067516752675367546755675667576758675967606761676267636764676567666767676867696770677167726773677467756776677767786779678067816782678367846785678667876788678967906791679267936794679567966797679867996800680168026803680468056806680768086809681068116812681368146815681668176818681968206821682268236824682568266827682868296830683168326833683468356836683768386839684068416842684368446845684668476848684968506851685268536854685568566857685868596860686168626863686468656866686768686869687068716872687368746875687668776878687968806881688268836884688568866887688868896890689168926893689468956896689768986899690069016902690369046905690669076908690969106911691269136914691569166917691869196920692169226923692469256926692769286929693069316932693369346935693669376938693969406941694269436944694569466947694869496950695169526953695469556956695769586959696069616962696369646965696669676968696969706971697269736974697569766977697869796980698169826983698469856986698769886989699069916992699369946995699669976998699970007001700270037004700570067007700870097010701170127013701470157016701770187019702070217022702370247025702670277028702970307031703270337034703570367037703870397040704170427043704470457046704770487049705070517052705370547055705670577058705970607061706270637064706570667067706870697070707170727073707470757076707770787079708070817082708370847085708670877088708970907091709270937094709570967097709870997100710171027103710471057106710771087109711071117112711371147115711671177118711971207121712271237124712571267127712871297130713171327133713471357136713771387139714071417142714371447145714671477148714971507151715271537154715571567157715871597160716171627163716471657166716771687169717071717172717371747175717671777178717971807181718271837184718571867187718871897190719171927193719471957196719771987199720072017202720372047205720672077208720972107211721272137214721572167217721872197220722172227223722472257226722772287229723072317232723372347235723672377238723972407241724272437244724572467247724872497250725172527253725472557256725772587259726072617262726372647265726672677268726972707271727272737274727572767277727872797280728172827283728472857286728772887289729072917292729372947295729672977298729973007301730273037304730573067307730873097310731173127313731473157316731773187319732073217322732373247325732673277328732973307331733273337334733573367337733873397340734173427343734473457346734773487349735073517352735373547355735673577358735973607361736273637364736573667367736873697370737173727373737473757376737773787379738073817382738373847385738673877388738973907391739273937394739573967397739873997400740174027403740474057406740774087409741074117412741374147415741674177418741974207421742274237424742574267427742874297430743174327433743474357436743774387439744074417442744374447445744674477448744974507451745274537454745574567457745874597460746174627463746474657466746774687469747074717472747374747475747674777478747974807481748274837484748574867487748874897490749174927493749474957496749774987499750075017502750375047505750675077508750975107511751275137514751575167517751875197520752175227523752475257526752775287529753075317532753375347535753675377538753975407541754275437544754575467547754875497550755175527553755475557556755775587559756075617562756375647565756675677568756975707571757275737574757575767577757875797580758175827583758475857586758775887589759075917592759375947595759675977598759976007601760276037604760576067607760876097610761176127613761476157616761776187619762076217622762376247625762676277628762976307631763276337634763576367637763876397640764176427643764476457646764776487649765076517652765376547655765676577658765976607661766276637664766576667667766876697670767176727673767476757676767776787679768076817682768376847685768676877688768976907691769276937694769576967697769876997700770177027703770477057706
  1. /*
  2. * uCharts (R)
  3. * 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360/快手)、Vue、Taro等支持canvas的框架平台
  4. * Copyright (C) 2018-2022 QIUN (R) 秋云 https://www.ucharts.cn All rights reserved.
  5. * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
  6. * 复制使用请保留本段注释,感谢支持开源!
  7. *
  8. * uCharts (R) 官方网站
  9. * https://www.uCharts.cn
  10. *
  11. * 开源地址:
  12. * https://gitee.com/uCharts/uCharts
  13. *
  14. * uni-app插件市场地址:
  15. * http://ext.dcloud.net.cn/plugin?id=271
  16. *
  17. */
  18. 'use strict';
  19. var config = {
  20. version: 'v2.5.0-20230101',
  21. yAxisWidth: 15,
  22. xAxisHeight: 22,
  23. padding: [10, 10, 10, 10],
  24. rotate: false,
  25. fontSize: 13,
  26. fontColor: '#666666',
  27. dataPointShape: ['circle', 'circle', 'circle', 'circle'],
  28. color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  29. linearColor: ['#0EE2F8', '#2BDCA8', '#FA7D8D', '#EB88E2', '#2AE3A0', '#0EE2F8', '#EB88E2', '#6773E3', '#F78A85'],
  30. pieChartLinePadding: 15,
  31. pieChartTextPadding: 5,
  32. titleFontSize: 20,
  33. subtitleFontSize: 15,
  34. radarLabelTextMargin: 13,
  35. };
  36. var assign = function(target, ...varArgs) {
  37. if (target == null) {
  38. throw new TypeError('[uCharts] Cannot convert undefined or null to object');
  39. }
  40. if (!varArgs || varArgs.length <= 0) {
  41. return target;
  42. }
  43. // 深度合并对象
  44. function deepAssign(obj1, obj2) {
  45. for (let key in obj2) {
  46. obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" ?
  47. deepAssign(obj1[key], obj2[key]) : obj1[key] = obj2[key];
  48. }
  49. return obj1;
  50. }
  51. varArgs.forEach(val => {
  52. target = deepAssign(target, val);
  53. });
  54. return target;
  55. };
  56. var util = {
  57. toFixed: function toFixed(num, limit) {
  58. limit = limit || 2;
  59. if (this.isFloat(num)) {
  60. num = num.toFixed(limit);
  61. }
  62. return num;
  63. },
  64. isFloat: function isFloat(num) {
  65. return num % 1 !== 0;
  66. },
  67. approximatelyEqual: function approximatelyEqual(num1, num2) {
  68. return Math.abs(num1 - num2) < 1e-10;
  69. },
  70. isSameSign: function isSameSign(num1, num2) {
  71. return Math.abs(num1) === num1 && Math.abs(num2) === num2 || Math.abs(num1) !== num1 && Math.abs(num2) !== num2;
  72. },
  73. isSameXCoordinateArea: function isSameXCoordinateArea(p1, p2) {
  74. return this.isSameSign(p1.x, p2.x);
  75. },
  76. isCollision: function isCollision(obj1, obj2) {
  77. obj1.end = {};
  78. obj1.end.x = obj1.start.x + obj1.width;
  79. obj1.end.y = obj1.start.y - obj1.height;
  80. obj2.end = {};
  81. obj2.end.x = obj2.start.x + obj2.width;
  82. obj2.end.y = obj2.start.y - obj2.height;
  83. var flag = obj2.start.x > obj1.end.x || obj2.end.x < obj1.start.x || obj2.end.y > obj1.start.y || obj2.start.y < obj1.end.y;
  84. return !flag;
  85. }
  86. };
  87. //兼容H5点击事件
  88. function getH5Offset(e) {
  89. e.mp = {
  90. changedTouches: []
  91. };
  92. e.mp.changedTouches.push({
  93. x: e.offsetX,
  94. y: e.offsetY
  95. });
  96. return e;
  97. }
  98. // hex 转 rgba
  99. function hexToRgb(hexValue, opc) {
  100. var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  101. var hex = hexValue.replace(rgx, function(m, r, g, b) {
  102. return r + r + g + g + b + b;
  103. });
  104. var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  105. var r = parseInt(rgb[1], 16);
  106. var g = parseInt(rgb[2], 16);
  107. var b = parseInt(rgb[3], 16);
  108. return 'rgba(' + r + ',' + g + ',' + b + ',' + opc + ')';
  109. }
  110. function findRange(num, type, limit) {
  111. if (isNaN(num)) {
  112. throw new Error('[uCharts] series数据需为Number格式');
  113. }
  114. limit = limit || 10;
  115. type = type ? type : 'upper';
  116. var multiple = 1;
  117. while (limit < 1) {
  118. limit *= 10;
  119. multiple *= 10;
  120. }
  121. if (type === 'upper') {
  122. num = Math.ceil(num * multiple);
  123. } else {
  124. num = Math.floor(num * multiple);
  125. }
  126. while (num % limit !== 0) {
  127. if (type === 'upper') {
  128. if (num == num + 1) { //修复数据值过大num++无效的bug by 向日葵 @xrk_jy
  129. break;
  130. }
  131. num++;
  132. } else {
  133. num--;
  134. }
  135. }
  136. return num / multiple;
  137. }
  138. function calCandleMA(dayArr, nameArr, colorArr, kdata) {
  139. let seriesTemp = [];
  140. for (let k = 0; k < dayArr.length; k++) {
  141. let seriesItem = {
  142. data: [],
  143. name: nameArr[k],
  144. color: colorArr[k]
  145. };
  146. for (let i = 0, len = kdata.length; i < len; i++) {
  147. if (i < dayArr[k]) {
  148. seriesItem.data.push(null);
  149. continue;
  150. }
  151. let sum = 0;
  152. for (let j = 0; j < dayArr[k]; j++) {
  153. sum += kdata[i - j][1];
  154. }
  155. seriesItem.data.push(+(sum / dayArr[k]).toFixed(3));
  156. }
  157. seriesTemp.push(seriesItem);
  158. }
  159. return seriesTemp;
  160. }
  161. function calValidDistance(self, distance, chartData, config, opts) {
  162. var dataChartAreaWidth = opts.width - opts.area[1] - opts.area[3];
  163. var dataChartWidth = chartData.eachSpacing * (opts.chartData.xAxisData.xAxisPoints.length - 1);
  164. if(opts.type == 'mount' && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1){
  165. if(opts.extra.mount.widthRatio>2) opts.extra.mount.widthRatio = 2
  166. dataChartWidth += (opts.extra.mount.widthRatio - 1)*chartData.eachSpacing;
  167. }
  168. var validDistance = distance;
  169. if (distance >= 0) {
  170. validDistance = 0;
  171. self.uevent.trigger('scrollLeft');
  172. self.scrollOption.position = 'left'
  173. opts.xAxis.scrollPosition = 'left';
  174. } else if (Math.abs(distance) >= dataChartWidth - dataChartAreaWidth) {
  175. validDistance = dataChartAreaWidth - dataChartWidth;
  176. self.uevent.trigger('scrollRight');
  177. self.scrollOption.position = 'right'
  178. opts.xAxis.scrollPosition = 'right';
  179. } else {
  180. self.scrollOption.position = distance
  181. opts.xAxis.scrollPosition = distance;
  182. }
  183. return validDistance;
  184. }
  185. function isInAngleRange(angle, startAngle, endAngle) {
  186. function adjust(angle) {
  187. while (angle < 0) {
  188. angle += 2 * Math.PI;
  189. }
  190. while (angle > 2 * Math.PI) {
  191. angle -= 2 * Math.PI;
  192. }
  193. return angle;
  194. }
  195. angle = adjust(angle);
  196. startAngle = adjust(startAngle);
  197. endAngle = adjust(endAngle);
  198. if (startAngle > endAngle) {
  199. endAngle += 2 * Math.PI;
  200. if (angle < startAngle) {
  201. angle += 2 * Math.PI;
  202. }
  203. }
  204. return angle >= startAngle && angle <= endAngle;
  205. }
  206. function createCurveControlPoints(points, i) {
  207. function isNotMiddlePoint(points, i) {
  208. if (points[i - 1] && points[i + 1]) {
  209. return points[i].y >= Math.max(points[i - 1].y, points[i + 1].y) || points[i].y <= Math.min(points[i - 1].y,
  210. points[i + 1].y);
  211. } else {
  212. return false;
  213. }
  214. }
  215. function isNotMiddlePointX(points, i) {
  216. if (points[i - 1] && points[i + 1]) {
  217. return points[i].x >= Math.max(points[i - 1].x, points[i + 1].x) || points[i].x <= Math.min(points[i - 1].x,
  218. points[i + 1].x);
  219. } else {
  220. return false;
  221. }
  222. }
  223. var a = 0.2;
  224. var b = 0.2;
  225. var pAx = null;
  226. var pAy = null;
  227. var pBx = null;
  228. var pBy = null;
  229. if (i < 1) {
  230. pAx = points[0].x + (points[1].x - points[0].x) * a;
  231. pAy = points[0].y + (points[1].y - points[0].y) * a;
  232. } else {
  233. pAx = points[i].x + (points[i + 1].x - points[i - 1].x) * a;
  234. pAy = points[i].y + (points[i + 1].y - points[i - 1].y) * a;
  235. }
  236. if (i > points.length - 3) {
  237. var last = points.length - 1;
  238. pBx = points[last].x - (points[last].x - points[last - 1].x) * b;
  239. pBy = points[last].y - (points[last].y - points[last - 1].y) * b;
  240. } else {
  241. pBx = points[i + 1].x - (points[i + 2].x - points[i].x) * b;
  242. pBy = points[i + 1].y - (points[i + 2].y - points[i].y) * b;
  243. }
  244. if (isNotMiddlePoint(points, i + 1)) {
  245. pBy = points[i + 1].y;
  246. }
  247. if (isNotMiddlePoint(points, i)) {
  248. pAy = points[i].y;
  249. }
  250. if (isNotMiddlePointX(points, i + 1)) {
  251. pBx = points[i + 1].x;
  252. }
  253. if (isNotMiddlePointX(points, i)) {
  254. pAx = points[i].x;
  255. }
  256. if (pAy >= Math.max(points[i].y, points[i + 1].y) || pAy <= Math.min(points[i].y, points[i + 1].y)) {
  257. pAy = points[i].y;
  258. }
  259. if (pBy >= Math.max(points[i].y, points[i + 1].y) || pBy <= Math.min(points[i].y, points[i + 1].y)) {
  260. pBy = points[i + 1].y;
  261. }
  262. if (pAx >= Math.max(points[i].x, points[i + 1].x) || pAx <= Math.min(points[i].x, points[i + 1].x)) {
  263. pAx = points[i].x;
  264. }
  265. if (pBx >= Math.max(points[i].x, points[i + 1].x) || pBx <= Math.min(points[i].x, points[i + 1].x)) {
  266. pBx = points[i + 1].x;
  267. }
  268. return {
  269. ctrA: {
  270. x: pAx,
  271. y: pAy
  272. },
  273. ctrB: {
  274. x: pBx,
  275. y: pBy
  276. }
  277. };
  278. }
  279. function convertCoordinateOrigin(x, y, center) {
  280. return {
  281. x: center.x + x,
  282. y: center.y - y
  283. };
  284. }
  285. function avoidCollision(obj, target) {
  286. if (target) {
  287. // is collision test
  288. while (util.isCollision(obj, target)) {
  289. if (obj.start.x > 0) {
  290. obj.start.y--;
  291. } else if (obj.start.x < 0) {
  292. obj.start.y++;
  293. } else {
  294. if (obj.start.y > 0) {
  295. obj.start.y++;
  296. } else {
  297. obj.start.y--;
  298. }
  299. }
  300. }
  301. }
  302. return obj;
  303. }
  304. function fixPieSeries(series, opts, config){
  305. let pieSeriesArr = [];
  306. if(series.length>0 && series[0].data.constructor.toString().indexOf('Array') > -1){
  307. opts._pieSeries_ = series;
  308. let oldseries = series[0].data;
  309. for (var i = 0; i < oldseries.length; i++) {
  310. oldseries[i].formatter = series[0].formatter;
  311. oldseries[i].data = oldseries[i].value;
  312. pieSeriesArr.push(oldseries[i]);
  313. }
  314. opts.series = pieSeriesArr;
  315. }else{
  316. pieSeriesArr = series;
  317. }
  318. return pieSeriesArr;
  319. }
  320. function fillSeries(series, opts, config) {
  321. var index = 0;
  322. for (var i = 0; i < series.length; i++) {
  323. let item = series[i];
  324. if (!item.color) {
  325. item.color = config.color[index];
  326. index = (index + 1) % config.color.length;
  327. }
  328. if (!item.linearIndex) {
  329. item.linearIndex = i;
  330. }
  331. if (!item.index) {
  332. item.index = 0;
  333. }
  334. if (!item.type) {
  335. item.type = opts.type;
  336. }
  337. if (typeof item.show == "undefined") {
  338. item.show = true;
  339. }
  340. if (!item.type) {
  341. item.type = opts.type;
  342. }
  343. if (!item.pointShape) {
  344. item.pointShape = "circle";
  345. }
  346. if (!item.legendShape) {
  347. switch (item.type) {
  348. case 'line':
  349. item.legendShape = "line";
  350. break;
  351. case 'column':
  352. case 'bar':
  353. item.legendShape = "rect";
  354. break;
  355. case 'area':
  356. case 'mount':
  357. item.legendShape = "triangle";
  358. break;
  359. default:
  360. item.legendShape = "circle";
  361. }
  362. }
  363. }
  364. return series;
  365. }
  366. function fillCustomColor(linearType, customColor, series, config) {
  367. var newcolor = customColor || [];
  368. if (linearType == 'custom' && newcolor.length == 0 ) {
  369. newcolor = config.linearColor;
  370. }
  371. if (linearType == 'custom' && newcolor.length < series.length) {
  372. let chazhi = series.length - newcolor.length;
  373. for (var i = 0; i < chazhi; i++) {
  374. newcolor.push(config.linearColor[(i + 1) % config.linearColor.length]);
  375. }
  376. }
  377. return newcolor;
  378. }
  379. function getDataRange(minData, maxData) {
  380. var limit = 0;
  381. var range = maxData - minData;
  382. if (range >= 10000) {
  383. limit = 1000;
  384. } else if (range >= 1000) {
  385. limit = 100;
  386. } else if (range >= 100) {
  387. limit = 10;
  388. } else if (range >= 10) {
  389. limit = 5;
  390. } else if (range >= 1) {
  391. limit = 1;
  392. } else if (range >= 0.1) {
  393. limit = 0.1;
  394. } else if (range >= 0.01) {
  395. limit = 0.01;
  396. } else if (range >= 0.001) {
  397. limit = 0.001;
  398. } else if (range >= 0.0001) {
  399. limit = 0.0001;
  400. } else if (range >= 0.00001) {
  401. limit = 0.00001;
  402. } else {
  403. limit = 0.000001;
  404. }
  405. return {
  406. minRange: findRange(minData, 'lower', limit),
  407. maxRange: findRange(maxData, 'upper', limit)
  408. };
  409. }
  410. function measureText(text, fontSize, context) {
  411. var width = 0;
  412. text = String(text);
  413. // #ifdef MP-ALIPAY || MP-BAIDU || APP-NVUE
  414. context = false;
  415. // #endif
  416. if (context !== false && context !== undefined && context.setFontSize && context.measureText) {
  417. context.setFontSize(fontSize);
  418. return context.measureText(text).width;
  419. } else {
  420. var text = text.split('');
  421. for (let i = 0; i < text.length; i++) {
  422. let item = text[i];
  423. if (/[a-zA-Z]/.test(item)) {
  424. width += 7;
  425. } else if (/[0-9]/.test(item)) {
  426. width += 5.5;
  427. } else if (/\./.test(item)) {
  428. width += 2.7;
  429. } else if (/-/.test(item)) {
  430. width += 3.25;
  431. } else if (/:/.test(item)) {
  432. width += 2.5;
  433. } else if (/[\u4e00-\u9fa5]/.test(item)) {
  434. width += 10;
  435. } else if (/\(|\)/.test(item)) {
  436. width += 3.73;
  437. } else if (/\s/.test(item)) {
  438. width += 2.5;
  439. } else if (/%/.test(item)) {
  440. width += 8;
  441. } else {
  442. width += 10;
  443. }
  444. }
  445. return width * fontSize / 10;
  446. }
  447. }
  448. function dataCombine(series) {
  449. return series.reduce(function(a, b) {
  450. return (a.data ? a.data : a).concat(b.data);
  451. }, []);
  452. }
  453. function dataCombineStack(series, len) {
  454. var sum = new Array(len);
  455. for (var j = 0; j < sum.length; j++) {
  456. sum[j] = 0;
  457. }
  458. for (var i = 0; i < series.length; i++) {
  459. for (var j = 0; j < sum.length; j++) {
  460. sum[j] += series[i].data[j];
  461. }
  462. }
  463. return series.reduce(function(a, b) {
  464. return (a.data ? a.data : a).concat(b.data).concat(sum);
  465. }, []);
  466. }
  467. function getTouches(touches, opts, e) {
  468. let x, y;
  469. if (touches.clientX) {
  470. if (opts.rotate) {
  471. y = opts.height - touches.clientX * opts.pix;
  472. x = (touches.pageY - e.currentTarget.offsetTop - (opts.height / opts.pix / 2) * (opts.pix - 1)) * opts.pix;
  473. } else {
  474. x = touches.clientX * opts.pix;
  475. y = (touches.pageY - e.currentTarget.offsetTop - (opts.height / opts.pix / 2) * (opts.pix - 1)) * opts.pix;
  476. }
  477. } else {
  478. if (opts.rotate) {
  479. y = opts.height - touches.x * opts.pix;
  480. x = touches.y * opts.pix;
  481. } else {
  482. x = touches.x * opts.pix;
  483. y = touches.y * opts.pix;
  484. }
  485. }
  486. return {
  487. x: x,
  488. y: y
  489. }
  490. }
  491. function getSeriesDataItem(series, index, group) {
  492. var data = [];
  493. var newSeries = [];
  494. var indexIsArr = index.constructor.toString().indexOf('Array') > -1;
  495. if(indexIsArr){
  496. let tempSeries = filterSeries(series);
  497. for (var i = 0; i < group.length; i++) {
  498. newSeries.push(tempSeries[group[i]]);
  499. }
  500. }else{
  501. newSeries = series;
  502. };
  503. for (let i = 0; i < newSeries.length; i++) {
  504. let item = newSeries[i];
  505. let tmpindex = -1;
  506. if(indexIsArr){
  507. tmpindex = index[i];
  508. }else{
  509. tmpindex = index;
  510. }
  511. if (item.data[tmpindex] !== null && typeof item.data[tmpindex] !== 'undefined' && item.show) {
  512. let seriesItem = {};
  513. seriesItem.color = item.color;
  514. seriesItem.type = item.type;
  515. seriesItem.style = item.style;
  516. seriesItem.pointShape = item.pointShape;
  517. seriesItem.disableLegend = item.disableLegend;
  518. seriesItem.legendShape = item.legendShape;
  519. seriesItem.name = item.name;
  520. seriesItem.show = item.show;
  521. seriesItem.data = item.formatter ? item.formatter(item.data[tmpindex]) : item.data[tmpindex];
  522. data.push(seriesItem);
  523. }
  524. }
  525. return data;
  526. }
  527. function getMaxTextListLength(list, fontSize, context) {
  528. var lengthList = list.map(function(item) {
  529. return measureText(item, fontSize, context);
  530. });
  531. return Math.max.apply(null, lengthList);
  532. }
  533. function getRadarCoordinateSeries(length) {
  534. var eachAngle = 2 * Math.PI / length;
  535. var CoordinateSeries = [];
  536. for (var i = 0; i < length; i++) {
  537. CoordinateSeries.push(eachAngle * i);
  538. }
  539. return CoordinateSeries.map(function(item) {
  540. return -1 * item + Math.PI / 2;
  541. });
  542. }
  543. function getToolTipData(seriesData, opts, index, group, categories) {
  544. var option = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
  545. var calPoints = opts.chartData.calPoints?opts.chartData.calPoints:[];
  546. let points = {};
  547. if(group.length > 0){
  548. let filterPoints = [];
  549. for (let i = 0; i < group.length; i++) {
  550. filterPoints.push(calPoints[group[i]])
  551. }
  552. points = filterPoints[0][index[0]];
  553. }else{
  554. for (let i = 0; i < calPoints.length; i++) {
  555. if(calPoints[i][index]){
  556. points = calPoints[i][index];
  557. break;
  558. }
  559. }
  560. };
  561. var textList = seriesData.map(function(item) {
  562. let titleText = null;
  563. if (opts.categories && opts.categories.length>0) {
  564. titleText = categories[index];
  565. };
  566. return {
  567. text: option.formatter ? option.formatter(item, titleText, index, opts) : item.name + ': ' + item.data,
  568. color: item.color,
  569. legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
  570. };
  571. });
  572. var offset = {
  573. x: Math.round(points.x),
  574. y: Math.round(points.y)
  575. };
  576. return {
  577. textList: textList,
  578. offset: offset
  579. };
  580. }
  581. function getMixToolTipData(seriesData, opts, index, categories) {
  582. var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
  583. var points = opts.chartData.xAxisPoints[index] + opts.chartData.eachSpacing / 2;
  584. var textList = seriesData.map(function(item) {
  585. return {
  586. text: option.formatter ? option.formatter(item, categories[index], index, opts) : item.name + ': ' + item.data,
  587. color: item.color,
  588. disableLegend: item.disableLegend ? true : false,
  589. legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
  590. };
  591. });
  592. textList = textList.filter(function(item) {
  593. if (item.disableLegend !== true) {
  594. return item;
  595. }
  596. });
  597. var offset = {
  598. x: Math.round(points),
  599. y: 0
  600. };
  601. return {
  602. textList: textList,
  603. offset: offset
  604. };
  605. }
  606. function getCandleToolTipData(series, seriesData, opts, index, categories, extra) {
  607. var option = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {};
  608. var calPoints = opts.chartData.calPoints;
  609. let upColor = extra.color.upFill;
  610. let downColor = extra.color.downFill;
  611. //颜色顺序为开盘,收盘,最低,最高
  612. let color = [upColor, upColor, downColor, upColor];
  613. var textList = [];
  614. seriesData.map(function(item) {
  615. if (index == 0) {
  616. if (item.data[1] - item.data[0] < 0) {
  617. color[1] = downColor;
  618. } else {
  619. color[1] = upColor;
  620. }
  621. } else {
  622. if (item.data[0] < series[index - 1][1]) {
  623. color[0] = downColor;
  624. }
  625. if (item.data[1] < item.data[0]) {
  626. color[1] = downColor;
  627. }
  628. if (item.data[2] > series[index - 1][1]) {
  629. color[2] = upColor;
  630. }
  631. if (item.data[3] < series[index - 1][1]) {
  632. color[3] = downColor;
  633. }
  634. }
  635. let text1 = {
  636. text: '开盘:' + item.data[0],
  637. color: color[0],
  638. legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
  639. };
  640. let text2 = {
  641. text: '收盘:' + item.data[1],
  642. color: color[1],
  643. legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
  644. };
  645. let text3 = {
  646. text: '最低:' + item.data[2],
  647. color: color[2],
  648. legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
  649. };
  650. let text4 = {
  651. text: '最高:' + item.data[3],
  652. color: color[3],
  653. legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
  654. };
  655. textList.push(text1, text2, text3, text4);
  656. });
  657. var validCalPoints = [];
  658. var offset = {
  659. x: 0,
  660. y: 0
  661. };
  662. for (let i = 0; i < calPoints.length; i++) {
  663. let points = calPoints[i];
  664. if (typeof points[index] !== 'undefined' && points[index] !== null) {
  665. validCalPoints.push(points[index]);
  666. }
  667. }
  668. offset.x = Math.round(validCalPoints[0][0].x);
  669. return {
  670. textList: textList,
  671. offset: offset
  672. };
  673. }
  674. function filterSeries(series) {
  675. let tempSeries = [];
  676. for (let i = 0; i < series.length; i++) {
  677. if (series[i].show == true) {
  678. tempSeries.push(series[i])
  679. }
  680. }
  681. return tempSeries;
  682. }
  683. function findCurrentIndex(currentPoints, calPoints, opts, config) {
  684. var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
  685. var current={ index:-1, group:[] };
  686. var spacing = opts.chartData.eachSpacing / 2;
  687. let xAxisPoints = [];
  688. if (calPoints && calPoints.length > 0) {
  689. if (!opts.categories) {
  690. spacing = 0;
  691. }else{
  692. for (let i = 1; i < opts.chartData.xAxisPoints.length; i++) {
  693. xAxisPoints.push(opts.chartData.xAxisPoints[i] - spacing);
  694. }
  695. if ((opts.type == 'line' || opts.type == 'area') && opts.xAxis.boundaryGap == 'justify') {
  696. xAxisPoints = opts.chartData.xAxisPoints;
  697. }
  698. }
  699. if (isInExactChartArea(currentPoints, opts, config)) {
  700. if (!opts.categories) {
  701. let timePoints = Array(calPoints.length);
  702. for (let i = 0; i < calPoints.length; i++) {
  703. timePoints[i] = Array(calPoints[i].length)
  704. for (let j = 0; j < calPoints[i].length; j++) {
  705. timePoints[i][j] = (Math.abs(calPoints[i][j].x - currentPoints.x));
  706. }
  707. };
  708. let pointValue = Array(timePoints.length);
  709. let pointIndex = Array(timePoints.length);
  710. for (let i = 0; i < timePoints.length; i++) {
  711. pointValue[i] = Math.min.apply(null, timePoints[i]);
  712. pointIndex[i] = timePoints[i].indexOf(pointValue[i]);
  713. }
  714. let minValue = Math.min.apply(null, pointValue);
  715. current.index = [];
  716. for (let i = 0; i < pointValue.length; i++) {
  717. if(pointValue[i] == minValue){
  718. current.group.push(i);
  719. current.index.push(pointIndex[i]);
  720. }
  721. };
  722. }else{
  723. xAxisPoints.forEach(function(item, index) {
  724. if (currentPoints.x + offset + spacing > item) {
  725. current.index = index;
  726. }
  727. });
  728. }
  729. }
  730. }
  731. return current;
  732. }
  733. function findBarChartCurrentIndex(currentPoints, calPoints, opts, config) {
  734. var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
  735. var current={ index:-1, group:[] };
  736. var spacing = opts.chartData.eachSpacing / 2;
  737. let yAxisPoints = opts.chartData.yAxisPoints;
  738. if (calPoints && calPoints.length > 0) {
  739. if (isInExactChartArea(currentPoints, opts, config)) {
  740. yAxisPoints.forEach(function(item, index) {
  741. if (currentPoints.y + offset + spacing > item) {
  742. current.index = index;
  743. }
  744. });
  745. }
  746. }
  747. return current;
  748. }
  749. function findLegendIndex(currentPoints, legendData, opts) {
  750. let currentIndex = -1;
  751. let gap = 0;
  752. if (isInExactLegendArea(currentPoints, legendData.area)) {
  753. let points = legendData.points;
  754. let index = -1;
  755. for (let i = 0, len = points.length; i < len; i++) {
  756. let item = points[i];
  757. for (let j = 0; j < item.length; j++) {
  758. index += 1;
  759. let area = item[j]['area'];
  760. if (area && currentPoints.x > area[0] - gap && currentPoints.x < area[2] + gap && currentPoints.y > area[1] - gap && currentPoints.y < area[3] + gap) {
  761. currentIndex = index;
  762. break;
  763. }
  764. }
  765. }
  766. return currentIndex;
  767. }
  768. return currentIndex;
  769. }
  770. function isInExactLegendArea(currentPoints, area) {
  771. return currentPoints.x > area.start.x && currentPoints.x < area.end.x && currentPoints.y > area.start.y && currentPoints.y < area.end.y;
  772. }
  773. function isInExactChartArea(currentPoints, opts, config) {
  774. return currentPoints.x <= opts.width - opts.area[1] + 10 && currentPoints.x >= opts.area[3] - 10 && currentPoints.y >= opts.area[0] && currentPoints.y <= opts.height - opts.area[2];
  775. }
  776. function findRadarChartCurrentIndex(currentPoints, radarData, count) {
  777. var eachAngleArea = 2 * Math.PI / count;
  778. var currentIndex = -1;
  779. if (isInExactPieChartArea(currentPoints, radarData.center, radarData.radius)) {
  780. var fixAngle = function fixAngle(angle) {
  781. if (angle < 0) {
  782. angle += 2 * Math.PI;
  783. }
  784. if (angle > 2 * Math.PI) {
  785. angle -= 2 * Math.PI;
  786. }
  787. return angle;
  788. };
  789. var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x);
  790. angle = -1 * angle;
  791. if (angle < 0) {
  792. angle += 2 * Math.PI;
  793. }
  794. var angleList = radarData.angleList.map(function(item) {
  795. item = fixAngle(-1 * item);
  796. return item;
  797. });
  798. angleList.forEach(function(item, index) {
  799. var rangeStart = fixAngle(item - eachAngleArea / 2);
  800. var rangeEnd = fixAngle(item + eachAngleArea / 2);
  801. if (rangeEnd < rangeStart) {
  802. rangeEnd += 2 * Math.PI;
  803. }
  804. if (angle >= rangeStart && angle <= rangeEnd || angle + 2 * Math.PI >= rangeStart && angle + 2 * Math.PI <= rangeEnd) {
  805. currentIndex = index;
  806. }
  807. });
  808. }
  809. return currentIndex;
  810. }
  811. function findFunnelChartCurrentIndex(currentPoints, funnelData) {
  812. var currentIndex = -1;
  813. for (var i = 0, len = funnelData.series.length; i < len; i++) {
  814. var item = funnelData.series[i];
  815. if (currentPoints.x > item.funnelArea[0] && currentPoints.x < item.funnelArea[2] && currentPoints.y > item.funnelArea[1] && currentPoints.y < item.funnelArea[3]) {
  816. currentIndex = i;
  817. break;
  818. }
  819. }
  820. return currentIndex;
  821. }
  822. function findWordChartCurrentIndex(currentPoints, wordData) {
  823. var currentIndex = -1;
  824. for (var i = 0, len = wordData.length; i < len; i++) {
  825. var item = wordData[i];
  826. if (currentPoints.x > item.area[0] && currentPoints.x < item.area[2] && currentPoints.y > item.area[1] && currentPoints.y < item.area[3]) {
  827. currentIndex = i;
  828. break;
  829. }
  830. }
  831. return currentIndex;
  832. }
  833. function findMapChartCurrentIndex(currentPoints, opts) {
  834. var currentIndex = -1;
  835. var cData = opts.chartData.mapData;
  836. var data = opts.series;
  837. var tmp = pointToCoordinate(currentPoints.y, currentPoints.x, cData.bounds, cData.scale, cData.xoffset, cData.yoffset);
  838. var poi = [tmp.x, tmp.y];
  839. for (var i = 0, len = data.length; i < len; i++) {
  840. var item = data[i].geometry.coordinates;
  841. if (isPoiWithinPoly(poi, item, opts.chartData.mapData.mercator)) {
  842. currentIndex = i;
  843. break;
  844. }
  845. }
  846. return currentIndex;
  847. }
  848. function findRoseChartCurrentIndex(currentPoints, pieData, opts) {
  849. var currentIndex = -1;
  850. var series = getRoseDataPoints(opts._series_, opts.extra.rose.type, pieData.radius, pieData.radius);
  851. if (pieData && pieData.center && isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) {
  852. var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x);
  853. angle = -angle;
  854. if(opts.extra.rose && opts.extra.rose.offsetAngle){
  855. angle = angle - opts.extra.rose.offsetAngle * Math.PI / 180;
  856. }
  857. for (var i = 0, len = series.length; i < len; i++) {
  858. if (isInAngleRange(angle, series[i]._start_, series[i]._start_ + series[i]._rose_proportion_ * 2 * Math.PI)) {
  859. currentIndex = i;
  860. break;
  861. }
  862. }
  863. }
  864. return currentIndex;
  865. }
  866. function findPieChartCurrentIndex(currentPoints, pieData, opts) {
  867. var currentIndex = -1;
  868. var series = getPieDataPoints(pieData.series);
  869. if (pieData && pieData.center && isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) {
  870. var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x);
  871. angle = -angle;
  872. if(opts.extra.pie && opts.extra.pie.offsetAngle){
  873. angle = angle - opts.extra.pie.offsetAngle * Math.PI / 180;
  874. }
  875. if(opts.extra.ring && opts.extra.ring.offsetAngle){
  876. angle = angle - opts.extra.ring.offsetAngle * Math.PI / 180;
  877. }
  878. for (var i = 0, len = series.length; i < len; i++) {
  879. if (isInAngleRange(angle, series[i]._start_, series[i]._start_ + series[i]._proportion_ * 2 * Math.PI)) {
  880. currentIndex = i;
  881. break;
  882. }
  883. }
  884. }
  885. return currentIndex;
  886. }
  887. function isInExactPieChartArea(currentPoints, center, radius) {
  888. return Math.pow(currentPoints.x - center.x, 2) + Math.pow(currentPoints.y - center.y, 2) <= Math.pow(radius, 2);
  889. }
  890. function splitPoints(points,eachSeries) {
  891. var newPoints = [];
  892. var items = [];
  893. points.forEach(function(item, index) {
  894. if(eachSeries.connectNulls){
  895. if (item !== null) {
  896. items.push(item);
  897. }
  898. }else{
  899. if (item !== null) {
  900. items.push(item);
  901. } else {
  902. if (items.length) {
  903. newPoints.push(items);
  904. }
  905. items = [];
  906. }
  907. }
  908. });
  909. if (items.length) {
  910. newPoints.push(items);
  911. }
  912. return newPoints;
  913. }
  914. function calLegendData(series, opts, config, chartData, context) {
  915. let legendData = {
  916. area: {
  917. start: {
  918. x: 0,
  919. y: 0
  920. },
  921. end: {
  922. x: 0,
  923. y: 0
  924. },
  925. width: 0,
  926. height: 0,
  927. wholeWidth: 0,
  928. wholeHeight: 0
  929. },
  930. points: [],
  931. widthArr: [],
  932. heightArr: []
  933. };
  934. if (opts.legend.show === false) {
  935. chartData.legendData = legendData;
  936. return legendData;
  937. }
  938. let padding = opts.legend.padding * opts.pix;
  939. let margin = opts.legend.margin * opts.pix;
  940. let fontSize = opts.legend.fontSize ? opts.legend.fontSize * opts.pix : config.fontSize;
  941. let shapeWidth = 15 * opts.pix;
  942. let shapeRight = 5 * opts.pix;
  943. let lineHeight = Math.max(opts.legend.lineHeight * opts.pix, fontSize);
  944. if (opts.legend.position == 'top' || opts.legend.position == 'bottom') {
  945. let legendList = [];
  946. let widthCount = 0;
  947. let widthCountArr = [];
  948. let currentRow = [];
  949. for (let i = 0; i < series.length; i++) {
  950. let item = series[i];
  951. const legendText = item.legendText ? item.legendText : item.name;
  952. let itemWidth = shapeWidth + shapeRight + measureText(legendText || 'undefined', fontSize, context) + opts.legend.itemGap * opts.pix;
  953. if (widthCount + itemWidth > opts.width - opts.area[1] - opts.area[3]) {
  954. legendList.push(currentRow);
  955. widthCountArr.push(widthCount - opts.legend.itemGap * opts.pix);
  956. widthCount = itemWidth;
  957. currentRow = [item];
  958. } else {
  959. widthCount += itemWidth;
  960. currentRow.push(item);
  961. }
  962. }
  963. if (currentRow.length) {
  964. legendList.push(currentRow);
  965. widthCountArr.push(widthCount - opts.legend.itemGap * opts.pix);
  966. legendData.widthArr = widthCountArr;
  967. let legendWidth = Math.max.apply(null, widthCountArr);
  968. switch (opts.legend.float) {
  969. case 'left':
  970. legendData.area.start.x = opts.area[3];
  971. legendData.area.end.x = opts.area[3] + legendWidth + 2 * padding;
  972. break;
  973. case 'right':
  974. legendData.area.start.x = opts.width - opts.area[1] - legendWidth - 2 * padding;
  975. legendData.area.end.x = opts.width - opts.area[1];
  976. break;
  977. default:
  978. legendData.area.start.x = (opts.width - legendWidth) / 2 - padding;
  979. legendData.area.end.x = (opts.width + legendWidth) / 2 + padding;
  980. }
  981. legendData.area.width = legendWidth + 2 * padding;
  982. legendData.area.wholeWidth = legendWidth + 2 * padding;
  983. legendData.area.height = legendList.length * lineHeight + 2 * padding;
  984. legendData.area.wholeHeight = legendList.length * lineHeight + 2 * padding + 2 * margin;
  985. legendData.points = legendList;
  986. }
  987. } else {
  988. let len = series.length;
  989. let maxHeight = opts.height - opts.area[0] - opts.area[2] - 2 * margin - 2 * padding;
  990. let maxLength = Math.min(Math.floor(maxHeight / lineHeight), len);
  991. legendData.area.height = maxLength * lineHeight + padding * 2;
  992. legendData.area.wholeHeight = maxLength * lineHeight + padding * 2;
  993. switch (opts.legend.float) {
  994. case 'top':
  995. legendData.area.start.y = opts.area[0] + margin;
  996. legendData.area.end.y = opts.area[0] + margin + legendData.area.height;
  997. break;
  998. case 'bottom':
  999. legendData.area.start.y = opts.height - opts.area[2] - margin - legendData.area.height;
  1000. legendData.area.end.y = opts.height - opts.area[2] - margin;
  1001. break;
  1002. default:
  1003. legendData.area.start.y = (opts.height - legendData.area.height) / 2;
  1004. legendData.area.end.y = (opts.height + legendData.area.height) / 2;
  1005. }
  1006. let lineNum = len % maxLength === 0 ? len / maxLength : Math.floor((len / maxLength) + 1);
  1007. let currentRow = [];
  1008. for (let i = 0; i < lineNum; i++) {
  1009. let temp = series.slice(i * maxLength, i * maxLength + maxLength);
  1010. currentRow.push(temp);
  1011. }
  1012. legendData.points = currentRow;
  1013. if (currentRow.length) {
  1014. for (let i = 0; i < currentRow.length; i++) {
  1015. let item = currentRow[i];
  1016. let maxWidth = 0;
  1017. for (let j = 0; j < item.length; j++) {
  1018. let itemWidth = shapeWidth + shapeRight + measureText(item[j].name || 'undefined', fontSize, context) + opts.legend.itemGap * opts.pix;
  1019. if (itemWidth > maxWidth) {
  1020. maxWidth = itemWidth;
  1021. }
  1022. }
  1023. legendData.widthArr.push(maxWidth);
  1024. legendData.heightArr.push(item.length * lineHeight + padding * 2);
  1025. }
  1026. let legendWidth = 0
  1027. for (let i = 0; i < legendData.widthArr.length; i++) {
  1028. legendWidth += legendData.widthArr[i];
  1029. }
  1030. legendData.area.width = legendWidth - opts.legend.itemGap * opts.pix + 2 * padding;
  1031. legendData.area.wholeWidth = legendData.area.width + padding;
  1032. }
  1033. }
  1034. switch (opts.legend.position) {
  1035. case 'top':
  1036. legendData.area.start.y = opts.area[0] + margin;
  1037. legendData.area.end.y = opts.area[0] + margin + legendData.area.height;
  1038. break;
  1039. case 'bottom':
  1040. legendData.area.start.y = opts.height - opts.area[2] - legendData.area.height - margin;
  1041. legendData.area.end.y = opts.height - opts.area[2] - margin;
  1042. break;
  1043. case 'left':
  1044. legendData.area.start.x = opts.area[3];
  1045. legendData.area.end.x = opts.area[3] + legendData.area.width;
  1046. break;
  1047. case 'right':
  1048. legendData.area.start.x = opts.width - opts.area[1] - legendData.area.width;
  1049. legendData.area.end.x = opts.width - opts.area[1];
  1050. break;
  1051. }
  1052. chartData.legendData = legendData;
  1053. return legendData;
  1054. }
  1055. function calCategoriesData(categories, opts, config, eachSpacing, context) {
  1056. var result = {
  1057. angle: 0,
  1058. xAxisHeight: opts.xAxis.lineHeight * opts.pix + opts.xAxis.marginTop * opts.pix
  1059. };
  1060. var fontSize = opts.xAxis.fontSize * opts.pix;
  1061. var categoriesTextLenth = categories.map(function(item,index) {
  1062. var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item,index,opts) : item;
  1063. return measureText(String(xitem), fontSize, context);
  1064. });
  1065. var maxTextLength = Math.max.apply(this, categoriesTextLenth);
  1066. if (opts.xAxis.rotateLabel == true) {
  1067. result.angle = opts.xAxis.rotateAngle * Math.PI / 180;
  1068. let tempHeight = opts.xAxis.marginTop * opts.pix * 2 + Math.abs(maxTextLength * Math.sin(result.angle))
  1069. tempHeight = tempHeight < fontSize + opts.xAxis.marginTop * opts.pix * 2 ? tempHeight + opts.xAxis.marginTop * opts.pix * 2 : tempHeight;
  1070. result.xAxisHeight = tempHeight;
  1071. }
  1072. if (opts.enableScroll && opts.xAxis.scrollShow) {
  1073. result.xAxisHeight += 6 * opts.pix;
  1074. }
  1075. if (opts.xAxis.disabled){
  1076. result.xAxisHeight = 0;
  1077. }
  1078. return result;
  1079. }
  1080. function getXAxisTextList(series, opts, config, stack) {
  1081. var index = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1;
  1082. var data;
  1083. if (stack == 'stack') {
  1084. data = dataCombineStack(series, opts.categories.length);
  1085. } else {
  1086. data = dataCombine(series);
  1087. }
  1088. var sorted = [];
  1089. // remove null from data
  1090. data = data.filter(function(item) {
  1091. //return item !== null;
  1092. if (typeof item === 'object' && item !== null) {
  1093. if (item.constructor.toString().indexOf('Array') > -1) {
  1094. return item !== null;
  1095. } else {
  1096. return item.value !== null;
  1097. }
  1098. } else {
  1099. return item !== null;
  1100. }
  1101. });
  1102. data.map(function(item) {
  1103. if (typeof item === 'object') {
  1104. if (item.constructor.toString().indexOf('Array') > -1) {
  1105. if (opts.type == 'candle') {
  1106. item.map(function(subitem) {
  1107. sorted.push(subitem);
  1108. })
  1109. } else {
  1110. sorted.push(item[0]);
  1111. }
  1112. } else {
  1113. sorted.push(item.value);
  1114. }
  1115. } else {
  1116. sorted.push(item);
  1117. }
  1118. })
  1119. var minData = 0;
  1120. var maxData = 0;
  1121. if (sorted.length > 0) {
  1122. minData = Math.min.apply(this, sorted);
  1123. maxData = Math.max.apply(this, sorted);
  1124. }
  1125. //为了兼容v1.9.0之前的项目
  1126. if (index > -1) {
  1127. if (typeof opts.xAxis.data[index].min === 'number') {
  1128. minData = Math.min(opts.xAxis.data[index].min, minData);
  1129. }
  1130. if (typeof opts.xAxis.data[index].max === 'number') {
  1131. maxData = Math.max(opts.xAxis.data[index].max, maxData);
  1132. }
  1133. } else {
  1134. if (typeof opts.xAxis.min === 'number') {
  1135. minData = Math.min(opts.xAxis.min, minData);
  1136. }
  1137. if (typeof opts.xAxis.max === 'number') {
  1138. maxData = Math.max(opts.xAxis.max, maxData);
  1139. }
  1140. }
  1141. if (minData === maxData) {
  1142. var rangeSpan = maxData || 10;
  1143. maxData += rangeSpan;
  1144. }
  1145. //var dataRange = getDataRange(minData, maxData);
  1146. var minRange = minData;
  1147. var maxRange = maxData;
  1148. var range = [];
  1149. var eachRange = (maxRange - minRange) / opts.xAxis.splitNumber;
  1150. for (var i = 0; i <= opts.xAxis.splitNumber; i++) {
  1151. range.push(minRange + eachRange * i);
  1152. }
  1153. return range;
  1154. }
  1155. function calXAxisData(series, opts, config, context) {
  1156. //堆叠图重算Y轴
  1157. var columnstyle = assign({}, {
  1158. type: ""
  1159. }, opts.extra.bar);
  1160. var result = {
  1161. angle: 0,
  1162. xAxisHeight: opts.xAxis.lineHeight * opts.pix + opts.xAxis.marginTop * opts.pix
  1163. };
  1164. result.ranges = getXAxisTextList(series, opts, config, columnstyle.type);
  1165. result.rangesFormat = result.ranges.map(function(item) {
  1166. //item = opts.xAxis.formatter ? opts.xAxis.formatter(item) : util.toFixed(item, 2);
  1167. item = util.toFixed(item, 2);
  1168. return item;
  1169. });
  1170. var xAxisScaleValues = result.ranges.map(function(item) {
  1171. // 如果刻度值是浮点数,则保留两位小数
  1172. item = util.toFixed(item, 2);
  1173. // 若有自定义格式则调用自定义的格式化函数
  1174. //item = opts.xAxis.formatter ? opts.xAxis.formatter(Number(item)) : item;
  1175. return item;
  1176. });
  1177. result = Object.assign(result, getXAxisPoints(xAxisScaleValues, opts, config));
  1178. // 计算X轴刻度的属性譬如每个刻度的间隔,刻度的起始点\结束点以及总长
  1179. var eachSpacing = result.eachSpacing;
  1180. var textLength = xAxisScaleValues.map(function(item) {
  1181. return measureText(item, opts.xAxis.fontSize * opts.pix, context);
  1182. });
  1183. if (opts.xAxis.disabled === true) {
  1184. result.xAxisHeight = 0;
  1185. }
  1186. return result;
  1187. }
  1188. function getRadarDataPoints(angleList, center, radius, series, opts) {
  1189. var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
  1190. var radarOption = opts.extra.radar || {};
  1191. radarOption.max = radarOption.max || 0;
  1192. var maxData = Math.max(radarOption.max, Math.max.apply(null, dataCombine(series)));
  1193. var data = [];
  1194. for (let i = 0; i < series.length; i++) {
  1195. let each = series[i];
  1196. let listItem = {};
  1197. listItem.color = each.color;
  1198. listItem.legendShape = each.legendShape;
  1199. listItem.pointShape = each.pointShape;
  1200. listItem.data = [];
  1201. each.data.forEach(function(item, index) {
  1202. let tmp = {};
  1203. tmp.angle = angleList[index];
  1204. tmp.proportion = item / maxData;
  1205. tmp.value = item;
  1206. tmp.position = convertCoordinateOrigin(radius * tmp.proportion * process * Math.cos(tmp.angle), radius * tmp.proportion * process * Math.sin(tmp.angle), center);
  1207. listItem.data.push(tmp);
  1208. });
  1209. data.push(listItem);
  1210. }
  1211. return data;
  1212. }
  1213. function getPieDataPoints(series, radius) {
  1214. var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  1215. var count = 0;
  1216. var _start_ = 0;
  1217. for (let i = 0; i < series.length; i++) {
  1218. let item = series[i];
  1219. item.data = item.data === null ? 0 : item.data;
  1220. count += item.data;
  1221. }
  1222. for (let i = 0; i < series.length; i++) {
  1223. let item = series[i];
  1224. item.data = item.data === null ? 0 : item.data;
  1225. if (count === 0) {
  1226. item._proportion_ = 1 / series.length * process;
  1227. } else {
  1228. item._proportion_ = item.data / count * process;
  1229. }
  1230. item._radius_ = radius;
  1231. }
  1232. for (let i = 0; i < series.length; i++) {
  1233. let item = series[i];
  1234. item._start_ = _start_;
  1235. _start_ += 2 * item._proportion_ * Math.PI;
  1236. }
  1237. return series;
  1238. }
  1239. function getFunnelDataPoints(series, radius, option, eachSpacing) {
  1240. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  1241. for (let i = 0; i < series.length; i++) {
  1242. if(option.type == 'funnel'){
  1243. series[i].radius = series[i].data / series[0].data * radius * process;
  1244. }else{
  1245. series[i].radius = (eachSpacing * (series.length - i)) / (eachSpacing * series.length) * radius * process;
  1246. }
  1247. series[i]._proportion_ = series[i].data / series[0].data;
  1248. }
  1249. // if(option.type !== 'pyramid'){
  1250. // series.reverse();
  1251. // }
  1252. return series;
  1253. }
  1254. function getRoseDataPoints(series, type, minRadius, radius) {
  1255. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  1256. var count = 0;
  1257. var _start_ = 0;
  1258. var dataArr = [];
  1259. for (let i = 0; i < series.length; i++) {
  1260. let item = series[i];
  1261. item.data = item.data === null ? 0 : item.data;
  1262. count += item.data;
  1263. dataArr.push(item.data);
  1264. }
  1265. var minData = Math.min.apply(null, dataArr);
  1266. var maxData = Math.max.apply(null, dataArr);
  1267. var radiusLength = radius - minRadius;
  1268. for (let i = 0; i < series.length; i++) {
  1269. let item = series[i];
  1270. item.data = item.data === null ? 0 : item.data;
  1271. if (count === 0) {
  1272. item._proportion_ = 1 / series.length * process;
  1273. item._rose_proportion_ = 1 / series.length * process;
  1274. } else {
  1275. item._proportion_ = item.data / count * process;
  1276. if(type == 'area'){
  1277. item._rose_proportion_ = 1 / series.length * process;
  1278. }else{
  1279. item._rose_proportion_ = item.data / count * process;
  1280. }
  1281. }
  1282. item._radius_ = minRadius + radiusLength * ((item.data - minData) / (maxData - minData)) || radius;
  1283. }
  1284. for (let i = 0; i < series.length; i++) {
  1285. let item = series[i];
  1286. item._start_ = _start_;
  1287. _start_ += 2 * item._rose_proportion_ * Math.PI;
  1288. }
  1289. return series;
  1290. }
  1291. function getArcbarDataPoints(series, arcbarOption) {
  1292. var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  1293. if (process == 1) {
  1294. process = 0.999999;
  1295. }
  1296. for (let i = 0; i < series.length; i++) {
  1297. let item = series[i];
  1298. item.data = item.data === null ? 0 : item.data;
  1299. let totalAngle;
  1300. if (arcbarOption.type == 'circle') {
  1301. totalAngle = 2;
  1302. } else {
  1303. if(arcbarOption.direction == 'ccw'){
  1304. if (arcbarOption.startAngle < arcbarOption.endAngle) {
  1305. totalAngle = 2 + arcbarOption.startAngle - arcbarOption.endAngle;
  1306. } else {
  1307. totalAngle = arcbarOption.startAngle - arcbarOption.endAngle;
  1308. }
  1309. }else{
  1310. if (arcbarOption.endAngle < arcbarOption.startAngle) {
  1311. totalAngle = 2 + arcbarOption.endAngle - arcbarOption.startAngle;
  1312. } else {
  1313. totalAngle = arcbarOption.startAngle - arcbarOption.endAngle;
  1314. }
  1315. }
  1316. }
  1317. item._proportion_ = totalAngle * item.data * process + arcbarOption.startAngle;
  1318. if(arcbarOption.direction == 'ccw'){
  1319. item._proportion_ = arcbarOption.startAngle - totalAngle * item.data * process ;
  1320. }
  1321. if (item._proportion_ >= 2) {
  1322. item._proportion_ = item._proportion_ % 2;
  1323. }
  1324. }
  1325. return series;
  1326. }
  1327. function getGaugeArcbarDataPoints(series, arcbarOption) {
  1328. var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  1329. if (process == 1) {
  1330. process = 0.999999;
  1331. }
  1332. for (let i = 0; i < series.length; i++) {
  1333. let item = series[i];
  1334. item.data = item.data === null ? 0 : item.data;
  1335. let totalAngle;
  1336. if (arcbarOption.type == 'circle') {
  1337. totalAngle = 2;
  1338. } else {
  1339. if (arcbarOption.endAngle < arcbarOption.startAngle) {
  1340. totalAngle = 2 + arcbarOption.endAngle - arcbarOption.startAngle;
  1341. } else {
  1342. totalAngle = arcbarOption.startAngle - arcbarOption.endAngle;
  1343. }
  1344. }
  1345. item._proportion_ = totalAngle * item.data * process + arcbarOption.startAngle;
  1346. if (item._proportion_ >= 2) {
  1347. item._proportion_ = item._proportion_ % 2;
  1348. }
  1349. }
  1350. return series;
  1351. }
  1352. function getGaugeAxisPoints(categories, startAngle, endAngle) {
  1353. let totalAngle;
  1354. if (endAngle < startAngle) {
  1355. totalAngle = 2 + endAngle - startAngle;
  1356. } else {
  1357. totalAngle = startAngle - endAngle;
  1358. }
  1359. let tempStartAngle = startAngle;
  1360. for (let i = 0; i < categories.length; i++) {
  1361. categories[i].value = categories[i].value === null ? 0 : categories[i].value;
  1362. categories[i]._startAngle_ = tempStartAngle;
  1363. categories[i]._endAngle_ = totalAngle * categories[i].value + startAngle;
  1364. if (categories[i]._endAngle_ >= 2) {
  1365. categories[i]._endAngle_ = categories[i]._endAngle_ % 2;
  1366. }
  1367. tempStartAngle = categories[i]._endAngle_;
  1368. }
  1369. return categories;
  1370. }
  1371. function getGaugeDataPoints(series, categories, gaugeOption) {
  1372. let process = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
  1373. for (let i = 0; i < series.length; i++) {
  1374. let item = series[i];
  1375. item.data = item.data === null ? 0 : item.data;
  1376. if (gaugeOption.pointer.color == 'auto') {
  1377. for (let i = 0; i < categories.length; i++) {
  1378. if (item.data <= categories[i].value) {
  1379. item.color = categories[i].color;
  1380. break;
  1381. }
  1382. }
  1383. } else {
  1384. item.color = gaugeOption.pointer.color;
  1385. }
  1386. let totalAngle;
  1387. if (gaugeOption.endAngle < gaugeOption.startAngle) {
  1388. totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
  1389. } else {
  1390. totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
  1391. }
  1392. item._endAngle_ = totalAngle * item.data + gaugeOption.startAngle;
  1393. item._oldAngle_ = gaugeOption.oldAngle;
  1394. if (gaugeOption.oldAngle < gaugeOption.endAngle) {
  1395. item._oldAngle_ += 2;
  1396. }
  1397. if (item.data >= gaugeOption.oldData) {
  1398. item._proportion_ = (item._endAngle_ - item._oldAngle_) * process + gaugeOption.oldAngle;
  1399. } else {
  1400. item._proportion_ = item._oldAngle_ - (item._oldAngle_ - item._endAngle_) * process;
  1401. }
  1402. if (item._proportion_ >= 2) {
  1403. item._proportion_ = item._proportion_ % 2;
  1404. }
  1405. }
  1406. return series;
  1407. }
  1408. function getPieTextMaxLength(series, config, context, opts) {
  1409. series = getPieDataPoints(series);
  1410. let maxLength = 0;
  1411. for (let i = 0; i < series.length; i++) {
  1412. let item = series[i];
  1413. let text = item.formatter ? item.formatter(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) + '%';
  1414. maxLength = Math.max(maxLength, measureText(text, item.textSize * opts.pix || config.fontSize, context));
  1415. }
  1416. return maxLength;
  1417. }
  1418. function fixColumeData(points, eachSpacing, columnLen, index, config, opts) {
  1419. return points.map(function(item) {
  1420. if (item === null) {
  1421. return null;
  1422. }
  1423. var seriesGap = 0;
  1424. var categoryGap = 0;
  1425. if (opts.type == 'mix') {
  1426. seriesGap = opts.extra.mix.column.seriesGap * opts.pix || 0;
  1427. categoryGap = opts.extra.mix.column.categoryGap * opts.pix || 0;
  1428. } else {
  1429. seriesGap = opts.extra.column.seriesGap * opts.pix || 0;
  1430. categoryGap = opts.extra.column.categoryGap * opts.pix || 0;
  1431. }
  1432. seriesGap = Math.min(seriesGap, eachSpacing / columnLen)
  1433. categoryGap = Math.min(categoryGap, eachSpacing / columnLen)
  1434. item.width = Math.ceil((eachSpacing - 2 * categoryGap - seriesGap * (columnLen - 1)) / columnLen);
  1435. if (opts.extra.mix && opts.extra.mix.column.width && +opts.extra.mix.column.width > 0) {
  1436. item.width = Math.min(item.width, +opts.extra.mix.column.width * opts.pix);
  1437. }
  1438. if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
  1439. item.width = Math.min(item.width, +opts.extra.column.width * opts.pix);
  1440. }
  1441. if (item.width <= 0) {
  1442. item.width = 1;
  1443. }
  1444. item.x += (index + 0.5 - columnLen / 2) * (item.width + seriesGap);
  1445. return item;
  1446. });
  1447. }
  1448. function fixBarData(points, eachSpacing, columnLen, index, config, opts) {
  1449. return points.map(function(item) {
  1450. if (item === null) {
  1451. return null;
  1452. }
  1453. var seriesGap = 0;
  1454. var categoryGap = 0;
  1455. seriesGap = opts.extra.bar.seriesGap * opts.pix || 0;
  1456. categoryGap = opts.extra.bar.categoryGap * opts.pix || 0;
  1457. seriesGap = Math.min(seriesGap, eachSpacing / columnLen)
  1458. categoryGap = Math.min(categoryGap, eachSpacing / columnLen)
  1459. item.width = Math.ceil((eachSpacing - 2 * categoryGap - seriesGap * (columnLen - 1)) / columnLen);
  1460. if (opts.extra.bar && opts.extra.bar.width && +opts.extra.bar.width > 0) {
  1461. item.width = Math.min(item.width, +opts.extra.bar.width * opts.pix);
  1462. }
  1463. if (item.width <= 0) {
  1464. item.width = 1;
  1465. }
  1466. item.y += (index + 0.5 - columnLen / 2) * (item.width + seriesGap);
  1467. return item;
  1468. });
  1469. }
  1470. function fixColumeMeterData(points, eachSpacing, columnLen, index, config, opts, border) {
  1471. var categoryGap = opts.extra.column.categoryGap * opts.pix || 0;
  1472. return points.map(function(item) {
  1473. if (item === null) {
  1474. return null;
  1475. }
  1476. item.width = eachSpacing - 2 * categoryGap;
  1477. if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
  1478. item.width = Math.min(item.width, +opts.extra.column.width * opts.pix);
  1479. }
  1480. if (index > 0) {
  1481. item.width -= border;
  1482. }
  1483. return item;
  1484. });
  1485. }
  1486. function fixColumeStackData(points, eachSpacing, columnLen, index, config, opts, series) {
  1487. var categoryGap = opts.extra.column.categoryGap * opts.pix || 0;
  1488. return points.map(function(item, indexn) {
  1489. if (item === null) {
  1490. return null;
  1491. }
  1492. item.width = Math.ceil(eachSpacing - 2 * categoryGap);
  1493. if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
  1494. item.width = Math.min(item.width, +opts.extra.column.width * opts.pix);
  1495. }
  1496. if (item.width <= 0) {
  1497. item.width = 1;
  1498. }
  1499. return item;
  1500. });
  1501. }
  1502. function fixBarStackData(points, eachSpacing, columnLen, index, config, opts, series) {
  1503. var categoryGap = opts.extra.bar.categoryGap * opts.pix || 0;
  1504. return points.map(function(item, indexn) {
  1505. if (item === null) {
  1506. return null;
  1507. }
  1508. item.width = Math.ceil(eachSpacing - 2 * categoryGap);
  1509. if (opts.extra.bar && opts.extra.bar.width && +opts.extra.bar.width > 0) {
  1510. item.width = Math.min(item.width, +opts.extra.bar.width * opts.pix);
  1511. }
  1512. if (item.width <= 0) {
  1513. item.width = 1;
  1514. }
  1515. return item;
  1516. });
  1517. }
  1518. function getXAxisPoints(categories, opts, config) {
  1519. var spacingValid = opts.width - opts.area[1] - opts.area[3];
  1520. var dataCount = opts.enableScroll ? Math.min(opts.xAxis.itemCount, categories.length) : categories.length;
  1521. if ((opts.type == 'line' || opts.type == 'area' || opts.type == 'scatter' || opts.type == 'bubble' || opts.type == 'bar') && dataCount > 1 && opts.xAxis.boundaryGap == 'justify') {
  1522. dataCount -= 1;
  1523. }
  1524. var widthRatio = 0;
  1525. if(opts.type == 'mount' && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1){
  1526. if(opts.extra.mount.widthRatio>2) opts.extra.mount.widthRatio = 2
  1527. widthRatio = opts.extra.mount.widthRatio - 1;
  1528. dataCount += widthRatio;
  1529. }
  1530. var eachSpacing = spacingValid / dataCount;
  1531. var xAxisPoints = [];
  1532. var startX = opts.area[3];
  1533. var endX = opts.width - opts.area[1];
  1534. categories.forEach(function(item, index) {
  1535. xAxisPoints.push(startX + widthRatio / 2 * eachSpacing + index * eachSpacing);
  1536. });
  1537. if (opts.xAxis.boundaryGap !== 'justify') {
  1538. if (opts.enableScroll === true) {
  1539. xAxisPoints.push(startX + widthRatio * eachSpacing + categories.length * eachSpacing);
  1540. } else {
  1541. xAxisPoints.push(endX);
  1542. }
  1543. }
  1544. return {
  1545. xAxisPoints: xAxisPoints,
  1546. startX: startX,
  1547. endX: endX,
  1548. eachSpacing: eachSpacing
  1549. };
  1550. }
  1551. function getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) {
  1552. var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
  1553. var points = [];
  1554. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1555. data.forEach(function(item, index) {
  1556. if (item === null) {
  1557. points.push(null);
  1558. } else {
  1559. var cPoints = [];
  1560. item.forEach(function(items, indexs) {
  1561. var point = {};
  1562. point.x = xAxisPoints[index] + Math.round(eachSpacing / 2);
  1563. var value = items.value || items;
  1564. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1565. height *= process;
  1566. point.y = opts.height - Math.round(height) - opts.area[2];
  1567. cPoints.push(point);
  1568. });
  1569. points.push(cPoints);
  1570. }
  1571. });
  1572. return points;
  1573. }
  1574. function getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) {
  1575. var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
  1576. var boundaryGap = 'center';
  1577. if (opts.type == 'line' || opts.type == 'area' || opts.type == 'scatter' || opts.type == 'bubble' ) {
  1578. boundaryGap = opts.xAxis.boundaryGap;
  1579. }
  1580. var points = [];
  1581. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1582. var validWidth = opts.width - opts.area[1] - opts.area[3];
  1583. data.forEach(function(item, index) {
  1584. if (item === null) {
  1585. points.push(null);
  1586. } else {
  1587. var point = {};
  1588. point.color = item.color;
  1589. point.x = xAxisPoints[index];
  1590. var value = item;
  1591. if (typeof item === 'object' && item !== null) {
  1592. if (item.constructor.toString().indexOf('Array') > -1) {
  1593. let xranges, xminRange, xmaxRange;
  1594. xranges = [].concat(opts.chartData.xAxisData.ranges);
  1595. xminRange = xranges.shift();
  1596. xmaxRange = xranges.pop();
  1597. value = item[1];
  1598. point.x = opts.area[3] + validWidth * (item[0] - xminRange) / (xmaxRange - xminRange);
  1599. if(opts.type == 'bubble'){
  1600. point.r = item[2];
  1601. point.t = item[3];
  1602. }
  1603. } else {
  1604. value = item.value;
  1605. }
  1606. }
  1607. if (boundaryGap == 'center') {
  1608. point.x += eachSpacing / 2;
  1609. }
  1610. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1611. height *= process;
  1612. point.y = opts.height - height - opts.area[2];
  1613. points.push(point);
  1614. }
  1615. });
  1616. return points;
  1617. }
  1618. function getLineDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, lineOption, process){
  1619. var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
  1620. var boundaryGap = opts.xAxis.boundaryGap;
  1621. var points = [];
  1622. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1623. var validWidth = opts.width - opts.area[1] - opts.area[3];
  1624. data.forEach(function(item, index) {
  1625. if (item === null) {
  1626. points.push(null);
  1627. } else {
  1628. var point = {};
  1629. point.color = item.color;
  1630. if(lineOption.animation == 'vertical'){
  1631. point.x = xAxisPoints[index];
  1632. var value = item;
  1633. if (typeof item === 'object' && item !== null) {
  1634. if (item.constructor.toString().indexOf('Array') > -1) {
  1635. let xranges, xminRange, xmaxRange;
  1636. xranges = [].concat(opts.chartData.xAxisData.ranges);
  1637. xminRange = xranges.shift();
  1638. xmaxRange = xranges.pop();
  1639. value = item[1];
  1640. point.x = opts.area[3] + validWidth * (item[0] - xminRange) / (xmaxRange - xminRange);
  1641. } else {
  1642. value = item.value;
  1643. }
  1644. }
  1645. if (boundaryGap == 'center') {
  1646. point.x += eachSpacing / 2;
  1647. }
  1648. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1649. height *= process;
  1650. point.y = opts.height - height - opts.area[2];
  1651. points.push(point);
  1652. }else{
  1653. point.x = xAxisPoints[0] + eachSpacing * index * process;
  1654. var value = item;
  1655. if (boundaryGap == 'center') {
  1656. point.x += eachSpacing / 2;
  1657. }
  1658. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1659. point.y = opts.height - height - opts.area[2];
  1660. points.push(point);
  1661. }
  1662. }
  1663. });
  1664. return points;
  1665. }
  1666. function getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, zeroPoints, process){
  1667. var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
  1668. var points = [];
  1669. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1670. var validWidth = opts.width - opts.area[1] - opts.area[3];
  1671. data.forEach(function(item, index) {
  1672. if (item === null) {
  1673. points.push(null);
  1674. } else {
  1675. var point = {};
  1676. point.color = item.color;
  1677. point.x = xAxisPoints[index];
  1678. var value = item;
  1679. if (typeof item === 'object' && item !== null) {
  1680. if (item.constructor.toString().indexOf('Array') > -1) {
  1681. let xranges, xminRange, xmaxRange;
  1682. xranges = [].concat(opts.chartData.xAxisData.ranges);
  1683. xminRange = xranges.shift();
  1684. xmaxRange = xranges.pop();
  1685. value = item[1];
  1686. point.x = opts.area[3] + validWidth * (item[0] - xminRange) / (xmaxRange - xminRange);
  1687. } else {
  1688. value = item.value;
  1689. }
  1690. }
  1691. point.x += eachSpacing / 2;
  1692. var height = validHeight * (value * process - minRange) / (maxRange - minRange);
  1693. point.y = opts.height - height - opts.area[2];
  1694. points.push(point);
  1695. }
  1696. });
  1697. return points;
  1698. }
  1699. function getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints) {
  1700. var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
  1701. var points = [];
  1702. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1703. var validWidth = opts.width - opts.area[1] - opts.area[3];
  1704. var mountWidth = eachSpacing * mountOption.widthRatio;
  1705. series.forEach(function(item, index) {
  1706. if (item === null) {
  1707. points.push(null);
  1708. } else {
  1709. var point = {};
  1710. point.color = item.color;
  1711. point.x = xAxisPoints[index];
  1712. point.x += eachSpacing / 2;
  1713. var value = item.data;
  1714. var height = validHeight * (value * process - minRange) / (maxRange - minRange);
  1715. point.y = opts.height - height - opts.area[2];
  1716. point.value = value;
  1717. point.width = mountWidth;
  1718. points.push(point);
  1719. }
  1720. });
  1721. return points;
  1722. }
  1723. function getBarDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config) {
  1724. var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
  1725. var points = [];
  1726. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1727. var validWidth = opts.width - opts.area[1] - opts.area[3];
  1728. data.forEach(function(item, index) {
  1729. if (item === null) {
  1730. points.push(null);
  1731. } else {
  1732. var point = {};
  1733. point.color = item.color;
  1734. point.y = yAxisPoints[index];
  1735. var value = item;
  1736. if (typeof item === 'object' && item !== null) {
  1737. value = item.value;
  1738. }
  1739. var height = validWidth * (value - minRange) / (maxRange - minRange);
  1740. height *= process;
  1741. point.height = height;
  1742. point.value = value;
  1743. point.x = height + opts.area[3];
  1744. points.push(point);
  1745. }
  1746. });
  1747. return points;
  1748. }
  1749. function getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, stackSeries) {
  1750. var process = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 1;
  1751. var points = [];
  1752. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1753. data.forEach(function(item, index) {
  1754. if (item === null) {
  1755. points.push(null);
  1756. } else {
  1757. var point = {};
  1758. point.color = item.color;
  1759. point.x = xAxisPoints[index] + Math.round(eachSpacing / 2);
  1760. if (seriesIndex > 0) {
  1761. var value = 0;
  1762. for (let i = 0; i <= seriesIndex; i++) {
  1763. value += stackSeries[i].data[index];
  1764. }
  1765. var value0 = value - item;
  1766. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1767. var height0 = validHeight * (value0 - minRange) / (maxRange - minRange);
  1768. } else {
  1769. var value = item;
  1770. if (typeof item === 'object' && item !== null) {
  1771. value = item.value;
  1772. }
  1773. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1774. var height0 = 0;
  1775. }
  1776. var heightc = height0;
  1777. height *= process;
  1778. heightc *= process;
  1779. point.y = opts.height - Math.round(height) - opts.area[2];
  1780. point.y0 = opts.height - Math.round(heightc) - opts.area[2];
  1781. points.push(point);
  1782. }
  1783. });
  1784. return points;
  1785. }
  1786. function getBarStackDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, seriesIndex, stackSeries) {
  1787. var process = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 1;
  1788. var points = [];
  1789. var validHeight = opts.width - opts.area[1] - opts.area[3];
  1790. data.forEach(function(item, index) {
  1791. if (item === null) {
  1792. points.push(null);
  1793. } else {
  1794. var point = {};
  1795. point.color = item.color;
  1796. point.y = yAxisPoints[index];
  1797. if (seriesIndex > 0) {
  1798. var value = 0;
  1799. for (let i = 0; i <= seriesIndex; i++) {
  1800. value += stackSeries[i].data[index];
  1801. }
  1802. var value0 = value - item;
  1803. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1804. var height0 = validHeight * (value0 - minRange) / (maxRange - minRange);
  1805. } else {
  1806. var value = item;
  1807. if (typeof item === 'object' && item !== null) {
  1808. value = item.value;
  1809. }
  1810. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1811. var height0 = 0;
  1812. }
  1813. var heightc = height0;
  1814. height *= process;
  1815. heightc *= process;
  1816. point.height = height - heightc;
  1817. point.x = opts.area[3] + height;
  1818. point.x0 = opts.area[3] + heightc;
  1819. points.push(point);
  1820. }
  1821. });
  1822. return points;
  1823. }
  1824. function getYAxisTextList(series, opts, config, stack, yData) {
  1825. var index = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
  1826. var data;
  1827. if (stack == 'stack') {
  1828. data = dataCombineStack(series, opts.categories.length);
  1829. } else {
  1830. data = dataCombine(series);
  1831. }
  1832. var sorted = [];
  1833. // remove null from data
  1834. data = data.filter(function(item) {
  1835. //return item !== null;
  1836. if (typeof item === 'object' && item !== null) {
  1837. if (item.constructor.toString().indexOf('Array') > -1) {
  1838. return item !== null;
  1839. } else {
  1840. return item.value !== null;
  1841. }
  1842. } else {
  1843. return item !== null;
  1844. }
  1845. });
  1846. data.map(function(item) {
  1847. if (typeof item === 'object') {
  1848. if (item.constructor.toString().indexOf('Array') > -1) {
  1849. if (opts.type == 'candle') {
  1850. item.map(function(subitem) {
  1851. sorted.push(subitem);
  1852. })
  1853. } else {
  1854. sorted.push(item[1]);
  1855. }
  1856. } else {
  1857. sorted.push(item.value);
  1858. }
  1859. } else {
  1860. sorted.push(item);
  1861. }
  1862. })
  1863. var minData = yData.min || 0;
  1864. var maxData = yData.max || 0;
  1865. if (sorted.length > 0) {
  1866. minData = Math.min.apply(this, sorted);
  1867. maxData = Math.max.apply(this, sorted);
  1868. }
  1869. if (minData === maxData) {
  1870. if(maxData == 0){
  1871. maxData = 10;
  1872. }else{
  1873. minData = 0;
  1874. }
  1875. }
  1876. var dataRange = getDataRange(minData, maxData);
  1877. var minRange = (yData.min === undefined || yData.min === null) ? dataRange.minRange : yData.min;
  1878. var maxRange = (yData.max === undefined || yData.max === null) ? dataRange.maxRange : yData.max;
  1879. var eachRange = (maxRange - minRange) / opts.yAxis.splitNumber;
  1880. var range = [];
  1881. for (var i = 0; i <= opts.yAxis.splitNumber; i++) {
  1882. range.push(minRange + eachRange * i);
  1883. }
  1884. return range.reverse();
  1885. }
  1886. function calYAxisData(series, opts, config, context) {
  1887. //堆叠图重算Y轴
  1888. var columnstyle = assign({}, {
  1889. type: ""
  1890. }, opts.extra.column);
  1891. //如果是多Y轴,重新计算
  1892. var YLength = opts.yAxis.data.length;
  1893. var newSeries = new Array(YLength);
  1894. if (YLength > 0) {
  1895. for (let i = 0; i < YLength; i++) {
  1896. newSeries[i] = [];
  1897. for (let j = 0; j < series.length; j++) {
  1898. if (series[j].index == i) {
  1899. newSeries[i].push(series[j]);
  1900. }
  1901. }
  1902. }
  1903. var rangesArr = new Array(YLength);
  1904. var rangesFormatArr = new Array(YLength);
  1905. var yAxisWidthArr = new Array(YLength);
  1906. for (let i = 0; i < YLength; i++) {
  1907. let yData = opts.yAxis.data[i];
  1908. //如果总开关不显示,强制每个Y轴为不显示
  1909. if (opts.yAxis.disabled == true) {
  1910. yData.disabled = true;
  1911. }
  1912. if(yData.type === 'categories'){
  1913. if(!yData.formatter){
  1914. yData.formatter = (val,index,opts) => {return val + (yData.unit || '')};
  1915. }
  1916. yData.categories = yData.categories || opts.categories;
  1917. rangesArr[i] = yData.categories;
  1918. }else{
  1919. if(!yData.formatter){
  1920. yData.formatter = (val,index,opts) => {return util.toFixed(val, yData.tofix || 0) + (yData.unit || '')};
  1921. }
  1922. rangesArr[i] = getYAxisTextList(newSeries[i], opts, config, columnstyle.type, yData, i);
  1923. }
  1924. let yAxisFontSizes = yData.fontSize * opts.pix || config.fontSize;
  1925. yAxisWidthArr[i] = {
  1926. position: yData.position ? yData.position : 'left',
  1927. width: 0
  1928. };
  1929. rangesFormatArr[i] = rangesArr[i].map(function(items,index) {
  1930. items = yData.formatter(items,index,opts);
  1931. yAxisWidthArr[i].width = Math.max(yAxisWidthArr[i].width, measureText(items, yAxisFontSizes, context) + 5);
  1932. return items;
  1933. });
  1934. let calibration = yData.calibration ? 4 * opts.pix : 0;
  1935. yAxisWidthArr[i].width += calibration + 3 * opts.pix;
  1936. if (yData.disabled === true) {
  1937. yAxisWidthArr[i].width = 0;
  1938. }
  1939. }
  1940. } else {
  1941. var rangesArr = new Array(1);
  1942. var rangesFormatArr = new Array(1);
  1943. var yAxisWidthArr = new Array(1);
  1944. if(opts.type === 'bar'){
  1945. rangesArr[0] = opts.categories;
  1946. if(!opts.yAxis.formatter){
  1947. opts.yAxis.formatter = (val,index,opts) => {return val + (opts.yAxis.unit || '')}
  1948. }
  1949. }else{
  1950. if(!opts.yAxis.formatter){
  1951. opts.yAxis.formatter = (val,index,opts) => {return val.toFixed(opts.yAxis.tofix ) + (opts.yAxis.unit || '')}
  1952. }
  1953. rangesArr[0] = getYAxisTextList(series, opts, config, columnstyle.type, {});
  1954. }
  1955. yAxisWidthArr[0] = {
  1956. position: 'left',
  1957. width: 0
  1958. };
  1959. var yAxisFontSize = opts.yAxis.fontSize * opts.pix || config.fontSize;
  1960. rangesFormatArr[0] = rangesArr[0].map(function(item,index) {
  1961. item = opts.yAxis.formatter(item,index,opts);
  1962. yAxisWidthArr[0].width = Math.max(yAxisWidthArr[0].width, measureText(item, yAxisFontSize, context) + 5);
  1963. return item;
  1964. });
  1965. yAxisWidthArr[0].width += 3 * opts.pix;
  1966. if (opts.yAxis.disabled === true) {
  1967. yAxisWidthArr[0] = {
  1968. position: 'left',
  1969. width: 0
  1970. };
  1971. opts.yAxis.data[0] = {
  1972. disabled: true
  1973. };
  1974. } else {
  1975. opts.yAxis.data[0] = {
  1976. disabled: false,
  1977. position: 'left',
  1978. max: opts.yAxis.max,
  1979. min: opts.yAxis.min,
  1980. formatter: opts.yAxis.formatter
  1981. };
  1982. if(opts.type === 'bar'){
  1983. opts.yAxis.data[0].categories = opts.categories;
  1984. opts.yAxis.data[0].type = 'categories';
  1985. }
  1986. }
  1987. }
  1988. return {
  1989. rangesFormat: rangesFormatArr,
  1990. ranges: rangesArr,
  1991. yAxisWidth: yAxisWidthArr
  1992. };
  1993. }
  1994. function calTooltipYAxisData(point, series, opts, config, eachSpacing) {
  1995. let ranges = [].concat(opts.chartData.yAxisData.ranges);
  1996. let spacingValid = opts.height - opts.area[0] - opts.area[2];
  1997. let minAxis = opts.area[0];
  1998. let items = [];
  1999. for (let i = 0; i < ranges.length; i++) {
  2000. let maxVal = Math.max.apply(this, ranges[i]);
  2001. let minVal = Math.min.apply(this, ranges[i]);
  2002. let item = maxVal - (maxVal - minVal) * (point - minAxis) / spacingValid;
  2003. item = opts.yAxis.data && opts.yAxis.data[i].formatter ? opts.yAxis.data[i].formatter(item, i, opts) : item.toFixed(0);
  2004. items.push(String(item))
  2005. }
  2006. return items;
  2007. }
  2008. function calMarkLineData(points, opts) {
  2009. let minRange, maxRange;
  2010. let spacingValid = opts.height - opts.area[0] - opts.area[2];
  2011. for (let i = 0; i < points.length; i++) {
  2012. points[i].yAxisIndex = points[i].yAxisIndex ? points[i].yAxisIndex : 0;
  2013. let range = [].concat(opts.chartData.yAxisData.ranges[points[i].yAxisIndex]);
  2014. minRange = range.pop();
  2015. maxRange = range.shift();
  2016. let height = spacingValid * (points[i].value - minRange) / (maxRange - minRange);
  2017. points[i].y = opts.height - Math.round(height) - opts.area[2];
  2018. }
  2019. return points;
  2020. }
  2021. function contextRotate(context, opts) {
  2022. if (opts.rotateLock !== true) {
  2023. context.translate(opts.height, 0);
  2024. context.rotate(90 * Math.PI / 180);
  2025. } else if (opts._rotate_ !== true) {
  2026. context.translate(opts.height, 0);
  2027. context.rotate(90 * Math.PI / 180);
  2028. opts._rotate_ = true;
  2029. }
  2030. }
  2031. function drawPointShape(points, color, shape, context, opts) {
  2032. context.beginPath();
  2033. if (opts.dataPointShapeType == 'hollow') {
  2034. context.setStrokeStyle(color);
  2035. context.setFillStyle(opts.background);
  2036. context.setLineWidth(2 * opts.pix);
  2037. } else {
  2038. context.setStrokeStyle("#ffffff");
  2039. context.setFillStyle(color);
  2040. context.setLineWidth(1 * opts.pix);
  2041. }
  2042. if (shape === 'diamond') {
  2043. points.forEach(function(item, index) {
  2044. if (item !== null) {
  2045. context.moveTo(item.x, item.y - 4.5);
  2046. context.lineTo(item.x - 4.5, item.y);
  2047. context.lineTo(item.x, item.y + 4.5);
  2048. context.lineTo(item.x + 4.5, item.y);
  2049. context.lineTo(item.x, item.y - 4.5);
  2050. }
  2051. });
  2052. } else if (shape === 'circle') {
  2053. points.forEach(function(item, index) {
  2054. if (item !== null) {
  2055. context.moveTo(item.x + 2.5 * opts.pix, item.y);
  2056. context.arc(item.x, item.y, 3 * opts.pix, 0, 2 * Math.PI, false);
  2057. }
  2058. });
  2059. } else if (shape === 'square') {
  2060. points.forEach(function(item, index) {
  2061. if (item !== null) {
  2062. context.moveTo(item.x - 3.5, item.y - 3.5);
  2063. context.rect(item.x - 3.5, item.y - 3.5, 7, 7);
  2064. }
  2065. });
  2066. } else if (shape === 'triangle') {
  2067. points.forEach(function(item, index) {
  2068. if (item !== null) {
  2069. context.moveTo(item.x, item.y - 4.5);
  2070. context.lineTo(item.x - 4.5, item.y + 4.5);
  2071. context.lineTo(item.x + 4.5, item.y + 4.5);
  2072. context.lineTo(item.x, item.y - 4.5);
  2073. }
  2074. });
  2075. } else if (shape === 'none') {
  2076. return;
  2077. }
  2078. context.closePath();
  2079. context.fill();
  2080. context.stroke();
  2081. }
  2082. function drawActivePoint(points, color, shape, context, opts, option, seriesIndex) {
  2083. if(!opts.tooltip){
  2084. return
  2085. }
  2086. if(opts.tooltip.group.length>0 && opts.tooltip.group.includes(seriesIndex) == false){
  2087. return
  2088. }
  2089. var pointIndex = typeof opts.tooltip.index === 'number' ? opts.tooltip.index : opts.tooltip.index[opts.tooltip.group.indexOf(seriesIndex)];
  2090. context.beginPath();
  2091. if (option.activeType == 'hollow') {
  2092. context.setStrokeStyle(color);
  2093. context.setFillStyle(opts.background);
  2094. context.setLineWidth(2 * opts.pix);
  2095. } else {
  2096. context.setStrokeStyle("#ffffff");
  2097. context.setFillStyle(color);
  2098. context.setLineWidth(1 * opts.pix);
  2099. }
  2100. if (shape === 'diamond') {
  2101. points.forEach(function(item, index) {
  2102. if (item !== null && pointIndex == index ) {
  2103. context.moveTo(item.x, item.y - 4.5);
  2104. context.lineTo(item.x - 4.5, item.y);
  2105. context.lineTo(item.x, item.y + 4.5);
  2106. context.lineTo(item.x + 4.5, item.y);
  2107. context.lineTo(item.x, item.y - 4.5);
  2108. }
  2109. });
  2110. } else if (shape === 'circle') {
  2111. points.forEach(function(item, index) {
  2112. if (item !== null && pointIndex == index) {
  2113. context.moveTo(item.x + 2.5 * opts.pix, item.y);
  2114. context.arc(item.x, item.y, 3 * opts.pix, 0, 2 * Math.PI, false);
  2115. }
  2116. });
  2117. } else if (shape === 'square') {
  2118. points.forEach(function(item, index) {
  2119. if (item !== null && pointIndex == index) {
  2120. context.moveTo(item.x - 3.5, item.y - 3.5);
  2121. context.rect(item.x - 3.5, item.y - 3.5, 7, 7);
  2122. }
  2123. });
  2124. } else if (shape === 'triangle') {
  2125. points.forEach(function(item, index) {
  2126. if (item !== null && pointIndex == index) {
  2127. context.moveTo(item.x, item.y - 4.5);
  2128. context.lineTo(item.x - 4.5, item.y + 4.5);
  2129. context.lineTo(item.x + 4.5, item.y + 4.5);
  2130. context.lineTo(item.x, item.y - 4.5);
  2131. }
  2132. });
  2133. } else if (shape === 'none') {
  2134. return;
  2135. }
  2136. context.closePath();
  2137. context.fill();
  2138. context.stroke();
  2139. }
  2140. function drawRingTitle(opts, config, context, center) {
  2141. var titlefontSize = opts.title.fontSize || config.titleFontSize;
  2142. var subtitlefontSize = opts.subtitle.fontSize || config.subtitleFontSize;
  2143. var title = opts.title.name || '';
  2144. var subtitle = opts.subtitle.name || '';
  2145. var titleFontColor = opts.title.color || opts.fontColor;
  2146. var subtitleFontColor = opts.subtitle.color || opts.fontColor;
  2147. var titleHeight = title ? titlefontSize : 0;
  2148. var subtitleHeight = subtitle ? subtitlefontSize : 0;
  2149. var margin = 5;
  2150. if (subtitle) {
  2151. var textWidth = measureText(subtitle, subtitlefontSize * opts.pix, context);
  2152. var startX = center.x - textWidth / 2 + (opts.subtitle.offsetX|| 0) * opts.pix ;
  2153. var startY = center.y + subtitlefontSize * opts.pix / 2 + (opts.subtitle.offsetY || 0) * opts.pix;
  2154. if (title) {
  2155. startY += (titleHeight * opts.pix + margin) / 2;
  2156. }
  2157. context.beginPath();
  2158. context.setFontSize(subtitlefontSize * opts.pix);
  2159. context.setFillStyle(subtitleFontColor);
  2160. context.fillText(subtitle, startX, startY);
  2161. context.closePath();
  2162. context.stroke();
  2163. }
  2164. if (title) {
  2165. var _textWidth = measureText(title, titlefontSize * opts.pix, context);
  2166. var _startX = center.x - _textWidth / 2 + (opts.title.offsetX || 0);
  2167. var _startY = center.y + titlefontSize * opts.pix / 2 + (opts.title.offsetY || 0) * opts.pix;
  2168. if (subtitle) {
  2169. _startY -= (subtitleHeight * opts.pix + margin) / 2;
  2170. }
  2171. context.beginPath();
  2172. context.setFontSize(titlefontSize * opts.pix);
  2173. context.setFillStyle(titleFontColor);
  2174. context.fillText(title, _startX, _startY);
  2175. context.closePath();
  2176. context.stroke();
  2177. }
  2178. }
  2179. function drawPointText(points, series, config, context, opts) {
  2180. // 绘制数据文案
  2181. var data = series.data;
  2182. var textOffset = series.textOffset ? series.textOffset : 0;
  2183. points.forEach(function(item, index) {
  2184. if (item !== null) {
  2185. context.beginPath();
  2186. var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize;
  2187. context.setFontSize(fontSize);
  2188. context.setFillStyle(series.textColor || opts.fontColor);
  2189. var value = data[index]
  2190. if (typeof data[index] === 'object' && data[index] !== null) {
  2191. if (data[index].constructor.toString().indexOf('Array')>-1) {
  2192. value = data[index][1];
  2193. } else {
  2194. value = data[index].value
  2195. }
  2196. }
  2197. var formatVal = series.formatter ? series.formatter(value,index,series,opts) : value;
  2198. context.setTextAlign('center');
  2199. context.fillText(String(formatVal), item.x, item.y - 4 + textOffset * opts.pix);
  2200. context.closePath();
  2201. context.stroke();
  2202. context.setTextAlign('left');
  2203. }
  2204. });
  2205. }
  2206. function drawColumePointText(points, series, config, context, opts) {
  2207. // 绘制数据文案
  2208. var data = series.data;
  2209. var textOffset = series.textOffset ? series.textOffset : 0;
  2210. var Position = opts.extra.column.labelPosition;
  2211. points.forEach(function(item, index) {
  2212. if (item !== null) {
  2213. context.beginPath();
  2214. var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize;
  2215. context.setFontSize(fontSize);
  2216. context.setFillStyle(series.textColor || opts.fontColor);
  2217. var value = data[index]
  2218. if (typeof data[index] === 'object' && data[index] !== null) {
  2219. if (data[index].constructor.toString().indexOf('Array')>-1) {
  2220. value = data[index][1];
  2221. } else {
  2222. value = data[index].value
  2223. }
  2224. }
  2225. var formatVal = series.formatter ? series.formatter(value,index,series,opts) : value;
  2226. context.setTextAlign('center');
  2227. var startY = item.y - 4 * opts.pix + textOffset * opts.pix;
  2228. if(item.y > series.zeroPoints){
  2229. startY = item.y + textOffset * opts.pix + fontSize;
  2230. }
  2231. if(Position == 'insideTop'){
  2232. startY = item.y + fontSize + textOffset * opts.pix;
  2233. if(item.y > series.zeroPoints){
  2234. startY = item.y - textOffset * opts.pix - 4 * opts.pix;
  2235. }
  2236. }
  2237. if(Position == 'center'){
  2238. startY = item.y + textOffset * opts.pix + (opts.height - opts.area[2] - item.y + fontSize)/2;
  2239. if(series.zeroPoints < opts.height - opts.area[2]){
  2240. startY = item.y + textOffset * opts.pix + (series.zeroPoints - item.y + fontSize)/2;
  2241. }
  2242. if(item.y > series.zeroPoints){
  2243. startY = item.y - textOffset * opts.pix - (item.y - series.zeroPoints - fontSize)/2;
  2244. }
  2245. if(opts.extra.column.type == 'stack'){
  2246. startY = item.y + textOffset * opts.pix + (item.y0 - item.y + fontSize)/2;
  2247. }
  2248. }
  2249. if(Position == 'bottom'){
  2250. startY = opts.height - opts.area[2] + textOffset * opts.pix - 4 * opts.pix;
  2251. if(series.zeroPoints < opts.height - opts.area[2]){
  2252. startY = series.zeroPoints + textOffset * opts.pix - 4 * opts.pix;
  2253. }
  2254. if(item.y > series.zeroPoints){
  2255. startY = series.zeroPoints - textOffset * opts.pix + fontSize + 2 * opts.pix;
  2256. }
  2257. if(opts.extra.column.type == 'stack'){
  2258. startY = item.y0 + textOffset * opts.pix - 4 * opts.pix;
  2259. }
  2260. }
  2261. context.fillText(String(formatVal), item.x, startY);
  2262. context.closePath();
  2263. context.stroke();
  2264. context.setTextAlign('left');
  2265. }
  2266. });
  2267. }
  2268. function drawMountPointText(points, series, config, context, opts, zeroPoints) {
  2269. // 绘制数据文案
  2270. var data = series.data;
  2271. var textOffset = series.textOffset ? series.textOffset : 0;
  2272. var Position = opts.extra.mount.labelPosition;
  2273. points.forEach(function(item, index) {
  2274. if (item !== null) {
  2275. context.beginPath();
  2276. var fontSize = series[index].textSize ? series[index].textSize * opts.pix : config.fontSize;
  2277. context.setFontSize(fontSize);
  2278. context.setFillStyle(series[index].textColor || opts.fontColor);
  2279. var value = item.value
  2280. var formatVal = series[index].formatter ? series[index].formatter(value,index,series,opts) : value;
  2281. context.setTextAlign('center');
  2282. var startY = item.y - 4 * opts.pix + textOffset * opts.pix;
  2283. if(item.y > zeroPoints){
  2284. startY = item.y + textOffset * opts.pix + fontSize;
  2285. }
  2286. context.fillText(String(formatVal), item.x, startY);
  2287. context.closePath();
  2288. context.stroke();
  2289. context.setTextAlign('left');
  2290. }
  2291. });
  2292. }
  2293. function drawBarPointText(points, series, config, context, opts) {
  2294. // 绘制数据文案
  2295. var data = series.data;
  2296. var textOffset = series.textOffset ? series.textOffset : 0;
  2297. points.forEach(function(item, index) {
  2298. if (item !== null) {
  2299. context.beginPath();
  2300. var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize;
  2301. context.setFontSize(fontSize);
  2302. context.setFillStyle(series.textColor || opts.fontColor);
  2303. var value = data[index]
  2304. if (typeof data[index] === 'object' && data[index] !== null) {
  2305. value = data[index].value ;
  2306. }
  2307. var formatVal = series.formatter ? series.formatter(value,index,series,opts) : value;
  2308. context.setTextAlign('left');
  2309. context.fillText(String(formatVal), item.x + 4 * opts.pix , item.y + fontSize / 2 - 3 );
  2310. context.closePath();
  2311. context.stroke();
  2312. }
  2313. });
  2314. }
  2315. function drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context) {
  2316. radius -= gaugeOption.width / 2 + gaugeOption.labelOffset * opts.pix;
  2317. radius = radius < 10 ? 10 : radius;
  2318. let totalAngle;
  2319. if (gaugeOption.endAngle < gaugeOption.startAngle) {
  2320. totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
  2321. } else {
  2322. totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
  2323. }
  2324. let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
  2325. let totalNumber = gaugeOption.endNumber - gaugeOption.startNumber;
  2326. let splitNumber = totalNumber / gaugeOption.splitLine.splitNumber;
  2327. let nowAngle = gaugeOption.startAngle;
  2328. let nowNumber = gaugeOption.startNumber;
  2329. for (let i = 0; i < gaugeOption.splitLine.splitNumber + 1; i++) {
  2330. var pos = {
  2331. x: radius * Math.cos(nowAngle * Math.PI),
  2332. y: radius * Math.sin(nowAngle * Math.PI)
  2333. };
  2334. var labelText = gaugeOption.formatter ? gaugeOption.formatter(nowNumber,i,opts) : nowNumber;
  2335. pos.x += centerPosition.x - measureText(labelText, config.fontSize, context) / 2;
  2336. pos.y += centerPosition.y;
  2337. var startX = pos.x;
  2338. var startY = pos.y;
  2339. context.beginPath();
  2340. context.setFontSize(config.fontSize);
  2341. context.setFillStyle(gaugeOption.labelColor || opts.fontColor);
  2342. context.fillText(labelText, startX, startY + config.fontSize / 2);
  2343. context.closePath();
  2344. context.stroke();
  2345. nowAngle += splitAngle;
  2346. if (nowAngle >= 2) {
  2347. nowAngle = nowAngle % 2;
  2348. }
  2349. nowNumber += splitNumber;
  2350. }
  2351. }
  2352. function drawRadarLabel(angleList, radius, centerPosition, opts, config, context) {
  2353. var radarOption = opts.extra.radar || {};
  2354. angleList.forEach(function(angle, index) {
  2355. if(radarOption.labelPointShow === true && opts.categories[index] !== ''){
  2356. var posPoint = {
  2357. x: radius * Math.cos(angle),
  2358. y: radius * Math.sin(angle)
  2359. };
  2360. var posPointAxis = convertCoordinateOrigin(posPoint.x, posPoint.y, centerPosition);
  2361. context.setFillStyle(radarOption.labelPointColor);
  2362. context.beginPath();
  2363. context.arc(posPointAxis.x, posPointAxis.y, radarOption.labelPointRadius * opts.pix, 0, 2 * Math.PI, false);
  2364. context.closePath();
  2365. context.fill();
  2366. }
  2367. if(radarOption.labelShow === true){
  2368. var pos = {
  2369. x: (radius + config.radarLabelTextMargin * opts.pix) * Math.cos(angle),
  2370. y: (radius + config.radarLabelTextMargin * opts.pix) * Math.sin(angle)
  2371. };
  2372. var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition);
  2373. var startX = posRelativeCanvas.x;
  2374. var startY = posRelativeCanvas.y;
  2375. if (util.approximatelyEqual(pos.x, 0)) {
  2376. startX -= measureText(opts.categories[index] || '', config.fontSize, context) / 2;
  2377. } else if (pos.x < 0) {
  2378. startX -= measureText(opts.categories[index] || '', config.fontSize, context);
  2379. }
  2380. context.beginPath();
  2381. context.setFontSize(config.fontSize);
  2382. context.setFillStyle(radarOption.labelColor || opts.fontColor);
  2383. context.fillText(opts.categories[index] || '', startX, startY + config.fontSize / 2);
  2384. context.closePath();
  2385. context.stroke();
  2386. }
  2387. });
  2388. }
  2389. function drawPieText(series, opts, config, context, radius, center) {
  2390. var lineRadius = config.pieChartLinePadding;
  2391. var textObjectCollection = [];
  2392. var lastTextObject = null;
  2393. var seriesConvert = series.map(function(item,index) {
  2394. var text = item.formatter ? item.formatter(item,index,series,opts) : util.toFixed(item._proportion_.toFixed(4) * 100) + '%';
  2395. text = item.labelText ? item.labelText : text;
  2396. var arc = 2 * Math.PI - (item._start_ + 2 * Math.PI * item._proportion_ / 2);
  2397. if (item._rose_proportion_) {
  2398. arc = 2 * Math.PI - (item._start_ + 2 * Math.PI * item._rose_proportion_ / 2);
  2399. }
  2400. var color = item.color;
  2401. var radius = item._radius_;
  2402. return {
  2403. arc: arc,
  2404. text: text,
  2405. color: color,
  2406. radius: radius,
  2407. textColor: item.textColor,
  2408. textSize: item.textSize,
  2409. labelShow: item.labelShow
  2410. };
  2411. });
  2412. for (let i = 0; i < seriesConvert.length; i++) {
  2413. let item = seriesConvert[i];
  2414. // line end
  2415. let orginX1 = Math.cos(item.arc) * (item.radius + lineRadius);
  2416. let orginY1 = Math.sin(item.arc) * (item.radius + lineRadius);
  2417. // line start
  2418. let orginX2 = Math.cos(item.arc) * item.radius;
  2419. let orginY2 = Math.sin(item.arc) * item.radius;
  2420. // text start
  2421. let orginX3 = orginX1 >= 0 ? orginX1 + config.pieChartTextPadding : orginX1 - config.pieChartTextPadding;
  2422. let orginY3 = orginY1;
  2423. let textWidth = measureText(item.text, item.textSize * opts.pix || config.fontSize, context);
  2424. let startY = orginY3;
  2425. if (lastTextObject && util.isSameXCoordinateArea(lastTextObject.start, {
  2426. x: orginX3
  2427. })) {
  2428. if (orginX3 > 0) {
  2429. startY = Math.min(orginY3, lastTextObject.start.y);
  2430. } else if (orginX1 < 0) {
  2431. startY = Math.max(orginY3, lastTextObject.start.y);
  2432. } else {
  2433. if (orginY3 > 0) {
  2434. startY = Math.max(orginY3, lastTextObject.start.y);
  2435. } else {
  2436. startY = Math.min(orginY3, lastTextObject.start.y);
  2437. }
  2438. }
  2439. }
  2440. if (orginX3 < 0) {
  2441. orginX3 -= textWidth;
  2442. }
  2443. let textObject = {
  2444. lineStart: {
  2445. x: orginX2,
  2446. y: orginY2
  2447. },
  2448. lineEnd: {
  2449. x: orginX1,
  2450. y: orginY1
  2451. },
  2452. start: {
  2453. x: orginX3,
  2454. y: startY
  2455. },
  2456. width: textWidth,
  2457. height: config.fontSize,
  2458. text: item.text,
  2459. color: item.color,
  2460. textColor: item.textColor,
  2461. textSize: item.textSize
  2462. };
  2463. lastTextObject = avoidCollision(textObject, lastTextObject);
  2464. textObjectCollection.push(lastTextObject);
  2465. }
  2466. for (let i = 0; i < textObjectCollection.length; i++) {
  2467. if(seriesConvert[i].labelShow === false){
  2468. continue;
  2469. }
  2470. let item = textObjectCollection[i];
  2471. let lineStartPoistion = convertCoordinateOrigin(item.lineStart.x, item.lineStart.y, center);
  2472. let lineEndPoistion = convertCoordinateOrigin(item.lineEnd.x, item.lineEnd.y, center);
  2473. let textPosition = convertCoordinateOrigin(item.start.x, item.start.y, center);
  2474. context.setLineWidth(1 * opts.pix);
  2475. context.setFontSize(item.textSize * opts.pix || config.fontSize);
  2476. context.beginPath();
  2477. context.setStrokeStyle(item.color);
  2478. context.setFillStyle(item.color);
  2479. context.moveTo(lineStartPoistion.x, lineStartPoistion.y);
  2480. let curveStartX = item.start.x < 0 ? textPosition.x + item.width : textPosition.x;
  2481. let textStartX = item.start.x < 0 ? textPosition.x - 5 : textPosition.x + 5;
  2482. context.quadraticCurveTo(lineEndPoistion.x, lineEndPoistion.y, curveStartX, textPosition.y);
  2483. context.moveTo(lineStartPoistion.x, lineStartPoistion.y);
  2484. context.stroke();
  2485. context.closePath();
  2486. context.beginPath();
  2487. context.moveTo(textPosition.x + item.width, textPosition.y);
  2488. context.arc(curveStartX, textPosition.y, 2 * opts.pix, 0, 2 * Math.PI);
  2489. context.closePath();
  2490. context.fill();
  2491. context.beginPath();
  2492. context.setFontSize(item.textSize * opts.pix || config.fontSize);
  2493. context.setFillStyle(item.textColor || opts.fontColor);
  2494. context.fillText(item.text, textStartX, textPosition.y + 3);
  2495. context.closePath();
  2496. context.stroke();
  2497. context.closePath();
  2498. }
  2499. }
  2500. function drawToolTipSplitLine(offsetX, opts, config, context) {
  2501. var toolTipOption = opts.extra.tooltip || {};
  2502. toolTipOption.gridType = toolTipOption.gridType == undefined ? 'solid' : toolTipOption.gridType;
  2503. toolTipOption.dashLength = toolTipOption.dashLength == undefined ? 4 : toolTipOption.dashLength;
  2504. var startY = opts.area[0];
  2505. var endY = opts.height - opts.area[2];
  2506. if (toolTipOption.gridType == 'dash') {
  2507. context.setLineDash([toolTipOption.dashLength, toolTipOption.dashLength]);
  2508. }
  2509. context.setStrokeStyle(toolTipOption.gridColor || '#cccccc');
  2510. context.setLineWidth(1 * opts.pix);
  2511. context.beginPath();
  2512. context.moveTo(offsetX, startY);
  2513. context.lineTo(offsetX, endY);
  2514. context.stroke();
  2515. context.setLineDash([]);
  2516. if (toolTipOption.xAxisLabel) {
  2517. let labelText = opts.categories[opts.tooltip.index];
  2518. context.setFontSize(config.fontSize);
  2519. let textWidth = measureText(labelText, config.fontSize, context);
  2520. let textX = offsetX - 0.5 * textWidth;
  2521. let textY = endY + 2 * opts.pix;
  2522. context.beginPath();
  2523. context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity));
  2524. context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
  2525. context.setLineWidth(1 * opts.pix);
  2526. context.rect(textX - toolTipOption.boxPadding * opts.pix, textY, textWidth + 2 * toolTipOption.boxPadding * opts.pix, config.fontSize + 2 * toolTipOption.boxPadding * opts.pix);
  2527. context.closePath();
  2528. context.stroke();
  2529. context.fill();
  2530. context.beginPath();
  2531. context.setFontSize(config.fontSize);
  2532. context.setFillStyle(toolTipOption.labelFontColor || opts.fontColor);
  2533. context.fillText(String(labelText), textX, textY + toolTipOption.boxPadding * opts.pix + config.fontSize);
  2534. context.closePath();
  2535. context.stroke();
  2536. }
  2537. }
  2538. function drawMarkLine(opts, config, context) {
  2539. let markLineOption = assign({}, {
  2540. type: 'solid',
  2541. dashLength: 4,
  2542. data: []
  2543. }, opts.extra.markLine);
  2544. let startX = opts.area[3];
  2545. let endX = opts.width - opts.area[1];
  2546. let points = calMarkLineData(markLineOption.data, opts);
  2547. for (let i = 0; i < points.length; i++) {
  2548. let item = assign({}, {
  2549. lineColor: '#DE4A42',
  2550. showLabel: false,
  2551. labelFontSize: 13,
  2552. labelPadding: 6,
  2553. labelFontColor: '#666666',
  2554. labelBgColor: '#DFE8FF',
  2555. labelBgOpacity: 0.8,
  2556. labelAlign: 'left',
  2557. labelOffsetX: 0,
  2558. labelOffsetY: 0,
  2559. }, points[i]);
  2560. if (markLineOption.type == 'dash') {
  2561. context.setLineDash([markLineOption.dashLength, markLineOption.dashLength]);
  2562. }
  2563. context.setStrokeStyle(item.lineColor);
  2564. context.setLineWidth(1 * opts.pix);
  2565. context.beginPath();
  2566. context.moveTo(startX, item.y);
  2567. context.lineTo(endX, item.y);
  2568. context.stroke();
  2569. context.setLineDash([]);
  2570. if (item.showLabel) {
  2571. let fontSize = item.labelFontSize * opts.pix;
  2572. let labelText = item.labelText ? item.labelText : item.value;
  2573. context.setFontSize(fontSize);
  2574. let textWidth = measureText(labelText, fontSize, context);
  2575. let bgWidth = textWidth + item.labelPadding * opts.pix * 2;
  2576. let bgStartX = item.labelAlign == 'left' ? opts.area[3] - bgWidth : opts.width - opts.area[1];
  2577. bgStartX += item.labelOffsetX;
  2578. let bgStartY = item.y - 0.5 * fontSize - item.labelPadding * opts.pix;
  2579. bgStartY += item.labelOffsetY;
  2580. let textX = bgStartX + item.labelPadding * opts.pix;
  2581. let textY = item.y;
  2582. context.setFillStyle(hexToRgb(item.labelBgColor, item.labelBgOpacity));
  2583. context.setStrokeStyle(item.labelBgColor);
  2584. context.setLineWidth(1 * opts.pix);
  2585. context.beginPath();
  2586. context.rect(bgStartX, bgStartY, bgWidth, fontSize + 2 * item.labelPadding * opts.pix);
  2587. context.closePath();
  2588. context.stroke();
  2589. context.fill();
  2590. context.setFontSize(fontSize);
  2591. context.setTextAlign('left');
  2592. context.setFillStyle(item.labelFontColor);
  2593. context.fillText(String(labelText), textX, bgStartY + fontSize + item.labelPadding * opts.pix/2);
  2594. context.stroke();
  2595. context.setTextAlign('left');
  2596. }
  2597. }
  2598. }
  2599. function drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints) {
  2600. var toolTipOption = assign({}, {
  2601. gridType: 'solid',
  2602. dashLength: 4
  2603. }, opts.extra.tooltip);
  2604. var startX = opts.area[3];
  2605. var endX = opts.width - opts.area[1];
  2606. if (toolTipOption.gridType == 'dash') {
  2607. context.setLineDash([toolTipOption.dashLength, toolTipOption.dashLength]);
  2608. }
  2609. context.setStrokeStyle(toolTipOption.gridColor || '#cccccc');
  2610. context.setLineWidth(1 * opts.pix);
  2611. context.beginPath();
  2612. context.moveTo(startX, opts.tooltip.offset.y);
  2613. context.lineTo(endX, opts.tooltip.offset.y);
  2614. context.stroke();
  2615. context.setLineDash([]);
  2616. if (toolTipOption.yAxisLabel) {
  2617. let boxPadding = toolTipOption.boxPadding * opts.pix;
  2618. let labelText = calTooltipYAxisData(opts.tooltip.offset.y, opts.series, opts, config, eachSpacing);
  2619. let widthArr = opts.chartData.yAxisData.yAxisWidth;
  2620. let tStartLeft = opts.area[3];
  2621. let tStartRight = opts.width - opts.area[1];
  2622. for (let i = 0; i < labelText.length; i++) {
  2623. context.setFontSize(toolTipOption.fontSize * opts.pix);
  2624. let textWidth = measureText(labelText[i], toolTipOption.fontSize * opts.pix, context);
  2625. let bgStartX, bgEndX, bgWidth;
  2626. if (widthArr[i].position == 'left') {
  2627. bgStartX = tStartLeft - (textWidth + boxPadding * 2) - 2 * opts.pix;
  2628. bgEndX = Math.max(bgStartX, bgStartX + textWidth + boxPadding * 2);
  2629. } else {
  2630. bgStartX = tStartRight + 2 * opts.pix;
  2631. bgEndX = Math.max(bgStartX + widthArr[i].width, bgStartX + textWidth + boxPadding * 2);
  2632. }
  2633. bgWidth = bgEndX - bgStartX;
  2634. let textX = bgStartX + (bgWidth - textWidth) / 2;
  2635. let textY = opts.tooltip.offset.y;
  2636. context.beginPath();
  2637. context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity));
  2638. context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
  2639. context.setLineWidth(1 * opts.pix);
  2640. context.rect(bgStartX, textY - 0.5 * config.fontSize - boxPadding, bgWidth, config.fontSize + 2 * boxPadding);
  2641. context.closePath();
  2642. context.stroke();
  2643. context.fill();
  2644. context.beginPath();
  2645. context.setFontSize(config.fontSize);
  2646. context.setFillStyle(toolTipOption.labelFontColor || opts.fontColor);
  2647. context.fillText(labelText[i], textX, textY + 0.5 * config.fontSize);
  2648. context.closePath();
  2649. context.stroke();
  2650. if (widthArr[i].position == 'left') {
  2651. tStartLeft -= (widthArr[i].width + opts.yAxis.padding * opts.pix);
  2652. } else {
  2653. tStartRight += widthArr[i].width + opts.yAxis.padding * opts.pix;
  2654. }
  2655. }
  2656. }
  2657. }
  2658. function drawToolTipSplitArea(offsetX, opts, config, context, eachSpacing) {
  2659. var toolTipOption = assign({}, {
  2660. activeBgColor: '#000000',
  2661. activeBgOpacity: 0.08,
  2662. activeWidth: eachSpacing
  2663. }, opts.extra.column);
  2664. toolTipOption.activeWidth = toolTipOption.activeWidth > eachSpacing ? eachSpacing : toolTipOption.activeWidth;
  2665. var startY = opts.area[0];
  2666. var endY = opts.height - opts.area[2];
  2667. context.beginPath();
  2668. context.setFillStyle(hexToRgb(toolTipOption.activeBgColor, toolTipOption.activeBgOpacity));
  2669. context.rect(offsetX - toolTipOption.activeWidth / 2, startY, toolTipOption.activeWidth, endY - startY);
  2670. context.closePath();
  2671. context.fill();
  2672. context.setFillStyle("#FFFFFF");
  2673. }
  2674. function drawBarToolTipSplitArea(offsetX, opts, config, context, eachSpacing) {
  2675. var toolTipOption = assign({}, {
  2676. activeBgColor: '#000000',
  2677. activeBgOpacity: 0.08
  2678. }, opts.extra.bar);
  2679. var startX = opts.area[3];
  2680. var endX = opts.width - opts.area[1];
  2681. context.beginPath();
  2682. context.setFillStyle(hexToRgb(toolTipOption.activeBgColor, toolTipOption.activeBgOpacity));
  2683. context.rect( startX ,offsetX - eachSpacing / 2 , endX - startX,eachSpacing);
  2684. context.closePath();
  2685. context.fill();
  2686. context.setFillStyle("#FFFFFF");
  2687. }
  2688. function drawToolTip(textList, offset, opts, config, context, eachSpacing, xAxisPoints) {
  2689. var toolTipOption = assign({}, {
  2690. showBox: true,
  2691. showArrow: true,
  2692. showCategory: false,
  2693. bgColor: '#000000',
  2694. bgOpacity: 0.7,
  2695. borderColor: '#000000',
  2696. borderWidth: 0,
  2697. borderRadius: 0,
  2698. borderOpacity: 0.7,
  2699. boxPadding: 3,
  2700. fontColor: '#FFFFFF',
  2701. fontSize: 13,
  2702. lineHeight: 20,
  2703. legendShow: true,
  2704. legendShape: 'auto',
  2705. splitLine: true,
  2706. }, opts.extra.tooltip);
  2707. if(toolTipOption.showCategory==true && opts.categories){
  2708. textList.unshift({text:opts.categories[opts.tooltip.index],color:null})
  2709. }
  2710. var fontSize = toolTipOption.fontSize * opts.pix;
  2711. var lineHeight = toolTipOption.lineHeight * opts.pix;
  2712. var boxPadding = toolTipOption.boxPadding * opts.pix;
  2713. var legendWidth = fontSize;
  2714. var legendMarginRight = 5 * opts.pix;
  2715. if(toolTipOption.legendShow == false){
  2716. legendWidth = 0;
  2717. legendMarginRight = 0;
  2718. }
  2719. var arrowWidth = toolTipOption.showArrow ? 8 * opts.pix : 0;
  2720. var isOverRightBorder = false;
  2721. if (opts.type == 'line' || opts.type == 'mount' || opts.type == 'area' || opts.type == 'candle' || opts.type == 'mix') {
  2722. if (toolTipOption.splitLine == true) {
  2723. drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context);
  2724. }
  2725. }
  2726. offset = assign({
  2727. x: 0,
  2728. y: 0
  2729. }, offset);
  2730. offset.y -= 8 * opts.pix;
  2731. var textWidth = textList.map(function(item) {
  2732. return measureText(item.text, fontSize, context);
  2733. });
  2734. var toolTipWidth = legendWidth + legendMarginRight + 4 * boxPadding + Math.max.apply(null, textWidth);
  2735. var toolTipHeight = 2 * boxPadding + textList.length * lineHeight;
  2736. if (toolTipOption.showBox == false) {
  2737. return
  2738. }
  2739. // if beyond the right border
  2740. if (offset.x - Math.abs(opts._scrollDistance_ || 0) + arrowWidth + toolTipWidth > opts.width) {
  2741. isOverRightBorder = true;
  2742. }
  2743. if (toolTipHeight + offset.y > opts.height) {
  2744. offset.y = opts.height - toolTipHeight;
  2745. }
  2746. // draw background rect
  2747. context.beginPath();
  2748. context.setFillStyle(hexToRgb(toolTipOption.bgColor, toolTipOption.bgOpacity));
  2749. context.setLineWidth(toolTipOption.borderWidth * opts.pix);
  2750. context.setStrokeStyle(hexToRgb(toolTipOption.borderColor, toolTipOption.borderOpacity));
  2751. var radius = toolTipOption.borderRadius;
  2752. if (isOverRightBorder) {
  2753. // 增加左侧仍然超出的判断
  2754. if(toolTipWidth + arrowWidth > opts.width){
  2755. offset.x = opts.width + Math.abs(opts._scrollDistance_ || 0) + arrowWidth + (toolTipWidth - opts.width)
  2756. }
  2757. if(toolTipWidth > offset.x){
  2758. offset.x = opts.width + Math.abs(opts._scrollDistance_ || 0) + arrowWidth + (toolTipWidth - opts.width)
  2759. }
  2760. if (toolTipOption.showArrow) {
  2761. context.moveTo(offset.x, offset.y + 10 * opts.pix);
  2762. context.lineTo(offset.x - arrowWidth, offset.y + 10 * opts.pix + 5 * opts.pix);
  2763. }
  2764. context.arc(offset.x - arrowWidth - radius, offset.y + toolTipHeight - radius, radius, 0, Math.PI / 2, false);
  2765. context.arc(offset.x - arrowWidth - Math.round(toolTipWidth) + radius, offset.y + toolTipHeight - radius, radius,
  2766. Math.PI / 2, Math.PI, false);
  2767. context.arc(offset.x - arrowWidth - Math.round(toolTipWidth) + radius, offset.y + radius, radius, -Math.PI, -Math.PI / 2, false);
  2768. context.arc(offset.x - arrowWidth - radius, offset.y + radius, radius, -Math.PI / 2, 0, false);
  2769. if (toolTipOption.showArrow) {
  2770. context.lineTo(offset.x - arrowWidth, offset.y + 10 * opts.pix - 5 * opts.pix);
  2771. context.lineTo(offset.x, offset.y + 10 * opts.pix);
  2772. }
  2773. } else {
  2774. if (toolTipOption.showArrow) {
  2775. context.moveTo(offset.x, offset.y + 10 * opts.pix);
  2776. context.lineTo(offset.x + arrowWidth, offset.y + 10 * opts.pix - 5 * opts.pix);
  2777. }
  2778. context.arc(offset.x + arrowWidth + radius, offset.y + radius, radius, -Math.PI, -Math.PI / 2, false);
  2779. context.arc(offset.x + arrowWidth + Math.round(toolTipWidth) - radius, offset.y + radius, radius, -Math.PI / 2, 0,
  2780. false);
  2781. context.arc(offset.x + arrowWidth + Math.round(toolTipWidth) - radius, offset.y + toolTipHeight - radius, radius, 0,
  2782. Math.PI / 2, false);
  2783. context.arc(offset.x + arrowWidth + radius, offset.y + toolTipHeight - radius, radius, Math.PI / 2, Math.PI, false);
  2784. if (toolTipOption.showArrow) {
  2785. context.lineTo(offset.x + arrowWidth, offset.y + 10 * opts.pix + 5 * opts.pix);
  2786. context.lineTo(offset.x, offset.y + 10 * opts.pix);
  2787. }
  2788. }
  2789. context.closePath();
  2790. context.fill();
  2791. if (toolTipOption.borderWidth > 0) {
  2792. context.stroke();
  2793. }
  2794. // draw legend
  2795. if(toolTipOption.legendShow){
  2796. textList.forEach(function(item, index) {
  2797. if (item.color !== null) {
  2798. context.beginPath();
  2799. context.setFillStyle(item.color);
  2800. var startX = offset.x + arrowWidth + 2 * boxPadding;
  2801. var startY = offset.y + (lineHeight - fontSize) / 2 + lineHeight * index + boxPadding + 1;
  2802. if (isOverRightBorder) {
  2803. startX = offset.x - toolTipWidth - arrowWidth + 2 * boxPadding;
  2804. }
  2805. switch (item.legendShape) {
  2806. case 'line':
  2807. context.moveTo(startX, startY + 0.5 * legendWidth - 2 * opts.pix);
  2808. context.fillRect(startX, startY + 0.5 * legendWidth - 2 * opts.pix, legendWidth, 4 * opts.pix);
  2809. break;
  2810. case 'triangle':
  2811. context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
  2812. context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix);
  2813. context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix);
  2814. context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
  2815. break;
  2816. case 'diamond':
  2817. context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
  2818. context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * legendWidth);
  2819. context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix);
  2820. context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * legendWidth);
  2821. context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
  2822. break;
  2823. case 'circle':
  2824. context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth);
  2825. context.arc(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth, 5 * opts.pix, 0, 2 * Math.PI);
  2826. break;
  2827. case 'rect':
  2828. context.moveTo(startX, startY + 0.5 * legendWidth - 5 * opts.pix);
  2829. context.fillRect(startX, startY + 0.5 * legendWidth - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
  2830. break;
  2831. case 'square':
  2832. context.moveTo(startX + 2 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
  2833. context.fillRect(startX + 2 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix, 10 * opts.pix, 10 * opts.pix);
  2834. break;
  2835. default:
  2836. context.moveTo(startX, startY + 0.5 * legendWidth - 5 * opts.pix);
  2837. context.fillRect(startX, startY + 0.5 * legendWidth - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
  2838. }
  2839. context.closePath();
  2840. context.fill();
  2841. }
  2842. });
  2843. }
  2844. // draw text list
  2845. textList.forEach(function(item, index) {
  2846. var startX = offset.x + arrowWidth + 2 * boxPadding + legendWidth + legendMarginRight;
  2847. if (isOverRightBorder) {
  2848. startX = offset.x - toolTipWidth - arrowWidth + 2 * boxPadding + legendWidth + legendMarginRight;
  2849. }
  2850. var startY = offset.y + lineHeight * index + (lineHeight - fontSize)/2 - 1 + boxPadding + fontSize;
  2851. context.beginPath();
  2852. context.setFontSize(fontSize);
  2853. context.setTextBaseline('normal');
  2854. context.setFillStyle(toolTipOption.fontColor);
  2855. context.fillText(item.text, startX, startY);
  2856. context.closePath();
  2857. context.stroke();
  2858. });
  2859. }
  2860. function drawColumnDataPoints(series, opts, config, context) {
  2861. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  2862. let xAxisData = opts.chartData.xAxisData,
  2863. xAxisPoints = xAxisData.xAxisPoints,
  2864. eachSpacing = xAxisData.eachSpacing;
  2865. let columnOption = assign({}, {
  2866. type: 'group',
  2867. width: eachSpacing / 2,
  2868. meterBorder: 4,
  2869. meterFillColor: '#FFFFFF',
  2870. barBorderCircle: false,
  2871. barBorderRadius: [],
  2872. seriesGap: 2,
  2873. linearType: 'none',
  2874. linearOpacity: 1,
  2875. customColor: [],
  2876. colorStop: 0,
  2877. labelPosition: 'outside'
  2878. }, opts.extra.column);
  2879. let calPoints = [];
  2880. context.save();
  2881. let leftNum = -2;
  2882. let rightNum = xAxisPoints.length + 2;
  2883. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  2884. context.translate(opts._scrollDistance_, 0);
  2885. leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2;
  2886. rightNum = leftNum + opts.xAxis.itemCount + 4;
  2887. }
  2888. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  2889. drawToolTipSplitArea(opts.tooltip.offset.x, opts, config, context, eachSpacing);
  2890. }
  2891. columnOption.customColor = fillCustomColor(columnOption.linearType, columnOption.customColor, series, config);
  2892. series.forEach(function(eachSeries, seriesIndex) {
  2893. let ranges, minRange, maxRange;
  2894. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2895. minRange = ranges.pop();
  2896. maxRange = ranges.shift();
  2897. // 计算0轴坐标
  2898. let spacingValid = opts.height - opts.area[0] - opts.area[2];
  2899. let zeroHeight = spacingValid * (0 - minRange) / (maxRange - minRange);
  2900. let zeroPoints = opts.height - Math.round(zeroHeight) - opts.area[2];
  2901. eachSeries.zeroPoints = zeroPoints;
  2902. var data = eachSeries.data;
  2903. switch (columnOption.type) {
  2904. case 'group':
  2905. var points = getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, zeroPoints, process);
  2906. var tooltipPoints = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series, process);
  2907. calPoints.push(tooltipPoints);
  2908. points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
  2909. for (let i = 0; i < points.length; i++) {
  2910. let item = points[i];
  2911. //fix issues/I27B1N yyoinge & Joeshu
  2912. if (item !== null && i > leftNum && i < rightNum) {
  2913. var startX = item.x - item.width / 2;
  2914. var height = opts.height - item.y - opts.area[2];
  2915. context.beginPath();
  2916. var fillColor = item.color || eachSeries.color
  2917. var strokeColor = item.color || eachSeries.color
  2918. if (columnOption.linearType !== 'none') {
  2919. var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
  2920. //透明渐变
  2921. if (columnOption.linearType == 'opacity') {
  2922. grd.addColorStop(0, hexToRgb(fillColor, columnOption.linearOpacity));
  2923. grd.addColorStop(1, hexToRgb(fillColor, 1));
  2924. } else {
  2925. grd.addColorStop(0, hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity));
  2926. grd.addColorStop(columnOption.colorStop, hexToRgb(columnOption.customColor[eachSeries.linearIndex],columnOption.linearOpacity));
  2927. grd.addColorStop(1, hexToRgb(fillColor, 1));
  2928. }
  2929. fillColor = grd
  2930. }
  2931. // 圆角边框
  2932. if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle === true) {
  2933. const left = startX;
  2934. const top = item.y > zeroPoints ? zeroPoints : item.y;
  2935. const width = item.width;
  2936. const height = Math.abs(zeroPoints - item.y);
  2937. if (columnOption.barBorderCircle) {
  2938. columnOption.barBorderRadius = [width / 2, width / 2, 0, 0];
  2939. }
  2940. if(item.y > zeroPoints){
  2941. columnOption.barBorderRadius = [0, 0,width / 2, width / 2];
  2942. }
  2943. let [r0, r1, r2, r3] = columnOption.barBorderRadius;
  2944. let minRadius = Math.min(width/2,height/2);
  2945. r0 = r0 > minRadius ? minRadius : r0;
  2946. r1 = r1 > minRadius ? minRadius : r1;
  2947. r2 = r2 > minRadius ? minRadius : r2;
  2948. r3 = r3 > minRadius ? minRadius : r3;
  2949. r0 = r0 < 0 ? 0 : r0;
  2950. r1 = r1 < 0 ? 0 : r1;
  2951. r2 = r2 < 0 ? 0 : r2;
  2952. r3 = r3 < 0 ? 0 : r3;
  2953. context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2);
  2954. context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0);
  2955. context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2);
  2956. context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI);
  2957. } else {
  2958. context.moveTo(startX, item.y);
  2959. context.lineTo(startX + item.width, item.y);
  2960. context.lineTo(startX + item.width, zeroPoints);
  2961. context.lineTo(startX, zeroPoints);
  2962. context.lineTo(startX, item.y);
  2963. context.setLineWidth(1)
  2964. context.setStrokeStyle(strokeColor);
  2965. }
  2966. context.setFillStyle(fillColor);
  2967. context.closePath();
  2968. //context.stroke();
  2969. context.fill();
  2970. }
  2971. };
  2972. break;
  2973. case 'stack':
  2974. // 绘制堆叠数据图
  2975. var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series, process);
  2976. calPoints.push(points);
  2977. points = fixColumeStackData(points, eachSpacing, series.length, seriesIndex, config, opts, series);
  2978. for (let i = 0; i < points.length; i++) {
  2979. let item = points[i];
  2980. if (item !== null && i > leftNum && i < rightNum) {
  2981. context.beginPath();
  2982. var fillColor = item.color || eachSeries.color;
  2983. var startX = item.x - item.width / 2 + 1;
  2984. var height = opts.height - item.y - opts.area[2];
  2985. var height0 = opts.height - item.y0 - opts.area[2];
  2986. if (seriesIndex > 0) {
  2987. height -= height0;
  2988. }
  2989. context.setFillStyle(fillColor);
  2990. context.moveTo(startX, item.y);
  2991. context.fillRect(startX, item.y, item.width, height);
  2992. context.closePath();
  2993. context.fill();
  2994. }
  2995. };
  2996. break;
  2997. case 'meter':
  2998. // 绘制温度计数据图
  2999. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3000. calPoints.push(points);
  3001. points = fixColumeMeterData(points, eachSpacing, series.length, seriesIndex, config, opts, columnOption.meterBorder);
  3002. for (let i = 0; i < points.length; i++) {
  3003. let item = points[i];
  3004. if (item !== null && i > leftNum && i < rightNum) {
  3005. //画背景颜色
  3006. context.beginPath();
  3007. if (seriesIndex == 0 && columnOption.meterBorder > 0) {
  3008. context.setStrokeStyle(eachSeries.color);
  3009. context.setLineWidth(columnOption.meterBorder * opts.pix);
  3010. }
  3011. if(seriesIndex == 0){
  3012. context.setFillStyle(columnOption.meterFillColor);
  3013. }else{
  3014. context.setFillStyle(item.color || eachSeries.color);
  3015. }
  3016. var startX = item.x - item.width / 2;
  3017. var height = opts.height - item.y - opts.area[2];
  3018. if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle === true) {
  3019. const left = startX;
  3020. const top = item.y;
  3021. const width = item.width;
  3022. const height = zeroPoints - item.y;
  3023. if (columnOption.barBorderCircle) {
  3024. columnOption.barBorderRadius = [width / 2, width / 2, 0, 0];
  3025. }
  3026. let [r0, r1, r2, r3] = columnOption.barBorderRadius;
  3027. let minRadius = Math.min(width/2,height/2);
  3028. r0 = r0 > minRadius ? minRadius : r0;
  3029. r1 = r1 > minRadius ? minRadius : r1;
  3030. r2 = r2 > minRadius ? minRadius : r2;
  3031. r3 = r3 > minRadius ? minRadius : r3;
  3032. r0 = r0 < 0 ? 0 : r0;
  3033. r1 = r1 < 0 ? 0 : r1;
  3034. r2 = r2 < 0 ? 0 : r2;
  3035. r3 = r3 < 0 ? 0 : r3;
  3036. context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2);
  3037. context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0);
  3038. context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2);
  3039. context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI);
  3040. context.fill();
  3041. }else{
  3042. context.moveTo(startX, item.y);
  3043. context.lineTo(startX + item.width, item.y);
  3044. context.lineTo(startX + item.width, zeroPoints);
  3045. context.lineTo(startX, zeroPoints);
  3046. context.lineTo(startX, item.y);
  3047. context.fill();
  3048. }
  3049. if (seriesIndex == 0 && columnOption.meterBorder > 0) {
  3050. context.closePath();
  3051. context.stroke();
  3052. }
  3053. }
  3054. }
  3055. break;
  3056. }
  3057. });
  3058. if (opts.dataLabel !== false && process === 1) {
  3059. series.forEach(function(eachSeries, seriesIndex) {
  3060. let ranges, minRange, maxRange;
  3061. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  3062. minRange = ranges.pop();
  3063. maxRange = ranges.shift();
  3064. var data = eachSeries.data;
  3065. switch (columnOption.type) {
  3066. case 'group':
  3067. var points = getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3068. points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
  3069. drawColumePointText(points, eachSeries, config, context, opts);
  3070. break;
  3071. case 'stack':
  3072. var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series, process);
  3073. drawColumePointText(points, eachSeries, config, context, opts);
  3074. break;
  3075. case 'meter':
  3076. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3077. drawColumePointText(points, eachSeries, config, context, opts);
  3078. break;
  3079. }
  3080. });
  3081. }
  3082. context.restore();
  3083. return {
  3084. xAxisPoints: xAxisPoints,
  3085. calPoints: calPoints,
  3086. eachSpacing: eachSpacing
  3087. };
  3088. }
  3089. function drawMountDataPoints(series, opts, config, context) {
  3090. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3091. let xAxisData = opts.chartData.xAxisData,
  3092. xAxisPoints = xAxisData.xAxisPoints,
  3093. eachSpacing = xAxisData.eachSpacing;
  3094. let mountOption = assign({}, {
  3095. type: 'mount',
  3096. widthRatio: 1,
  3097. borderWidth: 1,
  3098. barBorderCircle: false,
  3099. barBorderRadius: [],
  3100. linearType: 'none',
  3101. linearOpacity: 1,
  3102. customColor: [],
  3103. colorStop: 0,
  3104. }, opts.extra.mount);
  3105. mountOption.widthRatio = mountOption.widthRatio <= 0 ? 0 : mountOption.widthRatio;
  3106. mountOption.widthRatio = mountOption.widthRatio >= 2 ? 2 : mountOption.widthRatio;
  3107. let calPoints = [];
  3108. context.save();
  3109. let leftNum = -2;
  3110. let rightNum = xAxisPoints.length + 2;
  3111. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  3112. context.translate(opts._scrollDistance_, 0);
  3113. leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2;
  3114. rightNum = leftNum + opts.xAxis.itemCount + 4;
  3115. }
  3116. mountOption.customColor = fillCustomColor(mountOption.linearType, mountOption.customColor, series, config);
  3117. let ranges, minRange, maxRange;
  3118. ranges = [].concat(opts.chartData.yAxisData.ranges[0]);
  3119. minRange = ranges.pop();
  3120. maxRange = ranges.shift();
  3121. // 计算0轴坐标
  3122. let spacingValid = opts.height - opts.area[0] - opts.area[2];
  3123. let zeroHeight = spacingValid * (0 - minRange) / (maxRange - minRange);
  3124. let zeroPoints = opts.height - Math.round(zeroHeight) - opts.area[2];
  3125. var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints, process);
  3126. switch (mountOption.type) {
  3127. case 'bar':
  3128. for (let i = 0; i < points.length; i++) {
  3129. let item = points[i];
  3130. if (item !== null && i > leftNum && i < rightNum) {
  3131. var startX = item.x - eachSpacing*mountOption.widthRatio/2;
  3132. var height = opts.height - item.y - opts.area[2];
  3133. context.beginPath();
  3134. var fillColor = item.color || series[i].color
  3135. var strokeColor = item.color || series[i].color
  3136. if (mountOption.linearType !== 'none') {
  3137. var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
  3138. //透明渐变
  3139. if (mountOption.linearType == 'opacity') {
  3140. grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
  3141. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3142. } else {
  3143. grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity));
  3144. grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex],mountOption.linearOpacity));
  3145. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3146. }
  3147. fillColor = grd
  3148. }
  3149. // 圆角边框
  3150. if ((mountOption.barBorderRadius && mountOption.barBorderRadius.length === 4) || mountOption.barBorderCircle === true) {
  3151. const left = startX;
  3152. const top = item.y > zeroPoints ? zeroPoints : item.y;
  3153. const width = item.width;
  3154. const height = Math.abs(zeroPoints - item.y);
  3155. if (mountOption.barBorderCircle) {
  3156. mountOption.barBorderRadius = [width / 2, width / 2, 0, 0];
  3157. }
  3158. if(item.y > zeroPoints){
  3159. mountOption.barBorderRadius = [0, 0,width / 2, width / 2];
  3160. }
  3161. let [r0, r1, r2, r3] = mountOption.barBorderRadius;
  3162. let minRadius = Math.min(width/2,height/2);
  3163. r0 = r0 > minRadius ? minRadius : r0;
  3164. r1 = r1 > minRadius ? minRadius : r1;
  3165. r2 = r2 > minRadius ? minRadius : r2;
  3166. r3 = r3 > minRadius ? minRadius : r3;
  3167. r0 = r0 < 0 ? 0 : r0;
  3168. r1 = r1 < 0 ? 0 : r1;
  3169. r2 = r2 < 0 ? 0 : r2;
  3170. r3 = r3 < 0 ? 0 : r3;
  3171. context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2);
  3172. context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0);
  3173. context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2);
  3174. context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI);
  3175. } else {
  3176. context.moveTo(startX, item.y);
  3177. context.lineTo(startX + item.width, item.y);
  3178. context.lineTo(startX + item.width, zeroPoints);
  3179. context.lineTo(startX, zeroPoints);
  3180. context.lineTo(startX, item.y);
  3181. }
  3182. context.setStrokeStyle(strokeColor);
  3183. context.setFillStyle(fillColor);
  3184. if(mountOption.borderWidth > 0){
  3185. context.setLineWidth(mountOption.borderWidth * opts.pix);
  3186. context.closePath();
  3187. context.stroke();
  3188. }
  3189. context.fill();
  3190. }
  3191. };
  3192. break;
  3193. case 'triangle':
  3194. for (let i = 0; i < points.length; i++) {
  3195. let item = points[i];
  3196. if (item !== null && i > leftNum && i < rightNum) {
  3197. var startX = item.x - eachSpacing*mountOption.widthRatio/2;
  3198. var height = opts.height - item.y - opts.area[2];
  3199. context.beginPath();
  3200. var fillColor = item.color || series[i].color
  3201. var strokeColor = item.color || series[i].color
  3202. if (mountOption.linearType !== 'none') {
  3203. var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
  3204. //透明渐变
  3205. if (mountOption.linearType == 'opacity') {
  3206. grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
  3207. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3208. } else {
  3209. grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity));
  3210. grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex],mountOption.linearOpacity));
  3211. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3212. }
  3213. fillColor = grd
  3214. }
  3215. context.moveTo(startX, zeroPoints);
  3216. context.lineTo(item.x, item.y);
  3217. context.lineTo(startX + item.width, zeroPoints);
  3218. context.setStrokeStyle(strokeColor);
  3219. context.setFillStyle(fillColor);
  3220. if(mountOption.borderWidth > 0){
  3221. context.setLineWidth(mountOption.borderWidth * opts.pix);
  3222. context.stroke();
  3223. }
  3224. context.fill();
  3225. }
  3226. };
  3227. break;
  3228. case 'mount':
  3229. for (let i = 0; i < points.length; i++) {
  3230. let item = points[i];
  3231. if (item !== null && i > leftNum && i < rightNum) {
  3232. var startX = item.x - eachSpacing*mountOption.widthRatio/2;
  3233. var height = opts.height - item.y - opts.area[2];
  3234. context.beginPath();
  3235. var fillColor = item.color || series[i].color
  3236. var strokeColor = item.color || series[i].color
  3237. if (mountOption.linearType !== 'none') {
  3238. var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
  3239. //透明渐变
  3240. if (mountOption.linearType == 'opacity') {
  3241. grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
  3242. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3243. } else {
  3244. grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity));
  3245. grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex],mountOption.linearOpacity));
  3246. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3247. }
  3248. fillColor = grd
  3249. }
  3250. context.moveTo(startX, zeroPoints);
  3251. context.bezierCurveTo(item.x - item.width/4, zeroPoints, item.x - item.width/4, item.y, item.x, item.y);
  3252. context.bezierCurveTo(item.x + item.width/4, item.y, item.x + item.width/4, zeroPoints, startX + item.width, zeroPoints);
  3253. context.setStrokeStyle(strokeColor);
  3254. context.setFillStyle(fillColor);
  3255. if(mountOption.borderWidth > 0){
  3256. context.setLineWidth(mountOption.borderWidth * opts.pix);
  3257. context.stroke();
  3258. }
  3259. context.fill();
  3260. }
  3261. };
  3262. break;
  3263. case 'sharp':
  3264. for (let i = 0; i < points.length; i++) {
  3265. let item = points[i];
  3266. if (item !== null && i > leftNum && i < rightNum) {
  3267. var startX = item.x - eachSpacing*mountOption.widthRatio/2;
  3268. var height = opts.height - item.y - opts.area[2];
  3269. context.beginPath();
  3270. var fillColor = item.color || series[i].color
  3271. var strokeColor = item.color || series[i].color
  3272. if (mountOption.linearType !== 'none') {
  3273. var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
  3274. //透明渐变
  3275. if (mountOption.linearType == 'opacity') {
  3276. grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
  3277. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3278. } else {
  3279. grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity));
  3280. grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex],mountOption.linearOpacity));
  3281. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3282. }
  3283. fillColor = grd
  3284. }
  3285. context.moveTo(startX, zeroPoints);
  3286. context.quadraticCurveTo(item.x - 0, zeroPoints - height/4, item.x, item.y);
  3287. context.quadraticCurveTo(item.x + 0, zeroPoints - height/4, startX + item.width, zeroPoints)
  3288. context.setStrokeStyle(strokeColor);
  3289. context.setFillStyle(fillColor);
  3290. if(mountOption.borderWidth > 0){
  3291. context.setLineWidth(mountOption.borderWidth * opts.pix);
  3292. context.stroke();
  3293. }
  3294. context.fill();
  3295. }
  3296. };
  3297. break;
  3298. }
  3299. if (opts.dataLabel !== false && process === 1) {
  3300. let ranges, minRange, maxRange;
  3301. ranges = [].concat(opts.chartData.yAxisData.ranges[0]);
  3302. minRange = ranges.pop();
  3303. maxRange = ranges.shift();
  3304. var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints, process);
  3305. drawMountPointText(points, series, config, context, opts, zeroPoints);
  3306. }
  3307. context.restore();
  3308. return {
  3309. xAxisPoints: xAxisPoints,
  3310. calPoints: points,
  3311. eachSpacing: eachSpacing
  3312. };
  3313. }
  3314. function drawBarDataPoints(series, opts, config, context) {
  3315. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3316. let yAxisPoints = [];
  3317. let eachSpacing = (opts.height - opts.area[0] - opts.area[2])/opts.categories.length;
  3318. for (let i = 0; i < opts.categories.length; i++) {
  3319. yAxisPoints.push(opts.area[0] + eachSpacing / 2 + eachSpacing * i);
  3320. }
  3321. let columnOption = assign({}, {
  3322. type: 'group',
  3323. width: eachSpacing / 2,
  3324. meterBorder: 4,
  3325. meterFillColor: '#FFFFFF',
  3326. barBorderCircle: false,
  3327. barBorderRadius: [],
  3328. seriesGap: 2,
  3329. linearType: 'none',
  3330. linearOpacity: 1,
  3331. customColor: [],
  3332. colorStop: 0,
  3333. }, opts.extra.bar);
  3334. let calPoints = [];
  3335. context.save();
  3336. let leftNum = -2;
  3337. let rightNum = yAxisPoints.length + 2;
  3338. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  3339. drawBarToolTipSplitArea(opts.tooltip.offset.y, opts, config, context, eachSpacing);
  3340. }
  3341. columnOption.customColor = fillCustomColor(columnOption.linearType, columnOption.customColor, series, config);
  3342. series.forEach(function(eachSeries, seriesIndex) {
  3343. let ranges, minRange, maxRange;
  3344. ranges = [].concat(opts.chartData.xAxisData.ranges);
  3345. maxRange = ranges.pop();
  3346. minRange = ranges.shift();
  3347. var data = eachSeries.data;
  3348. switch (columnOption.type) {
  3349. case 'group':
  3350. var points = getBarDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, process);
  3351. var tooltipPoints = getBarStackDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, seriesIndex, series, process);
  3352. calPoints.push(tooltipPoints);
  3353. points = fixBarData(points, eachSpacing, series.length, seriesIndex, config, opts);
  3354. for (let i = 0; i < points.length; i++) {
  3355. let item = points[i];
  3356. //fix issues/I27B1N yyoinge & Joeshu
  3357. if (item !== null && i > leftNum && i < rightNum) {
  3358. //var startX = item.x - item.width / 2;
  3359. var startX = opts.area[3];
  3360. var startY = item.y - item.width / 2;
  3361. var height = item.height;
  3362. context.beginPath();
  3363. var fillColor = item.color || eachSeries.color
  3364. var strokeColor = item.color || eachSeries.color
  3365. if (columnOption.linearType !== 'none') {
  3366. var grd = context.createLinearGradient(startX, item.y, item.x, item.y);
  3367. //透明渐变
  3368. if (columnOption.linearType == 'opacity') {
  3369. grd.addColorStop(0, hexToRgb(fillColor, columnOption.linearOpacity));
  3370. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3371. } else {
  3372. grd.addColorStop(0, hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity));
  3373. grd.addColorStop(columnOption.colorStop, hexToRgb(columnOption.customColor[eachSeries.linearIndex],columnOption.linearOpacity));
  3374. grd.addColorStop(1, hexToRgb(fillColor, 1));
  3375. }
  3376. fillColor = grd
  3377. }
  3378. // 圆角边框
  3379. if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle === true) {
  3380. const left = startX;
  3381. const width = item.width;
  3382. const top = item.y - item.width / 2;
  3383. const height = item.height;
  3384. if (columnOption.barBorderCircle) {
  3385. columnOption.barBorderRadius = [width / 2, width / 2, 0, 0];
  3386. }
  3387. let [r0, r1, r2, r3] = columnOption.barBorderRadius;
  3388. let minRadius = Math.min(width/2,height/2);
  3389. r0 = r0 > minRadius ? minRadius : r0;
  3390. r1 = r1 > minRadius ? minRadius : r1;
  3391. r2 = r2 > minRadius ? minRadius : r2;
  3392. r3 = r3 > minRadius ? minRadius : r3;
  3393. r0 = r0 < 0 ? 0 : r0;
  3394. r1 = r1 < 0 ? 0 : r1;
  3395. r2 = r2 < 0 ? 0 : r2;
  3396. r3 = r3 < 0 ? 0 : r3;
  3397. context.arc(left + r3, top + r3, r3, -Math.PI, -Math.PI / 2);
  3398. context.arc(item.x - r0, top + r0, r0, -Math.PI / 2, 0);
  3399. context.arc(item.x - r1, top + width - r1, r1, 0, Math.PI / 2);
  3400. context.arc(left + r2, top + width - r2, r2, Math.PI / 2, Math.PI);
  3401. } else {
  3402. context.moveTo(startX, startY);
  3403. context.lineTo(item.x, startY);
  3404. context.lineTo(item.x, startY + item.width);
  3405. context.lineTo(startX, startY + item.width);
  3406. context.lineTo(startX, startY);
  3407. context.setLineWidth(1)
  3408. context.setStrokeStyle(strokeColor);
  3409. }
  3410. context.setFillStyle(fillColor);
  3411. context.closePath();
  3412. //context.stroke();
  3413. context.fill();
  3414. }
  3415. };
  3416. break;
  3417. case 'stack':
  3418. // 绘制堆叠数据图
  3419. var points = getBarStackDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, seriesIndex, series, process);
  3420. calPoints.push(points);
  3421. points = fixBarStackData(points, eachSpacing, series.length, seriesIndex, config, opts, series);
  3422. for (let i = 0; i < points.length; i++) {
  3423. let item = points[i];
  3424. if (item !== null && i > leftNum && i < rightNum) {
  3425. context.beginPath();
  3426. var fillColor = item.color || eachSeries.color;
  3427. var startX = item.x0;
  3428. context.setFillStyle(fillColor);
  3429. context.moveTo(startX, item.y - item.width/2);
  3430. context.fillRect(startX, item.y - item.width/2, item.height , item.width);
  3431. context.closePath();
  3432. context.fill();
  3433. }
  3434. };
  3435. break;
  3436. }
  3437. });
  3438. if (opts.dataLabel !== false && process === 1) {
  3439. series.forEach(function(eachSeries, seriesIndex) {
  3440. let ranges, minRange, maxRange;
  3441. ranges = [].concat(opts.chartData.xAxisData.ranges);
  3442. maxRange = ranges.pop();
  3443. minRange = ranges.shift();
  3444. var data = eachSeries.data;
  3445. switch (columnOption.type) {
  3446. case 'group':
  3447. var points = getBarDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, process);
  3448. points = fixBarData(points, eachSpacing, series.length, seriesIndex, config, opts);
  3449. drawBarPointText(points, eachSeries, config, context, opts);
  3450. break;
  3451. case 'stack':
  3452. var points = getBarStackDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config, seriesIndex, series, process);
  3453. drawBarPointText(points, eachSeries, config, context, opts);
  3454. break;
  3455. }
  3456. });
  3457. }
  3458. return {
  3459. yAxisPoints: yAxisPoints,
  3460. calPoints: calPoints,
  3461. eachSpacing: eachSpacing
  3462. };
  3463. }
  3464. function drawCandleDataPoints(series, seriesMA, opts, config, context) {
  3465. var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
  3466. var candleOption = assign({}, {
  3467. color: {},
  3468. average: {}
  3469. }, opts.extra.candle);
  3470. candleOption.color = assign({}, {
  3471. upLine: '#f04864',
  3472. upFill: '#f04864',
  3473. downLine: '#2fc25b',
  3474. downFill: '#2fc25b'
  3475. }, candleOption.color);
  3476. candleOption.average = assign({}, {
  3477. show: false,
  3478. name: [],
  3479. day: [],
  3480. color: config.color
  3481. }, candleOption.average);
  3482. opts.extra.candle = candleOption;
  3483. let xAxisData = opts.chartData.xAxisData,
  3484. xAxisPoints = xAxisData.xAxisPoints,
  3485. eachSpacing = xAxisData.eachSpacing;
  3486. let calPoints = [];
  3487. context.save();
  3488. let leftNum = -2;
  3489. let rightNum = xAxisPoints.length + 2;
  3490. let leftSpace = 0;
  3491. let rightSpace = opts.width + eachSpacing;
  3492. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  3493. context.translate(opts._scrollDistance_, 0);
  3494. leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2;
  3495. rightNum = leftNum + opts.xAxis.itemCount + 4;
  3496. leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3];
  3497. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  3498. }
  3499. //画均线
  3500. if (candleOption.average.show || seriesMA) { //Merge pull request !12 from 邱贵翔
  3501. seriesMA.forEach(function(eachSeries, seriesIndex) {
  3502. let ranges, minRange, maxRange;
  3503. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  3504. minRange = ranges.pop();
  3505. maxRange = ranges.shift();
  3506. var data = eachSeries.data;
  3507. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3508. var splitPointList = splitPoints(points,eachSeries);
  3509. for (let i = 0; i < splitPointList.length; i++) {
  3510. let points = splitPointList[i];
  3511. context.beginPath();
  3512. context.setStrokeStyle(eachSeries.color);
  3513. context.setLineWidth(1);
  3514. if (points.length === 1) {
  3515. context.moveTo(points[0].x, points[0].y);
  3516. context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  3517. } else {
  3518. context.moveTo(points[0].x, points[0].y);
  3519. let startPoint = 0;
  3520. for (let j = 0; j < points.length; j++) {
  3521. let item = points[j];
  3522. if (startPoint == 0 && item.x > leftSpace) {
  3523. context.moveTo(item.x, item.y);
  3524. startPoint = 1;
  3525. }
  3526. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  3527. var ctrlPoint = createCurveControlPoints(points, j - 1);
  3528. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x,
  3529. item.y);
  3530. }
  3531. }
  3532. context.moveTo(points[0].x, points[0].y);
  3533. }
  3534. context.closePath();
  3535. context.stroke();
  3536. }
  3537. });
  3538. }
  3539. //画K线
  3540. series.forEach(function(eachSeries, seriesIndex) {
  3541. let ranges, minRange, maxRange;
  3542. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  3543. minRange = ranges.pop();
  3544. maxRange = ranges.shift();
  3545. var data = eachSeries.data;
  3546. var points = getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3547. calPoints.push(points);
  3548. var splitPointList = splitPoints(points,eachSeries);
  3549. for (let i = 0; i < splitPointList[0].length; i++) {
  3550. if (i > leftNum && i < rightNum) {
  3551. let item = splitPointList[0][i];
  3552. context.beginPath();
  3553. //如果上涨
  3554. if (data[i][1] - data[i][0] > 0) {
  3555. context.setStrokeStyle(candleOption.color.upLine);
  3556. context.setFillStyle(candleOption.color.upFill);
  3557. context.setLineWidth(1 * opts.pix);
  3558. context.moveTo(item[3].x, item[3].y); //顶点
  3559. context.lineTo(item[1].x, item[1].y); //收盘中间点
  3560. context.lineTo(item[1].x - eachSpacing / 4, item[1].y); //收盘左侧点
  3561. context.lineTo(item[0].x - eachSpacing / 4, item[0].y); //开盘左侧点
  3562. context.lineTo(item[0].x, item[0].y); //开盘中间点
  3563. context.lineTo(item[2].x, item[2].y); //底点
  3564. context.lineTo(item[0].x, item[0].y); //开盘中间点
  3565. context.lineTo(item[0].x + eachSpacing / 4, item[0].y); //开盘右侧点
  3566. context.lineTo(item[1].x + eachSpacing / 4, item[1].y); //收盘右侧点
  3567. context.lineTo(item[1].x, item[1].y); //收盘中间点
  3568. context.moveTo(item[3].x, item[3].y); //顶点
  3569. } else {
  3570. context.setStrokeStyle(candleOption.color.downLine);
  3571. context.setFillStyle(candleOption.color.downFill);
  3572. context.setLineWidth(1 * opts.pix);
  3573. context.moveTo(item[3].x, item[3].y); //顶点
  3574. context.lineTo(item[0].x, item[0].y); //开盘中间点
  3575. context.lineTo(item[0].x - eachSpacing / 4, item[0].y); //开盘左侧点
  3576. context.lineTo(item[1].x - eachSpacing / 4, item[1].y); //收盘左侧点
  3577. context.lineTo(item[1].x, item[1].y); //收盘中间点
  3578. context.lineTo(item[2].x, item[2].y); //底点
  3579. context.lineTo(item[1].x, item[1].y); //收盘中间点
  3580. context.lineTo(item[1].x + eachSpacing / 4, item[1].y); //收盘右侧点
  3581. context.lineTo(item[0].x + eachSpacing / 4, item[0].y); //开盘右侧点
  3582. context.lineTo(item[0].x, item[0].y); //开盘中间点
  3583. context.moveTo(item[3].x, item[3].y); //顶点
  3584. }
  3585. context.closePath();
  3586. context.fill();
  3587. context.stroke();
  3588. }
  3589. }
  3590. });
  3591. context.restore();
  3592. return {
  3593. xAxisPoints: xAxisPoints,
  3594. calPoints: calPoints,
  3595. eachSpacing: eachSpacing
  3596. };
  3597. }
  3598. function drawAreaDataPoints(series, opts, config, context) {
  3599. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3600. var areaOption = assign({}, {
  3601. type: 'straight',
  3602. opacity: 0.2,
  3603. addLine: false,
  3604. width: 2,
  3605. gradient: false,
  3606. activeType: 'none'
  3607. }, opts.extra.area);
  3608. let xAxisData = opts.chartData.xAxisData,
  3609. xAxisPoints = xAxisData.xAxisPoints,
  3610. eachSpacing = xAxisData.eachSpacing;
  3611. let endY = opts.height - opts.area[2];
  3612. let calPoints = [];
  3613. context.save();
  3614. let leftSpace = 0;
  3615. let rightSpace = opts.width + eachSpacing;
  3616. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  3617. context.translate(opts._scrollDistance_, 0);
  3618. leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3];
  3619. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  3620. }
  3621. series.forEach(function(eachSeries, seriesIndex) {
  3622. let ranges, minRange, maxRange;
  3623. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  3624. minRange = ranges.pop();
  3625. maxRange = ranges.shift();
  3626. let data = eachSeries.data;
  3627. let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3628. calPoints.push(points);
  3629. let splitPointList = splitPoints(points,eachSeries);
  3630. for (let i = 0; i < splitPointList.length; i++) {
  3631. let points = splitPointList[i];
  3632. // 绘制区域数
  3633. context.beginPath();
  3634. context.setStrokeStyle(hexToRgb(eachSeries.color, areaOption.opacity));
  3635. if (areaOption.gradient) {
  3636. let gradient = context.createLinearGradient(0, opts.area[0], 0, opts.height - opts.area[2]);
  3637. gradient.addColorStop('0', hexToRgb(eachSeries.color, areaOption.opacity));
  3638. gradient.addColorStop('1.0', hexToRgb("#FFFFFF", 0.1));
  3639. context.setFillStyle(gradient);
  3640. } else {
  3641. context.setFillStyle(hexToRgb(eachSeries.color, areaOption.opacity));
  3642. }
  3643. context.setLineWidth(areaOption.width * opts.pix);
  3644. if (points.length > 1) {
  3645. let firstPoint = points[0];
  3646. let lastPoint = points[points.length - 1];
  3647. context.moveTo(firstPoint.x, firstPoint.y);
  3648. let startPoint = 0;
  3649. if (areaOption.type === 'curve') {
  3650. for (let j = 0; j < points.length; j++) {
  3651. let item = points[j];
  3652. if (startPoint == 0 && item.x > leftSpace) {
  3653. context.moveTo(item.x, item.y);
  3654. startPoint = 1;
  3655. }
  3656. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  3657. let ctrlPoint = createCurveControlPoints(points, j - 1);
  3658. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
  3659. }
  3660. };
  3661. }
  3662. if (areaOption.type === 'straight') {
  3663. for (let j = 0; j < points.length; j++) {
  3664. let item = points[j];
  3665. if (startPoint == 0 && item.x > leftSpace) {
  3666. context.moveTo(item.x, item.y);
  3667. startPoint = 1;
  3668. }
  3669. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  3670. context.lineTo(item.x, item.y);
  3671. }
  3672. };
  3673. }
  3674. if (areaOption.type === 'step') {
  3675. for (let j = 0; j < points.length; j++) {
  3676. let item = points[j];
  3677. if (startPoint == 0 && item.x > leftSpace) {
  3678. context.moveTo(item.x, item.y);
  3679. startPoint = 1;
  3680. }
  3681. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  3682. context.lineTo(item.x, points[j - 1].y);
  3683. context.lineTo(item.x, item.y);
  3684. }
  3685. };
  3686. }
  3687. context.lineTo(lastPoint.x, endY);
  3688. context.lineTo(firstPoint.x, endY);
  3689. context.lineTo(firstPoint.x, firstPoint.y);
  3690. } else {
  3691. let item = points[0];
  3692. context.moveTo(item.x - eachSpacing / 2, item.y);
  3693. // context.lineTo(item.x + eachSpacing / 2, item.y);
  3694. // context.lineTo(item.x + eachSpacing / 2, endY);
  3695. // context.lineTo(item.x - eachSpacing / 2, endY);
  3696. // context.moveTo(item.x - eachSpacing / 2, item.y);
  3697. }
  3698. context.closePath();
  3699. context.fill();
  3700. //画连线
  3701. if (areaOption.addLine) {
  3702. if (eachSeries.lineType == 'dash') {
  3703. let dashLength = eachSeries.dashLength ? eachSeries.dashLength : 8;
  3704. dashLength *= opts.pix;
  3705. context.setLineDash([dashLength, dashLength]);
  3706. }
  3707. context.beginPath();
  3708. context.setStrokeStyle(eachSeries.color);
  3709. context.setLineWidth(areaOption.width * opts.pix);
  3710. if (points.length === 1) {
  3711. context.moveTo(points[0].x, points[0].y);
  3712. // context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  3713. } else {
  3714. context.moveTo(points[0].x, points[0].y);
  3715. let startPoint = 0;
  3716. if (areaOption.type === 'curve') {
  3717. for (let j = 0; j < points.length; j++) {
  3718. let item = points[j];
  3719. if (startPoint == 0 && item.x > leftSpace) {
  3720. context.moveTo(item.x, item.y);
  3721. startPoint = 1;
  3722. }
  3723. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  3724. let ctrlPoint = createCurveControlPoints(points, j - 1);
  3725. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
  3726. }
  3727. };
  3728. }
  3729. if (areaOption.type === 'straight') {
  3730. for (let j = 0; j < points.length; j++) {
  3731. let item = points[j];
  3732. if (startPoint == 0 && item.x > leftSpace) {
  3733. context.moveTo(item.x, item.y);
  3734. startPoint = 1;
  3735. }
  3736. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  3737. context.lineTo(item.x, item.y);
  3738. }
  3739. };
  3740. }
  3741. if (areaOption.type === 'step') {
  3742. for (let j = 0; j < points.length; j++) {
  3743. let item = points[j];
  3744. if (startPoint == 0 && item.x > leftSpace) {
  3745. context.moveTo(item.x, item.y);
  3746. startPoint = 1;
  3747. }
  3748. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  3749. context.lineTo(item.x, points[j - 1].y);
  3750. context.lineTo(item.x, item.y);
  3751. }
  3752. };
  3753. }
  3754. context.moveTo(points[0].x, points[0].y);
  3755. }
  3756. context.stroke();
  3757. context.setLineDash([]);
  3758. }
  3759. }
  3760. //画点
  3761. if (opts.dataPointShape !== false) {
  3762. drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
  3763. }
  3764. drawActivePoint(points, eachSeries.color, eachSeries.pointShape, context, opts, areaOption,seriesIndex);
  3765. });
  3766. if (opts.dataLabel !== false && process === 1) {
  3767. series.forEach(function(eachSeries, seriesIndex) {
  3768. let ranges, minRange, maxRange;
  3769. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  3770. minRange = ranges.pop();
  3771. maxRange = ranges.shift();
  3772. var data = eachSeries.data;
  3773. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3774. drawPointText(points, eachSeries, config, context, opts);
  3775. });
  3776. }
  3777. context.restore();
  3778. return {
  3779. xAxisPoints: xAxisPoints,
  3780. calPoints: calPoints,
  3781. eachSpacing: eachSpacing
  3782. };
  3783. }
  3784. function drawScatterDataPoints(series, opts, config, context) {
  3785. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3786. var scatterOption = assign({}, {
  3787. type: 'circle'
  3788. }, opts.extra.scatter);
  3789. let xAxisData = opts.chartData.xAxisData,
  3790. xAxisPoints = xAxisData.xAxisPoints,
  3791. eachSpacing = xAxisData.eachSpacing;
  3792. var calPoints = [];
  3793. context.save();
  3794. let leftSpace = 0;
  3795. let rightSpace = opts.width + eachSpacing;
  3796. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  3797. context.translate(opts._scrollDistance_, 0);
  3798. leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3];
  3799. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  3800. }
  3801. series.forEach(function(eachSeries, seriesIndex) {
  3802. let ranges, minRange, maxRange;
  3803. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  3804. minRange = ranges.pop();
  3805. maxRange = ranges.shift();
  3806. var data = eachSeries.data;
  3807. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3808. context.beginPath();
  3809. context.setStrokeStyle(eachSeries.color);
  3810. context.setFillStyle(eachSeries.color);
  3811. context.setLineWidth(1 * opts.pix);
  3812. var shape = eachSeries.pointShape;
  3813. if (shape === 'diamond') {
  3814. points.forEach(function(item, index) {
  3815. if (item !== null) {
  3816. context.moveTo(item.x, item.y - 4.5);
  3817. context.lineTo(item.x - 4.5, item.y);
  3818. context.lineTo(item.x, item.y + 4.5);
  3819. context.lineTo(item.x + 4.5, item.y);
  3820. context.lineTo(item.x, item.y - 4.5);
  3821. }
  3822. });
  3823. } else if (shape === 'circle') {
  3824. points.forEach(function(item, index) {
  3825. if (item !== null) {
  3826. context.moveTo(item.x + 2.5 * opts.pix, item.y);
  3827. context.arc(item.x, item.y, 3 * opts.pix, 0, 2 * Math.PI, false);
  3828. }
  3829. });
  3830. } else if (shape === 'square') {
  3831. points.forEach(function(item, index) {
  3832. if (item !== null) {
  3833. context.moveTo(item.x - 3.5, item.y - 3.5);
  3834. context.rect(item.x - 3.5, item.y - 3.5, 7, 7);
  3835. }
  3836. });
  3837. } else if (shape === 'triangle') {
  3838. points.forEach(function(item, index) {
  3839. if (item !== null) {
  3840. context.moveTo(item.x, item.y - 4.5);
  3841. context.lineTo(item.x - 4.5, item.y + 4.5);
  3842. context.lineTo(item.x + 4.5, item.y + 4.5);
  3843. context.lineTo(item.x, item.y - 4.5);
  3844. }
  3845. });
  3846. } else if (shape === 'triangle') {
  3847. return;
  3848. }
  3849. context.closePath();
  3850. context.fill();
  3851. context.stroke();
  3852. });
  3853. if (opts.dataLabel !== false && process === 1) {
  3854. series.forEach(function(eachSeries, seriesIndex) {
  3855. let ranges, minRange, maxRange;
  3856. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  3857. minRange = ranges.pop();
  3858. maxRange = ranges.shift();
  3859. var data = eachSeries.data;
  3860. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3861. drawPointText(points, eachSeries, config, context, opts);
  3862. });
  3863. }
  3864. context.restore();
  3865. return {
  3866. xAxisPoints: xAxisPoints,
  3867. calPoints: calPoints,
  3868. eachSpacing: eachSpacing
  3869. };
  3870. }
  3871. function drawBubbleDataPoints(series, opts, config, context) {
  3872. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3873. var bubbleOption = assign({}, {
  3874. opacity: 1,
  3875. border:2
  3876. }, opts.extra.bubble);
  3877. let xAxisData = opts.chartData.xAxisData,
  3878. xAxisPoints = xAxisData.xAxisPoints,
  3879. eachSpacing = xAxisData.eachSpacing;
  3880. var calPoints = [];
  3881. context.save();
  3882. let leftSpace = 0;
  3883. let rightSpace = opts.width + eachSpacing;
  3884. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  3885. context.translate(opts._scrollDistance_, 0);
  3886. leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3];
  3887. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  3888. }
  3889. series.forEach(function(eachSeries, seriesIndex) {
  3890. let ranges, minRange, maxRange;
  3891. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  3892. minRange = ranges.pop();
  3893. maxRange = ranges.shift();
  3894. var data = eachSeries.data;
  3895. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  3896. context.beginPath();
  3897. context.setStrokeStyle(eachSeries.color);
  3898. context.setLineWidth(bubbleOption.border * opts.pix);
  3899. context.setFillStyle(hexToRgb(eachSeries.color, bubbleOption.opacity));
  3900. points.forEach(function(item, index) {
  3901. context.moveTo(item.x + item.r, item.y);
  3902. context.arc(item.x, item.y, item.r * opts.pix, 0, 2 * Math.PI, false);
  3903. });
  3904. context.closePath();
  3905. context.fill();
  3906. context.stroke();
  3907. if (opts.dataLabel !== false && process === 1) {
  3908. points.forEach(function(item, index) {
  3909. context.beginPath();
  3910. var fontSize = eachSeries.textSize * opts.pix || config.fontSize;
  3911. context.setFontSize(fontSize);
  3912. context.setFillStyle(eachSeries.textColor || "#FFFFFF");
  3913. context.setTextAlign('center');
  3914. context.fillText(String(item.t), item.x, item.y + fontSize/2);
  3915. context.closePath();
  3916. context.stroke();
  3917. context.setTextAlign('left');
  3918. });
  3919. }
  3920. });
  3921. context.restore();
  3922. return {
  3923. xAxisPoints: xAxisPoints,
  3924. calPoints: calPoints,
  3925. eachSpacing: eachSpacing
  3926. };
  3927. }
  3928. function drawLineDataPoints(series, opts, config, context) {
  3929. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3930. var lineOption = assign({}, {
  3931. type: 'straight',
  3932. width: 2,
  3933. activeType: 'none',
  3934. linearType: 'none',
  3935. onShadow: false,
  3936. animation: 'vertical',
  3937. }, opts.extra.line);
  3938. lineOption.width *= opts.pix;
  3939. let xAxisData = opts.chartData.xAxisData,
  3940. xAxisPoints = xAxisData.xAxisPoints,
  3941. eachSpacing = xAxisData.eachSpacing;
  3942. var calPoints = [];
  3943. context.save();
  3944. let leftSpace = 0;
  3945. let rightSpace = opts.width + eachSpacing;
  3946. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  3947. context.translate(opts._scrollDistance_, 0);
  3948. leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3];
  3949. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  3950. }
  3951. series.forEach(function(eachSeries, seriesIndex) {
  3952. // 这段很神奇的代码用于解决ios16的setStrokeStyle失效的bug
  3953. context.beginPath();
  3954. context.setStrokeStyle(eachSeries.color);
  3955. context.moveTo(-10000, -10000);
  3956. context.lineTo(-10001, -10001);
  3957. context.stroke();
  3958. let ranges, minRange, maxRange;
  3959. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  3960. minRange = ranges.pop();
  3961. maxRange = ranges.shift();
  3962. var data = eachSeries.data;
  3963. var points = getLineDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, lineOption, process);
  3964. calPoints.push(points);
  3965. var splitPointList = splitPoints(points,eachSeries);
  3966. if (eachSeries.lineType == 'dash') {
  3967. let dashLength = eachSeries.dashLength ? eachSeries.dashLength : 8;
  3968. dashLength *= opts.pix;
  3969. context.setLineDash([dashLength, dashLength]);
  3970. }
  3971. context.beginPath();
  3972. var strokeColor = eachSeries.color;
  3973. if (lineOption.linearType !== 'none' && eachSeries.linearColor && eachSeries.linearColor.length > 0) {
  3974. var grd = context.createLinearGradient(opts.chartData.xAxisData.startX, opts.height/2, opts.chartData.xAxisData.endX, opts.height/2);
  3975. for (var i = 0; i < eachSeries.linearColor.length; i++) {
  3976. grd.addColorStop(eachSeries.linearColor[i][0], hexToRgb(eachSeries.linearColor[i][1], 1));
  3977. }
  3978. strokeColor = grd
  3979. }
  3980. context.setStrokeStyle(strokeColor);
  3981. if (lineOption.onShadow == true && eachSeries.setShadow && eachSeries.setShadow.length > 0) {
  3982. context.setShadow(eachSeries.setShadow[0], eachSeries.setShadow[1], eachSeries.setShadow[2], eachSeries.setShadow[3]);
  3983. }else{
  3984. context.setShadow(0, 0, 0, 'rgba(0,0,0,0)');
  3985. }
  3986. context.setLineWidth(lineOption.width);
  3987. splitPointList.forEach(function(points, index) {
  3988. if (points.length === 1) {
  3989. context.moveTo(points[0].x, points[0].y);
  3990. // context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  3991. } else {
  3992. context.moveTo(points[0].x, points[0].y);
  3993. let startPoint = 0;
  3994. if (lineOption.type === 'curve') {
  3995. for (let j = 0; j < points.length; j++) {
  3996. let item = points[j];
  3997. if (startPoint == 0 && item.x > leftSpace) {
  3998. context.moveTo(item.x, item.y);
  3999. startPoint = 1;
  4000. }
  4001. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  4002. var ctrlPoint = createCurveControlPoints(points, j - 1);
  4003. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
  4004. }
  4005. };
  4006. }
  4007. if (lineOption.type === 'straight') {
  4008. for (let j = 0; j < points.length; j++) {
  4009. let item = points[j];
  4010. if (startPoint == 0 && item.x > leftSpace) {
  4011. context.moveTo(item.x, item.y);
  4012. startPoint = 1;
  4013. }
  4014. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  4015. context.lineTo(item.x, item.y);
  4016. }
  4017. };
  4018. }
  4019. if (lineOption.type === 'step') {
  4020. for (let j = 0; j < points.length; j++) {
  4021. let item = points[j];
  4022. if (startPoint == 0 && item.x > leftSpace) {
  4023. context.moveTo(item.x, item.y);
  4024. startPoint = 1;
  4025. }
  4026. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  4027. context.lineTo(item.x, points[j - 1].y);
  4028. context.lineTo(item.x, item.y);
  4029. }
  4030. };
  4031. }
  4032. context.moveTo(points[0].x, points[0].y);
  4033. }
  4034. });
  4035. context.stroke();
  4036. context.setLineDash([]);
  4037. if (opts.dataPointShape !== false) {
  4038. drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
  4039. }
  4040. drawActivePoint(points, eachSeries.color, eachSeries.pointShape, context, opts, lineOption);
  4041. });
  4042. if (opts.dataLabel !== false && process === 1) {
  4043. series.forEach(function(eachSeries, seriesIndex) {
  4044. let ranges, minRange, maxRange;
  4045. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  4046. minRange = ranges.pop();
  4047. maxRange = ranges.shift();
  4048. var data = eachSeries.data;
  4049. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  4050. drawPointText(points, eachSeries, config, context, opts);
  4051. });
  4052. }
  4053. context.restore();
  4054. return {
  4055. xAxisPoints: xAxisPoints,
  4056. calPoints: calPoints,
  4057. eachSpacing: eachSpacing
  4058. };
  4059. }
  4060. function drawMixDataPoints(series, opts, config, context) {
  4061. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  4062. let xAxisData = opts.chartData.xAxisData,
  4063. xAxisPoints = xAxisData.xAxisPoints,
  4064. eachSpacing = xAxisData.eachSpacing;
  4065. let columnOption = assign({}, {
  4066. width: eachSpacing / 2,
  4067. barBorderCircle: false,
  4068. barBorderRadius: [],
  4069. seriesGap: 2,
  4070. linearType: 'none',
  4071. linearOpacity: 1,
  4072. customColor: [],
  4073. colorStop: 0,
  4074. }, opts.extra.mix.column);
  4075. let areaOption = assign({}, {
  4076. opacity: 0.2,
  4077. gradient: false
  4078. }, opts.extra.mix.area);
  4079. let lineOption = assign({}, {
  4080. width: 2
  4081. }, opts.extra.mix.line);
  4082. let endY = opts.height - opts.area[2];
  4083. let calPoints = [];
  4084. var columnIndex = 0;
  4085. var columnLength = 0;
  4086. series.forEach(function(eachSeries, seriesIndex) {
  4087. if (eachSeries.type == 'column') {
  4088. columnLength += 1;
  4089. }
  4090. });
  4091. context.save();
  4092. let leftNum = -2;
  4093. let rightNum = xAxisPoints.length + 2;
  4094. let leftSpace = 0;
  4095. let rightSpace = opts.width + eachSpacing;
  4096. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  4097. context.translate(opts._scrollDistance_, 0);
  4098. leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2;
  4099. rightNum = leftNum + opts.xAxis.itemCount + 4;
  4100. leftSpace = -opts._scrollDistance_ - eachSpacing * 2 + opts.area[3];
  4101. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  4102. }
  4103. columnOption.customColor = fillCustomColor(columnOption.linearType, columnOption.customColor, series, config);
  4104. series.forEach(function(eachSeries, seriesIndex) {
  4105. let ranges, minRange, maxRange;
  4106. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  4107. minRange = ranges.pop();
  4108. maxRange = ranges.shift();
  4109. var data = eachSeries.data;
  4110. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  4111. calPoints.push(points);
  4112. // 绘制柱状数据图
  4113. if (eachSeries.type == 'column') {
  4114. points = fixColumeData(points, eachSpacing, columnLength, columnIndex, config, opts);
  4115. for (let i = 0; i < points.length; i++) {
  4116. let item = points[i];
  4117. if (item !== null && i > leftNum && i < rightNum) {
  4118. var startX = item.x - item.width / 2;
  4119. var height = opts.height - item.y - opts.area[2];
  4120. context.beginPath();
  4121. var fillColor = item.color || eachSeries.color
  4122. var strokeColor = item.color || eachSeries.color
  4123. if (columnOption.linearType !== 'none') {
  4124. var grd = context.createLinearGradient(startX, item.y, startX, opts.height - opts.area[2]);
  4125. //透明渐变
  4126. if (columnOption.linearType == 'opacity') {
  4127. grd.addColorStop(0, hexToRgb(fillColor, columnOption.linearOpacity));
  4128. grd.addColorStop(1, hexToRgb(fillColor, 1));
  4129. } else {
  4130. grd.addColorStop(0, hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity));
  4131. grd.addColorStop(columnOption.colorStop, hexToRgb(columnOption.customColor[eachSeries.linearIndex], columnOption.linearOpacity));
  4132. grd.addColorStop(1, hexToRgb(fillColor, 1));
  4133. }
  4134. fillColor = grd
  4135. }
  4136. // 圆角边框
  4137. if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle) {
  4138. const left = startX;
  4139. const top = item.y;
  4140. const width = item.width;
  4141. const height = opts.height - opts.area[2] - item.y;
  4142. if (columnOption.barBorderCircle) {
  4143. columnOption.barBorderRadius = [width / 2, width / 2, 0, 0];
  4144. }
  4145. let [r0, r1, r2, r3] = columnOption.barBorderRadius;
  4146. let minRadius = Math.min(width/2,height/2);
  4147. r0 = r0 > minRadius ? minRadius : r0;
  4148. r1 = r1 > minRadius ? minRadius : r1;
  4149. r2 = r2 > minRadius ? minRadius : r2;
  4150. r3 = r3 > minRadius ? minRadius : r3;
  4151. r0 = r0 < 0 ? 0 : r0;
  4152. r1 = r1 < 0 ? 0 : r1;
  4153. r2 = r2 < 0 ? 0 : r2;
  4154. r3 = r3 < 0 ? 0 : r3;
  4155. context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2);
  4156. context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0);
  4157. context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2);
  4158. context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI);
  4159. } else {
  4160. context.moveTo(startX, item.y);
  4161. context.lineTo(startX + item.width, item.y);
  4162. context.lineTo(startX + item.width, opts.height - opts.area[2]);
  4163. context.lineTo(startX, opts.height - opts.area[2]);
  4164. context.lineTo(startX, item.y);
  4165. context.setLineWidth(1)
  4166. context.setStrokeStyle(strokeColor);
  4167. }
  4168. context.setFillStyle(fillColor);
  4169. context.closePath();
  4170. context.fill();
  4171. }
  4172. }
  4173. columnIndex += 1;
  4174. }
  4175. //绘制区域图数据
  4176. if (eachSeries.type == 'area') {
  4177. let splitPointList = splitPoints(points,eachSeries);
  4178. for (let i = 0; i < splitPointList.length; i++) {
  4179. let points = splitPointList[i];
  4180. // 绘制区域数据
  4181. context.beginPath();
  4182. context.setStrokeStyle(eachSeries.color);
  4183. context.setStrokeStyle(hexToRgb(eachSeries.color, areaOption.opacity));
  4184. if (areaOption.gradient) {
  4185. let gradient = context.createLinearGradient(0, opts.area[0], 0, opts.height - opts.area[2]);
  4186. gradient.addColorStop('0', hexToRgb(eachSeries.color, areaOption.opacity));
  4187. gradient.addColorStop('1.0', hexToRgb("#FFFFFF", 0.1));
  4188. context.setFillStyle(gradient);
  4189. } else {
  4190. context.setFillStyle(hexToRgb(eachSeries.color, areaOption.opacity));
  4191. }
  4192. context.setLineWidth(2 * opts.pix);
  4193. if (points.length > 1) {
  4194. var firstPoint = points[0];
  4195. let lastPoint = points[points.length - 1];
  4196. context.moveTo(firstPoint.x, firstPoint.y);
  4197. let startPoint = 0;
  4198. if (eachSeries.style === 'curve') {
  4199. for (let j = 0; j < points.length; j++) {
  4200. let item = points[j];
  4201. if (startPoint == 0 && item.x > leftSpace) {
  4202. context.moveTo(item.x, item.y);
  4203. startPoint = 1;
  4204. }
  4205. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  4206. var ctrlPoint = createCurveControlPoints(points, j - 1);
  4207. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
  4208. }
  4209. };
  4210. } else {
  4211. for (let j = 0; j < points.length; j++) {
  4212. let item = points[j];
  4213. if (startPoint == 0 && item.x > leftSpace) {
  4214. context.moveTo(item.x, item.y);
  4215. startPoint = 1;
  4216. }
  4217. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  4218. context.lineTo(item.x, item.y);
  4219. }
  4220. };
  4221. }
  4222. context.lineTo(lastPoint.x, endY);
  4223. context.lineTo(firstPoint.x, endY);
  4224. context.lineTo(firstPoint.x, firstPoint.y);
  4225. } else {
  4226. let item = points[0];
  4227. context.moveTo(item.x - eachSpacing / 2, item.y);
  4228. // context.lineTo(item.x + eachSpacing / 2, item.y);
  4229. // context.lineTo(item.x + eachSpacing / 2, endY);
  4230. // context.lineTo(item.x - eachSpacing / 2, endY);
  4231. // context.moveTo(item.x - eachSpacing / 2, item.y);
  4232. }
  4233. context.closePath();
  4234. context.fill();
  4235. }
  4236. }
  4237. // 绘制折线数据图
  4238. if (eachSeries.type == 'line') {
  4239. var splitPointList = splitPoints(points,eachSeries);
  4240. splitPointList.forEach(function(points, index) {
  4241. if (eachSeries.lineType == 'dash') {
  4242. let dashLength = eachSeries.dashLength ? eachSeries.dashLength : 8;
  4243. dashLength *= opts.pix;
  4244. context.setLineDash([dashLength, dashLength]);
  4245. }
  4246. context.beginPath();
  4247. context.setStrokeStyle(eachSeries.color);
  4248. context.setLineWidth(lineOption.width * opts.pix);
  4249. if (points.length === 1) {
  4250. context.moveTo(points[0].x, points[0].y);
  4251. // context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  4252. } else {
  4253. context.moveTo(points[0].x, points[0].y);
  4254. let startPoint = 0;
  4255. if (eachSeries.style == 'curve') {
  4256. for (let j = 0; j < points.length; j++) {
  4257. let item = points[j];
  4258. if (startPoint == 0 && item.x > leftSpace) {
  4259. context.moveTo(item.x, item.y);
  4260. startPoint = 1;
  4261. }
  4262. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  4263. var ctrlPoint = createCurveControlPoints(points, j - 1);
  4264. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y,
  4265. item.x, item.y);
  4266. }
  4267. }
  4268. } else {
  4269. for (let j = 0; j < points.length; j++) {
  4270. let item = points[j];
  4271. if (startPoint == 0 && item.x > leftSpace) {
  4272. context.moveTo(item.x, item.y);
  4273. startPoint = 1;
  4274. }
  4275. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  4276. context.lineTo(item.x, item.y);
  4277. }
  4278. }
  4279. }
  4280. context.moveTo(points[0].x, points[0].y);
  4281. }
  4282. context.stroke();
  4283. context.setLineDash([]);
  4284. });
  4285. }
  4286. // 绘制点数据图
  4287. if (eachSeries.type == 'point') {
  4288. eachSeries.addPoint = true;
  4289. }
  4290. if (eachSeries.addPoint == true && eachSeries.type !== 'column') {
  4291. drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
  4292. }
  4293. });
  4294. if (opts.dataLabel !== false && process === 1) {
  4295. var columnIndex = 0;
  4296. series.forEach(function(eachSeries, seriesIndex) {
  4297. let ranges, minRange, maxRange;
  4298. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  4299. minRange = ranges.pop();
  4300. maxRange = ranges.shift();
  4301. var data = eachSeries.data;
  4302. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  4303. if (eachSeries.type !== 'column') {
  4304. drawPointText(points, eachSeries, config, context, opts);
  4305. } else {
  4306. points = fixColumeData(points, eachSpacing, columnLength, columnIndex, config, opts);
  4307. drawPointText(points, eachSeries, config, context, opts);
  4308. columnIndex += 1;
  4309. }
  4310. });
  4311. }
  4312. context.restore();
  4313. return {
  4314. xAxisPoints: xAxisPoints,
  4315. calPoints: calPoints,
  4316. eachSpacing: eachSpacing,
  4317. }
  4318. }
  4319. function drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints) {
  4320. var toolTipOption = opts.extra.tooltip || {};
  4321. if (toolTipOption.horizentalLine && opts.tooltip && process === 1 && (opts.type == 'line' || opts.type == 'area' || opts.type == 'column' || opts.type == 'mount' || opts.type == 'candle' || opts.type == 'mix')) {
  4322. drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints)
  4323. }
  4324. context.save();
  4325. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  4326. context.translate(opts._scrollDistance_, 0);
  4327. }
  4328. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  4329. drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context, eachSpacing, xAxisPoints);
  4330. }
  4331. context.restore();
  4332. }
  4333. function drawXAxis(categories, opts, config, context) {
  4334. let xAxisData = opts.chartData.xAxisData,
  4335. xAxisPoints = xAxisData.xAxisPoints,
  4336. startX = xAxisData.startX,
  4337. endX = xAxisData.endX,
  4338. eachSpacing = xAxisData.eachSpacing;
  4339. var boundaryGap = 'center';
  4340. if (opts.type == 'bar' || opts.type == 'line' || opts.type == 'area'|| opts.type == 'scatter' || opts.type == 'bubble') {
  4341. boundaryGap = opts.xAxis.boundaryGap;
  4342. }
  4343. var startY = opts.height - opts.area[2];
  4344. var endY = opts.area[0];
  4345. //绘制滚动条
  4346. if (opts.enableScroll && opts.xAxis.scrollShow) {
  4347. var scrollY = opts.height - opts.area[2] + config.xAxisHeight;
  4348. var scrollScreenWidth = endX - startX;
  4349. var scrollTotalWidth = eachSpacing * (xAxisPoints.length - 1);
  4350. if(opts.type == 'mount' && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1){
  4351. if(opts.extra.mount.widthRatio>2) opts.extra.mount.widthRatio = 2
  4352. scrollTotalWidth += (opts.extra.mount.widthRatio - 1)*eachSpacing;
  4353. }
  4354. var scrollWidth = scrollScreenWidth * scrollScreenWidth / scrollTotalWidth;
  4355. var scrollLeft = 0;
  4356. if (opts._scrollDistance_) {
  4357. scrollLeft = -opts._scrollDistance_ * (scrollScreenWidth) / scrollTotalWidth;
  4358. }
  4359. context.beginPath();
  4360. context.setLineCap('round');
  4361. context.setLineWidth(6 * opts.pix);
  4362. context.setStrokeStyle(opts.xAxis.scrollBackgroundColor || "#EFEBEF");
  4363. context.moveTo(startX, scrollY);
  4364. context.lineTo(endX, scrollY);
  4365. context.stroke();
  4366. context.closePath();
  4367. context.beginPath();
  4368. context.setLineCap('round');
  4369. context.setLineWidth(6 * opts.pix);
  4370. context.setStrokeStyle(opts.xAxis.scrollColor || "#A6A6A6");
  4371. context.moveTo(startX + scrollLeft, scrollY);
  4372. context.lineTo(startX + scrollLeft + scrollWidth, scrollY);
  4373. context.stroke();
  4374. context.closePath();
  4375. context.setLineCap('butt');
  4376. }
  4377. context.save();
  4378. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
  4379. context.translate(opts._scrollDistance_, 0);
  4380. }
  4381. //绘制X轴刻度线
  4382. if (opts.xAxis.calibration === true) {
  4383. context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc");
  4384. context.setLineCap('butt');
  4385. context.setLineWidth(1 * opts.pix);
  4386. xAxisPoints.forEach(function(item, index) {
  4387. if (index > 0) {
  4388. context.beginPath();
  4389. context.moveTo(item - eachSpacing / 2, startY);
  4390. context.lineTo(item - eachSpacing / 2, startY + 3 * opts.pix);
  4391. context.closePath();
  4392. context.stroke();
  4393. }
  4394. });
  4395. }
  4396. //绘制X轴网格
  4397. if (opts.xAxis.disableGrid !== true) {
  4398. context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc");
  4399. context.setLineCap('butt');
  4400. context.setLineWidth(1 * opts.pix);
  4401. if (opts.xAxis.gridType == 'dash') {
  4402. context.setLineDash([opts.xAxis.dashLength * opts.pix, opts.xAxis.dashLength * opts.pix]);
  4403. }
  4404. opts.xAxis.gridEval = opts.xAxis.gridEval || 1;
  4405. xAxisPoints.forEach(function(item, index) {
  4406. if (index % opts.xAxis.gridEval == 0) {
  4407. context.beginPath();
  4408. context.moveTo(item, startY);
  4409. context.lineTo(item, endY);
  4410. context.stroke();
  4411. }
  4412. });
  4413. context.setLineDash([]);
  4414. }
  4415. //绘制X轴文案
  4416. if (opts.xAxis.disabled !== true) {
  4417. // 对X轴列表做抽稀处理
  4418. //默认全部显示X轴标签
  4419. let maxXAxisListLength = categories.length;
  4420. //如果设置了X轴单屏数量
  4421. if (opts.xAxis.labelCount) {
  4422. //如果设置X轴密度
  4423. if (opts.xAxis.itemCount) {
  4424. maxXAxisListLength = Math.ceil(categories.length / opts.xAxis.itemCount * opts.xAxis.labelCount);
  4425. } else {
  4426. maxXAxisListLength = opts.xAxis.labelCount;
  4427. }
  4428. maxXAxisListLength -= 1;
  4429. }
  4430. let ratio = Math.ceil(categories.length / maxXAxisListLength);
  4431. let newCategories = [];
  4432. let cgLength = categories.length;
  4433. for (let i = 0; i < cgLength; i++) {
  4434. if (i % ratio !== 0) {
  4435. newCategories.push("");
  4436. } else {
  4437. newCategories.push(categories[i]);
  4438. }
  4439. }
  4440. newCategories[cgLength - 1] = categories[cgLength - 1];
  4441. var xAxisFontSize = opts.xAxis.fontSize * opts.pix || config.fontSize;
  4442. if (config._xAxisTextAngle_ === 0) {
  4443. newCategories.forEach(function(item, index) {
  4444. var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item,index,opts) : item;
  4445. var offset = -measureText(String(xitem), xAxisFontSize, context) / 2;
  4446. if (boundaryGap == 'center') {
  4447. offset += eachSpacing / 2;
  4448. }
  4449. var scrollHeight = 0;
  4450. if (opts.xAxis.scrollShow) {
  4451. scrollHeight = 6 * opts.pix;
  4452. }
  4453. // 如果在主视图区域内
  4454. var _scrollDistance_ = opts._scrollDistance_ || 0;
  4455. var truePoints = boundaryGap == 'center' ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index];
  4456. if((truePoints - Math.abs(_scrollDistance_)) >= (opts.area[3] - 1) && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1] + 1)){
  4457. context.beginPath();
  4458. context.setFontSize(xAxisFontSize);
  4459. context.setFillStyle(opts.xAxis.fontColor || opts.fontColor);
  4460. context.fillText(String(xitem), xAxisPoints[index] + offset, startY + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.fontSize) * opts.pix / 2 + opts.xAxis.fontSize * opts.pix);
  4461. context.closePath();
  4462. context.stroke();
  4463. }
  4464. });
  4465. } else {
  4466. newCategories.forEach(function(item, index) {
  4467. var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item) : item;
  4468. // 如果在主视图区域内
  4469. var _scrollDistance_ = opts._scrollDistance_ || 0;
  4470. var truePoints = boundaryGap == 'center' ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index];
  4471. if((truePoints - Math.abs(_scrollDistance_)) >= (opts.area[3] - 1) && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1] + 1)){
  4472. context.save();
  4473. context.beginPath();
  4474. context.setFontSize(xAxisFontSize);
  4475. context.setFillStyle(opts.xAxis.fontColor || opts.fontColor);
  4476. var textWidth = measureText(String(xitem), xAxisFontSize, context);
  4477. var offsetX = xAxisPoints[index];
  4478. if (boundaryGap == 'center') {
  4479. offsetX = xAxisPoints[index] + eachSpacing / 2;
  4480. }
  4481. var scrollHeight = 0;
  4482. if (opts.xAxis.scrollShow) {
  4483. scrollHeight = 6 * opts.pix;
  4484. }
  4485. var offsetY = startY + opts.xAxis.marginTop * opts.pix + xAxisFontSize - xAxisFontSize * Math.abs(Math.sin(config._xAxisTextAngle_));
  4486. if(opts.xAxis.rotateAngle < 0){
  4487. offsetX -= xAxisFontSize / 2;
  4488. textWidth = 0;
  4489. }else{
  4490. offsetX += xAxisFontSize / 2;
  4491. textWidth = -textWidth;
  4492. }
  4493. context.translate(offsetX, offsetY);
  4494. context.rotate(-1 * config._xAxisTextAngle_);
  4495. context.fillText(String(xitem), textWidth , 0 );
  4496. context.closePath();
  4497. context.stroke();
  4498. context.restore();
  4499. }
  4500. });
  4501. }
  4502. }
  4503. context.restore();
  4504. //画X轴标题
  4505. if (opts.xAxis.title) {
  4506. context.beginPath();
  4507. context.setFontSize(opts.xAxis.titleFontSize * opts.pix);
  4508. context.setFillStyle(opts.xAxis.titleFontColor);
  4509. context.fillText(String(opts.xAxis.title), opts.width - opts.area[1] + opts.xAxis.titleOffsetX * opts.pix,opts.height - opts.area[2] + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.titleFontSize) * opts.pix / 2 + (opts.xAxis.titleFontSize + opts.xAxis.titleOffsetY) * opts.pix);
  4510. context.closePath();
  4511. context.stroke();
  4512. }
  4513. //绘制X轴轴线
  4514. if (opts.xAxis.axisLine) {
  4515. context.beginPath();
  4516. context.setStrokeStyle(opts.xAxis.axisLineColor);
  4517. context.setLineWidth(1 * opts.pix);
  4518. context.moveTo(startX, opts.height - opts.area[2]);
  4519. context.lineTo(endX, opts.height - opts.area[2]);
  4520. context.stroke();
  4521. }
  4522. }
  4523. function drawYAxisGrid(categories, opts, config, context) {
  4524. if (opts.yAxis.disableGrid === true) {
  4525. return;
  4526. }
  4527. let spacingValid = opts.height - opts.area[0] - opts.area[2];
  4528. let eachSpacing = spacingValid / opts.yAxis.splitNumber;
  4529. let startX = opts.area[3];
  4530. let xAxisPoints = opts.chartData.xAxisData.xAxisPoints,
  4531. xAxiseachSpacing = opts.chartData.xAxisData.eachSpacing;
  4532. let TotalWidth = xAxiseachSpacing * (xAxisPoints.length - 1);
  4533. if(opts.type == 'mount' && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1 ){
  4534. if(opts.extra.mount.widthRatio>2) opts.extra.mount.widthRatio = 2
  4535. TotalWidth += (opts.extra.mount.widthRatio - 1) * xAxiseachSpacing;
  4536. }
  4537. let endX = startX + TotalWidth;
  4538. let points = [];
  4539. let startY = 1
  4540. if (opts.xAxis.axisLine === false) {
  4541. startY = 0
  4542. }
  4543. for (let i = startY; i < opts.yAxis.splitNumber + 1; i++) {
  4544. points.push(opts.height - opts.area[2] - eachSpacing * i);
  4545. }
  4546. context.save();
  4547. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
  4548. context.translate(opts._scrollDistance_, 0);
  4549. }
  4550. if (opts.yAxis.gridType == 'dash') {
  4551. context.setLineDash([opts.yAxis.dashLength * opts.pix, opts.yAxis.dashLength * opts.pix]);
  4552. }
  4553. context.setStrokeStyle(opts.yAxis.gridColor);
  4554. context.setLineWidth(1 * opts.pix);
  4555. points.forEach(function(item, index) {
  4556. context.beginPath();
  4557. context.moveTo(startX, item);
  4558. context.lineTo(endX, item);
  4559. context.stroke();
  4560. });
  4561. context.setLineDash([]);
  4562. context.restore();
  4563. }
  4564. function drawYAxis(series, opts, config, context) {
  4565. if (opts.yAxis.disabled === true) {
  4566. return;
  4567. }
  4568. var spacingValid = opts.height - opts.area[0] - opts.area[2];
  4569. var eachSpacing = spacingValid / opts.yAxis.splitNumber;
  4570. var startX = opts.area[3];
  4571. var endX = opts.width - opts.area[1];
  4572. var endY = opts.height - opts.area[2];
  4573. // set YAxis background
  4574. context.beginPath();
  4575. context.setFillStyle(opts.background);
  4576. if (opts.enableScroll == true && opts.xAxis.scrollPosition && opts.xAxis.scrollPosition !== 'left') {
  4577. context.fillRect(0, 0, startX, endY + 2 * opts.pix);
  4578. }
  4579. if (opts.enableScroll == true && opts.xAxis.scrollPosition && opts.xAxis.scrollPosition !== 'right') {
  4580. context.fillRect(endX, 0, opts.width, endY + 2 * opts.pix);
  4581. }
  4582. context.closePath();
  4583. context.stroke();
  4584. let tStartLeft = opts.area[3];
  4585. let tStartRight = opts.width - opts.area[1];
  4586. let tStartCenter = opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2;
  4587. if (opts.yAxis.data) {
  4588. for (let i = 0; i < opts.yAxis.data.length; i++) {
  4589. let yData = opts.yAxis.data[i];
  4590. var points = [];
  4591. if(yData.type === 'categories'){
  4592. for (let i = 0; i <= yData.categories.length; i++) {
  4593. points.push(opts.area[0] + spacingValid / yData.categories.length / 2 + spacingValid / yData.categories.length * i);
  4594. }
  4595. }else{
  4596. for (let i = 0; i <= opts.yAxis.splitNumber; i++) {
  4597. points.push(opts.area[0] + eachSpacing * i);
  4598. }
  4599. }
  4600. if (yData.disabled !== true) {
  4601. let rangesFormat = opts.chartData.yAxisData.rangesFormat[i];
  4602. let yAxisFontSize = yData.fontSize ? yData.fontSize * opts.pix : config.fontSize;
  4603. let yAxisWidth = opts.chartData.yAxisData.yAxisWidth[i];
  4604. let textAlign = yData.textAlign || "right";
  4605. //画Y轴刻度及文案
  4606. rangesFormat.forEach(function(item, index) {
  4607. var pos = points[index];
  4608. context.beginPath();
  4609. context.setFontSize(yAxisFontSize);
  4610. context.setLineWidth(1 * opts.pix);
  4611. context.setStrokeStyle(yData.axisLineColor || '#cccccc');
  4612. context.setFillStyle(yData.fontColor || opts.fontColor);
  4613. let tmpstrat = 0;
  4614. let gapwidth = 4 * opts.pix;
  4615. if (yAxisWidth.position == 'left') {
  4616. //画刻度线
  4617. if (yData.calibration == true) {
  4618. context.moveTo(tStartLeft, pos);
  4619. context.lineTo(tStartLeft - 3 * opts.pix, pos);
  4620. gapwidth += 3 * opts.pix;
  4621. }
  4622. //画文字
  4623. switch (textAlign) {
  4624. case "left":
  4625. context.setTextAlign('left');
  4626. tmpstrat = tStartLeft - yAxisWidth.width
  4627. break;
  4628. case "right":
  4629. context.setTextAlign('right');
  4630. tmpstrat = tStartLeft - gapwidth
  4631. break;
  4632. default:
  4633. context.setTextAlign('center');
  4634. tmpstrat = tStartLeft - yAxisWidth.width / 2
  4635. }
  4636. context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);
  4637. } else if (yAxisWidth.position == 'right') {
  4638. //画刻度线
  4639. if (yData.calibration == true) {
  4640. context.moveTo(tStartRight, pos);
  4641. context.lineTo(tStartRight + 3 * opts.pix, pos);
  4642. gapwidth += 3 * opts.pix;
  4643. }
  4644. switch (textAlign) {
  4645. case "left":
  4646. context.setTextAlign('left');
  4647. tmpstrat = tStartRight + gapwidth
  4648. break;
  4649. case "right":
  4650. context.setTextAlign('right');
  4651. tmpstrat = tStartRight + yAxisWidth.width
  4652. break;
  4653. default:
  4654. context.setTextAlign('center');
  4655. tmpstrat = tStartRight + yAxisWidth.width / 2
  4656. }
  4657. context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);
  4658. } else if (yAxisWidth.position == 'center') {
  4659. //画刻度线
  4660. if (yData.calibration == true) {
  4661. context.moveTo(tStartCenter, pos);
  4662. context.lineTo(tStartCenter - 3 * opts.pix, pos);
  4663. gapwidth += 3 * opts.pix;
  4664. }
  4665. //画文字
  4666. switch (textAlign) {
  4667. case "left":
  4668. context.setTextAlign('left');
  4669. tmpstrat = tStartCenter - yAxisWidth.width
  4670. break;
  4671. case "right":
  4672. context.setTextAlign('right');
  4673. tmpstrat = tStartCenter - gapwidth
  4674. break;
  4675. default:
  4676. context.setTextAlign('center');
  4677. tmpstrat = tStartCenter - yAxisWidth.width / 2
  4678. }
  4679. context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);
  4680. }
  4681. context.closePath();
  4682. context.stroke();
  4683. context.setTextAlign('left');
  4684. });
  4685. //画Y轴轴线
  4686. if (yData.axisLine !== false) {
  4687. context.beginPath();
  4688. context.setStrokeStyle(yData.axisLineColor || '#cccccc');
  4689. context.setLineWidth(1 * opts.pix);
  4690. if (yAxisWidth.position == 'left') {
  4691. context.moveTo(tStartLeft, opts.height - opts.area[2]);
  4692. context.lineTo(tStartLeft, opts.area[0]);
  4693. } else if (yAxisWidth.position == 'right') {
  4694. context.moveTo(tStartRight, opts.height - opts.area[2]);
  4695. context.lineTo(tStartRight, opts.area[0]);
  4696. } else if (yAxisWidth.position == 'center') {
  4697. context.moveTo(tStartCenter, opts.height - opts.area[2]);
  4698. context.lineTo(tStartCenter, opts.area[0]);
  4699. }
  4700. context.stroke();
  4701. }
  4702. //画Y轴标题
  4703. if (opts.yAxis.showTitle) {
  4704. let titleFontSize = yData.titleFontSize * opts.pix || config.fontSize;
  4705. let title = yData.title;
  4706. context.beginPath();
  4707. context.setFontSize(titleFontSize);
  4708. context.setFillStyle(yData.titleFontColor || opts.fontColor);
  4709. if (yAxisWidth.position == 'left') {
  4710. context.fillText(title, tStartLeft - measureText(title, titleFontSize, context) / 2 + (yData.titleOffsetX || 0), opts.area[0] - (10 - (yData.titleOffsetY || 0)) * opts.pix);
  4711. } else if (yAxisWidth.position == 'right') {
  4712. context.fillText(title, tStartRight - measureText(title, titleFontSize, context) / 2 + (yData.titleOffsetX || 0), opts.area[0] - (10 - (yData.titleOffsetY || 0)) * opts.pix);
  4713. } else if (yAxisWidth.position == 'center') {
  4714. context.fillText(title, tStartCenter - measureText(title, titleFontSize, context) / 2 + (yData.titleOffsetX || 0), opts.area[0] - (10 - (yData.titleOffsetY || 0)) * opts.pix);
  4715. }
  4716. context.closePath();
  4717. context.stroke();
  4718. }
  4719. if (yAxisWidth.position == 'left') {
  4720. tStartLeft -= (yAxisWidth.width + opts.yAxis.padding * opts.pix);
  4721. } else {
  4722. tStartRight += yAxisWidth.width + opts.yAxis.padding * opts.pix;
  4723. }
  4724. }
  4725. }
  4726. }
  4727. }
  4728. function drawLegend(series, opts, config, context, chartData) {
  4729. if (opts.legend.show === false) {
  4730. return;
  4731. }
  4732. let legendData = chartData.legendData;
  4733. let legendList = legendData.points;
  4734. let legendArea = legendData.area;
  4735. let padding = opts.legend.padding * opts.pix;
  4736. let fontSize = opts.legend.fontSize * opts.pix;
  4737. let shapeWidth = 15 * opts.pix;
  4738. let shapeRight = 5 * opts.pix;
  4739. let itemGap = opts.legend.itemGap * opts.pix;
  4740. let lineHeight = Math.max(opts.legend.lineHeight * opts.pix, fontSize);
  4741. //画背景及边框
  4742. context.beginPath();
  4743. context.setLineWidth(opts.legend.borderWidth * opts.pix);
  4744. context.setStrokeStyle(opts.legend.borderColor);
  4745. context.setFillStyle(opts.legend.backgroundColor);
  4746. context.moveTo(legendArea.start.x, legendArea.start.y);
  4747. context.rect(legendArea.start.x, legendArea.start.y, legendArea.width, legendArea.height);
  4748. context.closePath();
  4749. context.fill();
  4750. context.stroke();
  4751. legendList.forEach(function(itemList, listIndex) {
  4752. let width = 0;
  4753. let height = 0;
  4754. width = legendData.widthArr[listIndex];
  4755. height = legendData.heightArr[listIndex];
  4756. let startX = 0;
  4757. let startY = 0;
  4758. if (opts.legend.position == 'top' || opts.legend.position == 'bottom') {
  4759. switch (opts.legend.float) {
  4760. case 'left':
  4761. startX = legendArea.start.x + padding;
  4762. break;
  4763. case 'right':
  4764. startX = legendArea.start.x + legendArea.width - width;
  4765. break;
  4766. default:
  4767. startX = legendArea.start.x + (legendArea.width - width) / 2;
  4768. }
  4769. startY = legendArea.start.y + padding + listIndex * lineHeight;
  4770. } else {
  4771. if (listIndex == 0) {
  4772. width = 0;
  4773. } else {
  4774. width = legendData.widthArr[listIndex - 1];
  4775. }
  4776. startX = legendArea.start.x + padding + width;
  4777. startY = legendArea.start.y + padding + (legendArea.height - height) / 2;
  4778. }
  4779. context.setFontSize(config.fontSize);
  4780. for (let i = 0; i < itemList.length; i++) {
  4781. let item = itemList[i];
  4782. item.area = [0, 0, 0, 0];
  4783. item.area[0] = startX;
  4784. item.area[1] = startY;
  4785. item.area[3] = startY + lineHeight;
  4786. context.beginPath();
  4787. context.setLineWidth(1 * opts.pix);
  4788. context.setStrokeStyle(item.show ? item.color : opts.legend.hiddenColor);
  4789. context.setFillStyle(item.show ? item.color : opts.legend.hiddenColor);
  4790. switch (item.legendShape) {
  4791. case 'line':
  4792. context.moveTo(startX, startY + 0.5 * lineHeight - 2 * opts.pix);
  4793. context.fillRect(startX, startY + 0.5 * lineHeight - 2 * opts.pix, 15 * opts.pix, 4 * opts.pix);
  4794. break;
  4795. case 'triangle':
  4796. context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
  4797. context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix);
  4798. context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix);
  4799. context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
  4800. break;
  4801. case 'diamond':
  4802. context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
  4803. context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * lineHeight);
  4804. context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight + 5 * opts.pix);
  4805. context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * lineHeight);
  4806. context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
  4807. break;
  4808. case 'circle':
  4809. context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight);
  4810. context.arc(startX + 7.5 * opts.pix, startY + 0.5 * lineHeight, 5 * opts.pix, 0, 2 * Math.PI);
  4811. break;
  4812. case 'rect':
  4813. context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix);
  4814. context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
  4815. break;
  4816. case 'square':
  4817. context.moveTo(startX + 5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix);
  4818. context.fillRect(startX + 5 * opts.pix, startY + 0.5 * lineHeight - 5 * opts.pix, 10 * opts.pix, 10 * opts.pix);
  4819. break;
  4820. case 'none':
  4821. break;
  4822. default:
  4823. context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pix);
  4824. context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
  4825. }
  4826. context.closePath();
  4827. context.fill();
  4828. context.stroke();
  4829. startX += shapeWidth + shapeRight;
  4830. let fontTrans = 0.5 * lineHeight + 0.5 * fontSize - 2;
  4831. const legendText = item.legendText ? item.legendText : item.name;
  4832. context.beginPath();
  4833. context.setFontSize(fontSize);
  4834. context.setFillStyle(item.show ? opts.legend.fontColor : opts.legend.hiddenColor);
  4835. context.fillText(legendText, startX, startY + fontTrans);
  4836. context.closePath();
  4837. context.stroke();
  4838. if (opts.legend.position == 'top' || opts.legend.position == 'bottom') {
  4839. startX += measureText(legendText, fontSize, context) + itemGap;
  4840. item.area[2] = startX;
  4841. } else {
  4842. item.area[2] = startX + measureText(legendText, fontSize, context) + itemGap;;
  4843. startX -= shapeWidth + shapeRight;
  4844. startY += lineHeight;
  4845. }
  4846. }
  4847. });
  4848. }
  4849. function drawPieDataPoints(series, opts, config, context) {
  4850. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  4851. var pieOption = assign({}, {
  4852. activeOpacity: 0.5,
  4853. activeRadius: 10,
  4854. offsetAngle: 0,
  4855. labelWidth: 15,
  4856. ringWidth: 30,
  4857. customRadius: 0,
  4858. border: false,
  4859. borderWidth: 2,
  4860. borderColor: '#FFFFFF',
  4861. centerColor: '#FFFFFF',
  4862. linearType: 'none',
  4863. customColor: [],
  4864. }, opts.type == "pie" ? opts.extra.pie : opts.extra.ring);
  4865. var centerPosition = {
  4866. x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
  4867. y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2
  4868. };
  4869. if (config.pieChartLinePadding == 0) {
  4870. config.pieChartLinePadding = pieOption.activeRadius * opts.pix;
  4871. }
  4872. var radius = Math.min((opts.width - opts.area[1] - opts.area[3]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding - config._pieTextMaxLength_, (opts.height - opts.area[0] - opts.area[2]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding);
  4873. radius = radius < 10 ? 10 : radius;
  4874. if (pieOption.customRadius > 0) {
  4875. radius = pieOption.customRadius * opts.pix;
  4876. }
  4877. series = getPieDataPoints(series, radius, process);
  4878. var activeRadius = pieOption.activeRadius * opts.pix;
  4879. pieOption.customColor = fillCustomColor(pieOption.linearType, pieOption.customColor, series, config);
  4880. series = series.map(function(eachSeries) {
  4881. eachSeries._start_ += (pieOption.offsetAngle) * Math.PI / 180;
  4882. return eachSeries;
  4883. });
  4884. series.forEach(function(eachSeries, seriesIndex) {
  4885. if (opts.tooltip) {
  4886. if (opts.tooltip.index == seriesIndex) {
  4887. context.beginPath();
  4888. context.setFillStyle(hexToRgb(eachSeries.color, pieOption.activeOpacity || 0.5));
  4889. context.moveTo(centerPosition.x, centerPosition.y);
  4890. context.arc(centerPosition.x, centerPosition.y, eachSeries._radius_ + activeRadius, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI);
  4891. context.closePath();
  4892. context.fill();
  4893. }
  4894. }
  4895. context.beginPath();
  4896. context.setLineWidth(pieOption.borderWidth * opts.pix);
  4897. context.lineJoin = "round";
  4898. context.setStrokeStyle(pieOption.borderColor);
  4899. var fillcolor = eachSeries.color;
  4900. if (pieOption.linearType == 'custom') {
  4901. var grd;
  4902. if(context.createCircularGradient){
  4903. grd = context.createCircularGradient(centerPosition.x, centerPosition.y, eachSeries._radius_)
  4904. }else{
  4905. grd = context.createRadialGradient(centerPosition.x, centerPosition.y, 0,centerPosition.x, centerPosition.y, eachSeries._radius_)
  4906. }
  4907. grd.addColorStop(0, hexToRgb(pieOption.customColor[eachSeries.linearIndex], 1))
  4908. grd.addColorStop(1, hexToRgb(eachSeries.color, 1))
  4909. fillcolor = grd
  4910. }
  4911. context.setFillStyle(fillcolor);
  4912. context.moveTo(centerPosition.x, centerPosition.y);
  4913. context.arc(centerPosition.x, centerPosition.y, eachSeries._radius_, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI);
  4914. context.closePath();
  4915. context.fill();
  4916. if (pieOption.border == true) {
  4917. context.stroke();
  4918. }
  4919. });
  4920. if (opts.type === 'ring') {
  4921. var innerPieWidth = radius * 0.6;
  4922. if (typeof pieOption.ringWidth === 'number' && pieOption.ringWidth > 0) {
  4923. innerPieWidth = Math.max(0, radius - pieOption.ringWidth * opts.pix);
  4924. }
  4925. context.beginPath();
  4926. context.setFillStyle(pieOption.centerColor);
  4927. context.moveTo(centerPosition.x, centerPosition.y);
  4928. context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI);
  4929. context.closePath();
  4930. context.fill();
  4931. }
  4932. if (opts.dataLabel !== false && process === 1) {
  4933. drawPieText(series, opts, config, context, radius, centerPosition);
  4934. }
  4935. if (process === 1 && opts.type === 'ring') {
  4936. drawRingTitle(opts, config, context, centerPosition);
  4937. }
  4938. return {
  4939. center: centerPosition,
  4940. radius: radius,
  4941. series: series
  4942. };
  4943. }
  4944. function drawRoseDataPoints(series, opts, config, context) {
  4945. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  4946. var roseOption = assign({}, {
  4947. type: 'area',
  4948. activeOpacity: 0.5,
  4949. activeRadius: 10,
  4950. offsetAngle: 0,
  4951. labelWidth: 15,
  4952. border: false,
  4953. borderWidth: 2,
  4954. borderColor: '#FFFFFF',
  4955. linearType: 'none',
  4956. customColor: [],
  4957. }, opts.extra.rose);
  4958. if (config.pieChartLinePadding == 0) {
  4959. config.pieChartLinePadding = roseOption.activeRadius * opts.pix;
  4960. }
  4961. var centerPosition = {
  4962. x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
  4963. y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2
  4964. };
  4965. var radius = Math.min((opts.width - opts.area[1] - opts.area[3]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding - config._pieTextMaxLength_, (opts.height - opts.area[0] - opts.area[2]) / 2 - config.pieChartLinePadding - config.pieChartTextPadding);
  4966. radius = radius < 10 ? 10 : radius;
  4967. var minRadius = roseOption.minRadius || radius * 0.5;
  4968. if(radius < minRadius){
  4969. radius = minRadius + 10;
  4970. }
  4971. series = getRoseDataPoints(series, roseOption.type, minRadius, radius, process);
  4972. var activeRadius = roseOption.activeRadius * opts.pix;
  4973. roseOption.customColor = fillCustomColor(roseOption.linearType, roseOption.customColor, series, config);
  4974. series = series.map(function(eachSeries) {
  4975. eachSeries._start_ += (roseOption.offsetAngle || 0) * Math.PI / 180;
  4976. return eachSeries;
  4977. });
  4978. series.forEach(function(eachSeries, seriesIndex) {
  4979. if (opts.tooltip) {
  4980. if (opts.tooltip.index == seriesIndex) {
  4981. context.beginPath();
  4982. context.setFillStyle(hexToRgb(eachSeries.color, roseOption.activeOpacity || 0.5));
  4983. context.moveTo(centerPosition.x, centerPosition.y);
  4984. context.arc(centerPosition.x, centerPosition.y, activeRadius + eachSeries._radius_, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._rose_proportion_ * Math.PI);
  4985. context.closePath();
  4986. context.fill();
  4987. }
  4988. }
  4989. context.beginPath();
  4990. context.setLineWidth(roseOption.borderWidth * opts.pix);
  4991. context.lineJoin = "round";
  4992. context.setStrokeStyle(roseOption.borderColor);
  4993. var fillcolor = eachSeries.color;
  4994. if (roseOption.linearType == 'custom') {
  4995. var grd;
  4996. if(context.createCircularGradient){
  4997. grd = context.createCircularGradient(centerPosition.x, centerPosition.y, eachSeries._radius_)
  4998. }else{
  4999. grd = context.createRadialGradient(centerPosition.x, centerPosition.y, 0,centerPosition.x, centerPosition.y, eachSeries._radius_)
  5000. }
  5001. grd.addColorStop(0, hexToRgb(roseOption.customColor[eachSeries.linearIndex], 1))
  5002. grd.addColorStop(1, hexToRgb(eachSeries.color, 1))
  5003. fillcolor = grd
  5004. }
  5005. context.setFillStyle(fillcolor);
  5006. context.moveTo(centerPosition.x, centerPosition.y);
  5007. context.arc(centerPosition.x, centerPosition.y, eachSeries._radius_, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._rose_proportion_ * Math.PI);
  5008. context.closePath();
  5009. context.fill();
  5010. if (roseOption.border == true) {
  5011. context.stroke();
  5012. }
  5013. });
  5014. if (opts.dataLabel !== false && process === 1) {
  5015. drawPieText(series, opts, config, context, radius, centerPosition);
  5016. }
  5017. return {
  5018. center: centerPosition,
  5019. radius: radius,
  5020. series: series
  5021. };
  5022. }
  5023. function drawArcbarDataPoints(series, opts, config, context) {
  5024. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  5025. var arcbarOption = assign({}, {
  5026. startAngle: 0.75,
  5027. endAngle: 0.25,
  5028. type: 'default',
  5029. direction: 'cw',
  5030. lineCap: 'round',
  5031. width: 12 ,
  5032. gap: 2 ,
  5033. linearType: 'none',
  5034. customColor: [],
  5035. }, opts.extra.arcbar);
  5036. series = getArcbarDataPoints(series, arcbarOption, process);
  5037. var centerPosition;
  5038. if (arcbarOption.centerX || arcbarOption.centerY) {
  5039. centerPosition = {
  5040. x: arcbarOption.centerX ? arcbarOption.centerX : opts.width / 2,
  5041. y: arcbarOption.centerY ? arcbarOption.centerY : opts.height / 2
  5042. };
  5043. } else {
  5044. centerPosition = {
  5045. x: opts.width / 2,
  5046. y: opts.height / 2
  5047. };
  5048. }
  5049. var radius;
  5050. if (arcbarOption.radius) {
  5051. radius = arcbarOption.radius;
  5052. } else {
  5053. radius = Math.min(centerPosition.x, centerPosition.y);
  5054. radius -= 5 * opts.pix;
  5055. radius -= arcbarOption.width / 2;
  5056. }
  5057. radius = radius < 10 ? 10 : radius;
  5058. arcbarOption.customColor = fillCustomColor(arcbarOption.linearType, arcbarOption.customColor, series, config);
  5059. for (let i = 0; i < series.length; i++) {
  5060. let eachSeries = series[i];
  5061. //背景颜色
  5062. context.setLineWidth(arcbarOption.width * opts.pix);
  5063. context.setStrokeStyle(arcbarOption.backgroundColor || '#E9E9E9');
  5064. context.setLineCap(arcbarOption.lineCap);
  5065. context.beginPath();
  5066. if (arcbarOption.type == 'default') {
  5067. context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i, arcbarOption.startAngle * Math.PI, arcbarOption.endAngle * Math.PI, arcbarOption.direction == 'ccw');
  5068. } else {
  5069. context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i, 0, 2 * Math.PI, arcbarOption.direction == 'ccw');
  5070. }
  5071. context.stroke();
  5072. //进度条
  5073. var fillColor = eachSeries.color
  5074. if(arcbarOption.linearType == 'custom'){
  5075. var grd = context.createLinearGradient(centerPosition.x - radius, centerPosition.y, centerPosition.x + radius, centerPosition.y);
  5076. grd.addColorStop(1, hexToRgb(arcbarOption.customColor[eachSeries.linearIndex], 1))
  5077. grd.addColorStop(0, hexToRgb(eachSeries.color, 1))
  5078. fillColor = grd;
  5079. }
  5080. context.setLineWidth(arcbarOption.width * opts.pix);
  5081. context.setStrokeStyle(fillColor);
  5082. context.setLineCap(arcbarOption.lineCap);
  5083. context.beginPath();
  5084. context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i, arcbarOption.startAngle * Math.PI, eachSeries._proportion_ * Math.PI, arcbarOption.direction == 'ccw');
  5085. context.stroke();
  5086. }
  5087. drawRingTitle(opts, config, context, centerPosition);
  5088. return {
  5089. center: centerPosition,
  5090. radius: radius,
  5091. series: series
  5092. };
  5093. }
  5094. function drawGaugeDataPoints(categories, series, opts, config, context) {
  5095. var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
  5096. var gaugeOption = assign({}, {
  5097. type: 'default',
  5098. startAngle: 0.75,
  5099. endAngle: 0.25,
  5100. width: 15,
  5101. labelOffset:13,
  5102. splitLine: {
  5103. fixRadius: 0,
  5104. splitNumber: 10,
  5105. width: 15,
  5106. color: '#FFFFFF',
  5107. childNumber: 5,
  5108. childWidth: 5
  5109. },
  5110. pointer: {
  5111. width: 15,
  5112. color: 'auto'
  5113. }
  5114. }, opts.extra.gauge);
  5115. if (gaugeOption.oldAngle == undefined) {
  5116. gaugeOption.oldAngle = gaugeOption.startAngle;
  5117. }
  5118. if (gaugeOption.oldData == undefined) {
  5119. gaugeOption.oldData = 0;
  5120. }
  5121. categories = getGaugeAxisPoints(categories, gaugeOption.startAngle, gaugeOption.endAngle);
  5122. var centerPosition = {
  5123. x: opts.width / 2,
  5124. y: opts.height / 2
  5125. };
  5126. var radius = Math.min(centerPosition.x, centerPosition.y);
  5127. radius -= 5 * opts.pix;
  5128. radius -= gaugeOption.width / 2;
  5129. radius = radius < 10 ? 10 : radius;
  5130. var innerRadius = radius - gaugeOption.width;
  5131. var totalAngle = 0;
  5132. //判断仪表盘的样式:default百度样式,progress新样式
  5133. if (gaugeOption.type == 'progress') {
  5134. //## 第一步画中心圆形背景和进度条背景
  5135. //中心圆形背景
  5136. var pieRadius = radius - gaugeOption.width * 3;
  5137. context.beginPath();
  5138. let gradient = context.createLinearGradient(centerPosition.x, centerPosition.y - pieRadius, centerPosition.x, centerPosition.y + pieRadius);
  5139. //配置渐变填充(起点:中心点向上减半径;结束点中心点向下加半径)
  5140. gradient.addColorStop('0', hexToRgb(series[0].color, 0.3));
  5141. gradient.addColorStop('1.0', hexToRgb("#FFFFFF", 0.1));
  5142. context.setFillStyle(gradient);
  5143. context.arc(centerPosition.x, centerPosition.y, pieRadius, 0, 2 * Math.PI, false);
  5144. context.fill();
  5145. //画进度条背景
  5146. context.setLineWidth(gaugeOption.width);
  5147. context.setStrokeStyle(hexToRgb(series[0].color, 0.3));
  5148. context.setLineCap('round');
  5149. context.beginPath();
  5150. context.arc(centerPosition.x, centerPosition.y, innerRadius, gaugeOption.startAngle * Math.PI, gaugeOption.endAngle * Math.PI, false);
  5151. context.stroke();
  5152. //## 第二步画刻度线
  5153. if (gaugeOption.endAngle < gaugeOption.startAngle) {
  5154. totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
  5155. } else {
  5156. totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
  5157. }
  5158. let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
  5159. let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber;
  5160. let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius;
  5161. let endX = -radius - gaugeOption.width - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.width;
  5162. context.save();
  5163. context.translate(centerPosition.x, centerPosition.y);
  5164. context.rotate((gaugeOption.startAngle - 1) * Math.PI);
  5165. let len = gaugeOption.splitLine.splitNumber * gaugeOption.splitLine.childNumber + 1;
  5166. let proc = series[0].data * process;
  5167. for (let i = 0; i < len; i++) {
  5168. context.beginPath();
  5169. //刻度线随进度变色
  5170. if (proc > (i / len)) {
  5171. context.setStrokeStyle(hexToRgb(series[0].color, 1));
  5172. } else {
  5173. context.setStrokeStyle(hexToRgb(series[0].color, 0.3));
  5174. }
  5175. context.setLineWidth(3 * opts.pix);
  5176. context.moveTo(startX, 0);
  5177. context.lineTo(endX, 0);
  5178. context.stroke();
  5179. context.rotate(childAngle * Math.PI);
  5180. }
  5181. context.restore();
  5182. //## 第三步画进度条
  5183. series = getGaugeArcbarDataPoints(series, gaugeOption, process);
  5184. context.setLineWidth(gaugeOption.width);
  5185. context.setStrokeStyle(series[0].color);
  5186. context.setLineCap('round');
  5187. context.beginPath();
  5188. context.arc(centerPosition.x, centerPosition.y, innerRadius, gaugeOption.startAngle * Math.PI, series[0]._proportion_ * Math.PI, false);
  5189. context.stroke();
  5190. //## 第四步画指针
  5191. let pointerRadius = radius - gaugeOption.width * 2.5;
  5192. context.save();
  5193. context.translate(centerPosition.x, centerPosition.y);
  5194. context.rotate((series[0]._proportion_ - 1) * Math.PI);
  5195. context.beginPath();
  5196. context.setLineWidth(gaugeOption.width / 3);
  5197. let gradient3 = context.createLinearGradient(0, -pointerRadius * 0.6, 0, pointerRadius * 0.6);
  5198. gradient3.addColorStop('0', hexToRgb('#FFFFFF', 0));
  5199. gradient3.addColorStop('0.5', hexToRgb(series[0].color, 1));
  5200. gradient3.addColorStop('1.0', hexToRgb('#FFFFFF', 0));
  5201. context.setStrokeStyle(gradient3);
  5202. context.arc(0, 0, pointerRadius, 0.85 * Math.PI, 1.15 * Math.PI, false);
  5203. context.stroke();
  5204. context.beginPath();
  5205. context.setLineWidth(1);
  5206. context.setStrokeStyle(series[0].color);
  5207. context.setFillStyle(series[0].color);
  5208. context.moveTo(-pointerRadius - gaugeOption.width / 3 / 2, -4);
  5209. context.lineTo(-pointerRadius - gaugeOption.width / 3 / 2 - 4, 0);
  5210. context.lineTo(-pointerRadius - gaugeOption.width / 3 / 2, 4);
  5211. context.lineTo(-pointerRadius - gaugeOption.width / 3 / 2, -4);
  5212. context.stroke();
  5213. context.fill();
  5214. context.restore();
  5215. //default百度样式
  5216. } else {
  5217. //画背景
  5218. context.setLineWidth(gaugeOption.width);
  5219. context.setLineCap('butt');
  5220. for (let i = 0; i < categories.length; i++) {
  5221. let eachCategories = categories[i];
  5222. context.beginPath();
  5223. context.setStrokeStyle(eachCategories.color);
  5224. context.arc(centerPosition.x, centerPosition.y, radius, eachCategories._startAngle_ * Math.PI, eachCategories._endAngle_ * Math.PI, false);
  5225. context.stroke();
  5226. }
  5227. context.save();
  5228. //画刻度线
  5229. if (gaugeOption.endAngle < gaugeOption.startAngle) {
  5230. totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
  5231. } else {
  5232. totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
  5233. }
  5234. let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
  5235. let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber;
  5236. let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius;
  5237. let endX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.width;
  5238. let childendX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.childWidth;
  5239. context.translate(centerPosition.x, centerPosition.y);
  5240. context.rotate((gaugeOption.startAngle - 1) * Math.PI);
  5241. for (let i = 0; i < gaugeOption.splitLine.splitNumber + 1; i++) {
  5242. context.beginPath();
  5243. context.setStrokeStyle(gaugeOption.splitLine.color);
  5244. context.setLineWidth(2 * opts.pix);
  5245. context.moveTo(startX, 0);
  5246. context.lineTo(endX, 0);
  5247. context.stroke();
  5248. context.rotate(splitAngle * Math.PI);
  5249. }
  5250. context.restore();
  5251. context.save();
  5252. context.translate(centerPosition.x, centerPosition.y);
  5253. context.rotate((gaugeOption.startAngle - 1) * Math.PI);
  5254. for (let i = 0; i < gaugeOption.splitLine.splitNumber * gaugeOption.splitLine.childNumber + 1; i++) {
  5255. context.beginPath();
  5256. context.setStrokeStyle(gaugeOption.splitLine.color);
  5257. context.setLineWidth(1 * opts.pix);
  5258. context.moveTo(startX, 0);
  5259. context.lineTo(childendX, 0);
  5260. context.stroke();
  5261. context.rotate(childAngle * Math.PI);
  5262. }
  5263. context.restore();
  5264. //画指针
  5265. series = getGaugeDataPoints(series, categories, gaugeOption, process);
  5266. for (let i = 0; i < series.length; i++) {
  5267. let eachSeries = series[i];
  5268. context.save();
  5269. context.translate(centerPosition.x, centerPosition.y);
  5270. context.rotate((eachSeries._proportion_ - 1) * Math.PI);
  5271. context.beginPath();
  5272. context.setFillStyle(eachSeries.color);
  5273. context.moveTo(gaugeOption.pointer.width, 0);
  5274. context.lineTo(0, -gaugeOption.pointer.width / 2);
  5275. context.lineTo(-innerRadius, 0);
  5276. context.lineTo(0, gaugeOption.pointer.width / 2);
  5277. context.lineTo(gaugeOption.pointer.width, 0);
  5278. context.closePath();
  5279. context.fill();
  5280. context.beginPath();
  5281. context.setFillStyle('#FFFFFF');
  5282. context.arc(0, 0, gaugeOption.pointer.width / 6, 0, 2 * Math.PI, false);
  5283. context.fill();
  5284. context.restore();
  5285. }
  5286. if (opts.dataLabel !== false) {
  5287. drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context);
  5288. }
  5289. }
  5290. //画仪表盘标题,副标题
  5291. drawRingTitle(opts, config, context, centerPosition);
  5292. if (process === 1 && opts.type === 'gauge') {
  5293. opts.extra.gauge.oldAngle = series[0]._proportion_;
  5294. opts.extra.gauge.oldData = series[0].data;
  5295. }
  5296. return {
  5297. center: centerPosition,
  5298. radius: radius,
  5299. innerRadius: innerRadius,
  5300. categories: categories,
  5301. totalAngle: totalAngle
  5302. };
  5303. }
  5304. function drawRadarDataPoints(series, opts, config, context) {
  5305. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  5306. var radarOption = assign({}, {
  5307. gridColor: '#cccccc',
  5308. gridType: 'radar',
  5309. gridEval:1,
  5310. axisLabel:false,
  5311. axisLabelTofix:0,
  5312. labelShow:true,
  5313. labelColor:'#666666',
  5314. labelPointShow:false,
  5315. labelPointRadius:3,
  5316. labelPointColor:'#cccccc',
  5317. opacity: 0.2,
  5318. gridCount: 3,
  5319. border:false,
  5320. borderWidth:2,
  5321. linearType: 'none',
  5322. customColor: [],
  5323. }, opts.extra.radar);
  5324. var coordinateAngle = getRadarCoordinateSeries(opts.categories.length);
  5325. var centerPosition = {
  5326. x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
  5327. y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2
  5328. };
  5329. var xr = (opts.width - opts.area[1] - opts.area[3]) / 2
  5330. var yr = (opts.height - opts.area[0] - opts.area[2]) / 2
  5331. var radius = Math.min(xr - (getMaxTextListLength(opts.categories, config.fontSize, context) + config.radarLabelTextMargin), yr - config.radarLabelTextMargin);
  5332. radius -= config.radarLabelTextMargin * opts.pix;
  5333. radius = radius < 10 ? 10 : radius;
  5334. radius = radarOption.radius ? radarOption.radius : radius;
  5335. // 画分割线
  5336. context.beginPath();
  5337. context.setLineWidth(1 * opts.pix);
  5338. context.setStrokeStyle(radarOption.gridColor);
  5339. coordinateAngle.forEach(function(angle,index) {
  5340. var pos = convertCoordinateOrigin(radius * Math.cos(angle), radius * Math.sin(angle), centerPosition);
  5341. context.moveTo(centerPosition.x, centerPosition.y);
  5342. if (index % radarOption.gridEval == 0) {
  5343. context.lineTo(pos.x, pos.y);
  5344. }
  5345. });
  5346. context.stroke();
  5347. context.closePath();
  5348. // 画背景网格
  5349. var _loop = function _loop(i) {
  5350. var startPos = {};
  5351. context.beginPath();
  5352. context.setLineWidth(1 * opts.pix);
  5353. context.setStrokeStyle(radarOption.gridColor);
  5354. if (radarOption.gridType == 'radar') {
  5355. coordinateAngle.forEach(function(angle, index) {
  5356. var pos = convertCoordinateOrigin(radius / radarOption.gridCount * i * Math.cos(angle), radius /
  5357. radarOption.gridCount * i * Math.sin(angle), centerPosition);
  5358. if (index === 0) {
  5359. startPos = pos;
  5360. context.moveTo(pos.x, pos.y);
  5361. } else {
  5362. context.lineTo(pos.x, pos.y);
  5363. }
  5364. });
  5365. context.lineTo(startPos.x, startPos.y);
  5366. } else {
  5367. var pos = convertCoordinateOrigin(radius / radarOption.gridCount * i * Math.cos(1.5), radius / radarOption.gridCount * i * Math.sin(1.5), centerPosition);
  5368. context.arc(centerPosition.x, centerPosition.y, centerPosition.y - pos.y, 0, 2 * Math.PI, false);
  5369. }
  5370. context.stroke();
  5371. context.closePath();
  5372. };
  5373. for (var i = 1; i <= radarOption.gridCount; i++) {
  5374. _loop(i);
  5375. }
  5376. radarOption.customColor = fillCustomColor(radarOption.linearType, radarOption.customColor, series, config);
  5377. var radarDataPoints = getRadarDataPoints(coordinateAngle, centerPosition, radius, series, opts, process);
  5378. radarDataPoints.forEach(function(eachSeries, seriesIndex) {
  5379. // 绘制区域数据
  5380. context.beginPath();
  5381. context.setLineWidth(radarOption.borderWidth * opts.pix);
  5382. context.setStrokeStyle(eachSeries.color);
  5383. var fillcolor = hexToRgb(eachSeries.color, radarOption.opacity);
  5384. if (radarOption.linearType == 'custom') {
  5385. var grd;
  5386. if(context.createCircularGradient){
  5387. grd = context.createCircularGradient(centerPosition.x, centerPosition.y, radius)
  5388. }else{
  5389. grd = context.createRadialGradient(centerPosition.x, centerPosition.y, 0,centerPosition.x, centerPosition.y, radius)
  5390. }
  5391. grd.addColorStop(0, hexToRgb(radarOption.customColor[series[seriesIndex].linearIndex], radarOption.opacity))
  5392. grd.addColorStop(1, hexToRgb(eachSeries.color, radarOption.opacity))
  5393. fillcolor = grd
  5394. }
  5395. context.setFillStyle(fillcolor);
  5396. eachSeries.data.forEach(function(item, index) {
  5397. if (index === 0) {
  5398. context.moveTo(item.position.x, item.position.y);
  5399. } else {
  5400. context.lineTo(item.position.x, item.position.y);
  5401. }
  5402. });
  5403. context.closePath();
  5404. context.fill();
  5405. if(radarOption.border === true){
  5406. context.stroke();
  5407. }
  5408. context.closePath();
  5409. if (opts.dataPointShape !== false) {
  5410. var points = eachSeries.data.map(function(item) {
  5411. return item.position;
  5412. });
  5413. drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
  5414. }
  5415. });
  5416. // 画刻度值
  5417. if(radarOption.axisLabel === true){
  5418. const maxData = Math.max(radarOption.max, Math.max.apply(null, dataCombine(series)));
  5419. const stepLength = radius / radarOption.gridCount;
  5420. const fontSize = opts.fontSize * opts.pix;
  5421. context.setFontSize(fontSize);
  5422. context.setFillStyle(opts.fontColor);
  5423. context.setTextAlign('left');
  5424. for (var i = 0; i < radarOption.gridCount + 1; i++) {
  5425. let label = i * maxData / radarOption.gridCount;
  5426. label = label.toFixed(radarOption.axisLabelTofix);
  5427. context.fillText(String(label), centerPosition.x + 3 * opts.pix, centerPosition.y - i * stepLength + fontSize / 2);
  5428. }
  5429. }
  5430. // draw label text
  5431. drawRadarLabel(coordinateAngle, radius, centerPosition, opts, config, context);
  5432. // draw dataLabel
  5433. if (opts.dataLabel !== false && process === 1) {
  5434. radarDataPoints.forEach(function(eachSeries, seriesIndex) {
  5435. context.beginPath();
  5436. var fontSize = eachSeries.textSize * opts.pix || config.fontSize;
  5437. context.setFontSize(fontSize);
  5438. context.setFillStyle(eachSeries.textColor || opts.fontColor);
  5439. eachSeries.data.forEach(function(item, index) {
  5440. //如果是中心点垂直的上下点位
  5441. if(Math.abs(item.position.x - centerPosition.x)<2){
  5442. //如果在上面
  5443. if(item.position.y < centerPosition.y){
  5444. context.setTextAlign('center');
  5445. context.fillText(item.value, item.position.x, item.position.y - 4);
  5446. }else{
  5447. context.setTextAlign('center');
  5448. context.fillText(item.value, item.position.x, item.position.y + fontSize + 2);
  5449. }
  5450. }else{
  5451. //如果在左侧
  5452. if(item.position.x < centerPosition.x){
  5453. context.setTextAlign('right');
  5454. context.fillText(item.value, item.position.x - 4, item.position.y + fontSize / 2 - 2);
  5455. }else{
  5456. context.setTextAlign('left');
  5457. context.fillText(item.value, item.position.x + 4, item.position.y + fontSize / 2 - 2);
  5458. }
  5459. }
  5460. });
  5461. context.closePath();
  5462. context.stroke();
  5463. });
  5464. context.setTextAlign('left');
  5465. }
  5466. return {
  5467. center: centerPosition,
  5468. radius: radius,
  5469. angleList: coordinateAngle
  5470. };
  5471. }
  5472. // 经纬度转墨卡托
  5473. function lonlat2mercator(longitude, latitude) {
  5474. var mercator = Array(2);
  5475. var x = longitude * 20037508.34 / 180;
  5476. var y = Math.log(Math.tan((90 + latitude) * Math.PI / 360)) / (Math.PI / 180);
  5477. y = y * 20037508.34 / 180;
  5478. mercator[0] = x;
  5479. mercator[1] = y;
  5480. return mercator;
  5481. }
  5482. // 墨卡托转经纬度
  5483. function mercator2lonlat(longitude, latitude) {
  5484. var lonlat = Array(2)
  5485. var x = longitude / 20037508.34 * 180;
  5486. var y = latitude / 20037508.34 * 180;
  5487. y = 180 / Math.PI * (2 * Math.atan(Math.exp(y * Math.PI / 180)) - Math.PI / 2);
  5488. lonlat[0] = x;
  5489. lonlat[1] = y;
  5490. return lonlat;
  5491. }
  5492. function getBoundingBox(data) {
  5493. var bounds = {},coords;
  5494. bounds.xMin = 180;
  5495. bounds.xMax = 0;
  5496. bounds.yMin = 90;
  5497. bounds.yMax = 0
  5498. for (var i = 0; i < data.length; i++) {
  5499. var coorda = data[i].geometry.coordinates
  5500. for (var k = 0; k < coorda.length; k++) {
  5501. coords = coorda[k];
  5502. if (coords.length == 1) {
  5503. coords = coords[0]
  5504. }
  5505. for (var j = 0; j < coords.length; j++) {
  5506. var longitude = coords[j][0];
  5507. var latitude = coords[j][1];
  5508. var point = {
  5509. x: longitude,
  5510. y: latitude
  5511. }
  5512. bounds.xMin = bounds.xMin < point.x ? bounds.xMin : point.x;
  5513. bounds.xMax = bounds.xMax > point.x ? bounds.xMax : point.x;
  5514. bounds.yMin = bounds.yMin < point.y ? bounds.yMin : point.y;
  5515. bounds.yMax = bounds.yMax > point.y ? bounds.yMax : point.y;
  5516. }
  5517. }
  5518. }
  5519. return bounds;
  5520. }
  5521. function coordinateToPoint(latitude, longitude, bounds, scale, xoffset, yoffset) {
  5522. return {
  5523. x: (longitude - bounds.xMin) * scale + xoffset,
  5524. y: (bounds.yMax - latitude) * scale + yoffset
  5525. };
  5526. }
  5527. function pointToCoordinate(pointY, pointX, bounds, scale, xoffset, yoffset) {
  5528. return {
  5529. x: (pointX - xoffset) / scale + bounds.xMin,
  5530. y: bounds.yMax - (pointY - yoffset) / scale
  5531. };
  5532. }
  5533. function isRayIntersectsSegment(poi, s_poi, e_poi) {
  5534. if (s_poi[1] == e_poi[1]) {
  5535. return false;
  5536. }
  5537. if (s_poi[1] > poi[1] && e_poi[1] > poi[1]) {
  5538. return false;
  5539. }
  5540. if (s_poi[1] < poi[1] && e_poi[1] < poi[1]) {
  5541. return false;
  5542. }
  5543. if (s_poi[1] == poi[1] && e_poi[1] > poi[1]) {
  5544. return false;
  5545. }
  5546. if (e_poi[1] == poi[1] && s_poi[1] > poi[1]) {
  5547. return false;
  5548. }
  5549. if (s_poi[0] < poi[0] && e_poi[1] < poi[1]) {
  5550. return false;
  5551. }
  5552. let xseg = e_poi[0] - (e_poi[0] - s_poi[0]) * (e_poi[1] - poi[1]) / (e_poi[1] - s_poi[1]);
  5553. if (xseg < poi[0]) {
  5554. return false;
  5555. } else {
  5556. return true;
  5557. }
  5558. }
  5559. function isPoiWithinPoly(poi, poly, mercator) {
  5560. let sinsc = 0;
  5561. for (let i = 0; i < poly.length; i++) {
  5562. let epoly = poly[i][0];
  5563. if (poly.length == 1) {
  5564. epoly = poly[i][0]
  5565. }
  5566. for (let j = 0; j < epoly.length - 1; j++) {
  5567. let s_poi = epoly[j];
  5568. let e_poi = epoly[j + 1];
  5569. if (mercator) {
  5570. s_poi = lonlat2mercator(epoly[j][0], epoly[j][1]);
  5571. e_poi = lonlat2mercator(epoly[j + 1][0], epoly[j + 1][1]);
  5572. }
  5573. if (isRayIntersectsSegment(poi, s_poi, e_poi)) {
  5574. sinsc += 1;
  5575. }
  5576. }
  5577. }
  5578. if (sinsc % 2 == 1) {
  5579. return true;
  5580. } else {
  5581. return false;
  5582. }
  5583. }
  5584. function drawMapDataPoints(series, opts, config, context) {
  5585. var mapOption = assign({}, {
  5586. border: true,
  5587. mercator: false,
  5588. borderWidth: 1,
  5589. active:true,
  5590. borderColor: '#666666',
  5591. fillOpacity: 0.6,
  5592. activeBorderColor: '#f04864',
  5593. activeFillColor: '#facc14',
  5594. activeFillOpacity: 1
  5595. }, opts.extra.map);
  5596. var coords, point;
  5597. var data = series;
  5598. var bounds = getBoundingBox(data);
  5599. if (mapOption.mercator) {
  5600. var max = lonlat2mercator(bounds.xMax, bounds.yMax)
  5601. var min = lonlat2mercator(bounds.xMin, bounds.yMin)
  5602. bounds.xMax = max[0]
  5603. bounds.yMax = max[1]
  5604. bounds.xMin = min[0]
  5605. bounds.yMin = min[1]
  5606. }
  5607. var xScale = opts.width / Math.abs(bounds.xMax - bounds.xMin);
  5608. var yScale = opts.height / Math.abs(bounds.yMax - bounds.yMin);
  5609. var scale = xScale < yScale ? xScale : yScale;
  5610. var xoffset = opts.width / 2 - Math.abs(bounds.xMax - bounds.xMin) / 2 * scale;
  5611. var yoffset = opts.height / 2 - Math.abs(bounds.yMax - bounds.yMin) / 2 * scale;
  5612. for (var i = 0; i < data.length; i++) {
  5613. context.beginPath();
  5614. context.setLineWidth(mapOption.borderWidth * opts.pix);
  5615. context.setStrokeStyle(mapOption.borderColor);
  5616. context.setFillStyle(hexToRgb(series[i].color, series[i].fillOpacity||mapOption.fillOpacity));
  5617. if (mapOption.active == true && opts.tooltip) {
  5618. if (opts.tooltip.index == i) {
  5619. context.setStrokeStyle(mapOption.activeBorderColor);
  5620. context.setFillStyle(hexToRgb(mapOption.activeFillColor, mapOption.activeFillOpacity));
  5621. }
  5622. }
  5623. var coorda = data[i].geometry.coordinates
  5624. for (var k = 0; k < coorda.length; k++) {
  5625. coords = coorda[k];
  5626. if (coords.length == 1) {
  5627. coords = coords[0]
  5628. }
  5629. for (var j = 0; j < coords.length; j++) {
  5630. var gaosi = Array(2);
  5631. if (mapOption.mercator) {
  5632. gaosi = lonlat2mercator(coords[j][0], coords[j][1])
  5633. } else {
  5634. gaosi = coords[j]
  5635. }
  5636. point = coordinateToPoint(gaosi[1], gaosi[0], bounds, scale, xoffset, yoffset)
  5637. if (j === 0) {
  5638. context.beginPath();
  5639. context.moveTo(point.x, point.y);
  5640. } else {
  5641. context.lineTo(point.x, point.y);
  5642. }
  5643. }
  5644. context.fill();
  5645. if (mapOption.border == true) {
  5646. context.stroke();
  5647. }
  5648. }
  5649. }
  5650. if (opts.dataLabel == true) {
  5651. for (var i = 0; i < data.length; i++) {
  5652. var centerPoint = data[i].properties.centroid;
  5653. if (centerPoint) {
  5654. if (mapOption.mercator) {
  5655. centerPoint = lonlat2mercator(data[i].properties.centroid[0], data[i].properties.centroid[1])
  5656. }
  5657. point = coordinateToPoint(centerPoint[1], centerPoint[0], bounds, scale, xoffset, yoffset);
  5658. let fontSize = data[i].textSize * opts.pix || config.fontSize;
  5659. let fontColor = data[i].textColor || opts.fontColor;
  5660. if(mapOption.active && mapOption.activeTextColor && opts.tooltip && opts.tooltip.index == i){
  5661. fontColor = mapOption.activeTextColor;
  5662. }
  5663. let text = data[i].properties.name;
  5664. context.beginPath();
  5665. context.setFontSize(fontSize)
  5666. context.setFillStyle(fontColor)
  5667. context.fillText(text, point.x - measureText(text, fontSize, context) / 2, point.y + fontSize / 2);
  5668. context.closePath();
  5669. context.stroke();
  5670. }
  5671. }
  5672. }
  5673. opts.chartData.mapData = {
  5674. bounds: bounds,
  5675. scale: scale,
  5676. xoffset: xoffset,
  5677. yoffset: yoffset,
  5678. mercator: mapOption.mercator
  5679. }
  5680. drawToolTipBridge(opts, config, context, 1);
  5681. context.draw();
  5682. }
  5683. function normalInt(min, max, iter) {
  5684. iter = iter == 0 ? 1 : iter;
  5685. var arr = [];
  5686. for (var i = 0; i < iter; i++) {
  5687. arr[i] = Math.random();
  5688. };
  5689. return Math.floor(arr.reduce(function(i, j) {
  5690. return i + j
  5691. }) / iter * (max - min)) + min;
  5692. };
  5693. function collisionNew(area, points, width, height) {
  5694. var isIn = false;
  5695. for (let i = 0; i < points.length; i++) {
  5696. if (points[i].area) {
  5697. if (area[3] < points[i].area[1] || area[0] > points[i].area[2] || area[1] > points[i].area[3] || area[2] < points[i].area[0]) {
  5698. if (area[0] < 0 || area[1] < 0 || area[2] > width || area[3] > height) {
  5699. isIn = true;
  5700. break;
  5701. } else {
  5702. isIn = false;
  5703. }
  5704. } else {
  5705. isIn = true;
  5706. break;
  5707. }
  5708. }
  5709. }
  5710. return isIn;
  5711. };
  5712. function getWordCloudPoint(opts, type, context) {
  5713. let points = opts.series;
  5714. switch (type) {
  5715. case 'normal':
  5716. for (let i = 0; i < points.length; i++) {
  5717. let text = points[i].name;
  5718. let tHeight = points[i].textSize * opts.pix;
  5719. let tWidth = measureText(text, tHeight, context);
  5720. let x, y;
  5721. let area;
  5722. let breaknum = 0;
  5723. while (true) {
  5724. breaknum++;
  5725. x = normalInt(-opts.width / 2, opts.width / 2, 5) - tWidth / 2;
  5726. y = normalInt(-opts.height / 2, opts.height / 2, 5) + tHeight / 2;
  5727. area = [x - 5 + opts.width / 2, y - 5 - tHeight + opts.height / 2, x + tWidth + 5 + opts.width / 2, y + 5 +
  5728. opts.height / 2
  5729. ];
  5730. let isCollision = collisionNew(area, points, opts.width, opts.height);
  5731. if (!isCollision) break;
  5732. if (breaknum == 1000) {
  5733. area = [-100, -100, -100, -100];
  5734. break;
  5735. }
  5736. };
  5737. points[i].area = area;
  5738. }
  5739. break;
  5740. case 'vertical':
  5741. function Spin() {
  5742. //获取均匀随机值,是否旋转,旋转的概率为(1-0.5)
  5743. if (Math.random() > 0.7) {
  5744. return true;
  5745. } else {
  5746. return false
  5747. };
  5748. };
  5749. for (let i = 0; i < points.length; i++) {
  5750. let text = points[i].name;
  5751. let tHeight = points[i].textSize * opts.pix;
  5752. let tWidth = measureText(text, tHeight, context);
  5753. let isSpin = Spin();
  5754. let x, y, area, areav;
  5755. let breaknum = 0;
  5756. while (true) {
  5757. breaknum++;
  5758. let isCollision;
  5759. if (isSpin) {
  5760. x = normalInt(-opts.width / 2, opts.width / 2, 5) - tWidth / 2;
  5761. y = normalInt(-opts.height / 2, opts.height / 2, 5) + tHeight / 2;
  5762. area = [y - 5 - tWidth + opts.width / 2, (-x - 5 + opts.height / 2), y + 5 + opts.width / 2, (-x + tHeight + 5 + opts.height / 2)];
  5763. areav = [opts.width - (opts.width / 2 - opts.height / 2) - (-x + tHeight + 5 + opts.height / 2) - 5, (opts.height / 2 - opts.width / 2) + (y - 5 - tWidth + opts.width / 2) - 5, opts.width - (opts.width / 2 - opts.height / 2) - (-x + tHeight + 5 + opts.height / 2) + tHeight, (opts.height / 2 - opts.width / 2) + (y - 5 - tWidth + opts.width / 2) + tWidth + 5];
  5764. isCollision = collisionNew(areav, points, opts.height, opts.width);
  5765. } else {
  5766. x = normalInt(-opts.width / 2, opts.width / 2, 5) - tWidth / 2;
  5767. y = normalInt(-opts.height / 2, opts.height / 2, 5) + tHeight / 2;
  5768. area = [x - 5 + opts.width / 2, y - 5 - tHeight + opts.height / 2, x + tWidth + 5 + opts.width / 2, y + 5 + opts.height / 2];
  5769. isCollision = collisionNew(area, points, opts.width, opts.height);
  5770. }
  5771. if (!isCollision) break;
  5772. if (breaknum == 1000) {
  5773. area = [-1000, -1000, -1000, -1000];
  5774. break;
  5775. }
  5776. };
  5777. if (isSpin) {
  5778. points[i].area = areav;
  5779. points[i].areav = area;
  5780. } else {
  5781. points[i].area = area;
  5782. }
  5783. points[i].rotate = isSpin;
  5784. };
  5785. break;
  5786. }
  5787. return points;
  5788. }
  5789. function drawWordCloudDataPoints(series, opts, config, context) {
  5790. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  5791. let wordOption = assign({}, {
  5792. type: 'normal',
  5793. autoColors: true
  5794. }, opts.extra.word);
  5795. if (!opts.chartData.wordCloudData) {
  5796. opts.chartData.wordCloudData = getWordCloudPoint(opts, wordOption.type, context);
  5797. }
  5798. context.beginPath();
  5799. context.setFillStyle(opts.background);
  5800. context.rect(0, 0, opts.width, opts.height);
  5801. context.fill();
  5802. context.save();
  5803. let points = opts.chartData.wordCloudData;
  5804. context.translate(opts.width / 2, opts.height / 2);
  5805. for (let i = 0; i < points.length; i++) {
  5806. context.save();
  5807. if (points[i].rotate) {
  5808. context.rotate(90 * Math.PI / 180);
  5809. }
  5810. let text = points[i].name;
  5811. let tHeight = points[i].textSize * opts.pix;
  5812. let tWidth = measureText(text, tHeight, context);
  5813. context.beginPath();
  5814. context.setStrokeStyle(points[i].color);
  5815. context.setFillStyle(points[i].color);
  5816. context.setFontSize(tHeight);
  5817. if (points[i].rotate) {
  5818. if (points[i].areav[0] > 0) {
  5819. if (opts.tooltip) {
  5820. if (opts.tooltip.index == i) {
  5821. context.strokeText(text, (points[i].areav[0] + 5 - opts.width / 2) * process - tWidth * (1 - process) / 2, (points[i].areav[1] + 5 + tHeight - opts.height / 2) * process);
  5822. } else {
  5823. context.fillText(text, (points[i].areav[0] + 5 - opts.width / 2) * process - tWidth * (1 - process) / 2, (points[i].areav[1] + 5 + tHeight - opts.height / 2) * process);
  5824. }
  5825. } else {
  5826. context.fillText(text, (points[i].areav[0] + 5 - opts.width / 2) * process - tWidth * (1 - process) / 2, (points[i].areav[1] + 5 + tHeight - opts.height / 2) * process);
  5827. }
  5828. }
  5829. } else {
  5830. if (points[i].area[0] > 0) {
  5831. if (opts.tooltip) {
  5832. if (opts.tooltip.index == i) {
  5833. context.strokeText(text, (points[i].area[0] + 5 - opts.width / 2) * process - tWidth * (1 - process) / 2, (points[i].area[1] + 5 + tHeight - opts.height / 2) * process);
  5834. } else {
  5835. context.fillText(text, (points[i].area[0] + 5 - opts.width / 2) * process - tWidth * (1 - process) / 2, (points[i].area[1] + 5 + tHeight - opts.height / 2) * process);
  5836. }
  5837. } else {
  5838. context.fillText(text, (points[i].area[0] + 5 - opts.width / 2) * process - tWidth * (1 - process) / 2, (points[i].area[1] + 5 + tHeight - opts.height / 2) * process);
  5839. }
  5840. }
  5841. }
  5842. context.stroke();
  5843. context.restore();
  5844. }
  5845. context.restore();
  5846. }
  5847. function drawFunnelDataPoints(series, opts, config, context) {
  5848. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  5849. let funnelOption = assign({}, {
  5850. type:'funnel',
  5851. activeWidth: 10,
  5852. activeOpacity: 0.3,
  5853. border: false,
  5854. borderWidth: 2,
  5855. borderColor: '#FFFFFF',
  5856. fillOpacity: 1,
  5857. minSize: 0,
  5858. labelAlign: 'right',
  5859. linearType: 'none',
  5860. customColor: [],
  5861. }, opts.extra.funnel);
  5862. let eachSpacing = (opts.height - opts.area[0] - opts.area[2]) / series.length;
  5863. let centerPosition = {
  5864. x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
  5865. y: opts.height - opts.area[2]
  5866. };
  5867. let activeWidth = funnelOption.activeWidth * opts.pix;
  5868. let radius = Math.min((opts.width - opts.area[1] - opts.area[3]) / 2 - activeWidth, (opts.height - opts.area[0] - opts.area[2]) / 2 - activeWidth);
  5869. let seriesNew = getFunnelDataPoints(series, radius, funnelOption, eachSpacing, process);
  5870. context.save();
  5871. context.translate(centerPosition.x, centerPosition.y);
  5872. funnelOption.customColor = fillCustomColor(funnelOption.linearType, funnelOption.customColor, series, config);
  5873. if(funnelOption.type == 'pyramid'){
  5874. for (let i = 0; i < seriesNew.length; i++) {
  5875. if (i == seriesNew.length -1) {
  5876. if (opts.tooltip) {
  5877. if (opts.tooltip.index == i) {
  5878. context.beginPath();
  5879. context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity));
  5880. context.moveTo(-activeWidth, -eachSpacing);
  5881. context.lineTo(-seriesNew[i].radius - activeWidth, 0);
  5882. context.lineTo(seriesNew[i].radius + activeWidth, 0);
  5883. context.lineTo(activeWidth, -eachSpacing);
  5884. context.lineTo(-activeWidth, -eachSpacing);
  5885. context.closePath();
  5886. context.fill();
  5887. }
  5888. }
  5889. seriesNew[i].funnelArea = [centerPosition.x - seriesNew[i].radius, centerPosition.y - eachSpacing * (i + 1), centerPosition.x + seriesNew[i].radius, centerPosition.y - eachSpacing * i];
  5890. context.beginPath();
  5891. context.setLineWidth(funnelOption.borderWidth * opts.pix);
  5892. context.setStrokeStyle(funnelOption.borderColor);
  5893. var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity);
  5894. if (funnelOption.linearType == 'custom') {
  5895. var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing);
  5896. grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
  5897. grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity));
  5898. grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
  5899. fillColor = grd
  5900. }
  5901. context.setFillStyle(fillColor);
  5902. context.moveTo(0, -eachSpacing);
  5903. context.lineTo(-seriesNew[i].radius, 0);
  5904. context.lineTo(seriesNew[i].radius, 0);
  5905. context.lineTo(0, -eachSpacing);
  5906. context.closePath();
  5907. context.fill();
  5908. if (funnelOption.border == true) {
  5909. context.stroke();
  5910. }
  5911. } else {
  5912. if (opts.tooltip) {
  5913. if (opts.tooltip.index == i) {
  5914. context.beginPath();
  5915. context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity));
  5916. context.moveTo(0, 0);
  5917. context.lineTo(-seriesNew[i].radius - activeWidth, 0);
  5918. context.lineTo(-seriesNew[i + 1].radius - activeWidth, -eachSpacing);
  5919. context.lineTo(seriesNew[i + 1].radius + activeWidth, -eachSpacing);
  5920. context.lineTo(seriesNew[i].radius + activeWidth, 0);
  5921. context.lineTo(0, 0);
  5922. context.closePath();
  5923. context.fill();
  5924. }
  5925. }
  5926. seriesNew[i].funnelArea = [centerPosition.x - seriesNew[i].radius, centerPosition.y - eachSpacing * (i + 1), centerPosition.x + seriesNew[i].radius, centerPosition.y - eachSpacing * i];
  5927. context.beginPath();
  5928. context.setLineWidth(funnelOption.borderWidth * opts.pix);
  5929. context.setStrokeStyle(funnelOption.borderColor);
  5930. var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity);
  5931. if (funnelOption.linearType == 'custom') {
  5932. var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing);
  5933. grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
  5934. grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity));
  5935. grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
  5936. fillColor = grd
  5937. }
  5938. context.setFillStyle(fillColor);
  5939. context.moveTo(0, 0);
  5940. context.lineTo(-seriesNew[i].radius, 0);
  5941. context.lineTo(-seriesNew[i + 1].radius, -eachSpacing);
  5942. context.lineTo(seriesNew[i + 1].radius, -eachSpacing);
  5943. context.lineTo(seriesNew[i].radius, 0);
  5944. context.lineTo(0, 0);
  5945. context.closePath();
  5946. context.fill();
  5947. if (funnelOption.border == true) {
  5948. context.stroke();
  5949. }
  5950. }
  5951. context.translate(0, -eachSpacing)
  5952. }
  5953. }else{
  5954. context.translate(0, - (seriesNew.length - 1) * eachSpacing);
  5955. for (let i = 0; i < seriesNew.length; i++) {
  5956. if (i == seriesNew.length - 1) {
  5957. if (opts.tooltip) {
  5958. if (opts.tooltip.index == i) {
  5959. context.beginPath();
  5960. context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity));
  5961. context.moveTo(-activeWidth - funnelOption.minSize/2, 0);
  5962. context.lineTo(-seriesNew[i].radius - activeWidth, -eachSpacing);
  5963. context.lineTo(seriesNew[i].radius + activeWidth, -eachSpacing);
  5964. context.lineTo(activeWidth + funnelOption.minSize/2, 0);
  5965. context.lineTo(-activeWidth - funnelOption.minSize/2, 0);
  5966. context.closePath();
  5967. context.fill();
  5968. }
  5969. }
  5970. seriesNew[i].funnelArea = [centerPosition.x - seriesNew[i].radius, centerPosition.y - eachSpacing, centerPosition.x + seriesNew[i].radius, centerPosition.y ];
  5971. context.beginPath();
  5972. context.setLineWidth(funnelOption.borderWidth * opts.pix);
  5973. context.setStrokeStyle(funnelOption.borderColor);
  5974. var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity);
  5975. if (funnelOption.linearType == 'custom') {
  5976. var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing);
  5977. grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
  5978. grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity));
  5979. grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
  5980. fillColor = grd
  5981. }
  5982. context.setFillStyle(fillColor);
  5983. context.moveTo(0, 0);
  5984. context.lineTo(-funnelOption.minSize/2, 0);
  5985. context.lineTo(-seriesNew[i].radius, -eachSpacing);
  5986. context.lineTo(seriesNew[i].radius, -eachSpacing);
  5987. context.lineTo(funnelOption.minSize/2, 0);
  5988. context.lineTo(0, 0);
  5989. context.closePath();
  5990. context.fill();
  5991. if (funnelOption.border == true) {
  5992. context.stroke();
  5993. }
  5994. } else {
  5995. if (opts.tooltip) {
  5996. if (opts.tooltip.index == i) {
  5997. context.beginPath();
  5998. context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity));
  5999. context.moveTo(0, 0);
  6000. context.lineTo(-seriesNew[i + 1].radius - activeWidth, 0);
  6001. context.lineTo(-seriesNew[i].radius - activeWidth, -eachSpacing);
  6002. context.lineTo(seriesNew[i].radius + activeWidth, -eachSpacing);
  6003. context.lineTo(seriesNew[i + 1].radius + activeWidth, 0);
  6004. context.lineTo(0, 0);
  6005. context.closePath();
  6006. context.fill();
  6007. }
  6008. }
  6009. seriesNew[i].funnelArea = [centerPosition.x - seriesNew[i].radius, centerPosition.y - eachSpacing * (seriesNew.length - i), centerPosition.x + seriesNew[i].radius, centerPosition.y - eachSpacing * (seriesNew.length - i - 1)];
  6010. context.beginPath();
  6011. context.setLineWidth(funnelOption.borderWidth * opts.pix);
  6012. context.setStrokeStyle(funnelOption.borderColor);
  6013. var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity);
  6014. if (funnelOption.linearType == 'custom') {
  6015. var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing);
  6016. grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
  6017. grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity));
  6018. grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
  6019. fillColor = grd
  6020. }
  6021. context.setFillStyle(fillColor);
  6022. context.moveTo(0, 0);
  6023. context.lineTo(-seriesNew[i + 1].radius, 0);
  6024. context.lineTo(-seriesNew[i].radius, -eachSpacing);
  6025. context.lineTo(seriesNew[i].radius, -eachSpacing);
  6026. context.lineTo(seriesNew[i + 1].radius, 0);
  6027. context.lineTo(0, 0);
  6028. context.closePath();
  6029. context.fill();
  6030. if (funnelOption.border == true) {
  6031. context.stroke();
  6032. }
  6033. }
  6034. context.translate(0, eachSpacing)
  6035. }
  6036. }
  6037. context.restore();
  6038. if (opts.dataLabel !== false && process === 1) {
  6039. drawFunnelText(seriesNew, opts, context, eachSpacing, funnelOption.labelAlign, activeWidth, centerPosition);
  6040. }
  6041. if (process === 1) {
  6042. drawFunnelCenterText(seriesNew, opts, context, eachSpacing, funnelOption.labelAlign, activeWidth, centerPosition);
  6043. }
  6044. return {
  6045. center: centerPosition,
  6046. radius: radius,
  6047. series: seriesNew
  6048. };
  6049. }
  6050. function drawFunnelText(series, opts, context, eachSpacing, labelAlign, activeWidth, centerPosition) {
  6051. for (let i = 0; i < series.length; i++) {
  6052. let item = series[i];
  6053. if(item.labelShow === false){
  6054. continue;
  6055. }
  6056. let startX, endX, startY, fontSize;
  6057. let text = item.formatter ? item.formatter(item,i,series,opts) : util.toFixed(item._proportion_ * 100) + '%';
  6058. text = item.labelText ? item.labelText : text;
  6059. if (labelAlign == 'right') {
  6060. if (i == series.length -1) {
  6061. startX = (item.funnelArea[2] + centerPosition.x) / 2;
  6062. } else {
  6063. startX = (item.funnelArea[2] + series[i + 1].funnelArea[2]) / 2;
  6064. }
  6065. endX = startX + activeWidth * 2;
  6066. startY = item.funnelArea[1] + eachSpacing / 2;
  6067. fontSize = item.textSize * opts.pix || opts.fontSize * opts.pix;
  6068. context.setLineWidth(1 * opts.pix);
  6069. context.setStrokeStyle(item.color);
  6070. context.setFillStyle(item.color);
  6071. context.beginPath();
  6072. context.moveTo(startX, startY);
  6073. context.lineTo(endX, startY);
  6074. context.stroke();
  6075. context.closePath();
  6076. context.beginPath();
  6077. context.moveTo(endX, startY);
  6078. context.arc(endX, startY, 2 * opts.pix, 0, 2 * Math.PI);
  6079. context.closePath();
  6080. context.fill();
  6081. context.beginPath();
  6082. context.setFontSize(fontSize);
  6083. context.setFillStyle(item.textColor || opts.fontColor);
  6084. context.fillText(text, endX + 5, startY + fontSize / 2 - 2);
  6085. context.closePath();
  6086. context.stroke();
  6087. context.closePath();
  6088. }
  6089. if (labelAlign == 'left') {
  6090. if (i == series.length -1) {
  6091. startX = (item.funnelArea[0] + centerPosition.x) / 2;
  6092. } else {
  6093. startX = (item.funnelArea[0] + series[i + 1].funnelArea[0]) / 2;
  6094. }
  6095. endX = startX - activeWidth * 2;
  6096. startY = item.funnelArea[1] + eachSpacing / 2;
  6097. fontSize = item.textSize * opts.pix || opts.fontSize * opts.pix;
  6098. context.setLineWidth(1 * opts.pix);
  6099. context.setStrokeStyle(item.color);
  6100. context.setFillStyle(item.color);
  6101. context.beginPath();
  6102. context.moveTo(startX, startY);
  6103. context.lineTo(endX, startY);
  6104. context.stroke();
  6105. context.closePath();
  6106. context.beginPath();
  6107. context.moveTo(endX, startY);
  6108. context.arc(endX, startY, 2, 0, 2 * Math.PI);
  6109. context.closePath();
  6110. context.fill();
  6111. context.beginPath();
  6112. context.setFontSize(fontSize);
  6113. context.setFillStyle(item.textColor || opts.fontColor);
  6114. context.fillText(text, endX - 5 - measureText(text, fontSize, context), startY + fontSize / 2 - 2);
  6115. context.closePath();
  6116. context.stroke();
  6117. context.closePath();
  6118. }
  6119. }
  6120. }
  6121. function drawFunnelCenterText(series, opts, context, eachSpacing, labelAlign, activeWidth, centerPosition) {
  6122. for (let i = 0; i < series.length; i++) {
  6123. let item = series[i];
  6124. let startY, fontSize;
  6125. if (item.centerText) {
  6126. startY = item.funnelArea[1] + eachSpacing / 2;
  6127. fontSize = item.centerTextSize * opts.pix || opts.fontSize * opts.pix;
  6128. context.beginPath();
  6129. context.setFontSize(fontSize);
  6130. context.setFillStyle(item.centerTextColor || "#FFFFFF");
  6131. context.fillText(item.centerText, centerPosition.x - measureText(item.centerText, fontSize, context) / 2, startY + fontSize / 2 - 2);
  6132. context.closePath();
  6133. context.stroke();
  6134. context.closePath();
  6135. }
  6136. }
  6137. }
  6138. function drawCanvas(opts, context) {
  6139. context.save();
  6140. context.translate(0, 0.5);
  6141. context.restore();
  6142. context.draw();
  6143. }
  6144. var Timing = {
  6145. easeIn: function easeIn(pos) {
  6146. return Math.pow(pos, 3);
  6147. },
  6148. easeOut: function easeOut(pos) {
  6149. return Math.pow(pos - 1, 3) + 1;
  6150. },
  6151. easeInOut: function easeInOut(pos) {
  6152. if ((pos /= 0.5) < 1) {
  6153. return 0.5 * Math.pow(pos, 3);
  6154. } else {
  6155. return 0.5 * (Math.pow(pos - 2, 3) + 2);
  6156. }
  6157. },
  6158. linear: function linear(pos) {
  6159. return pos;
  6160. }
  6161. };
  6162. function Animation(opts) {
  6163. this.isStop = false;
  6164. opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration;
  6165. opts.timing = opts.timing || 'easeInOut';
  6166. var delay = 17;
  6167. function createAnimationFrame() {
  6168. if (typeof setTimeout !== 'undefined') {
  6169. return function(step, delay) {
  6170. setTimeout(function() {
  6171. var timeStamp = +new Date();
  6172. step(timeStamp);
  6173. }, delay);
  6174. };
  6175. } else if (typeof requestAnimationFrame !== 'undefined') {
  6176. return requestAnimationFrame;
  6177. } else {
  6178. return function(step) {
  6179. step(null);
  6180. };
  6181. }
  6182. };
  6183. var animationFrame = createAnimationFrame();
  6184. var startTimeStamp = null;
  6185. var _step = function step(timestamp) {
  6186. if (timestamp === null || this.isStop === true) {
  6187. opts.onProcess && opts.onProcess(1);
  6188. opts.onAnimationFinish && opts.onAnimationFinish();
  6189. return;
  6190. }
  6191. if (startTimeStamp === null) {
  6192. startTimeStamp = timestamp;
  6193. }
  6194. if (timestamp - startTimeStamp < opts.duration) {
  6195. var process = (timestamp - startTimeStamp) / opts.duration;
  6196. var timingFunction = Timing[opts.timing];
  6197. process = timingFunction(process);
  6198. opts.onProcess && opts.onProcess(process);
  6199. animationFrame(_step, delay);
  6200. } else {
  6201. opts.onProcess && opts.onProcess(1);
  6202. opts.onAnimationFinish && opts.onAnimationFinish();
  6203. }
  6204. };
  6205. _step = _step.bind(this);
  6206. animationFrame(_step, delay);
  6207. }
  6208. Animation.prototype.stop = function() {
  6209. this.isStop = true;
  6210. };
  6211. function drawCharts(type, opts, config, context) {
  6212. var _this = this;
  6213. var series = opts.series;
  6214. //兼容ECharts饼图类数据格式
  6215. if (type === 'pie' || type === 'ring' || type === 'mount' || type === 'rose' || type === 'funnel') {
  6216. series = fixPieSeries(series, opts, config);
  6217. }
  6218. var categories = opts.categories;
  6219. if (type === 'mount') {
  6220. categories = [];
  6221. for (let j = 0; j < series.length; j++) {
  6222. if(series[j].show !== false) categories.push(series[j].name)
  6223. }
  6224. opts.categories = categories;
  6225. }
  6226. series = fillSeries(series, opts, config);
  6227. var duration = opts.animation ? opts.duration : 0;
  6228. _this.animationInstance && _this.animationInstance.stop();
  6229. var seriesMA = null;
  6230. if (type == 'candle') {
  6231. let average = assign({}, opts.extra.candle.average);
  6232. if (average.show) {
  6233. seriesMA = calCandleMA(average.day, average.name, average.color, series[0].data);
  6234. seriesMA = fillSeries(seriesMA, opts, config);
  6235. opts.seriesMA = seriesMA;
  6236. } else if (opts.seriesMA) {
  6237. seriesMA = opts.seriesMA = fillSeries(opts.seriesMA, opts, config);
  6238. } else {
  6239. seriesMA = series;
  6240. }
  6241. } else {
  6242. seriesMA = series;
  6243. }
  6244. /* 过滤掉show=false的series */
  6245. opts._series_ = series = filterSeries(series);
  6246. //重新计算图表区域
  6247. opts.area = new Array(4);
  6248. //复位绘图区域
  6249. for (let j = 0; j < 4; j++) {
  6250. opts.area[j] = opts.padding[j] * opts.pix;
  6251. }
  6252. //通过计算三大区域:图例、X轴、Y轴的大小,确定绘图区域
  6253. var _calLegendData = calLegendData(seriesMA, opts, config, opts.chartData, context),
  6254. legendHeight = _calLegendData.area.wholeHeight,
  6255. legendWidth = _calLegendData.area.wholeWidth;
  6256. switch (opts.legend.position) {
  6257. case 'top':
  6258. opts.area[0] += legendHeight;
  6259. break;
  6260. case 'bottom':
  6261. opts.area[2] += legendHeight;
  6262. break;
  6263. case 'left':
  6264. opts.area[3] += legendWidth;
  6265. break;
  6266. case 'right':
  6267. opts.area[1] += legendWidth;
  6268. break;
  6269. }
  6270. let _calYAxisData = {},
  6271. yAxisWidth = 0;
  6272. if (opts.type === 'line' || opts.type === 'column'|| opts.type === 'mount' || opts.type === 'area' || opts.type === 'mix' || opts.type === 'candle' || opts.type === 'scatter' || opts.type === 'bubble' || opts.type === 'bar') {
  6273. _calYAxisData = calYAxisData(series, opts, config, context);
  6274. yAxisWidth = _calYAxisData.yAxisWidth;
  6275. //如果显示Y轴标题
  6276. if (opts.yAxis.showTitle) {
  6277. let maxTitleHeight = 0;
  6278. for (let i = 0; i < opts.yAxis.data.length; i++) {
  6279. maxTitleHeight = Math.max(maxTitleHeight, opts.yAxis.data[i].titleFontSize ? opts.yAxis.data[i].titleFontSize * opts.pix : config.fontSize)
  6280. }
  6281. opts.area[0] += maxTitleHeight;
  6282. }
  6283. let rightIndex = 0,
  6284. leftIndex = 0;
  6285. //计算主绘图区域左右位置
  6286. for (let i = 0; i < yAxisWidth.length; i++) {
  6287. if (yAxisWidth[i].position == 'left') {
  6288. if (leftIndex > 0) {
  6289. opts.area[3] += yAxisWidth[i].width + opts.yAxis.padding * opts.pix;
  6290. } else {
  6291. opts.area[3] += yAxisWidth[i].width;
  6292. }
  6293. leftIndex += 1;
  6294. } else if (yAxisWidth[i].position == 'right') {
  6295. if (rightIndex > 0) {
  6296. opts.area[1] += yAxisWidth[i].width + opts.yAxis.padding * opts.pix;
  6297. } else {
  6298. opts.area[1] += yAxisWidth[i].width;
  6299. }
  6300. rightIndex += 1;
  6301. }
  6302. }
  6303. } else {
  6304. config.yAxisWidth = yAxisWidth;
  6305. }
  6306. opts.chartData.yAxisData = _calYAxisData;
  6307. if (opts.categories && opts.categories.length && opts.type !== 'radar' && opts.type !== 'gauge' && opts.type !== 'bar') {
  6308. opts.chartData.xAxisData = getXAxisPoints(opts.categories, opts, config);
  6309. let _calCategoriesData = calCategoriesData(opts.categories, opts, config, opts.chartData.xAxisData.eachSpacing, context),
  6310. xAxisHeight = _calCategoriesData.xAxisHeight,
  6311. angle = _calCategoriesData.angle;
  6312. config.xAxisHeight = xAxisHeight;
  6313. config._xAxisTextAngle_ = angle;
  6314. opts.area[2] += xAxisHeight;
  6315. opts.chartData.categoriesData = _calCategoriesData;
  6316. } else {
  6317. if (opts.type === 'line' || opts.type === 'area' || opts.type === 'scatter' || opts.type === 'bubble' || opts.type === 'bar') {
  6318. opts.chartData.xAxisData = calXAxisData(series, opts, config, context);
  6319. categories = opts.chartData.xAxisData.rangesFormat;
  6320. let _calCategoriesData = calCategoriesData(categories, opts, config, opts.chartData.xAxisData.eachSpacing, context),
  6321. xAxisHeight = _calCategoriesData.xAxisHeight,
  6322. angle = _calCategoriesData.angle;
  6323. config.xAxisHeight = xAxisHeight;
  6324. config._xAxisTextAngle_ = angle;
  6325. opts.area[2] += xAxisHeight;
  6326. opts.chartData.categoriesData = _calCategoriesData;
  6327. } else {
  6328. opts.chartData.xAxisData = {
  6329. xAxisPoints: []
  6330. };
  6331. }
  6332. }
  6333. //计算右对齐偏移距离
  6334. if (opts.enableScroll && opts.xAxis.scrollAlign == 'right' && opts._scrollDistance_ === undefined) {
  6335. let offsetLeft = 0,
  6336. xAxisPoints = opts.chartData.xAxisData.xAxisPoints,
  6337. startX = opts.chartData.xAxisData.startX,
  6338. endX = opts.chartData.xAxisData.endX,
  6339. eachSpacing = opts.chartData.xAxisData.eachSpacing;
  6340. let totalWidth = eachSpacing * (xAxisPoints.length - 1);
  6341. let screenWidth = endX - startX;
  6342. offsetLeft = screenWidth - totalWidth;
  6343. _this.scrollOption.currentOffset = offsetLeft;
  6344. _this.scrollOption.startTouchX = offsetLeft;
  6345. _this.scrollOption.distance = 0;
  6346. _this.scrollOption.lastMoveTime = 0;
  6347. opts._scrollDistance_ = offsetLeft;
  6348. }
  6349. if (type === 'pie' || type === 'ring' || type === 'rose') {
  6350. config._pieTextMaxLength_ = opts.dataLabel === false ? 0 : getPieTextMaxLength(seriesMA, config, context, opts);
  6351. }
  6352. switch (type) {
  6353. case 'word':
  6354. this.animationInstance = new Animation({
  6355. timing: opts.timing,
  6356. duration: duration,
  6357. onProcess: function(process) {
  6358. context.clearRect(0, 0, opts.width, opts.height);
  6359. if (opts.rotate) {
  6360. contextRotate(context, opts);
  6361. }
  6362. drawWordCloudDataPoints(series, opts, config, context, process);
  6363. drawCanvas(opts, context);
  6364. },
  6365. onAnimationFinish: function onAnimationFinish() {
  6366. _this.uevent.trigger('renderComplete');
  6367. }
  6368. });
  6369. break;
  6370. case 'map':
  6371. context.clearRect(0, 0, opts.width, opts.height);
  6372. drawMapDataPoints(series, opts, config, context);
  6373. setTimeout(()=>{
  6374. this.uevent.trigger('renderComplete');
  6375. },50)
  6376. break;
  6377. case 'funnel':
  6378. this.animationInstance = new Animation({
  6379. timing: opts.timing,
  6380. duration: duration,
  6381. onProcess: function(process) {
  6382. context.clearRect(0, 0, opts.width, opts.height);
  6383. if (opts.rotate) {
  6384. contextRotate(context, opts);
  6385. }
  6386. opts.chartData.funnelData = drawFunnelDataPoints(series, opts, config, context, process);
  6387. drawLegend(opts.series, opts, config, context, opts.chartData);
  6388. drawToolTipBridge(opts, config, context, process);
  6389. drawCanvas(opts, context);
  6390. },
  6391. onAnimationFinish: function onAnimationFinish() {
  6392. _this.uevent.trigger('renderComplete');
  6393. }
  6394. });
  6395. break;
  6396. case 'line':
  6397. this.animationInstance = new Animation({
  6398. timing: opts.timing,
  6399. duration: duration,
  6400. onProcess: function onProcess(process) {
  6401. context.clearRect(0, 0, opts.width, opts.height);
  6402. if (opts.rotate) {
  6403. contextRotate(context, opts);
  6404. }
  6405. drawYAxisGrid(categories, opts, config, context);
  6406. drawXAxis(categories, opts, config, context);
  6407. var _drawLineDataPoints = drawLineDataPoints(series, opts, config, context, process),
  6408. xAxisPoints = _drawLineDataPoints.xAxisPoints,
  6409. calPoints = _drawLineDataPoints.calPoints,
  6410. eachSpacing = _drawLineDataPoints.eachSpacing;
  6411. opts.chartData.xAxisPoints = xAxisPoints;
  6412. opts.chartData.calPoints = calPoints;
  6413. opts.chartData.eachSpacing = eachSpacing;
  6414. drawYAxis(series, opts, config, context);
  6415. if (opts.enableMarkLine !== false && process === 1) {
  6416. drawMarkLine(opts, config, context);
  6417. }
  6418. drawLegend(opts.series, opts, config, context, opts.chartData);
  6419. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  6420. drawCanvas(opts, context);
  6421. },
  6422. onAnimationFinish: function onAnimationFinish() {
  6423. _this.uevent.trigger('renderComplete');
  6424. }
  6425. });
  6426. break;
  6427. case 'scatter':
  6428. this.animationInstance = new Animation({
  6429. timing: opts.timing,
  6430. duration: duration,
  6431. onProcess: function onProcess(process) {
  6432. context.clearRect(0, 0, opts.width, opts.height);
  6433. if (opts.rotate) {
  6434. contextRotate(context, opts);
  6435. }
  6436. drawYAxisGrid(categories, opts, config, context);
  6437. drawXAxis(categories, opts, config, context);
  6438. var _drawScatterDataPoints = drawScatterDataPoints(series, opts, config, context, process),
  6439. xAxisPoints = _drawScatterDataPoints.xAxisPoints,
  6440. calPoints = _drawScatterDataPoints.calPoints,
  6441. eachSpacing = _drawScatterDataPoints.eachSpacing;
  6442. opts.chartData.xAxisPoints = xAxisPoints;
  6443. opts.chartData.calPoints = calPoints;
  6444. opts.chartData.eachSpacing = eachSpacing;
  6445. drawYAxis(series, opts, config, context);
  6446. if (opts.enableMarkLine !== false && process === 1) {
  6447. drawMarkLine(opts, config, context);
  6448. }
  6449. drawLegend(opts.series, opts, config, context, opts.chartData);
  6450. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  6451. drawCanvas(opts, context);
  6452. },
  6453. onAnimationFinish: function onAnimationFinish() {
  6454. _this.uevent.trigger('renderComplete');
  6455. }
  6456. });
  6457. break;
  6458. case 'bubble':
  6459. this.animationInstance = new Animation({
  6460. timing: opts.timing,
  6461. duration: duration,
  6462. onProcess: function onProcess(process) {
  6463. context.clearRect(0, 0, opts.width, opts.height);
  6464. if (opts.rotate) {
  6465. contextRotate(context, opts);
  6466. }
  6467. drawYAxisGrid(categories, opts, config, context);
  6468. drawXAxis(categories, opts, config, context);
  6469. var _drawBubbleDataPoints = drawBubbleDataPoints(series, opts, config, context, process),
  6470. xAxisPoints = _drawBubbleDataPoints.xAxisPoints,
  6471. calPoints = _drawBubbleDataPoints.calPoints,
  6472. eachSpacing = _drawBubbleDataPoints.eachSpacing;
  6473. opts.chartData.xAxisPoints = xAxisPoints;
  6474. opts.chartData.calPoints = calPoints;
  6475. opts.chartData.eachSpacing = eachSpacing;
  6476. drawYAxis(series, opts, config, context);
  6477. if (opts.enableMarkLine !== false && process === 1) {
  6478. drawMarkLine(opts, config, context);
  6479. }
  6480. drawLegend(opts.series, opts, config, context, opts.chartData);
  6481. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  6482. drawCanvas(opts, context);
  6483. },
  6484. onAnimationFinish: function onAnimationFinish() {
  6485. _this.uevent.trigger('renderComplete');
  6486. }
  6487. });
  6488. break;
  6489. case 'mix':
  6490. this.animationInstance = new Animation({
  6491. timing: opts.timing,
  6492. duration: duration,
  6493. onProcess: function onProcess(process) {
  6494. context.clearRect(0, 0, opts.width, opts.height);
  6495. if (opts.rotate) {
  6496. contextRotate(context, opts);
  6497. }
  6498. drawYAxisGrid(categories, opts, config, context);
  6499. drawXAxis(categories, opts, config, context);
  6500. var _drawMixDataPoints = drawMixDataPoints(series, opts, config, context, process),
  6501. xAxisPoints = _drawMixDataPoints.xAxisPoints,
  6502. calPoints = _drawMixDataPoints.calPoints,
  6503. eachSpacing = _drawMixDataPoints.eachSpacing;
  6504. opts.chartData.xAxisPoints = xAxisPoints;
  6505. opts.chartData.calPoints = calPoints;
  6506. opts.chartData.eachSpacing = eachSpacing;
  6507. drawYAxis(series, opts, config, context);
  6508. if (opts.enableMarkLine !== false && process === 1) {
  6509. drawMarkLine(opts, config, context);
  6510. }
  6511. drawLegend(opts.series, opts, config, context, opts.chartData);
  6512. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  6513. drawCanvas(opts, context);
  6514. },
  6515. onAnimationFinish: function onAnimationFinish() {
  6516. _this.uevent.trigger('renderComplete');
  6517. }
  6518. });
  6519. break;
  6520. case 'column':
  6521. this.animationInstance = new Animation({
  6522. timing: opts.timing,
  6523. duration: duration,
  6524. onProcess: function onProcess(process) {
  6525. context.clearRect(0, 0, opts.width, opts.height);
  6526. if (opts.rotate) {
  6527. contextRotate(context, opts);
  6528. }
  6529. drawYAxisGrid(categories, opts, config, context);
  6530. drawXAxis(categories, opts, config, context);
  6531. var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context, process),
  6532. xAxisPoints = _drawColumnDataPoints.xAxisPoints,
  6533. calPoints = _drawColumnDataPoints.calPoints,
  6534. eachSpacing = _drawColumnDataPoints.eachSpacing;
  6535. opts.chartData.xAxisPoints = xAxisPoints;
  6536. opts.chartData.calPoints = calPoints;
  6537. opts.chartData.eachSpacing = eachSpacing;
  6538. drawYAxis(series, opts, config, context);
  6539. if (opts.enableMarkLine !== false && process === 1) {
  6540. drawMarkLine(opts, config, context);
  6541. }
  6542. drawLegend(opts.series, opts, config, context, opts.chartData);
  6543. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  6544. drawCanvas(opts, context);
  6545. },
  6546. onAnimationFinish: function onAnimationFinish() {
  6547. _this.uevent.trigger('renderComplete');
  6548. }
  6549. });
  6550. break;
  6551. case 'mount':
  6552. this.animationInstance = new Animation({
  6553. timing: opts.timing,
  6554. duration: duration,
  6555. onProcess: function onProcess(process) {
  6556. context.clearRect(0, 0, opts.width, opts.height);
  6557. if (opts.rotate) {
  6558. contextRotate(context, opts);
  6559. }
  6560. drawYAxisGrid(categories, opts, config, context);
  6561. drawXAxis(categories, opts, config, context);
  6562. var _drawMountDataPoints = drawMountDataPoints(series, opts, config, context, process),
  6563. xAxisPoints = _drawMountDataPoints.xAxisPoints,
  6564. calPoints = _drawMountDataPoints.calPoints,
  6565. eachSpacing = _drawMountDataPoints.eachSpacing;
  6566. opts.chartData.xAxisPoints = xAxisPoints;
  6567. opts.chartData.calPoints = calPoints;
  6568. opts.chartData.eachSpacing = eachSpacing;
  6569. drawYAxis(series, opts, config, context);
  6570. if (opts.enableMarkLine !== false && process === 1) {
  6571. drawMarkLine(opts, config, context);
  6572. }
  6573. drawLegend(opts.series, opts, config, context, opts.chartData);
  6574. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  6575. drawCanvas(opts, context);
  6576. },
  6577. onAnimationFinish: function onAnimationFinish() {
  6578. _this.uevent.trigger('renderComplete');
  6579. }
  6580. });
  6581. break;
  6582. case 'bar':
  6583. this.animationInstance = new Animation({
  6584. timing: opts.timing,
  6585. duration: duration,
  6586. onProcess: function onProcess(process) {
  6587. context.clearRect(0, 0, opts.width, opts.height);
  6588. if (opts.rotate) {
  6589. contextRotate(context, opts);
  6590. }
  6591. drawXAxis(categories, opts, config, context);
  6592. var _drawBarDataPoints = drawBarDataPoints(series, opts, config, context, process),
  6593. yAxisPoints = _drawBarDataPoints.yAxisPoints,
  6594. calPoints = _drawBarDataPoints.calPoints,
  6595. eachSpacing = _drawBarDataPoints.eachSpacing;
  6596. opts.chartData.yAxisPoints = yAxisPoints;
  6597. opts.chartData.xAxisPoints = opts.chartData.xAxisData.xAxisPoints;
  6598. opts.chartData.calPoints = calPoints;
  6599. opts.chartData.eachSpacing = eachSpacing;
  6600. drawYAxis(series, opts, config, context);
  6601. if (opts.enableMarkLine !== false && process === 1) {
  6602. drawMarkLine(opts, config, context);
  6603. }
  6604. drawLegend(opts.series, opts, config, context, opts.chartData);
  6605. drawToolTipBridge(opts, config, context, process, eachSpacing, yAxisPoints);
  6606. drawCanvas(opts, context);
  6607. },
  6608. onAnimationFinish: function onAnimationFinish() {
  6609. _this.uevent.trigger('renderComplete');
  6610. }
  6611. });
  6612. break;
  6613. case 'area':
  6614. this.animationInstance = new Animation({
  6615. timing: opts.timing,
  6616. duration: duration,
  6617. onProcess: function onProcess(process) {
  6618. context.clearRect(0, 0, opts.width, opts.height);
  6619. if (opts.rotate) {
  6620. contextRotate(context, opts);
  6621. }
  6622. drawYAxisGrid(categories, opts, config, context);
  6623. drawXAxis(categories, opts, config, context);
  6624. var _drawAreaDataPoints = drawAreaDataPoints(series, opts, config, context, process),
  6625. xAxisPoints = _drawAreaDataPoints.xAxisPoints,
  6626. calPoints = _drawAreaDataPoints.calPoints,
  6627. eachSpacing = _drawAreaDataPoints.eachSpacing;
  6628. opts.chartData.xAxisPoints = xAxisPoints;
  6629. opts.chartData.calPoints = calPoints;
  6630. opts.chartData.eachSpacing = eachSpacing;
  6631. drawYAxis(series, opts, config, context);
  6632. if (opts.enableMarkLine !== false && process === 1) {
  6633. drawMarkLine(opts, config, context);
  6634. }
  6635. drawLegend(opts.series, opts, config, context, opts.chartData);
  6636. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  6637. drawCanvas(opts, context);
  6638. },
  6639. onAnimationFinish: function onAnimationFinish() {
  6640. _this.uevent.trigger('renderComplete');
  6641. }
  6642. });
  6643. break;
  6644. case 'ring':
  6645. this.animationInstance = new Animation({
  6646. timing: opts.timing,
  6647. duration: duration,
  6648. onProcess: function onProcess(process) {
  6649. context.clearRect(0, 0, opts.width, opts.height);
  6650. if (opts.rotate) {
  6651. contextRotate(context, opts);
  6652. }
  6653. opts.chartData.pieData = drawPieDataPoints(series, opts, config, context, process);
  6654. drawLegend(opts.series, opts, config, context, opts.chartData);
  6655. drawToolTipBridge(opts, config, context, process);
  6656. drawCanvas(opts, context);
  6657. },
  6658. onAnimationFinish: function onAnimationFinish() {
  6659. _this.uevent.trigger('renderComplete');
  6660. }
  6661. });
  6662. break;
  6663. case 'pie':
  6664. this.animationInstance = new Animation({
  6665. timing: opts.timing,
  6666. duration: duration,
  6667. onProcess: function onProcess(process) {
  6668. context.clearRect(0, 0, opts.width, opts.height);
  6669. if (opts.rotate) {
  6670. contextRotate(context, opts);
  6671. }
  6672. opts.chartData.pieData = drawPieDataPoints(series, opts, config, context, process);
  6673. drawLegend(opts.series, opts, config, context, opts.chartData);
  6674. drawToolTipBridge(opts, config, context, process);
  6675. drawCanvas(opts, context);
  6676. },
  6677. onAnimationFinish: function onAnimationFinish() {
  6678. _this.uevent.trigger('renderComplete');
  6679. }
  6680. });
  6681. break;
  6682. case 'rose':
  6683. this.animationInstance = new Animation({
  6684. timing: opts.timing,
  6685. duration: duration,
  6686. onProcess: function onProcess(process) {
  6687. context.clearRect(0, 0, opts.width, opts.height);
  6688. if (opts.rotate) {
  6689. contextRotate(context, opts);
  6690. }
  6691. opts.chartData.pieData = drawRoseDataPoints(series, opts, config, context, process);
  6692. drawLegend(opts.series, opts, config, context, opts.chartData);
  6693. drawToolTipBridge(opts, config, context, process);
  6694. drawCanvas(opts, context);
  6695. },
  6696. onAnimationFinish: function onAnimationFinish() {
  6697. _this.uevent.trigger('renderComplete');
  6698. }
  6699. });
  6700. break;
  6701. case 'radar':
  6702. this.animationInstance = new Animation({
  6703. timing: opts.timing,
  6704. duration: duration,
  6705. onProcess: function onProcess(process) {
  6706. context.clearRect(0, 0, opts.width, opts.height);
  6707. if (opts.rotate) {
  6708. contextRotate(context, opts);
  6709. }
  6710. opts.chartData.radarData = drawRadarDataPoints(series, opts, config, context, process);
  6711. drawLegend(opts.series, opts, config, context, opts.chartData);
  6712. drawToolTipBridge(opts, config, context, process);
  6713. drawCanvas(opts, context);
  6714. },
  6715. onAnimationFinish: function onAnimationFinish() {
  6716. _this.uevent.trigger('renderComplete');
  6717. }
  6718. });
  6719. break;
  6720. case 'arcbar':
  6721. this.animationInstance = new Animation({
  6722. timing: opts.timing,
  6723. duration: duration,
  6724. onProcess: function onProcess(process) {
  6725. context.clearRect(0, 0, opts.width, opts.height);
  6726. if (opts.rotate) {
  6727. contextRotate(context, opts);
  6728. }
  6729. opts.chartData.arcbarData = drawArcbarDataPoints(series, opts, config, context, process);
  6730. drawCanvas(opts, context);
  6731. },
  6732. onAnimationFinish: function onAnimationFinish() {
  6733. _this.uevent.trigger('renderComplete');
  6734. }
  6735. });
  6736. break;
  6737. case 'gauge':
  6738. this.animationInstance = new Animation({
  6739. timing: opts.timing,
  6740. duration: duration,
  6741. onProcess: function onProcess(process) {
  6742. context.clearRect(0, 0, opts.width, opts.height);
  6743. if (opts.rotate) {
  6744. contextRotate(context, opts);
  6745. }
  6746. opts.chartData.gaugeData = drawGaugeDataPoints(categories, series, opts, config, context, process);
  6747. drawCanvas(opts, context);
  6748. },
  6749. onAnimationFinish: function onAnimationFinish() {
  6750. _this.uevent.trigger('renderComplete');
  6751. }
  6752. });
  6753. break;
  6754. case 'candle':
  6755. this.animationInstance = new Animation({
  6756. timing: opts.timing,
  6757. duration: duration,
  6758. onProcess: function onProcess(process) {
  6759. context.clearRect(0, 0, opts.width, opts.height);
  6760. if (opts.rotate) {
  6761. contextRotate(context, opts);
  6762. }
  6763. drawYAxisGrid(categories, opts, config, context);
  6764. drawXAxis(categories, opts, config, context);
  6765. var _drawCandleDataPoints = drawCandleDataPoints(series, seriesMA, opts, config, context, process),
  6766. xAxisPoints = _drawCandleDataPoints.xAxisPoints,
  6767. calPoints = _drawCandleDataPoints.calPoints,
  6768. eachSpacing = _drawCandleDataPoints.eachSpacing;
  6769. opts.chartData.xAxisPoints = xAxisPoints;
  6770. opts.chartData.calPoints = calPoints;
  6771. opts.chartData.eachSpacing = eachSpacing;
  6772. drawYAxis(series, opts, config, context);
  6773. if (opts.enableMarkLine !== false && process === 1) {
  6774. drawMarkLine(opts, config, context);
  6775. }
  6776. if (seriesMA) {
  6777. drawLegend(seriesMA, opts, config, context, opts.chartData);
  6778. } else {
  6779. drawLegend(opts.series, opts, config, context, opts.chartData);
  6780. }
  6781. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  6782. drawCanvas(opts, context);
  6783. },
  6784. onAnimationFinish: function onAnimationFinish() {
  6785. _this.uevent.trigger('renderComplete');
  6786. }
  6787. });
  6788. break;
  6789. }
  6790. }
  6791. function uChartsEvent() {
  6792. this.events = {};
  6793. }
  6794. uChartsEvent.prototype.addEventListener = function(type, listener) {
  6795. this.events[type] = this.events[type] || [];
  6796. this.events[type].push(listener);
  6797. };
  6798. uChartsEvent.prototype.delEventListener = function(type) {
  6799. this.events[type] = [];
  6800. };
  6801. uChartsEvent.prototype.trigger = function() {
  6802. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  6803. args[_key] = arguments[_key];
  6804. }
  6805. var type = args[0];
  6806. var params = args.slice(1);
  6807. if (!!this.events[type]) {
  6808. this.events[type].forEach(function(listener) {
  6809. try {
  6810. listener.apply(null, params);
  6811. } catch (e) {
  6812. //console.log('[uCharts] '+e);
  6813. }
  6814. });
  6815. }
  6816. };
  6817. var uCharts = function uCharts(opts) {
  6818. opts.pix = opts.pixelRatio ? opts.pixelRatio : 1;
  6819. opts.fontSize = opts.fontSize ? opts.fontSize : 13;
  6820. opts.fontColor = opts.fontColor ? opts.fontColor : config.fontColor;
  6821. if (opts.background == "" || opts.background == "none") {
  6822. opts.background = "#FFFFFF"
  6823. }
  6824. opts.title = assign({}, opts.title);
  6825. opts.subtitle = assign({}, opts.subtitle);
  6826. opts.duration = opts.duration ? opts.duration : 1000;
  6827. opts.yAxis = assign({}, {
  6828. data: [],
  6829. showTitle: false,
  6830. disabled: false,
  6831. disableGrid: false,
  6832. gridSet: 'number',
  6833. splitNumber: 5,
  6834. gridType: 'solid',
  6835. dashLength: 4 * opts.pix,
  6836. gridColor: '#cccccc',
  6837. padding: 10,
  6838. fontColor: '#666666'
  6839. }, opts.yAxis);
  6840. opts.xAxis = assign({}, {
  6841. rotateLabel: false,
  6842. rotateAngle:45,
  6843. disabled: false,
  6844. disableGrid: false,
  6845. splitNumber: 5,
  6846. calibration:false,
  6847. fontColor: '#666666',
  6848. fontSize: 13,
  6849. lineHeight: 20,
  6850. marginTop: 0,
  6851. gridType: 'solid',
  6852. dashLength: 4,
  6853. scrollAlign: 'left',
  6854. boundaryGap: 'center',
  6855. axisLine: true,
  6856. axisLineColor: '#cccccc',
  6857. titleFontSize: 13,
  6858. titleOffsetY: 0,
  6859. titleOffsetX: 0,
  6860. titleFontColor: '#666666'
  6861. }, opts.xAxis);
  6862. opts.xAxis.scrollPosition = opts.xAxis.scrollAlign;
  6863. opts.legend = assign({}, {
  6864. show: true,
  6865. position: 'bottom',
  6866. float: 'center',
  6867. backgroundColor: 'rgba(0,0,0,0)',
  6868. borderColor: 'rgba(0,0,0,0)',
  6869. borderWidth: 0,
  6870. padding: 5,
  6871. margin: 5,
  6872. itemGap: 10,
  6873. fontSize: opts.fontSize,
  6874. lineHeight: opts.fontSize,
  6875. fontColor: opts.fontColor,
  6876. formatter: {},
  6877. hiddenColor: '#CECECE'
  6878. }, opts.legend);
  6879. opts.extra = assign({
  6880. tooltip:{
  6881. legendShape: 'auto'
  6882. }
  6883. }, opts.extra);
  6884. opts.rotate = opts.rotate ? true : false;
  6885. opts.animation = opts.animation ? true : false;
  6886. opts.rotate = opts.rotate ? true : false;
  6887. opts.canvas2d = opts.canvas2d ? true : false;
  6888. let config$$1 = assign({}, config);
  6889. config$$1.color = opts.color ? opts.color : config$$1.color;
  6890. if (opts.type == 'pie') {
  6891. config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.pie.labelWidth * opts.pix || config$$1.pieChartLinePadding * opts.pix;
  6892. }
  6893. if (opts.type == 'ring') {
  6894. config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.ring.labelWidth * opts.pix || config$$1.pieChartLinePadding * opts.pix;
  6895. }
  6896. if (opts.type == 'rose') {
  6897. config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.rose.labelWidth * opts.pix || config$$1.pieChartLinePadding * opts.pix;
  6898. }
  6899. config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding * opts.pix;
  6900. //屏幕旋转
  6901. config$$1.rotate = opts.rotate;
  6902. if (opts.rotate) {
  6903. let tempWidth = opts.width;
  6904. let tempHeight = opts.height;
  6905. opts.width = tempHeight;
  6906. opts.height = tempWidth;
  6907. }
  6908. //适配高分屏
  6909. opts.padding = opts.padding ? opts.padding : config$$1.padding;
  6910. config$$1.yAxisWidth = config.yAxisWidth * opts.pix;
  6911. config$$1.fontSize = opts.fontSize * opts.pix;
  6912. config$$1.titleFontSize = config.titleFontSize * opts.pix;
  6913. config$$1.subtitleFontSize = config.subtitleFontSize * opts.pix;
  6914. if(!opts.context){
  6915. throw new Error('[uCharts] 未获取到context!注意:v2.0版本后,需要自行获取canvas的绘图上下文并传入opts.context!');
  6916. }
  6917. this.context = opts.context;
  6918. if (!this.context.setTextAlign) {
  6919. this.context.setStrokeStyle = function(e) {
  6920. return this.strokeStyle = e;
  6921. }
  6922. this.context.setLineWidth = function(e) {
  6923. return this.lineWidth = e;
  6924. }
  6925. this.context.setLineCap = function(e) {
  6926. return this.lineCap = e;
  6927. }
  6928. this.context.setFontSize = function(e) {
  6929. return this.font = e + "px sans-serif";
  6930. }
  6931. this.context.setFillStyle = function(e) {
  6932. return this.fillStyle = e;
  6933. }
  6934. this.context.setTextAlign = function(e) {
  6935. return this.textAlign = e;
  6936. }
  6937. this.context.setTextBaseline = function(e) {
  6938. return this.textBaseline = e;
  6939. }
  6940. this.context.setShadow = function(offsetX,offsetY,blur,color) {
  6941. this.shadowColor = color;
  6942. this.shadowOffsetX = offsetX;
  6943. this.shadowOffsetY = offsetY;
  6944. this.shadowBlur = blur;
  6945. }
  6946. this.context.draw = function() {}
  6947. }
  6948. //兼容NVUEsetLineDash
  6949. if(!this.context.setLineDash){
  6950. this.context.setLineDash = function(e) {}
  6951. }
  6952. opts.chartData = {};
  6953. this.uevent = new uChartsEvent();
  6954. this.scrollOption = {
  6955. currentOffset: 0,
  6956. startTouchX: 0,
  6957. distance: 0,
  6958. lastMoveTime: 0
  6959. };
  6960. this.opts = opts;
  6961. this.config = config$$1;
  6962. drawCharts.call(this, opts.type, opts, config$$1, this.context);
  6963. };
  6964. uCharts.prototype.updateData = function() {
  6965. let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  6966. this.opts = assign({}, this.opts, data);
  6967. this.opts.updateData = true;
  6968. let scrollPosition = data.scrollPosition || 'current';
  6969. switch (scrollPosition) {
  6970. case 'current':
  6971. this.opts._scrollDistance_ = this.scrollOption.currentOffset;
  6972. break;
  6973. case 'left':
  6974. this.opts._scrollDistance_ = 0;
  6975. this.scrollOption = {
  6976. currentOffset: 0,
  6977. startTouchX: 0,
  6978. distance: 0,
  6979. lastMoveTime: 0
  6980. };
  6981. break;
  6982. case 'right':
  6983. let _calYAxisData = calYAxisData(this.opts.series, this.opts, this.config, this.context), yAxisWidth = _calYAxisData.yAxisWidth;
  6984. this.config.yAxisWidth = yAxisWidth;
  6985. let offsetLeft = 0;
  6986. let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config), xAxisPoints = _getXAxisPoints0.xAxisPoints,
  6987. startX = _getXAxisPoints0.startX,
  6988. endX = _getXAxisPoints0.endX,
  6989. eachSpacing = _getXAxisPoints0.eachSpacing;
  6990. let totalWidth = eachSpacing * (xAxisPoints.length - 1);
  6991. let screenWidth = endX - startX;
  6992. offsetLeft = screenWidth - totalWidth;
  6993. this.scrollOption = {
  6994. currentOffset: offsetLeft,
  6995. startTouchX: offsetLeft,
  6996. distance: 0,
  6997. lastMoveTime: 0
  6998. };
  6999. this.opts._scrollDistance_ = offsetLeft;
  7000. break;
  7001. }
  7002. drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
  7003. };
  7004. uCharts.prototype.zoom = function() {
  7005. var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.opts.xAxis.itemCount;
  7006. if (this.opts.enableScroll !== true) {
  7007. console.log('[uCharts] 请启用滚动条后使用')
  7008. return;
  7009. }
  7010. //当前屏幕中间点
  7011. let centerPoint = Math.round(Math.abs(this.scrollOption.currentOffset) / this.opts.chartData.eachSpacing) + Math.round(this.opts.xAxis.itemCount / 2);
  7012. this.opts.animation = false;
  7013. this.opts.xAxis.itemCount = val.itemCount;
  7014. //重新计算x轴偏移距离
  7015. let _calYAxisData = calYAxisData(this.opts.series, this.opts, this.config, this.context),
  7016. yAxisWidth = _calYAxisData.yAxisWidth;
  7017. this.config.yAxisWidth = yAxisWidth;
  7018. let offsetLeft = 0;
  7019. let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config),
  7020. xAxisPoints = _getXAxisPoints0.xAxisPoints,
  7021. startX = _getXAxisPoints0.startX,
  7022. endX = _getXAxisPoints0.endX,
  7023. eachSpacing = _getXAxisPoints0.eachSpacing;
  7024. let centerLeft = eachSpacing * centerPoint;
  7025. let screenWidth = endX - startX;
  7026. let MaxLeft = screenWidth - eachSpacing * (xAxisPoints.length - 1);
  7027. offsetLeft = screenWidth / 2 - centerLeft;
  7028. if (offsetLeft > 0) {
  7029. offsetLeft = 0;
  7030. }
  7031. if (offsetLeft < MaxLeft) {
  7032. offsetLeft = MaxLeft;
  7033. }
  7034. this.scrollOption = {
  7035. currentOffset: offsetLeft,
  7036. startTouchX: 0,
  7037. distance: 0,
  7038. lastMoveTime: 0
  7039. };
  7040. calValidDistance(this, offsetLeft, this.opts.chartData, this.config, this.opts);
  7041. this.opts._scrollDistance_ = offsetLeft;
  7042. drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
  7043. };
  7044. uCharts.prototype.dobuleZoom = function(e) {
  7045. if (this.opts.enableScroll !== true) {
  7046. console.log('[uCharts] 请启用滚动条后使用')
  7047. return;
  7048. }
  7049. const tcs = e.changedTouches;
  7050. if (tcs.length < 2) {
  7051. return;
  7052. }
  7053. for (var i = 0; i < tcs.length; i++) {
  7054. tcs[i].x = tcs[i].x ? tcs[i].x : tcs[i].clientX;
  7055. tcs[i].y = tcs[i].y ? tcs[i].y : tcs[i].clientY;
  7056. }
  7057. const ntcs = [getTouches(tcs[0], this.opts, e),getTouches(tcs[1], this.opts, e)];
  7058. const xlength = Math.abs(ntcs[0].x - ntcs[1].x);
  7059. // 记录初始的两指之间的数据
  7060. if(!this.scrollOption.moveCount){
  7061. let cts0 = {changedTouches:[{x:tcs[0].x,y:this.opts.area[0] / this.opts.pix + 2}]};
  7062. let cts1 = {changedTouches:[{x:tcs[1].x,y:this.opts.area[0] / this.opts.pix + 2}]};
  7063. if(this.opts.rotate){
  7064. cts0 = {changedTouches:[{x:this.opts.height / this.opts.pix - this.opts.area[0] / this.opts.pix - 2,y:tcs[0].y}]};
  7065. cts1 = {changedTouches:[{x:this.opts.height / this.opts.pix - this.opts.area[0] / this.opts.pix - 2,y:tcs[1].y}]};
  7066. }
  7067. const moveCurrent1 = this.getCurrentDataIndex(cts0).index;
  7068. const moveCurrent2 = this.getCurrentDataIndex(cts1).index;
  7069. const moveCount = Math.abs(moveCurrent1 - moveCurrent2);
  7070. this.scrollOption.moveCount = moveCount;
  7071. this.scrollOption.moveCurrent1 = Math.min(moveCurrent1, moveCurrent2);
  7072. this.scrollOption.moveCurrent2 = Math.max(moveCurrent1, moveCurrent2);
  7073. return;
  7074. }
  7075. let currentEachSpacing = xlength / this.scrollOption.moveCount;
  7076. let itemCount = (this.opts.width - this.opts.area[1] - this.opts.area[3]) / currentEachSpacing;
  7077. itemCount = itemCount <= 2 ? 2 : itemCount;
  7078. itemCount = itemCount >= this.opts.categories.length ? this.opts.categories.length : itemCount;
  7079. this.opts.animation = false;
  7080. this.opts.xAxis.itemCount = itemCount;
  7081. // 重新计算滚动条偏移距离
  7082. let offsetLeft = 0;
  7083. let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config),
  7084. xAxisPoints = _getXAxisPoints0.xAxisPoints,
  7085. startX = _getXAxisPoints0.startX,
  7086. endX = _getXAxisPoints0.endX,
  7087. eachSpacing = _getXAxisPoints0.eachSpacing;
  7088. let currentLeft = eachSpacing * this.scrollOption.moveCurrent1;
  7089. let screenWidth = endX - startX;
  7090. let MaxLeft = screenWidth - eachSpacing * (xAxisPoints.length - 1);
  7091. offsetLeft = -currentLeft+Math.min(ntcs[0].x,ntcs[1].x)-this.opts.area[3]-eachSpacing;
  7092. if (offsetLeft > 0) {
  7093. offsetLeft = 0;
  7094. }
  7095. if (offsetLeft < MaxLeft) {
  7096. offsetLeft = MaxLeft;
  7097. }
  7098. this.scrollOption.currentOffset= offsetLeft;
  7099. this.scrollOption.startTouchX= 0;
  7100. this.scrollOption.distance=0;
  7101. calValidDistance(this, offsetLeft, this.opts.chartData, this.config, this.opts);
  7102. this.opts._scrollDistance_ = offsetLeft;
  7103. drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
  7104. }
  7105. uCharts.prototype.stopAnimation = function() {
  7106. this.animationInstance && this.animationInstance.stop();
  7107. };
  7108. uCharts.prototype.addEventListener = function(type, listener) {
  7109. this.uevent.addEventListener(type, listener);
  7110. };
  7111. uCharts.prototype.delEventListener = function(type) {
  7112. this.uevent.delEventListener(type);
  7113. };
  7114. uCharts.prototype.getCurrentDataIndex = function(e) {
  7115. var touches = null;
  7116. if (e.changedTouches) {
  7117. touches = e.changedTouches[0];
  7118. } else {
  7119. touches = e.mp.changedTouches[0];
  7120. }
  7121. if (touches) {
  7122. let _touches$ = getTouches(touches, this.opts, e);
  7123. if (this.opts.type === 'pie' || this.opts.type === 'ring') {
  7124. return findPieChartCurrentIndex({
  7125. x: _touches$.x,
  7126. y: _touches$.y
  7127. }, this.opts.chartData.pieData, this.opts);
  7128. } else if (this.opts.type === 'rose') {
  7129. return findRoseChartCurrentIndex({
  7130. x: _touches$.x,
  7131. y: _touches$.y
  7132. }, this.opts.chartData.pieData, this.opts);
  7133. } else if (this.opts.type === 'radar') {
  7134. return findRadarChartCurrentIndex({
  7135. x: _touches$.x,
  7136. y: _touches$.y
  7137. }, this.opts.chartData.radarData, this.opts.categories.length);
  7138. } else if (this.opts.type === 'funnel') {
  7139. return findFunnelChartCurrentIndex({
  7140. x: _touches$.x,
  7141. y: _touches$.y
  7142. }, this.opts.chartData.funnelData);
  7143. } else if (this.opts.type === 'map') {
  7144. return findMapChartCurrentIndex({
  7145. x: _touches$.x,
  7146. y: _touches$.y
  7147. }, this.opts);
  7148. } else if (this.opts.type === 'word') {
  7149. return findWordChartCurrentIndex({
  7150. x: _touches$.x,
  7151. y: _touches$.y
  7152. }, this.opts.chartData.wordCloudData);
  7153. } else if (this.opts.type === 'bar') {
  7154. return findBarChartCurrentIndex({
  7155. x: _touches$.x,
  7156. y: _touches$.y
  7157. }, this.opts.chartData.calPoints, this.opts, this.config, Math.abs(this.scrollOption.currentOffset));
  7158. } else {
  7159. return findCurrentIndex({
  7160. x: _touches$.x,
  7161. y: _touches$.y
  7162. }, this.opts.chartData.calPoints, this.opts, this.config, Math.abs(this.scrollOption.currentOffset));
  7163. }
  7164. }
  7165. return -1;
  7166. };
  7167. uCharts.prototype.getLegendDataIndex = function(e) {
  7168. var touches = null;
  7169. if (e.changedTouches) {
  7170. touches = e.changedTouches[0];
  7171. } else {
  7172. touches = e.mp.changedTouches[0];
  7173. }
  7174. if (touches) {
  7175. let _touches$ = getTouches(touches, this.opts, e);
  7176. return findLegendIndex({
  7177. x: _touches$.x,
  7178. y: _touches$.y
  7179. }, this.opts.chartData.legendData);
  7180. }
  7181. return -1;
  7182. };
  7183. uCharts.prototype.touchLegend = function(e) {
  7184. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  7185. var touches = null;
  7186. if (e.changedTouches) {
  7187. touches = e.changedTouches[0];
  7188. } else {
  7189. touches = e.mp.changedTouches[0];
  7190. }
  7191. if (touches) {
  7192. var _touches$ = getTouches(touches, this.opts, e);
  7193. var index = this.getLegendDataIndex(e);
  7194. if (index >= 0) {
  7195. if (this.opts.type == 'candle') {
  7196. this.opts.seriesMA[index].show = !this.opts.seriesMA[index].show;
  7197. } else {
  7198. this.opts.series[index].show = !this.opts.series[index].show;
  7199. }
  7200. this.opts.animation = option.animation ? true : false;
  7201. this.opts._scrollDistance_ = this.scrollOption.currentOffset;
  7202. drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
  7203. }
  7204. }
  7205. };
  7206. uCharts.prototype.showToolTip = function(e) {
  7207. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  7208. var touches = null;
  7209. if (e.changedTouches) {
  7210. touches = e.changedTouches[0];
  7211. } else {
  7212. touches = e.mp.changedTouches[0];
  7213. }
  7214. if (!touches) {
  7215. console.log("[uCharts] 未获取到event坐标信息");
  7216. }
  7217. var _touches$ = getTouches(touches, this.opts, e);
  7218. var currentOffset = this.scrollOption.currentOffset;
  7219. var opts = assign({}, this.opts, {
  7220. _scrollDistance_: currentOffset,
  7221. animation: false
  7222. });
  7223. if (this.opts.type === 'line' || this.opts.type === 'area' || this.opts.type === 'column' || this.opts.type === 'scatter' || this.opts.type === 'bubble') {
  7224. var current = this.getCurrentDataIndex(e);
  7225. var index = option.index == undefined ? current.index : option.index;
  7226. if (index > -1 || index.length>0) {
  7227. var seriesData = getSeriesDataItem(this.opts.series, index, current.group);
  7228. if (seriesData.length !== 0) {
  7229. var _getToolTipData = getToolTipData(seriesData, this.opts, index, current.group, this.opts.categories, option),
  7230. textList = _getToolTipData.textList,
  7231. offset = _getToolTipData.offset;
  7232. offset.y = _touches$.y;
  7233. opts.tooltip = {
  7234. textList: option.textList !== undefined ? option.textList : textList,
  7235. offset: option.offset !== undefined ? option.offset : offset,
  7236. option: option,
  7237. index: index,
  7238. group: current.group
  7239. };
  7240. }
  7241. }
  7242. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7243. }
  7244. if (this.opts.type === 'mount') {
  7245. var index = option.index == undefined ? this.getCurrentDataIndex(e).index : option.index;
  7246. if (index > -1) {
  7247. var opts = assign({}, this.opts, {animation: false});
  7248. var seriesData = assign({}, opts._series_[index]);
  7249. var textList = [{
  7250. text: option.formatter ? option.formatter(seriesData, undefined, index, opts) : seriesData.name + ': ' + seriesData.data,
  7251. color: seriesData.color,
  7252. legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
  7253. }];
  7254. var offset = {
  7255. x: opts.chartData.calPoints[index].x,
  7256. y: _touches$.y
  7257. };
  7258. opts.tooltip = {
  7259. textList: option.textList ? option.textList : textList,
  7260. offset: option.offset !== undefined ? option.offset : offset,
  7261. option: option,
  7262. index: index
  7263. };
  7264. }
  7265. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7266. }
  7267. if (this.opts.type === 'bar') {
  7268. var current = this.getCurrentDataIndex(e);
  7269. var index = option.index == undefined ? current.index : option.index;
  7270. if (index > -1 || index.length>0) {
  7271. var seriesData = getSeriesDataItem(this.opts.series, index, current.group);
  7272. if (seriesData.length !== 0) {
  7273. var _getToolTipData = getToolTipData(seriesData, this.opts, index, current.group, this.opts.categories, option),
  7274. textList = _getToolTipData.textList,
  7275. offset = _getToolTipData.offset;
  7276. offset.x = _touches$.x;
  7277. opts.tooltip = {
  7278. textList: option.textList !== undefined ? option.textList : textList,
  7279. offset: option.offset !== undefined ? option.offset : offset,
  7280. option: option,
  7281. index: index
  7282. };
  7283. }
  7284. }
  7285. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7286. }
  7287. if (this.opts.type === 'mix') {
  7288. var current = this.getCurrentDataIndex(e);
  7289. var index = option.index == undefined ? current.index : option.index;
  7290. if (index > -1) {
  7291. var currentOffset = this.scrollOption.currentOffset;
  7292. var opts = assign({}, this.opts, {
  7293. _scrollDistance_: currentOffset,
  7294. animation: false
  7295. });
  7296. var seriesData = getSeriesDataItem(this.opts.series, index);
  7297. if (seriesData.length !== 0) {
  7298. var _getMixToolTipData = getMixToolTipData(seriesData, this.opts, index, this.opts.categories, option),
  7299. textList = _getMixToolTipData.textList,
  7300. offset = _getMixToolTipData.offset;
  7301. offset.y = _touches$.y;
  7302. opts.tooltip = {
  7303. textList: option.textList ? option.textList : textList,
  7304. offset: option.offset !== undefined ? option.offset : offset,
  7305. option: option,
  7306. index: index
  7307. };
  7308. }
  7309. }
  7310. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7311. }
  7312. if (this.opts.type === 'candle') {
  7313. var current = this.getCurrentDataIndex(e);
  7314. var index = option.index == undefined ? current.index : option.index;
  7315. if (index > -1) {
  7316. var currentOffset = this.scrollOption.currentOffset;
  7317. var opts = assign({}, this.opts, {
  7318. _scrollDistance_: currentOffset,
  7319. animation: false
  7320. });
  7321. var seriesData = getSeriesDataItem(this.opts.series, index);
  7322. if (seriesData.length !== 0) {
  7323. var _getToolTipData = getCandleToolTipData(this.opts.series[0].data, seriesData, this.opts, index, this.opts.categories, this.opts.extra.candle, option),
  7324. textList = _getToolTipData.textList,
  7325. offset = _getToolTipData.offset;
  7326. offset.y = _touches$.y;
  7327. opts.tooltip = {
  7328. textList: option.textList ? option.textList : textList,
  7329. offset: option.offset !== undefined ? option.offset : offset,
  7330. option: option,
  7331. index: index
  7332. };
  7333. }
  7334. }
  7335. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7336. }
  7337. if (this.opts.type === 'pie' || this.opts.type === 'ring' || this.opts.type === 'rose' || this.opts.type === 'funnel') {
  7338. var index = option.index == undefined ? this.getCurrentDataIndex(e) : option.index;
  7339. if (index > -1) {
  7340. var opts = assign({}, this.opts, {animation: false});
  7341. var seriesData = assign({}, opts._series_[index]);
  7342. var textList = [{
  7343. text: option.formatter ? option.formatter(seriesData, undefined, index, opts) : seriesData.name + ': ' + seriesData.data,
  7344. color: seriesData.color,
  7345. legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
  7346. }];
  7347. var offset = {
  7348. x: _touches$.x,
  7349. y: _touches$.y
  7350. };
  7351. opts.tooltip = {
  7352. textList: option.textList ? option.textList : textList,
  7353. offset: option.offset !== undefined ? option.offset : offset,
  7354. option: option,
  7355. index: index
  7356. };
  7357. }
  7358. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7359. }
  7360. if (this.opts.type === 'map') {
  7361. var index = option.index == undefined ? this.getCurrentDataIndex(e) : option.index;
  7362. if (index > -1) {
  7363. var opts = assign({}, this.opts, {animation: false});
  7364. var seriesData = assign({}, this.opts.series[index]);
  7365. seriesData.name = seriesData.properties.name
  7366. var textList = [{
  7367. text: option.formatter ? option.formatter(seriesData, undefined, index, this.opts) : seriesData.name,
  7368. color: seriesData.color,
  7369. legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
  7370. }];
  7371. var offset = {
  7372. x: _touches$.x,
  7373. y: _touches$.y
  7374. };
  7375. opts.tooltip = {
  7376. textList: option.textList ? option.textList : textList,
  7377. offset: option.offset !== undefined ? option.offset : offset,
  7378. option: option,
  7379. index: index
  7380. };
  7381. }
  7382. opts.updateData = false;
  7383. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7384. }
  7385. if (this.opts.type === 'word') {
  7386. var index = option.index == undefined ? this.getCurrentDataIndex(e) : option.index;
  7387. if (index > -1) {
  7388. var opts = assign({}, this.opts, {animation: false});
  7389. var seriesData = assign({}, this.opts.series[index]);
  7390. var textList = [{
  7391. text: option.formatter ? option.formatter(seriesData, undefined, index, this.opts) : seriesData.name,
  7392. color: seriesData.color,
  7393. legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
  7394. }];
  7395. var offset = {
  7396. x: _touches$.x,
  7397. y: _touches$.y
  7398. };
  7399. opts.tooltip = {
  7400. textList: option.textList ? option.textList : textList,
  7401. offset: option.offset !== undefined ? option.offset : offset,
  7402. option: option,
  7403. index: index
  7404. };
  7405. }
  7406. opts.updateData = false;
  7407. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7408. }
  7409. if (this.opts.type === 'radar') {
  7410. var index = option.index == undefined ? this.getCurrentDataIndex(e) : option.index;
  7411. if (index > -1) {
  7412. var opts = assign({}, this.opts, {animation: false});
  7413. var seriesData = getSeriesDataItem(this.opts.series, index);
  7414. if (seriesData.length !== 0) {
  7415. var textList = seriesData.map((item) => {
  7416. return {
  7417. text: option.formatter ? option.formatter(item, this.opts.categories[index], index, this.opts) : item.name + ': ' + item.data,
  7418. color: item.color,
  7419. legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? item.legendShape : this.opts.extra.tooltip.legendShape
  7420. };
  7421. });
  7422. var offset = {
  7423. x: _touches$.x,
  7424. y: _touches$.y
  7425. };
  7426. opts.tooltip = {
  7427. textList: option.textList ? option.textList : textList,
  7428. offset: option.offset !== undefined ? option.offset : offset,
  7429. option: option,
  7430. index: index
  7431. };
  7432. }
  7433. }
  7434. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7435. }
  7436. };
  7437. uCharts.prototype.translate = function(distance) {
  7438. this.scrollOption = {
  7439. currentOffset: distance,
  7440. startTouchX: distance,
  7441. distance: 0,
  7442. lastMoveTime: 0
  7443. };
  7444. let opts = assign({}, this.opts, {
  7445. _scrollDistance_: distance,
  7446. animation: false
  7447. });
  7448. drawCharts.call(this, this.opts.type, opts, this.config, this.context);
  7449. };
  7450. uCharts.prototype.scrollStart = function(e) {
  7451. var touches = null;
  7452. if (e.changedTouches) {
  7453. touches = e.changedTouches[0];
  7454. } else {
  7455. touches = e.mp.changedTouches[0];
  7456. }
  7457. var _touches$ = getTouches(touches, this.opts, e);
  7458. if (touches && this.opts.enableScroll === true) {
  7459. this.scrollOption.startTouchX = _touches$.x;
  7460. }
  7461. };
  7462. uCharts.prototype.scroll = function(e) {
  7463. if (this.scrollOption.lastMoveTime === 0) {
  7464. this.scrollOption.lastMoveTime = Date.now();
  7465. }
  7466. let Limit = this.opts.touchMoveLimit || 60;
  7467. let currMoveTime = Date.now();
  7468. let duration = currMoveTime - this.scrollOption.lastMoveTime;
  7469. if (duration < Math.floor(1000 / Limit)) return;
  7470. if (this.scrollOption.startTouchX == 0) return;
  7471. this.scrollOption.lastMoveTime = currMoveTime;
  7472. var touches = null;
  7473. if (e.changedTouches) {
  7474. touches = e.changedTouches[0];
  7475. } else {
  7476. touches = e.mp.changedTouches[0];
  7477. }
  7478. if (touches && this.opts.enableScroll === true) {
  7479. var _touches$ = getTouches(touches, this.opts, e);
  7480. var _distance;
  7481. _distance = _touches$.x - this.scrollOption.startTouchX;
  7482. var currentOffset = this.scrollOption.currentOffset;
  7483. var validDistance = calValidDistance(this, currentOffset + _distance, this.opts.chartData, this.config, this.opts);
  7484. this.scrollOption.distance = _distance = validDistance - currentOffset;
  7485. var opts = assign({}, this.opts, {
  7486. _scrollDistance_: currentOffset + _distance,
  7487. animation: false
  7488. });
  7489. this.opts = opts;
  7490. drawCharts.call(this, opts.type, opts, this.config, this.context);
  7491. return currentOffset + _distance;
  7492. }
  7493. };
  7494. uCharts.prototype.scrollEnd = function(e) {
  7495. if (this.opts.enableScroll === true) {
  7496. var _scrollOption = this.scrollOption,
  7497. currentOffset = _scrollOption.currentOffset,
  7498. distance = _scrollOption.distance;
  7499. this.scrollOption.currentOffset = currentOffset + distance;
  7500. this.scrollOption.distance = 0;
  7501. this.scrollOption.moveCount = 0;
  7502. }
  7503. };
  7504. export default uCharts;