u-charts.js 193 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284
  1. /*
  2. * uCharts v1.9.3.20190922
  3. * uni-app平台高性能跨全端图表,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)
  4. * Copyright (c) 2019 QIUN秋云 https://www.ucharts.cn All rights reserved.
  5. * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
  6. *
  7. * uCharts官方网站
  8. * https://www.uCharts.cn
  9. *
  10. * 开源地址:
  11. * https://gitee.com/uCharts/uCharts
  12. *
  13. * uni-app插件市场地址:
  14. * http://ext.dcloud.net.cn/plugin?id=271
  15. *
  16. */
  17. 'use strict';
  18. var config = {
  19. yAxisWidth: 15,
  20. yAxisSplit: 5,
  21. xAxisHeight: 15,
  22. xAxisLineHeight: 15,
  23. legendHeight: 15,
  24. yAxisTitleWidth: 15,
  25. padding: [10, 10, 10, 10],
  26. pixelRatio: 1,
  27. rotate: false,
  28. columePadding: 3,
  29. fontSize: 13,
  30. //dataPointShape: ['diamond', 'circle', 'triangle', 'rect'],
  31. dataPointShape: ['circle', 'circle', 'circle', 'circle'],
  32. colors: ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d'],
  33. pieChartLinePadding: 15,
  34. pieChartTextPadding: 5,
  35. xAxisTextPadding: 3,
  36. titleColor: '#333333',
  37. titleFontSize: 20,
  38. subtitleColor: '#999999',
  39. subtitleFontSize: 15,
  40. unitFontSize: 11,
  41. toolTipPadding: 3,
  42. toolTipBackground: '#000000',
  43. toolTipOpacity: 0.7,
  44. toolTipLineHeight: 20,
  45. radarLabelTextMargin: 15,
  46. gaugeLabelTextMargin: 15,
  47. // slam todo
  48. arcbarDate: '',
  49. molecularUnit: 'ka',
  50. denominatorUnit: '0',
  51. enableBottomSolid: false,
  52. };
  53. let assign = function(target, ...varArgs) {
  54. if (target == null) {
  55. throw new TypeError('Cannot convert undefined or null to object');
  56. }
  57. if (!varArgs || varArgs.length <= 0) {
  58. return target;
  59. }
  60. // 深度合并对象
  61. function deepAssign(obj1, obj2) {
  62. for (let key in obj2) {
  63. obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" ?
  64. deepAssign(obj1[key], obj2[key]) : obj1[key] = obj2[key];
  65. }
  66. return obj1;
  67. }
  68. varArgs.forEach(val => {
  69. target = deepAssign(target, val);
  70. });
  71. return target;
  72. };
  73. var util = {
  74. toFixed: function toFixed(num, limit) {
  75. limit = limit || 2;
  76. if (this.isFloat(num)) {
  77. num = num.toFixed(limit);
  78. }
  79. return num;
  80. },
  81. isFloat: function isFloat(num) {
  82. return num % 1 !== 0;
  83. },
  84. approximatelyEqual: function approximatelyEqual(num1, num2) {
  85. return Math.abs(num1 - num2) < 1e-10;
  86. },
  87. isSameSign: function isSameSign(num1, num2) {
  88. return Math.abs(num1) === num1 && Math.abs(num2) === num2 || Math.abs(num1) !== num1 && Math.abs(
  89. num2) !== num2;
  90. },
  91. isSameXCoordinateArea: function isSameXCoordinateArea(p1, p2) {
  92. return this.isSameSign(p1.x, p2.x);
  93. },
  94. isCollision: function isCollision(obj1, obj2) {
  95. obj1.end = {};
  96. obj1.end.x = obj1.start.x + obj1.width;
  97. obj1.end.y = obj1.start.y - obj1.height;
  98. obj2.end = {};
  99. obj2.end.x = obj2.start.x + obj2.width;
  100. obj2.end.y = obj2.start.y - obj2.height;
  101. var flag = obj2.start.x > obj1.end.x || obj2.end.x < obj1.start.x || obj2.end.y > obj1.start.y || obj2
  102. .start.y <
  103. obj1.end.y;
  104. return !flag;
  105. }
  106. };
  107. //兼容H5点击事件
  108. function getH5Offset(e) {
  109. e.mp = {
  110. changedTouches: []
  111. };
  112. e.mp.changedTouches.push({
  113. x: e.offsetX,
  114. y: e.offsetY
  115. });
  116. return e;
  117. }
  118. // hex 转 rgba
  119. function hexToRgb(hexValue, opc) {
  120. var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  121. var hex = hexValue.replace(rgx, function(m, r, g, b) {
  122. return r + r + g + g + b + b;
  123. });
  124. var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  125. var r = parseInt(rgb[1], 16);
  126. var g = parseInt(rgb[2], 16);
  127. var b = parseInt(rgb[3], 16);
  128. return 'rgba(' + r + ',' + g + ',' + b + ',' + opc + ')';
  129. }
  130. function findRange(num, type, limit) {
  131. if (isNaN(num)) {
  132. throw new Error('[uCharts] unvalid series data!');
  133. }
  134. limit = limit || 10;
  135. type = type ? type : 'upper';
  136. var multiple = 1;
  137. while (limit < 1) {
  138. limit *= 10;
  139. multiple *= 10;
  140. }
  141. if (type === 'upper') {
  142. num = Math.ceil(num * multiple);
  143. } else {
  144. num = Math.floor(num * multiple);
  145. }
  146. while (num % limit !== 0) {
  147. if (type === 'upper') {
  148. num++;
  149. } else {
  150. num--;
  151. }
  152. }
  153. return num / multiple;
  154. }
  155. function calCandleMA(dayArr, nameArr, colorArr, kdata) {
  156. let seriesTemp = [];
  157. for (let k = 0; k < dayArr.length; k++) {
  158. let seriesItem = {
  159. data: [],
  160. name: nameArr[k],
  161. color: colorArr[k]
  162. };
  163. for (let i = 0, len = kdata.length; i < len; i++) {
  164. if (i < dayArr[k]) {
  165. seriesItem.data.push(null);
  166. continue;
  167. }
  168. let sum = 0;
  169. for (let j = 0; j < dayArr[k]; j++) {
  170. sum += kdata[i - j][1];
  171. }
  172. seriesItem.data.push(+(sum / dayArr[k]).toFixed(3));
  173. }
  174. seriesTemp.push(seriesItem);
  175. }
  176. return seriesTemp;
  177. }
  178. function calValidDistance(self, distance, chartData, config, opts) {
  179. var dataChartAreaWidth = opts.width - opts.area[1] - opts.area[3];
  180. var dataChartWidth = chartData.eachSpacing * (opts.chartData.xAxisData.xAxisPoints.length - 1);
  181. var validDistance = distance;
  182. if (distance >= 0) {
  183. validDistance = 0;
  184. self.event.trigger('scrollLeft');
  185. } else if (Math.abs(distance) >= dataChartWidth - dataChartAreaWidth) {
  186. validDistance = dataChartAreaWidth - dataChartWidth;
  187. self.event.trigger('scrollRight');
  188. }
  189. return validDistance;
  190. }
  191. function isInAngleRange(angle, startAngle, endAngle) {
  192. function adjust(angle) {
  193. while (angle < 0) {
  194. angle += 2 * Math.PI;
  195. }
  196. while (angle > 2 * Math.PI) {
  197. angle -= 2 * Math.PI;
  198. }
  199. return angle;
  200. }
  201. angle = adjust(angle);
  202. startAngle = adjust(startAngle);
  203. endAngle = adjust(endAngle);
  204. if (startAngle > endAngle) {
  205. endAngle += 2 * Math.PI;
  206. if (angle < startAngle) {
  207. angle += 2 * Math.PI;
  208. }
  209. }
  210. return angle >= startAngle && angle <= endAngle;
  211. }
  212. function calRotateTranslate(x, y, h) {
  213. var xv = x;
  214. var yv = h - y;
  215. var transX = xv + (h - yv - xv) / Math.sqrt(2);
  216. transX *= -1;
  217. var transY = (h - yv) * (Math.sqrt(2) - 1) - (h - yv - xv) / Math.sqrt(2);
  218. return {
  219. transX: transX,
  220. transY: transY
  221. };
  222. }
  223. function createCurveControlPoints(points, i) {
  224. function isNotMiddlePoint(points, i) {
  225. if (points[i - 1] && points[i + 1]) {
  226. return points[i].y >= Math.max(points[i - 1].y, points[i + 1].y) || points[i].y <= Math.min(points[i - 1].y,
  227. points[
  228. i + 1].y);
  229. } else {
  230. return false;
  231. }
  232. }
  233. var a = 0.2;
  234. var b = 0.2;
  235. var pAx = null;
  236. var pAy = null;
  237. var pBx = null;
  238. var pBy = null;
  239. if (i < 1) {
  240. pAx = points[0].x + (points[1].x - points[0].x) * a;
  241. pAy = points[0].y + (points[1].y - points[0].y) * a;
  242. } else {
  243. pAx = points[i].x + (points[i + 1].x - points[i - 1].x) * a;
  244. pAy = points[i].y + (points[i + 1].y - points[i - 1].y) * a;
  245. }
  246. if (i > points.length - 3) {
  247. var last = points.length - 1;
  248. pBx = points[last].x - (points[last].x - points[last - 1].x) * b;
  249. pBy = points[last].y - (points[last].y - points[last - 1].y) * b;
  250. } else {
  251. pBx = points[i + 1].x - (points[i + 2].x - points[i].x) * b;
  252. pBy = points[i + 1].y - (points[i + 2].y - points[i].y) * b;
  253. }
  254. if (isNotMiddlePoint(points, i + 1)) {
  255. pBy = points[i + 1].y;
  256. }
  257. if (isNotMiddlePoint(points, i)) {
  258. pAy = points[i].y;
  259. }
  260. if (pAy >= Math.max(points[i].y, points[i + 1].y) || pAy <= Math.min(points[i].y, points[i + 1].y)) {
  261. pAy = points[i].y;
  262. }
  263. if (pBy >= Math.max(points[i].y, points[i + 1].y) || pBy <= Math.min(points[i].y, points[i + 1].y)) {
  264. pBy = points[i + 1].y;
  265. }
  266. return {
  267. ctrA: {
  268. x: pAx,
  269. y: pAy
  270. },
  271. ctrB: {
  272. x: pBx,
  273. y: pBy
  274. }
  275. };
  276. }
  277. function convertCoordinateOrigin(x, y, center) {
  278. return {
  279. x: center.x + x,
  280. y: center.y - y
  281. };
  282. }
  283. function avoidCollision(obj, target) {
  284. if (target) {
  285. // is collision test
  286. while (util.isCollision(obj, target)) {
  287. if (obj.start.x > 0) {
  288. obj.start.y--;
  289. } else if (obj.start.x < 0) {
  290. obj.start.y++;
  291. } else {
  292. if (obj.start.y > 0) {
  293. obj.start.y++;
  294. } else {
  295. obj.start.y--;
  296. }
  297. }
  298. }
  299. }
  300. return obj;
  301. }
  302. function fillSeries(series, opts, config) {
  303. var index = 0;
  304. return series.map(function(item) {
  305. if (!item.color) {
  306. item.color = config.colors[index];
  307. index = (index + 1) % config.colors.length;
  308. }
  309. if (!item.index) {
  310. item.index = 0;
  311. }
  312. if (!item.type) {
  313. item.type = opts.type;
  314. }
  315. if (typeof item.show == "undefined") {
  316. item.show = true;
  317. }
  318. if (!item.type) {
  319. item.type = opts.type;
  320. }
  321. if (!item.pointShape) {
  322. item.pointShape = "circle";
  323. }
  324. if (!item.legendShape) {
  325. switch (item.type) {
  326. case 'line':
  327. item.legendShape = "line";
  328. break;
  329. case 'column':
  330. item.legendShape = "rect";
  331. break;
  332. case 'area':
  333. item.legendShape = "triangle";
  334. break;
  335. default:
  336. item.legendShape = "circle";
  337. }
  338. }
  339. return item;
  340. });
  341. }
  342. function getDataRange(minData, maxData) {
  343. var limit = 0;
  344. var range = maxData - minData;
  345. if (range >= 10000) {
  346. limit = 1000;
  347. } else if (range >= 1000) {
  348. limit = 100;
  349. } else if (range >= 100) {
  350. limit = 10;
  351. } else if (range >= 10) {
  352. limit = 5;
  353. } else if (range >= 1) {
  354. limit = 1;
  355. } else if (range >= 0.1) {
  356. limit = 0.1;
  357. } else if (range >= 0.01) {
  358. limit = 0.01;
  359. } else if (range >= 0.001) {
  360. limit = 0.001;
  361. } else if (range >= 0.0001) {
  362. limit = 0.0001;
  363. } else if (range >= 0.00001) {
  364. limit = 0.00001;
  365. } else {
  366. limit = 0.000001;
  367. }
  368. return {
  369. minRange: findRange(minData, 'lower', limit),
  370. maxRange: findRange(maxData, 'upper', limit)
  371. };
  372. }
  373. function measureText(text) {
  374. var fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : config.fontSize;
  375. text = String(text);
  376. var text = text.split('');
  377. var width = 0;
  378. for (let i = 0; i < text.length; i++) {
  379. let item = text[i];
  380. if (/[a-zA-Z]/.test(item)) {
  381. width += 7;
  382. } else if (/[0-9]/.test(item)) {
  383. width += 5.5;
  384. } else if (/\./.test(item)) {
  385. width += 2.7;
  386. } else if (/-/.test(item)) {
  387. width += 3.25;
  388. } else if (/[\u4e00-\u9fa5]/.test(item)) {
  389. width += 10;
  390. } else if (/\(|\)/.test(item)) {
  391. width += 3.73;
  392. } else if (/\s/.test(item)) {
  393. width += 2.5;
  394. } else if (/%/.test(item)) {
  395. width += 8;
  396. } else {
  397. width += 10;
  398. }
  399. }
  400. return width * fontSize / 10;
  401. }
  402. function dataCombine(series) {
  403. return series.reduce(function(a, b) {
  404. return (a.data ? a.data : a).concat(b.data);
  405. }, []);
  406. }
  407. function dataCombineStack(series, len) {
  408. var sum = new Array(len);
  409. for (var j = 0; j < sum.length; j++) {
  410. sum[j] = 0;
  411. }
  412. for (var i = 0; i < series.length; i++) {
  413. for (var j = 0; j < sum.length; j++) {
  414. sum[j] += series[i].data[j];
  415. }
  416. }
  417. return series.reduce(function(a, b) {
  418. return (a.data ? a.data : a).concat(b.data).concat(sum);
  419. }, []);
  420. }
  421. function getTouches(touches, opts, e) {
  422. let x, y;
  423. if (touches.clientX) {
  424. if (opts.rotate) {
  425. y = opts.height - touches.clientX * opts.pixelRatio;
  426. x = (touches.pageY - e.currentTarget.offsetTop - (opts.height / opts.pixelRatio / 2) * (opts.pixelRatio -
  427. 1)) *
  428. opts.pixelRatio;
  429. } else {
  430. x = touches.clientX * opts.pixelRatio;
  431. y = (touches.pageY - e.currentTarget.offsetTop - (opts.height / opts.pixelRatio / 2) * (opts.pixelRatio -
  432. 1)) *
  433. opts.pixelRatio;
  434. }
  435. } else {
  436. if (opts.rotate) {
  437. y = opts.height - touches.x * opts.pixelRatio;
  438. x = touches.y * opts.pixelRatio;
  439. } else {
  440. x = touches.x * opts.pixelRatio;
  441. y = touches.y * opts.pixelRatio;
  442. }
  443. }
  444. return {
  445. x: x,
  446. y: y
  447. }
  448. }
  449. function getSeriesDataItem(series, index) {
  450. var data = [];
  451. for (let i = 0; i < series.length; i++) {
  452. let item = series[i];
  453. if (item.data[index] !== null && typeof item.data[index] !== 'undefined' && item.show) {
  454. let seriesItem = {};
  455. seriesItem.color = item.color;
  456. seriesItem.type = item.type;
  457. seriesItem.style = item.style;
  458. seriesItem.pointShape = item.pointShape;
  459. seriesItem.disableLegend = item.disableLegend;
  460. seriesItem.name = item.name;
  461. seriesItem.show = item.show;
  462. seriesItem.data = item.format ? item.format(item.data[index]) : item.data[index];
  463. data.push(seriesItem);
  464. }
  465. }
  466. return data;
  467. }
  468. function getMaxTextListLength(list) {
  469. var lengthList = list.map(function(item) {
  470. return measureText(item);
  471. });
  472. return Math.max.apply(null, lengthList);
  473. }
  474. function getRadarCoordinateSeries(length) {
  475. var eachAngle = 2 * Math.PI / length;
  476. var CoordinateSeries = [];
  477. for (var i = 0; i < length; i++) {
  478. CoordinateSeries.push(eachAngle * i);
  479. }
  480. return CoordinateSeries.map(function(item) {
  481. return -1 * item + Math.PI / 2;
  482. });
  483. }
  484. function getToolTipData(seriesData, calPoints, index, categories) {
  485. var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
  486. var textList = seriesData.map(function(item) {
  487. let titleText = [];
  488. if (categories) {
  489. titleText = categories;
  490. } else {
  491. titleText = item.data;
  492. }
  493. return {
  494. text: option.format ? option.format(item, titleText[index]) : item.name + ': ' + item.data,
  495. color: item.color
  496. };
  497. });
  498. var validCalPoints = [];
  499. var offset = {
  500. x: 0,
  501. y: 0
  502. };
  503. for (let i = 0; i < calPoints.length; i++) {
  504. let points = calPoints[i];
  505. if (typeof points[index] !== 'undefined' && points[index] !== null) {
  506. validCalPoints.push(points[index]);
  507. }
  508. }
  509. for (let i = 0; i < validCalPoints.length; i++) {
  510. let item = validCalPoints[i];
  511. offset.x = Math.round(item.x);
  512. offset.y += item.y;
  513. }
  514. offset.y /= validCalPoints.length;
  515. return {
  516. textList: textList,
  517. offset: offset
  518. };
  519. }
  520. function getMixToolTipData(seriesData, calPoints, index, categories) {
  521. var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
  522. var textList = seriesData.map(function(item) {
  523. return {
  524. text: option.format ? option.format(item, categories[index]) : item.name + ': ' + item.data,
  525. color: item.color,
  526. disableLegend: item.disableLegend ? true : false
  527. };
  528. });
  529. textList = textList.filter(function(item) {
  530. if (item.disableLegend !== true) {
  531. return item;
  532. }
  533. });
  534. var validCalPoints = [];
  535. var offset = {
  536. x: 0,
  537. y: 0
  538. };
  539. for (let i = 0; i < calPoints.length; i++) {
  540. let points = calPoints[i];
  541. if (typeof points[index] !== 'undefined' && points[index] !== null) {
  542. validCalPoints.push(points[index]);
  543. }
  544. }
  545. for (let i = 0; i < validCalPoints.length; i++) {
  546. let item = validCalPoints[i];
  547. offset.x = Math.round(item.x);
  548. offset.y += item.y;
  549. }
  550. offset.y /= validCalPoints.length;
  551. return {
  552. textList: textList,
  553. offset: offset
  554. };
  555. }
  556. function getCandleToolTipData(series, seriesData, calPoints, index, categories, extra) {
  557. var option = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {};
  558. let upColor = extra.color.upFill;
  559. let downColor = extra.color.downFill;
  560. //颜色顺序为开盘,收盘,最低,最高
  561. let color = [upColor, upColor, downColor, upColor];
  562. var textList = [];
  563. let text0 = {
  564. text: categories[index],
  565. color: null
  566. };
  567. textList.push(text0);
  568. seriesData.map(function(item) {
  569. if (index == 0 && item.data[1] - item.data[0] < 0) {
  570. color[1] = downColor;
  571. } else {
  572. if (item.data[0] < series[index - 1][1]) {
  573. color[0] = downColor;
  574. }
  575. if (item.data[1] < item.data[0]) {
  576. color[1] = downColor;
  577. }
  578. if (item.data[2] > series[index - 1][1]) {
  579. color[2] = upColor;
  580. }
  581. if (item.data[3] < series[index - 1][1]) {
  582. color[3] = downColor;
  583. }
  584. }
  585. let text1 = {
  586. text: '开盘:' + item.data[0],
  587. color: color[0]
  588. };
  589. let text2 = {
  590. text: '收盘:' + item.data[1],
  591. color: color[1]
  592. };
  593. let text3 = {
  594. text: '最低:' + item.data[2],
  595. color: color[2]
  596. };
  597. let text4 = {
  598. text: '最高:' + item.data[3],
  599. color: color[3]
  600. };
  601. textList.push(text1, text2, text3, text4);
  602. });
  603. var validCalPoints = [];
  604. var offset = {
  605. x: 0,
  606. y: 0
  607. };
  608. for (let i = 0; i < calPoints.length; i++) {
  609. let points = calPoints[i];
  610. if (typeof points[index] !== 'undefined' && points[index] !== null) {
  611. validCalPoints.push(points[index]);
  612. }
  613. }
  614. offset.x = Math.round(validCalPoints[0][0].x);
  615. return {
  616. textList: textList,
  617. offset: offset
  618. };
  619. }
  620. function filterSeries(series) {
  621. let tempSeries = [];
  622. for (let i = 0; i < series.length; i++) {
  623. if (series[i].show == true) {
  624. tempSeries.push(series[i])
  625. }
  626. }
  627. return tempSeries;
  628. }
  629. function findCurrentIndex(currentPoints, calPoints, opts, config) {
  630. var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
  631. var currentIndex = -1;
  632. var spacing = 0;
  633. let xAxisPoints = [];
  634. for (let i = 0; i < calPoints[0].length; i++) {
  635. xAxisPoints.push(calPoints[0][i].x)
  636. }
  637. // slam todo
  638. if ((opts.type == 'line' || opts.type == 'area') && opts.xAxis.boundaryGap == 'justify') {
  639. spacing = opts.chartData.eachSpacing / 2;
  640. }
  641. if (!opts.categories) {
  642. spacing = 0
  643. }
  644. if (isInExactChartArea(currentPoints, opts, config)) {
  645. xAxisPoints.forEach(function(item, index) {
  646. if (currentPoints.x + offset + spacing > item) {
  647. currentIndex = index;
  648. }
  649. });
  650. }
  651. return currentIndex;
  652. }
  653. function findLegendIndex(currentPoints, legendData, opts) {
  654. let currentIndex = -1;
  655. if (isInExactLegendArea(currentPoints, legendData.area)) {
  656. let points = legendData.points;
  657. let index = -1;
  658. for (let i = 0, len = points.length; i < len; i++) {
  659. let item = points[i];
  660. for (let j = 0; j < item.length; j++) {
  661. index += 1;
  662. let area = item[j]['area'];
  663. if (currentPoints.x > area[0] && currentPoints.x < area[2] && currentPoints.y > area[1] && currentPoints
  664. .y < area[3]) {
  665. currentIndex = index;
  666. break;
  667. }
  668. }
  669. }
  670. return currentIndex;
  671. }
  672. return currentIndex;
  673. }
  674. function isInExactLegendArea(currentPoints, area) {
  675. return currentPoints.x > area.start.x && currentPoints.x < area.end.x && currentPoints.y > area.start.y &&
  676. currentPoints.y < area.end.y;
  677. }
  678. function isInExactChartArea(currentPoints, opts, config) {
  679. return currentPoints.x <= opts.width - opts.area[1] + 10 && currentPoints.x >= opts.area[3] - 10 && currentPoints
  680. .y >=
  681. opts.area[0] && currentPoints.y <= opts.height - opts.area[2];
  682. }
  683. function findRadarChartCurrentIndex(currentPoints, radarData, count) {
  684. var eachAngleArea = 2 * Math.PI / count;
  685. var currentIndex = -1;
  686. if (isInExactPieChartArea(currentPoints, radarData.center, radarData.radius)) {
  687. var fixAngle = function fixAngle(angle) {
  688. if (angle < 0) {
  689. angle += 2 * Math.PI;
  690. }
  691. if (angle > 2 * Math.PI) {
  692. angle -= 2 * Math.PI;
  693. }
  694. return angle;
  695. };
  696. var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x);
  697. angle = -1 * angle;
  698. if (angle < 0) {
  699. angle += 2 * Math.PI;
  700. }
  701. var angleList = radarData.angleList.map(function(item) {
  702. item = fixAngle(-1 * item);
  703. return item;
  704. });
  705. angleList.forEach(function(item, index) {
  706. var rangeStart = fixAngle(item - eachAngleArea / 2);
  707. var rangeEnd = fixAngle(item + eachAngleArea / 2);
  708. if (rangeEnd < rangeStart) {
  709. rangeEnd += 2 * Math.PI;
  710. }
  711. if (angle >= rangeStart && angle <= rangeEnd || angle + 2 * Math.PI >= rangeStart && angle + 2 *
  712. Math.PI <=
  713. rangeEnd) {
  714. currentIndex = index;
  715. }
  716. });
  717. }
  718. return currentIndex;
  719. }
  720. function findFunnelChartCurrentIndex(currentPoints, funnelData) {
  721. var currentIndex = -1;
  722. for (var i = 0, len = funnelData.series.length; i < len; i++) {
  723. var item = funnelData.series[i];
  724. if (currentPoints.x > item.funnelArea[0] && currentPoints.x < item.funnelArea[2] && currentPoints.y > item
  725. .funnelArea[
  726. 1] && currentPoints.y < item.funnelArea[3]) {
  727. currentIndex = i;
  728. break;
  729. }
  730. }
  731. return currentIndex;
  732. }
  733. function findWordChartCurrentIndex(currentPoints, wordData) {
  734. var currentIndex = -1;
  735. for (var i = 0, len = wordData.length; i < len; i++) {
  736. var item = wordData[i];
  737. if (currentPoints.x > item.area[0] && currentPoints.x < item.area[2] && currentPoints.y > item.area[1] &&
  738. currentPoints.y < item.area[3]) {
  739. currentIndex = i;
  740. break;
  741. }
  742. }
  743. return currentIndex;
  744. }
  745. function findMapChartCurrentIndex(currentPoints, opts) {
  746. var currentIndex = -1;
  747. var cData = opts.chartData.mapData;
  748. var data = opts.series;
  749. var tmp = pointToCoordinate(currentPoints.y, currentPoints.x, cData.bounds, cData.scale, cData.xoffset, cData
  750. .yoffset);
  751. var poi = [tmp.x, tmp.y];
  752. for (var i = 0, len = data.length; i < len; i++) {
  753. var item = data[i].geometry.coordinates;
  754. if (isPoiWithinPoly(poi, item)) {
  755. currentIndex = i;
  756. break;
  757. }
  758. }
  759. return currentIndex;
  760. }
  761. function findPieChartCurrentIndex(currentPoints, pieData) {
  762. var currentIndex = -1;
  763. if (isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) {
  764. var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x);
  765. angle = -angle;
  766. for (var i = 0, len = pieData.series.length; i < len; i++) {
  767. var item = pieData.series[i];
  768. if (isInAngleRange(angle, item._start_, item._start_ + item._proportion_ * 2 * Math.PI)) {
  769. currentIndex = i;
  770. break;
  771. }
  772. }
  773. }
  774. return currentIndex;
  775. }
  776. function isInExactPieChartArea(currentPoints, center, radius) {
  777. return Math.pow(currentPoints.x - center.x, 2) + Math.pow(currentPoints.y - center.y, 2) <= Math.pow(radius, 2);
  778. }
  779. function splitPoints(points) {
  780. var newPoints = [];
  781. var items = [];
  782. points.forEach(function(item, index) {
  783. if (item !== null) {
  784. items.push(item);
  785. } else {
  786. if (items.length) {
  787. newPoints.push(items);
  788. }
  789. items = [];
  790. }
  791. });
  792. if (items.length) {
  793. newPoints.push(items);
  794. }
  795. return newPoints;
  796. }
  797. function calLegendData(series, opts, config, chartData) {
  798. let legendData = {
  799. area: {
  800. start: {
  801. x: 0,
  802. y: 0
  803. },
  804. end: {
  805. x: 0,
  806. y: 0
  807. },
  808. width: 0,
  809. height: 0,
  810. wholeWidth: 0,
  811. wholeHeight: 0
  812. },
  813. points: [],
  814. widthArr: [],
  815. heightArr: []
  816. };
  817. if (opts.legend.show === false) {
  818. chartData.legendData = legendData;
  819. return legendData;
  820. }
  821. let padding = opts.legend.padding;
  822. let margin = opts.legend.margin;
  823. let fontSize = opts.legend.fontSize;
  824. let shapeWidth = 15 * opts.pixelRatio;
  825. let shapeRight = 5 * opts.pixelRatio;
  826. let lineHeight = Math.max(opts.legend.lineHeight * opts.pixelRatio, fontSize);
  827. if (opts.legend.position == 'top' || opts.legend.position == 'bottom') {
  828. let legendList = [];
  829. let widthCount = 0;
  830. let widthCountArr = [];
  831. let currentRow = [];
  832. for (let i = 0; i < series.length; i++) {
  833. let item = series[i];
  834. let itemWidth = shapeWidth + shapeRight + measureText(item.name || 'undefined', fontSize) + opts.legend
  835. .itemGap;
  836. if (widthCount + itemWidth > opts.width - opts.padding[1] - opts.padding[3]) {
  837. legendList.push(currentRow);
  838. widthCountArr.push(widthCount - opts.legend.itemGap);
  839. widthCount = itemWidth;
  840. currentRow = [item];
  841. } else {
  842. widthCount += itemWidth;
  843. currentRow.push(item);
  844. }
  845. }
  846. if (currentRow.length) {
  847. legendList.push(currentRow);
  848. widthCountArr.push(widthCount - opts.legend.itemGap);
  849. legendData.widthArr = widthCountArr;
  850. let legendWidth = Math.max.apply(null, widthCountArr);
  851. switch (opts.legend.float) {
  852. case 'left':
  853. legendData.area.start.x = opts.padding[3];
  854. legendData.area.end.x = opts.padding[3] + 2 * padding;
  855. break;
  856. case 'right':
  857. legendData.area.start.x = opts.width - opts.padding[1] - legendWidth - 2 * padding;
  858. legendData.area.end.x = opts.width - opts.padding[1];
  859. break;
  860. default:
  861. legendData.area.start.x = (opts.width - legendWidth) / 2 - padding;
  862. legendData.area.end.x = (opts.width + legendWidth) / 2 + padding;
  863. }
  864. legendData.area.width = legendWidth + 2 * padding;
  865. legendData.area.wholeWidth = legendWidth + 2 * padding;
  866. legendData.area.height = legendList.length * lineHeight + 2 * padding;
  867. legendData.area.wholeHeight = legendList.length * lineHeight + 2 * padding + 2 * margin;
  868. legendData.points = legendList;
  869. }
  870. } else {
  871. let len = series.length;
  872. let maxHeight = opts.height - opts.padding[0] - opts.padding[2] - 2 * margin - 2 * padding;
  873. let maxLength = Math.min(Math.floor(maxHeight / lineHeight), len);
  874. legendData.area.height = maxLength * lineHeight + padding * 2;
  875. legendData.area.wholeHeight = maxLength * lineHeight + padding * 2;
  876. switch (opts.legend.float) {
  877. case 'top':
  878. legendData.area.start.y = opts.padding[0] + margin;
  879. legendData.area.end.y = opts.padding[0] + margin + legendData.area.height;
  880. break;
  881. case 'bottom':
  882. legendData.area.start.y = opts.height - opts.padding[2] - margin - legendData.area.height;
  883. legendData.area.end.y = opts.height - opts.padding[2] - margin;
  884. break;
  885. default:
  886. legendData.area.start.y = (opts.height - legendData.area.height) / 2;
  887. legendData.area.end.y = (opts.height + legendData.area.height) / 2;
  888. }
  889. let lineNum = len % maxLength === 0 ? len / maxLength : Math.floor((len / maxLength) + 1);
  890. let currentRow = [];
  891. for (let i = 0; i < lineNum; i++) {
  892. let temp = series.slice(i * maxLength, i * maxLength + maxLength);
  893. currentRow.push(temp);
  894. }
  895. legendData.points = currentRow;
  896. if (currentRow.length) {
  897. for (let i = 0; i < currentRow.length; i++) {
  898. let item = currentRow[i];
  899. let maxWidth = 0;
  900. for (let j = 0; j < item.length; j++) {
  901. let itemWidth = shapeWidth + shapeRight + measureText(item[j].name || 'undefined', fontSize) + opts
  902. .legend.itemGap;
  903. if (itemWidth > maxWidth) {
  904. maxWidth = itemWidth;
  905. }
  906. }
  907. legendData.widthArr.push(maxWidth);
  908. legendData.heightArr.push(item.length * lineHeight + padding * 2);
  909. }
  910. let legendWidth = 0
  911. for (let i = 0; i < legendData.widthArr.length; i++) {
  912. legendWidth += legendData.widthArr[i];
  913. }
  914. legendData.area.width = legendWidth - opts.legend.itemGap + 2 * padding;
  915. legendData.area.wholeWidth = legendData.area.width + padding;
  916. }
  917. }
  918. switch (opts.legend.position) {
  919. case 'top':
  920. legendData.area.start.y = opts.padding[0] + margin;
  921. legendData.area.end.y = opts.padding[0] + margin + legendData.area.height;
  922. break;
  923. case 'bottom':
  924. legendData.area.start.y = opts.height - opts.padding[2] - legendData.area.height - margin;
  925. legendData.area.end.y = opts.height - opts.padding[2] - margin;
  926. break;
  927. case 'left':
  928. legendData.area.start.x = opts.padding[3];
  929. legendData.area.end.x = opts.padding[3] + legendData.area.width;
  930. break;
  931. case 'right':
  932. legendData.area.start.x = opts.width - opts.padding[1] - legendData.area.width;
  933. legendData.area.end.x = opts.width - opts.padding[1];
  934. break;
  935. }
  936. chartData.legendData = legendData;
  937. return legendData;
  938. }
  939. function calCategoriesData(categories, opts, config, eachSpacing) {
  940. var result = {
  941. angle: 0,
  942. xAxisHeight: config.xAxisHeight
  943. };
  944. var categoriesTextLenth = categories.map(function(item) {
  945. return measureText(item, opts.xAxis.fontSize || config.fontSize);
  946. });
  947. var maxTextLength = Math.max.apply(this, categoriesTextLenth);
  948. if (opts.xAxis.rotateLabel == true && maxTextLength + 2 * config.xAxisTextPadding > eachSpacing) {
  949. result.angle = 45 * Math.PI / 180;
  950. result.xAxisHeight = 2 * config.xAxisTextPadding + maxTextLength * Math.sin(result.angle);
  951. }
  952. return result;
  953. }
  954. function getXAxisTextList(series, opts, config) {
  955. var index = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1;
  956. var data = dataCombine(series);
  957. var sorted = [];
  958. // remove null from data
  959. data = data.filter(function(item) {
  960. //return item !== null;
  961. if (typeof item === 'object' && item !== null) {
  962. if (item.constructor == Array) {
  963. return item !== null;
  964. } else {
  965. return item.value !== null;
  966. }
  967. } else {
  968. return item !== null;
  969. }
  970. });
  971. data.map(function(item) {
  972. if (typeof item === 'object') {
  973. if (item.constructor == Array) {
  974. if (opts.type == 'candle') {
  975. item.map(function(subitem) {
  976. sorted.push(subitem);
  977. })
  978. } else {
  979. sorted.push(item[0]);
  980. }
  981. } else {
  982. sorted.push(item.value);
  983. }
  984. } else {
  985. sorted.push(item);
  986. }
  987. })
  988. var minData = 0;
  989. var maxData = 0;
  990. if (sorted.length > 0) {
  991. minData = Math.min.apply(this, sorted);
  992. maxData = Math.max.apply(this, sorted);
  993. }
  994. //为了兼容v1.9.0之前的项目
  995. if (index > -1) {
  996. if (typeof opts.xAxis.data[index].min === 'number') {
  997. minData = Math.min(opts.xAxis.data[index].min, minData);
  998. }
  999. if (typeof opts.xAxis.data[index].max === 'number') {
  1000. maxData = Math.max(opts.xAxis.data[index].max, maxData);
  1001. }
  1002. } else {
  1003. if (typeof opts.xAxis.min === 'number') {
  1004. minData = Math.min(opts.xAxis.min, minData);
  1005. }
  1006. if (typeof opts.xAxis.max === 'number') {
  1007. maxData = Math.max(opts.xAxis.max, maxData);
  1008. }
  1009. }
  1010. if (minData === maxData) {
  1011. var rangeSpan = maxData || 10;
  1012. maxData += rangeSpan;
  1013. }
  1014. var dataRange = getDataRange(minData, maxData);
  1015. var minRange = dataRange.minRange;
  1016. var maxRange = dataRange.maxRange;
  1017. var range = [];
  1018. var eachRange = (maxRange - minRange) / opts.xAxis.splitNumber;
  1019. for (var i = 0; i <= opts.xAxis.splitNumber; i++) {
  1020. range.push(minRange + eachRange * i);
  1021. }
  1022. return range;
  1023. }
  1024. function calXAxisData(series, opts, config) {
  1025. var result = {
  1026. angle: 0,
  1027. xAxisHeight: config.xAxisHeight
  1028. };
  1029. result.ranges = getXAxisTextList(series, opts, config);
  1030. result.rangesFormat = result.ranges.map(function(item) {
  1031. item = opts.xAxis.format ? opts.xAxis.format(item) : util.toFixed(item, 2);
  1032. return item;
  1033. });
  1034. var xAxisScaleValues = result.ranges.map(function(item) {
  1035. // 如果刻度值是浮点数,则保留两位小数
  1036. item = util.toFixed(item, 2);
  1037. // 若有自定义格式则调用自定义的格式化函数
  1038. item = opts.xAxis.format ? opts.xAxis.format(Number(item)) : item;
  1039. return item;
  1040. });
  1041. result = Object.assign(result, getXAxisPoints(xAxisScaleValues, opts, config));
  1042. // 计算X轴刻度的属性譬如每个刻度的间隔,刻度的起始点\结束点以及总长
  1043. var eachSpacing = result.eachSpacing;
  1044. var textLength = xAxisScaleValues.map(function(item) {
  1045. return measureText(item);
  1046. });
  1047. // get max length of categories text
  1048. var maxTextLength = Math.max.apply(this, textLength);
  1049. // 如果刻度值文本内容过长,则将其逆时针旋转45°
  1050. if (maxTextLength + 2 * config.xAxisTextPadding > eachSpacing) {
  1051. result.angle = 45 * Math.PI / 180;
  1052. result.xAxisHeight = 2 * config.xAxisTextPadding + maxTextLength * Math.sin(result.angle);
  1053. }
  1054. if (opts.xAxis.disabled === true) {
  1055. result.xAxisHeight = 0;
  1056. }
  1057. return result;
  1058. }
  1059. function getRadarDataPoints(angleList, center, radius, series, opts) {
  1060. var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
  1061. var radarOption = opts.extra.radar || {};
  1062. radarOption.max = radarOption.max || 0;
  1063. var maxData = Math.max(radarOption.max, Math.max.apply(null, dataCombine(series)));
  1064. var data = [];
  1065. for (let i = 0; i < series.length; i++) {
  1066. let each = series[i];
  1067. let listItem = {};
  1068. listItem.color = each.color;
  1069. listItem.legendShape = each.legendShape;
  1070. listItem.pointShape = each.pointShape;
  1071. listItem.data = [];
  1072. each.data.forEach(function(item, index) {
  1073. let tmp = {};
  1074. tmp.angle = angleList[index];
  1075. tmp.proportion = item / maxData;
  1076. tmp.position = convertCoordinateOrigin(radius * tmp.proportion * process * Math.cos(tmp.angle),
  1077. radius * tmp.proportion *
  1078. process * Math.sin(tmp.angle), center);
  1079. listItem.data.push(tmp);
  1080. });
  1081. data.push(listItem);
  1082. }
  1083. return data;
  1084. }
  1085. function getPieDataPoints(series, radius) {
  1086. var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  1087. var count = 0;
  1088. var _start_ = 0;
  1089. for (let i = 0; i < series.length; i++) {
  1090. let item = series[i];
  1091. item.data = item.data === null ? 0 : item.data;
  1092. count += item.data;
  1093. }
  1094. for (let i = 0; i < series.length; i++) {
  1095. let item = series[i];
  1096. item.data = item.data === null ? 0 : item.data;
  1097. if (count === 0) {
  1098. item._proportion_ = 1 / series.length * process;
  1099. } else {
  1100. item._proportion_ = item.data / count * process;
  1101. }
  1102. item._radius_ = radius;
  1103. }
  1104. for (let i = 0; i < series.length; i++) {
  1105. let item = series[i];
  1106. item._start_ = _start_;
  1107. _start_ += 2 * item._proportion_ * Math.PI;
  1108. }
  1109. return series;
  1110. }
  1111. function getFunnelDataPoints(series, radius) {
  1112. var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  1113. series = series.sort(function(a, b) {
  1114. return parseInt(b.data) - parseInt(a.data);
  1115. });
  1116. for (let i = 0; i < series.length; i++) {
  1117. series[i].radius = series[i].data / series[0].data * radius * process;
  1118. series[i]._proportion_ = series[i].data / series[0].data;
  1119. }
  1120. return series.reverse();
  1121. }
  1122. function getRoseDataPoints(series, type, minRadius, radius) {
  1123. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  1124. var count = 0;
  1125. var _start_ = 0;
  1126. var dataArr = [];
  1127. for (let i = 0; i < series.length; i++) {
  1128. let item = series[i];
  1129. item.data = item.data === null ? 0 : item.data;
  1130. count += item.data;
  1131. dataArr.push(item.data);
  1132. }
  1133. var minData = Math.min.apply(null, dataArr);
  1134. var maxData = Math.max.apply(null, dataArr);
  1135. var radiusLength = radius - minRadius;
  1136. for (let i = 0; i < series.length; i++) {
  1137. let item = series[i];
  1138. item.data = item.data === null ? 0 : item.data;
  1139. if (count === 0 || type == 'area') {
  1140. item._proportion_ = item.data / count * process;
  1141. item._rose_proportion_ = 1 / series.length * process;
  1142. } else {
  1143. item._proportion_ = item.data / count * process;
  1144. item._rose_proportion_ = item.data / count * process;
  1145. }
  1146. item._radius_ = minRadius + radiusLength * ((item.data - minData) / (maxData - minData));
  1147. }
  1148. for (let i = 0; i < series.length; i++) {
  1149. let item = series[i];
  1150. item._start_ = _start_;
  1151. _start_ += 2 * item._rose_proportion_ * Math.PI;
  1152. }
  1153. return series;
  1154. }
  1155. function getArcbarDataPoints(series, arcbarOption) {
  1156. var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  1157. if (process == 1) {
  1158. process = 0.999999;
  1159. }
  1160. for (let i = 0; i < series.length; i++) {
  1161. let item = series[i];
  1162. item.data = item.data === null ? 0 : item.data;
  1163. let totalAngle;
  1164. if (arcbarOption.type == 'circle') {
  1165. totalAngle = 2;
  1166. } else {
  1167. if (arcbarOption.endAngle < arcbarOption.startAngle) {
  1168. totalAngle = 2 + arcbarOption.endAngle - arcbarOption.startAngle;
  1169. } else {
  1170. totalAngle = arcbarOption.startAngle - arcbarOption.endAngle;
  1171. }
  1172. }
  1173. item._proportion_ = totalAngle * item.data * process + arcbarOption.startAngle;
  1174. if (item._proportion_ >= 2) {
  1175. item._proportion_ = item._proportion_ % 2;
  1176. }
  1177. }
  1178. return series;
  1179. }
  1180. function getGaugeAxisPoints(categories, startAngle, endAngle) {
  1181. let totalAngle = startAngle - endAngle + 1;
  1182. let tempStartAngle = startAngle;
  1183. for (let i = 0; i < categories.length; i++) {
  1184. categories[i].value = categories[i].value === null ? 0 : categories[i].value;
  1185. categories[i]._startAngle_ = tempStartAngle;
  1186. categories[i]._endAngle_ = totalAngle * categories[i].value + startAngle;
  1187. if (categories[i]._endAngle_ >= 2) {
  1188. categories[i]._endAngle_ = categories[i]._endAngle_ % 2;
  1189. }
  1190. tempStartAngle = categories[i]._endAngle_;
  1191. }
  1192. return categories;
  1193. }
  1194. function getGaugeDataPoints(series, categories, gaugeOption) {
  1195. let process = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
  1196. for (let i = 0; i < series.length; i++) {
  1197. let item = series[i];
  1198. item.data = item.data === null ? 0 : item.data;
  1199. if (gaugeOption.pointer.color == 'auto') {
  1200. for (let i = 0; i < categories.length; i++) {
  1201. if (item.data <= categories[i].value) {
  1202. item.color = categories[i].color;
  1203. break;
  1204. }
  1205. }
  1206. } else {
  1207. item.color = gaugeOption.pointer.color;
  1208. }
  1209. let totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
  1210. item._endAngle_ = totalAngle * item.data + gaugeOption.startAngle;
  1211. item._oldAngle_ = gaugeOption.oldAngle;
  1212. if (gaugeOption.oldAngle < gaugeOption.endAngle) {
  1213. item._oldAngle_ += 2;
  1214. }
  1215. if (item.data >= gaugeOption.oldData) {
  1216. item._proportion_ = (item._endAngle_ - item._oldAngle_) * process + gaugeOption.oldAngle;
  1217. } else {
  1218. item._proportion_ = item._oldAngle_ - (item._oldAngle_ - item._endAngle_) * process;
  1219. }
  1220. if (item._proportion_ >= 2) {
  1221. item._proportion_ = item._proportion_ % 2;
  1222. }
  1223. }
  1224. return series;
  1225. }
  1226. function getPieTextMaxLength(series) {
  1227. series = getPieDataPoints(series);
  1228. let maxLength = 0;
  1229. for (let i = 0; i < series.length; i++) {
  1230. let item = series[i];
  1231. let text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) +
  1232. '%';
  1233. maxLength = Math.max(maxLength, measureText(text));
  1234. }
  1235. return maxLength;
  1236. }
  1237. function fixColumeData(points, eachSpacing, columnLen, index, config, opts) {
  1238. return points.map(function(item) {
  1239. if (item === null) {
  1240. return null;
  1241. }
  1242. item.width = Math.ceil((eachSpacing - 2 * config.columePadding) / columnLen);
  1243. if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
  1244. item.width = Math.min(item.width, +opts.extra.column.width);
  1245. }
  1246. if (item.width <= 0) {
  1247. item.width = 1;
  1248. }
  1249. item.x += (index + 0.5 - columnLen / 2) * item.width;
  1250. return item;
  1251. });
  1252. }
  1253. function fixColumeMeterData(points, eachSpacing, columnLen, index, config, opts, border) {
  1254. return points.map(function(item) {
  1255. if (item === null) {
  1256. return null;
  1257. }
  1258. item.width = Math.ceil((eachSpacing - 2 * config.columePadding) / 2);
  1259. if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
  1260. item.width = Math.min(item.width, +opts.extra.column.width);
  1261. }
  1262. if (index > 0) {
  1263. item.width -= 2 * border;
  1264. }
  1265. return item;
  1266. });
  1267. }
  1268. function fixColumeStackData(points, eachSpacing, columnLen, index, config, opts, series) {
  1269. return points.map(function(item, indexn) {
  1270. if (item === null) {
  1271. return null;
  1272. }
  1273. item.width = Math.ceil((eachSpacing - 2 * config.columePadding) / 2);
  1274. if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
  1275. item.width = Math.min(item.width, +opts.extra.column.width);
  1276. }
  1277. return item;
  1278. });
  1279. }
  1280. function getXAxisPoints(categories, opts, config) {
  1281. var spacingValid = opts.width - opts.area[1] - opts.area[3];
  1282. var dataCount = opts.enableScroll ? Math.min(opts.xAxis.itemCount, categories.length) : categories.length;
  1283. if ((opts.type == 'line' || opts.type == 'area') && dataCount > 1 && opts.xAxis.boundaryGap == 'justify') {
  1284. dataCount -= 1;
  1285. }
  1286. var eachSpacing = spacingValid / dataCount;
  1287. var xAxisPoints = [];
  1288. var startX = opts.area[3];
  1289. var endX = opts.width - opts.area[1];
  1290. categories.forEach(function(item, index) {
  1291. xAxisPoints.push(startX + index * eachSpacing);
  1292. });
  1293. if (opts.xAxis.boundaryGap !== 'justify') {
  1294. if (opts.enableScroll === true) {
  1295. xAxisPoints.push(startX + categories.length * eachSpacing);
  1296. } else {
  1297. xAxisPoints.push(endX);
  1298. }
  1299. }
  1300. return {
  1301. xAxisPoints: xAxisPoints,
  1302. startX: startX,
  1303. endX: endX,
  1304. eachSpacing: eachSpacing
  1305. };
  1306. }
  1307. function getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) {
  1308. var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
  1309. var points = [];
  1310. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1311. data.forEach(function(item, index) {
  1312. if (item === null) {
  1313. points.push(null);
  1314. } else {
  1315. var cPoints = [];
  1316. item.forEach(function(items, indexs) {
  1317. var point = {};
  1318. point.x = xAxisPoints[index] + Math.round(eachSpacing / 2);
  1319. var value = items.value || items;
  1320. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1321. height *= process;
  1322. point.y = opts.height - Math.round(height) - opts.area[2];
  1323. cPoints.push(point);
  1324. });
  1325. points.push(cPoints);
  1326. }
  1327. });
  1328. return points;
  1329. }
  1330. function getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) {
  1331. var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
  1332. var boundaryGap = 'center';
  1333. if (opts.type == 'line' || opts.type == 'area') {
  1334. boundaryGap = opts.xAxis.boundaryGap;
  1335. }
  1336. var points = [];
  1337. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1338. var validWidth = opts.width - opts.area[1] - opts.area[3];
  1339. data.forEach(function(item, index) {
  1340. if (item === null) {
  1341. points.push(null);
  1342. } else {
  1343. var point = {};
  1344. point.color = item.color;
  1345. point.x = xAxisPoints[index];
  1346. var value = item;
  1347. if (typeof item === 'object' && item !== null) {
  1348. if (item.constructor == Array) {
  1349. let xranges, xminRange, xmaxRange;
  1350. xranges = [].concat(opts.chartData.xAxisData.ranges);
  1351. xminRange = xranges.shift();
  1352. xmaxRange = xranges.pop();
  1353. value = item[1];
  1354. point.x = opts.area[3] + validWidth * (item[0] - xminRange) / (xmaxRange - xminRange);
  1355. } else {
  1356. value = item.value;
  1357. }
  1358. }
  1359. if (boundaryGap == 'center') {
  1360. point.x += Math.round(eachSpacing / 2);
  1361. }
  1362. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1363. height *= process;
  1364. point.y = opts.height - Math.round(height) - opts.area[2];
  1365. points.push(point);
  1366. }
  1367. });
  1368. return points;
  1369. }
  1370. function getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex,
  1371. stackSeries) {
  1372. var process = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 1;
  1373. var points = [];
  1374. var validHeight = opts.height - opts.area[0] - opts.area[2];
  1375. data.forEach(function(item, index) {
  1376. if (item === null) {
  1377. points.push(null);
  1378. } else {
  1379. var point = {};
  1380. point.color = item.color;
  1381. point.x = xAxisPoints[index] + Math.round(eachSpacing / 2);
  1382. if (seriesIndex > 0) {
  1383. var value = 0;
  1384. for (let i = 0; i <= seriesIndex; i++) {
  1385. value += stackSeries[i].data[index];
  1386. }
  1387. var value0 = value - item;
  1388. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1389. var height0 = validHeight * (value0 - minRange) / (maxRange - minRange);
  1390. } else {
  1391. var value = item;
  1392. var height = validHeight * (value - minRange) / (maxRange - minRange);
  1393. var height0 = 0;
  1394. }
  1395. var heightc = height0;
  1396. height *= process;
  1397. heightc *= process;
  1398. point.y = opts.height - Math.round(height) - opts.area[2];
  1399. point.y0 = opts.height - Math.round(heightc) - opts.area[2];
  1400. points.push(point);
  1401. }
  1402. });
  1403. return points;
  1404. }
  1405. function getYAxisTextList(series, opts, config, stack) {
  1406. var index = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1;
  1407. var data;
  1408. if (stack == 'stack') {
  1409. data = dataCombineStack(series, opts.categories.length);
  1410. } else {
  1411. data = dataCombine(series);
  1412. }
  1413. var sorted = [];
  1414. // remove null from data
  1415. data = data.filter(function(item) {
  1416. //return item !== null;
  1417. if (typeof item === 'object' && item !== null) {
  1418. if (item.constructor == Array) {
  1419. return item !== null;
  1420. } else {
  1421. return item.value !== null;
  1422. }
  1423. } else {
  1424. return item !== null;
  1425. }
  1426. });
  1427. data.map(function(item) {
  1428. if (typeof item === 'object') {
  1429. if (item.constructor == Array) {
  1430. if (opts.type == 'candle') {
  1431. item.map(function(subitem) {
  1432. sorted.push(subitem);
  1433. })
  1434. } else {
  1435. sorted.push(item[1]);
  1436. }
  1437. } else {
  1438. sorted.push(item.value);
  1439. }
  1440. } else {
  1441. sorted.push(item);
  1442. }
  1443. })
  1444. var minData = 0;
  1445. var maxData = 0;
  1446. if (sorted.length > 0) {
  1447. minData = Math.min.apply(this, sorted);
  1448. maxData = Math.max.apply(this, sorted);
  1449. }
  1450. //为了兼容v1.9.0之前的项目
  1451. if (index > -1) {
  1452. if (typeof opts.yAxis.data[index].min === 'number') {
  1453. minData = Math.min(opts.yAxis.data[index].min, minData);
  1454. }
  1455. if (typeof opts.yAxis.data[index].max === 'number') {
  1456. maxData = Math.max(opts.yAxis.data[index].max, maxData);
  1457. }
  1458. } else {
  1459. if (typeof opts.yAxis.min === 'number') {
  1460. minData = Math.min(opts.yAxis.min, minData);
  1461. }
  1462. if (typeof opts.yAxis.max === 'number') {
  1463. maxData = Math.max(opts.yAxis.max, maxData);
  1464. }
  1465. }
  1466. if (minData === maxData) {
  1467. var rangeSpan = maxData || 10;
  1468. maxData += rangeSpan;
  1469. }
  1470. var dataRange = getDataRange(minData, maxData);
  1471. var minRange = dataRange.minRange;
  1472. var maxRange = dataRange.maxRange;
  1473. var range = [];
  1474. var eachRange = (maxRange - minRange) / opts.yAxis.splitNumber;
  1475. for (var i = 0; i <= opts.yAxis.splitNumber; i++) {
  1476. range.push(minRange + eachRange * i);
  1477. }
  1478. return range.reverse();
  1479. }
  1480. function calYAxisData(series, opts, config) {
  1481. //堆叠图重算Y轴
  1482. var columnstyle = assign({}, {
  1483. type: ""
  1484. }, opts.extra.column);
  1485. //如果是多Y轴,重新计算
  1486. var YLength = opts.yAxis.data.length;
  1487. var newSeries = new Array(YLength);
  1488. if (YLength > 0) {
  1489. for (let i = 0; i < YLength; i++) {
  1490. newSeries[i] = [];
  1491. for (let j = 0; j < series.length; j++) {
  1492. if (series[j].index == i) {
  1493. newSeries[i].push(series[j]);
  1494. }
  1495. }
  1496. }
  1497. var rangesArr = new Array(YLength);
  1498. var rangesFormatArr = new Array(YLength);
  1499. var yAxisWidthArr = new Array(YLength);
  1500. for (let i = 0; i < YLength; i++) {
  1501. let yData = opts.yAxis.data[i];
  1502. //如果总开关不显示,强制每个Y轴为不显示
  1503. if (opts.yAxis.disabled == true) {
  1504. yData.disabled = true;
  1505. }
  1506. rangesArr[i] = getYAxisTextList(newSeries[i], opts, config, columnstyle.type, i);
  1507. let yAxisFontSizes = yData.fontSize || config.fontSize;
  1508. yAxisWidthArr[i] = {
  1509. position: yData.position ? yData.position : 'left',
  1510. width: 0
  1511. };
  1512. rangesFormatArr[i] = rangesArr[i].map(function(items) {
  1513. items = util.toFixed(items, 6);
  1514. items = yData.format ? yData.format(Number(items)) : items;
  1515. yAxisWidthArr[i].width = Math.max(yAxisWidthArr[i].width, measureText(items, yAxisFontSizes) +
  1516. 5);
  1517. return items;
  1518. });
  1519. let calibration = yData.calibration ? 4 * opts.pixelRatio : 0;
  1520. yAxisWidthArr[i].width += calibration + 3 * opts.pixelRatio;
  1521. if (yData.disabled === true) {
  1522. yAxisWidthArr[i].width = 0;
  1523. }
  1524. }
  1525. } else {
  1526. var rangesArr = new Array(1);
  1527. var rangesFormatArr = new Array(1);
  1528. var yAxisWidthArr = new Array(1);
  1529. rangesArr[0] = getYAxisTextList(series, opts, config, columnstyle.type);
  1530. yAxisWidthArr[0] = {
  1531. position: 'left',
  1532. width: 0
  1533. };
  1534. var yAxisFontSize = opts.yAxis.fontSize || config.fontSize;
  1535. rangesFormatArr[0] = rangesArr[0].map(function(item) {
  1536. item = util.toFixed(item, 6);
  1537. item = opts.yAxis.format ? opts.yAxis.format(Number(item)) : item;
  1538. yAxisWidthArr[0].width = Math.max(yAxisWidthArr[0].width, measureText(item, yAxisFontSize) + 5);
  1539. return item;
  1540. });
  1541. yAxisWidthArr[0].width += 3 * opts.pixelRatio;
  1542. if (opts.yAxis.disabled === true) {
  1543. yAxisWidthArr[0] = {
  1544. position: 'left',
  1545. width: 0
  1546. };
  1547. opts.yAxis.data[0] = {
  1548. disabled: true
  1549. };
  1550. } else {
  1551. opts.yAxis.data[0] = {
  1552. disabled: false,
  1553. position: 'left',
  1554. max: opts.yAxis.max,
  1555. min: opts.yAxis.min,
  1556. format: opts.yAxis.format
  1557. };
  1558. }
  1559. }
  1560. return {
  1561. rangesFormat: rangesFormatArr,
  1562. ranges: rangesArr,
  1563. yAxisWidth: yAxisWidthArr
  1564. };
  1565. }
  1566. function calTooltipYAxisData(point, series, opts, config, eachSpacing) {
  1567. let ranges = [].concat(opts.chartData.yAxisData.ranges);
  1568. let spacingValid = opts.height - opts.area[0] - opts.area[2];
  1569. let minAxis = opts.area[0];
  1570. let items = [];
  1571. for (let i = 0; i < ranges.length; i++) {
  1572. let maxVal = ranges[i].shift();
  1573. let minVal = ranges[i].pop();
  1574. let item = maxVal - (maxVal - minVal) * (point - minAxis) / spacingValid;
  1575. item = opts.yAxis.data[i].format ? opts.yAxis.data[i].format(Number(item)) : item.toFixed(0);
  1576. items.push(String(item))
  1577. }
  1578. return items;
  1579. }
  1580. function calMarkLineData(points, opts) {
  1581. let minRange, maxRange;
  1582. let spacingValid = opts.height - opts.area[0] - opts.area[2];
  1583. for (let i = 0; i < points.length; i++) {
  1584. points[i].yAxisIndex = points[i].yAxisIndex ? points[i].yAxisIndex : 0;
  1585. let range = [].concat(opts.chartData.yAxisData.ranges[points[i].yAxisIndex]);
  1586. minRange = range.pop();
  1587. maxRange = range.shift();
  1588. let height = spacingValid * (points[i].value - minRange) / (maxRange - minRange);
  1589. points[i].y = opts.height - Math.round(height) - opts.area[2];
  1590. }
  1591. return points;
  1592. }
  1593. function contextRotate(context, opts) {
  1594. if (opts.rotateLock !== true) {
  1595. context.translate(opts.height, 0);
  1596. context.rotate(90 * Math.PI / 180);
  1597. } else if (opts._rotate_ !== true) {
  1598. context.translate(opts.height, 0);
  1599. context.rotate(90 * Math.PI / 180);
  1600. opts._rotate_ = true;
  1601. }
  1602. }
  1603. function drawPointShape(points, color, shape, context, opts) {
  1604. context.beginPath();
  1605. if (opts.dataPointShapeType == 'hollow') {
  1606. context.setStrokeStyle(color);
  1607. context.setFillStyle(opts.background);
  1608. context.setLineWidth(2 * opts.pixelRatio);
  1609. } else {
  1610. context.setStrokeStyle("#ffffff");
  1611. context.setFillStyle(color);
  1612. context.setLineWidth(1 * opts.pixelRatio);
  1613. }
  1614. if (shape === 'diamond') {
  1615. points.forEach(function(item, index) {
  1616. if (item !== null) {
  1617. context.moveTo(item.x, item.y - 4.5);
  1618. context.lineTo(item.x - 4.5, item.y);
  1619. context.lineTo(item.x, item.y + 4.5);
  1620. context.lineTo(item.x + 4.5, item.y);
  1621. context.lineTo(item.x, item.y - 4.5);
  1622. }
  1623. });
  1624. } else if (shape === 'circle') {
  1625. points.forEach(function(item, index) {
  1626. if (item !== null) {
  1627. context.moveTo(item.x + 2.5 * opts.pixelRatio, item.y);
  1628. context.arc(item.x, item.y, 3 * opts.pixelRatio, 0, 2 * Math.PI, false);
  1629. }
  1630. });
  1631. } else if (shape === 'rect') {
  1632. points.forEach(function(item, index) {
  1633. if (item !== null) {
  1634. context.moveTo(item.x - 3.5, item.y - 3.5);
  1635. context.rect(item.x - 3.5, item.y - 3.5, 7, 7);
  1636. }
  1637. });
  1638. } else if (shape === 'triangle') {
  1639. points.forEach(function(item, index) {
  1640. if (item !== null) {
  1641. context.moveTo(item.x, item.y - 4.5);
  1642. context.lineTo(item.x - 4.5, item.y + 4.5);
  1643. context.lineTo(item.x + 4.5, item.y + 4.5);
  1644. context.lineTo(item.x, item.y - 4.5);
  1645. }
  1646. });
  1647. }
  1648. context.closePath();
  1649. context.fill();
  1650. context.stroke();
  1651. }
  1652. function drawMyRingTitle(opts, config, context, center) {
  1653. var titlefontSize = opts.title.fontSize || config.titleFontSize;
  1654. var subtitlefontSize = opts.subtitle.fontSize || config.subtitleFontSize;
  1655. var unitFontSize = opts.title.unitFontSize || config.unitFontSize;
  1656. var title = opts.title.name || '0';
  1657. var subtitle = opts.subtitle.name || '';
  1658. var titleFontColor = opts.title.color || config.titleColor;
  1659. var subtitleFontColor = opts.subtitle.color || config.subtitleColor;
  1660. var titleHeight = title ? titlefontSize : 0;
  1661. var subtitleHeight = subtitle ? subtitlefontSize : 0;
  1662. var margin = 5;
  1663. //slam todo
  1664. var arcbarDate = opts.title.arcbarDate || config.arcbarDate;
  1665. // console.log("arcbarDate=",arcbarDate);
  1666. var molecularUnit = opts.title.molecularUnit || config.molecularUnit;
  1667. var denominatorUnit = opts.title.denominatorUnit || config.denominatorUnit;
  1668. if (subtitle) {
  1669. var textWidth = measureText(subtitle, subtitlefontSize);
  1670. var startX = center.x - textWidth / 2 + (opts.subtitle.offsetX || 0);
  1671. var startY = center.y + subtitlefontSize / 2 + (opts.subtitle.offsetY || 0);
  1672. if (title) {
  1673. startY += (titleHeight + margin) / 2;
  1674. }
  1675. context.beginPath();
  1676. context.setFontSize(subtitlefontSize);
  1677. context.setFillStyle(subtitleFontColor);
  1678. context.fillText(subtitle, startX, startY);
  1679. context.closePath();
  1680. context.stroke();
  1681. }
  1682. //为零时候显示零
  1683. if (title) {
  1684. var _textWidth = measureText(title, titlefontSize);
  1685. var _startX = center.x - _textWidth / 2 + (opts.title.offsetX || 0);
  1686. var _startY = center.y + titlefontSize / 2 + (opts.title.offsetY || 0);
  1687. if (subtitle) {
  1688. _startY -= (subtitleHeight + margin) / 2;
  1689. }
  1690. var _moleWidth = measureText(molecularUnit, titlefontSize * 0.39);
  1691. var _moleStartX = _startX + _textWidth;
  1692. var _denomiStartX = _moleStartX + _moleWidth;
  1693. // 日期的位置
  1694. var _textDateWidth = measureText(arcbarDate, unitFontSize);
  1695. var _dateStartX = center.x - _textDateWidth / 2 + 5;
  1696. var _dateY = 30;
  1697. context.beginPath();
  1698. context.setFontSize(titlefontSize);
  1699. context.setFillStyle(titleFontColor);
  1700. context.fillText(title, _startX, _startY - _dateY);
  1701. context.closePath();
  1702. context.stroke();
  1703. context.beginPath();
  1704. context.setFontSize(unitFontSize);
  1705. context.setFillStyle(titleFontColor);
  1706. // context.fillText(arcbarDate, _dateStartX, _startY-40);
  1707. //+"/"+denominatorUnit
  1708. context.fillText(molecularUnit + "/" + denominatorUnit, _moleStartX + 5, _startY - _dateY);
  1709. // context.fillText("/", _denomiStartX + 5, _startY - _dateY);
  1710. // context.fillText(denominatorUnit, _denomiStartX + 10, _startY - _dateY);
  1711. context.closePath();
  1712. context.stroke();
  1713. }
  1714. // console.log("molecularUnit", molecularUnit);
  1715. }
  1716. function drawRingTitle(opts, config, context, center) {
  1717. var titlefontSize = opts.title.fontSize || config.titleFontSize;
  1718. var subtitlefontSize = opts.subtitle.fontSize || config.subtitleFontSize;
  1719. var title = opts.title.name || '';
  1720. var subtitle = opts.subtitle.name || '';
  1721. var titleFontColor = opts.title.color || config.titleColor;
  1722. var subtitleFontColor = opts.subtitle.color || config.subtitleColor;
  1723. var titleHeight = title ? titlefontSize : 0;
  1724. var subtitleHeight = subtitle ? subtitlefontSize : 0;
  1725. var margin = 5;
  1726. if (subtitle) {
  1727. var textWidth = measureText(subtitle, subtitlefontSize);
  1728. var startX = center.x - textWidth / 2 + (opts.subtitle.offsetX || 0);
  1729. var startY = center.y + subtitlefontSize / 2 + (opts.subtitle.offsetY || 0);
  1730. if (title) {
  1731. startY += (titleHeight + margin) / 2;
  1732. }
  1733. context.beginPath();
  1734. context.setFontSize(subtitlefontSize);
  1735. context.setFillStyle(subtitleFontColor);
  1736. context.fillText(subtitle, startX, startY);
  1737. context.closePath();
  1738. context.stroke();
  1739. }
  1740. if (title) {
  1741. var _textWidth = measureText(title, titlefontSize);
  1742. var _startX = center.x - _textWidth / 2 + (opts.title.offsetX || 0);
  1743. var _startY = center.y + titlefontSize / 2 + (opts.title.offsetY || 0);
  1744. if (subtitle) {
  1745. _startY -= (subtitleHeight + margin) / 2;
  1746. }
  1747. context.beginPath();
  1748. context.setFontSize(titlefontSize);
  1749. context.setFillStyle(titleFontColor);
  1750. context.fillText(title, _startX, _startY);
  1751. context.closePath();
  1752. context.stroke();
  1753. }
  1754. }
  1755. function drawPointText(points, series, config, context) {
  1756. // 绘制数据文案
  1757. var data = series.data;
  1758. points.forEach(function(item, index) {
  1759. if (item !== null) {
  1760. //var formatVal = series.format ? series.format(data[index]) : data[index];
  1761. context.beginPath();
  1762. context.setFontSize(series.textSize || config.fontSize);
  1763. context.setFillStyle(series.textColor || '#666666');
  1764. var value = data[index]
  1765. if (typeof data[index] === 'object' && data[index] !== null) {
  1766. if (data[index].constructor == Array) {
  1767. value = data[index][1];
  1768. } else {
  1769. value = data[index].value
  1770. }
  1771. }
  1772. var formatVal = series.format ? series.format(value) : value;
  1773. context.fillText(String(formatVal), item.x - measureText(formatVal, series.textSize || config
  1774. .fontSize) / 2, item.y -
  1775. 4);
  1776. context.closePath();
  1777. context.stroke();
  1778. }
  1779. });
  1780. }
  1781. function drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context) {
  1782. radius -= gaugeOption.width / 2 + config.gaugeLabelTextMargin;
  1783. let totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
  1784. let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
  1785. let totalNumber = gaugeOption.endNumber - gaugeOption.startNumber;
  1786. let splitNumber = totalNumber / gaugeOption.splitLine.splitNumber;
  1787. let nowAngle = gaugeOption.startAngle;
  1788. let nowNumber = gaugeOption.startNumber;
  1789. for (let i = 0; i < gaugeOption.splitLine.splitNumber + 1; i++) {
  1790. var pos = {
  1791. x: radius * Math.cos(nowAngle * Math.PI),
  1792. y: radius * Math.sin(nowAngle * Math.PI)
  1793. };
  1794. var labelText = gaugeOption.labelFormat ? gaugeOption.labelFormat(nowNumber) : nowNumber;
  1795. pos.x += centerPosition.x - measureText(labelText) / 2;
  1796. pos.y += centerPosition.y;
  1797. var startX = pos.x;
  1798. var startY = pos.y;
  1799. context.beginPath();
  1800. context.setFontSize(config.fontSize);
  1801. context.setFillStyle(gaugeOption.labelColor || '#666666');
  1802. context.fillText(labelText, startX, startY + config.fontSize / 2);
  1803. context.closePath();
  1804. context.stroke();
  1805. nowAngle += splitAngle;
  1806. if (nowAngle >= 2) {
  1807. nowAngle = nowAngle % 2;
  1808. }
  1809. nowNumber += splitNumber;
  1810. }
  1811. }
  1812. function drawRadarLabel(angleList, radius, centerPosition, opts, config, context) {
  1813. var radarOption = opts.extra.radar || {};
  1814. radius += config.radarLabelTextMargin;
  1815. angleList.forEach(function(angle, index) {
  1816. var pos = {
  1817. x: radius * Math.cos(angle),
  1818. y: radius * Math.sin(angle)
  1819. };
  1820. var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition);
  1821. var startX = posRelativeCanvas.x;
  1822. var startY = posRelativeCanvas.y;
  1823. if (util.approximatelyEqual(pos.x, 0)) {
  1824. startX -= measureText(opts.categories[index] || '') / 2;
  1825. } else if (pos.x < 0) {
  1826. startX -= measureText(opts.categories[index] || '');
  1827. }
  1828. context.beginPath();
  1829. context.setFontSize(config.fontSize);
  1830. context.setFillStyle(radarOption.labelColor || '#666666');
  1831. context.fillText(opts.categories[index] || '', startX, startY + config.fontSize / 2);
  1832. context.closePath();
  1833. context.stroke();
  1834. });
  1835. }
  1836. function drawPieText(series, opts, config, context, radius, center) {
  1837. var lineRadius = config.pieChartLinePadding;
  1838. var textObjectCollection = [];
  1839. var lastTextObject = null;
  1840. var seriesConvert = series.map(function(item) {
  1841. var text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_
  1842. .toFixed(4) *
  1843. 100) + '%';
  1844. if (item._rose_proportion_) item._proportion_ = item._rose_proportion_;
  1845. var arc = 2 * Math.PI - (item._start_ + 2 * Math.PI * item._proportion_ / 2);
  1846. var color = item.color;
  1847. var radius = item._radius_;
  1848. return {
  1849. arc: arc,
  1850. text: text,
  1851. color: color,
  1852. radius: radius,
  1853. textColor: item.textColor,
  1854. textSize: item.textSize,
  1855. };
  1856. });
  1857. for (let i = 0; i < seriesConvert.length; i++) {
  1858. let item = seriesConvert[i];
  1859. // line end
  1860. let orginX1 = Math.cos(item.arc) * (item.radius + lineRadius);
  1861. let orginY1 = Math.sin(item.arc) * (item.radius + lineRadius);
  1862. // line start
  1863. let orginX2 = Math.cos(item.arc) * item.radius;
  1864. let orginY2 = Math.sin(item.arc) * item.radius;
  1865. // text start
  1866. let orginX3 = orginX1 >= 0 ? orginX1 + config.pieChartTextPadding : orginX1 - config.pieChartTextPadding;
  1867. let orginY3 = orginY1;
  1868. let textWidth = measureText(item.text, item.textSize || config.fontSize);
  1869. let startY = orginY3;
  1870. if (lastTextObject && util.isSameXCoordinateArea(lastTextObject.start, {
  1871. x: orginX3
  1872. })) {
  1873. if (orginX3 > 0) {
  1874. startY = Math.min(orginY3, lastTextObject.start.y);
  1875. } else if (orginX1 < 0) {
  1876. startY = Math.max(orginY3, lastTextObject.start.y);
  1877. } else {
  1878. if (orginY3 > 0) {
  1879. startY = Math.max(orginY3, lastTextObject.start.y);
  1880. } else {
  1881. startY = Math.min(orginY3, lastTextObject.start.y);
  1882. }
  1883. }
  1884. }
  1885. if (orginX3 < 0) {
  1886. orginX3 -= textWidth;
  1887. }
  1888. let textObject = {
  1889. lineStart: {
  1890. x: orginX2,
  1891. y: orginY2
  1892. },
  1893. lineEnd: {
  1894. x: orginX1,
  1895. y: orginY1
  1896. },
  1897. start: {
  1898. x: orginX3,
  1899. y: startY
  1900. },
  1901. width: textWidth,
  1902. height: config.fontSize,
  1903. text: item.text,
  1904. color: item.color,
  1905. textColor: item.textColor,
  1906. textSize: item.textSize
  1907. };
  1908. lastTextObject = avoidCollision(textObject, lastTextObject);
  1909. textObjectCollection.push(lastTextObject);
  1910. }
  1911. for (let i = 0; i < textObjectCollection.length; i++) {
  1912. let item = textObjectCollection[i];
  1913. let lineStartPoistion = convertCoordinateOrigin(item.lineStart.x, item.lineStart.y, center);
  1914. let lineEndPoistion = convertCoordinateOrigin(item.lineEnd.x, item.lineEnd.y, center);
  1915. let textPosition = convertCoordinateOrigin(item.start.x, item.start.y, center);
  1916. context.setLineWidth(1 * opts.pixelRatio);
  1917. context.setFontSize(config.fontSize);
  1918. context.beginPath();
  1919. context.setStrokeStyle(item.color);
  1920. context.setFillStyle(item.color);
  1921. context.moveTo(lineStartPoistion.x, lineStartPoistion.y);
  1922. let curveStartX = item.start.x < 0 ? textPosition.x + item.width : textPosition.x;
  1923. let textStartX = item.start.x < 0 ? textPosition.x - 5 : textPosition.x + 5;
  1924. context.quadraticCurveTo(lineEndPoistion.x, lineEndPoistion.y, curveStartX, textPosition.y);
  1925. context.moveTo(lineStartPoistion.x, lineStartPoistion.y);
  1926. context.stroke();
  1927. context.closePath();
  1928. context.beginPath();
  1929. context.moveTo(textPosition.x + item.width, textPosition.y);
  1930. context.arc(curveStartX, textPosition.y, 2, 0, 2 * Math.PI);
  1931. context.closePath();
  1932. context.fill();
  1933. context.beginPath();
  1934. context.setFontSize(item.textSize || config.fontSize);
  1935. context.setFillStyle(item.textColor || '#666666');
  1936. context.fillText(item.text, textStartX, textPosition.y + 3);
  1937. context.closePath();
  1938. context.stroke();
  1939. context.closePath();
  1940. }
  1941. }
  1942. function drawToolTipSplitLine(offsetX, opts, config, context) {
  1943. var toolTipOption = opts.extra.tooltip || {};
  1944. toolTipOption.gridType = toolTipOption.gridType == undefined ? 'solid' : toolTipOption.gridType;
  1945. toolTipOption.dashLength = toolTipOption.dashLength == undefined ? 4 : toolTipOption.dashLength;
  1946. var startY = opts.area[0];
  1947. var endY = opts.height - opts.area[2];
  1948. if (toolTipOption.gridType == 'dash') {
  1949. context.setLineDash([toolTipOption.dashLength, toolTipOption.dashLength]);
  1950. }
  1951. context.setStrokeStyle(toolTipOption.gridColor || '#cccccc');
  1952. context.setLineWidth(1 * opts.pixelRatio);
  1953. context.beginPath();
  1954. context.moveTo(offsetX, startY);
  1955. context.lineTo(offsetX, endY);
  1956. context.stroke();
  1957. context.setLineDash([]);
  1958. if (toolTipOption.xAxisLabel) {
  1959. let labelText = opts.categories[opts.tooltip.index];
  1960. context.setFontSize(config.fontSize);
  1961. let textWidth = measureText(labelText, config.fontSize);
  1962. let textX = offsetX - 0.5 * textWidth;
  1963. let textY = endY;
  1964. context.beginPath();
  1965. context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption
  1966. .labelBgOpacity ||
  1967. config.toolTipOpacity));
  1968. context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
  1969. context.setLineWidth(1 * opts.pixelRatio);
  1970. context.rect(textX - config.toolTipPadding, textY, textWidth + 2 * config.toolTipPadding, config.fontSize + 2 *
  1971. config.toolTipPadding);
  1972. context.closePath();
  1973. context.stroke();
  1974. context.fill();
  1975. context.beginPath();
  1976. context.setFontSize(config.fontSize);
  1977. context.setFillStyle(toolTipOption.labelFontColor || config.fontColor);
  1978. context.fillText(String(labelText), textX, textY + config.toolTipPadding + config.fontSize);
  1979. context.closePath();
  1980. context.stroke();
  1981. }
  1982. }
  1983. function drawMarkLine(opts, config, context) {
  1984. let markLineOption = assign({}, {
  1985. type: 'solid',
  1986. dashLength: 4,
  1987. data: []
  1988. }, opts.extra.markLine);
  1989. let startX = opts.area[3];
  1990. let endX = opts.width - opts.area[1];
  1991. let points = calMarkLineData(markLineOption.data, opts);
  1992. for (let i = 0; i < points.length; i++) {
  1993. let item = assign({}, {
  1994. lineColor: '#DE4A42',
  1995. showLabel: false,
  1996. labelFontColor: '#666666',
  1997. labelBgColor: '#DFE8FF',
  1998. labelBgOpacity: 0.8,
  1999. yAxisIndex: 0
  2000. }, points[i]);
  2001. if (markLineOption.type == 'dash') {
  2002. context.setLineDash([markLineOption.dashLength, markLineOption.dashLength]);
  2003. }
  2004. context.setStrokeStyle(item.lineColor);
  2005. context.setLineWidth(1 * opts.pixelRatio);
  2006. context.beginPath();
  2007. context.moveTo(startX, item.y);
  2008. context.lineTo(endX, item.y);
  2009. context.stroke();
  2010. context.setLineDash([]);
  2011. if (item.showLabel) {
  2012. let labelText = opts.yAxis.format ? opts.yAxis.format(Number(item.value)) : item.value;
  2013. context.setFontSize(config.fontSize);
  2014. let textWidth = measureText(labelText, config.fontSize);
  2015. let bgStartX = opts.padding[3] + config.yAxisTitleWidth - config.toolTipPadding;
  2016. let bgEndX = Math.max(opts.area[3], textWidth + config.toolTipPadding * 2);
  2017. let bgWidth = bgEndX - bgStartX;
  2018. let textX = bgStartX + (bgWidth - textWidth) / 2;
  2019. let textY = item.y;
  2020. context.setFillStyle(hexToRgb(item.labelBgColor, item.labelBgOpacity));
  2021. context.setStrokeStyle(item.labelBgColor);
  2022. context.setLineWidth(1 * opts.pixelRatio);
  2023. context.beginPath();
  2024. context.rect(bgStartX, textY - 0.5 * config.fontSize - config.toolTipPadding, bgWidth, config.fontSize + 2 *
  2025. config.toolTipPadding);
  2026. context.closePath();
  2027. context.stroke();
  2028. context.fill();
  2029. context.beginPath();
  2030. context.setFontSize(config.fontSize);
  2031. context.setFillStyle(item.labelFontColor);
  2032. context.fillText(String(labelText), textX, textY + 0.5 * config.fontSize);
  2033. context.stroke();
  2034. }
  2035. }
  2036. }
  2037. function drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints) {
  2038. var toolTipOption = assign({}, {
  2039. gridType: 'solid',
  2040. dashLength: 4
  2041. }, opts.extra.tooltip);
  2042. var startX = opts.area[3];
  2043. var endX = opts.width - opts.area[1];
  2044. if (toolTipOption.gridType == 'dash') {
  2045. context.setLineDash([toolTipOption.dashLength, toolTipOption.dashLength]);
  2046. }
  2047. context.setStrokeStyle(toolTipOption.gridColor || '#cccccc');
  2048. context.setLineWidth(1 * opts.pixelRatio);
  2049. context.beginPath();
  2050. context.moveTo(startX, opts.tooltip.offset.y);
  2051. context.lineTo(endX, opts.tooltip.offset.y);
  2052. context.stroke();
  2053. context.setLineDash([]);
  2054. if (toolTipOption.yAxisLabel) {
  2055. let labelText = calTooltipYAxisData(opts.tooltip.offset.y, opts.series, opts, config, eachSpacing);
  2056. let widthArr = opts.chartData.yAxisData.yAxisWidth;
  2057. let tStartLeft = opts.area[3];
  2058. let tStartRight = opts.width - opts.area[1];
  2059. for (let i = 0; i < labelText.length; i++) {
  2060. context.setFontSize(config.fontSize);
  2061. let textWidth = measureText(labelText[i], config.fontSize);
  2062. let bgStartX, bgEndX, bgWidth;
  2063. if (widthArr[i].position == 'left') {
  2064. bgStartX = tStartLeft - widthArr[i].width;
  2065. bgEndX = Math.max(bgStartX, bgStartX + textWidth + config.toolTipPadding * 2);
  2066. } else {
  2067. bgStartX = tStartRight;
  2068. bgEndX = Math.max(bgStartX + widthArr[i].width, bgStartX + textWidth + config.toolTipPadding * 2);
  2069. }
  2070. bgWidth = bgEndX - bgStartX;
  2071. let textX = bgStartX + (bgWidth - textWidth) / 2;
  2072. let textY = opts.tooltip.offset.y;
  2073. context.beginPath();
  2074. context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption
  2075. .labelBgOpacity ||
  2076. config.toolTipOpacity));
  2077. context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
  2078. context.setLineWidth(1 * opts.pixelRatio);
  2079. context.rect(bgStartX, textY - 0.5 * config.fontSize - config.toolTipPadding, bgWidth, config.fontSize + 2 *
  2080. config.toolTipPadding);
  2081. context.closePath();
  2082. context.stroke();
  2083. context.fill();
  2084. context.beginPath();
  2085. context.setFontSize(config.fontSize);
  2086. context.setFillStyle(toolTipOption.labelFontColor || config.fontColor);
  2087. context.fillText(labelText[i], textX, textY + 0.5 * config.fontSize);
  2088. context.closePath();
  2089. context.stroke();
  2090. if (widthArr[i].position == 'left') {
  2091. tStartLeft -= (widthArr[i].width + opts.yAxis.padding);
  2092. } else {
  2093. tStartRight += widthArr[i].width + opts.yAxis.padding;
  2094. }
  2095. }
  2096. }
  2097. }
  2098. function drawToolTipSplitArea(offsetX, opts, config, context, eachSpacing) {
  2099. var toolTipOption = assign({}, {
  2100. activeBgColor: '#000000',
  2101. activeBgOpacity: 0.08
  2102. }, opts.extra.tooltip);
  2103. var startY = opts.area[0];
  2104. var endY = opts.height - opts.area[2];
  2105. context.beginPath();
  2106. context.setFillStyle(hexToRgb(toolTipOption.activeBgColor, toolTipOption.activeBgOpacity));
  2107. context.rect(offsetX - eachSpacing / 2, startY, eachSpacing, endY - startY);
  2108. context.closePath();
  2109. context.fill();
  2110. }
  2111. function drawToolTip(textList, offset, opts, config, context, eachSpacing, xAxisPoints) {
  2112. var toolTipOption = assign({}, {
  2113. showBox: true,
  2114. bgColor: '#000000',
  2115. bgOpacity: 0.7,
  2116. fontColor: '#FFFFFF'
  2117. }, opts.extra.tooltip);
  2118. var legendWidth = 4 * opts.pixelRatio;
  2119. var legendMarginRight = 5 * opts.pixelRatio;
  2120. var arrowWidth = 8 * opts.pixelRatio;
  2121. var isOverRightBorder = false;
  2122. if (opts.type == 'line' || opts.type == 'area' || opts.type == 'candle' || opts.type == 'mix') {
  2123. drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context);
  2124. }
  2125. offset = assign({
  2126. x: 0,
  2127. y: 0
  2128. }, offset);
  2129. offset.y -= 8 * opts.pixelRatio;
  2130. var textWidth = textList.map(function(item) {
  2131. return measureText(item.text, config.fontSize);
  2132. });
  2133. var toolTipWidth = legendWidth + legendMarginRight + 4 * config.toolTipPadding + Math.max.apply(null, textWidth);
  2134. var toolTipHeight = 2 * config.toolTipPadding + textList.length * config.toolTipLineHeight;
  2135. if (toolTipOption.showBox == false) {
  2136. return
  2137. }
  2138. // if beyond the right border
  2139. if (offset.x - Math.abs(opts._scrollDistance_) + arrowWidth + toolTipWidth > opts.width) {
  2140. isOverRightBorder = true;
  2141. }
  2142. if (toolTipHeight + offset.y > opts.height) {
  2143. offset.y = opts.height - toolTipHeight;
  2144. }
  2145. // draw background rect
  2146. context.beginPath();
  2147. context.setFillStyle(hexToRgb(toolTipOption.bgColor || config.toolTipBackground, toolTipOption.bgOpacity || config
  2148. .toolTipOpacity));
  2149. if (isOverRightBorder) {
  2150. context.moveTo(offset.x, offset.y + 10 * opts.pixelRatio);
  2151. context.lineTo(offset.x - arrowWidth, offset.y + 10 * opts.pixelRatio - 5 * opts.pixelRatio);
  2152. context.lineTo(offset.x - arrowWidth, offset.y);
  2153. context.lineTo(offset.x - arrowWidth - Math.round(toolTipWidth), offset.y);
  2154. context.lineTo(offset.x - arrowWidth - Math.round(toolTipWidth), offset.y + toolTipHeight);
  2155. context.lineTo(offset.x - arrowWidth, offset.y + toolTipHeight);
  2156. context.lineTo(offset.x - arrowWidth, offset.y + 10 * opts.pixelRatio + 5 * opts.pixelRatio);
  2157. context.lineTo(offset.x, offset.y + 10 * opts.pixelRatio);
  2158. } else {
  2159. context.moveTo(offset.x, offset.y + 10 * opts.pixelRatio);
  2160. context.lineTo(offset.x + arrowWidth, offset.y + 10 * opts.pixelRatio - 5 * opts.pixelRatio);
  2161. context.lineTo(offset.x + arrowWidth, offset.y);
  2162. context.lineTo(offset.x + arrowWidth + Math.round(toolTipWidth), offset.y);
  2163. context.lineTo(offset.x + arrowWidth + Math.round(toolTipWidth), offset.y + toolTipHeight);
  2164. context.lineTo(offset.x + arrowWidth, offset.y + toolTipHeight);
  2165. context.lineTo(offset.x + arrowWidth, offset.y + 10 * opts.pixelRatio + 5 * opts.pixelRatio);
  2166. context.lineTo(offset.x, offset.y + 10 * opts.pixelRatio);
  2167. }
  2168. context.closePath();
  2169. context.fill();
  2170. // draw legend
  2171. textList.forEach(function(item, index) {
  2172. if (item.color !== null) {
  2173. context.beginPath();
  2174. context.setFillStyle(item.color);
  2175. var startX = offset.x + arrowWidth + 2 * config.toolTipPadding;
  2176. var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config
  2177. .toolTipLineHeight * index +
  2178. config.toolTipPadding + 1;
  2179. if (isOverRightBorder) {
  2180. startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding;
  2181. }
  2182. context.fillRect(startX, startY, legendWidth, config.fontSize);
  2183. context.closePath();
  2184. }
  2185. });
  2186. // draw text list
  2187. textList.forEach(function(item, index) {
  2188. var startX = offset.x + arrowWidth + 2 * config.toolTipPadding + legendWidth + legendMarginRight;
  2189. if (isOverRightBorder) {
  2190. startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding + +legendWidth +
  2191. legendMarginRight;
  2192. }
  2193. var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight *
  2194. index +
  2195. config.toolTipPadding;
  2196. context.beginPath();
  2197. context.setFontSize(config.fontSize);
  2198. context.setFillStyle(toolTipOption.fontColor);
  2199. context.fillText(item.text, startX, startY + config.fontSize);
  2200. context.closePath();
  2201. context.stroke();
  2202. });
  2203. }
  2204. function drawYAxisTitle(title, opts, config, context) {
  2205. var startX = config.xAxisHeight + (opts.height - config.xAxisHeight - measureText(title)) / 2;
  2206. context.save();
  2207. context.beginPath();
  2208. context.setFontSize(config.fontSize);
  2209. context.setFillStyle(opts.yAxis.titleFontColor || '#333333');
  2210. context.translate(0, opts.height);
  2211. context.rotate(-90 * Math.PI / 180);
  2212. context.fillText(title, startX, opts.padding[3] + 0.5 * config.fontSize);
  2213. context.closePath();
  2214. context.stroke();
  2215. context.restore();
  2216. }
  2217. function drawColumnDataPoints(series, opts, config, context) {
  2218. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  2219. let xAxisData = opts.chartData.xAxisData,
  2220. xAxisPoints = xAxisData.xAxisPoints,
  2221. eachSpacing = xAxisData.eachSpacing;
  2222. let columnOption = assign({}, {
  2223. type: 'group',
  2224. width: eachSpacing / 2,
  2225. meter: {
  2226. border: 4,
  2227. fillColor: '#FFFFFF'
  2228. }
  2229. }, opts.extra.column);
  2230. let calPoints = [];
  2231. context.save();
  2232. let leftNum = -2;
  2233. let rightNum = xAxisPoints.length + 2;
  2234. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  2235. context.translate(opts._scrollDistance_, 0);
  2236. leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2;
  2237. rightNum = leftNum + opts.xAxis.itemCount + 4;
  2238. }
  2239. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  2240. drawToolTipSplitArea(opts.tooltip.offset.x, opts, config, context, eachSpacing);
  2241. }
  2242. series.forEach(function(eachSeries, seriesIndex) {
  2243. let ranges, minRange, maxRange;
  2244. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2245. minRange = ranges.pop();
  2246. maxRange = ranges.shift();
  2247. var data = eachSeries.data;
  2248. switch (columnOption.type) {
  2249. case 'group':
  2250. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,
  2251. process);
  2252. var tooltipPoints = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts,
  2253. config,
  2254. seriesIndex, series, process);
  2255. calPoints.push(tooltipPoints);
  2256. points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
  2257. for (let i = 0; i < points.length; i++) {
  2258. let item = points[i];
  2259. if (item !== null && i > leftNum && i < rightNum) {
  2260. context.beginPath();
  2261. context.setStrokeStyle(item.color || eachSeries.color);
  2262. context.setLineWidth(1)
  2263. context.setFillStyle(item.color || eachSeries.color);
  2264. var startX = item.x - item.width / 2;
  2265. var height = opts.height - item.y - opts.area[2];
  2266. context.moveTo(startX - 1, item.y);
  2267. context.lineTo(startX + item.width - 2, item.y);
  2268. context.lineTo(startX + item.width - 2, opts.height - opts.area[2]);
  2269. context.lineTo(startX, opts.height - opts.area[2]);
  2270. context.lineTo(startX, item.y);
  2271. context.closePath();
  2272. context.stroke();
  2273. context.fill();
  2274. }
  2275. };
  2276. break;
  2277. case 'stack':
  2278. // 绘制堆叠数据图
  2279. var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts,
  2280. config, seriesIndex,
  2281. series, process);
  2282. calPoints.push(points);
  2283. points = fixColumeStackData(points, eachSpacing, series.length, seriesIndex, config, opts,
  2284. series);
  2285. for (let i = 0; i < points.length; i++) {
  2286. let item = points[i];
  2287. if (item !== null && i > leftNum && i < rightNum) {
  2288. context.beginPath();
  2289. context.setFillStyle(item.color || eachSeries.color);
  2290. var startX = item.x - item.width / 2 + 1;
  2291. var height = opts.height - item.y - opts.area[2];
  2292. var height0 = opts.height - item.y0 - opts.area[2];
  2293. if (seriesIndex > 0) {
  2294. height -= height0;
  2295. }
  2296. context.moveTo(startX, item.y);
  2297. context.fillRect(startX, item.y, item.width - 2, height);
  2298. context.closePath();
  2299. context.fill();
  2300. }
  2301. };
  2302. break;
  2303. case 'meter':
  2304. // 绘制温度计数据图
  2305. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,
  2306. process);
  2307. calPoints.push(points);
  2308. points = fixColumeMeterData(points, eachSpacing, series.length, seriesIndex, config, opts,
  2309. columnOption.meter.border);
  2310. if (seriesIndex == 0) {
  2311. for (let i = 0; i < points.length; i++) {
  2312. let item = points[i];
  2313. if (item !== null && i > leftNum && i < rightNum) {
  2314. //画背景颜色
  2315. context.beginPath();
  2316. context.setFillStyle(columnOption.meter.fillColor);
  2317. var startX = item.x - item.width / 2;
  2318. var height = opts.height - item.y - opts.area[2];
  2319. context.moveTo(startX, item.y);
  2320. context.fillRect(startX, item.y, item.width, height);
  2321. context.closePath();
  2322. context.fill();
  2323. //画边框线
  2324. if (columnOption.meter.border > 0) {
  2325. context.beginPath();
  2326. context.setStrokeStyle(eachSeries.color);
  2327. context.setLineWidth(columnOption.meter.border * opts.pixelRatio);
  2328. context.moveTo(startX + columnOption.meter.border * 0.5, item.y + height);
  2329. context.lineTo(startX + columnOption.meter.border * 0.5, item.y + columnOption
  2330. .meter.border * 0.5);
  2331. context.lineTo(startX + item.width - columnOption.meter.border * 0.5, item.y +
  2332. columnOption.meter.border *
  2333. 0.5);
  2334. context.lineTo(startX + item.width - columnOption.meter.border * 0.5, item.y +
  2335. height);
  2336. context.stroke();
  2337. }
  2338. }
  2339. };
  2340. } else {
  2341. for (let i = 0; i < points.length; i++) {
  2342. let item = points[i];
  2343. if (item !== null && i > leftNum && i < rightNum) {
  2344. context.beginPath();
  2345. context.setFillStyle(item.color || eachSeries.color);
  2346. var startX = item.x - item.width / 2;
  2347. var height = opts.height - item.y - opts.area[2];
  2348. context.moveTo(startX, item.y);
  2349. context.fillRect(startX, item.y, item.width, height);
  2350. context.closePath();
  2351. context.fill();
  2352. }
  2353. };
  2354. }
  2355. break;
  2356. }
  2357. });
  2358. if (opts.dataLabel !== false && process === 1) {
  2359. series.forEach(function(eachSeries, seriesIndex) {
  2360. let ranges, minRange, maxRange;
  2361. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2362. minRange = ranges.pop();
  2363. maxRange = ranges.shift();
  2364. var data = eachSeries.data;
  2365. switch (columnOption.type) {
  2366. case 'group':
  2367. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,
  2368. process);
  2369. points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
  2370. drawPointText(points, eachSeries, config, context);
  2371. break;
  2372. case 'stack':
  2373. var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts,
  2374. config, seriesIndex,
  2375. series, process);
  2376. drawPointText(points, eachSeries, config, context);
  2377. break;
  2378. case 'meter':
  2379. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,
  2380. process);
  2381. drawPointText(points, eachSeries, config, context);
  2382. break;
  2383. }
  2384. });
  2385. }
  2386. context.restore();
  2387. return {
  2388. xAxisPoints: xAxisPoints,
  2389. calPoints: calPoints,
  2390. eachSpacing: eachSpacing
  2391. };
  2392. }
  2393. function drawCandleDataPoints(series, seriesMA, opts, config, context) {
  2394. var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
  2395. var candleOption = assign({}, {
  2396. color: {},
  2397. average: {}
  2398. }, opts.extra.candle);
  2399. candleOption.color = assign({}, {
  2400. upLine: '#f04864',
  2401. upFill: '#f04864',
  2402. downLine: '#2fc25b',
  2403. downFill: '#2fc25b'
  2404. }, candleOption.color);
  2405. candleOption.average = assign({}, {
  2406. show: false,
  2407. name: [],
  2408. day: [],
  2409. color: config.colors
  2410. }, candleOption.average);
  2411. opts.extra.candle = candleOption;
  2412. let xAxisData = opts.chartData.xAxisData,
  2413. xAxisPoints = xAxisData.xAxisPoints,
  2414. eachSpacing = xAxisData.eachSpacing;
  2415. let calPoints = [];
  2416. context.save();
  2417. let leftNum = -2;
  2418. let rightNum = xAxisPoints.length + 2;
  2419. let leftSpace = 0;
  2420. let rightSpace = opts.width + eachSpacing;
  2421. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  2422. context.translate(opts._scrollDistance_, 0);
  2423. leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2;
  2424. rightNum = leftNum + opts.xAxis.itemCount + 4;
  2425. leftSpace = -opts._scrollDistance_ - eachSpacing + opts.area[3];
  2426. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  2427. }
  2428. //画均线
  2429. if (candleOption.average.show) {
  2430. seriesMA.forEach(function(eachSeries, seriesIndex) {
  2431. let ranges, minRange, maxRange;
  2432. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2433. minRange = ranges.pop();
  2434. maxRange = ranges.shift();
  2435. var data = eachSeries.data;
  2436. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,
  2437. process);
  2438. var splitPointList = splitPoints(points);
  2439. for (let i = 0; i < splitPointList.length; i++) {
  2440. let points = splitPointList[i];
  2441. context.beginPath();
  2442. context.setStrokeStyle(eachSeries.color);
  2443. context.setLineWidth(1);
  2444. if (points.length === 1) {
  2445. context.moveTo(points[0].x, points[0].y);
  2446. context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  2447. } else {
  2448. context.moveTo(points[0].x, points[0].y);
  2449. let startPoint = 0;
  2450. for (let j = 0; j < points.length; j++) {
  2451. let item = points[j];
  2452. if (startPoint == 0 && item.x > leftSpace) {
  2453. context.moveTo(item.x, item.y);
  2454. startPoint = 1;
  2455. }
  2456. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2457. var ctrlPoint = createCurveControlPoints(points, j - 1);
  2458. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x,
  2459. ctrlPoint.ctrB.y, item.x, item.y);
  2460. }
  2461. }
  2462. context.moveTo(points[0].x, points[0].y);
  2463. }
  2464. context.closePath();
  2465. context.stroke();
  2466. }
  2467. });
  2468. }
  2469. //画K线
  2470. series.forEach(function(eachSeries, seriesIndex) {
  2471. let ranges, minRange, maxRange;
  2472. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2473. minRange = ranges.pop();
  2474. maxRange = ranges.shift();
  2475. var data = eachSeries.data;
  2476. var points = getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,
  2477. process);
  2478. calPoints.push(points);
  2479. var splitPointList = splitPoints(points);
  2480. for (let i = 0; i < splitPointList[0].length; i++) {
  2481. if (i > leftNum && i < rightNum) {
  2482. let item = splitPointList[0][i];
  2483. context.beginPath();
  2484. //如果上涨
  2485. if (data[i][1] - data[i][0] > 0) {
  2486. context.setStrokeStyle(candleOption.color.upLine);
  2487. context.setFillStyle(candleOption.color.upFill);
  2488. context.setLineWidth(1 * opts.pixelRatio);
  2489. context.moveTo(item[3].x, item[3].y); //顶点
  2490. context.lineTo(item[1].x, item[1].y); //收盘中间点
  2491. context.lineTo(item[1].x - eachSpacing / 4, item[1].y); //收盘左侧点
  2492. context.lineTo(item[0].x - eachSpacing / 4, item[0].y); //开盘左侧点
  2493. context.lineTo(item[0].x, item[0].y); //开盘中间点
  2494. context.lineTo(item[2].x, item[2].y); //底点
  2495. context.lineTo(item[0].x, item[0].y); //开盘中间点
  2496. context.lineTo(item[0].x + eachSpacing / 4, item[0].y); //开盘右侧点
  2497. context.lineTo(item[1].x + eachSpacing / 4, item[1].y); //收盘右侧点
  2498. context.lineTo(item[1].x, item[1].y); //收盘中间点
  2499. context.moveTo(item[3].x, item[3].y); //顶点
  2500. } else {
  2501. context.setStrokeStyle(candleOption.color.downLine);
  2502. context.setFillStyle(candleOption.color.downFill);
  2503. context.setLineWidth(1 * opts.pixelRatio);
  2504. context.moveTo(item[3].x, item[3].y); //顶点
  2505. context.lineTo(item[0].x, item[0].y); //开盘中间点
  2506. context.lineTo(item[0].x - eachSpacing / 4, item[0].y); //开盘左侧点
  2507. context.lineTo(item[1].x - eachSpacing / 4, item[1].y); //收盘左侧点
  2508. context.lineTo(item[1].x, item[1].y); //收盘中间点
  2509. context.lineTo(item[2].x, item[2].y); //底点
  2510. context.lineTo(item[1].x, item[1].y); //收盘中间点
  2511. context.lineTo(item[1].x + eachSpacing / 4, item[1].y); //收盘右侧点
  2512. context.lineTo(item[0].x + eachSpacing / 4, item[0].y); //开盘右侧点
  2513. context.lineTo(item[0].x, item[0].y); //开盘中间点
  2514. context.moveTo(item[3].x, item[3].y); //顶点
  2515. }
  2516. context.closePath();
  2517. context.fill();
  2518. context.stroke();
  2519. }
  2520. }
  2521. });
  2522. context.restore();
  2523. return {
  2524. xAxisPoints: xAxisPoints,
  2525. calPoints: calPoints,
  2526. eachSpacing: eachSpacing
  2527. };
  2528. }
  2529. function drawAreaDataPoints(series, opts, config, context) {
  2530. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  2531. var areaOption = assign({}, {
  2532. type: 'straight',
  2533. opacity: 0.2,
  2534. addLine: false,
  2535. width: 2,
  2536. gradient: false
  2537. }, opts.extra.area);
  2538. let xAxisData = opts.chartData.xAxisData,
  2539. xAxisPoints = xAxisData.xAxisPoints,
  2540. eachSpacing = xAxisData.eachSpacing;
  2541. let endY = opts.height - opts.area[2];
  2542. let calPoints = [];
  2543. // endY -=20;
  2544. context.save();
  2545. let leftSpace = 0;
  2546. let rightSpace = opts.width + eachSpacing;
  2547. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  2548. context.translate(opts._scrollDistance_, 0);
  2549. leftSpace = -opts._scrollDistance_ - eachSpacing + opts.area[3];
  2550. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  2551. }
  2552. series.forEach(function(eachSeries, seriesIndex) {
  2553. let ranges, minRange, maxRange;
  2554. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2555. minRange = ranges.pop();
  2556. maxRange = ranges.shift();
  2557. let data = eachSeries.data;
  2558. let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  2559. calPoints.push(points);
  2560. let splitPointList = splitPoints(points);
  2561. for (let i = 0; i < splitPointList.length; i++) {
  2562. let points = splitPointList[i];
  2563. // 绘制区域数
  2564. context.beginPath();
  2565. context.setStrokeStyle(hexToRgb(eachSeries.color, areaOption.opacity));
  2566. if (areaOption.gradient) {
  2567. let gradient = context.createLinearGradient(0, opts.area[0], 0, opts.height - opts.area[2]);
  2568. gradient.addColorStop('0', hexToRgb(eachSeries.color, areaOption.opacity));
  2569. gradient.addColorStop('1.0', hexToRgb("#FFFFFF", 0.1));
  2570. context.setFillStyle(gradient);
  2571. } else {
  2572. context.setFillStyle(hexToRgb(eachSeries.color, areaOption.opacity));
  2573. }
  2574. context.setLineWidth(areaOption.width * opts.pixelRatio);
  2575. if (points.length > 1) {
  2576. let firstPoint = points[0];
  2577. let lastPoint = points[points.length - 1];
  2578. context.moveTo(firstPoint.x, firstPoint.y);
  2579. let startPoint = 0;
  2580. if (areaOption.type === 'curve') {
  2581. for (let j = 0; j < points.length; j++) {
  2582. let item = points[j];
  2583. if (startPoint == 0 && item.x > leftSpace) {
  2584. context.moveTo(item.x, item.y);
  2585. startPoint = 1;
  2586. }
  2587. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2588. let ctrlPoint = createCurveControlPoints(points, j - 1);
  2589. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x,
  2590. ctrlPoint.ctrB.y, item.x, item.y);
  2591. }
  2592. };
  2593. } else {
  2594. for (let j = 0; j < points.length; j++) {
  2595. let item = points[j];
  2596. if (startPoint == 0 && item.x > leftSpace) {
  2597. context.moveTo(item.x, item.y);
  2598. startPoint = 1;
  2599. }
  2600. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2601. context.lineTo(item.x, item.y);
  2602. }
  2603. };
  2604. }
  2605. context.lineTo(lastPoint.x, endY);
  2606. context.lineTo(firstPoint.x, endY);
  2607. context.lineTo(firstPoint.x, firstPoint.y);
  2608. } else {
  2609. let item = points[0];
  2610. context.moveTo(item.x - eachSpacing / 2, item.y);
  2611. context.lineTo(item.x + eachSpacing / 2, item.y);
  2612. context.lineTo(item.x + eachSpacing / 2, endY);
  2613. context.lineTo(item.x - eachSpacing / 2, endY);
  2614. context.moveTo(item.x - eachSpacing / 2, item.y);
  2615. //slam todo
  2616. //加个左右射线
  2617. context.lineWidth = 0.3;
  2618. context.beginPath();
  2619. context.moveTo(item.x, item.y)
  2620. context.lineTo(item.x + opts.width / 2 - 30, item.y);
  2621. context.stroke();
  2622. context.beginPath();
  2623. context.moveTo(item.x, item.y)
  2624. context.lineTo(item.x - opts.width / 2 + 30, item.y);
  2625. context.stroke();
  2626. }
  2627. context.closePath();
  2628. //slam todo 只有一个点时候,不渲染渐变颜色
  2629. if (points.length > 1) {
  2630. context.fill();
  2631. }
  2632. //画连线
  2633. if (areaOption.addLine) {
  2634. if (eachSeries.lineType == 'dash') {
  2635. let dashLength = eachSeries.dashLength ? eachSeries.dashLength : 8;
  2636. dashLength *= opts.pixelRatio;
  2637. context.setLineDash([dashLength, dashLength]);
  2638. }
  2639. context.beginPath();
  2640. context.setStrokeStyle(eachSeries.color);
  2641. context.setLineWidth(areaOption.width * opts.pixelRatio);
  2642. if (points.length === 1) {
  2643. context.moveTo(points[0].x, points[0].y);
  2644. context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  2645. } else {
  2646. context.moveTo(points[0].x, points[0].y);
  2647. let startPoint = 0;
  2648. if (areaOption.type === 'curve') {
  2649. for (let j = 0; j < points.length; j++) {
  2650. let item = points[j];
  2651. if (startPoint == 0 && item.x > leftSpace) {
  2652. context.moveTo(item.x, item.y);
  2653. startPoint = 1;
  2654. }
  2655. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2656. let ctrlPoint = createCurveControlPoints(points, j - 1);
  2657. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x,
  2658. ctrlPoint.ctrB.y, item.x, item.y);
  2659. }
  2660. };
  2661. } else {
  2662. for (let j = 0; j < points.length; j++) {
  2663. let item = points[j];
  2664. if (startPoint == 0 && item.x > leftSpace) {
  2665. context.moveTo(item.x, item.y);
  2666. startPoint = 1;
  2667. }
  2668. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2669. context.lineTo(item.x, item.y);
  2670. }
  2671. };
  2672. }
  2673. context.moveTo(points[0].x, points[0].y);
  2674. }
  2675. context.stroke();
  2676. context.setLineDash([]);
  2677. }
  2678. }
  2679. if (opts.enableBottomSolid || config.enableBottomSolid) {
  2680. // slam todo 绘制底部线条
  2681. //下边框
  2682. context.beginPath();
  2683. context.moveTo(10, endY);
  2684. context.lineTo(opts.width / 2 - 7, endY);
  2685. context.lineTo(opts.width / 2, endY - 14);
  2686. context.lineTo(opts.width / 2 + 7, endY);
  2687. context.lineTo(opts.width - 10, endY);
  2688. // context.closePath(); //闭合路径
  2689. context.lineWidth = 0.3; //线的边框为10像素
  2690. context.strokeStyle = 'grey';
  2691. context.stroke(); //绘制定义的图形
  2692. }
  2693. //画点
  2694. if (opts.dataPointShape !== false) {
  2695. drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
  2696. }
  2697. });
  2698. if (opts.dataLabel !== false && process === 1) {
  2699. series.forEach(function(eachSeries, seriesIndex) {
  2700. let ranges, minRange, maxRange;
  2701. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2702. minRange = ranges.pop();
  2703. maxRange = ranges.shift();
  2704. var data = eachSeries.data;
  2705. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,
  2706. process);
  2707. drawPointText(points, eachSeries, config, context);
  2708. });
  2709. }
  2710. context.restore();
  2711. return {
  2712. xAxisPoints: xAxisPoints,
  2713. calPoints: calPoints,
  2714. eachSpacing: eachSpacing
  2715. };
  2716. }
  2717. function drawLineDataPoints(series, opts, config, context) {
  2718. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  2719. var lineOption = assign({}, {
  2720. type: 'straight',
  2721. width: 2
  2722. }, opts.extra.line);
  2723. lineOption.width *= opts.pixelRatio;
  2724. let xAxisData = opts.chartData.xAxisData,
  2725. xAxisPoints = xAxisData.xAxisPoints,
  2726. eachSpacing = xAxisData.eachSpacing;
  2727. var calPoints = [];
  2728. context.save();
  2729. let leftSpace = 0;
  2730. let rightSpace = opts.width + eachSpacing;
  2731. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  2732. context.translate(opts._scrollDistance_, 0);
  2733. leftSpace = -opts._scrollDistance_ - eachSpacing + opts.area[3];
  2734. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  2735. }
  2736. series.forEach(function(eachSeries, seriesIndex) {
  2737. let ranges, minRange, maxRange;
  2738. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2739. minRange = ranges.pop();
  2740. maxRange = ranges.shift();
  2741. var data = eachSeries.data;
  2742. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  2743. calPoints.push(points);
  2744. var splitPointList = splitPoints(points);
  2745. if (eachSeries.lineType == 'dash') {
  2746. let dashLength = eachSeries.dashLength ? eachSeries.dashLength : 8;
  2747. dashLength *= opts.pixelRatio;
  2748. context.setLineDash([dashLength, dashLength]);
  2749. }
  2750. context.beginPath();
  2751. context.setStrokeStyle(eachSeries.color);
  2752. context.setLineWidth(lineOption.width);
  2753. splitPointList.forEach(function(points, index) {
  2754. if (points.length === 1) {
  2755. context.moveTo(points[0].x, points[0].y);
  2756. context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  2757. } else {
  2758. context.moveTo(points[0].x, points[0].y);
  2759. let startPoint = 0;
  2760. if (lineOption.type === 'curve') {
  2761. for (let j = 0; j < points.length; j++) {
  2762. let item = points[j];
  2763. if (startPoint == 0 && item.x > leftSpace) {
  2764. context.moveTo(item.x, item.y);
  2765. startPoint = 1;
  2766. }
  2767. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2768. var ctrlPoint = createCurveControlPoints(points, j - 1);
  2769. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x,
  2770. ctrlPoint.ctrB.y, item.x, item.y);
  2771. }
  2772. };
  2773. } else {
  2774. for (let j = 0; j < points.length; j++) {
  2775. let item = points[j];
  2776. if (startPoint == 0 && item.x > leftSpace) {
  2777. context.moveTo(item.x, item.y);
  2778. startPoint = 1;
  2779. }
  2780. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2781. context.lineTo(item.x, item.y);
  2782. }
  2783. };
  2784. }
  2785. context.moveTo(points[0].x, points[0].y);
  2786. }
  2787. });
  2788. context.stroke();
  2789. context.setLineDash([]);
  2790. if (opts.dataPointShape !== false) {
  2791. drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
  2792. }
  2793. });
  2794. if (opts.dataLabel !== false && process === 1) {
  2795. series.forEach(function(eachSeries, seriesIndex) {
  2796. let ranges, minRange, maxRange;
  2797. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2798. minRange = ranges.pop();
  2799. maxRange = ranges.shift();
  2800. var data = eachSeries.data;
  2801. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,
  2802. process);
  2803. drawPointText(points, eachSeries, config, context);
  2804. });
  2805. }
  2806. context.restore();
  2807. return {
  2808. xAxisPoints: xAxisPoints,
  2809. calPoints: calPoints,
  2810. eachSpacing: eachSpacing
  2811. };
  2812. }
  2813. function drawMixDataPoints(series, opts, config, context) {
  2814. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  2815. let xAxisData = opts.chartData.xAxisData,
  2816. xAxisPoints = xAxisData.xAxisPoints,
  2817. eachSpacing = xAxisData.eachSpacing;
  2818. let endY = opts.height - opts.area[2];
  2819. let calPoints = [];
  2820. var columnIndex = 0;
  2821. var columnLength = 0;
  2822. series.forEach(function(eachSeries, seriesIndex) {
  2823. if (eachSeries.type == 'column') {
  2824. columnLength += 1;
  2825. }
  2826. });
  2827. context.save();
  2828. let leftNum = -2;
  2829. let rightNum = xAxisPoints.length + 2;
  2830. let leftSpace = 0;
  2831. let rightSpace = opts.width + eachSpacing;
  2832. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  2833. context.translate(opts._scrollDistance_, 0);
  2834. leftNum = Math.floor(-opts._scrollDistance_ / eachSpacing) - 2;
  2835. rightNum = leftNum + opts.xAxis.itemCount + 4;
  2836. leftSpace = -opts._scrollDistance_ - eachSpacing + opts.area[3];
  2837. rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
  2838. }
  2839. series.forEach(function(eachSeries, seriesIndex) {
  2840. let ranges, minRange, maxRange;
  2841. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2842. minRange = ranges.pop();
  2843. maxRange = ranges.shift();
  2844. var data = eachSeries.data;
  2845. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  2846. calPoints.push(points);
  2847. // 绘制柱状数据图
  2848. if (eachSeries.type == 'column') {
  2849. points = fixColumeData(points, eachSpacing, columnLength, columnIndex, config, opts);
  2850. for (let i = 0; i < points.length; i++) {
  2851. let item = points[i];
  2852. if (item !== null && i > leftNum && i < rightNum) {
  2853. context.beginPath();
  2854. context.setStrokeStyle(item.color || eachSeries.color);
  2855. context.setLineWidth(1)
  2856. context.setFillStyle(item.color || eachSeries.color);
  2857. var startX = item.x - item.width / 2;
  2858. var height = opts.height - item.y - opts.area[2];
  2859. context.moveTo(startX, item.y);
  2860. context.moveTo(startX - 1, item.y);
  2861. context.lineTo(startX + item.width - 2, item.y);
  2862. context.lineTo(startX + item.width - 2, opts.height - opts.area[2]);
  2863. context.lineTo(startX, opts.height - opts.area[2]);
  2864. context.lineTo(startX, item.y);
  2865. context.closePath();
  2866. context.stroke();
  2867. context.fill();
  2868. context.closePath();
  2869. context.fill();
  2870. }
  2871. }
  2872. columnIndex += 1;
  2873. }
  2874. //绘制区域图数据
  2875. if (eachSeries.type == 'area') {
  2876. let splitPointList = splitPoints(points);
  2877. for (let i = 0; i < splitPointList.length; i++) {
  2878. let points = splitPointList[i];
  2879. // 绘制区域数据
  2880. context.beginPath();
  2881. context.setStrokeStyle(eachSeries.color);
  2882. context.setFillStyle(hexToRgb(eachSeries.color, 0.2));
  2883. context.setLineWidth(2 * opts.pixelRatio);
  2884. if (points.length > 1) {
  2885. var firstPoint = points[0];
  2886. let lastPoint = points[points.length - 1];
  2887. context.moveTo(firstPoint.x, firstPoint.y);
  2888. let startPoint = 0;
  2889. if (eachSeries.style === 'curve') {
  2890. for (let j = 0; j < points.length; j++) {
  2891. let item = points[j];
  2892. if (startPoint == 0 && item.x > leftSpace) {
  2893. context.moveTo(item.x, item.y);
  2894. startPoint = 1;
  2895. }
  2896. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2897. var ctrlPoint = createCurveControlPoints(points, j - 1);
  2898. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x,
  2899. ctrlPoint.ctrB.y, item.x, item.y);
  2900. }
  2901. };
  2902. } else {
  2903. for (let j = 0; j < points.length; j++) {
  2904. let item = points[j];
  2905. if (startPoint == 0 && item.x > leftSpace) {
  2906. context.moveTo(item.x, item.y);
  2907. startPoint = 1;
  2908. }
  2909. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2910. context.lineTo(item.x, item.y);
  2911. }
  2912. };
  2913. }
  2914. context.lineTo(lastPoint.x, endY);
  2915. context.lineTo(firstPoint.x, endY);
  2916. context.lineTo(firstPoint.x, firstPoint.y);
  2917. } else {
  2918. let item = points[0];
  2919. context.moveTo(item.x - eachSpacing / 2, item.y);
  2920. context.lineTo(item.x + eachSpacing / 2, item.y);
  2921. context.lineTo(item.x + eachSpacing / 2, endY);
  2922. context.lineTo(item.x - eachSpacing / 2, endY);
  2923. context.moveTo(item.x - eachSpacing / 2, item.y);
  2924. }
  2925. context.closePath();
  2926. context.fill();
  2927. }
  2928. }
  2929. // 绘制折线数据图
  2930. if (eachSeries.type == 'line') {
  2931. var splitPointList = splitPoints(points);
  2932. splitPointList.forEach(function(points, index) {
  2933. if (eachSeries.lineType == 'dash') {
  2934. let dashLength = eachSeries.dashLength ? eachSeries.dashLength : 8;
  2935. dashLength *= opts.pixelRatio;
  2936. context.setLineDash([dashLength, dashLength]);
  2937. }
  2938. context.beginPath();
  2939. context.setStrokeStyle(eachSeries.color);
  2940. context.setLineWidth(2 * opts.pixelRatio);
  2941. if (points.length === 1) {
  2942. context.moveTo(points[0].x, points[0].y);
  2943. context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  2944. } else {
  2945. context.moveTo(points[0].x, points[0].y);
  2946. let startPoint = 0;
  2947. if (eachSeries.style == 'curve') {
  2948. for (let j = 0; j < points.length; j++) {
  2949. let item = points[j];
  2950. if (startPoint == 0 && item.x > leftSpace) {
  2951. context.moveTo(item.x, item.y);
  2952. startPoint = 1;
  2953. }
  2954. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2955. var ctrlPoint = createCurveControlPoints(points, j - 1);
  2956. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB
  2957. .x, ctrlPoint.ctrB.y, item.x, item.y);
  2958. }
  2959. }
  2960. } else {
  2961. for (let j = 0; j < points.length; j++) {
  2962. let item = points[j];
  2963. if (startPoint == 0 && item.x > leftSpace) {
  2964. context.moveTo(item.x, item.y);
  2965. startPoint = 1;
  2966. }
  2967. if (j > 0 && item.x > leftSpace && item.x < rightSpace) {
  2968. context.lineTo(item.x, item.y);
  2969. }
  2970. }
  2971. }
  2972. context.moveTo(points[0].x, points[0].y);
  2973. }
  2974. context.stroke();
  2975. context.setLineDash([]);
  2976. });
  2977. }
  2978. // 绘制点数据图
  2979. if (eachSeries.type == 'point') {
  2980. eachSeries.addPoint = true;
  2981. }
  2982. if (eachSeries.addPoint == true && eachSeries.type !== 'column') {
  2983. drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
  2984. }
  2985. });
  2986. if (opts.dataLabel !== false && process === 1) {
  2987. var columnIndex = 0;
  2988. series.forEach(function(eachSeries, seriesIndex) {
  2989. let ranges, minRange, maxRange;
  2990. ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
  2991. minRange = ranges.pop();
  2992. maxRange = ranges.shift();
  2993. var data = eachSeries.data;
  2994. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,
  2995. process);
  2996. if (eachSeries.type !== 'column') {
  2997. drawPointText(points, eachSeries, config, context);
  2998. } else {
  2999. points = fixColumeData(points, eachSpacing, columnLength, columnIndex, config, opts);
  3000. drawPointText(points, eachSeries, config, context);
  3001. columnIndex += 1;
  3002. }
  3003. });
  3004. }
  3005. context.restore();
  3006. return {
  3007. xAxisPoints: xAxisPoints,
  3008. calPoints: calPoints,
  3009. eachSpacing: eachSpacing,
  3010. }
  3011. }
  3012. function drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints) {
  3013. var toolTipOption = opts.extra.tooltip || {};
  3014. if (toolTipOption.horizentalLine && opts.tooltip && process === 1 && (opts.type == 'line' || opts.type == 'area' ||
  3015. opts.type == 'column' || opts.type == 'candle' || opts.type == 'mix')) {
  3016. drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints)
  3017. }
  3018. context.save();
  3019. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  3020. context.translate(opts._scrollDistance_, 0);
  3021. }
  3022. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  3023. drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context, eachSpacing, xAxisPoints);
  3024. }
  3025. context.restore();
  3026. }
  3027. function drawXAxis(categories, opts, config, context) {
  3028. let xAxisData = opts.chartData.xAxisData,
  3029. xAxisPoints = xAxisData.xAxisPoints,
  3030. startX = xAxisData.startX,
  3031. endX = xAxisData.endX,
  3032. eachSpacing = xAxisData.eachSpacing;
  3033. var boundaryGap = 'center';
  3034. if (opts.type == 'line' || opts.type == 'area') {
  3035. boundaryGap = opts.xAxis.boundaryGap;
  3036. }
  3037. var startY = opts.height - opts.area[2];
  3038. var endY = opts.area[0];
  3039. // if(opts.type == 'area'){
  3040. // console.log("===",startY,endY);
  3041. // startY -=10 ;
  3042. // endY += 10 ;
  3043. // }
  3044. //绘制滚动条
  3045. if (opts.enableScroll && opts.xAxis.scrollShow) {
  3046. var scrollY = opts.height - opts.area[2] + config.xAxisHeight;
  3047. var scrollScreenWidth = endX - startX;
  3048. var scrollTotalWidth = eachSpacing * (xAxisPoints.length - 1);
  3049. var scrollWidth = scrollScreenWidth * scrollScreenWidth / scrollTotalWidth;
  3050. var scrollLeft = 0;
  3051. if (opts._scrollDistance_) {
  3052. scrollLeft = -opts._scrollDistance_ * (scrollScreenWidth) / scrollTotalWidth;
  3053. }
  3054. context.beginPath();
  3055. context.setLineCap('round');
  3056. context.setLineWidth(6 * opts.pixelRatio);
  3057. context.setStrokeStyle(opts.xAxis.scrollBackgroundColor || "#EFEBEF");
  3058. context.moveTo(startX, scrollY);
  3059. context.lineTo(endX, scrollY);
  3060. context.stroke();
  3061. context.closePath();
  3062. context.beginPath();
  3063. context.setLineCap('round');
  3064. context.setLineWidth(6 * opts.pixelRatio);
  3065. context.setStrokeStyle(opts.xAxis.scrollColor || "#A6A6A6");
  3066. context.moveTo(startX + scrollLeft, scrollY);
  3067. context.lineTo(startX + scrollLeft + scrollWidth, scrollY);
  3068. context.stroke();
  3069. context.closePath();
  3070. context.setLineCap('butt');
  3071. }
  3072. context.save();
  3073. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
  3074. context.translate(opts._scrollDistance_, 0);
  3075. }
  3076. //绘制X轴刻度线
  3077. if (opts.xAxis.calibration === true) {
  3078. context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc");
  3079. context.setLineCap('butt');
  3080. context.setLineWidth(1 * opts.pixelRatio);
  3081. xAxisPoints.forEach(function(item, index) {
  3082. if (index > 0) {
  3083. context.beginPath();
  3084. //eachSpacing/2
  3085. context.moveTo(item - eachSpacing / 2, startY);
  3086. //eachSpacing/2
  3087. context.lineTo(item - eachSpacing / 2, startY - 3 * opts.pixelRatio);
  3088. context.closePath();
  3089. context.stroke();
  3090. }
  3091. });
  3092. }
  3093. //绘制X轴网格
  3094. if (opts.xAxis.disableGrid !== true) {
  3095. context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc");
  3096. context.setLineCap('butt');
  3097. context.setLineWidth(1 * opts.pixelRatio);
  3098. if (opts.xAxis.gridType == 'dash') {
  3099. context.setLineDash([opts.xAxis.dashLength, opts.xAxis.dashLength]);
  3100. }
  3101. opts.xAxis.gridEval = opts.xAxis.gridEval || 1;
  3102. xAxisPoints.forEach(function(item, index) {
  3103. if (index % opts.xAxis.gridEval == 0) {
  3104. context.beginPath();
  3105. context.moveTo(item, startY);
  3106. context.lineTo(item, endY);
  3107. context.stroke();
  3108. }
  3109. });
  3110. context.setLineDash([]);
  3111. }
  3112. //绘制X轴文案
  3113. if (opts.xAxis.disabled !== true) {
  3114. // 对X轴列表做抽稀处理
  3115. //默认全部显示X轴标签
  3116. let maxXAxisListLength = categories.length;
  3117. //如果设置了X轴单屏数量
  3118. if (opts.xAxis.labelCount) {
  3119. //如果设置X轴密度
  3120. if (opts.xAxis.itemCount) {
  3121. maxXAxisListLength = Math.ceil(categories.length / opts.xAxis.itemCount * opts.xAxis.labelCount);
  3122. } else {
  3123. maxXAxisListLength = opts.xAxis.labelCount;
  3124. }
  3125. maxXAxisListLength -= 1;
  3126. }
  3127. let ratio = Math.ceil(categories.length / maxXAxisListLength);
  3128. let newCategories = [];
  3129. let cgLength = categories.length;
  3130. for (let i = 0; i < cgLength; i++) {
  3131. if (i % ratio !== 0) {
  3132. newCategories.push("");
  3133. } else {
  3134. newCategories.push(categories[i]);
  3135. }
  3136. }
  3137. newCategories[cgLength - 1] = categories[cgLength - 1];
  3138. var xAxisFontSize = opts.xAxis.fontSize || config.fontSize;
  3139. if (config._xAxisTextAngle_ === 0) {
  3140. newCategories.forEach(function(item, index) {
  3141. var offset = -measureText(String(item), xAxisFontSize) / 2;
  3142. if (boundaryGap == 'center') {
  3143. offset += eachSpacing / 2;
  3144. }
  3145. var scrollHeight = 0;
  3146. if (opts.xAxis.scrollShow) {
  3147. scrollHeight = 6 * opts.pixelRatio;
  3148. }
  3149. context.beginPath();
  3150. context.setFontSize(xAxisFontSize);
  3151. context.setFillStyle(opts.xAxis.fontColor || '#666666');
  3152. context.fillText(String(item), xAxisPoints[index] + offset, startY + xAxisFontSize + (config
  3153. .xAxisHeight -
  3154. scrollHeight - xAxisFontSize) / 2);
  3155. context.closePath();
  3156. context.stroke();
  3157. });
  3158. } else {
  3159. newCategories.forEach(function(item, index) {
  3160. context.save();
  3161. context.beginPath();
  3162. context.setFontSize(xAxisFontSize);
  3163. context.setFillStyle(opts.xAxis.fontColor || '#666666');
  3164. var textWidth = measureText(String(item), xAxisFontSize);
  3165. var offset = -textWidth;
  3166. if (boundaryGap == 'center') {
  3167. offset += eachSpacing / 2;
  3168. }
  3169. var _calRotateTranslate = calRotateTranslate(xAxisPoints[index] + eachSpacing / 2, startY +
  3170. xAxisFontSize / 2 + 5,
  3171. opts.height),
  3172. transX = _calRotateTranslate.transX,
  3173. transY = _calRotateTranslate.transY;
  3174. context.rotate(-1 * config._xAxisTextAngle_);
  3175. context.translate(transX, transY);
  3176. context.fillText(String(item), xAxisPoints[index] + offset, startY + xAxisFontSize + 5);
  3177. context.closePath();
  3178. context.stroke();
  3179. context.restore();
  3180. });
  3181. }
  3182. }
  3183. context.restore();
  3184. //绘制X轴轴线
  3185. if (opts.xAxis.axisLine) {
  3186. context.beginPath();
  3187. context.setStrokeStyle(opts.xAxis.axisLineColor);
  3188. context.setLineWidth(1 * opts.pixelRatio);
  3189. context.moveTo(startX, opts.height - opts.area[2]);
  3190. context.lineTo(endX, opts.height - opts.area[2]);
  3191. context.stroke();
  3192. }
  3193. }
  3194. function drawYAxisGrid(categories, opts, config, context) {
  3195. if (opts.yAxis.disableGrid === true) {
  3196. return;
  3197. }
  3198. let spacingValid = opts.height - opts.area[0] - opts.area[2];
  3199. let eachSpacing = spacingValid / opts.yAxis.splitNumber;
  3200. let startX = opts.area[3];
  3201. let xAxisPoints = opts.chartData.xAxisData.xAxisPoints,
  3202. xAxiseachSpacing = opts.chartData.xAxisData.eachSpacing;
  3203. let TotalWidth = xAxiseachSpacing * (xAxisPoints.length - 1);
  3204. let endX = startX + TotalWidth;
  3205. let points = [];
  3206. for (let i = 0; i < opts.yAxis.splitNumber + 1; i++) {
  3207. points.push(opts.height - opts.area[2] - eachSpacing * i);
  3208. }
  3209. context.save();
  3210. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
  3211. context.translate(opts._scrollDistance_, 0);
  3212. }
  3213. if (opts.yAxis.gridType == 'dash') {
  3214. context.setLineDash([opts.yAxis.dashLength, opts.yAxis.dashLength]);
  3215. }
  3216. context.setStrokeStyle(opts.yAxis.gridColor);
  3217. context.setLineWidth(1 * opts.pixelRatio);
  3218. points.forEach(function(item, index) {
  3219. context.beginPath();
  3220. context.moveTo(startX, item);
  3221. context.lineTo(endX, item);
  3222. context.stroke();
  3223. });
  3224. context.setLineDash([]);
  3225. context.restore();
  3226. }
  3227. function drawYAxis(series, opts, config, context) {
  3228. if (opts.yAxis.disabled === true) {
  3229. return;
  3230. }
  3231. var spacingValid = opts.height - opts.area[0] - opts.area[2];
  3232. var eachSpacing = spacingValid / opts.yAxis.splitNumber;
  3233. var startX = opts.area[3];
  3234. var endX = opts.width - opts.area[1];
  3235. var endY = opts.height - opts.area[2];
  3236. var fillEndY = endY + config.xAxisHeight;
  3237. if (opts.xAxis.scrollShow) {
  3238. fillEndY -= 3 * opts.pixelRatio;
  3239. }
  3240. if (opts.xAxis.rotateLabel) {
  3241. fillEndY = opts.height - opts.area[2] + 3;
  3242. }
  3243. // set YAxis background
  3244. context.beginPath();
  3245. context.setFillStyle(opts.background || '#ffffff');
  3246. if (opts._scrollDistance_ < 0) {
  3247. context.fillRect(0, 0, startX, fillEndY);
  3248. }
  3249. if (opts.enableScroll == true) {
  3250. context.fillRect(endX, 0, opts.width, fillEndY);
  3251. }
  3252. context.closePath();
  3253. context.stroke();
  3254. var points = [];
  3255. for (let i = 0; i <= opts.yAxis.splitNumber; i++) {
  3256. points.push(opts.area[0] + eachSpacing * i);
  3257. }
  3258. let tStartLeft = opts.area[3];
  3259. let tStartRight = opts.width - opts.area[1];
  3260. for (let i = 0; i < opts.yAxis.data.length; i++) {
  3261. let yData = opts.yAxis.data[i];
  3262. if (yData.disabled !== true) {
  3263. let rangesFormat = opts.chartData.yAxisData.rangesFormat[i];
  3264. let yAxisFontSize = yData.fontSize || config.fontSize;
  3265. let yAxisWidth = opts.chartData.yAxisData.yAxisWidth[i];
  3266. //画Y轴刻度及文案
  3267. rangesFormat.forEach(function(item, index) {
  3268. var pos = points[index] ? points[index] : endY;
  3269. context.beginPath();
  3270. context.setFontSize(yAxisFontSize);
  3271. context.setLineWidth(1 * opts.pixelRatio);
  3272. context.setStrokeStyle(yData.axisLineColor || '#cccccc');
  3273. context.setFillStyle(yData.fontColor || '#666666');
  3274. if (yAxisWidth.position == 'left') {
  3275. context.fillText(String(item), tStartLeft - yAxisWidth.width, pos + yAxisFontSize / 2);
  3276. //画刻度线
  3277. if (yData.calibration == true) {
  3278. context.moveTo(tStartLeft, pos);
  3279. context.lineTo(tStartLeft - 3 * opts.pixelRatio, pos);
  3280. }
  3281. } else {
  3282. context.fillText(String(item), tStartRight + 4 * opts.pixelRatio, pos + yAxisFontSize / 2);
  3283. //画刻度线
  3284. if (yData.calibration == true) {
  3285. context.moveTo(tStartRight, pos);
  3286. context.lineTo(tStartRight + 3 * opts.pixelRatio, pos);
  3287. }
  3288. }
  3289. context.closePath();
  3290. context.stroke();
  3291. });
  3292. //画Y轴轴线
  3293. if (yData.axisLine !== false && !opts.yAxis.disableLine) {
  3294. context.beginPath();
  3295. context.setStrokeStyle(yData.axisLineColor || '#cccccc');
  3296. context.setLineWidth(1 * opts.pixelRatio);
  3297. if (yAxisWidth.position == 'left') {
  3298. context.moveTo(tStartLeft, opts.height - opts.area[2]);
  3299. context.lineTo(tStartLeft, opts.area[0]);
  3300. } else {
  3301. context.moveTo(tStartRight, opts.height - opts.area[2]);
  3302. context.lineTo(tStartRight, opts.area[0]);
  3303. }
  3304. context.stroke();
  3305. }
  3306. //画Y轴标题
  3307. if (opts.yAxis.showTitle) {
  3308. let titleFontSize = yData.titleFontSize || config.fontSize;
  3309. let title = yData.title;
  3310. context.beginPath();
  3311. context.setFontSize(titleFontSize);
  3312. context.setFillStyle(yData.titleFontColor || '#666666');
  3313. if (yAxisWidth.position == 'left') {
  3314. context.fillText(title, tStartLeft - measureText(title, titleFontSize) / 2, opts.area[0] - 10 * opts
  3315. .pixelRatio);
  3316. } else {
  3317. context.fillText(title, tStartRight - measureText(title, titleFontSize) / 2, opts.area[0] - 10 *
  3318. opts.pixelRatio);
  3319. }
  3320. context.closePath();
  3321. context.stroke();
  3322. }
  3323. if (yAxisWidth.position == 'left') {
  3324. tStartLeft -= (yAxisWidth.width + opts.yAxis.padding);
  3325. } else {
  3326. tStartRight += yAxisWidth.width + opts.yAxis.padding;
  3327. }
  3328. }
  3329. }
  3330. }
  3331. function drawLegend(series, opts, config, context, chartData) {
  3332. if (opts.legend.show === false) {
  3333. return;
  3334. }
  3335. let legendData = chartData.legendData;
  3336. let legendList = legendData.points;
  3337. let legendArea = legendData.area;
  3338. let padding = opts.legend.padding;
  3339. let fontSize = opts.legend.fontSize;
  3340. let shapeWidth = 15 * opts.pixelRatio;
  3341. let shapeRight = 5 * opts.pixelRatio;
  3342. let itemGap = opts.legend.itemGap;
  3343. let lineHeight = Math.max(opts.legend.lineHeight * opts.pixelRatio, fontSize);
  3344. //画背景及边框
  3345. context.beginPath();
  3346. context.setLineWidth(opts.legend.borderWidth);
  3347. context.setStrokeStyle(opts.legend.borderColor);
  3348. context.setFillStyle(opts.legend.backgroundColor);
  3349. context.moveTo(legendArea.start.x, legendArea.start.y);
  3350. context.rect(legendArea.start.x, legendArea.start.y, legendArea.width, legendArea.height);
  3351. context.closePath();
  3352. context.fill();
  3353. context.stroke();
  3354. legendList.forEach(function(itemList, listIndex) {
  3355. let width = 0;
  3356. let height = 0;
  3357. width = legendData.widthArr[listIndex];
  3358. height = legendData.heightArr[listIndex];
  3359. let startX = 0;
  3360. let startY = 0;
  3361. if (opts.legend.position == 'top' || opts.legend.position == 'bottom') {
  3362. startX = legendArea.start.x + (legendArea.width - width) / 2;
  3363. startY = legendArea.start.y + padding + listIndex * lineHeight;
  3364. } else {
  3365. if (listIndex == 0) {
  3366. width = 0;
  3367. } else {
  3368. width = legendData.widthArr[listIndex - 1];
  3369. }
  3370. startX = legendArea.start.x + padding + width;
  3371. startY = legendArea.start.y + padding + (legendArea.height - height) / 2;
  3372. }
  3373. context.setFontSize(config.fontSize);
  3374. for (let i = 0; i < itemList.length; i++) {
  3375. let item = itemList[i];
  3376. item.area = [0, 0, 0, 0];
  3377. item.area[0] = startX;
  3378. item.area[1] = startY;
  3379. item.area[3] = startY + lineHeight;
  3380. context.beginPath();
  3381. context.setLineWidth(1 * opts.pixelRatio);
  3382. context.setStrokeStyle(item.show ? item.color : opts.legend.hiddenColor);
  3383. context.setFillStyle(item.show ? item.color : opts.legend.hiddenColor);
  3384. switch (item.legendShape) {
  3385. case 'line':
  3386. context.moveTo(startX, startY + 0.5 * lineHeight - 2 * opts.pixelRatio);
  3387. context.fillRect(startX, startY + 0.5 * lineHeight - 2 * opts.pixelRatio, 15 * opts
  3388. .pixelRatio, 4 * opts.pixelRatio);
  3389. break;
  3390. case 'triangle':
  3391. context.moveTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight - 5 * opts
  3392. .pixelRatio);
  3393. context.lineTo(startX + 2.5 * opts.pixelRatio, startY + 0.5 * lineHeight + 5 * opts
  3394. .pixelRatio);
  3395. context.lineTo(startX + 12.5 * opts.pixelRatio, startY + 0.5 * lineHeight + 5 * opts
  3396. .pixelRatio);
  3397. context.lineTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight - 5 * opts
  3398. .pixelRatio);
  3399. break;
  3400. case 'diamond':
  3401. context.moveTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight - 5 * opts
  3402. .pixelRatio);
  3403. context.lineTo(startX + 2.5 * opts.pixelRatio, startY + 0.5 * lineHeight);
  3404. context.lineTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight + 5 * opts
  3405. .pixelRatio);
  3406. context.lineTo(startX + 12.5 * opts.pixelRatio, startY + 0.5 * lineHeight);
  3407. context.lineTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight - 5 * opts
  3408. .pixelRatio);
  3409. break;
  3410. case 'circle':
  3411. context.moveTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight);
  3412. context.arc(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight, 5 * opts.pixelRatio,
  3413. 0, 2 * Math.PI);
  3414. break;
  3415. case 'rect':
  3416. context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pixelRatio);
  3417. context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pixelRatio, 15 * opts
  3418. .pixelRatio, 10 * opts.pixelRatio);
  3419. break;
  3420. default:
  3421. context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pixelRatio);
  3422. context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pixelRatio, 15 * opts
  3423. .pixelRatio, 10 * opts.pixelRatio);
  3424. }
  3425. context.closePath();
  3426. context.fill();
  3427. context.stroke();
  3428. startX += shapeWidth + shapeRight;
  3429. let fontTrans = 0.5 * lineHeight + 0.5 * fontSize - 2;
  3430. context.beginPath();
  3431. context.setFontSize(fontSize);
  3432. context.setFillStyle(item.show ? opts.legend.fontColor : opts.legend.hiddenColor);
  3433. context.fillText(item.name, startX, startY + fontTrans);
  3434. context.closePath();
  3435. context.stroke();
  3436. if (opts.legend.position == 'top' || opts.legend.position == 'bottom') {
  3437. startX += measureText(item.name, fontSize) + itemGap;
  3438. item.area[2] = startX;
  3439. } else {
  3440. item.area[2] = startX + measureText(item.name, fontSize) + itemGap;;
  3441. startX -= shapeWidth + shapeRight;
  3442. startY += lineHeight;
  3443. }
  3444. }
  3445. });
  3446. }
  3447. function drawPieDataPoints(series, opts, config, context) {
  3448. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3449. var pieOption = assign({}, {
  3450. activeOpacity: 0.5,
  3451. activeRadius: 10 * opts.pixelRatio,
  3452. offsetAngle: 0,
  3453. labelWidth: 15 * opts.pixelRatio,
  3454. ringWidth: 0,
  3455. border: false,
  3456. borderWidth: 2,
  3457. borderColor: '#FFFFFF'
  3458. }, opts.extra.pie);
  3459. var centerPosition = {
  3460. x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
  3461. y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2
  3462. };
  3463. if (config.pieChartLinePadding == 0) {
  3464. config.pieChartLinePadding = pieOption.activeRadius;
  3465. }
  3466. var radius = Math.min((opts.width - opts.area[1] - opts.area[3]) / 2 - config.pieChartLinePadding - config
  3467. .pieChartTextPadding -
  3468. config._pieTextMaxLength_, (opts.height - opts.area[0] - opts.area[2]) / 2 - config.pieChartLinePadding -
  3469. config.pieChartTextPadding
  3470. );
  3471. series = getPieDataPoints(series, radius, process);
  3472. var activeRadius = pieOption.activeRadius;
  3473. series = series.map(function(eachSeries) {
  3474. eachSeries._start_ += (pieOption.offsetAngle) * Math.PI / 180;
  3475. return eachSeries;
  3476. });
  3477. series.forEach(function(eachSeries, seriesIndex) {
  3478. if (opts.tooltip) {
  3479. if (opts.tooltip.index == seriesIndex) {
  3480. context.beginPath();
  3481. context.setFillStyle(hexToRgb(eachSeries.color, opts.extra.pie.activeOpacity || 0.5));
  3482. context.moveTo(centerPosition.x, centerPosition.y);
  3483. context.arc(centerPosition.x, centerPosition.y, eachSeries._radius_ + activeRadius, eachSeries
  3484. ._start_,
  3485. eachSeries._start_ + 2 *
  3486. eachSeries._proportion_ * Math.PI);
  3487. context.closePath();
  3488. context.fill();
  3489. }
  3490. }
  3491. context.beginPath();
  3492. context.setLineWidth(pieOption.borderWidth * opts.pixelRatio);
  3493. context.lineJoin = "round";
  3494. context.setStrokeStyle(pieOption.borderColor);
  3495. context.setFillStyle(eachSeries.color);
  3496. context.moveTo(centerPosition.x, centerPosition.y);
  3497. context.arc(centerPosition.x, centerPosition.y, eachSeries._radius_, eachSeries._start_, eachSeries
  3498. ._start_ + 2 *
  3499. eachSeries._proportion_ * Math.PI);
  3500. context.closePath();
  3501. context.fill();
  3502. if (pieOption.border == true) {
  3503. context.stroke();
  3504. }
  3505. });
  3506. if (opts.type === 'ring') {
  3507. var innerPieWidth = radius * 0.6;
  3508. if (typeof opts.extra.pie.ringWidth === 'number' && opts.extra.pie.ringWidth > 0) {
  3509. innerPieWidth = Math.max(0, radius - opts.extra.pie.ringWidth);
  3510. }
  3511. context.beginPath();
  3512. context.setFillStyle(opts.background || '#ffffff');
  3513. context.moveTo(centerPosition.x, centerPosition.y);
  3514. context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI);
  3515. context.closePath();
  3516. context.fill();
  3517. }
  3518. if (opts.dataLabel !== false && process === 1) {
  3519. var valid = false;
  3520. for (var i = 0, len = series.length; i < len; i++) {
  3521. if (series[i].data > 0) {
  3522. valid = true;
  3523. break;
  3524. }
  3525. }
  3526. if (valid) {
  3527. drawPieText(series, opts, config, context, radius, centerPosition);
  3528. }
  3529. }
  3530. if (process === 1 && opts.type === 'ring') {
  3531. drawRingTitle(opts, config, context, centerPosition);
  3532. }
  3533. return {
  3534. center: centerPosition,
  3535. radius: radius,
  3536. series: series
  3537. };
  3538. }
  3539. function drawRoseDataPoints(series, opts, config, context) {
  3540. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3541. var roseOption = assign({}, {
  3542. type: 'area',
  3543. activeOpacity: 0.5,
  3544. activeRadius: 10 * opts.pixelRatio,
  3545. offsetAngle: 0,
  3546. labelWidth: 15 * opts.pixelRatio,
  3547. border: false,
  3548. borderWidth: 2,
  3549. borderColor: '#FFFFFF'
  3550. }, opts.extra.rose);
  3551. if (config.pieChartLinePadding == 0) {
  3552. config.pieChartLinePadding = roseOption.activeRadius;
  3553. }
  3554. var centerPosition = {
  3555. x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
  3556. y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2
  3557. };
  3558. var radius = Math.min((opts.width - opts.area[1] - opts.area[3]) / 2 - config.pieChartLinePadding - config
  3559. .pieChartTextPadding -
  3560. config._pieTextMaxLength_, (opts.height - opts.area[0] - opts.area[2]) / 2 - config.pieChartLinePadding -
  3561. config.pieChartTextPadding
  3562. );
  3563. var minRadius = roseOption.minRadius || radius * 0.5;
  3564. series = getRoseDataPoints(series, roseOption.type, minRadius, radius, process);
  3565. var activeRadius = roseOption.activeRadius;
  3566. series = series.map(function(eachSeries) {
  3567. eachSeries._start_ += (roseOption.offsetAngle || 0) * Math.PI / 180;
  3568. return eachSeries;
  3569. });
  3570. series.forEach(function(eachSeries, seriesIndex) {
  3571. if (opts.tooltip) {
  3572. if (opts.tooltip.index == seriesIndex) {
  3573. context.beginPath();
  3574. context.setFillStyle(hexToRgb(eachSeries.color, roseOption.activeOpacity || 0.5));
  3575. context.moveTo(centerPosition.x, centerPosition.y);
  3576. context.arc(centerPosition.x, centerPosition.y, activeRadius + eachSeries._radius_, eachSeries
  3577. ._start_,
  3578. eachSeries._start_ + 2 * eachSeries._rose_proportion_ * Math.PI);
  3579. context.closePath();
  3580. context.fill();
  3581. }
  3582. }
  3583. context.beginPath();
  3584. context.setLineWidth(roseOption.borderWidth * opts.pixelRatio);
  3585. context.lineJoin = "round";
  3586. context.setStrokeStyle(roseOption.borderColor);
  3587. context.setFillStyle(eachSeries.color);
  3588. context.moveTo(centerPosition.x, centerPosition.y);
  3589. context.arc(centerPosition.x, centerPosition.y, eachSeries._radius_, eachSeries._start_, eachSeries
  3590. ._start_ + 2 *
  3591. eachSeries._rose_proportion_ * Math.PI);
  3592. context.closePath();
  3593. context.fill();
  3594. if (roseOption.border == true) {
  3595. context.stroke();
  3596. }
  3597. });
  3598. if (opts.dataLabel !== false && process === 1) {
  3599. var valid = false;
  3600. for (var i = 0, len = series.length; i < len; i++) {
  3601. if (series[i].data > 0) {
  3602. valid = true;
  3603. break;
  3604. }
  3605. }
  3606. if (valid) {
  3607. drawPieText(series, opts, config, context, radius, centerPosition);
  3608. }
  3609. }
  3610. return {
  3611. center: centerPosition,
  3612. radius: radius,
  3613. series: series
  3614. };
  3615. }
  3616. function drawMyArcbarDataPoints(series, opts, config, context) {
  3617. var title = opts.title.name || '';
  3618. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3619. var arcbarOption = assign({}, {
  3620. startAngle: 0.75,
  3621. endAngle: 0.25,
  3622. type: 'default',
  3623. width: 12 * opts.pixelRatio,
  3624. gap: 2 * opts.pixelRatio
  3625. }, opts.extra.arcbar);
  3626. series = getArcbarDataPoints(series, arcbarOption, process);
  3627. var centerPosition;
  3628. if (arcbarOption.center) {
  3629. centerPosition = arcbarOption.center;
  3630. } else {
  3631. centerPosition = {
  3632. x: opts.width / 2,
  3633. y: opts.height / 2
  3634. };
  3635. }
  3636. var radius;
  3637. if (arcbarOption.radius) {
  3638. radius = arcbarOption.radius;
  3639. } else {
  3640. radius = Math.min(centerPosition.x, centerPosition.y);
  3641. radius -= 5 * opts.pixelRatio;
  3642. radius -= arcbarOption.width / 2;
  3643. }
  3644. //偏移
  3645. centerPosition.x += 20;
  3646. centerPosition.y += 10;
  3647. //中心圆形背景
  3648. var innerRadius = radius - arcbarOption.width;
  3649. var pieRadius = radius - arcbarOption.width * 2;
  3650. context.beginPath();
  3651. // let gradient = context.createLinearGradient(
  3652. // centerPosition.x,
  3653. // centerPosition.y - pieRadius,
  3654. // centerPosition.x,
  3655. // centerPosition.y + pieRadius);
  3656. // //配置渐变填充(起点:中心点向上减半径;结束点中心点向下加半径)
  3657. // gradient.addColorStop('0', hexToRgb(series[0].color, 0.3));
  3658. // gradient.addColorStop('1.0', hexToRgb("#FFFFFF", 0.1));
  3659. context.setFillStyle(arcbarOption.backgroundMiddle);
  3660. context.arc(centerPosition.x, centerPosition.y, pieRadius, 0, 2 * Math.PI, false);
  3661. context.fill();
  3662. //画进度条背景
  3663. // context.setLineWidth(arcbarOption.width);
  3664. // context.setStrokeStyle(hexToRgb(series[0].color, 0.3));
  3665. // context.setLineCap('round');
  3666. // context.beginPath();
  3667. // context.arc(centerPosition.x, centerPosition.y, innerRadius, arcbarOption.startAngle * Math.PI,
  3668. // arcbarOption.endAngle *
  3669. // Math.PI, false);
  3670. // context.stroke();
  3671. for (let i = 0; i < series.length; i++) {
  3672. let eachSeries = series[i];
  3673. //背景颜色
  3674. // 创建线性渐变
  3675. var grd = context.createLinearGradient(0, 0, 0, opts.height);
  3676. grd.addColorStop(0, arcbarOption.backgroundColor);
  3677. grd.addColorStop(0.5, arcbarOption.backgroundColor);
  3678. grd.addColorStop(0.8, arcbarOption.backgroundEndColor);
  3679. // 填充渐变
  3680. context.setLineWidth(arcbarOption.width * 0.3);
  3681. context.setStrokeStyle(grd || '#E9E9E9');
  3682. context.setLineCap('round');
  3683. context.beginPath();
  3684. let _radius = radius - (arcbarOption.width + arcbarOption.gap) * i;
  3685. if (arcbarOption.type == 'default') {
  3686. context.arc(centerPosition.x, centerPosition.y, _radius, arcbarOption.startAngle *
  3687. Math.PI, arcbarOption.endAngle * Math.PI, false);
  3688. } else {
  3689. context.arc(centerPosition.x, centerPosition.y, _radius, 0, 2 * Math.PI,
  3690. false);
  3691. }
  3692. context.stroke();
  3693. //进度条
  3694. var grd2 = context.createLinearGradient(0, 0, 0, opts.height);
  3695. grd2.addColorStop(0, arcbarOption.lineColor);
  3696. grd2.addColorStop(0.75, arcbarOption.lineColor);
  3697. grd2.addColorStop(0.8, arcbarOption.lineEndColor);
  3698. context.setLineWidth(arcbarOption.width);
  3699. context.setStrokeStyle(grd2 || '#E9E9E9');
  3700. context.setLineCap('round');
  3701. context.beginPath();
  3702. context.arc(centerPosition.x, centerPosition.y, _radius, arcbarOption.startAngle *
  3703. Math.PI, eachSeries._proportion_ * Math.PI, false);
  3704. context.stroke();
  3705. //绘制顶点圆
  3706. if (title) {
  3707. context.setLineWidth(arcbarOption.width * 0.3);
  3708. context.setStrokeStyle('rgba(142, 142, 251, 255)');
  3709. context.setLineCap('round');
  3710. context.beginPath();
  3711. let _endPointX = Math.cos(eachSeries._proportion_ * Math.PI) * _radius + centerPosition.x;
  3712. let _endPointY = Math.sin(eachSeries._proportion_ * Math.PI) * _radius + centerPosition.y;
  3713. context.arc(_endPointX, _endPointY, 1, 0, 2 * Math.PI, false);
  3714. context.fillStyle = 'rgba(142, 142, 251, 255)';
  3715. context.fill();
  3716. context.stroke();
  3717. }
  3718. }
  3719. //绘制提示点
  3720. context.setLineWidth(6);
  3721. context.setStrokeStyle('#E9E9E9');
  3722. context.setLineCap('round');
  3723. let _radius = radius + (arcbarOption.width + arcbarOption.gap) * 2;
  3724. let _tipPointX = 0;
  3725. let _tipPointY = 0;
  3726. for (let i = 0, j = -1.2; i < 5; i++, j += 0.35) {
  3727. // 左边第一个点
  3728. context.beginPath();
  3729. _tipPointX = Math.cos(j * Math.PI) * (_radius - 5) + centerPosition.x;
  3730. _tipPointY = Math.sin(j * Math.PI) * (_radius - 5) + centerPosition.y;
  3731. context.arc(_tipPointX, _tipPointY, 1, 0, 2 * Math.PI, false);
  3732. // context.fill();
  3733. context.stroke();
  3734. }
  3735. //提示点圆环
  3736. context.setLineWidth(1);
  3737. context.setStrokeStyle(hexToRgb('#E9E9E9', 0.2));
  3738. context.setLineCap('round');
  3739. context.beginPath();
  3740. context.arc(centerPosition.x, centerPosition.y, _radius - 5,
  3741. arcbarOption.startAngle * Math.PI,
  3742. arcbarOption.endAngle * Math.PI, false);
  3743. context.stroke();
  3744. drawMyRingTitle(opts, config, context, centerPosition);
  3745. return {
  3746. center: centerPosition,
  3747. radius: radius,
  3748. series: series
  3749. };
  3750. }
  3751. function drawMyGradualChangeArcbarDataPoints(series, opts, config, context) {
  3752. var title = opts.title.name || '';
  3753. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3754. var arcbarOption = assign({}, {
  3755. startAngle: 0.75,
  3756. endAngle: 0.25,
  3757. type: 'default',
  3758. width: 12 * opts.pixelRatio,
  3759. gap: 2 * opts.pixelRatio
  3760. }, opts.extra.arcbar);
  3761. series = getArcbarDataPoints(series, arcbarOption, process);
  3762. var centerPosition;
  3763. if (arcbarOption.center) {
  3764. centerPosition = arcbarOption.center;
  3765. } else {
  3766. centerPosition = {
  3767. x: opts.width / 2,
  3768. y: opts.height / 2
  3769. };
  3770. // console.log("=====================",centerPosition);
  3771. }
  3772. var radius;
  3773. if (arcbarOption.radius) {
  3774. radius = arcbarOption.radius;
  3775. } else {
  3776. radius = Math.min(centerPosition.x, centerPosition.y);
  3777. radius -= 5 * opts.pixelRatio;
  3778. radius -= arcbarOption.width / 2;
  3779. }
  3780. //偏移
  3781. centerPosition.x += 20;
  3782. centerPosition.y += 10;
  3783. //中心圆形背景
  3784. var innerRadius = radius - arcbarOption.width;
  3785. var pieRadius = radius + 11; //radius - arcbarOption.width * 2;
  3786. context.beginPath();
  3787. context.setFillStyle(arcbarOption.backgroundMiddle);
  3788. context.arc(centerPosition.x, centerPosition.y, pieRadius, 0, 2 * Math.PI, false);
  3789. context.fill();
  3790. for (let i = 0; i < series.length; i++) {
  3791. let eachSeries = series[i];
  3792. // eachSeries._proportion_ = 2.25;
  3793. //背景颜色
  3794. // 创建线性渐变
  3795. var grd = context.createLinearGradient(0, 0, 0, opts.height);
  3796. grd.addColorStop(0, arcbarOption.backgroundColor);
  3797. grd.addColorStop(0.5, arcbarOption.backgroundColor);
  3798. grd.addColorStop(0.8, arcbarOption.backgroundEndColor);
  3799. // 填充渐变
  3800. context.setLineWidth(arcbarOption.width * 0.3);
  3801. context.setStrokeStyle(grd || '#E9E9E9');
  3802. context.setLineCap('round');
  3803. context.beginPath();
  3804. let _radius = radius - (arcbarOption.width + arcbarOption.gap) * i;
  3805. if (arcbarOption.type == 'default') {
  3806. context.arc(centerPosition.x, centerPosition.y, _radius, arcbarOption.startAngle *
  3807. Math.PI, arcbarOption.endAngle * Math.PI, false);
  3808. } else {
  3809. context.arc(centerPosition.x, centerPosition.y, _radius, 0, 2 * Math.PI,
  3810. false);
  3811. }
  3812. context.stroke();
  3813. //进度条
  3814. var grd2 = context.createLinearGradient(0, 0, 0, opts.height);
  3815. grd2.addColorStop(0, arcbarOption.lineColor);
  3816. grd2.addColorStop(0.3, arcbarOption.lineColor);
  3817. grd2.addColorStop(0.8, arcbarOption.lineEndColor);
  3818. context.setLineWidth(arcbarOption.width);
  3819. context.setStrokeStyle(grd2 || '#E9E9E9');
  3820. context.setLineCap('round');
  3821. context.beginPath();
  3822. context.arc(centerPosition.x, centerPosition.y, _radius, arcbarOption.startAngle *
  3823. Math.PI, eachSeries._proportion_ * Math.PI, false);
  3824. context.stroke();
  3825. //绘制顶点圆
  3826. if (title) {
  3827. context.setLineWidth(arcbarOption.width * 0.3);
  3828. context.setStrokeStyle('rgba(142, 142, 251, 255)');
  3829. context.setLineCap('round');
  3830. context.beginPath();
  3831. let _endPointX = Math.cos(eachSeries._proportion_ * Math.PI) * _radius + centerPosition.x;
  3832. let _endPointY = Math.sin(eachSeries._proportion_ * Math.PI) * _radius + centerPosition.y;
  3833. context.arc(_endPointX, _endPointY, 1, 0, 2 * Math.PI, false);
  3834. context.fillStyle = 'rgba(142, 142, 251, 255)';
  3835. context.fill();
  3836. context.stroke();
  3837. }
  3838. }
  3839. //绘制提示点
  3840. // context.setLineWidth(6);
  3841. // context.setStrokeStyle('#E9E9E9');
  3842. // context.setLineCap('round');
  3843. let _radius = radius + (arcbarOption.width + arcbarOption.gap) * 2;
  3844. // let _tipPointX = 0;
  3845. // let _tipPointY = 0;
  3846. // for (let i = 0, j = -1.2; i < 5; i++, j += 0.35) {
  3847. // // 左边第一个点
  3848. // context.beginPath();
  3849. // _tipPointX = Math.cos(j * Math.PI) * (_radius - 5) + centerPosition.x;
  3850. // _tipPointY = Math.sin(j * Math.PI) * (_radius - 5) + centerPosition.y;
  3851. // context.arc(_tipPointX, _tipPointY, 1, 0, 2 * Math.PI, false);
  3852. // // context.fill();
  3853. // context.stroke();
  3854. // }
  3855. //提示点圆环
  3856. context.setLineWidth(1);
  3857. context.setStrokeStyle(hexToRgb('#E9E9E9', 0.2));
  3858. context.setLineCap('round');
  3859. context.beginPath();
  3860. context.arc(centerPosition.x, centerPosition.y, _radius +2 ,0,2 * Math.PI, false);
  3861. context.stroke();
  3862. return {
  3863. center: centerPosition,
  3864. radius: radius,
  3865. series: series
  3866. };
  3867. }
  3868. function drawArcbarDataPoints(series, opts, config, context) {
  3869. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  3870. var arcbarOption = assign({}, {
  3871. startAngle: 0.75,
  3872. endAngle: 0.25,
  3873. type: 'default',
  3874. width: 12 * opts.pixelRatio,
  3875. gap: 2 * opts.pixelRatio
  3876. }, opts.extra.arcbar);
  3877. series = getArcbarDataPoints(series, arcbarOption, process);
  3878. var centerPosition;
  3879. if (arcbarOption.center) {
  3880. centerPosition = arcbarOption.center;
  3881. } else {
  3882. centerPosition = {
  3883. x: opts.width / 2,
  3884. y: opts.height / 2
  3885. };
  3886. }
  3887. var radius;
  3888. if (arcbarOption.radius) {
  3889. radius = arcbarOption.radius;
  3890. } else {
  3891. radius = Math.min(centerPosition.x, centerPosition.y);
  3892. radius -= 5 * opts.pixelRatio;
  3893. radius -= arcbarOption.width / 2;
  3894. }
  3895. for (let i = 0; i < series.length; i++) {
  3896. let eachSeries = series[i];
  3897. //背景颜色
  3898. context.setLineWidth(arcbarOption.width);
  3899. context.setStrokeStyle(arcbarOption.backgroundColor || '#E9E9E9');
  3900. context.setLineCap('round');
  3901. context.beginPath();
  3902. if (arcbarOption.type == 'default') {
  3903. context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width + arcbarOption.gap) * i,
  3904. arcbarOption.startAngle *
  3905. Math.PI, arcbarOption.endAngle * Math.PI, false);
  3906. } else {
  3907. context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width + arcbarOption.gap) * i, 0, 2 *
  3908. Math.PI,
  3909. false);
  3910. }
  3911. context.stroke();
  3912. //进度条
  3913. context.setLineWidth(arcbarOption.width);
  3914. context.setStrokeStyle(eachSeries.color);
  3915. context.setLineCap('round');
  3916. context.beginPath();
  3917. context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width + arcbarOption.gap) * i,
  3918. arcbarOption.startAngle *
  3919. Math.PI, eachSeries._proportion_ * Math.PI, false);
  3920. context.stroke();
  3921. }
  3922. drawRingTitle(opts, config, context, centerPosition);
  3923. return {
  3924. center: centerPosition,
  3925. radius: radius,
  3926. series: series
  3927. };
  3928. }
  3929. function drawGaugeDataPoints(categories, series, opts, config, context) {
  3930. var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
  3931. var gaugeOption = assign({}, {
  3932. type: 'default',
  3933. startAngle: 0.75,
  3934. endAngle: 0.25,
  3935. width: 15,
  3936. splitLine: {
  3937. fixRadius: 0,
  3938. splitNumber: 10,
  3939. width: 15,
  3940. color: '#FFFFFF',
  3941. childNumber: 5,
  3942. childWidth: 5
  3943. },
  3944. pointer: {
  3945. width: 15,
  3946. color: 'auto'
  3947. }
  3948. }, opts.extra.gauge);
  3949. if (gaugeOption.oldAngle == undefined) {
  3950. gaugeOption.oldAngle = gaugeOption.startAngle;
  3951. }
  3952. if (gaugeOption.oldData == undefined) {
  3953. gaugeOption.oldData = 0;
  3954. }
  3955. categories = getGaugeAxisPoints(categories, gaugeOption.startAngle, gaugeOption.endAngle);
  3956. var centerPosition = {
  3957. x: opts.width / 2,
  3958. y: opts.height / 2
  3959. };
  3960. var radius = Math.min(centerPosition.x, centerPosition.y);
  3961. radius -= 5 * opts.pixelRatio;
  3962. radius -= gaugeOption.width / 2;
  3963. var innerRadius = radius - gaugeOption.width;
  3964. var totalAngle = 0;
  3965. //判断仪表盘的样式:default百度样式,progress新样式
  3966. if (gaugeOption.type == 'progress') {
  3967. //## 第一步画中心圆形背景和进度条背景
  3968. //中心圆形背景
  3969. var pieRadius = radius - gaugeOption.width * 3;
  3970. context.beginPath();
  3971. let gradient = context.createLinearGradient(centerPosition.x, centerPosition.y - pieRadius, centerPosition.x,
  3972. centerPosition.y + pieRadius);
  3973. //配置渐变填充(起点:中心点向上减半径;结束点中心点向下加半径)
  3974. gradient.addColorStop('0', hexToRgb(series[0].color, 0.3));
  3975. gradient.addColorStop('1.0', hexToRgb("#FFFFFF", 0.1));
  3976. context.setFillStyle(gradient);
  3977. context.arc(centerPosition.x, centerPosition.y, pieRadius, 0, 2 * Math.PI, false);
  3978. context.fill();
  3979. //画进度条背景
  3980. context.setLineWidth(gaugeOption.width);
  3981. context.setStrokeStyle(hexToRgb(series[0].color, 0.3));
  3982. context.setLineCap('round');
  3983. context.beginPath();
  3984. context.arc(centerPosition.x, centerPosition.y, innerRadius, gaugeOption.startAngle * Math.PI, gaugeOption
  3985. .endAngle *
  3986. Math.PI, false);
  3987. context.stroke();
  3988. //## 第二步画刻度线
  3989. totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
  3990. let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
  3991. let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber;
  3992. let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius;
  3993. let endX = -radius - gaugeOption.width - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.width;
  3994. context.save();
  3995. context.translate(centerPosition.x, centerPosition.y);
  3996. context.rotate((gaugeOption.startAngle - 1) * Math.PI);
  3997. let len = gaugeOption.splitLine.splitNumber * gaugeOption.splitLine.childNumber + 1;
  3998. let proc = series[0].data * process;
  3999. for (let i = 0; i < len; i++) {
  4000. context.beginPath();
  4001. //刻度线随进度变色
  4002. if (proc > (i / len)) {
  4003. context.setStrokeStyle(hexToRgb(series[0].color, 1));
  4004. } else {
  4005. context.setStrokeStyle(hexToRgb(series[0].color, 0.3));
  4006. }
  4007. context.setLineWidth(3 * opts.pixelRatio);
  4008. context.moveTo(startX, 0);
  4009. context.lineTo(endX, 0);
  4010. context.stroke();
  4011. context.rotate(childAngle * Math.PI);
  4012. }
  4013. context.restore();
  4014. //## 第三步画进度条
  4015. series = getArcbarDataPoints(series, gaugeOption, process);
  4016. context.setLineWidth(gaugeOption.width);
  4017. context.setStrokeStyle(series[0].color);
  4018. context.setLineCap('round');
  4019. context.beginPath();
  4020. context.arc(centerPosition.x, centerPosition.y, innerRadius, gaugeOption.startAngle * Math.PI, series[0]
  4021. ._proportion_ *
  4022. Math.PI, false);
  4023. context.stroke();
  4024. //## 第四步画指针
  4025. let pointerRadius = radius - gaugeOption.width * 2.5;
  4026. context.save();
  4027. context.translate(centerPosition.x, centerPosition.y);
  4028. context.rotate((series[0]._proportion_ - 1) * Math.PI);
  4029. context.beginPath();
  4030. context.setLineWidth(gaugeOption.width / 3);
  4031. let gradient3 = context.createLinearGradient(0, -pointerRadius * 0.6, 0, pointerRadius * 0.6);
  4032. gradient3.addColorStop('0', hexToRgb('#FFFFFF', 0));
  4033. gradient3.addColorStop('0.5', hexToRgb(series[0].color, 1));
  4034. gradient3.addColorStop('1.0', hexToRgb('#FFFFFF', 0));
  4035. context.setStrokeStyle(gradient3);
  4036. context.arc(0, 0, pointerRadius, 0.85 * Math.PI, 1.15 * Math.PI, false);
  4037. context.stroke();
  4038. context.beginPath();
  4039. context.setLineWidth(1);
  4040. context.setStrokeStyle(series[0].color);
  4041. context.setFillStyle(series[0].color);
  4042. context.moveTo(-pointerRadius - gaugeOption.width / 3 / 2, -4);
  4043. context.lineTo(-pointerRadius - gaugeOption.width / 3 / 2 - 4, 0);
  4044. context.lineTo(-pointerRadius - gaugeOption.width / 3 / 2, 4);
  4045. context.lineTo(-pointerRadius - gaugeOption.width / 3 / 2, -4);
  4046. context.stroke();
  4047. context.fill();
  4048. context.restore();
  4049. //default百度样式
  4050. } else {
  4051. //画背景
  4052. context.setLineWidth(gaugeOption.width);
  4053. context.setLineCap('butt');
  4054. for (let i = 0; i < categories.length; i++) {
  4055. let eachCategories = categories[i];
  4056. context.beginPath();
  4057. context.setStrokeStyle(eachCategories.color);
  4058. context.arc(centerPosition.x, centerPosition.y, radius, eachCategories._startAngle_ * Math.PI,
  4059. eachCategories._endAngle_ *
  4060. Math.PI, false);
  4061. context.stroke();
  4062. }
  4063. context.save();
  4064. //画刻度线
  4065. totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
  4066. let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
  4067. let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber;
  4068. let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius;
  4069. let endX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.width;
  4070. let childendX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine
  4071. .childWidth;
  4072. context.translate(centerPosition.x, centerPosition.y);
  4073. context.rotate((gaugeOption.startAngle - 1) * Math.PI);
  4074. for (let i = 0; i < gaugeOption.splitLine.splitNumber + 1; i++) {
  4075. context.beginPath();
  4076. context.setStrokeStyle(gaugeOption.splitLine.color);
  4077. context.setLineWidth(2 * opts.pixelRatio);
  4078. context.moveTo(startX, 0);
  4079. context.lineTo(endX, 0);
  4080. context.stroke();
  4081. context.rotate(splitAngle * Math.PI);
  4082. }
  4083. context.restore();
  4084. context.save();
  4085. context.translate(centerPosition.x, centerPosition.y);
  4086. context.rotate((gaugeOption.startAngle - 1) * Math.PI);
  4087. for (let i = 0; i < gaugeOption.splitLine.splitNumber * gaugeOption.splitLine.childNumber + 1; i++) {
  4088. context.beginPath();
  4089. context.setStrokeStyle(gaugeOption.splitLine.color);
  4090. context.setLineWidth(1 * opts.pixelRatio);
  4091. context.moveTo(startX, 0);
  4092. context.lineTo(childendX, 0);
  4093. context.stroke();
  4094. context.rotate(childAngle * Math.PI);
  4095. }
  4096. context.restore();
  4097. //画指针
  4098. series = getGaugeDataPoints(series, categories, gaugeOption, process);
  4099. for (let i = 0; i < series.length; i++) {
  4100. let eachSeries = series[i];
  4101. context.save();
  4102. context.translate(centerPosition.x, centerPosition.y);
  4103. context.rotate((eachSeries._proportion_ - 1) * Math.PI);
  4104. context.beginPath();
  4105. context.setFillStyle(eachSeries.color);
  4106. context.moveTo(gaugeOption.pointer.width, 0);
  4107. context.lineTo(0, -gaugeOption.pointer.width / 2);
  4108. context.lineTo(-innerRadius, 0);
  4109. context.lineTo(0, gaugeOption.pointer.width / 2);
  4110. context.lineTo(gaugeOption.pointer.width, 0);
  4111. context.closePath();
  4112. context.fill();
  4113. context.beginPath();
  4114. context.setFillStyle('#FFFFFF');
  4115. context.arc(0, 0, gaugeOption.pointer.width / 6, 0, 2 * Math.PI, false);
  4116. context.fill();
  4117. context.restore();
  4118. }
  4119. if (opts.dataLabel !== false) {
  4120. drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context);
  4121. }
  4122. }
  4123. //画仪表盘标题,副标题
  4124. drawRingTitle(opts, config, context, centerPosition);
  4125. if (process === 1 && opts.type === 'gauge') {
  4126. opts.extra.gauge.oldAngle = series[0]._proportion_;
  4127. opts.extra.gauge.oldData = series[0].data;
  4128. }
  4129. return {
  4130. center: centerPosition,
  4131. radius: radius,
  4132. innerRadius: innerRadius,
  4133. categories: categories,
  4134. totalAngle: totalAngle
  4135. };
  4136. }
  4137. function drawRadarDataPoints(series, opts, config, context) {
  4138. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  4139. var radarOption = assign({}, {
  4140. gridColor: '#cccccc',
  4141. labelColor: '#666666',
  4142. opacity: 0.2,
  4143. gridCount: 3
  4144. }, opts.extra.radar);
  4145. var coordinateAngle = getRadarCoordinateSeries(opts.categories.length);
  4146. var centerPosition = {
  4147. x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
  4148. y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2
  4149. };
  4150. var radius = Math.min(centerPosition.x - (getMaxTextListLength(opts.categories) + config.radarLabelTextMargin),
  4151. centerPosition.y - config.radarLabelTextMargin);
  4152. //TODO逻辑不对
  4153. radius -= opts.padding[1];
  4154. // draw grid
  4155. context.beginPath();
  4156. context.setLineWidth(1 * opts.pixelRatio);
  4157. context.setStrokeStyle(radarOption.gridColor);
  4158. coordinateAngle.forEach(function(angle) {
  4159. var pos = convertCoordinateOrigin(radius * Math.cos(angle), radius * Math.sin(angle), centerPosition);
  4160. context.moveTo(centerPosition.x, centerPosition.y);
  4161. context.lineTo(pos.x, pos.y);
  4162. });
  4163. context.stroke();
  4164. context.closePath();
  4165. // draw split line grid
  4166. var _loop = function _loop(i) {
  4167. var startPos = {};
  4168. context.beginPath();
  4169. context.setLineWidth(1 * opts.pixelRatio);
  4170. context.setStrokeStyle(radarOption.gridColor);
  4171. coordinateAngle.forEach(function(angle, index) {
  4172. var pos = convertCoordinateOrigin(radius / radarOption.gridCount * i * Math.cos(angle), radius /
  4173. radarOption.gridCount *
  4174. i * Math.sin(angle), centerPosition);
  4175. if (index === 0) {
  4176. startPos = pos;
  4177. context.moveTo(pos.x, pos.y);
  4178. } else {
  4179. context.lineTo(pos.x, pos.y);
  4180. }
  4181. });
  4182. context.lineTo(startPos.x, startPos.y);
  4183. context.stroke();
  4184. context.closePath();
  4185. };
  4186. for (var i = 1; i <= radarOption.gridCount; i++) {
  4187. _loop(i);
  4188. }
  4189. var radarDataPoints = getRadarDataPoints(coordinateAngle, centerPosition, radius, series, opts, process);
  4190. radarDataPoints.forEach(function(eachSeries, seriesIndex) {
  4191. // 绘制区域数据
  4192. context.beginPath();
  4193. context.setFillStyle(hexToRgb(eachSeries.color, radarOption.opacity));
  4194. eachSeries.data.forEach(function(item, index) {
  4195. if (index === 0) {
  4196. context.moveTo(item.position.x, item.position.y);
  4197. } else {
  4198. context.lineTo(item.position.x, item.position.y);
  4199. }
  4200. });
  4201. context.closePath();
  4202. context.fill();
  4203. if (opts.dataPointShape !== false) {
  4204. var points = eachSeries.data.map(function(item) {
  4205. return item.position;
  4206. });
  4207. drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
  4208. }
  4209. });
  4210. // draw label text
  4211. drawRadarLabel(coordinateAngle, radius, centerPosition, opts, config, context);
  4212. return {
  4213. center: centerPosition,
  4214. radius: radius,
  4215. angleList: coordinateAngle
  4216. };
  4217. }
  4218. function normalInt(min, max, iter) {
  4219. iter = iter == 0 ? 1 : iter;
  4220. var arr = [];
  4221. for (var i = 0; i < iter; i++) {
  4222. arr[i] = Math.random();
  4223. };
  4224. return Math.floor(arr.reduce(function(i, j) {
  4225. return i + j
  4226. }) / iter * (max - min)) + min;
  4227. };
  4228. function collisionNew(area, points, width, height) {
  4229. var isIn = false;
  4230. for (let i = 0; i < points.length; i++) {
  4231. if (points[i].area) {
  4232. if (area[3] < points[i].area[1] || area[0] > points[i].area[2] || area[1] > points[i].area[3] || area[2] <
  4233. points[i]
  4234. .area[0]) {
  4235. if (area[0] < 0 || area[1] < 0 || area[2] > width || area[3] > height) {
  4236. isIn = true;
  4237. break;
  4238. } else {
  4239. isIn = false;
  4240. }
  4241. } else {
  4242. isIn = true;
  4243. break;
  4244. }
  4245. }
  4246. }
  4247. return isIn;
  4248. };
  4249. function getBoundingBox(data) {
  4250. var bounds = {},
  4251. coords;
  4252. bounds.xMin = 180;
  4253. bounds.xMax = 0;
  4254. bounds.yMin = 90;
  4255. bounds.yMax = 0
  4256. for (var i = 0; i < data.length; i++) {
  4257. var coorda = data[i].geometry.coordinates
  4258. for (var k = 0; k < coorda.length; k++) {
  4259. coords = coorda[k];
  4260. if (coords.length == 1) {
  4261. coords = coords[0]
  4262. }
  4263. for (var j = 0; j < coords.length; j++) {
  4264. var longitude = coords[j][0];
  4265. var latitude = coords[j][1];
  4266. var point = {
  4267. x: longitude,
  4268. y: latitude
  4269. }
  4270. bounds.xMin = bounds.xMin < point.x ? bounds.xMin : point.x;
  4271. bounds.xMax = bounds.xMax > point.x ? bounds.xMax : point.x;
  4272. bounds.yMin = bounds.yMin < point.y ? bounds.yMin : point.y;
  4273. bounds.yMax = bounds.yMax > point.y ? bounds.yMax : point.y;
  4274. }
  4275. }
  4276. }
  4277. return bounds;
  4278. }
  4279. function coordinateToPoint(latitude, longitude, bounds, scale, xoffset, yoffset) {
  4280. return {
  4281. x: (longitude - bounds.xMin) * scale + xoffset,
  4282. y: (bounds.yMax - latitude) * scale + yoffset
  4283. };
  4284. }
  4285. function pointToCoordinate(pointY, pointX, bounds, scale, xoffset, yoffset) {
  4286. return {
  4287. x: (pointX - xoffset) / scale + bounds.xMin,
  4288. y: bounds.yMax - (pointY - yoffset) / scale
  4289. };
  4290. }
  4291. function isRayIntersectsSegment(poi, s_poi, e_poi) {
  4292. if (s_poi[1] == e_poi[1]) {
  4293. return false;
  4294. }
  4295. if (s_poi[1] > poi[1] && e_poi[1] > poi[1]) {
  4296. return false;
  4297. }
  4298. if (s_poi[1] < poi[1] && e_poi[1] < poi[1]) {
  4299. return false;
  4300. }
  4301. if (s_poi[1] == poi[1] && e_poi[1] > poi[1]) {
  4302. return false;
  4303. }
  4304. if (e_poi[1] == poi[1] && s_poi[1] > poi[1]) {
  4305. return false;
  4306. }
  4307. if (s_poi[0] < poi[0] && e_poi[1] < poi[1]) {
  4308. return false;
  4309. }
  4310. let xseg = e_poi[0] - (e_poi[0] - s_poi[0]) * (e_poi[1] - poi[1]) / (e_poi[1] - s_poi[1]);
  4311. if (xseg < poi[0]) {
  4312. return false;
  4313. } else {
  4314. return true;
  4315. }
  4316. }
  4317. function isPoiWithinPoly(poi, poly) {
  4318. let sinsc = 0;
  4319. for (let i = 0; i < poly.length; i++) {
  4320. let epoly = poly[i][0];
  4321. if (poly.length == 1) {
  4322. epoly = poly[i][0]
  4323. }
  4324. for (let j = 0; j < epoly.length - 1; j++) {
  4325. let s_poi = epoly[j];
  4326. let e_poi = epoly[j + 1];
  4327. if (isRayIntersectsSegment(poi, s_poi, e_poi)) {
  4328. sinsc += 1;
  4329. }
  4330. }
  4331. }
  4332. if (sinsc % 2 == 1) {
  4333. return true;
  4334. } else {
  4335. return false;
  4336. }
  4337. }
  4338. function drawMapDataPoints(series, opts, config, context) {
  4339. var mapOption = assign({}, {
  4340. border: true,
  4341. borderWidth: 1,
  4342. borderColor: '#666666',
  4343. fillOpacity: 0.6,
  4344. activeBorderColor: '#f04864',
  4345. activeFillColor: '#facc14',
  4346. activeFillOpacity: 1
  4347. }, opts.extra.map);
  4348. var coords, point;
  4349. var data = series;
  4350. var bounds = getBoundingBox(data);
  4351. var xScale = opts.width / Math.abs(bounds.xMax - bounds.xMin);
  4352. var yScale = opts.height / Math.abs(bounds.yMax - bounds.yMin);
  4353. var scale = xScale < yScale ? xScale : yScale;
  4354. var xoffset = opts.width / 2 - Math.abs(bounds.xMax - bounds.xMin) / 2 * scale;
  4355. var yoffset = opts.height / 2 - Math.abs(bounds.yMax - bounds.yMin) / 2 * scale;
  4356. context.beginPath();
  4357. context.clearRect(0, 0, opts.width, opts.height);
  4358. context.setFillStyle(opts.background || '#FFFFFF');
  4359. context.rect(0, 0, opts.width, opts.height);
  4360. context.fill();
  4361. for (var i = 0; i < data.length; i++) {
  4362. context.beginPath();
  4363. context.setLineWidth(mapOption.borderWidth * opts.pixelRatio);
  4364. context.setStrokeStyle(mapOption.borderColor);
  4365. context.setFillStyle(hexToRgb(series[i].color, mapOption.fillOpacity));
  4366. if (opts.tooltip) {
  4367. if (opts.tooltip.index == i) {
  4368. context.setStrokeStyle(mapOption.activeBorderColor);
  4369. context.setFillStyle(hexToRgb(mapOption.activeFillColor, mapOption.activeFillOpacity));
  4370. }
  4371. }
  4372. var coorda = data[i].geometry.coordinates
  4373. for (var k = 0; k < coorda.length; k++) {
  4374. coords = coorda[k];
  4375. if (coords.length == 1) {
  4376. coords = coords[0]
  4377. }
  4378. for (var j = 0; j < coords.length; j++) {
  4379. point = coordinateToPoint(coords[j][1], coords[j][0], bounds, scale, xoffset, yoffset)
  4380. if (j === 0) {
  4381. context.beginPath();
  4382. context.moveTo(point.x, point.y);
  4383. } else {
  4384. context.lineTo(point.x, point.y);
  4385. }
  4386. }
  4387. context.fill();
  4388. if (mapOption.border == true) {
  4389. context.stroke();
  4390. }
  4391. }
  4392. if (opts.dataLabel == true) {
  4393. var centerPoint = data[i].properties.centroid;
  4394. if (centerPoint) {
  4395. point = coordinateToPoint(centerPoint[1], centerPoint[0], bounds, scale, xoffset, yoffset);
  4396. let fontSize = data[i].textSize || config.fontSize;
  4397. let text = data[i].properties.name;
  4398. context.beginPath();
  4399. context.setFontSize(fontSize)
  4400. context.setFillStyle(data[i].textColor || '#666666')
  4401. context.fillText(text, point.x - measureText(text, fontSize) / 2, point.y + fontSize / 2);
  4402. context.closePath();
  4403. context.stroke();
  4404. }
  4405. }
  4406. }
  4407. opts.chartData.mapData = {
  4408. bounds: bounds,
  4409. scale: scale,
  4410. xoffset: xoffset,
  4411. yoffset: yoffset
  4412. }
  4413. drawToolTipBridge(opts, config, context, 1);
  4414. context.draw();
  4415. }
  4416. function getWordCloudPoint(opts, type) {
  4417. let points = opts.series.sort(function(a, b) {
  4418. return parseInt(b.textSize) - parseInt(a.textSize);
  4419. });
  4420. switch (type) {
  4421. case 'normal':
  4422. for (let i = 0; i < points.length; i++) {
  4423. let text = points[i].name;
  4424. let tHeight = points[i].textSize;
  4425. let tWidth = measureText(text, tHeight);
  4426. let x, y;
  4427. let area;
  4428. let breaknum = 0;
  4429. while (true) {
  4430. breaknum++;
  4431. x = normalInt(-opts.width / 2, opts.width / 2, 5) - tWidth / 2;
  4432. y = normalInt(-opts.height / 2, opts.height / 2, 5) + tHeight / 2;
  4433. area = [x - 5 + opts.width / 2, y - 5 - tHeight + opts.height / 2, x + tWidth + 5 + opts.width / 2,
  4434. y + 5 + opts.height /
  4435. 2
  4436. ];
  4437. let isCollision = collisionNew(area, points, opts.width, opts.height);
  4438. if (!isCollision) break;
  4439. if (breaknum == 1000) {
  4440. area = [-100, -100, -100, -100];
  4441. break;
  4442. }
  4443. };
  4444. points[i].area = area;
  4445. }
  4446. break;
  4447. case 'vertical':
  4448. function Spin() {
  4449. //获取均匀随机值,是否旋转,旋转的概率为(1-0.5)
  4450. if (Math.random() > 0.7) {
  4451. return true;
  4452. } else {
  4453. return false
  4454. };
  4455. };
  4456. for (let i = 0; i < points.length; i++) {
  4457. let text = points[i].name;
  4458. let tHeight = points[i].textSize;
  4459. let tWidth = measureText(text, tHeight);
  4460. let isSpin = Spin();
  4461. let x, y, area, areav;
  4462. let breaknum = 0;
  4463. while (true) {
  4464. breaknum++;
  4465. let isCollision;
  4466. if (isSpin) {
  4467. x = normalInt(-opts.width / 2, opts.width / 2, 5) - tWidth / 2;
  4468. y = normalInt(-opts.height / 2, opts.height / 2, 5) + tHeight / 2;
  4469. area = [y - 5 - tWidth + opts.width / 2, (-x - 5 + opts.height / 2), y + 5 + opts.width / 2, (-
  4470. x + tHeight + 5 +
  4471. opts.height / 2)];
  4472. areav = [opts.width - (opts.width / 2 - opts.height / 2) - (-x + tHeight + 5 + opts.height /
  4473. 2) - 5, (opts.height /
  4474. 2 - opts.width / 2) + (y - 5 - tWidth + opts.width / 2) - 5, opts.width - (opts
  4475. .width / 2 - opts.height / 2) -
  4476. (-x + tHeight + 5 + opts.height / 2) + tHeight, (opts.height / 2 - opts.width / 2) + (
  4477. y - 5 - tWidth + opts.width /
  4478. 2) + tWidth + 5
  4479. ];
  4480. isCollision = collisionNew(areav, points, opts.height, opts.width);
  4481. } else {
  4482. x = normalInt(-opts.width / 2, opts.width / 2, 5) - tWidth / 2;
  4483. y = normalInt(-opts.height / 2, opts.height / 2, 5) + tHeight / 2;
  4484. area = [x - 5 + opts.width / 2, y - 5 - tHeight + opts.height / 2, x + tWidth + 5 + opts.width /
  4485. 2, y + 5 + opts.height /
  4486. 2
  4487. ];
  4488. isCollision = collisionNew(area, points, opts.width, opts.height);
  4489. }
  4490. if (!isCollision) break;
  4491. if (breaknum == 1000) {
  4492. area = [-1000, -1000, -1000, -1000];
  4493. break;
  4494. }
  4495. };
  4496. if (isSpin) {
  4497. points[i].area = areav;
  4498. points[i].areav = area;
  4499. } else {
  4500. points[i].area = area;
  4501. }
  4502. points[i].rotate = isSpin;
  4503. };
  4504. break;
  4505. }
  4506. return points;
  4507. }
  4508. function drawWordCloudDataPoints(series, opts, config, context) {
  4509. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  4510. let wordOption = assign({}, {
  4511. type: 'normal',
  4512. autoColors: true
  4513. }, opts.extra.word);
  4514. context.beginPath();
  4515. context.setFillStyle(opts.background || '#FFFFFF');
  4516. context.rect(0, 0, opts.width, opts.height);
  4517. context.fill();
  4518. context.save();
  4519. let points = opts.chartData.wordCloudData;
  4520. context.translate(opts.width / 2, opts.height / 2);
  4521. for (let i = 0; i < points.length; i++) {
  4522. context.save();
  4523. if (points[i].rotate) {
  4524. context.rotate(90 * Math.PI / 180);
  4525. }
  4526. let text = points[i].name;
  4527. let tHeight = points[i].textSize;
  4528. let tWidth = measureText(text, tHeight);
  4529. context.beginPath();
  4530. context.setStrokeStyle(points[i].color);
  4531. context.setFillStyle(points[i].color);
  4532. context.setFontSize(tHeight);
  4533. if (points[i].rotate) {
  4534. if (points[i].areav[0] > 0) {
  4535. if (opts.tooltip) {
  4536. if (opts.tooltip.index == i) {
  4537. context.strokeText(text, (points[i].areav[0] + 5 - opts.width / 2) * process - tWidth * (1 -
  4538. process) / 2, (
  4539. points[i].areav[1] + 5 + tHeight - opts.height / 2) * process);
  4540. } else {
  4541. context.fillText(text, (points[i].areav[0] + 5 - opts.width / 2) * process - tWidth * (1 -
  4542. process) / 2, (points[
  4543. i].areav[1] + 5 + tHeight - opts.height / 2) * process);
  4544. }
  4545. } else {
  4546. context.fillText(text, (points[i].areav[0] + 5 - opts.width / 2) * process - tWidth * (1 -
  4547. process) / 2, (points[i]
  4548. .areav[1] + 5 + tHeight - opts.height / 2) * process);
  4549. }
  4550. }
  4551. } else {
  4552. if (points[i].area[0] > 0) {
  4553. if (opts.tooltip) {
  4554. if (opts.tooltip.index == i) {
  4555. context.strokeText(text, (points[i].area[0] + 5 - opts.width / 2) * process - tWidth * (1 -
  4556. process) / 2, (points[
  4557. i].area[1] + 5 + tHeight - opts.height / 2) * process);
  4558. } else {
  4559. context.fillText(text, (points[i].area[0] + 5 - opts.width / 2) * process - tWidth * (1 -
  4560. process) / 2, (points[i]
  4561. .area[1] + 5 + tHeight - opts.height / 2) * process);
  4562. }
  4563. } else {
  4564. context.fillText(text, (points[i].area[0] + 5 - opts.width / 2) * process - tWidth * (1 - process) /
  4565. 2, (points[i]
  4566. .area[1] + 5 + tHeight - opts.height / 2) * process);
  4567. }
  4568. }
  4569. }
  4570. context.stroke();
  4571. context.restore();
  4572. }
  4573. context.restore();
  4574. }
  4575. function drawFunnelDataPoints(series, opts, config, context) {
  4576. let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  4577. let funnelOption = assign({}, {
  4578. activeWidth: 10,
  4579. activeOpacity: 0.3,
  4580. border: false,
  4581. borderWidth: 2,
  4582. borderColor: '#FFFFFF',
  4583. fillOpacity: 1,
  4584. labelAlign: 'right'
  4585. }, opts.extra.funnel);
  4586. let eachSpacing = (opts.height - opts.area[0] - opts.area[2]) / series.length;
  4587. let centerPosition = {
  4588. x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2,
  4589. y: opts.height - opts.area[2]
  4590. };
  4591. let activeWidth = funnelOption.activeWidth;
  4592. let radius = Math.min((opts.width - opts.area[1] - opts.area[3]) / 2 - activeWidth, (opts.height - opts.area[0] -
  4593. opts
  4594. .area[2]) / 2 - activeWidth);
  4595. series = getFunnelDataPoints(series, radius, process);
  4596. context.save();
  4597. context.translate(centerPosition.x, centerPosition.y);
  4598. for (let i = 0; i < series.length; i++) {
  4599. if (i == 0) {
  4600. if (opts.tooltip) {
  4601. if (opts.tooltip.index == i) {
  4602. context.beginPath();
  4603. context.setFillStyle(hexToRgb(series[i].color, funnelOption.activeOpacity));
  4604. context.moveTo(-activeWidth, 0);
  4605. context.lineTo(-series[i].radius - activeWidth, -eachSpacing);
  4606. context.lineTo(series[i].radius + activeWidth, -eachSpacing);
  4607. context.lineTo(activeWidth, 0);
  4608. context.lineTo(-activeWidth, 0);
  4609. context.closePath();
  4610. context.fill();
  4611. }
  4612. }
  4613. series[i].funnelArea = [centerPosition.x - series[i].radius, centerPosition.y - eachSpacing, centerPosition
  4614. .x +
  4615. series[i].radius, centerPosition.y
  4616. ];
  4617. context.beginPath();
  4618. context.setLineWidth(funnelOption.borderWidth * opts.pixelRatio);
  4619. context.setStrokeStyle(funnelOption.borderColor);
  4620. context.setFillStyle(hexToRgb(series[i].color, funnelOption.fillOpacity));
  4621. context.moveTo(0, 0);
  4622. context.lineTo(-series[i].radius, -eachSpacing);
  4623. context.lineTo(series[i].radius, -eachSpacing);
  4624. context.lineTo(0, 0);
  4625. context.closePath();
  4626. context.fill();
  4627. if (funnelOption.border == true) {
  4628. context.stroke();
  4629. }
  4630. } else {
  4631. if (opts.tooltip) {
  4632. if (opts.tooltip.index == i) {
  4633. context.beginPath();
  4634. context.setFillStyle(hexToRgb(series[i].color, funnelOption.activeOpacity));
  4635. context.moveTo(0, 0);
  4636. context.lineTo(-series[i - 1].radius - activeWidth, 0);
  4637. context.lineTo(-series[i].radius - activeWidth, -eachSpacing);
  4638. context.lineTo(series[i].radius + activeWidth, -eachSpacing);
  4639. context.lineTo(series[i - 1].radius + activeWidth, 0);
  4640. context.lineTo(0, 0);
  4641. context.closePath();
  4642. context.fill();
  4643. }
  4644. }
  4645. series[i].funnelArea = [centerPosition.x - series[i].radius, centerPosition.y - eachSpacing * (i + 1),
  4646. centerPosition.x + series[i].radius, centerPosition.y - eachSpacing * i
  4647. ];
  4648. context.beginPath();
  4649. context.setLineWidth(funnelOption.borderWidth * opts.pixelRatio);
  4650. context.setStrokeStyle(funnelOption.borderColor);
  4651. context.setFillStyle(hexToRgb(series[i].color, funnelOption.fillOpacity));
  4652. context.moveTo(0, 0);
  4653. context.lineTo(-series[i - 1].radius, 0);
  4654. context.lineTo(-series[i].radius, -eachSpacing);
  4655. context.lineTo(series[i].radius, -eachSpacing);
  4656. context.lineTo(series[i - 1].radius, 0);
  4657. context.lineTo(0, 0);
  4658. context.closePath();
  4659. context.fill();
  4660. if (funnelOption.border == true) {
  4661. context.stroke();
  4662. }
  4663. }
  4664. context.translate(0, -eachSpacing)
  4665. }
  4666. context.restore();
  4667. if (opts.dataLabel !== false && process === 1) {
  4668. drawFunnelText(series, opts, context, eachSpacing, funnelOption.labelAlign, activeWidth, centerPosition);
  4669. }
  4670. return {
  4671. center: centerPosition,
  4672. radius: radius,
  4673. series: series
  4674. };
  4675. }
  4676. function drawFunnelText(series, opts, context, eachSpacing, labelAlign, activeWidth, centerPosition) {
  4677. for (let i = 0; i < series.length; i++) {
  4678. let item = series[i];
  4679. let startX, endX, startY, fontSize;
  4680. let text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) +
  4681. '%';
  4682. if (labelAlign == 'right') {
  4683. if (i == 0) {
  4684. startX = (item.funnelArea[2] + centerPosition.x) / 2;
  4685. } else {
  4686. startX = (item.funnelArea[2] + series[i - 1].funnelArea[2]) / 2;
  4687. }
  4688. endX = startX + activeWidth * 2;
  4689. startY = item.funnelArea[1] + eachSpacing / 2;
  4690. fontSize = item.textSize || opts.fontSize;
  4691. context.setLineWidth(1 * opts.pixelRatio);
  4692. context.setStrokeStyle(item.color);
  4693. context.setFillStyle(item.color);
  4694. context.beginPath();
  4695. context.moveTo(startX, startY);
  4696. context.lineTo(endX, startY);
  4697. context.stroke();
  4698. context.closePath();
  4699. context.beginPath();
  4700. context.moveTo(endX, startY);
  4701. context.arc(endX, startY, 2, 0, 2 * Math.PI);
  4702. context.closePath();
  4703. context.fill();
  4704. context.beginPath();
  4705. context.setFontSize(fontSize);
  4706. context.setFillStyle(item.textColor || '#666666');
  4707. context.fillText(text, endX + 5, startY + fontSize / 2 - 2);
  4708. context.closePath();
  4709. context.stroke();
  4710. context.closePath();
  4711. } else {
  4712. if (i == 0) {
  4713. startX = (item.funnelArea[0] + centerPosition.x) / 2;
  4714. } else {
  4715. startX = (item.funnelArea[0] + series[i - 1].funnelArea[0]) / 2;
  4716. }
  4717. endX = startX - activeWidth * 2;
  4718. startY = item.funnelArea[1] + eachSpacing / 2;
  4719. fontSize = item.textSize || opts.fontSize;
  4720. context.setLineWidth(1 * opts.pixelRatio);
  4721. context.setStrokeStyle(item.color);
  4722. context.setFillStyle(item.color);
  4723. context.beginPath();
  4724. context.moveTo(startX, startY);
  4725. context.lineTo(endX, startY);
  4726. context.stroke();
  4727. context.closePath();
  4728. context.beginPath();
  4729. context.moveTo(endX, startY);
  4730. context.arc(endX, startY, 2, 0, 2 * Math.PI);
  4731. context.closePath();
  4732. context.fill();
  4733. context.beginPath();
  4734. context.setFontSize(fontSize);
  4735. context.setFillStyle(item.textColor || '#666666');
  4736. context.fillText(text, endX - 5 - measureText(text), startY + fontSize / 2 - 2);
  4737. context.closePath();
  4738. context.stroke();
  4739. context.closePath();
  4740. }
  4741. }
  4742. }
  4743. function drawCanvas(opts, context) {
  4744. context.draw();
  4745. }
  4746. var Timing = {
  4747. easeIn: function easeIn(pos) {
  4748. return Math.pow(pos, 3);
  4749. },
  4750. easeOut: function easeOut(pos) {
  4751. return Math.pow(pos - 1, 3) + 1;
  4752. },
  4753. easeInOut: function easeInOut(pos) {
  4754. if ((pos /= 0.5) < 1) {
  4755. return 0.5 * Math.pow(pos, 3);
  4756. } else {
  4757. return 0.5 * (Math.pow(pos - 2, 3) + 2);
  4758. }
  4759. },
  4760. linear: function linear(pos) {
  4761. return pos;
  4762. }
  4763. };
  4764. function Animation(opts) {
  4765. this.isStop = false;
  4766. opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration;
  4767. opts.timing = opts.timing || 'linear';
  4768. var delay = 17;
  4769. function createAnimationFrame() {
  4770. if (typeof setTimeout !== 'undefined') {
  4771. return function(step, delay) {
  4772. setTimeout(function() {
  4773. var timeStamp = +new Date();
  4774. step(timeStamp);
  4775. }, delay);
  4776. };
  4777. } else if (typeof requestAnimationFrame !== 'undefined') {
  4778. return requestAnimationFrame;
  4779. } else {
  4780. return function(step) {
  4781. step(null);
  4782. };
  4783. }
  4784. };
  4785. var animationFrame = createAnimationFrame();
  4786. var startTimeStamp = null;
  4787. var _step = function step(timestamp) {
  4788. if (timestamp === null || this.isStop === true) {
  4789. opts.onProcess && opts.onProcess(1);
  4790. opts.onAnimationFinish && opts.onAnimationFinish();
  4791. return;
  4792. }
  4793. if (startTimeStamp === null) {
  4794. startTimeStamp = timestamp;
  4795. }
  4796. if (timestamp - startTimeStamp < opts.duration) {
  4797. var process = (timestamp - startTimeStamp) / opts.duration;
  4798. var timingFunction = Timing[opts.timing];
  4799. process = timingFunction(process);
  4800. opts.onProcess && opts.onProcess(process);
  4801. animationFrame(_step, delay);
  4802. } else {
  4803. opts.onProcess && opts.onProcess(1);
  4804. opts.onAnimationFinish && opts.onAnimationFinish();
  4805. }
  4806. };
  4807. _step = _step.bind(this);
  4808. animationFrame(_step, delay);
  4809. }
  4810. // stop animation immediately
  4811. // and tigger onAnimationFinish
  4812. Animation.prototype.stop = function() {
  4813. this.isStop = true;
  4814. };
  4815. function drawCharts(type, opts, config, context) {
  4816. var _this = this;
  4817. var series = opts.series;
  4818. var categories = opts.categories;
  4819. series = fillSeries(series, opts, config);
  4820. var duration = opts.animation ? opts.duration : 0;
  4821. _this.animationInstance && _this.animationInstance.stop();
  4822. var seriesMA = null;
  4823. if (type == 'candle') {
  4824. let average = assign({}, opts.extra.candle.average);
  4825. if (average.show) {
  4826. seriesMA = calCandleMA(average.day, average.name, average.color, series[0].data);
  4827. seriesMA = fillSeries(seriesMA, opts, config);
  4828. opts.seriesMA = seriesMA;
  4829. } else if (opts.seriesMA) {
  4830. seriesMA = opts.seriesMA = fillSeries(opts.seriesMA, opts, config);
  4831. } else {
  4832. seriesMA = series;
  4833. }
  4834. } else {
  4835. seriesMA = series;
  4836. }
  4837. /* 过滤掉show=false的series */
  4838. opts._series_ = series = filterSeries(series);
  4839. //重新计算图表区域
  4840. opts.area = new Array(4);
  4841. //复位绘图区域
  4842. for (let j = 0; j < 4; j++) {
  4843. opts.area[j] = opts.padding[j];
  4844. }
  4845. //通过计算三大区域:图例、X轴、Y轴的大小,确定绘图区域
  4846. var _calLegendData = calLegendData(seriesMA, opts, config, opts.chartData),
  4847. legendHeight = _calLegendData.area.wholeHeight,
  4848. legendWidth = _calLegendData.area.wholeWidth;
  4849. switch (opts.legend.position) {
  4850. case 'top':
  4851. opts.area[0] += legendHeight;
  4852. break;
  4853. case 'bottom':
  4854. opts.area[2] += legendHeight;
  4855. break;
  4856. case 'left':
  4857. opts.area[3] += legendWidth;
  4858. break;
  4859. case 'right':
  4860. opts.area[1] += legendWidth;
  4861. break;
  4862. }
  4863. let _calYAxisData = {},
  4864. yAxisWidth = 0;
  4865. if (opts.type === 'line' || opts.type === 'column' || opts.type === 'area' || opts.type === 'mix' || opts.type ===
  4866. 'candle') {
  4867. _calYAxisData = calYAxisData(series, opts, config);
  4868. yAxisWidth = _calYAxisData.yAxisWidth;
  4869. //如果显示Y轴标题
  4870. if (opts.yAxis.showTitle) {
  4871. let maxTitleHeight = 0;
  4872. for (let i = 0; i < opts.yAxis.data.length; i++) {
  4873. maxTitleHeight = Math.max(maxTitleHeight, opts.yAxis.data[i].titleFontSize ? opts.yAxis.data[i]
  4874. .titleFontSize :
  4875. config.fontSize)
  4876. }
  4877. opts.area[0] += (maxTitleHeight + 6) * opts.pixelRatio;
  4878. }
  4879. let rightIndex = 0,
  4880. leftIndex = 0;
  4881. //计算主绘图区域左右位置
  4882. for (let i = 0; i < yAxisWidth.length; i++) {
  4883. if (yAxisWidth[i].position == 'left') {
  4884. if (leftIndex > 0) {
  4885. opts.area[3] += yAxisWidth[i].width + opts.yAxis.padding;
  4886. } else {
  4887. opts.area[3] += yAxisWidth[i].width;
  4888. }
  4889. leftIndex += 1;
  4890. } else {
  4891. if (rightIndex > 0) {
  4892. opts.area[1] += yAxisWidth[i].width + opts.yAxis.padding;
  4893. } else {
  4894. opts.area[1] += yAxisWidth[i].width;
  4895. }
  4896. rightIndex += 1;
  4897. }
  4898. }
  4899. } else {
  4900. config.yAxisWidth = yAxisWidth;
  4901. }
  4902. opts.chartData.yAxisData = _calYAxisData;
  4903. if (opts.categories && opts.categories.length) {
  4904. opts.chartData.xAxisData = getXAxisPoints(opts.categories, opts, config);
  4905. let _calCategoriesData = calCategoriesData(opts.categories, opts, config, opts.chartData.xAxisData.eachSpacing),
  4906. xAxisHeight = _calCategoriesData.xAxisHeight,
  4907. angle = _calCategoriesData.angle;
  4908. config.xAxisHeight = xAxisHeight;
  4909. config._xAxisTextAngle_ = angle;
  4910. opts.area[2] += xAxisHeight;
  4911. opts.chartData.categoriesData = _calCategoriesData;
  4912. } else {
  4913. if (opts.type === 'line' || opts.type === 'area' || opts.type === 'points') {
  4914. opts.chartData.xAxisData = calXAxisData(series, opts, config);
  4915. categories = opts.chartData.xAxisData.rangesFormat;
  4916. let _calCategoriesData = calCategoriesData(categories, opts, config, opts.chartData.xAxisData.eachSpacing),
  4917. xAxisHeight = _calCategoriesData.xAxisHeight,
  4918. angle = _calCategoriesData.angle;
  4919. config.xAxisHeight = xAxisHeight;
  4920. config._xAxisTextAngle_ = angle;
  4921. opts.area[2] += xAxisHeight;
  4922. opts.chartData.categoriesData = _calCategoriesData;
  4923. } else {
  4924. opts.chartData.xAxisData = {
  4925. xAxisPoints: []
  4926. };
  4927. }
  4928. }
  4929. //计算右对齐偏移距离
  4930. if (opts.enableScroll && opts.xAxis.scrollAlign == 'right' && opts._scrollDistance_ === undefined) {
  4931. let offsetLeft = 0,
  4932. xAxisPoints = opts.chartData.xAxisData.xAxisPoints,
  4933. startX = opts.chartData.xAxisData.startX,
  4934. endX = opts.chartData.xAxisData.endX,
  4935. eachSpacing = opts.chartData.xAxisData.eachSpacing;
  4936. let totalWidth = eachSpacing * (xAxisPoints.length - 1);
  4937. let screenWidth = endX - startX;
  4938. offsetLeft = screenWidth - totalWidth;
  4939. _this.scrollOption = {
  4940. currentOffset: offsetLeft,
  4941. startTouchX: offsetLeft,
  4942. distance: 0,
  4943. lastMoveTime: 0
  4944. };
  4945. opts._scrollDistance_ = offsetLeft;
  4946. }
  4947. if (type === 'pie' || type === 'ring' || type === 'rose') {
  4948. config._pieTextMaxLength_ = opts.dataLabel === false ? 0 : getPieTextMaxLength(seriesMA);
  4949. }
  4950. switch (type) {
  4951. case 'word':
  4952. let wordOption = assign({}, {
  4953. type: 'normal',
  4954. autoColors: true
  4955. }, opts.extra.word);
  4956. if (opts.updateData == true || opts.updateData == undefined) {
  4957. opts.chartData.wordCloudData = getWordCloudPoint(opts, wordOption.type);
  4958. }
  4959. this.animationInstance = new Animation({
  4960. timing: 'easeInOut',
  4961. duration: duration,
  4962. onProcess: function(process) {
  4963. context.clearRect(0, 0, opts.width, opts.height);
  4964. if (opts.rotate) {
  4965. contextRotate(context, opts);
  4966. }
  4967. drawWordCloudDataPoints(series, opts, config, context, process);
  4968. drawCanvas(opts, context);
  4969. },
  4970. onAnimationFinish: function onAnimationFinish() {
  4971. _this.event.trigger('renderComplete');
  4972. }
  4973. });
  4974. break;
  4975. case 'map':
  4976. context.clearRect(0, 0, opts.width, opts.height);
  4977. drawMapDataPoints(series, opts, config, context);
  4978. break;
  4979. case 'funnel':
  4980. this.animationInstance = new Animation({
  4981. timing: 'easeInOut',
  4982. duration: duration,
  4983. onProcess: function(process) {
  4984. context.clearRect(0, 0, opts.width, opts.height);
  4985. if (opts.rotate) {
  4986. contextRotate(context, opts);
  4987. }
  4988. opts.chartData.funnelData = drawFunnelDataPoints(series, opts, config, context,
  4989. process);
  4990. drawLegend(opts.series, opts, config, context, opts.chartData);
  4991. drawToolTipBridge(opts, config, context, process);
  4992. drawCanvas(opts, context);
  4993. },
  4994. onAnimationFinish: function onAnimationFinish() {
  4995. _this.event.trigger('renderComplete');
  4996. }
  4997. });
  4998. break;
  4999. case 'line':
  5000. this.animationInstance = new Animation({
  5001. timing: 'easeIn',
  5002. duration: duration,
  5003. onProcess: function onProcess(process) {
  5004. context.clearRect(0, 0, opts.width, opts.height);
  5005. if (opts.rotate) {
  5006. contextRotate(context, opts);
  5007. }
  5008. drawYAxisGrid(categories, opts, config, context);
  5009. drawXAxis(categories, opts, config, context);
  5010. var _drawLineDataPoints = drawLineDataPoints(series, opts, config, context, process),
  5011. xAxisPoints = _drawLineDataPoints.xAxisPoints,
  5012. calPoints = _drawLineDataPoints.calPoints,
  5013. eachSpacing = _drawLineDataPoints.eachSpacing;
  5014. opts.chartData.xAxisPoints = xAxisPoints;
  5015. opts.chartData.calPoints = calPoints;
  5016. opts.chartData.eachSpacing = eachSpacing;
  5017. drawYAxis(series, opts, config, context);
  5018. if (opts.enableMarkLine !== false && process === 1) {
  5019. drawMarkLine(opts, config, context);
  5020. }
  5021. drawLegend(opts.series, opts, config, context, opts.chartData);
  5022. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  5023. drawCanvas(opts, context);
  5024. },
  5025. onAnimationFinish: function onAnimationFinish() {
  5026. _this.event.trigger('renderComplete');
  5027. }
  5028. });
  5029. break;
  5030. case 'mix':
  5031. this.animationInstance = new Animation({
  5032. timing: 'easeIn',
  5033. duration: duration,
  5034. onProcess: function onProcess(process) {
  5035. context.clearRect(0, 0, opts.width, opts.height);
  5036. if (opts.rotate) {
  5037. contextRotate(context, opts);
  5038. }
  5039. drawYAxisGrid(categories, opts, config, context);
  5040. drawXAxis(categories, opts, config, context);
  5041. var _drawMixDataPoints = drawMixDataPoints(series, opts, config, context, process),
  5042. xAxisPoints = _drawMixDataPoints.xAxisPoints,
  5043. calPoints = _drawMixDataPoints.calPoints,
  5044. eachSpacing = _drawMixDataPoints.eachSpacing;
  5045. opts.chartData.xAxisPoints = xAxisPoints;
  5046. opts.chartData.calPoints = calPoints;
  5047. opts.chartData.eachSpacing = eachSpacing;
  5048. drawYAxis(series, opts, config, context);
  5049. if (opts.enableMarkLine !== false && process === 1) {
  5050. drawMarkLine(opts, config, context);
  5051. }
  5052. drawLegend(opts.series, opts, config, context, opts.chartData);
  5053. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  5054. drawCanvas(opts, context);
  5055. },
  5056. onAnimationFinish: function onAnimationFinish() {
  5057. _this.event.trigger('renderComplete');
  5058. }
  5059. });
  5060. break;
  5061. case 'column':
  5062. this.animationInstance = new Animation({
  5063. timing: 'easeIn',
  5064. duration: duration,
  5065. onProcess: function onProcess(process) {
  5066. context.clearRect(0, 0, opts.width, opts.height);
  5067. if (opts.rotate) {
  5068. contextRotate(context, opts);
  5069. }
  5070. drawYAxisGrid(categories, opts, config, context);
  5071. drawXAxis(categories, opts, config, context);
  5072. var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context,
  5073. process),
  5074. xAxisPoints = _drawColumnDataPoints.xAxisPoints,
  5075. calPoints = _drawColumnDataPoints.calPoints,
  5076. eachSpacing = _drawColumnDataPoints.eachSpacing;
  5077. opts.chartData.xAxisPoints = xAxisPoints;
  5078. opts.chartData.calPoints = calPoints;
  5079. opts.chartData.eachSpacing = eachSpacing;
  5080. drawYAxis(series, opts, config, context);
  5081. if (opts.enableMarkLine !== false && process === 1) {
  5082. drawMarkLine(opts, config, context);
  5083. }
  5084. drawLegend(opts.series, opts, config, context, opts.chartData);
  5085. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  5086. drawCanvas(opts, context);
  5087. },
  5088. onAnimationFinish: function onAnimationFinish() {
  5089. _this.event.trigger('renderComplete');
  5090. }
  5091. });
  5092. break;
  5093. // slam TODO myArea
  5094. case 'area':
  5095. this.animationInstance = new Animation({
  5096. timing: 'easeIn',
  5097. duration: duration,
  5098. onProcess: function onProcess(process) {
  5099. context.clearRect(0, 0, opts.width, opts.height);
  5100. if (opts.rotate) {
  5101. contextRotate(context, opts);
  5102. }
  5103. drawYAxisGrid(categories, opts, config, context);
  5104. drawXAxis(categories, opts, config, context);
  5105. var _drawAreaDataPoints = drawAreaDataPoints(series, opts, config, context, process),
  5106. xAxisPoints = _drawAreaDataPoints.xAxisPoints,
  5107. calPoints = _drawAreaDataPoints.calPoints,
  5108. eachSpacing = _drawAreaDataPoints.eachSpacing;
  5109. opts.chartData.xAxisPoints = xAxisPoints;
  5110. opts.chartData.calPoints = calPoints;
  5111. opts.chartData.eachSpacing = eachSpacing;
  5112. drawYAxis(series, opts, config, context);
  5113. if (opts.enableMarkLine !== false && process === 1) {
  5114. drawMarkLine(opts, config, context);
  5115. }
  5116. drawLegend(opts.series, opts, config, context, opts.chartData);
  5117. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  5118. drawCanvas(opts, context);
  5119. },
  5120. onAnimationFinish: function onAnimationFinish() {
  5121. _this.event.trigger('renderComplete');
  5122. }
  5123. });
  5124. break;
  5125. case 'ring':
  5126. case 'pie':
  5127. this.animationInstance = new Animation({
  5128. timing: 'easeInOut',
  5129. duration: duration,
  5130. onProcess: function onProcess(process) {
  5131. context.clearRect(0, 0, opts.width, opts.height);
  5132. if (opts.rotate) {
  5133. contextRotate(context, opts);
  5134. }
  5135. opts.chartData.pieData = drawPieDataPoints(series, opts, config, context, process);
  5136. drawLegend(opts.series, opts, config, context, opts.chartData);
  5137. drawToolTipBridge(opts, config, context, process);
  5138. drawCanvas(opts, context);
  5139. },
  5140. onAnimationFinish: function onAnimationFinish() {
  5141. _this.event.trigger('renderComplete');
  5142. }
  5143. });
  5144. break;
  5145. case 'rose':
  5146. this.animationInstance = new Animation({
  5147. timing: 'easeInOut',
  5148. duration: duration,
  5149. onProcess: function onProcess(process) {
  5150. context.clearRect(0, 0, opts.width, opts.height);
  5151. if (opts.rotate) {
  5152. contextRotate(context, opts);
  5153. }
  5154. opts.chartData.pieData = drawRoseDataPoints(series, opts, config, context, process);
  5155. drawLegend(opts.series, opts, config, context, opts.chartData);
  5156. drawToolTipBridge(opts, config, context, process);
  5157. drawCanvas(opts, context);
  5158. },
  5159. onAnimationFinish: function onAnimationFinish() {
  5160. _this.event.trigger('renderComplete');
  5161. }
  5162. });
  5163. break;
  5164. case 'radar':
  5165. this.animationInstance = new Animation({
  5166. timing: 'easeInOut',
  5167. duration: duration,
  5168. onProcess: function onProcess(process) {
  5169. context.clearRect(0, 0, opts.width, opts.height);
  5170. if (opts.rotate) {
  5171. contextRotate(context, opts);
  5172. }
  5173. opts.chartData.radarData = drawRadarDataPoints(series, opts, config, context, process);
  5174. drawLegend(opts.series, opts, config, context, opts.chartData);
  5175. drawToolTipBridge(opts, config, context, process);
  5176. drawCanvas(opts, context);
  5177. },
  5178. onAnimationFinish: function onAnimationFinish() {
  5179. _this.event.trigger('renderComplete');
  5180. }
  5181. });
  5182. break;
  5183. case 'arcbar':
  5184. this.animationInstance = new Animation({
  5185. timing: 'easeInOut',
  5186. duration: duration,
  5187. onProcess: function onProcess(process) {
  5188. context.clearRect(0, 0, opts.width, opts.height);
  5189. if (opts.rotate) {
  5190. contextRotate(context, opts);
  5191. }
  5192. opts.chartData.arcbarData = drawArcbarDataPoints(series, opts, config, context,
  5193. process);
  5194. drawCanvas(opts, context);
  5195. },
  5196. onAnimationFinish: function onAnimationFinish() {
  5197. _this.event.trigger('renderComplete');
  5198. }
  5199. });
  5200. break;
  5201. /**
  5202. * 自定义arcbar
  5203. * slamb todo
  5204. * */
  5205. case 'myArcbar':
  5206. this.animationInstance = new Animation({
  5207. timing: 'easeInOut',
  5208. duration: duration,
  5209. onProcess: function onProcess(process) {
  5210. context.clearRect(0, 0, opts.width, opts.height);
  5211. if (opts.rotate) {
  5212. contextRotate(context, opts);
  5213. }
  5214. opts.chartData.arcbarData = drawMyArcbarDataPoints(series, opts, config, context,
  5215. process);
  5216. drawCanvas(opts, context);
  5217. },
  5218. onAnimationFinish: function onAnimationFinish() {
  5219. _this.event.trigger('renderComplete');
  5220. }
  5221. });
  5222. break;
  5223. case 'myGradualChangeArcbar':
  5224. this.animationInstance = new Animation({
  5225. timing: 'easeInOut',
  5226. duration: duration,
  5227. onProcess: function onProcess(process) {
  5228. context.clearRect(0, 0, opts.width, opts.height);
  5229. if (opts.rotate) {
  5230. contextRotate(context, opts);
  5231. }
  5232. opts.chartData.arcbarData = drawMyGradualChangeArcbarDataPoints(series, opts, config,
  5233. context,
  5234. process);
  5235. drawCanvas(opts, context);
  5236. },
  5237. onAnimationFinish: function onAnimationFinish() {
  5238. _this.event.trigger('renderComplete');
  5239. }
  5240. });
  5241. break;
  5242. case 'gauge':
  5243. this.animationInstance = new Animation({
  5244. timing: 'easeInOut',
  5245. duration: duration,
  5246. onProcess: function onProcess(process) {
  5247. context.clearRect(0, 0, opts.width, opts.height);
  5248. if (opts.rotate) {
  5249. contextRotate(context, opts);
  5250. }
  5251. opts.chartData.gaugeData = drawGaugeDataPoints(categories, series, opts, config,
  5252. context, process);
  5253. drawCanvas(opts, context);
  5254. },
  5255. onAnimationFinish: function onAnimationFinish() {
  5256. _this.event.trigger('renderComplete');
  5257. }
  5258. });
  5259. break;
  5260. case 'candle':
  5261. this.animationInstance = new Animation({
  5262. timing: 'easeIn',
  5263. duration: duration,
  5264. onProcess: function onProcess(process) {
  5265. context.clearRect(0, 0, opts.width, opts.height);
  5266. if (opts.rotate) {
  5267. contextRotate(context, opts);
  5268. }
  5269. drawYAxisGrid(categories, opts, config, context);
  5270. drawXAxis(categories, opts, config, context);
  5271. var _drawCandleDataPoints = drawCandleDataPoints(series, seriesMA, opts, config,
  5272. context, process),
  5273. xAxisPoints = _drawCandleDataPoints.xAxisPoints,
  5274. calPoints = _drawCandleDataPoints.calPoints,
  5275. eachSpacing = _drawCandleDataPoints.eachSpacing;
  5276. opts.chartData.xAxisPoints = xAxisPoints;
  5277. opts.chartData.calPoints = calPoints;
  5278. opts.chartData.eachSpacing = eachSpacing;
  5279. drawYAxis(series, opts, config, context);
  5280. if (opts.enableMarkLine !== false && process === 1) {
  5281. drawMarkLine(opts, config, context);
  5282. }
  5283. if (seriesMA) {
  5284. drawLegend(seriesMA, opts, config, context, opts.chartData);
  5285. } else {
  5286. drawLegend(opts.series, opts, config, context, opts.chartData);
  5287. }
  5288. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  5289. drawCanvas(opts, context);
  5290. },
  5291. onAnimationFinish: function onAnimationFinish() {
  5292. _this.event.trigger('renderComplete');
  5293. }
  5294. });
  5295. break;
  5296. }
  5297. }
  5298. // simple event implement
  5299. function Event() {
  5300. this.events = {};
  5301. }
  5302. Event.prototype.addEventListener = function(type, listener) {
  5303. this.events[type] = this.events[type] || [];
  5304. this.events[type].push(listener);
  5305. };
  5306. Event.prototype.trigger = function() {
  5307. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  5308. args[_key] = arguments[_key];
  5309. }
  5310. var type = args[0];
  5311. var params = args.slice(1);
  5312. if (!!this.events[type]) {
  5313. this.events[type].forEach(function(listener) {
  5314. try {
  5315. listener.apply(null, params);
  5316. } catch (e) {
  5317. console.error(e);
  5318. }
  5319. });
  5320. }
  5321. };
  5322. var Charts = function Charts(opts) {
  5323. opts.pixelRatio = opts.pixelRatio ? opts.pixelRatio : 1;
  5324. opts.fontSize = opts.fontSize ? opts.fontSize * opts.pixelRatio : 13 * opts.pixelRatio;
  5325. opts.title = assign({}, opts.title);
  5326. opts.subtitle = assign({}, opts.subtitle);
  5327. opts.duration = opts.duration ? opts.duration : 1000;
  5328. opts.yAxis = assign({}, {
  5329. data: [],
  5330. showTitle: false,
  5331. disabled: false,
  5332. disableGrid: false,
  5333. splitNumber: 5,
  5334. gridType: 'solid',
  5335. dashLength: 4 * opts.pixelRatio,
  5336. gridColor: '#cccccc',
  5337. padding: 10,
  5338. fontColor: '#666666'
  5339. }, opts.yAxis);
  5340. opts.yAxis.dashLength *= opts.pixelRatio;
  5341. opts.yAxis.padding *= opts.pixelRatio;
  5342. opts.xAxis = assign({}, {
  5343. rotateLabel: false,
  5344. type: 'calibration',
  5345. gridType: 'solid',
  5346. dashLength: 4,
  5347. scrollAlign: 'left',
  5348. boundaryGap: 'center',
  5349. axisLine: true,
  5350. axisLineColor: '#cccccc'
  5351. }, opts.xAxis);
  5352. opts.xAxis.dashLength *= opts.pixelRatio;
  5353. opts.legend = assign({}, {
  5354. show: true,
  5355. position: 'bottom',
  5356. float: 'center',
  5357. backgroundColor: 'rgba(0,0,0,0)',
  5358. borderColor: 'rgba(0,0,0,0)',
  5359. borderWidth: 0,
  5360. padding: 5,
  5361. margin: 5,
  5362. itemGap: 10,
  5363. fontSize: opts.fontSize,
  5364. lineHeight: opts.fontSize,
  5365. fontColor: '#333333',
  5366. format: {},
  5367. hiddenColor: '#CECECE'
  5368. }, opts.legend);
  5369. opts.legend.borderWidth = opts.legend.borderWidth * opts.pixelRatio;
  5370. opts.legend.itemGap = opts.legend.itemGap * opts.pixelRatio;
  5371. opts.legend.padding = opts.legend.padding * opts.pixelRatio;
  5372. opts.legend.margin = opts.legend.margin * opts.pixelRatio;
  5373. opts.extra = assign({}, opts.extra);
  5374. opts.rotate = opts.rotate ? true : false;
  5375. opts.animation = opts.animation ? true : false;
  5376. opts.rotate = opts.rotate ? true : false;
  5377. let config$$1 = JSON.parse(JSON.stringify(config));
  5378. config$$1.colors = opts.colors ? opts.colors : config$$1.colors;
  5379. config$$1.yAxisTitleWidth = opts.yAxis.disabled !== true && opts.yAxis.title ? config$$1.yAxisTitleWidth : 0;
  5380. if (opts.type == 'pie' || opts.type == 'ring') {
  5381. config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.pie.labelWidth * opts
  5382. .pixelRatio ||
  5383. config$$1.pieChartLinePadding * opts.pixelRatio;
  5384. }
  5385. if (opts.type == 'rose') {
  5386. config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.rose.labelWidth * opts
  5387. .pixelRatio ||
  5388. config$$1.pieChartLinePadding * opts.pixelRatio;
  5389. }
  5390. config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding * opts.pixelRatio;
  5391. config$$1.yAxisSplit = opts.yAxis.splitNumber ? opts.yAxis.splitNumber : config.yAxisSplit;
  5392. //屏幕旋转
  5393. config$$1.rotate = opts.rotate;
  5394. if (opts.rotate) {
  5395. let tempWidth = opts.width;
  5396. let tempHeight = opts.height;
  5397. opts.width = tempHeight;
  5398. opts.height = tempWidth;
  5399. }
  5400. //适配高分屏
  5401. opts.padding = opts.padding ? opts.padding : config$$1.padding;
  5402. for (let i = 0; i < 4; i++) {
  5403. opts.padding[i] *= opts.pixelRatio;
  5404. }
  5405. config$$1.yAxisWidth = config.yAxisWidth * opts.pixelRatio;
  5406. config$$1.xAxisHeight = config.xAxisHeight * opts.pixelRatio;
  5407. if (opts.enableScroll && opts.xAxis.scrollShow) {
  5408. config$$1.xAxisHeight += 6 * opts.pixelRatio;
  5409. }
  5410. config$$1.xAxisLineHeight = config.xAxisLineHeight * opts.pixelRatio;
  5411. config$$1.fontSize = opts.fontSize;
  5412. config$$1.titleFontSize = config.titleFontSize * opts.pixelRatio;
  5413. config$$1.subtitleFontSize = config.subtitleFontSize * opts.pixelRatio;
  5414. config$$1.toolTipPadding = config.toolTipPadding * opts.pixelRatio;
  5415. config$$1.toolTipLineHeight = config.toolTipLineHeight * opts.pixelRatio;
  5416. config$$1.columePadding = config.columePadding * opts.pixelRatio;
  5417. opts.$this = opts.$this ? opts.$this : this;
  5418. this.context = uni.createCanvasContext(opts.canvasId, opts.$this);
  5419. /* 兼容原生H5
  5420. this.context = document.getElementById(opts.canvasId).getContext("2d");
  5421. this.context.setStrokeStyle = function(e){ return this.strokeStyle=e; }
  5422. this.context.setLineWidth = function(e){ return this.lineWidth=e; }
  5423. this.context.setLineCap = function(e){ return this.lineCap=e; }
  5424. this.context.setFontSize = function(e){ return this.font=e+"px sans-serif"; }
  5425. this.context.setFillStyle = function(e){ return this.fillStyle=e; }
  5426. this.context.draw = function(){ }
  5427. */
  5428. opts.chartData = {};
  5429. this.event = new Event();
  5430. this.scrollOption = {
  5431. currentOffset: 0,
  5432. startTouchX: 0,
  5433. distance: 0,
  5434. lastMoveTime: 0
  5435. };
  5436. this.opts = opts;
  5437. this.config = config$$1;
  5438. drawCharts.call(this, opts.type, opts, config$$1, this.context);
  5439. };
  5440. Charts.prototype.updateData = function() {
  5441. let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  5442. this.opts = assign({}, this.opts, data);
  5443. this.opts.updateData = true;
  5444. let scrollPosition = data.scrollPosition || 'current';
  5445. switch (scrollPosition) {
  5446. case 'current':
  5447. this.opts._scrollDistance_ = this.scrollOption.currentOffset;
  5448. break;
  5449. case 'left':
  5450. this.opts._scrollDistance_ = 0;
  5451. this.scrollOption = {
  5452. currentOffset: 0,
  5453. startTouchX: 0,
  5454. distance: 0,
  5455. lastMoveTime: 0
  5456. };
  5457. break;
  5458. case 'right':
  5459. let _calYAxisData = calYAxisData(this.opts.series, this.opts, this.config),
  5460. yAxisWidth = _calYAxisData.yAxisWidth;
  5461. this.config.yAxisWidth = yAxisWidth;
  5462. let offsetLeft = 0;
  5463. let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config),
  5464. xAxisPoints = _getXAxisPoints0.xAxisPoints,
  5465. startX = _getXAxisPoints0.startX,
  5466. endX = _getXAxisPoints0.endX,
  5467. eachSpacing = _getXAxisPoints0.eachSpacing;
  5468. let totalWidth = eachSpacing * (xAxisPoints.length - 1);
  5469. let screenWidth = endX - startX;
  5470. offsetLeft = screenWidth - totalWidth;
  5471. this.scrollOption = {
  5472. currentOffset: offsetLeft,
  5473. startTouchX: offsetLeft,
  5474. distance: 0,
  5475. lastMoveTime: 0
  5476. };
  5477. this.opts._scrollDistance_ = offsetLeft;
  5478. break;
  5479. }
  5480. drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
  5481. };
  5482. Charts.prototype.zoom = function() {
  5483. var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.opts.xAxis.itemCount;
  5484. if (this.opts.enableScroll !== true) {
  5485. console.log('请启用滚动条后使用!')
  5486. return;
  5487. }
  5488. //当前屏幕中间点
  5489. let centerPoint = Math.round(Math.abs(this.scrollOption.currentOffset) / this.opts.chartData.eachSpacing) + Math
  5490. .round(
  5491. this.opts.xAxis.itemCount / 2);
  5492. this.opts.animation = false;
  5493. this.opts.xAxis.itemCount = val.itemCount;
  5494. //重新计算x轴偏移距离
  5495. let _calYAxisData = calYAxisData(this.opts.series, this.opts, this.config),
  5496. yAxisWidth = _calYAxisData.yAxisWidth;
  5497. this.config.yAxisWidth = yAxisWidth;
  5498. let offsetLeft = 0;
  5499. let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config),
  5500. xAxisPoints = _getXAxisPoints0.xAxisPoints,
  5501. startX = _getXAxisPoints0.startX,
  5502. endX = _getXAxisPoints0.endX,
  5503. eachSpacing = _getXAxisPoints0.eachSpacing;
  5504. let centerLeft = eachSpacing * centerPoint;
  5505. let screenWidth = endX - startX;
  5506. let MaxLeft = screenWidth - eachSpacing * (xAxisPoints.length - 1);
  5507. offsetLeft = screenWidth / 2 - centerLeft;
  5508. if (offsetLeft > 0) {
  5509. offsetLeft = 0;
  5510. }
  5511. if (offsetLeft < MaxLeft) {
  5512. offsetLeft = MaxLeft;
  5513. }
  5514. this.scrollOption = {
  5515. currentOffset: offsetLeft,
  5516. startTouchX: offsetLeft,
  5517. distance: 0,
  5518. lastMoveTime: 0
  5519. };
  5520. this.opts._scrollDistance_ = offsetLeft;
  5521. drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
  5522. };
  5523. Charts.prototype.stopAnimation = function() {
  5524. this.animationInstance && this.animationInstance.stop();
  5525. };
  5526. Charts.prototype.addEventListener = function(type, listener) {
  5527. this.event.addEventListener(type, listener);
  5528. };
  5529. Charts.prototype.getCurrentDataIndex = function(e) {
  5530. var touches = null;
  5531. if (e.changedTouches) {
  5532. touches = e.changedTouches[0];
  5533. } else {
  5534. touches = e.mp.changedTouches[0];
  5535. }
  5536. if (touches) {
  5537. let _touches$ = getTouches(touches, this.opts, e);
  5538. if (this.opts.type === 'pie' || this.opts.type === 'ring' || this.opts.type === 'rose') {
  5539. return findPieChartCurrentIndex({
  5540. x: _touches$.x,
  5541. y: _touches$.y
  5542. }, this.opts.chartData.pieData);
  5543. } else if (this.opts.type === 'radar') {
  5544. return findRadarChartCurrentIndex({
  5545. x: _touches$.x,
  5546. y: _touches$.y
  5547. }, this.opts.chartData.radarData, this.opts.categories.length);
  5548. } else if (this.opts.type === 'funnel') {
  5549. return findFunnelChartCurrentIndex({
  5550. x: _touches$.x,
  5551. y: _touches$.y
  5552. }, this.opts.chartData.funnelData);
  5553. } else if (this.opts.type === 'map') {
  5554. return findMapChartCurrentIndex({
  5555. x: _touches$.x,
  5556. y: _touches$.y
  5557. }, this.opts);
  5558. } else if (this.opts.type === 'word') {
  5559. return findWordChartCurrentIndex({
  5560. x: _touches$.x,
  5561. y: _touches$.y
  5562. }, this.opts.chartData.wordCloudData);
  5563. } else {
  5564. return findCurrentIndex({
  5565. x: _touches$.x,
  5566. y: _touches$.y
  5567. }, this.opts.chartData.calPoints, this.opts, this.config, Math.abs(this.scrollOption
  5568. .currentOffset));
  5569. }
  5570. }
  5571. return -1;
  5572. };
  5573. Charts.prototype.getLegendDataIndex = function(e) {
  5574. var touches = null;
  5575. if (e.changedTouches) {
  5576. touches = e.changedTouches[0];
  5577. } else {
  5578. touches = e.mp.changedTouches[0];
  5579. }
  5580. if (touches) {
  5581. let _touches$ = getTouches(touches, this.opts, e);
  5582. return findLegendIndex({
  5583. x: _touches$.x,
  5584. y: _touches$.y
  5585. }, this.opts.chartData.legendData);
  5586. }
  5587. return -1;
  5588. };
  5589. Charts.prototype.touchLegend = function(e) {
  5590. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  5591. var touches = null;
  5592. if (e.changedTouches) {
  5593. touches = e.changedTouches[0];
  5594. } else {
  5595. touches = e.mp.changedTouches[0];
  5596. }
  5597. if (touches) {
  5598. var _touches$ = getTouches(touches, this.opts, e);
  5599. var index = this.getLegendDataIndex(e);
  5600. if (index >= 0) {
  5601. this.opts.series[index].show = !this.opts.series[index].show;
  5602. this.opts.animation = option.animation ? true : false;
  5603. this.opts._scrollDistance_ = this.scrollOption.currentOffset;
  5604. drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
  5605. }
  5606. }
  5607. };
  5608. Charts.prototype.showToolTip = function(e) {
  5609. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  5610. var touches = null;
  5611. if (e.changedTouches) {
  5612. touches = e.changedTouches[0];
  5613. } else {
  5614. touches = e.mp.changedTouches[0];
  5615. }
  5616. if (!touches) {
  5617. console.log("touchError");
  5618. }
  5619. var _touches$ = getTouches(touches, this.opts, e);
  5620. var currentOffset = this.scrollOption.currentOffset;
  5621. var opts = assign({}, this.opts, {
  5622. _scrollDistance_: currentOffset,
  5623. animation: false
  5624. });
  5625. if (this.opts.type === 'line' || this.opts.type === 'area' || this.opts.type === 'column') {
  5626. var index = this.getCurrentDataIndex(e);
  5627. if (index > -1) {
  5628. var seriesData = getSeriesDataItem(this.opts.series, index);
  5629. if (seriesData.length !== 0) {
  5630. var _getToolTipData = getToolTipData(seriesData, this.opts.chartData.calPoints, index, this.opts
  5631. .categories,
  5632. option),
  5633. textList = _getToolTipData.textList,
  5634. offset = _getToolTipData.offset;
  5635. offset.y = _touches$.y;
  5636. opts.tooltip = {
  5637. textList: textList,
  5638. offset: offset,
  5639. option: option,
  5640. index: index
  5641. };
  5642. }
  5643. }
  5644. drawCharts.call(this, opts.type, opts, this.config, this.context);
  5645. }
  5646. if (this.opts.type === 'mix') {
  5647. var index = this.getCurrentDataIndex(e);
  5648. if (index > -1) {
  5649. var currentOffset = this.scrollOption.currentOffset;
  5650. var opts = assign({}, this.opts, {
  5651. _scrollDistance_: currentOffset,
  5652. animation: false
  5653. });
  5654. var seriesData = getSeriesDataItem(this.opts.series, index);
  5655. if (seriesData.length !== 0) {
  5656. var _getMixToolTipData = getMixToolTipData(seriesData, this.opts.chartData.calPoints, index, this
  5657. .opts.categories,
  5658. option),
  5659. textList = _getMixToolTipData.textList,
  5660. offset = _getMixToolTipData.offset;
  5661. offset.y = _touches$.y;
  5662. opts.tooltip = {
  5663. textList: textList,
  5664. offset: offset,
  5665. option: option,
  5666. index: index
  5667. };
  5668. }
  5669. }
  5670. drawCharts.call(this, opts.type, opts, this.config, this.context);
  5671. }
  5672. if (this.opts.type === 'candle') {
  5673. var index = this.getCurrentDataIndex(e);
  5674. if (index > -1) {
  5675. var currentOffset = this.scrollOption.currentOffset;
  5676. var opts = assign({}, this.opts, {
  5677. _scrollDistance_: currentOffset,
  5678. animation: false
  5679. });
  5680. var seriesData = getSeriesDataItem(this.opts.series, index);
  5681. if (seriesData.length !== 0) {
  5682. var _getToolTipData = getCandleToolTipData(this.opts.series[0].data, seriesData, this.opts.chartData
  5683. .calPoints,
  5684. index, this.opts.categories, this.opts.extra.candle, option),
  5685. textList = _getToolTipData.textList,
  5686. offset = _getToolTipData.offset;
  5687. offset.y = _touches$.y;
  5688. opts.tooltip = {
  5689. textList: textList,
  5690. offset: offset,
  5691. option: option,
  5692. index: index
  5693. };
  5694. }
  5695. }
  5696. drawCharts.call(this, opts.type, opts, this.config, this.context);
  5697. }
  5698. if (this.opts.type === 'pie' || this.opts.type === 'ring' || this.opts.type === 'rose' || this.opts.type ===
  5699. 'funnel') {
  5700. var index = this.getCurrentDataIndex(e);
  5701. if (index > -1) {
  5702. var currentOffset = this.scrollOption.currentOffset;
  5703. var opts = assign({}, this.opts, {
  5704. _scrollDistance_: currentOffset,
  5705. animation: false
  5706. });
  5707. var seriesData = this.opts._series_[index];
  5708. var textList = [{
  5709. text: option.format ? option.format(seriesData) : seriesData.name + ': ' + seriesData.data,
  5710. color: seriesData.color
  5711. }];
  5712. var offset = {
  5713. x: _touches$.x,
  5714. y: _touches$.y
  5715. };
  5716. opts.tooltip = {
  5717. textList: textList,
  5718. offset: offset,
  5719. option: option,
  5720. index: index
  5721. };
  5722. }
  5723. drawCharts.call(this, opts.type, opts, this.config, this.context);
  5724. }
  5725. if (this.opts.type === 'map' || this.opts.type === 'word') {
  5726. var index = this.getCurrentDataIndex(e);
  5727. if (index > -1) {
  5728. var currentOffset = this.scrollOption.currentOffset;
  5729. var opts = assign({}, this.opts, {
  5730. _scrollDistance_: currentOffset,
  5731. animation: false
  5732. });
  5733. var seriesData = this.opts._series_[index];
  5734. var textList = [{
  5735. text: option.format ? option.format(seriesData) : seriesData.properties.name,
  5736. color: seriesData.color
  5737. }];
  5738. var offset = {
  5739. x: _touches$.x,
  5740. y: _touches$.y
  5741. };
  5742. opts.tooltip = {
  5743. textList: textList,
  5744. offset: offset,
  5745. option: option,
  5746. index: index
  5747. };
  5748. }
  5749. opts.updateData = false;
  5750. drawCharts.call(this, opts.type, opts, this.config, this.context);
  5751. }
  5752. if (this.opts.type === 'radar') {
  5753. var index = this.getCurrentDataIndex(e);
  5754. if (index > -1) {
  5755. var currentOffset = this.scrollOption.currentOffset;
  5756. var opts = assign({}, this.opts, {
  5757. _scrollDistance_: currentOffset,
  5758. animation: false
  5759. });
  5760. var seriesData = getSeriesDataItem(this.opts.series, index);
  5761. if (seriesData.length !== 0) {
  5762. var textList = seriesData.map(function(item) {
  5763. return {
  5764. text: option.format ? option.format(item) : item.name + ': ' + item.data,
  5765. color: item.color
  5766. };
  5767. });
  5768. var offset = {
  5769. x: _touches$.x,
  5770. y: _touches$.y
  5771. };
  5772. opts.tooltip = {
  5773. textList: textList,
  5774. offset: offset,
  5775. option: option,
  5776. index: index
  5777. };
  5778. }
  5779. }
  5780. drawCharts.call(this, opts.type, opts, this.config, this.context);
  5781. }
  5782. };
  5783. Charts.prototype.translate = function(distance) {
  5784. this.scrollOption = {
  5785. currentOffset: distance,
  5786. startTouchX: distance,
  5787. distance: 0,
  5788. lastMoveTime: 0
  5789. };
  5790. let opts = assign({}, this.opts, {
  5791. _scrollDistance_: distance,
  5792. animation: false
  5793. });
  5794. drawCharts.call(this, this.opts.type, opts, this.config, this.context);
  5795. };
  5796. Charts.prototype.scrollStart = function(e) {
  5797. var touches = null;
  5798. if (e.changedTouches) {
  5799. touches = e.changedTouches[0];
  5800. } else {
  5801. touches = e.mp.changedTouches[0];
  5802. }
  5803. var _touches$ = getTouches(touches, this.opts, e);
  5804. if (touches && this.opts.enableScroll === true) {
  5805. this.scrollOption.startTouchX = _touches$.x;
  5806. }
  5807. };
  5808. Charts.prototype.scroll = function(e) {
  5809. if (this.scrollOption.lastMoveTime === 0) {
  5810. this.scrollOption.lastMoveTime = Date.now();
  5811. }
  5812. let Limit = this.opts.extra.touchMoveLimit || 20;
  5813. let currMoveTime = Date.now();
  5814. let duration = currMoveTime - this.scrollOption.lastMoveTime;
  5815. if (duration < Math.floor(1000 / Limit)) return;
  5816. this.scrollOption.lastMoveTime = currMoveTime;
  5817. var touches = null;
  5818. if (e.changedTouches) {
  5819. touches = e.changedTouches[0];
  5820. } else {
  5821. touches = e.mp.changedTouches[0];
  5822. }
  5823. if (touches && this.opts.enableScroll === true) {
  5824. var _touches$ = getTouches(touches, this.opts, e);
  5825. var _distance;
  5826. _distance = _touches$.x - this.scrollOption.startTouchX;
  5827. var currentOffset = this.scrollOption.currentOffset;
  5828. var validDistance = calValidDistance(this, currentOffset + _distance, this.opts.chartData, this.config, this
  5829. .opts);
  5830. this.scrollOption.distance = _distance = validDistance - currentOffset;
  5831. var opts = assign({}, this.opts, {
  5832. _scrollDistance_: currentOffset + _distance,
  5833. animation: false
  5834. });
  5835. drawCharts.call(this, opts.type, opts, this.config, this.context);
  5836. return currentOffset + _distance;
  5837. }
  5838. };
  5839. Charts.prototype.scrollEnd = function(e) {
  5840. if (this.opts.enableScroll === true) {
  5841. var _scrollOption = this.scrollOption,
  5842. currentOffset = _scrollOption.currentOffset,
  5843. distance = _scrollOption.distance;
  5844. this.scrollOption.currentOffset = currentOffset + distance;
  5845. this.scrollOption.distance = 0;
  5846. }
  5847. };
  5848. if (typeof module === "object" && typeof module.exports === "object") {
  5849. module.exports = Charts;
  5850. //export default Charts;//建议使用nodejs的module导出方式,如报错请使用export方式导出
  5851. }