1
0

echarts-original.js 1.1 MB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933693469356936693769386939694069416942694369446945694669476948694969506951695269536954695569566957695869596960696169626963696469656966696769686969697069716972697369746975697669776978697969806981698269836984698569866987698869896990699169926993699469956996699769986999700070017002700370047005700670077008700970107011701270137014701570167017701870197020702170227023702470257026702770287029703070317032703370347035703670377038703970407041704270437044704570467047704870497050705170527053705470557056705770587059706070617062706370647065706670677068706970707071707270737074707570767077707870797080708170827083708470857086708770887089709070917092709370947095709670977098709971007101710271037104710571067107710871097110711171127113711471157116711771187119712071217122712371247125712671277128712971307131713271337134713571367137713871397140714171427143714471457146714771487149715071517152715371547155715671577158715971607161716271637164716571667167716871697170717171727173717471757176717771787179718071817182718371847185718671877188718971907191719271937194719571967197719871997200720172027203720472057206720772087209721072117212721372147215721672177218721972207221722272237224722572267227722872297230723172327233723472357236723772387239724072417242724372447245724672477248724972507251725272537254725572567257725872597260726172627263726472657266726772687269727072717272727372747275727672777278727972807281728272837284728572867287728872897290729172927293729472957296729772987299730073017302730373047305730673077308730973107311731273137314731573167317731873197320732173227323732473257326732773287329733073317332733373347335733673377338733973407341734273437344734573467347734873497350735173527353735473557356735773587359736073617362736373647365736673677368736973707371737273737374737573767377737873797380738173827383738473857386738773887389739073917392739373947395739673977398739974007401740274037404740574067407740874097410741174127413741474157416741774187419742074217422742374247425742674277428742974307431743274337434743574367437743874397440744174427443744474457446744774487449745074517452745374547455745674577458745974607461746274637464746574667467746874697470747174727473747474757476747774787479748074817482748374847485748674877488748974907491749274937494749574967497749874997500750175027503750475057506750775087509751075117512751375147515751675177518751975207521752275237524752575267527752875297530753175327533753475357536753775387539754075417542754375447545754675477548754975507551755275537554755575567557755875597560756175627563756475657566756775687569757075717572757375747575757675777578757975807581758275837584758575867587758875897590759175927593759475957596759775987599760076017602760376047605760676077608760976107611761276137614761576167617761876197620762176227623762476257626762776287629763076317632763376347635763676377638763976407641764276437644764576467647764876497650765176527653765476557656765776587659766076617662766376647665766676677668766976707671767276737674767576767677767876797680768176827683768476857686768776887689769076917692769376947695769676977698769977007701770277037704770577067707770877097710771177127713771477157716771777187719772077217722772377247725772677277728772977307731773277337734773577367737773877397740774177427743774477457746774777487749775077517752775377547755775677577758775977607761776277637764776577667767776877697770777177727773777477757776777777787779778077817782778377847785778677877788778977907791779277937794779577967797779877997800780178027803780478057806780778087809781078117812781378147815781678177818781978207821782278237824782578267827782878297830783178327833783478357836783778387839784078417842784378447845784678477848784978507851785278537854785578567857785878597860786178627863786478657866786778687869787078717872787378747875787678777878787978807881788278837884788578867887788878897890789178927893789478957896789778987899790079017902790379047905790679077908790979107911791279137914791579167917791879197920792179227923792479257926792779287929793079317932793379347935793679377938793979407941794279437944794579467947794879497950795179527953795479557956795779587959796079617962796379647965796679677968796979707971797279737974797579767977797879797980798179827983798479857986798779887989799079917992799379947995799679977998799980008001800280038004800580068007800880098010801180128013801480158016801780188019802080218022802380248025802680278028802980308031803280338034803580368037803880398040804180428043804480458046804780488049805080518052805380548055805680578058805980608061806280638064806580668067806880698070807180728073807480758076807780788079808080818082808380848085808680878088808980908091809280938094809580968097809880998100810181028103810481058106810781088109811081118112811381148115811681178118811981208121812281238124812581268127812881298130813181328133813481358136813781388139814081418142814381448145814681478148814981508151815281538154815581568157815881598160816181628163816481658166816781688169817081718172817381748175817681778178817981808181818281838184818581868187818881898190819181928193819481958196819781988199820082018202820382048205820682078208820982108211821282138214821582168217821882198220822182228223822482258226822782288229823082318232823382348235823682378238823982408241824282438244824582468247824882498250825182528253825482558256825782588259826082618262826382648265826682678268826982708271827282738274827582768277827882798280828182828283828482858286828782888289829082918292829382948295829682978298829983008301830283038304830583068307830883098310831183128313831483158316831783188319832083218322832383248325832683278328832983308331833283338334833583368337833883398340834183428343834483458346834783488349835083518352835383548355835683578358835983608361836283638364836583668367836883698370837183728373837483758376837783788379838083818382838383848385838683878388838983908391839283938394839583968397839883998400840184028403840484058406840784088409841084118412841384148415841684178418841984208421842284238424842584268427842884298430843184328433843484358436843784388439844084418442844384448445844684478448844984508451845284538454845584568457845884598460846184628463846484658466846784688469847084718472847384748475847684778478847984808481848284838484848584868487848884898490849184928493849484958496849784988499850085018502850385048505850685078508850985108511851285138514851585168517851885198520852185228523852485258526852785288529853085318532853385348535853685378538853985408541854285438544854585468547854885498550855185528553855485558556855785588559856085618562856385648565856685678568856985708571857285738574857585768577857885798580858185828583858485858586858785888589859085918592859385948595859685978598859986008601860286038604860586068607860886098610861186128613861486158616861786188619862086218622862386248625862686278628862986308631863286338634863586368637863886398640864186428643864486458646864786488649865086518652865386548655865686578658865986608661866286638664866586668667866886698670867186728673867486758676867786788679868086818682868386848685868686878688868986908691869286938694869586968697869886998700870187028703870487058706870787088709871087118712871387148715871687178718871987208721872287238724872587268727872887298730873187328733873487358736873787388739874087418742874387448745874687478748874987508751875287538754875587568757875887598760876187628763876487658766876787688769877087718772877387748775877687778778877987808781878287838784878587868787878887898790879187928793879487958796879787988799880088018802880388048805880688078808880988108811881288138814881588168817881888198820882188228823882488258826882788288829883088318832883388348835883688378838883988408841884288438844884588468847884888498850885188528853885488558856885788588859886088618862886388648865886688678868886988708871887288738874887588768877887888798880888188828883888488858886888788888889889088918892889388948895889688978898889989008901890289038904890589068907890889098910891189128913891489158916891789188919892089218922892389248925892689278928892989308931893289338934893589368937893889398940894189428943894489458946894789488949895089518952895389548955895689578958895989608961896289638964896589668967896889698970897189728973897489758976897789788979898089818982898389848985898689878988898989908991899289938994899589968997899889999000900190029003900490059006900790089009901090119012901390149015901690179018901990209021902290239024902590269027902890299030903190329033903490359036903790389039904090419042904390449045904690479048904990509051905290539054905590569057905890599060906190629063906490659066906790689069907090719072907390749075907690779078907990809081908290839084908590869087908890899090909190929093909490959096909790989099910091019102910391049105910691079108910991109111911291139114911591169117911891199120912191229123912491259126912791289129913091319132913391349135913691379138913991409141914291439144914591469147914891499150915191529153915491559156915791589159916091619162916391649165916691679168916991709171917291739174917591769177917891799180918191829183918491859186918791889189919091919192919391949195919691979198919992009201920292039204920592069207920892099210921192129213921492159216921792189219922092219222922392249225922692279228922992309231923292339234923592369237923892399240924192429243924492459246924792489249925092519252925392549255925692579258925992609261926292639264926592669267926892699270927192729273927492759276927792789279928092819282928392849285928692879288928992909291929292939294929592969297929892999300930193029303930493059306930793089309931093119312931393149315931693179318931993209321932293239324932593269327932893299330933193329333933493359336933793389339934093419342934393449345934693479348934993509351935293539354935593569357935893599360936193629363936493659366936793689369937093719372937393749375937693779378937993809381938293839384938593869387938893899390939193929393939493959396939793989399940094019402940394049405940694079408940994109411941294139414941594169417941894199420942194229423942494259426942794289429943094319432943394349435943694379438943994409441944294439444944594469447944894499450945194529453945494559456945794589459946094619462946394649465946694679468946994709471947294739474947594769477947894799480948194829483948494859486948794889489949094919492949394949495949694979498949995009501950295039504950595069507950895099510951195129513951495159516951795189519952095219522952395249525952695279528952995309531953295339534953595369537953895399540954195429543954495459546954795489549955095519552955395549555955695579558955995609561956295639564956595669567956895699570957195729573957495759576957795789579958095819582958395849585958695879588958995909591959295939594959595969597959895999600960196029603960496059606960796089609961096119612961396149615961696179618961996209621962296239624962596269627962896299630963196329633963496359636963796389639964096419642964396449645964696479648964996509651965296539654965596569657965896599660966196629663966496659666966796689669967096719672967396749675967696779678967996809681968296839684968596869687968896899690969196929693969496959696969796989699970097019702970397049705970697079708970997109711971297139714971597169717971897199720972197229723972497259726972797289729973097319732973397349735973697379738973997409741974297439744974597469747974897499750975197529753975497559756975797589759976097619762976397649765976697679768976997709771977297739774977597769777977897799780978197829783978497859786978797889789979097919792979397949795979697979798979998009801980298039804980598069807980898099810981198129813981498159816981798189819982098219822982398249825982698279828982998309831983298339834983598369837983898399840984198429843984498459846984798489849985098519852985398549855985698579858985998609861986298639864986598669867986898699870987198729873987498759876987798789879988098819882988398849885988698879888988998909891989298939894989598969897989898999900990199029903990499059906990799089909991099119912991399149915991699179918991999209921992299239924992599269927992899299930993199329933993499359936993799389939994099419942994399449945994699479948994999509951995299539954995599569957995899599960996199629963996499659966996799689969997099719972997399749975997699779978997999809981998299839984998599869987998899899990999199929993999499959996999799989999100001000110002100031000410005100061000710008100091001010011100121001310014100151001610017100181001910020100211002210023100241002510026100271002810029100301003110032100331003410035100361003710038100391004010041100421004310044100451004610047100481004910050100511005210053100541005510056100571005810059100601006110062100631006410065100661006710068100691007010071100721007310074100751007610077100781007910080100811008210083100841008510086100871008810089100901009110092100931009410095100961009710098100991010010101101021010310104101051010610107101081010910110101111011210113101141011510116101171011810119101201012110122101231012410125101261012710128101291013010131101321013310134101351013610137101381013910140101411014210143101441014510146101471014810149101501015110152101531015410155101561015710158101591016010161101621016310164101651016610167101681016910170101711017210173101741017510176101771017810179101801018110182101831018410185101861018710188101891019010191101921019310194101951019610197101981019910200102011020210203102041020510206102071020810209102101021110212102131021410215102161021710218102191022010221102221022310224102251022610227102281022910230102311023210233102341023510236102371023810239102401024110242102431024410245102461024710248102491025010251102521025310254102551025610257102581025910260102611026210263102641026510266102671026810269102701027110272102731027410275102761027710278102791028010281102821028310284102851028610287102881028910290102911029210293102941029510296102971029810299103001030110302103031030410305103061030710308103091031010311103121031310314103151031610317103181031910320103211032210323103241032510326103271032810329103301033110332103331033410335103361033710338103391034010341103421034310344103451034610347103481034910350103511035210353103541035510356103571035810359103601036110362103631036410365103661036710368103691037010371103721037310374103751037610377103781037910380103811038210383103841038510386103871038810389103901039110392103931039410395103961039710398103991040010401104021040310404104051040610407104081040910410104111041210413104141041510416104171041810419104201042110422104231042410425104261042710428104291043010431104321043310434104351043610437104381043910440104411044210443104441044510446104471044810449104501045110452104531045410455104561045710458104591046010461104621046310464104651046610467104681046910470104711047210473104741047510476104771047810479104801048110482104831048410485104861048710488104891049010491104921049310494104951049610497104981049910500105011050210503105041050510506105071050810509105101051110512105131051410515105161051710518105191052010521105221052310524105251052610527105281052910530105311053210533105341053510536105371053810539105401054110542105431054410545105461054710548105491055010551105521055310554105551055610557105581055910560105611056210563105641056510566105671056810569105701057110572105731057410575105761057710578105791058010581105821058310584105851058610587105881058910590105911059210593105941059510596105971059810599106001060110602106031060410605106061060710608106091061010611106121061310614106151061610617106181061910620106211062210623106241062510626106271062810629106301063110632106331063410635106361063710638106391064010641106421064310644106451064610647106481064910650106511065210653106541065510656106571065810659106601066110662106631066410665106661066710668106691067010671106721067310674106751067610677106781067910680106811068210683106841068510686106871068810689106901069110692106931069410695106961069710698106991070010701107021070310704107051070610707107081070910710107111071210713107141071510716107171071810719107201072110722107231072410725107261072710728107291073010731107321073310734107351073610737107381073910740107411074210743107441074510746107471074810749107501075110752107531075410755107561075710758107591076010761107621076310764107651076610767107681076910770107711077210773107741077510776107771077810779107801078110782107831078410785107861078710788107891079010791107921079310794107951079610797107981079910800108011080210803108041080510806108071080810809108101081110812108131081410815108161081710818108191082010821108221082310824108251082610827108281082910830108311083210833108341083510836108371083810839108401084110842108431084410845108461084710848108491085010851108521085310854108551085610857108581085910860108611086210863108641086510866108671086810869108701087110872108731087410875108761087710878108791088010881108821088310884108851088610887108881088910890108911089210893108941089510896108971089810899109001090110902109031090410905109061090710908109091091010911109121091310914109151091610917109181091910920109211092210923109241092510926109271092810929109301093110932109331093410935109361093710938109391094010941109421094310944109451094610947109481094910950109511095210953109541095510956109571095810959109601096110962109631096410965109661096710968109691097010971109721097310974109751097610977109781097910980109811098210983109841098510986109871098810989109901099110992109931099410995109961099710998109991100011001110021100311004110051100611007110081100911010110111101211013110141101511016110171101811019110201102111022110231102411025110261102711028110291103011031110321103311034110351103611037110381103911040110411104211043110441104511046110471104811049110501105111052110531105411055110561105711058110591106011061110621106311064110651106611067110681106911070110711107211073110741107511076110771107811079110801108111082110831108411085110861108711088110891109011091110921109311094110951109611097110981109911100111011110211103111041110511106111071110811109111101111111112111131111411115111161111711118111191112011121111221112311124111251112611127111281112911130111311113211133111341113511136111371113811139111401114111142111431114411145111461114711148111491115011151111521115311154111551115611157111581115911160111611116211163111641116511166111671116811169111701117111172111731117411175111761117711178111791118011181111821118311184111851118611187111881118911190111911119211193111941119511196111971119811199112001120111202112031120411205112061120711208112091121011211112121121311214112151121611217112181121911220112211122211223112241122511226112271122811229112301123111232112331123411235112361123711238112391124011241112421124311244112451124611247112481124911250112511125211253112541125511256112571125811259112601126111262112631126411265112661126711268112691127011271112721127311274112751127611277112781127911280112811128211283112841128511286112871128811289112901129111292112931129411295112961129711298112991130011301113021130311304113051130611307113081130911310113111131211313113141131511316113171131811319113201132111322113231132411325113261132711328113291133011331113321133311334113351133611337113381133911340113411134211343113441134511346113471134811349113501135111352113531135411355113561135711358113591136011361113621136311364113651136611367113681136911370113711137211373113741137511376113771137811379113801138111382113831138411385113861138711388113891139011391113921139311394113951139611397113981139911400114011140211403114041140511406114071140811409114101141111412114131141411415114161141711418114191142011421114221142311424114251142611427114281142911430114311143211433114341143511436114371143811439114401144111442114431144411445114461144711448114491145011451114521145311454114551145611457114581145911460114611146211463114641146511466114671146811469114701147111472114731147411475114761147711478114791148011481114821148311484114851148611487114881148911490114911149211493114941149511496114971149811499115001150111502115031150411505115061150711508115091151011511115121151311514115151151611517115181151911520115211152211523115241152511526115271152811529115301153111532115331153411535115361153711538115391154011541115421154311544115451154611547115481154911550115511155211553115541155511556115571155811559115601156111562115631156411565115661156711568115691157011571115721157311574115751157611577115781157911580115811158211583115841158511586115871158811589115901159111592115931159411595115961159711598115991160011601116021160311604116051160611607116081160911610116111161211613116141161511616116171161811619116201162111622116231162411625116261162711628116291163011631116321163311634116351163611637116381163911640116411164211643116441164511646116471164811649116501165111652116531165411655116561165711658116591166011661116621166311664116651166611667116681166911670116711167211673116741167511676116771167811679116801168111682116831168411685116861168711688116891169011691116921169311694116951169611697116981169911700117011170211703117041170511706117071170811709117101171111712117131171411715117161171711718117191172011721117221172311724117251172611727117281172911730117311173211733117341173511736117371173811739117401174111742117431174411745117461174711748117491175011751117521175311754117551175611757117581175911760117611176211763117641176511766117671176811769117701177111772117731177411775117761177711778117791178011781117821178311784117851178611787117881178911790117911179211793117941179511796117971179811799118001180111802118031180411805118061180711808118091181011811118121181311814118151181611817118181181911820118211182211823118241182511826118271182811829118301183111832118331183411835118361183711838118391184011841118421184311844118451184611847118481184911850118511185211853118541185511856118571185811859118601186111862118631186411865118661186711868118691187011871118721187311874118751187611877118781187911880118811188211883118841188511886118871188811889118901189111892118931189411895118961189711898118991190011901119021190311904119051190611907119081190911910119111191211913119141191511916119171191811919119201192111922119231192411925119261192711928119291193011931119321193311934119351193611937119381193911940119411194211943119441194511946119471194811949119501195111952119531195411955119561195711958119591196011961119621196311964119651196611967119681196911970119711197211973119741197511976119771197811979119801198111982119831198411985119861198711988119891199011991119921199311994119951199611997119981199912000120011200212003120041200512006120071200812009120101201112012120131201412015120161201712018120191202012021120221202312024120251202612027120281202912030120311203212033120341203512036120371203812039120401204112042120431204412045120461204712048120491205012051120521205312054120551205612057120581205912060120611206212063120641206512066120671206812069120701207112072120731207412075120761207712078120791208012081120821208312084120851208612087120881208912090120911209212093120941209512096120971209812099121001210112102121031210412105121061210712108121091211012111121121211312114121151211612117121181211912120121211212212123121241212512126121271212812129121301213112132121331213412135121361213712138121391214012141121421214312144121451214612147121481214912150121511215212153121541215512156121571215812159121601216112162121631216412165121661216712168121691217012171121721217312174121751217612177121781217912180121811218212183121841218512186121871218812189121901219112192121931219412195121961219712198121991220012201122021220312204122051220612207122081220912210122111221212213122141221512216122171221812219122201222112222122231222412225122261222712228122291223012231122321223312234122351223612237122381223912240122411224212243122441224512246122471224812249122501225112252122531225412255122561225712258122591226012261122621226312264122651226612267122681226912270122711227212273122741227512276122771227812279122801228112282122831228412285122861228712288122891229012291122921229312294122951229612297122981229912300123011230212303123041230512306123071230812309123101231112312123131231412315123161231712318123191232012321123221232312324123251232612327123281232912330123311233212333123341233512336123371233812339123401234112342123431234412345123461234712348123491235012351123521235312354123551235612357123581235912360123611236212363123641236512366123671236812369123701237112372123731237412375123761237712378123791238012381123821238312384123851238612387123881238912390123911239212393123941239512396123971239812399124001240112402124031240412405124061240712408124091241012411124121241312414124151241612417124181241912420124211242212423124241242512426124271242812429124301243112432124331243412435124361243712438124391244012441124421244312444124451244612447124481244912450124511245212453124541245512456124571245812459124601246112462124631246412465124661246712468124691247012471124721247312474124751247612477124781247912480124811248212483124841248512486124871248812489124901249112492124931249412495124961249712498124991250012501125021250312504125051250612507125081250912510125111251212513125141251512516125171251812519125201252112522125231252412525125261252712528125291253012531125321253312534125351253612537125381253912540125411254212543125441254512546125471254812549125501255112552125531255412555125561255712558125591256012561125621256312564125651256612567125681256912570125711257212573125741257512576125771257812579125801258112582125831258412585125861258712588125891259012591125921259312594125951259612597125981259912600126011260212603126041260512606126071260812609126101261112612126131261412615126161261712618126191262012621126221262312624126251262612627126281262912630126311263212633126341263512636126371263812639126401264112642126431264412645126461264712648126491265012651126521265312654126551265612657126581265912660126611266212663126641266512666126671266812669126701267112672126731267412675126761267712678126791268012681126821268312684126851268612687126881268912690126911269212693126941269512696126971269812699127001270112702127031270412705127061270712708127091271012711127121271312714127151271612717127181271912720127211272212723127241272512726127271272812729127301273112732127331273412735127361273712738127391274012741127421274312744127451274612747127481274912750127511275212753127541275512756127571275812759127601276112762127631276412765127661276712768127691277012771127721277312774127751277612777127781277912780127811278212783127841278512786127871278812789127901279112792127931279412795127961279712798127991280012801128021280312804128051280612807128081280912810128111281212813128141281512816128171281812819128201282112822128231282412825128261282712828128291283012831128321283312834128351283612837128381283912840128411284212843128441284512846128471284812849128501285112852128531285412855128561285712858128591286012861128621286312864128651286612867128681286912870128711287212873128741287512876128771287812879128801288112882128831288412885128861288712888128891289012891128921289312894128951289612897128981289912900129011290212903129041290512906129071290812909129101291112912129131291412915129161291712918129191292012921129221292312924129251292612927129281292912930129311293212933129341293512936129371293812939129401294112942129431294412945129461294712948129491295012951129521295312954129551295612957129581295912960129611296212963129641296512966129671296812969129701297112972129731297412975129761297712978129791298012981129821298312984129851298612987129881298912990129911299212993129941299512996129971299812999130001300113002130031300413005130061300713008130091301013011130121301313014130151301613017130181301913020130211302213023130241302513026130271302813029130301303113032130331303413035130361303713038130391304013041130421304313044130451304613047130481304913050130511305213053130541305513056130571305813059130601306113062130631306413065130661306713068130691307013071130721307313074130751307613077130781307913080130811308213083130841308513086130871308813089130901309113092130931309413095130961309713098130991310013101131021310313104131051310613107131081310913110131111311213113131141311513116131171311813119131201312113122131231312413125131261312713128131291313013131131321313313134131351313613137131381313913140131411314213143131441314513146131471314813149131501315113152131531315413155131561315713158131591316013161131621316313164131651316613167131681316913170131711317213173131741317513176131771317813179131801318113182131831318413185131861318713188131891319013191131921319313194131951319613197131981319913200132011320213203132041320513206132071320813209132101321113212132131321413215132161321713218132191322013221132221322313224132251322613227132281322913230132311323213233132341323513236132371323813239132401324113242132431324413245132461324713248132491325013251132521325313254132551325613257132581325913260132611326213263132641326513266132671326813269132701327113272132731327413275132761327713278132791328013281132821328313284132851328613287132881328913290132911329213293132941329513296132971329813299133001330113302133031330413305133061330713308133091331013311133121331313314133151331613317133181331913320133211332213323133241332513326133271332813329133301333113332133331333413335133361333713338133391334013341133421334313344133451334613347133481334913350133511335213353133541335513356133571335813359133601336113362133631336413365133661336713368133691337013371133721337313374133751337613377133781337913380133811338213383133841338513386133871338813389133901339113392133931339413395133961339713398133991340013401134021340313404134051340613407134081340913410134111341213413134141341513416134171341813419134201342113422134231342413425134261342713428134291343013431134321343313434134351343613437134381343913440134411344213443134441344513446134471344813449134501345113452134531345413455134561345713458134591346013461134621346313464134651346613467134681346913470134711347213473134741347513476134771347813479134801348113482134831348413485134861348713488134891349013491134921349313494134951349613497134981349913500135011350213503135041350513506135071350813509135101351113512135131351413515135161351713518135191352013521135221352313524135251352613527135281352913530135311353213533135341353513536135371353813539135401354113542135431354413545135461354713548135491355013551135521355313554135551355613557135581355913560135611356213563135641356513566135671356813569135701357113572135731357413575135761357713578135791358013581135821358313584135851358613587135881358913590135911359213593135941359513596135971359813599136001360113602136031360413605136061360713608136091361013611136121361313614136151361613617136181361913620136211362213623136241362513626136271362813629136301363113632136331363413635136361363713638136391364013641136421364313644136451364613647136481364913650136511365213653136541365513656136571365813659136601366113662136631366413665136661366713668136691367013671136721367313674136751367613677136781367913680136811368213683136841368513686136871368813689136901369113692136931369413695136961369713698136991370013701137021370313704137051370613707137081370913710137111371213713137141371513716137171371813719137201372113722137231372413725137261372713728137291373013731137321373313734137351373613737137381373913740137411374213743137441374513746137471374813749137501375113752137531375413755137561375713758137591376013761137621376313764137651376613767137681376913770137711377213773137741377513776137771377813779137801378113782137831378413785137861378713788137891379013791137921379313794137951379613797137981379913800138011380213803138041380513806138071380813809138101381113812138131381413815138161381713818138191382013821138221382313824138251382613827138281382913830138311383213833138341383513836138371383813839138401384113842138431384413845138461384713848138491385013851138521385313854138551385613857138581385913860138611386213863138641386513866138671386813869138701387113872138731387413875138761387713878138791388013881138821388313884138851388613887138881388913890138911389213893138941389513896138971389813899139001390113902139031390413905139061390713908139091391013911139121391313914139151391613917139181391913920139211392213923139241392513926139271392813929139301393113932139331393413935139361393713938139391394013941139421394313944139451394613947139481394913950139511395213953139541395513956139571395813959139601396113962139631396413965139661396713968139691397013971139721397313974139751397613977139781397913980139811398213983139841398513986139871398813989139901399113992139931399413995139961399713998139991400014001140021400314004140051400614007140081400914010140111401214013140141401514016140171401814019140201402114022140231402414025140261402714028140291403014031140321403314034140351403614037140381403914040140411404214043140441404514046140471404814049140501405114052140531405414055140561405714058140591406014061140621406314064140651406614067140681406914070140711407214073140741407514076140771407814079140801408114082140831408414085140861408714088140891409014091140921409314094140951409614097140981409914100141011410214103141041410514106141071410814109141101411114112141131411414115141161411714118141191412014121141221412314124141251412614127141281412914130141311413214133141341413514136141371413814139141401414114142141431414414145141461414714148141491415014151141521415314154141551415614157141581415914160141611416214163141641416514166141671416814169141701417114172141731417414175141761417714178141791418014181141821418314184141851418614187141881418914190141911419214193141941419514196141971419814199142001420114202142031420414205142061420714208142091421014211142121421314214142151421614217142181421914220142211422214223142241422514226142271422814229142301423114232142331423414235142361423714238142391424014241142421424314244142451424614247142481424914250142511425214253142541425514256142571425814259142601426114262142631426414265142661426714268142691427014271142721427314274142751427614277142781427914280142811428214283142841428514286142871428814289142901429114292142931429414295142961429714298142991430014301143021430314304143051430614307143081430914310143111431214313143141431514316143171431814319143201432114322143231432414325143261432714328143291433014331143321433314334143351433614337143381433914340143411434214343143441434514346143471434814349143501435114352143531435414355143561435714358143591436014361143621436314364143651436614367143681436914370143711437214373143741437514376143771437814379143801438114382143831438414385143861438714388143891439014391143921439314394143951439614397143981439914400144011440214403144041440514406144071440814409144101441114412144131441414415144161441714418144191442014421144221442314424144251442614427144281442914430144311443214433144341443514436144371443814439144401444114442144431444414445144461444714448144491445014451144521445314454144551445614457144581445914460144611446214463144641446514466144671446814469144701447114472144731447414475144761447714478144791448014481144821448314484144851448614487144881448914490144911449214493144941449514496144971449814499145001450114502145031450414505145061450714508145091451014511145121451314514145151451614517145181451914520145211452214523145241452514526145271452814529145301453114532145331453414535145361453714538145391454014541145421454314544145451454614547145481454914550145511455214553145541455514556145571455814559145601456114562145631456414565145661456714568145691457014571145721457314574145751457614577145781457914580145811458214583145841458514586145871458814589145901459114592145931459414595145961459714598145991460014601146021460314604146051460614607146081460914610146111461214613146141461514616146171461814619146201462114622146231462414625146261462714628146291463014631146321463314634146351463614637146381463914640146411464214643146441464514646146471464814649146501465114652146531465414655146561465714658146591466014661146621466314664146651466614667146681466914670146711467214673146741467514676146771467814679146801468114682146831468414685146861468714688146891469014691146921469314694146951469614697146981469914700147011470214703147041470514706147071470814709147101471114712147131471414715147161471714718147191472014721147221472314724147251472614727147281472914730147311473214733147341473514736147371473814739147401474114742147431474414745147461474714748147491475014751147521475314754147551475614757147581475914760147611476214763147641476514766147671476814769147701477114772147731477414775147761477714778147791478014781147821478314784147851478614787147881478914790147911479214793147941479514796147971479814799148001480114802148031480414805148061480714808148091481014811148121481314814148151481614817148181481914820148211482214823148241482514826148271482814829148301483114832148331483414835148361483714838148391484014841148421484314844148451484614847148481484914850148511485214853148541485514856148571485814859148601486114862148631486414865148661486714868148691487014871148721487314874148751487614877148781487914880148811488214883148841488514886148871488814889148901489114892148931489414895148961489714898148991490014901149021490314904149051490614907149081490914910149111491214913149141491514916149171491814919149201492114922149231492414925149261492714928149291493014931149321493314934149351493614937149381493914940149411494214943149441494514946149471494814949149501495114952149531495414955149561495714958149591496014961149621496314964149651496614967149681496914970149711497214973149741497514976149771497814979149801498114982149831498414985149861498714988149891499014991149921499314994149951499614997149981499915000150011500215003150041500515006150071500815009150101501115012150131501415015150161501715018150191502015021150221502315024150251502615027150281502915030150311503215033150341503515036150371503815039150401504115042150431504415045150461504715048150491505015051150521505315054150551505615057150581505915060150611506215063150641506515066150671506815069150701507115072150731507415075150761507715078150791508015081150821508315084150851508615087150881508915090150911509215093150941509515096150971509815099151001510115102151031510415105151061510715108151091511015111151121511315114151151511615117151181511915120151211512215123151241512515126151271512815129151301513115132151331513415135151361513715138151391514015141151421514315144151451514615147151481514915150151511515215153151541515515156151571515815159151601516115162151631516415165151661516715168151691517015171151721517315174151751517615177151781517915180151811518215183151841518515186151871518815189151901519115192151931519415195151961519715198151991520015201152021520315204152051520615207152081520915210152111521215213152141521515216152171521815219152201522115222152231522415225152261522715228152291523015231152321523315234152351523615237152381523915240152411524215243152441524515246152471524815249152501525115252152531525415255152561525715258152591526015261152621526315264152651526615267152681526915270152711527215273152741527515276152771527815279152801528115282152831528415285152861528715288152891529015291152921529315294152951529615297152981529915300153011530215303153041530515306153071530815309153101531115312153131531415315153161531715318153191532015321153221532315324153251532615327153281532915330153311533215333153341533515336153371533815339153401534115342153431534415345153461534715348153491535015351153521535315354153551535615357153581535915360153611536215363153641536515366153671536815369153701537115372153731537415375153761537715378153791538015381153821538315384153851538615387153881538915390153911539215393153941539515396153971539815399154001540115402154031540415405154061540715408154091541015411154121541315414154151541615417154181541915420154211542215423154241542515426154271542815429154301543115432154331543415435154361543715438154391544015441154421544315444154451544615447154481544915450154511545215453154541545515456154571545815459154601546115462154631546415465154661546715468154691547015471154721547315474154751547615477154781547915480154811548215483154841548515486154871548815489154901549115492154931549415495154961549715498154991550015501155021550315504155051550615507155081550915510155111551215513155141551515516155171551815519155201552115522155231552415525155261552715528155291553015531155321553315534155351553615537155381553915540155411554215543155441554515546155471554815549155501555115552155531555415555155561555715558155591556015561155621556315564155651556615567155681556915570155711557215573155741557515576155771557815579155801558115582155831558415585155861558715588155891559015591155921559315594155951559615597155981559915600156011560215603156041560515606156071560815609156101561115612156131561415615156161561715618156191562015621156221562315624156251562615627156281562915630156311563215633156341563515636156371563815639156401564115642156431564415645156461564715648156491565015651156521565315654156551565615657156581565915660156611566215663156641566515666156671566815669156701567115672156731567415675156761567715678156791568015681156821568315684156851568615687156881568915690156911569215693156941569515696156971569815699157001570115702157031570415705157061570715708157091571015711157121571315714157151571615717157181571915720157211572215723157241572515726157271572815729157301573115732157331573415735157361573715738157391574015741157421574315744157451574615747157481574915750157511575215753157541575515756157571575815759157601576115762157631576415765157661576715768157691577015771157721577315774157751577615777157781577915780157811578215783157841578515786157871578815789157901579115792157931579415795157961579715798157991580015801158021580315804158051580615807158081580915810158111581215813158141581515816158171581815819158201582115822158231582415825158261582715828158291583015831158321583315834158351583615837158381583915840158411584215843158441584515846158471584815849158501585115852158531585415855158561585715858158591586015861158621586315864158651586615867158681586915870158711587215873158741587515876158771587815879158801588115882158831588415885158861588715888158891589015891158921589315894158951589615897158981589915900159011590215903159041590515906159071590815909159101591115912159131591415915159161591715918159191592015921159221592315924159251592615927159281592915930159311593215933159341593515936159371593815939159401594115942159431594415945159461594715948159491595015951159521595315954159551595615957159581595915960159611596215963159641596515966159671596815969159701597115972159731597415975159761597715978159791598015981159821598315984159851598615987159881598915990159911599215993159941599515996159971599815999160001600116002160031600416005160061600716008160091601016011160121601316014160151601616017160181601916020160211602216023160241602516026160271602816029160301603116032160331603416035160361603716038160391604016041160421604316044160451604616047160481604916050160511605216053160541605516056160571605816059160601606116062160631606416065160661606716068160691607016071160721607316074160751607616077160781607916080160811608216083160841608516086160871608816089160901609116092160931609416095160961609716098160991610016101161021610316104161051610616107161081610916110161111611216113161141611516116161171611816119161201612116122161231612416125161261612716128161291613016131161321613316134161351613616137161381613916140161411614216143161441614516146161471614816149161501615116152161531615416155161561615716158161591616016161161621616316164161651616616167161681616916170161711617216173161741617516176161771617816179161801618116182161831618416185161861618716188161891619016191161921619316194161951619616197161981619916200162011620216203162041620516206162071620816209162101621116212162131621416215162161621716218162191622016221162221622316224162251622616227162281622916230162311623216233162341623516236162371623816239162401624116242162431624416245162461624716248162491625016251162521625316254162551625616257162581625916260162611626216263162641626516266162671626816269162701627116272162731627416275162761627716278162791628016281162821628316284162851628616287162881628916290162911629216293162941629516296162971629816299163001630116302163031630416305163061630716308163091631016311163121631316314163151631616317163181631916320163211632216323163241632516326163271632816329163301633116332163331633416335163361633716338163391634016341163421634316344163451634616347163481634916350163511635216353163541635516356163571635816359163601636116362163631636416365163661636716368163691637016371163721637316374163751637616377163781637916380163811638216383163841638516386163871638816389163901639116392163931639416395163961639716398163991640016401164021640316404164051640616407164081640916410164111641216413164141641516416164171641816419164201642116422164231642416425164261642716428164291643016431164321643316434164351643616437164381643916440164411644216443164441644516446164471644816449164501645116452164531645416455164561645716458164591646016461164621646316464164651646616467164681646916470164711647216473164741647516476164771647816479164801648116482164831648416485164861648716488164891649016491164921649316494164951649616497164981649916500165011650216503165041650516506165071650816509165101651116512165131651416515165161651716518165191652016521165221652316524165251652616527165281652916530165311653216533165341653516536165371653816539165401654116542165431654416545165461654716548165491655016551165521655316554165551655616557165581655916560165611656216563165641656516566165671656816569165701657116572165731657416575165761657716578165791658016581165821658316584165851658616587165881658916590165911659216593165941659516596165971659816599166001660116602166031660416605166061660716608166091661016611166121661316614166151661616617166181661916620166211662216623166241662516626166271662816629166301663116632166331663416635166361663716638166391664016641166421664316644166451664616647166481664916650166511665216653166541665516656166571665816659166601666116662166631666416665166661666716668166691667016671166721667316674166751667616677166781667916680166811668216683166841668516686166871668816689166901669116692166931669416695166961669716698166991670016701167021670316704167051670616707167081670916710167111671216713167141671516716167171671816719167201672116722167231672416725167261672716728167291673016731167321673316734167351673616737167381673916740167411674216743167441674516746167471674816749167501675116752167531675416755167561675716758167591676016761167621676316764167651676616767167681676916770167711677216773167741677516776167771677816779167801678116782167831678416785167861678716788167891679016791167921679316794167951679616797167981679916800168011680216803168041680516806168071680816809168101681116812168131681416815168161681716818168191682016821168221682316824168251682616827168281682916830168311683216833168341683516836168371683816839168401684116842168431684416845168461684716848168491685016851168521685316854168551685616857168581685916860168611686216863168641686516866168671686816869168701687116872168731687416875168761687716878168791688016881168821688316884168851688616887168881688916890168911689216893168941689516896168971689816899169001690116902169031690416905169061690716908169091691016911169121691316914169151691616917169181691916920169211692216923169241692516926169271692816929169301693116932169331693416935169361693716938169391694016941169421694316944169451694616947169481694916950169511695216953169541695516956169571695816959169601696116962169631696416965169661696716968169691697016971169721697316974169751697616977169781697916980169811698216983169841698516986169871698816989169901699116992169931699416995169961699716998169991700017001170021700317004170051700617007170081700917010170111701217013170141701517016170171701817019170201702117022170231702417025170261702717028170291703017031170321703317034170351703617037170381703917040170411704217043170441704517046170471704817049170501705117052170531705417055170561705717058170591706017061170621706317064170651706617067170681706917070170711707217073170741707517076170771707817079170801708117082170831708417085170861708717088170891709017091170921709317094170951709617097170981709917100171011710217103171041710517106171071710817109171101711117112171131711417115171161711717118171191712017121171221712317124171251712617127171281712917130171311713217133171341713517136171371713817139171401714117142171431714417145171461714717148171491715017151171521715317154171551715617157171581715917160171611716217163171641716517166171671716817169171701717117172171731717417175171761717717178171791718017181171821718317184171851718617187171881718917190171911719217193171941719517196171971719817199172001720117202172031720417205172061720717208172091721017211172121721317214172151721617217172181721917220172211722217223172241722517226172271722817229172301723117232172331723417235172361723717238172391724017241172421724317244172451724617247172481724917250172511725217253172541725517256172571725817259172601726117262172631726417265172661726717268172691727017271172721727317274172751727617277172781727917280172811728217283172841728517286172871728817289172901729117292172931729417295172961729717298172991730017301173021730317304173051730617307173081730917310173111731217313173141731517316173171731817319173201732117322173231732417325173261732717328173291733017331173321733317334173351733617337173381733917340173411734217343173441734517346173471734817349173501735117352173531735417355173561735717358173591736017361173621736317364173651736617367173681736917370173711737217373173741737517376173771737817379173801738117382173831738417385173861738717388173891739017391173921739317394173951739617397173981739917400174011740217403174041740517406174071740817409174101741117412174131741417415174161741717418174191742017421174221742317424174251742617427174281742917430174311743217433174341743517436174371743817439174401744117442174431744417445174461744717448174491745017451174521745317454174551745617457174581745917460174611746217463174641746517466174671746817469174701747117472174731747417475174761747717478174791748017481174821748317484174851748617487174881748917490174911749217493174941749517496174971749817499175001750117502175031750417505175061750717508175091751017511175121751317514175151751617517175181751917520175211752217523175241752517526175271752817529175301753117532175331753417535175361753717538175391754017541175421754317544175451754617547175481754917550175511755217553175541755517556175571755817559175601756117562175631756417565175661756717568175691757017571175721757317574175751757617577175781757917580175811758217583175841758517586175871758817589175901759117592175931759417595175961759717598175991760017601176021760317604176051760617607176081760917610176111761217613176141761517616176171761817619176201762117622176231762417625176261762717628176291763017631176321763317634176351763617637176381763917640176411764217643176441764517646176471764817649176501765117652176531765417655176561765717658176591766017661176621766317664176651766617667176681766917670176711767217673176741767517676176771767817679176801768117682176831768417685176861768717688176891769017691176921769317694176951769617697176981769917700177011770217703177041770517706177071770817709177101771117712177131771417715177161771717718177191772017721177221772317724177251772617727177281772917730177311773217733177341773517736177371773817739177401774117742177431774417745177461774717748177491775017751177521775317754177551775617757177581775917760177611776217763177641776517766177671776817769177701777117772177731777417775177761777717778177791778017781177821778317784177851778617787177881778917790177911779217793177941779517796177971779817799178001780117802178031780417805178061780717808178091781017811178121781317814178151781617817178181781917820178211782217823178241782517826178271782817829178301783117832178331783417835178361783717838178391784017841178421784317844178451784617847178481784917850178511785217853178541785517856178571785817859178601786117862178631786417865178661786717868178691787017871178721787317874178751787617877178781787917880178811788217883178841788517886178871788817889178901789117892178931789417895178961789717898178991790017901179021790317904179051790617907179081790917910179111791217913179141791517916179171791817919179201792117922179231792417925179261792717928179291793017931179321793317934179351793617937179381793917940179411794217943179441794517946179471794817949179501795117952179531795417955179561795717958179591796017961179621796317964179651796617967179681796917970179711797217973179741797517976179771797817979179801798117982179831798417985179861798717988179891799017991179921799317994179951799617997179981799918000180011800218003180041800518006180071800818009180101801118012180131801418015180161801718018180191802018021180221802318024180251802618027180281802918030180311803218033180341803518036180371803818039180401804118042180431804418045180461804718048180491805018051180521805318054180551805618057180581805918060180611806218063180641806518066180671806818069180701807118072180731807418075180761807718078180791808018081180821808318084180851808618087180881808918090180911809218093180941809518096180971809818099181001810118102181031810418105181061810718108181091811018111181121811318114181151811618117181181811918120181211812218123181241812518126181271812818129181301813118132181331813418135181361813718138181391814018141181421814318144181451814618147181481814918150181511815218153181541815518156181571815818159181601816118162181631816418165181661816718168181691817018171181721817318174181751817618177181781817918180181811818218183181841818518186181871818818189181901819118192181931819418195181961819718198181991820018201182021820318204182051820618207182081820918210182111821218213182141821518216182171821818219182201822118222182231822418225182261822718228182291823018231182321823318234182351823618237182381823918240182411824218243182441824518246182471824818249182501825118252182531825418255182561825718258182591826018261182621826318264182651826618267182681826918270182711827218273182741827518276182771827818279182801828118282182831828418285182861828718288182891829018291182921829318294182951829618297182981829918300183011830218303183041830518306183071830818309183101831118312183131831418315183161831718318183191832018321183221832318324183251832618327183281832918330183311833218333183341833518336183371833818339183401834118342183431834418345183461834718348183491835018351183521835318354183551835618357183581835918360183611836218363183641836518366183671836818369183701837118372183731837418375183761837718378183791838018381183821838318384183851838618387183881838918390183911839218393183941839518396183971839818399184001840118402184031840418405184061840718408184091841018411184121841318414184151841618417184181841918420184211842218423184241842518426184271842818429184301843118432184331843418435184361843718438184391844018441184421844318444184451844618447184481844918450184511845218453184541845518456184571845818459184601846118462184631846418465184661846718468184691847018471184721847318474184751847618477184781847918480184811848218483184841848518486184871848818489184901849118492184931849418495184961849718498184991850018501185021850318504185051850618507185081850918510185111851218513185141851518516185171851818519185201852118522185231852418525185261852718528185291853018531185321853318534185351853618537185381853918540185411854218543185441854518546185471854818549185501855118552185531855418555185561855718558185591856018561185621856318564185651856618567185681856918570185711857218573185741857518576185771857818579185801858118582185831858418585185861858718588185891859018591185921859318594185951859618597185981859918600186011860218603186041860518606186071860818609186101861118612186131861418615186161861718618186191862018621186221862318624186251862618627186281862918630186311863218633186341863518636186371863818639186401864118642186431864418645186461864718648186491865018651186521865318654186551865618657186581865918660186611866218663186641866518666186671866818669186701867118672186731867418675186761867718678186791868018681186821868318684186851868618687186881868918690186911869218693186941869518696186971869818699187001870118702187031870418705187061870718708187091871018711187121871318714187151871618717187181871918720187211872218723187241872518726187271872818729187301873118732187331873418735187361873718738187391874018741187421874318744187451874618747187481874918750187511875218753187541875518756187571875818759187601876118762187631876418765187661876718768187691877018771187721877318774187751877618777187781877918780187811878218783187841878518786187871878818789187901879118792187931879418795187961879718798187991880018801188021880318804188051880618807188081880918810188111881218813188141881518816188171881818819188201882118822188231882418825188261882718828188291883018831188321883318834188351883618837188381883918840188411884218843188441884518846188471884818849188501885118852188531885418855188561885718858188591886018861188621886318864188651886618867188681886918870188711887218873188741887518876188771887818879188801888118882188831888418885188861888718888188891889018891188921889318894188951889618897188981889918900189011890218903189041890518906189071890818909189101891118912189131891418915189161891718918189191892018921189221892318924189251892618927189281892918930189311893218933189341893518936189371893818939189401894118942189431894418945189461894718948189491895018951189521895318954189551895618957189581895918960189611896218963189641896518966189671896818969189701897118972189731897418975189761897718978189791898018981189821898318984189851898618987189881898918990189911899218993189941899518996189971899818999190001900119002190031900419005190061900719008190091901019011190121901319014190151901619017190181901919020190211902219023190241902519026190271902819029190301903119032190331903419035190361903719038190391904019041190421904319044190451904619047190481904919050190511905219053190541905519056190571905819059190601906119062190631906419065190661906719068190691907019071190721907319074190751907619077190781907919080190811908219083190841908519086190871908819089190901909119092190931909419095190961909719098190991910019101191021910319104191051910619107191081910919110191111911219113191141911519116191171911819119191201912119122191231912419125191261912719128191291913019131191321913319134191351913619137191381913919140191411914219143191441914519146191471914819149191501915119152191531915419155191561915719158191591916019161191621916319164191651916619167191681916919170191711917219173191741917519176191771917819179191801918119182191831918419185191861918719188191891919019191191921919319194191951919619197191981919919200192011920219203192041920519206192071920819209192101921119212192131921419215192161921719218192191922019221192221922319224192251922619227192281922919230192311923219233192341923519236192371923819239192401924119242192431924419245192461924719248192491925019251192521925319254192551925619257192581925919260192611926219263192641926519266192671926819269192701927119272192731927419275192761927719278192791928019281192821928319284192851928619287192881928919290192911929219293192941929519296192971929819299193001930119302193031930419305193061930719308193091931019311193121931319314193151931619317193181931919320193211932219323193241932519326193271932819329193301933119332193331933419335193361933719338193391934019341193421934319344193451934619347193481934919350193511935219353193541935519356193571935819359193601936119362193631936419365193661936719368193691937019371193721937319374193751937619377193781937919380193811938219383193841938519386193871938819389193901939119392193931939419395193961939719398193991940019401194021940319404194051940619407194081940919410194111941219413194141941519416194171941819419194201942119422194231942419425194261942719428194291943019431194321943319434194351943619437194381943919440194411944219443194441944519446194471944819449194501945119452194531945419455194561945719458194591946019461194621946319464194651946619467194681946919470194711947219473194741947519476194771947819479194801948119482194831948419485194861948719488194891949019491194921949319494194951949619497194981949919500195011950219503195041950519506195071950819509195101951119512195131951419515195161951719518195191952019521195221952319524195251952619527195281952919530195311953219533195341953519536195371953819539195401954119542195431954419545195461954719548195491955019551195521955319554195551955619557195581955919560195611956219563195641956519566195671956819569195701957119572195731957419575195761957719578195791958019581195821958319584195851958619587195881958919590195911959219593195941959519596195971959819599196001960119602196031960419605196061960719608196091961019611196121961319614196151961619617196181961919620196211962219623196241962519626196271962819629196301963119632196331963419635196361963719638196391964019641196421964319644196451964619647196481964919650196511965219653196541965519656196571965819659196601966119662196631966419665196661966719668196691967019671196721967319674196751967619677196781967919680196811968219683196841968519686196871968819689196901969119692196931969419695196961969719698196991970019701197021970319704197051970619707197081970919710197111971219713197141971519716197171971819719197201972119722197231972419725197261972719728197291973019731197321973319734197351973619737197381973919740197411974219743197441974519746197471974819749197501975119752197531975419755197561975719758197591976019761197621976319764197651976619767197681976919770197711977219773197741977519776197771977819779197801978119782197831978419785197861978719788197891979019791197921979319794197951979619797197981979919800198011980219803198041980519806198071980819809198101981119812198131981419815198161981719818198191982019821198221982319824198251982619827198281982919830198311983219833198341983519836198371983819839198401984119842198431984419845198461984719848198491985019851198521985319854198551985619857198581985919860198611986219863198641986519866198671986819869198701987119872198731987419875198761987719878198791988019881198821988319884198851988619887198881988919890198911989219893198941989519896198971989819899199001990119902199031990419905199061990719908199091991019911199121991319914199151991619917199181991919920199211992219923199241992519926199271992819929199301993119932199331993419935199361993719938199391994019941199421994319944199451994619947199481994919950199511995219953199541995519956199571995819959199601996119962199631996419965199661996719968199691997019971199721997319974199751997619977199781997919980199811998219983199841998519986199871998819989199901999119992199931999419995199961999719998199992000020001200022000320004200052000620007200082000920010200112001220013200142001520016200172001820019200202002120022200232002420025200262002720028200292003020031200322003320034200352003620037200382003920040200412004220043200442004520046200472004820049200502005120052200532005420055200562005720058200592006020061200622006320064200652006620067200682006920070200712007220073200742007520076200772007820079200802008120082200832008420085200862008720088200892009020091200922009320094200952009620097200982009920100201012010220103201042010520106201072010820109201102011120112201132011420115201162011720118201192012020121201222012320124201252012620127201282012920130201312013220133201342013520136201372013820139201402014120142201432014420145201462014720148201492015020151201522015320154201552015620157201582015920160201612016220163201642016520166201672016820169201702017120172201732017420175201762017720178201792018020181201822018320184201852018620187201882018920190201912019220193201942019520196201972019820199202002020120202202032020420205202062020720208202092021020211202122021320214202152021620217202182021920220202212022220223202242022520226202272022820229202302023120232202332023420235202362023720238202392024020241202422024320244202452024620247202482024920250202512025220253202542025520256202572025820259202602026120262202632026420265202662026720268202692027020271202722027320274202752027620277202782027920280202812028220283202842028520286202872028820289202902029120292202932029420295202962029720298202992030020301203022030320304203052030620307203082030920310203112031220313203142031520316203172031820319203202032120322203232032420325203262032720328203292033020331203322033320334203352033620337203382033920340203412034220343203442034520346203472034820349203502035120352203532035420355203562035720358203592036020361203622036320364203652036620367203682036920370203712037220373203742037520376203772037820379203802038120382203832038420385203862038720388203892039020391203922039320394203952039620397203982039920400204012040220403204042040520406204072040820409204102041120412204132041420415204162041720418204192042020421204222042320424204252042620427204282042920430204312043220433204342043520436204372043820439204402044120442204432044420445204462044720448204492045020451204522045320454204552045620457204582045920460204612046220463204642046520466204672046820469204702047120472204732047420475204762047720478204792048020481204822048320484204852048620487204882048920490204912049220493204942049520496204972049820499205002050120502205032050420505205062050720508205092051020511205122051320514205152051620517205182051920520205212052220523205242052520526205272052820529205302053120532205332053420535205362053720538205392054020541205422054320544205452054620547205482054920550205512055220553205542055520556205572055820559205602056120562205632056420565205662056720568205692057020571205722057320574205752057620577205782057920580205812058220583205842058520586205872058820589205902059120592205932059420595205962059720598205992060020601206022060320604206052060620607206082060920610206112061220613206142061520616206172061820619206202062120622206232062420625206262062720628206292063020631206322063320634206352063620637206382063920640206412064220643206442064520646206472064820649206502065120652206532065420655206562065720658206592066020661206622066320664206652066620667206682066920670206712067220673206742067520676206772067820679206802068120682206832068420685206862068720688206892069020691206922069320694206952069620697206982069920700207012070220703207042070520706207072070820709207102071120712207132071420715207162071720718207192072020721207222072320724207252072620727207282072920730207312073220733207342073520736207372073820739207402074120742207432074420745207462074720748207492075020751207522075320754207552075620757207582075920760207612076220763207642076520766207672076820769207702077120772207732077420775207762077720778207792078020781207822078320784207852078620787207882078920790207912079220793207942079520796207972079820799208002080120802208032080420805208062080720808208092081020811208122081320814208152081620817208182081920820208212082220823208242082520826208272082820829208302083120832208332083420835208362083720838208392084020841208422084320844208452084620847208482084920850208512085220853208542085520856208572085820859208602086120862208632086420865208662086720868208692087020871208722087320874208752087620877208782087920880208812088220883208842088520886208872088820889208902089120892208932089420895208962089720898208992090020901209022090320904209052090620907209082090920910209112091220913209142091520916209172091820919209202092120922209232092420925209262092720928209292093020931209322093320934209352093620937209382093920940209412094220943209442094520946209472094820949209502095120952209532095420955209562095720958209592096020961209622096320964209652096620967209682096920970209712097220973209742097520976209772097820979209802098120982209832098420985209862098720988209892099020991209922099320994209952099620997209982099921000210012100221003210042100521006210072100821009210102101121012210132101421015210162101721018210192102021021210222102321024210252102621027210282102921030210312103221033210342103521036210372103821039210402104121042210432104421045210462104721048210492105021051210522105321054210552105621057210582105921060210612106221063210642106521066210672106821069210702107121072210732107421075210762107721078210792108021081210822108321084210852108621087210882108921090210912109221093210942109521096210972109821099211002110121102211032110421105211062110721108211092111021111211122111321114211152111621117211182111921120211212112221123211242112521126211272112821129211302113121132211332113421135211362113721138211392114021141211422114321144211452114621147211482114921150211512115221153211542115521156211572115821159211602116121162211632116421165211662116721168211692117021171211722117321174211752117621177211782117921180211812118221183211842118521186211872118821189211902119121192211932119421195211962119721198211992120021201212022120321204212052120621207212082120921210212112121221213212142121521216212172121821219212202122121222212232122421225212262122721228212292123021231212322123321234212352123621237212382123921240212412124221243212442124521246212472124821249212502125121252212532125421255212562125721258212592126021261212622126321264212652126621267212682126921270212712127221273212742127521276212772127821279212802128121282212832128421285212862128721288212892129021291212922129321294212952129621297212982129921300213012130221303213042130521306213072130821309213102131121312213132131421315213162131721318213192132021321213222132321324213252132621327213282132921330213312133221333213342133521336213372133821339213402134121342213432134421345213462134721348213492135021351213522135321354213552135621357213582135921360213612136221363213642136521366213672136821369213702137121372213732137421375213762137721378213792138021381213822138321384213852138621387213882138921390213912139221393213942139521396213972139821399214002140121402214032140421405214062140721408214092141021411214122141321414214152141621417214182141921420214212142221423214242142521426214272142821429214302143121432214332143421435214362143721438214392144021441214422144321444214452144621447214482144921450214512145221453214542145521456214572145821459214602146121462214632146421465214662146721468214692147021471214722147321474214752147621477214782147921480214812148221483214842148521486214872148821489214902149121492214932149421495214962149721498214992150021501215022150321504215052150621507215082150921510215112151221513215142151521516215172151821519215202152121522215232152421525215262152721528215292153021531215322153321534215352153621537215382153921540215412154221543215442154521546215472154821549215502155121552215532155421555215562155721558215592156021561215622156321564215652156621567215682156921570215712157221573215742157521576215772157821579215802158121582215832158421585215862158721588215892159021591215922159321594215952159621597215982159921600216012160221603216042160521606216072160821609216102161121612216132161421615216162161721618216192162021621216222162321624216252162621627216282162921630216312163221633216342163521636216372163821639216402164121642216432164421645216462164721648216492165021651216522165321654216552165621657216582165921660216612166221663216642166521666216672166821669216702167121672216732167421675216762167721678216792168021681216822168321684216852168621687216882168921690216912169221693216942169521696216972169821699217002170121702217032170421705217062170721708217092171021711217122171321714217152171621717217182171921720217212172221723217242172521726217272172821729217302173121732217332173421735217362173721738217392174021741217422174321744217452174621747217482174921750217512175221753217542175521756217572175821759217602176121762217632176421765217662176721768217692177021771217722177321774217752177621777217782177921780217812178221783217842178521786217872178821789217902179121792217932179421795217962179721798217992180021801218022180321804218052180621807218082180921810218112181221813218142181521816218172181821819218202182121822218232182421825218262182721828218292183021831218322183321834218352183621837218382183921840218412184221843218442184521846218472184821849218502185121852218532185421855218562185721858218592186021861218622186321864218652186621867218682186921870218712187221873218742187521876218772187821879218802188121882218832188421885218862188721888218892189021891218922189321894218952189621897218982189921900219012190221903219042190521906219072190821909219102191121912219132191421915219162191721918219192192021921219222192321924219252192621927219282192921930219312193221933219342193521936219372193821939219402194121942219432194421945219462194721948219492195021951219522195321954219552195621957219582195921960219612196221963219642196521966219672196821969219702197121972219732197421975219762197721978219792198021981219822198321984219852198621987219882198921990219912199221993219942199521996219972199821999220002200122002220032200422005220062200722008220092201022011220122201322014220152201622017220182201922020220212202222023220242202522026220272202822029220302203122032220332203422035220362203722038220392204022041220422204322044220452204622047220482204922050220512205222053220542205522056220572205822059220602206122062220632206422065220662206722068220692207022071220722207322074220752207622077220782207922080220812208222083220842208522086220872208822089220902209122092220932209422095220962209722098220992210022101221022210322104221052210622107221082210922110221112211222113221142211522116221172211822119221202212122122221232212422125221262212722128221292213022131221322213322134221352213622137221382213922140221412214222143221442214522146221472214822149221502215122152221532215422155221562215722158221592216022161221622216322164221652216622167221682216922170221712217222173221742217522176221772217822179221802218122182221832218422185221862218722188221892219022191221922219322194221952219622197221982219922200222012220222203222042220522206222072220822209222102221122212222132221422215222162221722218222192222022221222222222322224222252222622227222282222922230222312223222233222342223522236222372223822239222402224122242222432224422245222462224722248222492225022251222522225322254222552225622257222582225922260222612226222263222642226522266222672226822269222702227122272222732227422275222762227722278222792228022281222822228322284222852228622287222882228922290222912229222293222942229522296222972229822299223002230122302223032230422305223062230722308223092231022311223122231322314223152231622317223182231922320223212232222323223242232522326223272232822329223302233122332223332233422335223362233722338223392234022341223422234322344223452234622347223482234922350223512235222353223542235522356223572235822359223602236122362223632236422365223662236722368223692237022371223722237322374223752237622377223782237922380223812238222383223842238522386223872238822389223902239122392223932239422395223962239722398223992240022401224022240322404224052240622407224082240922410224112241222413224142241522416224172241822419224202242122422224232242422425224262242722428224292243022431224322243322434224352243622437224382243922440224412244222443224442244522446224472244822449224502245122452224532245422455224562245722458224592246022461224622246322464224652246622467224682246922470224712247222473224742247522476224772247822479224802248122482224832248422485224862248722488224892249022491224922249322494224952249622497224982249922500225012250222503225042250522506225072250822509225102251122512225132251422515225162251722518225192252022521225222252322524225252252622527225282252922530225312253222533225342253522536225372253822539225402254122542225432254422545225462254722548225492255022551225522255322554225552255622557225582255922560225612256222563225642256522566225672256822569225702257122572225732257422575225762257722578225792258022581225822258322584225852258622587225882258922590225912259222593225942259522596225972259822599226002260122602226032260422605226062260722608226092261022611226122261322614226152261622617226182261922620226212262222623226242262522626226272262822629226302263122632226332263422635226362263722638226392264022641226422264322644226452264622647226482264922650226512265222653226542265522656226572265822659226602266122662226632266422665226662266722668226692267022671226722267322674226752267622677226782267922680226812268222683226842268522686226872268822689226902269122692226932269422695226962269722698226992270022701227022270322704227052270622707227082270922710227112271222713227142271522716227172271822719227202272122722227232272422725227262272722728227292273022731227322273322734227352273622737227382273922740227412274222743227442274522746227472274822749227502275122752227532275422755227562275722758227592276022761227622276322764227652276622767227682276922770227712277222773227742277522776227772277822779227802278122782227832278422785227862278722788227892279022791227922279322794227952279622797227982279922800228012280222803228042280522806228072280822809228102281122812228132281422815228162281722818228192282022821228222282322824228252282622827228282282922830228312283222833228342283522836228372283822839228402284122842228432284422845228462284722848228492285022851228522285322854228552285622857228582285922860228612286222863228642286522866228672286822869228702287122872228732287422875228762287722878228792288022881228822288322884228852288622887228882288922890228912289222893228942289522896228972289822899229002290122902229032290422905229062290722908229092291022911229122291322914229152291622917229182291922920229212292222923229242292522926229272292822929229302293122932229332293422935229362293722938229392294022941229422294322944229452294622947229482294922950229512295222953229542295522956229572295822959229602296122962229632296422965229662296722968229692297022971229722297322974229752297622977229782297922980229812298222983229842298522986229872298822989229902299122992229932299422995229962299722998229992300023001230022300323004230052300623007230082300923010230112301223013230142301523016230172301823019230202302123022230232302423025230262302723028230292303023031230322303323034230352303623037230382303923040230412304223043230442304523046230472304823049230502305123052230532305423055230562305723058230592306023061230622306323064230652306623067230682306923070230712307223073230742307523076230772307823079230802308123082230832308423085230862308723088230892309023091230922309323094230952309623097230982309923100231012310223103231042310523106231072310823109231102311123112231132311423115231162311723118231192312023121231222312323124231252312623127231282312923130231312313223133231342313523136231372313823139231402314123142231432314423145231462314723148231492315023151231522315323154231552315623157231582315923160231612316223163231642316523166231672316823169231702317123172231732317423175231762317723178231792318023181231822318323184231852318623187231882318923190231912319223193231942319523196231972319823199232002320123202232032320423205232062320723208232092321023211232122321323214232152321623217232182321923220232212322223223232242322523226232272322823229232302323123232232332323423235232362323723238232392324023241232422324323244232452324623247232482324923250232512325223253232542325523256232572325823259232602326123262232632326423265232662326723268232692327023271232722327323274232752327623277232782327923280232812328223283232842328523286232872328823289232902329123292232932329423295232962329723298232992330023301233022330323304233052330623307233082330923310233112331223313233142331523316233172331823319233202332123322233232332423325233262332723328233292333023331233322333323334233352333623337233382333923340233412334223343233442334523346233472334823349233502335123352233532335423355233562335723358233592336023361233622336323364233652336623367233682336923370233712337223373233742337523376233772337823379233802338123382233832338423385233862338723388233892339023391233922339323394233952339623397233982339923400234012340223403234042340523406234072340823409234102341123412234132341423415234162341723418234192342023421234222342323424234252342623427234282342923430234312343223433234342343523436234372343823439234402344123442234432344423445234462344723448234492345023451234522345323454234552345623457234582345923460234612346223463234642346523466234672346823469234702347123472234732347423475234762347723478234792348023481234822348323484234852348623487234882348923490234912349223493234942349523496234972349823499235002350123502235032350423505235062350723508235092351023511235122351323514235152351623517235182351923520235212352223523235242352523526235272352823529235302353123532235332353423535235362353723538235392354023541235422354323544235452354623547235482354923550235512355223553235542355523556235572355823559235602356123562235632356423565235662356723568235692357023571235722357323574235752357623577235782357923580235812358223583235842358523586235872358823589235902359123592235932359423595235962359723598235992360023601236022360323604236052360623607236082360923610236112361223613236142361523616236172361823619236202362123622236232362423625236262362723628236292363023631236322363323634236352363623637236382363923640236412364223643236442364523646236472364823649236502365123652236532365423655236562365723658236592366023661236622366323664236652366623667236682366923670236712367223673236742367523676236772367823679236802368123682236832368423685236862368723688236892369023691236922369323694236952369623697236982369923700237012370223703237042370523706237072370823709237102371123712237132371423715237162371723718237192372023721237222372323724237252372623727237282372923730237312373223733237342373523736237372373823739237402374123742237432374423745237462374723748237492375023751237522375323754237552375623757237582375923760237612376223763237642376523766237672376823769237702377123772237732377423775237762377723778237792378023781237822378323784237852378623787237882378923790237912379223793237942379523796237972379823799238002380123802238032380423805238062380723808238092381023811238122381323814238152381623817238182381923820238212382223823238242382523826238272382823829238302383123832238332383423835238362383723838238392384023841238422384323844238452384623847238482384923850238512385223853238542385523856238572385823859238602386123862238632386423865238662386723868238692387023871238722387323874238752387623877238782387923880238812388223883238842388523886238872388823889238902389123892238932389423895238962389723898238992390023901239022390323904239052390623907239082390923910239112391223913239142391523916239172391823919239202392123922239232392423925239262392723928239292393023931239322393323934239352393623937239382393923940239412394223943239442394523946239472394823949239502395123952239532395423955239562395723958239592396023961239622396323964239652396623967239682396923970239712397223973239742397523976239772397823979239802398123982239832398423985239862398723988239892399023991239922399323994239952399623997239982399924000240012400224003240042400524006240072400824009240102401124012240132401424015240162401724018240192402024021240222402324024240252402624027240282402924030240312403224033240342403524036240372403824039240402404124042240432404424045240462404724048240492405024051240522405324054240552405624057240582405924060240612406224063240642406524066240672406824069240702407124072240732407424075240762407724078240792408024081240822408324084240852408624087240882408924090240912409224093240942409524096240972409824099241002410124102241032410424105241062410724108241092411024111241122411324114241152411624117241182411924120241212412224123241242412524126241272412824129241302413124132241332413424135241362413724138241392414024141241422414324144241452414624147241482414924150241512415224153241542415524156241572415824159241602416124162241632416424165241662416724168241692417024171241722417324174241752417624177241782417924180241812418224183241842418524186241872418824189241902419124192241932419424195241962419724198241992420024201242022420324204242052420624207242082420924210242112421224213242142421524216242172421824219242202422124222242232422424225242262422724228242292423024231242322423324234242352423624237242382423924240242412424224243242442424524246242472424824249242502425124252242532425424255242562425724258242592426024261242622426324264242652426624267242682426924270242712427224273242742427524276242772427824279242802428124282242832428424285242862428724288242892429024291242922429324294242952429624297242982429924300243012430224303243042430524306243072430824309243102431124312243132431424315243162431724318243192432024321243222432324324243252432624327243282432924330243312433224333243342433524336243372433824339243402434124342243432434424345243462434724348243492435024351243522435324354243552435624357243582435924360243612436224363243642436524366243672436824369243702437124372243732437424375243762437724378243792438024381243822438324384243852438624387243882438924390243912439224393243942439524396243972439824399244002440124402244032440424405244062440724408244092441024411244122441324414244152441624417244182441924420244212442224423244242442524426244272442824429244302443124432244332443424435244362443724438244392444024441244422444324444244452444624447244482444924450244512445224453244542445524456244572445824459244602446124462244632446424465244662446724468244692447024471244722447324474244752447624477244782447924480244812448224483244842448524486244872448824489244902449124492244932449424495244962449724498244992450024501245022450324504245052450624507245082450924510245112451224513245142451524516245172451824519245202452124522245232452424525245262452724528245292453024531245322453324534245352453624537245382453924540245412454224543245442454524546245472454824549245502455124552245532455424555245562455724558245592456024561245622456324564245652456624567245682456924570245712457224573245742457524576245772457824579245802458124582245832458424585245862458724588245892459024591245922459324594245952459624597245982459924600246012460224603246042460524606246072460824609246102461124612246132461424615246162461724618246192462024621246222462324624246252462624627246282462924630246312463224633246342463524636246372463824639246402464124642246432464424645246462464724648246492465024651246522465324654246552465624657246582465924660246612466224663246642466524666246672466824669246702467124672246732467424675246762467724678246792468024681246822468324684246852468624687246882468924690246912469224693246942469524696246972469824699247002470124702247032470424705247062470724708247092471024711247122471324714247152471624717247182471924720247212472224723247242472524726247272472824729247302473124732247332473424735247362473724738247392474024741247422474324744247452474624747247482474924750247512475224753247542475524756247572475824759247602476124762247632476424765247662476724768247692477024771247722477324774247752477624777247782477924780247812478224783247842478524786247872478824789247902479124792247932479424795247962479724798247992480024801248022480324804248052480624807248082480924810248112481224813248142481524816248172481824819248202482124822248232482424825248262482724828248292483024831248322483324834248352483624837248382483924840248412484224843248442484524846248472484824849248502485124852248532485424855248562485724858248592486024861248622486324864248652486624867248682486924870248712487224873248742487524876248772487824879248802488124882248832488424885248862488724888248892489024891248922489324894248952489624897248982489924900249012490224903249042490524906249072490824909249102491124912249132491424915249162491724918249192492024921249222492324924249252492624927249282492924930249312493224933249342493524936249372493824939249402494124942249432494424945249462494724948249492495024951249522495324954249552495624957249582495924960249612496224963249642496524966249672496824969249702497124972249732497424975249762497724978249792498024981249822498324984249852498624987249882498924990249912499224993249942499524996249972499824999250002500125002250032500425005250062500725008250092501025011250122501325014250152501625017250182501925020250212502225023250242502525026250272502825029250302503125032250332503425035250362503725038250392504025041250422504325044250452504625047250482504925050250512505225053250542505525056250572505825059250602506125062250632506425065250662506725068250692507025071250722507325074250752507625077250782507925080250812508225083250842508525086250872508825089250902509125092250932509425095250962509725098250992510025101251022510325104251052510625107251082510925110251112511225113251142511525116251172511825119251202512125122251232512425125251262512725128251292513025131251322513325134251352513625137251382513925140251412514225143251442514525146251472514825149251502515125152251532515425155251562515725158251592516025161251622516325164251652516625167251682516925170251712517225173251742517525176251772517825179251802518125182251832518425185251862518725188251892519025191251922519325194251952519625197251982519925200252012520225203252042520525206252072520825209252102521125212252132521425215252162521725218252192522025221252222522325224252252522625227252282522925230252312523225233252342523525236252372523825239252402524125242252432524425245252462524725248252492525025251252522525325254252552525625257252582525925260252612526225263252642526525266252672526825269252702527125272252732527425275252762527725278252792528025281252822528325284252852528625287252882528925290252912529225293252942529525296252972529825299253002530125302253032530425305253062530725308253092531025311253122531325314253152531625317253182531925320253212532225323253242532525326253272532825329253302533125332253332533425335253362533725338253392534025341253422534325344253452534625347253482534925350253512535225353253542535525356253572535825359253602536125362253632536425365253662536725368253692537025371253722537325374253752537625377253782537925380253812538225383253842538525386253872538825389253902539125392253932539425395253962539725398253992540025401254022540325404254052540625407254082540925410254112541225413254142541525416254172541825419254202542125422254232542425425254262542725428254292543025431254322543325434254352543625437254382543925440254412544225443254442544525446254472544825449254502545125452254532545425455254562545725458254592546025461254622546325464254652546625467254682546925470254712547225473254742547525476254772547825479254802548125482254832548425485254862548725488254892549025491254922549325494254952549625497254982549925500255012550225503255042550525506255072550825509255102551125512255132551425515255162551725518255192552025521255222552325524255252552625527255282552925530255312553225533255342553525536255372553825539255402554125542255432554425545255462554725548255492555025551255522555325554255552555625557255582555925560255612556225563255642556525566255672556825569255702557125572255732557425575255762557725578255792558025581255822558325584255852558625587255882558925590255912559225593255942559525596255972559825599256002560125602256032560425605256062560725608256092561025611256122561325614256152561625617256182561925620256212562225623256242562525626256272562825629256302563125632256332563425635256362563725638256392564025641256422564325644256452564625647256482564925650256512565225653256542565525656256572565825659256602566125662256632566425665256662566725668256692567025671256722567325674256752567625677256782567925680256812568225683256842568525686256872568825689256902569125692256932569425695256962569725698256992570025701257022570325704257052570625707257082570925710257112571225713257142571525716257172571825719257202572125722257232572425725257262572725728257292573025731257322573325734257352573625737257382573925740257412574225743257442574525746257472574825749257502575125752257532575425755257562575725758257592576025761257622576325764257652576625767257682576925770257712577225773257742577525776257772577825779257802578125782257832578425785257862578725788257892579025791257922579325794257952579625797257982579925800258012580225803258042580525806258072580825809258102581125812258132581425815258162581725818258192582025821258222582325824258252582625827258282582925830258312583225833258342583525836258372583825839258402584125842258432584425845258462584725848258492585025851258522585325854258552585625857258582585925860258612586225863258642586525866258672586825869258702587125872258732587425875258762587725878258792588025881258822588325884258852588625887258882588925890258912589225893258942589525896258972589825899259002590125902259032590425905259062590725908259092591025911259122591325914259152591625917259182591925920259212592225923259242592525926259272592825929259302593125932259332593425935259362593725938259392594025941259422594325944259452594625947259482594925950259512595225953259542595525956259572595825959259602596125962259632596425965259662596725968259692597025971259722597325974259752597625977259782597925980259812598225983259842598525986259872598825989259902599125992259932599425995259962599725998259992600026001260022600326004260052600626007260082600926010260112601226013260142601526016260172601826019260202602126022260232602426025260262602726028260292603026031260322603326034260352603626037260382603926040260412604226043260442604526046260472604826049260502605126052260532605426055260562605726058260592606026061260622606326064260652606626067260682606926070260712607226073260742607526076260772607826079260802608126082260832608426085260862608726088260892609026091260922609326094260952609626097260982609926100261012610226103261042610526106261072610826109261102611126112261132611426115261162611726118261192612026121261222612326124261252612626127261282612926130261312613226133261342613526136261372613826139261402614126142261432614426145261462614726148261492615026151261522615326154261552615626157261582615926160261612616226163261642616526166261672616826169261702617126172261732617426175261762617726178261792618026181261822618326184261852618626187261882618926190261912619226193261942619526196261972619826199262002620126202262032620426205262062620726208262092621026211262122621326214262152621626217262182621926220262212622226223262242622526226262272622826229262302623126232262332623426235262362623726238262392624026241262422624326244262452624626247262482624926250262512625226253262542625526256262572625826259262602626126262262632626426265262662626726268262692627026271262722627326274262752627626277262782627926280262812628226283262842628526286262872628826289262902629126292262932629426295262962629726298262992630026301263022630326304263052630626307263082630926310263112631226313263142631526316263172631826319263202632126322263232632426325263262632726328263292633026331263322633326334263352633626337263382633926340263412634226343263442634526346263472634826349263502635126352263532635426355263562635726358263592636026361263622636326364263652636626367263682636926370263712637226373263742637526376263772637826379263802638126382263832638426385263862638726388263892639026391263922639326394263952639626397263982639926400264012640226403264042640526406264072640826409264102641126412264132641426415264162641726418264192642026421264222642326424264252642626427264282642926430264312643226433264342643526436264372643826439264402644126442264432644426445264462644726448264492645026451264522645326454264552645626457264582645926460264612646226463264642646526466264672646826469264702647126472264732647426475264762647726478264792648026481264822648326484264852648626487264882648926490264912649226493264942649526496264972649826499265002650126502265032650426505265062650726508265092651026511265122651326514265152651626517265182651926520265212652226523265242652526526265272652826529265302653126532265332653426535265362653726538265392654026541265422654326544265452654626547265482654926550265512655226553265542655526556265572655826559265602656126562265632656426565265662656726568265692657026571265722657326574265752657626577265782657926580265812658226583265842658526586265872658826589265902659126592265932659426595265962659726598265992660026601266022660326604266052660626607266082660926610266112661226613266142661526616266172661826619266202662126622266232662426625266262662726628266292663026631266322663326634266352663626637266382663926640266412664226643266442664526646266472664826649266502665126652266532665426655266562665726658266592666026661266622666326664266652666626667266682666926670266712667226673266742667526676266772667826679266802668126682266832668426685266862668726688266892669026691266922669326694266952669626697266982669926700267012670226703267042670526706267072670826709267102671126712267132671426715267162671726718267192672026721267222672326724267252672626727267282672926730267312673226733267342673526736267372673826739267402674126742267432674426745267462674726748267492675026751267522675326754267552675626757267582675926760267612676226763267642676526766267672676826769267702677126772267732677426775267762677726778267792678026781267822678326784267852678626787267882678926790267912679226793267942679526796267972679826799268002680126802268032680426805268062680726808268092681026811268122681326814268152681626817268182681926820268212682226823268242682526826268272682826829268302683126832268332683426835268362683726838268392684026841268422684326844268452684626847268482684926850268512685226853268542685526856268572685826859268602686126862268632686426865268662686726868268692687026871268722687326874268752687626877268782687926880268812688226883268842688526886268872688826889268902689126892268932689426895268962689726898268992690026901269022690326904269052690626907269082690926910269112691226913269142691526916269172691826919269202692126922269232692426925269262692726928269292693026931269322693326934269352693626937269382693926940269412694226943269442694526946269472694826949269502695126952269532695426955269562695726958269592696026961269622696326964269652696626967269682696926970269712697226973269742697526976269772697826979269802698126982269832698426985269862698726988269892699026991269922699326994269952699626997269982699927000270012700227003270042700527006270072700827009270102701127012270132701427015270162701727018270192702027021270222702327024270252702627027270282702927030270312703227033270342703527036270372703827039270402704127042270432704427045270462704727048270492705027051270522705327054270552705627057270582705927060270612706227063270642706527066270672706827069270702707127072270732707427075270762707727078270792708027081270822708327084270852708627087270882708927090270912709227093270942709527096270972709827099271002710127102271032710427105271062710727108271092711027111271122711327114271152711627117271182711927120271212712227123271242712527126271272712827129271302713127132271332713427135271362713727138271392714027141271422714327144271452714627147271482714927150271512715227153271542715527156271572715827159271602716127162271632716427165271662716727168271692717027171271722717327174271752717627177271782717927180271812718227183271842718527186271872718827189271902719127192271932719427195271962719727198271992720027201272022720327204272052720627207272082720927210272112721227213272142721527216272172721827219272202722127222272232722427225272262722727228272292723027231272322723327234272352723627237272382723927240272412724227243272442724527246272472724827249272502725127252272532725427255272562725727258272592726027261272622726327264272652726627267272682726927270272712727227273272742727527276272772727827279272802728127282272832728427285272862728727288272892729027291272922729327294272952729627297272982729927300273012730227303273042730527306273072730827309273102731127312273132731427315273162731727318273192732027321273222732327324273252732627327273282732927330273312733227333273342733527336273372733827339273402734127342273432734427345273462734727348273492735027351273522735327354273552735627357273582735927360273612736227363273642736527366273672736827369273702737127372273732737427375273762737727378273792738027381273822738327384273852738627387273882738927390273912739227393273942739527396273972739827399274002740127402274032740427405274062740727408274092741027411274122741327414274152741627417274182741927420274212742227423274242742527426274272742827429274302743127432274332743427435274362743727438274392744027441274422744327444274452744627447274482744927450274512745227453274542745527456274572745827459274602746127462274632746427465274662746727468274692747027471274722747327474274752747627477274782747927480274812748227483274842748527486274872748827489274902749127492274932749427495274962749727498274992750027501275022750327504275052750627507275082750927510275112751227513275142751527516275172751827519275202752127522275232752427525275262752727528275292753027531275322753327534275352753627537275382753927540275412754227543275442754527546275472754827549275502755127552275532755427555275562755727558275592756027561275622756327564275652756627567275682756927570275712757227573275742757527576275772757827579275802758127582275832758427585275862758727588275892759027591275922759327594275952759627597275982759927600276012760227603276042760527606276072760827609276102761127612276132761427615276162761727618276192762027621276222762327624276252762627627276282762927630276312763227633276342763527636276372763827639276402764127642276432764427645276462764727648276492765027651276522765327654276552765627657276582765927660276612766227663276642766527666276672766827669276702767127672276732767427675276762767727678276792768027681276822768327684276852768627687276882768927690276912769227693276942769527696276972769827699277002770127702277032770427705277062770727708277092771027711277122771327714277152771627717277182771927720277212772227723277242772527726277272772827729277302773127732277332773427735277362773727738277392774027741277422774327744277452774627747277482774927750277512775227753277542775527756277572775827759277602776127762277632776427765277662776727768277692777027771277722777327774277752777627777277782777927780277812778227783277842778527786277872778827789277902779127792277932779427795277962779727798277992780027801278022780327804278052780627807278082780927810278112781227813278142781527816278172781827819278202782127822278232782427825278262782727828278292783027831278322783327834278352783627837278382783927840278412784227843278442784527846278472784827849278502785127852278532785427855278562785727858278592786027861278622786327864278652786627867278682786927870278712787227873278742787527876278772787827879278802788127882278832788427885278862788727888278892789027891278922789327894278952789627897278982789927900279012790227903279042790527906279072790827909279102791127912279132791427915279162791727918279192792027921279222792327924279252792627927279282792927930279312793227933279342793527936279372793827939279402794127942279432794427945279462794727948279492795027951279522795327954279552795627957279582795927960279612796227963279642796527966279672796827969279702797127972279732797427975279762797727978279792798027981279822798327984279852798627987279882798927990279912799227993279942799527996279972799827999280002800128002280032800428005280062800728008280092801028011280122801328014280152801628017280182801928020280212802228023280242802528026280272802828029280302803128032280332803428035280362803728038280392804028041280422804328044280452804628047280482804928050280512805228053280542805528056280572805828059280602806128062280632806428065280662806728068280692807028071280722807328074280752807628077280782807928080280812808228083280842808528086280872808828089280902809128092280932809428095280962809728098280992810028101281022810328104281052810628107281082810928110281112811228113281142811528116281172811828119281202812128122281232812428125281262812728128281292813028131281322813328134281352813628137281382813928140281412814228143281442814528146281472814828149281502815128152281532815428155281562815728158281592816028161281622816328164281652816628167281682816928170281712817228173281742817528176281772817828179281802818128182281832818428185281862818728188281892819028191281922819328194281952819628197281982819928200282012820228203282042820528206282072820828209282102821128212282132821428215282162821728218282192822028221282222822328224282252822628227282282822928230282312823228233282342823528236282372823828239282402824128242282432824428245282462824728248282492825028251282522825328254282552825628257282582825928260282612826228263282642826528266282672826828269282702827128272282732827428275282762827728278282792828028281282822828328284282852828628287282882828928290282912829228293282942829528296282972829828299283002830128302283032830428305283062830728308283092831028311283122831328314283152831628317283182831928320283212832228323283242832528326283272832828329283302833128332283332833428335283362833728338283392834028341283422834328344283452834628347283482834928350283512835228353283542835528356283572835828359283602836128362283632836428365283662836728368283692837028371283722837328374283752837628377283782837928380283812838228383283842838528386283872838828389283902839128392283932839428395283962839728398283992840028401284022840328404284052840628407284082840928410284112841228413284142841528416284172841828419284202842128422284232842428425284262842728428284292843028431284322843328434284352843628437284382843928440284412844228443284442844528446284472844828449284502845128452284532845428455284562845728458284592846028461284622846328464284652846628467284682846928470284712847228473284742847528476284772847828479284802848128482284832848428485284862848728488284892849028491284922849328494284952849628497284982849928500285012850228503285042850528506285072850828509285102851128512285132851428515285162851728518285192852028521285222852328524285252852628527285282852928530285312853228533285342853528536285372853828539285402854128542285432854428545285462854728548285492855028551285522855328554285552855628557285582855928560285612856228563285642856528566285672856828569285702857128572285732857428575285762857728578285792858028581285822858328584285852858628587285882858928590285912859228593285942859528596285972859828599286002860128602286032860428605286062860728608286092861028611286122861328614286152861628617286182861928620286212862228623286242862528626286272862828629286302863128632286332863428635286362863728638286392864028641286422864328644286452864628647286482864928650286512865228653286542865528656286572865828659286602866128662286632866428665286662866728668286692867028671286722867328674286752867628677286782867928680286812868228683286842868528686286872868828689286902869128692286932869428695286962869728698286992870028701287022870328704287052870628707287082870928710287112871228713287142871528716287172871828719287202872128722287232872428725287262872728728287292873028731287322873328734287352873628737287382873928740287412874228743287442874528746287472874828749287502875128752287532875428755287562875728758287592876028761287622876328764287652876628767287682876928770287712877228773287742877528776287772877828779287802878128782287832878428785287862878728788287892879028791287922879328794287952879628797287982879928800288012880228803288042880528806288072880828809288102881128812288132881428815288162881728818288192882028821288222882328824288252882628827288282882928830288312883228833288342883528836288372883828839288402884128842288432884428845288462884728848288492885028851288522885328854288552885628857288582885928860288612886228863288642886528866288672886828869288702887128872288732887428875288762887728878288792888028881288822888328884288852888628887288882888928890288912889228893288942889528896288972889828899289002890128902289032890428905289062890728908289092891028911289122891328914289152891628917289182891928920289212892228923289242892528926289272892828929289302893128932289332893428935289362893728938289392894028941289422894328944289452894628947289482894928950289512895228953289542895528956289572895828959289602896128962289632896428965289662896728968289692897028971289722897328974289752897628977289782897928980289812898228983289842898528986289872898828989289902899128992289932899428995289962899728998289992900029001290022900329004290052900629007290082900929010290112901229013290142901529016290172901829019290202902129022290232902429025290262902729028290292903029031290322903329034290352903629037290382903929040290412904229043290442904529046290472904829049290502905129052290532905429055290562905729058290592906029061290622906329064290652906629067290682906929070290712907229073290742907529076290772907829079290802908129082290832908429085290862908729088290892909029091290922909329094290952909629097290982909929100291012910229103291042910529106291072910829109291102911129112291132911429115291162911729118291192912029121291222912329124291252912629127291282912929130291312913229133291342913529136291372913829139291402914129142291432914429145291462914729148291492915029151291522915329154291552915629157291582915929160291612916229163291642916529166291672916829169291702917129172291732917429175291762917729178291792918029181291822918329184291852918629187291882918929190291912919229193291942919529196291972919829199292002920129202292032920429205292062920729208292092921029211292122921329214292152921629217292182921929220292212922229223292242922529226292272922829229292302923129232292332923429235292362923729238292392924029241292422924329244292452924629247292482924929250292512925229253292542925529256292572925829259292602926129262292632926429265292662926729268292692927029271292722927329274292752927629277292782927929280292812928229283292842928529286292872928829289292902929129292292932929429295292962929729298292992930029301293022930329304293052930629307293082930929310293112931229313293142931529316293172931829319293202932129322293232932429325293262932729328293292933029331293322933329334293352933629337293382933929340293412934229343293442934529346293472934829349293502935129352293532935429355293562935729358293592936029361293622936329364293652936629367293682936929370293712937229373293742937529376293772937829379293802938129382293832938429385293862938729388293892939029391293922939329394293952939629397293982939929400294012940229403294042940529406294072940829409294102941129412294132941429415294162941729418294192942029421294222942329424294252942629427294282942929430294312943229433294342943529436294372943829439294402944129442294432944429445294462944729448294492945029451294522945329454294552945629457294582945929460294612946229463294642946529466294672946829469294702947129472294732947429475294762947729478294792948029481294822948329484294852948629487294882948929490294912949229493294942949529496294972949829499295002950129502295032950429505295062950729508295092951029511295122951329514295152951629517295182951929520295212952229523295242952529526295272952829529295302953129532295332953429535295362953729538295392954029541295422954329544295452954629547295482954929550295512955229553295542955529556295572955829559295602956129562295632956429565295662956729568295692957029571295722957329574295752957629577295782957929580295812958229583295842958529586295872958829589295902959129592295932959429595295962959729598295992960029601296022960329604296052960629607296082960929610296112961229613296142961529616296172961829619296202962129622296232962429625296262962729628296292963029631296322963329634296352963629637296382963929640296412964229643296442964529646296472964829649296502965129652296532965429655296562965729658296592966029661296622966329664296652966629667296682966929670296712967229673296742967529676296772967829679296802968129682296832968429685296862968729688296892969029691296922969329694296952969629697296982969929700297012970229703297042970529706297072970829709297102971129712297132971429715297162971729718297192972029721297222972329724297252972629727297282972929730297312973229733297342973529736297372973829739297402974129742297432974429745297462974729748297492975029751297522975329754297552975629757297582975929760297612976229763297642976529766297672976829769297702977129772297732977429775297762977729778297792978029781297822978329784297852978629787297882978929790297912979229793297942979529796297972979829799298002980129802298032980429805298062980729808298092981029811298122981329814298152981629817298182981929820298212982229823298242982529826298272982829829298302983129832298332983429835298362983729838298392984029841298422984329844298452984629847298482984929850298512985229853298542985529856298572985829859298602986129862298632986429865298662986729868298692987029871298722987329874298752987629877298782987929880298812988229883298842988529886298872988829889298902989129892298932989429895298962989729898298992990029901299022990329904299052990629907299082990929910299112991229913299142991529916299172991829919299202992129922299232992429925299262992729928299292993029931299322993329934299352993629937299382993929940299412994229943299442994529946299472994829949299502995129952299532995429955299562995729958299592996029961299622996329964299652996629967299682996929970299712997229973299742997529976299772997829979299802998129982299832998429985299862998729988299892999029991299922999329994299952999629997299982999930000300013000230003300043000530006300073000830009300103001130012300133001430015300163001730018300193002030021300223002330024300253002630027300283002930030300313003230033300343003530036300373003830039300403004130042300433004430045300463004730048300493005030051300523005330054300553005630057300583005930060300613006230063300643006530066300673006830069300703007130072300733007430075300763007730078300793008030081300823008330084300853008630087300883008930090300913009230093300943009530096300973009830099301003010130102301033010430105301063010730108301093011030111301123011330114301153011630117301183011930120301213012230123301243012530126301273012830129301303013130132301333013430135301363013730138301393014030141301423014330144301453014630147301483014930150301513015230153301543015530156301573015830159301603016130162301633016430165301663016730168301693017030171301723017330174301753017630177301783017930180301813018230183301843018530186301873018830189301903019130192301933019430195301963019730198301993020030201302023020330204302053020630207302083020930210302113021230213302143021530216302173021830219302203022130222302233022430225302263022730228302293023030231302323023330234302353023630237302383023930240302413024230243302443024530246302473024830249302503025130252302533025430255302563025730258302593026030261302623026330264302653026630267302683026930270302713027230273302743027530276302773027830279302803028130282302833028430285302863028730288302893029030291302923029330294302953029630297302983029930300303013030230303303043030530306303073030830309303103031130312303133031430315303163031730318303193032030321303223032330324303253032630327303283032930330303313033230333303343033530336303373033830339303403034130342303433034430345303463034730348303493035030351303523035330354303553035630357303583035930360303613036230363303643036530366303673036830369303703037130372303733037430375303763037730378303793038030381303823038330384303853038630387303883038930390303913039230393303943039530396303973039830399304003040130402304033040430405304063040730408304093041030411304123041330414304153041630417304183041930420304213042230423304243042530426304273042830429304303043130432304333043430435304363043730438304393044030441304423044330444304453044630447304483044930450304513045230453304543045530456304573045830459304603046130462304633046430465304663046730468304693047030471304723047330474304753047630477304783047930480304813048230483304843048530486304873048830489304903049130492304933049430495304963049730498304993050030501305023050330504305053050630507305083050930510305113051230513305143051530516305173051830519305203052130522305233052430525305263052730528305293053030531305323053330534305353053630537305383053930540305413054230543305443054530546305473054830549305503055130552305533055430555305563055730558305593056030561305623056330564305653056630567305683056930570305713057230573305743057530576305773057830579305803058130582305833058430585305863058730588305893059030591305923059330594305953059630597305983059930600306013060230603306043060530606306073060830609306103061130612306133061430615306163061730618306193062030621306223062330624306253062630627306283062930630306313063230633306343063530636306373063830639306403064130642306433064430645306463064730648306493065030651306523065330654306553065630657306583065930660306613066230663306643066530666306673066830669306703067130672306733067430675306763067730678306793068030681306823068330684306853068630687306883068930690306913069230693306943069530696306973069830699307003070130702307033070430705307063070730708307093071030711307123071330714307153071630717307183071930720307213072230723307243072530726307273072830729307303073130732307333073430735307363073730738307393074030741307423074330744307453074630747307483074930750307513075230753307543075530756307573075830759307603076130762307633076430765307663076730768307693077030771307723077330774307753077630777307783077930780307813078230783307843078530786307873078830789307903079130792307933079430795307963079730798307993080030801308023080330804308053080630807308083080930810308113081230813308143081530816308173081830819308203082130822308233082430825308263082730828308293083030831308323083330834308353083630837308383083930840308413084230843308443084530846308473084830849308503085130852308533085430855308563085730858308593086030861308623086330864308653086630867308683086930870308713087230873308743087530876308773087830879308803088130882308833088430885308863088730888308893089030891308923089330894308953089630897308983089930900309013090230903309043090530906309073090830909309103091130912309133091430915309163091730918309193092030921309223092330924309253092630927309283092930930309313093230933309343093530936309373093830939309403094130942309433094430945309463094730948309493095030951309523095330954309553095630957309583095930960309613096230963309643096530966309673096830969309703097130972309733097430975309763097730978309793098030981309823098330984309853098630987309883098930990309913099230993309943099530996309973099830999310003100131002310033100431005310063100731008310093101031011310123101331014310153101631017310183101931020310213102231023310243102531026310273102831029310303103131032310333103431035310363103731038310393104031041310423104331044310453104631047310483104931050310513105231053310543105531056310573105831059310603106131062310633106431065310663106731068310693107031071310723107331074310753107631077310783107931080310813108231083310843108531086310873108831089310903109131092310933109431095310963109731098310993110031101311023110331104311053110631107311083110931110311113111231113311143111531116311173111831119311203112131122311233112431125311263112731128311293113031131311323113331134311353113631137311383113931140311413114231143311443114531146311473114831149311503115131152311533115431155311563115731158311593116031161311623116331164311653116631167311683116931170311713117231173311743117531176311773117831179311803118131182311833118431185311863118731188311893119031191311923119331194311953119631197311983119931200312013120231203312043120531206312073120831209312103121131212312133121431215312163121731218312193122031221312223122331224312253122631227312283122931230312313123231233312343123531236312373123831239312403124131242312433124431245312463124731248312493125031251312523125331254312553125631257312583125931260312613126231263312643126531266312673126831269312703127131272312733127431275312763127731278312793128031281312823128331284312853128631287312883128931290312913129231293312943129531296312973129831299313003130131302313033130431305313063130731308313093131031311313123131331314313153131631317313183131931320313213132231323313243132531326313273132831329313303133131332313333133431335313363133731338313393134031341313423134331344313453134631347313483134931350313513135231353313543135531356313573135831359313603136131362313633136431365313663136731368313693137031371313723137331374313753137631377313783137931380313813138231383313843138531386313873138831389313903139131392313933139431395313963139731398313993140031401314023140331404314053140631407314083140931410314113141231413314143141531416314173141831419314203142131422314233142431425314263142731428314293143031431314323143331434314353143631437314383143931440314413144231443314443144531446314473144831449314503145131452314533145431455314563145731458314593146031461314623146331464314653146631467314683146931470314713147231473314743147531476314773147831479314803148131482314833148431485314863148731488314893149031491314923149331494314953149631497314983149931500315013150231503315043150531506315073150831509315103151131512315133151431515315163151731518315193152031521315223152331524315253152631527315283152931530315313153231533315343153531536315373153831539315403154131542315433154431545315463154731548315493155031551315523155331554315553155631557315583155931560315613156231563315643156531566315673156831569315703157131572315733157431575315763157731578315793158031581315823158331584315853158631587315883158931590315913159231593315943159531596315973159831599316003160131602316033160431605316063160731608316093161031611316123161331614316153161631617316183161931620316213162231623316243162531626316273162831629316303163131632316333163431635316363163731638316393164031641316423164331644316453164631647316483164931650316513165231653316543165531656316573165831659316603166131662316633166431665316663166731668316693167031671316723167331674316753167631677316783167931680316813168231683316843168531686316873168831689316903169131692316933169431695316963169731698316993170031701317023170331704317053170631707317083170931710317113171231713317143171531716317173171831719317203172131722317233172431725317263172731728317293173031731317323173331734317353173631737317383173931740317413174231743317443174531746317473174831749317503175131752317533175431755317563175731758317593176031761317623176331764317653176631767317683176931770317713177231773317743177531776317773177831779317803178131782317833178431785317863178731788317893179031791317923179331794317953179631797317983179931800318013180231803318043180531806318073180831809318103181131812318133181431815318163181731818318193182031821318223182331824318253182631827318283182931830318313183231833318343183531836318373183831839318403184131842318433184431845318463184731848318493185031851318523185331854318553185631857318583185931860318613186231863318643186531866318673186831869318703187131872318733187431875318763187731878318793188031881318823188331884318853188631887318883188931890318913189231893318943189531896318973189831899319003190131902319033190431905319063190731908319093191031911319123191331914319153191631917319183191931920319213192231923319243192531926319273192831929319303193131932319333193431935319363193731938319393194031941319423194331944319453194631947319483194931950319513195231953319543195531956319573195831959319603196131962319633196431965319663196731968319693197031971319723197331974319753197631977319783197931980319813198231983319843198531986319873198831989319903199131992319933199431995319963199731998319993200032001320023200332004320053200632007320083200932010320113201232013320143201532016320173201832019320203202132022320233202432025320263202732028320293203032031320323203332034320353203632037320383203932040320413204232043320443204532046320473204832049320503205132052320533205432055320563205732058320593206032061320623206332064320653206632067320683206932070320713207232073320743207532076320773207832079320803208132082320833208432085320863208732088320893209032091320923209332094320953209632097320983209932100321013210232103321043210532106321073210832109321103211132112321133211432115321163211732118321193212032121321223212332124321253212632127321283212932130321313213232133321343213532136321373213832139321403214132142321433214432145321463214732148321493215032151321523215332154321553215632157321583215932160321613216232163321643216532166321673216832169321703217132172321733217432175321763217732178321793218032181321823218332184321853218632187321883218932190321913219232193321943219532196321973219832199322003220132202322033220432205322063220732208322093221032211322123221332214322153221632217322183221932220322213222232223322243222532226322273222832229322303223132232322333223432235322363223732238322393224032241322423224332244322453224632247322483224932250322513225232253322543225532256322573225832259322603226132262322633226432265322663226732268322693227032271322723227332274322753227632277322783227932280322813228232283322843228532286322873228832289322903229132292322933229432295322963229732298322993230032301323023230332304323053230632307323083230932310323113231232313323143231532316323173231832319323203232132322323233232432325323263232732328323293233032331323323233332334323353233632337323383233932340323413234232343323443234532346323473234832349323503235132352323533235432355323563235732358323593236032361323623236332364323653236632367323683236932370323713237232373323743237532376323773237832379323803238132382323833238432385323863238732388323893239032391323923239332394323953239632397323983239932400324013240232403324043240532406324073240832409324103241132412324133241432415324163241732418324193242032421324223242332424324253242632427324283242932430324313243232433324343243532436324373243832439324403244132442324433244432445324463244732448324493245032451324523245332454324553245632457324583245932460324613246232463324643246532466324673246832469
  1. /**
  2. * echarts默认配置项
  3. *
  4. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  5. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  6. *
  7. */
  8. define('echarts/config',[],function() {
  9. // 请原谅我这样写,这显然可以直接返回个对象,但那样的话outline就显示不出来了~~
  10. var config = {
  11. // 图表类型
  12. CHART_TYPE_LINE: 'line',
  13. CHART_TYPE_BAR: 'bar',
  14. CHART_TYPE_SCATTER: 'scatter',
  15. CHART_TYPE_PIE: 'pie',
  16. CHART_TYPE_RADAR: 'radar',
  17. CHART_TYPE_MAP: 'map',
  18. CHART_TYPE_K: 'k',
  19. CHART_TYPE_ISLAND: 'island',
  20. CHART_TYPE_FORCE : 'force',
  21. CHART_TYPE_CHORD : 'chord',
  22. // 组件类型
  23. COMPONENT_TYPE_TITLE: 'title',
  24. COMPONENT_TYPE_LEGEND: 'legend',
  25. COMPONENT_TYPE_DATARANGE: 'dataRange',
  26. COMPONENT_TYPE_DATAVIEW: 'dataView',
  27. COMPONENT_TYPE_DATAZOOM: 'dataZoom',
  28. COMPONENT_TYPE_TOOLBOX: 'toolbox',
  29. COMPONENT_TYPE_TOOLTIP: 'tooltip',
  30. COMPONENT_TYPE_GRID: 'grid',
  31. COMPONENT_TYPE_AXIS: 'axis',
  32. COMPONENT_TYPE_POLAR: 'polar',
  33. COMPONENT_TYPE_X_AXIS: 'xAxis',
  34. COMPONENT_TYPE_Y_AXIS: 'yAxis',
  35. COMPONENT_TYPE_AXIS_CATEGORY: 'categoryAxis',
  36. COMPONENT_TYPE_AXIS_VALUE: 'valueAxis',
  37. // 默认色板
  38. color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
  39. '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
  40. '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
  41. '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
  42. // 图表标题
  43. title: {
  44. text: '',
  45. //link: null, // 超链接跳转
  46. subtext: '',
  47. //sublink: null, // 超链接跳转
  48. x: 'left', // 水平安放位置,默认为左对齐,可选为:
  49. // 'center' ¦ 'left' ¦ 'right'
  50. // ¦ {number}(x坐标,单位px)
  51. y: 'top', // 垂直安放位置,默认为全图顶端,可选为:
  52. // 'top' ¦ 'bottom' ¦ 'center'
  53. // ¦ {number}(y坐标,单位px)
  54. //textAlign: null // 水平对齐方式,默认根据x设置自动调整
  55. backgroundColor: 'rgba(0,0,0,0)',
  56. borderColor: '#ccc', // 标题边框颜色
  57. borderWidth: 0, // 标题边框线宽,单位px,默认为0(无边框)
  58. padding: 5, // 标题内边距,单位px,默认各方向内边距为5,
  59. // 接受数组分别设定上右下左边距,同css
  60. itemGap: 10, // 主副标题纵向间隔,单位px,默认为10,
  61. textStyle: {
  62. fontSize: 18,
  63. fontWeight: 'bolder',
  64. color: '#333' // 主标题文字颜色
  65. },
  66. subtextStyle: {
  67. color: '#aaa' // 副标题文字颜色
  68. }
  69. },
  70. // 图例
  71. legend: {
  72. orient: 'horizontal', // 布局方式,默认为水平布局,可选为:
  73. // 'horizontal' ¦ 'vertical'
  74. x: 'center', // 水平安放位置,默认为全图居中,可选为:
  75. // 'center' ¦ 'left' ¦ 'right'
  76. // ¦ {number}(x坐标,单位px)
  77. y: 'top', // 垂直安放位置,默认为全图顶端,可选为:
  78. // 'top' ¦ 'bottom' ¦ 'center'
  79. // ¦ {number}(y坐标,单位px)
  80. backgroundColor: 'rgba(0,0,0,0)',
  81. borderColor: '#ccc', // 图例边框颜色
  82. borderWidth: 0, // 图例边框线宽,单位px,默认为0(无边框)
  83. padding: 5, // 图例内边距,单位px,默认各方向内边距为5,
  84. // 接受数组分别设定上右下左边距,同css
  85. itemGap: 10, // 各个item之间的间隔,单位px,默认为10,
  86. // 横向布局时为水平间隔,纵向布局时为纵向间隔
  87. itemWidth: 20, // 图例图形宽度,非标准参数
  88. itemHeight: 14, // 图例图形高度,非标准参数
  89. textStyle: {
  90. color: '#333' // 图例文字颜色
  91. },
  92. selectedMode: true // 选择模式,默认开启图例开关
  93. // selected: null, // 配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入
  94. // data: [], // 图例内容(详见legend.data,数组中每一项代表一个item
  95. },
  96. // 值域
  97. dataRange: {
  98. orient: 'vertical', // 布局方式,默认为垂直布局,可选为:
  99. // 'horizontal' ¦ 'vertical'
  100. x: 'left', // 水平安放位置,默认为全图左对齐,可选为:
  101. // 'center' ¦ 'left' ¦ 'right'
  102. // ¦ {number}(x坐标,单位px)
  103. y: 'bottom', // 垂直安放位置,默认为全图底部,可选为:
  104. // 'top' ¦ 'bottom' ¦ 'center'
  105. // ¦ {number}(y坐标,单位px)
  106. backgroundColor: 'rgba(0,0,0,0)',
  107. borderColor: '#ccc', // 值域边框颜色
  108. borderWidth: 0, // 值域边框线宽,单位px,默认为0(无边框)
  109. padding: 5, // 值域内边距,单位px,默认各方向内边距为5,
  110. // 接受数组分别设定上右下左边距,同css
  111. itemGap: 10, // 各个item之间的间隔,单位px,默认为10,
  112. // 横向布局时为水平间隔,纵向布局时为纵向间隔
  113. itemWidth: 20, // 值域图形宽度,线性渐变水平布局宽度为该值 * 10
  114. itemHeight: 14, // 值域图形高度,线性渐变垂直布局高度为该值 * 10
  115. // min: null, // 最小值
  116. // max: null, // 最大值
  117. precision: 0, // 小数精度,默认为0,无小数点
  118. splitNumber: 5, // 分割段数,默认为5,为0时为线性渐变
  119. calculable: false, // 是否值域漫游,启用后无视splitNumber,线性渐变
  120. realtime: true,
  121. color:['#1e90ff','#f0ffff'],//颜色
  122. //text:['高','低'], // 文本,默认为数值文本
  123. textStyle: {
  124. color: '#333' // 值域文字颜色
  125. }
  126. },
  127. toolbox: {
  128. show : false,
  129. orient: 'horizontal', // 布局方式,默认为水平布局,可选为:
  130. // 'horizontal' ¦ 'vertical'
  131. x: 'right', // 水平安放位置,默认为全图右对齐,可选为:
  132. // 'center' ¦ 'left' ¦ 'right'
  133. // ¦ {number}(x坐标,单位px)
  134. y: 'top', // 垂直安放位置,默认为全图顶端,可选为:
  135. // 'top' ¦ 'bottom' ¦ 'center'
  136. // ¦ {number}(y坐标,单位px)
  137. color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
  138. backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
  139. borderColor: '#ccc', // 工具箱边框颜色
  140. borderWidth: 0, // 工具箱边框线宽,单位px,默认为0(无边框)
  141. padding: 5, // 工具箱内边距,单位px,默认各方向内边距为5,
  142. // 接受数组分别设定上右下左边距,同css
  143. itemGap: 10, // 各个item之间的间隔,单位px,默认为10,
  144. // 横向布局时为水平间隔,纵向布局时为纵向间隔
  145. itemSize: 16, // 工具箱图形宽度,非标准参数
  146. feature : {
  147. //mark : true,
  148. //dataView : {readOnly: false},
  149. //magicType: ['line', 'bar'],
  150. //restore : true,
  151. //saveAsImage : true
  152. }
  153. },
  154. // 提示框
  155. tooltip: {
  156. show: true,
  157. showContent: true, // tooltip主体内容
  158. trigger: 'item', // 触发类型,默认数据触发,见下图,可选为:'item' ¦ 'axis'
  159. // formatter: null // 内容格式器:{string}(Template) ¦ {Function}
  160. islandFormatter: '{a} <br/>{b} : {c}', // 数据孤岛内容格式器,非标准参数
  161. showDelay: 20, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms
  162. hideDelay: 100, // 隐藏延迟,单位ms
  163. transitionDuration : 0.4, // 动画变换时间,单位s
  164. backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色,默认为透明度为0.7的黑色
  165. borderColor: '#333', // 提示边框颜色
  166. borderRadius: 4, // 提示边框圆角,单位px,默认为4
  167. borderWidth: 0, // 提示边框线宽,单位px,默认为0(无边框)
  168. padding: 5, // 提示内边距,单位px,默认各方向内边距为5,
  169. // 接受数组分别设定上右下左边距,同css
  170. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  171. type : 'line', // 默认为直线,可选为:'line' | 'shadow'
  172. lineStyle : { // 直线指示器样式设置
  173. color: '#48b',
  174. width: 2,
  175. type: 'solid'
  176. },
  177. areaStyle : { // 阴影指示器样式设置
  178. size: 'auto', // 阴影大小
  179. color: 'rgba(150,150,150,0.3)' // 阴影颜色
  180. }
  181. },
  182. textStyle: {
  183. color: '#fff'
  184. }
  185. },
  186. // 区域缩放控制器
  187. dataZoom: {
  188. show: false,
  189. orient: 'horizontal', // 布局方式,默认为水平布局,可选为:
  190. // 'horizontal' ¦ 'vertical'
  191. // x: {number}, // 水平安放位置,默认为根据grid参数适配,可选为:
  192. // {number}(x坐标,单位px)
  193. // y: {number}, // 垂直安放位置,默认为根据grid参数适配,可选为:
  194. // {number}(y坐标,单位px)
  195. // width: {number}, // 指定宽度,横向布局时默认为根据grid参数适配
  196. // height: {number}, // 指定高度,纵向布局时默认为根据grid参数适配
  197. backgroundColor: '#eee', // 背景颜色
  198. dataBackgroundColor: '#ccc', // 数据背景颜色
  199. fillerColor: 'rgba(50,205,50,0.4)', // 填充颜色
  200. handleColor: 'rgba(70,130,180,0.8)', // 手柄颜色
  201. // xAxisIndex: [], // 默认控制所有横向类目
  202. // yAxisIndex: [], // 默认控制所有横向类目
  203. // start: 0, // 默认为0
  204. // end: 100, // 默认为全部 100%
  205. realtime: false
  206. // zoomLock: false // 是否锁定选择区域大小
  207. },
  208. // 网格
  209. grid: {
  210. x: 80,
  211. y: 60,
  212. x2: 80,
  213. y2: 60,
  214. // width: {totalWidth} - x - x2,
  215. // height: {totalHeight} - y - y2,
  216. backgroundColor: '#fff',
  217. borderWidth: 1,
  218. borderColor: '#ccc'
  219. },
  220. // 类目轴
  221. categoryAxis: {
  222. position: 'bottom', // 位置
  223. name: '', // 坐标轴名字,默认为空
  224. nameLocation: 'end', // 坐标轴名字位置,支持'start' | 'end'
  225. boundaryGap: true, // 类目起始和结束两端空白策略
  226. axisLine: { // 坐标轴线
  227. show: true, // 默认显示,属性show控制显示与否
  228. lineStyle: { // 属性lineStyle控制线条样式
  229. color: '#48b',
  230. width: 2,
  231. type: 'solid'
  232. }
  233. },
  234. axisTick: { // 坐标轴小标记
  235. show: false, // 属性show控制显示与否,默认不显示
  236. length :4, // 属性length控制线长
  237. lineStyle: { // 属性lineStyle控制线条样式
  238. color: '#ccc',
  239. width: 1
  240. }
  241. },
  242. axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
  243. show: true,
  244. interval: 'auto',
  245. rotate: 0,
  246. margin: 8,
  247. // formatter: null,
  248. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  249. color: '#333'
  250. }
  251. },
  252. splitLine: { // 分隔线
  253. show: true, // 默认显示,属性show控制显示与否
  254. lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
  255. color: ['#ccc'],
  256. width: 1,
  257. type: 'solid'
  258. }
  259. },
  260. splitArea: { // 分隔区域
  261. show: false, // 默认不显示,属性show控制显示与否
  262. areaStyle: { // 属性areaStyle(详见areaStyle)控制区域样式
  263. color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
  264. type: 'default'
  265. }
  266. }
  267. },
  268. // 数值型坐标轴默认参数
  269. valueAxis: {
  270. position: 'left', // 位置
  271. name: '', // 坐标轴名字,默认为空
  272. nameLocation: 'end', // 坐标轴名字位置,支持'start' | 'end'
  273. boundaryGap: [0, 0], // 数值起始和结束两端空白策略
  274. // min: null, // 最小值
  275. // max: null, // 最大值
  276. // scale: false, // 脱离0值比例,放大聚焦到最终_min,_max区间
  277. precision: 0, // 小数精度,默认为0,无小数点
  278. power: 100, // 整数精度,默认为100,个位和百位为0
  279. splitNumber: 5, // 分割段数,默认为5
  280. axisLine: { // 坐标轴线
  281. show: true, // 默认显示,属性show控制显示与否
  282. lineStyle: { // 属性lineStyle控制线条样式
  283. color: '#48b',
  284. width: 2,
  285. type: 'solid'
  286. }
  287. },
  288. axisTick: { // 坐标轴小标记
  289. show: false, // 属性show控制显示与否,默认不显示
  290. length :4, // 属性length控制线长
  291. lineStyle: { // 属性lineStyle控制线条样式
  292. color: '#ccc',
  293. width: 1
  294. }
  295. },
  296. axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
  297. show: true,
  298. rotate: 0,
  299. margin: 8,
  300. // formatter: null,
  301. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  302. color: '#333'
  303. }
  304. },
  305. splitLine: { // 分隔线
  306. show: true, // 默认显示,属性show控制显示与否
  307. lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
  308. color: ['#ccc'],
  309. width: 1,
  310. type: 'solid'
  311. }
  312. },
  313. splitArea: { // 分隔区域
  314. show: false, // 默认不显示,属性show控制显示与否
  315. areaStyle: { // 属性areaStyle(详见areaStyle)控制区域样式
  316. color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
  317. type: 'default'
  318. }
  319. }
  320. },
  321. polar : {
  322. center : ['50%', '50%'], // 默认全局居中
  323. // radius: 'min(width, height) / 2 - 50',
  324. startAngle : 90,
  325. splitNumber : 5,
  326. name : {
  327. show: true,
  328. // formatter: null,
  329. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  330. color: '#333'
  331. }
  332. },
  333. axisLine: { // 坐标轴线
  334. show: true, // 默认显示,属性show控制显示与否
  335. lineStyle: { // 属性lineStyle控制线条样式
  336. color: '#ccc',
  337. width: 1,
  338. type: 'solid'
  339. }
  340. },
  341. axisLabel: { // 坐标轴文本标签,详见axis.axisLabel
  342. show: false,
  343. // formatter: null,
  344. textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  345. color: '#333'
  346. }
  347. },
  348. splitArea : {
  349. show : true,
  350. areaStyle : {
  351. color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
  352. }
  353. },
  354. splitLine : {
  355. show : true,
  356. lineStyle : {
  357. width : 1,
  358. color : '#ccc'
  359. }
  360. }
  361. //indicator : []
  362. },
  363. // 柱形图默认参数
  364. bar: {
  365. // stack: null
  366. xAxisIndex: 0,
  367. yAxisIndex: 0,
  368. barMinHeight: 20,
  369. // barWidth: null, // 默认自适应
  370. itemStyle: {
  371. normal: {
  372. label: {
  373. show: false
  374. // formatter: 标签文本格式器,同Tooltip.formatter,不支持回调
  375. // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
  376. // 'inside'|'left'|'right'|'top'|'bottom'
  377. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  378. }
  379. },
  380. emphasis: {
  381. label: {
  382. show: false
  383. // formatter: 标签文本格式器,同Tooltip.formatter,不支持回调
  384. // position: 默认自适应,水平布局为'top',垂直布局为'right',可选为
  385. // 'inside'|'left'|'right'|'top'|'bottom'
  386. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  387. }
  388. }
  389. }
  390. },
  391. // 折线图默认参数
  392. line: {
  393. // stack: null
  394. xAxisIndex: 0,
  395. yAxisIndex: 0,
  396. itemStyle: {
  397. normal: {
  398. // color: 各异,
  399. label: {
  400. show: false
  401. // formatter: 标签文本格式器,同Tooltip.formatter,不支持回调
  402. // position: 默认自使用,水平布局为'top',垂直布局为'right',可选为
  403. // 'inside'|'left'|'right'|'top'|'bottom'
  404. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  405. },
  406. lineStyle: {
  407. width: 2,
  408. type: 'solid',
  409. shadowColor : 'rgba(0,0,0,0)', //默认透明
  410. shadowBlur: 5,
  411. shadowOffsetX: 3,
  412. shadowOffsetY: 3
  413. }
  414. },
  415. emphasis: {
  416. label: {
  417. show: false
  418. // formatter: 标签文本格式器,同Tooltip.formatter,不支持回调
  419. // position: 默认自使用,水平布局为'top',垂直布局为'right',可选为
  420. // 'inside'|'left'|'right'|'top'|'bottom'
  421. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  422. }
  423. // color: 各异,
  424. }
  425. },
  426. //smooth : false,
  427. //symbol: null, // 拐点图形类型,非标准参数
  428. symbolSize: 2, // 可计算特性参数,空数据拖拽提示图形大小
  429. //symbolRotate : null, // 拐点图形旋转控制
  430. showAllSymbol: false // 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略)
  431. },
  432. // K线图默认参数
  433. k: {
  434. xAxisIndex: 0,
  435. yAxisIndex: 0,
  436. // barWidth : null // 默认自适应
  437. // barMaxWidth : null // 默认自适应
  438. itemStyle: {
  439. normal: {
  440. color: '#fff', // 阳线填充颜色
  441. color0: '#00aa11', // 阴线填充颜色
  442. lineStyle: {
  443. width: 1,
  444. color: '#ff3200', // 阳线边框颜色
  445. color0: '#00aa11' // 阴线边框颜色
  446. }
  447. },
  448. emphasis: {
  449. // color: 各异,
  450. }
  451. }
  452. },
  453. // 散点图默认参数
  454. scatter: {
  455. xAxisIndex: 0,
  456. yAxisIndex: 0,
  457. //symbol: null, // 图形类型,非标准参数
  458. symbolSize: 4, // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2
  459. //symbolRotate : null, // 拐点图形旋转控制
  460. large: false, // 大规模散点图
  461. largeThreshold: 2000,// 大规模阀值,large为true且数据量>largeThreshold才启用大规模模式
  462. itemStyle: {
  463. normal: {
  464. label: {
  465. show: false,
  466. // 标签文本格式器,同Tooltip.formatter,不支持回调
  467. formatter : function(a, b, c) {
  468. if (typeof c[2] != 'undefined') {
  469. return c[2];
  470. }
  471. else {
  472. return c[0] + ' , ' + c[1];
  473. }
  474. }
  475. // position: 默认自使用,水平布局为'top',垂直布局为'right',可选为
  476. // 'inside'|'left'|'right'|'top'|'bottom'
  477. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  478. }
  479. },
  480. emphasis: {
  481. label: {
  482. show: false,
  483. // 标签文本格式器,同Tooltip.formatter,不支持回调
  484. formatter : function(a, b, c) {
  485. if (typeof c[2] != 'undefined') {
  486. return c[2];
  487. }
  488. else {
  489. return c[0] + ' , ' + c[1];
  490. }
  491. }
  492. // position: 默认自使用,水平布局为'top',垂直布局为'right',可选为
  493. // 'inside'|'left'|'right'|'top'|'bottom'
  494. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  495. }
  496. }
  497. }
  498. },
  499. // 雷达图默认参数
  500. radar : {
  501. polarIndex: 0,
  502. itemStyle: {
  503. normal: {
  504. // color: 各异,
  505. lineStyle: {
  506. width: 2,
  507. type: 'solid'
  508. }
  509. },
  510. emphasis: {
  511. // color: 各异,
  512. }
  513. },
  514. //symbol: null, // 拐点图形类型,非标准参数
  515. symbolSize: 2 // 可计算特性参数,空数据拖拽提示图形大小
  516. },
  517. // 饼图默认参数
  518. pie: {
  519. center : ['50%', '50%'], // 默认全局居中
  520. // radius: [0, min(width, height) / 2 - 50],
  521. startAngle: 90,
  522. minAngle: 5,
  523. selectedOffset: 10, // 选中是扇区偏移量
  524. // selectedMode: false, // 选择模式,默认关闭,可选single,multiple
  525. // roseType : null, // 南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积)
  526. itemStyle: {
  527. normal: {
  528. label: {
  529. show: true,
  530. position: 'outer'
  531. // formatter: 标签文本格式器,同Tooltip.formatter,不支持回调
  532. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  533. },
  534. labelLine: {
  535. show: true,
  536. length: 30,
  537. lineStyle: {
  538. // color: 各异,
  539. width: 1,
  540. type: 'solid'
  541. }
  542. }
  543. },
  544. emphasis: {
  545. label: {
  546. show: false,
  547. position: 'outer'
  548. // formatter: 标签文本格式器,同Tooltip.formatter,不支持回调
  549. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  550. },
  551. labelLine: {
  552. show: false,
  553. length: 40,
  554. lineStyle: {
  555. // color: 各异,
  556. width: 1,
  557. type: 'solid'
  558. }
  559. }
  560. }
  561. }
  562. },
  563. map: {
  564. mapType: 'china', // 各省的mapType暂时都用中文
  565. mapLocation: {
  566. x : 'center',
  567. y : 'center'
  568. // width // 自适应
  569. // height // 自适应
  570. },
  571. // mapValueCalculation: 'sum', // 数值合并方式,默认加和,可选为:
  572. // 'sum' | 'average' | 'max' | 'min'
  573. // selectedMode: false, // 选择模式,默认关闭,可选single,multiple
  574. itemStyle: {
  575. normal: {
  576. // color: 各异,
  577. lineStyle: {
  578. width: 2,
  579. color: '#fff'
  580. },
  581. areaStyle: {
  582. color: '#ccc'//rgba(135,206,250,0.8)
  583. },
  584. label: {
  585. show: false,
  586. textStyle: {
  587. color: 'rgba(139,69,19,1)'
  588. }
  589. }
  590. },
  591. emphasis: { // 也是选中样式
  592. // color: 各异,
  593. lineStyle: {
  594. width: 2,
  595. color: '#fff'
  596. },
  597. areaStyle: {
  598. color: 'rgba(255,215,0,0.8)'
  599. },
  600. label: {
  601. show: false,
  602. textStyle: {
  603. color: 'rgba(139,69,19,1)'
  604. }
  605. }
  606. }
  607. }
  608. },
  609. force : {
  610. // 数据map到圆的半径的最小值和最大值
  611. minRadius : 10,
  612. maxRadius : 20,
  613. density : 1.0,
  614. attractiveness : 1.0,
  615. // 初始化的随机大小位置
  616. initSize : 300,
  617. // 向心力因子,越大向心力越大
  618. centripetal : 1,
  619. // 冷却因子
  620. coolDown : 0.99,
  621. // 分类里如果有样式会覆盖节点默认样式
  622. categories : [],
  623. itemStyle: {
  624. normal: {
  625. // color: 各异,
  626. label: {
  627. show: false
  628. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  629. },
  630. nodeStyle : {
  631. brushType : 'both',
  632. color : '#f08c2e',
  633. strokeColor : '#5182ab'
  634. },
  635. linkStyle : {
  636. strokeColor : '#5182ab'
  637. }
  638. },
  639. emphasis: {
  640. // color: 各异,
  641. label: {
  642. show: false
  643. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  644. },
  645. nodeStyle : {},
  646. linkStyle : {}
  647. }
  648. }
  649. },
  650. chord : {
  651. radius : ['65%', '75%'],
  652. // Source data matrix
  653. center : ['50%', '50%'],
  654. padding : 2,
  655. sort : 'none', // can be 'none', 'ascending', 'descending'
  656. sortSub : 'none', // can be 'none', 'ascending', 'descending'
  657. startAngle : 90,
  658. clockWise : false,
  659. showScale : false,
  660. showScaleText : false,
  661. itemStyle : {
  662. normal : {
  663. label : {
  664. show : true
  665. // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
  666. },
  667. lineStyle : {
  668. width : 0,
  669. color : '#000'
  670. },
  671. chordStyle : {
  672. lineStyle : {
  673. width : 1,
  674. color : '#666'
  675. }
  676. }
  677. },
  678. emphasis : {
  679. lineStyle : {
  680. width : 0,
  681. color : '#000'
  682. },
  683. chordStyle : {
  684. lineStyle : {
  685. width : 2,
  686. color : '#333'
  687. }
  688. }
  689. }
  690. },
  691. /**
  692. * target
  693. * -1--2--3--4--5-
  694. * 1| x x x x x
  695. * 2| x x x x x
  696. * 3| x x x x x source
  697. * 4| x x x x x
  698. * 5| x x x x x
  699. *
  700. * Relation ship from source to target
  701. * https://github.com/mbostock/d3/wiki/Chord-Layout#wiki-chord
  702. *
  703. * Row based
  704. */
  705. matrix : []
  706. },
  707. island: {
  708. r: 15,
  709. calculateStep: 0.1 // 滚轮可计算步长 0.1 = 10%
  710. },
  711. textStyle: {
  712. decoration: 'none',
  713. fontFamily: 'Arial, Verdana, sans-serif',
  714. fontSize: 12,
  715. fontStyle: 'normal',
  716. fontWeight: 'normal'
  717. },
  718. EVENT: {
  719. // -------全局通用
  720. REFRESH: 'refresh',
  721. RESTORE: 'restore',
  722. CLICK: 'click',
  723. HOVER: 'hover',
  724. MOUSEWHEEL: 'mousewheel',
  725. // -------业务交互逻辑
  726. DATA_CHANGED: 'dataChanged',
  727. DATA_ZOOM: 'dataZoom',
  728. DATA_RANGE: 'dataRange',
  729. LEGEND_SELECTED: 'legendSelected',
  730. MAP_SELECTED: 'mapSelected',
  731. PIE_SELECTED: 'pieSelected',
  732. MAGIC_TYPE_CHANGED: 'magicTypeChanged',
  733. DATA_VIEW_CHANGED: 'dataViewChanged',
  734. // -------内部通信
  735. TOOLTIP_HOVER: 'tooltipHover'
  736. },
  737. // 可计算特性配置,孤岛,提示颜色
  738. calculable: false, // 默认开启可计算特性
  739. calculableColor: 'rgba(255,165,0,0.6)', // 拖拽提示边框颜色
  740. calculableHolderColor: '#ccc', // 可计算占位提示颜色
  741. nameConnector: ' & ',
  742. valueConnector: ' : ',
  743. animation: true,
  744. addDataAnimation: true, // 动态数据接口是否开启动画效果
  745. animationDuration: 2000,
  746. animationEasing: 'ExponentialOut' //BounceOut
  747. };
  748. return config;
  749. });
  750. // Copyright 2006 Google Inc.
  751. //
  752. // Licensed under the Apache License, Version 2.0 (the "License");
  753. // you may not use this file except in compliance with the License.
  754. // You may obtain a copy of the License at
  755. //
  756. // http://www.apache.org/licenses/LICENSE-2.0
  757. //
  758. // Unless required by applicable law or agreed to in writing, software
  759. // distributed under the License is distributed on an "AS IS" BASIS,
  760. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  761. // See the License for the specific language governing permissions and
  762. // limitations under the License.
  763. // Known Issues:
  764. //
  765. // * Patterns only support repeat.
  766. // * Radial gradient are not implemented. The VML version of these look very
  767. // different from the canvas one.
  768. // * Clipping paths are not implemented.
  769. // * Coordsize. The width and height attribute have higher priority than the
  770. // width and height style values which isn't correct.
  771. // * Painting mode isn't implemented.
  772. // * Canvas width/height should is using content-box by default. IE in
  773. // Quirks mode will draw the canvas using border-box. Either change your
  774. // doctype to HTML5
  775. // (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
  776. // or use Box Sizing Behavior from WebFX
  777. // (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
  778. // * Non uniform scaling does not correctly scale strokes.
  779. // * Optimize. There is always room for speed improvements.
  780. // AMD by kener.linfeng@gmail.com
  781. define('zrender/lib/excanvas',['require'],function(require) {
  782. // Only add this code if we do not already have a canvas implementation
  783. if (!document.createElement('canvas').getContext) {
  784. (function() {
  785. // alias some functions to make (compiled) code shorter
  786. var m = Math;
  787. var mr = m.round;
  788. var ms = m.sin;
  789. var mc = m.cos;
  790. var abs = m.abs;
  791. var sqrt = m.sqrt;
  792. // this is used for sub pixel precision
  793. var Z = 10;
  794. var Z2 = Z / 2;
  795. var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
  796. /**
  797. * This funtion is assigned to the <canvas> elements as element.getContext().
  798. * @this {HTMLElement}
  799. * @return {CanvasRenderingContext2D_}
  800. */
  801. function getContext() {
  802. return this.context_ ||
  803. (this.context_ = new CanvasRenderingContext2D_(this));
  804. }
  805. var slice = Array.prototype.slice;
  806. /**
  807. * Binds a function to an object. The returned function will always use the
  808. * passed in {@code obj} as {@code this}.
  809. *
  810. * Example:
  811. *
  812. * g = bind(f, obj, a, b)
  813. * g(c, d) // will do f.call(obj, a, b, c, d)
  814. *
  815. * @param {Function} f The function to bind the object to
  816. * @param {Object} obj The object that should act as this when the function
  817. * is called
  818. * @param {*} var_args Rest arguments that will be used as the initial
  819. * arguments when the function is called
  820. * @return {Function} A new function that has bound this
  821. */
  822. function bind(f, obj, var_args) {
  823. var a = slice.call(arguments, 2);
  824. return function() {
  825. return f.apply(obj, a.concat(slice.call(arguments)));
  826. };
  827. }
  828. function encodeHtmlAttribute(s) {
  829. return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
  830. }
  831. function addNamespace(doc, prefix, urn) {
  832. if (!doc.namespaces[prefix]) {
  833. doc.namespaces.add(prefix, urn, '#default#VML');
  834. }
  835. }
  836. function addNamespacesAndStylesheet(doc) {
  837. addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
  838. addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
  839. // Setup default CSS. Only add one style sheet per document
  840. if (!doc.styleSheets['ex_canvas_']) {
  841. var ss = doc.createStyleSheet();
  842. ss.owningElement.id = 'ex_canvas_';
  843. ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
  844. // default size is 300x150 in Gecko and Opera
  845. 'text-align:left;width:300px;height:150px}';
  846. }
  847. }
  848. // Add namespaces and stylesheet at startup.
  849. addNamespacesAndStylesheet(document);
  850. var G_vmlCanvasManager_ = {
  851. init: function(opt_doc) {
  852. var doc = opt_doc || document;
  853. // Create a dummy element so that IE will allow canvas elements to be
  854. // recognized.
  855. doc.createElement('canvas');
  856. doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
  857. },
  858. init_: function(doc) {
  859. // find all canvas elements
  860. var els = doc.getElementsByTagName('canvas');
  861. for (var i = 0; i < els.length; i++) {
  862. this.initElement(els[i]);
  863. }
  864. },
  865. /**
  866. * Public initializes a canvas element so that it can be used as canvas
  867. * element from now on. This is called automatically before the page is
  868. * loaded but if you are creating elements using createElement you need to
  869. * make sure this is called on the element.
  870. * @param {HTMLElement} el The canvas element to initialize.
  871. * @return {HTMLElement} the element that was created.
  872. */
  873. initElement: function(el) {
  874. if (!el.getContext) {
  875. el.getContext = getContext;
  876. // Add namespaces and stylesheet to document of the element.
  877. addNamespacesAndStylesheet(el.ownerDocument);
  878. // Remove fallback content. There is no way to hide text nodes so we
  879. // just remove all childNodes. We could hide all elements and remove
  880. // text nodes but who really cares about the fallback content.
  881. el.innerHTML = '';
  882. // do not use inline function because that will leak memory
  883. el.attachEvent('onpropertychange', onPropertyChange);
  884. el.attachEvent('onresize', onResize);
  885. var attrs = el.attributes;
  886. if (attrs.width && attrs.width.specified) {
  887. // TODO: use runtimeStyle and coordsize
  888. // el.getContext().setWidth_(attrs.width.nodeValue);
  889. el.style.width = attrs.width.nodeValue + 'px';
  890. } else {
  891. el.width = el.clientWidth;
  892. }
  893. if (attrs.height && attrs.height.specified) {
  894. // TODO: use runtimeStyle and coordsize
  895. // el.getContext().setHeight_(attrs.height.nodeValue);
  896. el.style.height = attrs.height.nodeValue + 'px';
  897. } else {
  898. el.height = el.clientHeight;
  899. }
  900. //el.getContext().setCoordsize_()
  901. }
  902. return el;
  903. }
  904. };
  905. function onPropertyChange(e) {
  906. var el = e.srcElement;
  907. switch (e.propertyName) {
  908. case 'width':
  909. el.getContext().clearRect();
  910. el.style.width = el.attributes.width.nodeValue + 'px';
  911. // In IE8 this does not trigger onresize.
  912. el.firstChild.style.width = el.clientWidth + 'px';
  913. break;
  914. case 'height':
  915. el.getContext().clearRect();
  916. el.style.height = el.attributes.height.nodeValue + 'px';
  917. el.firstChild.style.height = el.clientHeight + 'px';
  918. break;
  919. }
  920. }
  921. function onResize(e) {
  922. var el = e.srcElement;
  923. if (el.firstChild) {
  924. el.firstChild.style.width = el.clientWidth + 'px';
  925. el.firstChild.style.height = el.clientHeight + 'px';
  926. }
  927. }
  928. G_vmlCanvasManager_.init();
  929. // precompute "00" to "FF"
  930. var decToHex = [];
  931. for (var i = 0; i < 16; i++) {
  932. for (var j = 0; j < 16; j++) {
  933. decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
  934. }
  935. }
  936. function createMatrixIdentity() {
  937. return [
  938. [1, 0, 0],
  939. [0, 1, 0],
  940. [0, 0, 1]
  941. ];
  942. }
  943. function matrixMultiply(m1, m2) {
  944. var result = createMatrixIdentity();
  945. for (var x = 0; x < 3; x++) {
  946. for (var y = 0; y < 3; y++) {
  947. var sum = 0;
  948. for (var z = 0; z < 3; z++) {
  949. sum += m1[x][z] * m2[z][y];
  950. }
  951. result[x][y] = sum;
  952. }
  953. }
  954. return result;
  955. }
  956. function copyState(o1, o2) {
  957. o2.fillStyle = o1.fillStyle;
  958. o2.lineCap = o1.lineCap;
  959. o2.lineJoin = o1.lineJoin;
  960. o2.lineWidth = o1.lineWidth;
  961. o2.miterLimit = o1.miterLimit;
  962. o2.shadowBlur = o1.shadowBlur;
  963. o2.shadowColor = o1.shadowColor;
  964. o2.shadowOffsetX = o1.shadowOffsetX;
  965. o2.shadowOffsetY = o1.shadowOffsetY;
  966. o2.strokeStyle = o1.strokeStyle;
  967. o2.globalAlpha = o1.globalAlpha;
  968. o2.font = o1.font;
  969. o2.textAlign = o1.textAlign;
  970. o2.textBaseline = o1.textBaseline;
  971. o2.arcScaleX_ = o1.arcScaleX_;
  972. o2.arcScaleY_ = o1.arcScaleY_;
  973. o2.lineScale_ = o1.lineScale_;
  974. }
  975. var colorData = {
  976. aliceblue: '#F0F8FF',
  977. antiquewhite: '#FAEBD7',
  978. aquamarine: '#7FFFD4',
  979. azure: '#F0FFFF',
  980. beige: '#F5F5DC',
  981. bisque: '#FFE4C4',
  982. black: '#000000',
  983. blanchedalmond: '#FFEBCD',
  984. blueviolet: '#8A2BE2',
  985. brown: '#A52A2A',
  986. burlywood: '#DEB887',
  987. cadetblue: '#5F9EA0',
  988. chartreuse: '#7FFF00',
  989. chocolate: '#D2691E',
  990. coral: '#FF7F50',
  991. cornflowerblue: '#6495ED',
  992. cornsilk: '#FFF8DC',
  993. crimson: '#DC143C',
  994. cyan: '#00FFFF',
  995. darkblue: '#00008B',
  996. darkcyan: '#008B8B',
  997. darkgoldenrod: '#B8860B',
  998. darkgray: '#A9A9A9',
  999. darkgreen: '#006400',
  1000. darkgrey: '#A9A9A9',
  1001. darkkhaki: '#BDB76B',
  1002. darkmagenta: '#8B008B',
  1003. darkolivegreen: '#556B2F',
  1004. darkorange: '#FF8C00',
  1005. darkorchid: '#9932CC',
  1006. darkred: '#8B0000',
  1007. darksalmon: '#E9967A',
  1008. darkseagreen: '#8FBC8F',
  1009. darkslateblue: '#483D8B',
  1010. darkslategray: '#2F4F4F',
  1011. darkslategrey: '#2F4F4F',
  1012. darkturquoise: '#00CED1',
  1013. darkviolet: '#9400D3',
  1014. deeppink: '#FF1493',
  1015. deepskyblue: '#00BFFF',
  1016. dimgray: '#696969',
  1017. dimgrey: '#696969',
  1018. dodgerblue: '#1E90FF',
  1019. firebrick: '#B22222',
  1020. floralwhite: '#FFFAF0',
  1021. forestgreen: '#228B22',
  1022. gainsboro: '#DCDCDC',
  1023. ghostwhite: '#F8F8FF',
  1024. gold: '#FFD700',
  1025. goldenrod: '#DAA520',
  1026. grey: '#808080',
  1027. greenyellow: '#ADFF2F',
  1028. honeydew: '#F0FFF0',
  1029. hotpink: '#FF69B4',
  1030. indianred: '#CD5C5C',
  1031. indigo: '#4B0082',
  1032. ivory: '#FFFFF0',
  1033. khaki: '#F0E68C',
  1034. lavender: '#E6E6FA',
  1035. lavenderblush: '#FFF0F5',
  1036. lawngreen: '#7CFC00',
  1037. lemonchiffon: '#FFFACD',
  1038. lightblue: '#ADD8E6',
  1039. lightcoral: '#F08080',
  1040. lightcyan: '#E0FFFF',
  1041. lightgoldenrodyellow: '#FAFAD2',
  1042. lightgreen: '#90EE90',
  1043. lightgrey: '#D3D3D3',
  1044. lightpink: '#FFB6C1',
  1045. lightsalmon: '#FFA07A',
  1046. lightseagreen: '#20B2AA',
  1047. lightskyblue: '#87CEFA',
  1048. lightslategray: '#778899',
  1049. lightslategrey: '#778899',
  1050. lightsteelblue: '#B0C4DE',
  1051. lightyellow: '#FFFFE0',
  1052. limegreen: '#32CD32',
  1053. linen: '#FAF0E6',
  1054. magenta: '#FF00FF',
  1055. mediumaquamarine: '#66CDAA',
  1056. mediumblue: '#0000CD',
  1057. mediumorchid: '#BA55D3',
  1058. mediumpurple: '#9370DB',
  1059. mediumseagreen: '#3CB371',
  1060. mediumslateblue: '#7B68EE',
  1061. mediumspringgreen: '#00FA9A',
  1062. mediumturquoise: '#48D1CC',
  1063. mediumvioletred: '#C71585',
  1064. midnightblue: '#191970',
  1065. mintcream: '#F5FFFA',
  1066. mistyrose: '#FFE4E1',
  1067. moccasin: '#FFE4B5',
  1068. navajowhite: '#FFDEAD',
  1069. oldlace: '#FDF5E6',
  1070. olivedrab: '#6B8E23',
  1071. orange: '#FFA500',
  1072. orangered: '#FF4500',
  1073. orchid: '#DA70D6',
  1074. palegoldenrod: '#EEE8AA',
  1075. palegreen: '#98FB98',
  1076. paleturquoise: '#AFEEEE',
  1077. palevioletred: '#DB7093',
  1078. papayawhip: '#FFEFD5',
  1079. peachpuff: '#FFDAB9',
  1080. peru: '#CD853F',
  1081. pink: '#FFC0CB',
  1082. plum: '#DDA0DD',
  1083. powderblue: '#B0E0E6',
  1084. rosybrown: '#BC8F8F',
  1085. royalblue: '#4169E1',
  1086. saddlebrown: '#8B4513',
  1087. salmon: '#FA8072',
  1088. sandybrown: '#F4A460',
  1089. seagreen: '#2E8B57',
  1090. seashell: '#FFF5EE',
  1091. sienna: '#A0522D',
  1092. skyblue: '#87CEEB',
  1093. slateblue: '#6A5ACD',
  1094. slategray: '#708090',
  1095. slategrey: '#708090',
  1096. snow: '#FFFAFA',
  1097. springgreen: '#00FF7F',
  1098. steelblue: '#4682B4',
  1099. tan: '#D2B48C',
  1100. thistle: '#D8BFD8',
  1101. tomato: '#FF6347',
  1102. turquoise: '#40E0D0',
  1103. violet: '#EE82EE',
  1104. wheat: '#F5DEB3',
  1105. whitesmoke: '#F5F5F5',
  1106. yellowgreen: '#9ACD32'
  1107. };
  1108. function getRgbHslContent(styleString) {
  1109. var start = styleString.indexOf('(', 3);
  1110. var end = styleString.indexOf(')', start + 1);
  1111. var parts = styleString.substring(start + 1, end).split(',');
  1112. // add alpha if needed
  1113. if (parts.length != 4 || styleString.charAt(3) != 'a') {
  1114. parts[3] = 1;
  1115. }
  1116. return parts;
  1117. }
  1118. function percent(s) {
  1119. return parseFloat(s) / 100;
  1120. }
  1121. function clamp(v, min, max) {
  1122. return Math.min(max, Math.max(min, v));
  1123. }
  1124. function hslToRgb(parts){
  1125. var r, g, b, h, s, l;
  1126. h = parseFloat(parts[0]) / 360 % 360;
  1127. if (h < 0)
  1128. h++;
  1129. s = clamp(percent(parts[1]), 0, 1);
  1130. l = clamp(percent(parts[2]), 0, 1);
  1131. if (s == 0) {
  1132. r = g = b = l; // achromatic
  1133. } else {
  1134. var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
  1135. var p = 2 * l - q;
  1136. r = hueToRgb(p, q, h + 1 / 3);
  1137. g = hueToRgb(p, q, h);
  1138. b = hueToRgb(p, q, h - 1 / 3);
  1139. }
  1140. return '#' + decToHex[Math.floor(r * 255)] +
  1141. decToHex[Math.floor(g * 255)] +
  1142. decToHex[Math.floor(b * 255)];
  1143. }
  1144. function hueToRgb(m1, m2, h) {
  1145. if (h < 0)
  1146. h++;
  1147. if (h > 1)
  1148. h--;
  1149. if (6 * h < 1)
  1150. return m1 + (m2 - m1) * 6 * h;
  1151. else if (2 * h < 1)
  1152. return m2;
  1153. else if (3 * h < 2)
  1154. return m1 + (m2 - m1) * (2 / 3 - h) * 6;
  1155. else
  1156. return m1;
  1157. }
  1158. var processStyleCache = {};
  1159. function processStyle(styleString) {
  1160. if (styleString in processStyleCache) {
  1161. return processStyleCache[styleString];
  1162. }
  1163. var str, alpha = 1;
  1164. styleString = String(styleString);
  1165. if (styleString.charAt(0) == '#') {
  1166. str = styleString;
  1167. } else if (/^rgb/.test(styleString)) {
  1168. var parts = getRgbHslContent(styleString);
  1169. var str = '#', n;
  1170. for (var i = 0; i < 3; i++) {
  1171. if (parts[i].indexOf('%') != -1) {
  1172. n = Math.floor(percent(parts[i]) * 255);
  1173. } else {
  1174. n = +parts[i];
  1175. }
  1176. str += decToHex[clamp(n, 0, 255)];
  1177. }
  1178. alpha = +parts[3];
  1179. } else if (/^hsl/.test(styleString)) {
  1180. var parts = getRgbHslContent(styleString);
  1181. str = hslToRgb(parts);
  1182. alpha = parts[3];
  1183. } else {
  1184. str = colorData[styleString] || styleString;
  1185. }
  1186. return processStyleCache[styleString] = {color: str, alpha: alpha};
  1187. }
  1188. var DEFAULT_STYLE = {
  1189. style: 'normal',
  1190. variant: 'normal',
  1191. weight: 'normal',
  1192. size: 10,
  1193. family: 'sans-serif'
  1194. };
  1195. // Internal text style cache
  1196. var fontStyleCache = {};
  1197. function processFontStyle(styleString) {
  1198. if (fontStyleCache[styleString]) {
  1199. return fontStyleCache[styleString];
  1200. }
  1201. var el = document.createElement('div');
  1202. var style = el.style;
  1203. try {
  1204. style.font = styleString;
  1205. } catch (ex) {
  1206. // Ignore failures to set to invalid font.
  1207. }
  1208. return fontStyleCache[styleString] = {
  1209. style: style.fontStyle || DEFAULT_STYLE.style,
  1210. variant: style.fontVariant || DEFAULT_STYLE.variant,
  1211. weight: style.fontWeight || DEFAULT_STYLE.weight,
  1212. size: style.fontSize || DEFAULT_STYLE.size,
  1213. family: style.fontFamily || DEFAULT_STYLE.family
  1214. };
  1215. }
  1216. function getComputedStyle(style, element) {
  1217. var computedStyle = {};
  1218. for (var p in style) {
  1219. computedStyle[p] = style[p];
  1220. }
  1221. // Compute the size
  1222. var canvasFontSize = parseFloat(element.currentStyle.fontSize),
  1223. fontSize = parseFloat(style.size);
  1224. if (typeof style.size == 'number') {
  1225. computedStyle.size = style.size;
  1226. } else if (style.size.indexOf('px') != -1) {
  1227. computedStyle.size = fontSize;
  1228. } else if (style.size.indexOf('em') != -1) {
  1229. computedStyle.size = canvasFontSize * fontSize;
  1230. } else if(style.size.indexOf('%') != -1) {
  1231. computedStyle.size = (canvasFontSize / 100) * fontSize;
  1232. } else if (style.size.indexOf('pt') != -1) {
  1233. computedStyle.size = fontSize / .75;
  1234. } else {
  1235. computedStyle.size = canvasFontSize;
  1236. }
  1237. // Different scaling between normal text and VML text. This was found using
  1238. // trial and error to get the same size as non VML text.
  1239. computedStyle.size *= 0.981;
  1240. return computedStyle;
  1241. }
  1242. function buildStyle(style) {
  1243. return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
  1244. style.size + 'px ' + style.family;
  1245. }
  1246. var lineCapMap = {
  1247. 'butt': 'flat',
  1248. 'round': 'round'
  1249. };
  1250. function processLineCap(lineCap) {
  1251. return lineCapMap[lineCap] || 'square';
  1252. }
  1253. /**
  1254. * This class implements CanvasRenderingContext2D interface as described by
  1255. * the WHATWG.
  1256. * @param {HTMLElement} canvasElement The element that the 2D context should
  1257. * be associated with
  1258. */
  1259. function CanvasRenderingContext2D_(canvasElement) {
  1260. this.m_ = createMatrixIdentity();
  1261. this.mStack_ = [];
  1262. this.aStack_ = [];
  1263. this.currentPath_ = [];
  1264. // Canvas context properties
  1265. this.strokeStyle = '#000';
  1266. this.fillStyle = '#000';
  1267. this.lineWidth = 1;
  1268. this.lineJoin = 'miter';
  1269. this.lineCap = 'butt';
  1270. this.miterLimit = Z * 1;
  1271. this.globalAlpha = 1;
  1272. this.font = '10px sans-serif';
  1273. this.textAlign = 'left';
  1274. this.textBaseline = 'alphabetic';
  1275. this.canvas = canvasElement;
  1276. var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
  1277. canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
  1278. var el = canvasElement.ownerDocument.createElement('div');
  1279. el.style.cssText = cssText;
  1280. canvasElement.appendChild(el);
  1281. var overlayEl = el.cloneNode(false);
  1282. // Use a non transparent background.
  1283. overlayEl.style.backgroundColor = 'red';
  1284. overlayEl.style.filter = 'alpha(opacity=0)';
  1285. canvasElement.appendChild(overlayEl);
  1286. this.element_ = el;
  1287. this.arcScaleX_ = 1;
  1288. this.arcScaleY_ = 1;
  1289. this.lineScale_ = 1;
  1290. }
  1291. var contextPrototype = CanvasRenderingContext2D_.prototype;
  1292. contextPrototype.clearRect = function() {
  1293. if (this.textMeasureEl_) {
  1294. this.textMeasureEl_.removeNode(true);
  1295. this.textMeasureEl_ = null;
  1296. }
  1297. this.element_.innerHTML = '';
  1298. };
  1299. contextPrototype.beginPath = function() {
  1300. // TODO: Branch current matrix so that save/restore has no effect
  1301. // as per safari docs.
  1302. this.currentPath_ = [];
  1303. };
  1304. contextPrototype.moveTo = function(aX, aY) {
  1305. var p = getCoords(this, aX, aY);
  1306. this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
  1307. this.currentX_ = p.x;
  1308. this.currentY_ = p.y;
  1309. };
  1310. contextPrototype.lineTo = function(aX, aY) {
  1311. var p = getCoords(this, aX, aY);
  1312. this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
  1313. this.currentX_ = p.x;
  1314. this.currentY_ = p.y;
  1315. };
  1316. contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
  1317. aCP2x, aCP2y,
  1318. aX, aY) {
  1319. var p = getCoords(this, aX, aY);
  1320. var cp1 = getCoords(this, aCP1x, aCP1y);
  1321. var cp2 = getCoords(this, aCP2x, aCP2y);
  1322. bezierCurveTo(this, cp1, cp2, p);
  1323. };
  1324. // Helper function that takes the already fixed cordinates.
  1325. function bezierCurveTo(self, cp1, cp2, p) {
  1326. self.currentPath_.push({
  1327. type: 'bezierCurveTo',
  1328. cp1x: cp1.x,
  1329. cp1y: cp1.y,
  1330. cp2x: cp2.x,
  1331. cp2y: cp2.y,
  1332. x: p.x,
  1333. y: p.y
  1334. });
  1335. self.currentX_ = p.x;
  1336. self.currentY_ = p.y;
  1337. }
  1338. contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
  1339. // the following is lifted almost directly from
  1340. // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
  1341. var cp = getCoords(this, aCPx, aCPy);
  1342. var p = getCoords(this, aX, aY);
  1343. var cp1 = {
  1344. x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
  1345. y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
  1346. };
  1347. var cp2 = {
  1348. x: cp1.x + (p.x - this.currentX_) / 3.0,
  1349. y: cp1.y + (p.y - this.currentY_) / 3.0
  1350. };
  1351. bezierCurveTo(this, cp1, cp2, p);
  1352. };
  1353. contextPrototype.arc = function(aX, aY, aRadius,
  1354. aStartAngle, aEndAngle, aClockwise) {
  1355. aRadius *= Z;
  1356. var arcType = aClockwise ? 'at' : 'wa';
  1357. var xStart = aX + mc(aStartAngle) * aRadius - Z2;
  1358. var yStart = aY + ms(aStartAngle) * aRadius - Z2;
  1359. var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
  1360. var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
  1361. // IE won't render arches drawn counter clockwise if xStart == xEnd.
  1362. if (xStart == xEnd && !aClockwise) {
  1363. xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
  1364. // that can be represented in binary
  1365. }
  1366. var p = getCoords(this, aX, aY);
  1367. var pStart = getCoords(this, xStart, yStart);
  1368. var pEnd = getCoords(this, xEnd, yEnd);
  1369. this.currentPath_.push({type: arcType,
  1370. x: p.x,
  1371. y: p.y,
  1372. radius: aRadius,
  1373. xStart: pStart.x,
  1374. yStart: pStart.y,
  1375. xEnd: pEnd.x,
  1376. yEnd: pEnd.y});
  1377. };
  1378. contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
  1379. this.moveTo(aX, aY);
  1380. this.lineTo(aX + aWidth, aY);
  1381. this.lineTo(aX + aWidth, aY + aHeight);
  1382. this.lineTo(aX, aY + aHeight);
  1383. this.closePath();
  1384. };
  1385. contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
  1386. var oldPath = this.currentPath_;
  1387. this.beginPath();
  1388. this.moveTo(aX, aY);
  1389. this.lineTo(aX + aWidth, aY);
  1390. this.lineTo(aX + aWidth, aY + aHeight);
  1391. this.lineTo(aX, aY + aHeight);
  1392. this.closePath();
  1393. this.stroke();
  1394. this.currentPath_ = oldPath;
  1395. };
  1396. contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
  1397. var oldPath = this.currentPath_;
  1398. this.beginPath();
  1399. this.moveTo(aX, aY);
  1400. this.lineTo(aX + aWidth, aY);
  1401. this.lineTo(aX + aWidth, aY + aHeight);
  1402. this.lineTo(aX, aY + aHeight);
  1403. this.closePath();
  1404. this.fill();
  1405. this.currentPath_ = oldPath;
  1406. };
  1407. contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
  1408. var gradient = new CanvasGradient_('gradient');
  1409. gradient.x0_ = aX0;
  1410. gradient.y0_ = aY0;
  1411. gradient.x1_ = aX1;
  1412. gradient.y1_ = aY1;
  1413. return gradient;
  1414. };
  1415. contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
  1416. aX1, aY1, aR1) {
  1417. var gradient = new CanvasGradient_('gradientradial');
  1418. gradient.x0_ = aX0;
  1419. gradient.y0_ = aY0;
  1420. gradient.r0_ = aR0;
  1421. gradient.x1_ = aX1;
  1422. gradient.y1_ = aY1;
  1423. gradient.r1_ = aR1;
  1424. return gradient;
  1425. };
  1426. contextPrototype.drawImage = function(image, var_args) {
  1427. var dx, dy, dw, dh, sx, sy, sw, sh;
  1428. // to find the original width we overide the width and height
  1429. var oldRuntimeWidth = image.runtimeStyle.width;
  1430. var oldRuntimeHeight = image.runtimeStyle.height;
  1431. image.runtimeStyle.width = 'auto';
  1432. image.runtimeStyle.height = 'auto';
  1433. // get the original size
  1434. var w = image.width;
  1435. var h = image.height;
  1436. // and remove overides
  1437. image.runtimeStyle.width = oldRuntimeWidth;
  1438. image.runtimeStyle.height = oldRuntimeHeight;
  1439. if (arguments.length == 3) {
  1440. dx = arguments[1];
  1441. dy = arguments[2];
  1442. sx = sy = 0;
  1443. sw = dw = w;
  1444. sh = dh = h;
  1445. } else if (arguments.length == 5) {
  1446. dx = arguments[1];
  1447. dy = arguments[2];
  1448. dw = arguments[3];
  1449. dh = arguments[4];
  1450. sx = sy = 0;
  1451. sw = w;
  1452. sh = h;
  1453. } else if (arguments.length == 9) {
  1454. sx = arguments[1];
  1455. sy = arguments[2];
  1456. sw = arguments[3];
  1457. sh = arguments[4];
  1458. dx = arguments[5];
  1459. dy = arguments[6];
  1460. dw = arguments[7];
  1461. dh = arguments[8];
  1462. } else {
  1463. throw Error('Invalid number of arguments');
  1464. }
  1465. var d = getCoords(this, dx, dy);
  1466. var w2 = sw / 2;
  1467. var h2 = sh / 2;
  1468. var vmlStr = [];
  1469. var W = 10;
  1470. var H = 10;
  1471. // For some reason that I've now forgotten, using divs didn't work
  1472. vmlStr.push(' <g_vml_:group',
  1473. ' coordsize="', Z * W, ',', Z * H, '"',
  1474. ' coordorigin="0,0"' ,
  1475. ' style="width:', W, 'px;height:', H, 'px;position:absolute;');
  1476. // If filters are necessary (rotation exists), create them
  1477. // filters are bog-slow, so only create them if abbsolutely necessary
  1478. // The following check doesn't account for skews (which don't exist
  1479. // in the canvas spec (yet) anyway.
  1480. if (this.m_[0][0] != 1 || this.m_[0][1] ||
  1481. this.m_[1][1] != 1 || this.m_[1][0]) {
  1482. var filter = [];
  1483. // Note the 12/21 reversal
  1484. filter.push('M11=', this.m_[0][0], ',',
  1485. 'M12=', this.m_[1][0], ',',
  1486. 'M21=', this.m_[0][1], ',',
  1487. 'M22=', this.m_[1][1], ',',
  1488. 'Dx=', mr(d.x / Z), ',',
  1489. 'Dy=', mr(d.y / Z), '');
  1490. // Bounding box calculation (need to minimize displayed area so that
  1491. // filters don't waste time on unused pixels.
  1492. var max = d;
  1493. var c2 = getCoords(this, dx + dw, dy);
  1494. var c3 = getCoords(this, dx, dy + dh);
  1495. var c4 = getCoords(this, dx + dw, dy + dh);
  1496. max.x = m.max(max.x, c2.x, c3.x, c4.x);
  1497. max.y = m.max(max.y, c2.y, c3.y, c4.y);
  1498. vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
  1499. 'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
  1500. filter.join(''), ", sizingmethod='clip');");
  1501. } else {
  1502. vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
  1503. }
  1504. vmlStr.push(' ">' ,
  1505. '<g_vml_:image src="', image.src, '"',
  1506. ' style="width:', Z * dw, 'px;',
  1507. ' height:', Z * dh, 'px"',
  1508. ' cropleft="', sx / w, '"',
  1509. ' croptop="', sy / h, '"',
  1510. ' cropright="', (w - sx - sw) / w, '"',
  1511. ' cropbottom="', (h - sy - sh) / h, '"',
  1512. ' />',
  1513. '</g_vml_:group>');
  1514. this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
  1515. };
  1516. contextPrototype.stroke = function(aFill) {
  1517. var lineStr = [];
  1518. var lineOpen = false;
  1519. var W = 10;
  1520. var H = 10;
  1521. lineStr.push('<g_vml_:shape',
  1522. ' filled="', !!aFill, '"',
  1523. ' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
  1524. ' coordorigin="0,0"',
  1525. ' coordsize="', Z * W, ',', Z * H, '"',
  1526. ' stroked="', !aFill, '"',
  1527. ' path="');
  1528. var newSeq = false;
  1529. var min = {x: null, y: null};
  1530. var max = {x: null, y: null};
  1531. for (var i = 0; i < this.currentPath_.length; i++) {
  1532. var p = this.currentPath_[i];
  1533. var c;
  1534. switch (p.type) {
  1535. case 'moveTo':
  1536. c = p;
  1537. lineStr.push(' m ', mr(p.x), ',', mr(p.y));
  1538. break;
  1539. case 'lineTo':
  1540. lineStr.push(' l ', mr(p.x), ',', mr(p.y));
  1541. break;
  1542. case 'close':
  1543. lineStr.push(' x ');
  1544. p = null;
  1545. break;
  1546. case 'bezierCurveTo':
  1547. lineStr.push(' c ',
  1548. mr(p.cp1x), ',', mr(p.cp1y), ',',
  1549. mr(p.cp2x), ',', mr(p.cp2y), ',',
  1550. mr(p.x), ',', mr(p.y));
  1551. break;
  1552. case 'at':
  1553. case 'wa':
  1554. lineStr.push(' ', p.type, ' ',
  1555. mr(p.x - this.arcScaleX_ * p.radius), ',',
  1556. mr(p.y - this.arcScaleY_ * p.radius), ' ',
  1557. mr(p.x + this.arcScaleX_ * p.radius), ',',
  1558. mr(p.y + this.arcScaleY_ * p.radius), ' ',
  1559. mr(p.xStart), ',', mr(p.yStart), ' ',
  1560. mr(p.xEnd), ',', mr(p.yEnd));
  1561. break;
  1562. }
  1563. // TODO: Following is broken for curves due to
  1564. // move to proper paths.
  1565. // Figure out dimensions so we can do gradient fills
  1566. // properly
  1567. if (p) {
  1568. if (min.x == null || p.x < min.x) {
  1569. min.x = p.x;
  1570. }
  1571. if (max.x == null || p.x > max.x) {
  1572. max.x = p.x;
  1573. }
  1574. if (min.y == null || p.y < min.y) {
  1575. min.y = p.y;
  1576. }
  1577. if (max.y == null || p.y > max.y) {
  1578. max.y = p.y;
  1579. }
  1580. }
  1581. }
  1582. lineStr.push(' ">');
  1583. if (!aFill) {
  1584. appendStroke(this, lineStr);
  1585. } else {
  1586. appendFill(this, lineStr, min, max);
  1587. }
  1588. lineStr.push('</g_vml_:shape>');
  1589. this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
  1590. };
  1591. function appendStroke(ctx, lineStr) {
  1592. var a = processStyle(ctx.strokeStyle);
  1593. var color = a.color;
  1594. var opacity = a.alpha * ctx.globalAlpha;
  1595. var lineWidth = ctx.lineScale_ * ctx.lineWidth;
  1596. // VML cannot correctly render a line if the width is less than 1px.
  1597. // In that case, we dilute the color to make the line look thinner.
  1598. if (lineWidth < 1) {
  1599. opacity *= lineWidth;
  1600. }
  1601. lineStr.push(
  1602. '<g_vml_:stroke',
  1603. ' opacity="', opacity, '"',
  1604. ' joinstyle="', ctx.lineJoin, '"',
  1605. ' miterlimit="', ctx.miterLimit, '"',
  1606. ' endcap="', processLineCap(ctx.lineCap), '"',
  1607. ' weight="', lineWidth, 'px"',
  1608. ' color="', color, '" />'
  1609. );
  1610. }
  1611. function appendFill(ctx, lineStr, min, max) {
  1612. var fillStyle = ctx.fillStyle;
  1613. var arcScaleX = ctx.arcScaleX_;
  1614. var arcScaleY = ctx.arcScaleY_;
  1615. var width = max.x - min.x;
  1616. var height = max.y - min.y;
  1617. if (fillStyle instanceof CanvasGradient_) {
  1618. // TODO: Gradients transformed with the transformation matrix.
  1619. var angle = 0;
  1620. var focus = {x: 0, y: 0};
  1621. // additional offset
  1622. var shift = 0;
  1623. // scale factor for offset
  1624. var expansion = 1;
  1625. if (fillStyle.type_ == 'gradient') {
  1626. var x0 = fillStyle.x0_ / arcScaleX;
  1627. var y0 = fillStyle.y0_ / arcScaleY;
  1628. var x1 = fillStyle.x1_ / arcScaleX;
  1629. var y1 = fillStyle.y1_ / arcScaleY;
  1630. var p0 = getCoords(ctx, x0, y0);
  1631. var p1 = getCoords(ctx, x1, y1);
  1632. var dx = p1.x - p0.x;
  1633. var dy = p1.y - p0.y;
  1634. angle = Math.atan2(dx, dy) * 180 / Math.PI;
  1635. // The angle should be a non-negative number.
  1636. if (angle < 0) {
  1637. angle += 360;
  1638. }
  1639. // Very small angles produce an unexpected result because they are
  1640. // converted to a scientific notation string.
  1641. if (angle < 1e-6) {
  1642. angle = 0;
  1643. }
  1644. } else {
  1645. var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
  1646. focus = {
  1647. x: (p0.x - min.x) / width,
  1648. y: (p0.y - min.y) / height
  1649. };
  1650. width /= arcScaleX * Z;
  1651. height /= arcScaleY * Z;
  1652. var dimension = m.max(width, height);
  1653. shift = 2 * fillStyle.r0_ / dimension;
  1654. expansion = 2 * fillStyle.r1_ / dimension - shift;
  1655. }
  1656. // We need to sort the color stops in ascending order by offset,
  1657. // otherwise IE won't interpret it correctly.
  1658. var stops = fillStyle.colors_;
  1659. stops.sort(function(cs1, cs2) {
  1660. return cs1.offset - cs2.offset;
  1661. });
  1662. var length = stops.length;
  1663. var color1 = stops[0].color;
  1664. var color2 = stops[length - 1].color;
  1665. var opacity1 = stops[0].alpha * ctx.globalAlpha;
  1666. var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
  1667. var colors = [];
  1668. for (var i = 0; i < length; i++) {
  1669. var stop = stops[i];
  1670. colors.push(stop.offset * expansion + shift + ' ' + stop.color);
  1671. }
  1672. // When colors attribute is used, the meanings of opacity and o:opacity2
  1673. // are reversed.
  1674. lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
  1675. ' method="none" focus="100%"',
  1676. ' color="', color1, '"',
  1677. ' color2="', color2, '"',
  1678. ' colors="', colors.join(','), '"',
  1679. ' opacity="', opacity2, '"',
  1680. ' g_o_:opacity2="', opacity1, '"',
  1681. ' angle="', angle, '"',
  1682. ' focusposition="', focus.x, ',', focus.y, '" />');
  1683. } else if (fillStyle instanceof CanvasPattern_) {
  1684. if (width && height) {
  1685. var deltaLeft = -min.x;
  1686. var deltaTop = -min.y;
  1687. lineStr.push('<g_vml_:fill',
  1688. ' position="',
  1689. deltaLeft / width * arcScaleX * arcScaleX, ',',
  1690. deltaTop / height * arcScaleY * arcScaleY, '"',
  1691. ' type="tile"',
  1692. // TODO: Figure out the correct size to fit the scale.
  1693. //' size="', w, 'px ', h, 'px"',
  1694. ' src="', fillStyle.src_, '" />');
  1695. }
  1696. } else {
  1697. var a = processStyle(ctx.fillStyle);
  1698. var color = a.color;
  1699. var opacity = a.alpha * ctx.globalAlpha;
  1700. lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
  1701. '" />');
  1702. }
  1703. }
  1704. contextPrototype.fill = function() {
  1705. this.stroke(true);
  1706. };
  1707. contextPrototype.closePath = function() {
  1708. this.currentPath_.push({type: 'close'});
  1709. };
  1710. function getCoords(ctx, aX, aY) {
  1711. var m = ctx.m_;
  1712. return {
  1713. x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
  1714. y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
  1715. };
  1716. };
  1717. contextPrototype.save = function() {
  1718. var o = {};
  1719. copyState(this, o);
  1720. this.aStack_.push(o);
  1721. this.mStack_.push(this.m_);
  1722. this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
  1723. };
  1724. contextPrototype.restore = function() {
  1725. if (this.aStack_.length) {
  1726. copyState(this.aStack_.pop(), this);
  1727. this.m_ = this.mStack_.pop();
  1728. }
  1729. };
  1730. function matrixIsFinite(m) {
  1731. return isFinite(m[0][0]) && isFinite(m[0][1]) &&
  1732. isFinite(m[1][0]) && isFinite(m[1][1]) &&
  1733. isFinite(m[2][0]) && isFinite(m[2][1]);
  1734. }
  1735. function setM(ctx, m, updateLineScale) {
  1736. if (!matrixIsFinite(m)) {
  1737. return;
  1738. }
  1739. ctx.m_ = m;
  1740. if (updateLineScale) {
  1741. // Get the line scale.
  1742. // Determinant of this.m_ means how much the area is enlarged by the
  1743. // transformation. So its square root can be used as a scale factor
  1744. // for width.
  1745. var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
  1746. ctx.lineScale_ = sqrt(abs(det));
  1747. }
  1748. }
  1749. contextPrototype.translate = function(aX, aY) {
  1750. var m1 = [
  1751. [1, 0, 0],
  1752. [0, 1, 0],
  1753. [aX, aY, 1]
  1754. ];
  1755. setM(this, matrixMultiply(m1, this.m_), false);
  1756. };
  1757. contextPrototype.rotate = function(aRot) {
  1758. var c = mc(aRot);
  1759. var s = ms(aRot);
  1760. var m1 = [
  1761. [c, s, 0],
  1762. [-s, c, 0],
  1763. [0, 0, 1]
  1764. ];
  1765. setM(this, matrixMultiply(m1, this.m_), false);
  1766. };
  1767. contextPrototype.scale = function(aX, aY) {
  1768. this.arcScaleX_ *= aX;
  1769. this.arcScaleY_ *= aY;
  1770. var m1 = [
  1771. [aX, 0, 0],
  1772. [0, aY, 0],
  1773. [0, 0, 1]
  1774. ];
  1775. setM(this, matrixMultiply(m1, this.m_), true);
  1776. };
  1777. contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
  1778. var m1 = [
  1779. [m11, m12, 0],
  1780. [m21, m22, 0],
  1781. [dx, dy, 1]
  1782. ];
  1783. setM(this, matrixMultiply(m1, this.m_), true);
  1784. };
  1785. contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
  1786. var m = [
  1787. [m11, m12, 0],
  1788. [m21, m22, 0],
  1789. [dx, dy, 1]
  1790. ];
  1791. setM(this, m, true);
  1792. };
  1793. /**
  1794. * The text drawing function.
  1795. * The maxWidth argument isn't taken in account, since no browser supports
  1796. * it yet.
  1797. */
  1798. contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
  1799. var m = this.m_,
  1800. delta = 1000,
  1801. left = 0,
  1802. right = delta,
  1803. offset = {x: 0, y: 0},
  1804. lineStr = [];
  1805. var fontStyle = getComputedStyle(processFontStyle(this.font),
  1806. this.element_);
  1807. var fontStyleString = buildStyle(fontStyle);
  1808. var elementStyle = this.element_.currentStyle;
  1809. var textAlign = this.textAlign.toLowerCase();
  1810. switch (textAlign) {
  1811. case 'left':
  1812. case 'center':
  1813. case 'right':
  1814. break;
  1815. case 'end':
  1816. textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
  1817. break;
  1818. case 'start':
  1819. textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
  1820. break;
  1821. default:
  1822. textAlign = 'left';
  1823. }
  1824. // 1.75 is an arbitrary number, as there is no info about the text baseline
  1825. switch (this.textBaseline) {
  1826. case 'hanging':
  1827. case 'top':
  1828. offset.y = fontStyle.size / 1.75;
  1829. break;
  1830. case 'middle':
  1831. break;
  1832. default:
  1833. case null:
  1834. case 'alphabetic':
  1835. case 'ideographic':
  1836. case 'bottom':
  1837. offset.y = -fontStyle.size / 2.25;
  1838. break;
  1839. }
  1840. switch(textAlign) {
  1841. case 'right':
  1842. left = delta;
  1843. right = 0.05;
  1844. break;
  1845. case 'center':
  1846. left = right = delta / 2;
  1847. break;
  1848. }
  1849. var d = getCoords(this, x + offset.x, y + offset.y);
  1850. lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
  1851. ' coordsize="100 100" coordorigin="0 0"',
  1852. ' filled="', !stroke, '" stroked="', !!stroke,
  1853. '" style="position:absolute;width:1px;height:1px;">');
  1854. if (stroke) {
  1855. appendStroke(this, lineStr);
  1856. } else {
  1857. // TODO: Fix the min and max params.
  1858. appendFill(this, lineStr, {x: -left, y: 0},
  1859. {x: right, y: fontStyle.size});
  1860. }
  1861. var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
  1862. m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
  1863. var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
  1864. lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
  1865. ' offset="', skewOffset, '" origin="', left ,' 0" />',
  1866. '<g_vml_:path textpathok="true" />',
  1867. '<g_vml_:textpath on="true" string="',
  1868. encodeHtmlAttribute(text),
  1869. '" style="v-text-align:', textAlign,
  1870. ';font:', encodeHtmlAttribute(fontStyleString),
  1871. '" /></g_vml_:line>');
  1872. this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
  1873. };
  1874. contextPrototype.fillText = function(text, x, y, maxWidth) {
  1875. this.drawText_(text, x, y, maxWidth, false);
  1876. };
  1877. contextPrototype.strokeText = function(text, x, y, maxWidth) {
  1878. this.drawText_(text, x, y, maxWidth, true);
  1879. };
  1880. contextPrototype.measureText = function(text) {
  1881. if (!this.textMeasureEl_) {
  1882. var s = '<span style="position:absolute;' +
  1883. 'top:-20000px;left:0;padding:0;margin:0;border:none;' +
  1884. 'white-space:pre;"></span>';
  1885. this.element_.insertAdjacentHTML('beforeEnd', s);
  1886. this.textMeasureEl_ = this.element_.lastChild;
  1887. }
  1888. var doc = this.element_.ownerDocument;
  1889. this.textMeasureEl_.innerHTML = '';
  1890. this.textMeasureEl_.style.font = this.font;
  1891. // Don't use innerHTML or innerText because they allow markup/whitespace.
  1892. this.textMeasureEl_.appendChild(doc.createTextNode(text));
  1893. return {width: this.textMeasureEl_.offsetWidth};
  1894. };
  1895. /******** STUBS ********/
  1896. contextPrototype.clip = function() {
  1897. // TODO: Implement
  1898. };
  1899. contextPrototype.arcTo = function() {
  1900. // TODO: Implement
  1901. };
  1902. contextPrototype.createPattern = function(image, repetition) {
  1903. return new CanvasPattern_(image, repetition);
  1904. };
  1905. // Gradient / Pattern Stubs
  1906. function CanvasGradient_(aType) {
  1907. this.type_ = aType;
  1908. this.x0_ = 0;
  1909. this.y0_ = 0;
  1910. this.r0_ = 0;
  1911. this.x1_ = 0;
  1912. this.y1_ = 0;
  1913. this.r1_ = 0;
  1914. this.colors_ = [];
  1915. }
  1916. CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
  1917. aColor = processStyle(aColor);
  1918. this.colors_.push({offset: aOffset,
  1919. color: aColor.color,
  1920. alpha: aColor.alpha});
  1921. };
  1922. function CanvasPattern_(image, repetition) {
  1923. assertImageIsValid(image);
  1924. switch (repetition) {
  1925. case 'repeat':
  1926. case null:
  1927. case '':
  1928. this.repetition_ = 'repeat';
  1929. break
  1930. case 'repeat-x':
  1931. case 'repeat-y':
  1932. case 'no-repeat':
  1933. this.repetition_ = repetition;
  1934. break;
  1935. default:
  1936. throwException('SYNTAX_ERR');
  1937. }
  1938. this.src_ = image.src;
  1939. this.width_ = image.width;
  1940. this.height_ = image.height;
  1941. }
  1942. function throwException(s) {
  1943. throw new DOMException_(s);
  1944. }
  1945. function assertImageIsValid(img) {
  1946. if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
  1947. throwException('TYPE_MISMATCH_ERR');
  1948. }
  1949. if (img.readyState != 'complete') {
  1950. throwException('INVALID_STATE_ERR');
  1951. }
  1952. }
  1953. function DOMException_(s) {
  1954. this.code = this[s];
  1955. this.message = s +': DOM Exception ' + this.code;
  1956. }
  1957. var p = DOMException_.prototype = new Error;
  1958. p.INDEX_SIZE_ERR = 1;
  1959. p.DOMSTRING_SIZE_ERR = 2;
  1960. p.HIERARCHY_REQUEST_ERR = 3;
  1961. p.WRONG_DOCUMENT_ERR = 4;
  1962. p.INVALID_CHARACTER_ERR = 5;
  1963. p.NO_DATA_ALLOWED_ERR = 6;
  1964. p.NO_MODIFICATION_ALLOWED_ERR = 7;
  1965. p.NOT_FOUND_ERR = 8;
  1966. p.NOT_SUPPORTED_ERR = 9;
  1967. p.INUSE_ATTRIBUTE_ERR = 10;
  1968. p.INVALID_STATE_ERR = 11;
  1969. p.SYNTAX_ERR = 12;
  1970. p.INVALID_MODIFICATION_ERR = 13;
  1971. p.NAMESPACE_ERR = 14;
  1972. p.INVALID_ACCESS_ERR = 15;
  1973. p.VALIDATION_ERR = 16;
  1974. p.TYPE_MISMATCH_ERR = 17;
  1975. // set up externs
  1976. G_vmlCanvasManager = G_vmlCanvasManager_;
  1977. CanvasRenderingContext2D = CanvasRenderingContext2D_;
  1978. CanvasGradient = CanvasGradient_;
  1979. CanvasPattern = CanvasPattern_;
  1980. DOMException = DOMException_;
  1981. })();
  1982. } // if
  1983. else { // make the canvas test simple by kener.linfeng@gmail.com
  1984. G_vmlCanvasManager = false;
  1985. }
  1986. return G_vmlCanvasManager;
  1987. }); // define;
  1988. /**
  1989. * zrender: shape仓库
  1990. *
  1991. * @desc zrender是一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型。
  1992. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  1993. *
  1994. */
  1995. define(
  1996. 'zrender/shape',[],function(/*require*/) {
  1997. var self = {};
  1998. var _shapeLibrary = {}; //shape库
  1999. /**
  2000. * 定义图形实现
  2001. * @param {Object} name
  2002. * @param {Object} clazz 图形实现
  2003. */
  2004. self.define = function(name, clazz) {
  2005. _shapeLibrary[name] = clazz;
  2006. return self;
  2007. };
  2008. /**
  2009. * 获取图形实现
  2010. * @param {Object} name
  2011. */
  2012. self.get = function(name) {
  2013. return _shapeLibrary[name];
  2014. };
  2015. return self;
  2016. }
  2017. );
  2018. /**
  2019. * zrender: 向量操作类
  2020. *
  2021. * author : lang(shenyi01@baidu.com)
  2022. * code from vec2 in http://glmatrix.net/
  2023. */
  2024. define(
  2025. 'zrender/tool/vector',[],function() {
  2026. var vector = {
  2027. add : function(out, v1, v2) {
  2028. out[0] = v1[0]+v2[0];
  2029. out[1] = v1[1]+v2[1];
  2030. return out;
  2031. },
  2032. sub : function(out, v1, v2) {
  2033. out[0] = v1[0]-v2[0];
  2034. out[1] = v1[1]-v2[1];
  2035. return out;
  2036. },
  2037. length : function(v) {
  2038. return Math.sqrt( this.lengthSquare(v) );
  2039. },
  2040. lengthSquare : function(v) {
  2041. return v[0]*v[0]+v[1]*v[1];
  2042. },
  2043. mul : function(out, v1, v2) {
  2044. out[0] = v1[0]*v2[0];
  2045. out[1] = v1[1]*v2[1];
  2046. return out;
  2047. },
  2048. dot : function(v1, v2) {
  2049. return v1[0]*v2[0]+v1[1]*v2[1];
  2050. },
  2051. scale : function(out, v, s) {
  2052. out[0] = v[0]*s;
  2053. out[1] = v[1]*s;
  2054. return out;
  2055. },
  2056. normalize : function(out, v) {
  2057. var d = vector.length(v);
  2058. if(d === 0){
  2059. out[0] = 0;
  2060. out[1] = 0;
  2061. }else{
  2062. out[0] = v[0]/d;
  2063. out[1] = v[1]/d;
  2064. }
  2065. return out;
  2066. },
  2067. distance : function(v1, v2) {
  2068. return Math.sqrt(
  2069. (v1[0] - v2[0]) * (v1[0] - v2[0]) +
  2070. (v1[1] - v2[1]) * (v1[1] - v2[1])
  2071. );
  2072. },
  2073. negate : function(out, v) {
  2074. out[0] = -v[0];
  2075. out[1] = -v[1];
  2076. },
  2077. middle : function(out, v1, v2) {
  2078. out[0] = (v1[0]+v2[0])/2;
  2079. out[1] = (v1[1]+v2[1])/2;
  2080. return out;
  2081. }
  2082. };
  2083. return vector;
  2084. }
  2085. );
  2086. /**
  2087. * zrender: 公共辅助函数
  2088. *
  2089. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  2090. *
  2091. * clone:深度克隆
  2092. * merge:合并源对象的属性到目标对象
  2093. * getContext:获取一个自由使用的canvas 2D context,使用原生方法,如isPointInPath,measureText等
  2094. */
  2095. define(
  2096. 'zrender/tool/util',['require','./vector','../lib/excanvas'],function(require) {
  2097. var vec2 = require('./vector');
  2098. /**
  2099. * 对一个object进行深度拷贝
  2100. *
  2101. * @param {Any} source 需要进行拷贝的对象
  2102. * @return {Any} 拷贝后的新对象
  2103. */
  2104. function clone(source) {
  2105. // buildInObject, 用于处理无法遍历Date等对象的问题
  2106. var buildInObject = {
  2107. '[object Function]': 1,
  2108. '[object RegExp]': 1,
  2109. '[object Date]': 1,
  2110. '[object Error]': 1,
  2111. '[object CanvasGradient]': 1
  2112. };
  2113. var result = source;
  2114. var i;
  2115. var len;
  2116. if (!source
  2117. || source instanceof Number
  2118. || source instanceof String
  2119. || source instanceof Boolean
  2120. ) {
  2121. return result;
  2122. }
  2123. else if (source instanceof Array) {
  2124. result = [];
  2125. var resultLen = 0;
  2126. for (i = 0, len = source.length; i < len; i++) {
  2127. result[resultLen++] = this.clone(source[i]);
  2128. }
  2129. }
  2130. else if ('object' == typeof source) {
  2131. if(buildInObject[Object.prototype.toString.call(source)]
  2132. || source.__nonRecursion
  2133. ) {
  2134. return result;
  2135. }
  2136. result = {};
  2137. for (i in source) {
  2138. if (source.hasOwnProperty(i)) {
  2139. result[i] = this.clone(source[i]);
  2140. }
  2141. }
  2142. }
  2143. return result;
  2144. }
  2145. /**
  2146. * 合并源对象的属性到目标对象
  2147. * modify from Tangram
  2148. * @param {*} target 目标对象
  2149. * @param {*} source 源对象
  2150. * @param {Object} optOptions 选项
  2151. * @param {boolean} optOptions.overwrite 是否覆盖
  2152. * @param {boolean} optOptions.recursive 是否递归
  2153. * @param {boolean} optOptions.whiteList 白名单,如果定义,则仅处理白名单属性
  2154. */
  2155. var merge = (function() {
  2156. // buildInObject, 用于处理无法遍历Date等对象的问题
  2157. var buildInObject = {
  2158. '[object Function]': 1,
  2159. '[object RegExp]': 1,
  2160. '[object Date]': 1,
  2161. '[object Error]': 1,
  2162. '[object CanvasGradient]': 1
  2163. };
  2164. function mergeItem(target, source, index, overwrite, recursive) {
  2165. if (source.hasOwnProperty(index)) {
  2166. if (recursive
  2167. && typeof target[index] == 'object'
  2168. && buildInObject[
  2169. Object.prototype.toString.call(target[index])
  2170. ] != 1
  2171. ) {
  2172. // 如果需要递归覆盖,就递归调用merge
  2173. merge(
  2174. target[index],
  2175. source[index],
  2176. {
  2177. 'overwrite': overwrite,
  2178. 'recursive': recursive
  2179. }
  2180. );
  2181. } else if (overwrite || !(index in target)) {
  2182. // 否则只处理overwrite为true,或者在目标对象中没有此属性的情况
  2183. target[index] = source[index];
  2184. }
  2185. }
  2186. }
  2187. return function(target, source, optOptions){
  2188. var i = 0;
  2189. var options = optOptions || {};
  2190. var overwrite = options['overwrite'];
  2191. var whiteList = options['whiteList'];
  2192. var recursive = options['recursive'];
  2193. var len;
  2194. // 只处理在白名单中的属性
  2195. if (whiteList && whiteList.length) {
  2196. len = whiteList.length;
  2197. for (; i < len; ++i) {
  2198. mergeItem(
  2199. target, source, whiteList[i], overwrite, recursive
  2200. );
  2201. }
  2202. } else {
  2203. for (i in source) {
  2204. mergeItem(target, source, i, overwrite, recursive);
  2205. }
  2206. }
  2207. return target;
  2208. };
  2209. })();
  2210. var _ctx;
  2211. function getContext() {
  2212. if (!_ctx) {
  2213. require('../lib/excanvas');
  2214. if (G_vmlCanvasManager) {
  2215. var _div = document.createElement('div');
  2216. _div.style.position = 'absolute';
  2217. _div.style.top = '-1000px';
  2218. document.body.appendChild(_div);
  2219. _ctx = G_vmlCanvasManager.initElement(_div)
  2220. .getContext('2d');
  2221. }
  2222. else {
  2223. _ctx = document.createElement('canvas').getContext('2d');
  2224. }
  2225. }
  2226. return _ctx;
  2227. }
  2228. var _canvas;
  2229. var _pixelCtx;
  2230. var _width;
  2231. var _height;
  2232. var _offsetX = 0;
  2233. var _offsetY = 0;
  2234. /**
  2235. * 获取像素拾取专用的上下文
  2236. * @return {Object} 上下文
  2237. */
  2238. function getPixelContext() {
  2239. if (!_pixelCtx) {
  2240. _canvas = document.createElement('canvas');
  2241. _width = _canvas.width;
  2242. _height = _canvas.height;
  2243. _pixelCtx = _canvas.getContext('2d');
  2244. }
  2245. return _pixelCtx;
  2246. }
  2247. /**
  2248. * 如果坐标处在_canvas外部,改变_canvas的大小
  2249. * @param {number} x : 横坐标
  2250. * @param {number} y : 纵坐标
  2251. * 注意 修改canvas的大小 需要重新设置translate
  2252. */
  2253. function adjustCanvasSize(x, y) {
  2254. // 每次加的长度
  2255. var _v = 100;
  2256. var _flag = false;
  2257. if (x + _offsetX > _width) {
  2258. _width = x + _offsetX + _v;
  2259. _canvas.width = _width;
  2260. _flag = true;
  2261. }
  2262. if (y + _offsetY > _height) {
  2263. _height = y + _offsetY + _v;
  2264. _canvas.height = _height;
  2265. _flag = true;
  2266. }
  2267. if (x < -_offsetX) {
  2268. _offsetX = Math.ceil(-x / _v) * _v;
  2269. _width += _offsetX;
  2270. _canvas.width = _width;
  2271. _flag = true;
  2272. }
  2273. if (y < -_offsetY) {
  2274. _offsetY = Math.ceil(-y / _v) * _v;
  2275. _height += _offsetY;
  2276. _canvas.height = _height;
  2277. _flag = true;
  2278. }
  2279. if (_flag) {
  2280. _pixelCtx.translate(_offsetX, _offsetY);
  2281. }
  2282. }
  2283. /**
  2284. * 获取像素canvas的偏移量
  2285. * @return {Object} 偏移量
  2286. */
  2287. function getPixelOffset() {
  2288. return {
  2289. x : _offsetX,
  2290. y : _offsetY
  2291. };
  2292. }
  2293. /**
  2294. * 查询数组中元素的index
  2295. */
  2296. function indexOf(array, value){
  2297. if (array.indexOf) {
  2298. return array.indexOf(value);
  2299. }
  2300. for(var i = 0, len=array.length; i<len; i++) {
  2301. if (array[i] === value) {
  2302. return i;
  2303. }
  2304. }
  2305. return -1;
  2306. }
  2307. /**
  2308. * 计算包围盒
  2309. */
  2310. function computeBoundingBox(points, min, max) {
  2311. if (points.length === 0) {
  2312. return;
  2313. }
  2314. var left = points[0][0];
  2315. var right = points[0][0];
  2316. var top = points[0][1];
  2317. var bottom = points[0][1];
  2318. for (var i = 1; i < points.length; i++) {
  2319. var p = points[i];
  2320. if (p[0] < left) {
  2321. left = p[0];
  2322. }
  2323. if (p[0] > right) {
  2324. right = p[0];
  2325. }
  2326. if (p[1] < top) {
  2327. top = p[1];
  2328. }
  2329. if (p[1] > bottom) {
  2330. bottom = p[1];
  2331. }
  2332. }
  2333. min[0] = left;
  2334. min[1] = top;
  2335. max[0] = right;
  2336. max[1] = bottom;
  2337. }
  2338. /**
  2339. * 计算三阶贝塞尔曲线的包围盒
  2340. * http://pissang.net/blog/?p=91
  2341. */
  2342. function computeCubeBezierBoundingBox(p0, p1, p2, p3, min, max) {
  2343. var xDim = _computeCubeBezierExtremitiesDim(
  2344. p0[0], p1[0], p2[0], p3[0]
  2345. );
  2346. var yDim = _computeCubeBezierExtremitiesDim(
  2347. p0[1], p1[1], p2[1], p3[1]
  2348. );
  2349. xDim.push(p0[0], p3[0]);
  2350. yDim.push(p0[1], p3[1]);
  2351. var left = Math.min.apply(null, xDim);
  2352. var right = Math.max.apply(null, xDim);
  2353. var top = Math.min.apply(null, yDim);
  2354. var bottom = Math.max.apply(null, yDim);
  2355. min[0] = left;
  2356. min[1] = top;
  2357. max[0] = right;
  2358. max[1] = bottom;
  2359. }
  2360. function _computeCubeBezierExtremitiesDim(p0, p1, p2, p3) {
  2361. var extremities = [];
  2362. var b = 6 * p2 - 12 * p1 + 6 * p0;
  2363. var a = 9 * p1 + 3 * p3 - 3 * p0 - 9 * p2;
  2364. var c = 3 * p1 - 3 * p0;
  2365. var tmp = b * b - 4 * a * c;
  2366. if (tmp > 0){
  2367. var tmpSqrt = Math.sqrt(tmp);
  2368. var t1 = (-b + tmpSqrt) / (2 * a);
  2369. var t2 = (-b - tmpSqrt) / (2 * a);
  2370. extremities.push(t1, t2);
  2371. } else if (tmp === 0) {
  2372. extremities.push(-b / (2 * a));
  2373. }
  2374. var result = [];
  2375. for (var i = 0; i < extremities.length; i++) {
  2376. var t = extremities[i];
  2377. if (Math.abs(2 * a * t + b) > 0.0001 && t < 1 && t > 0) {
  2378. var ct = 1 - t;
  2379. var val = ct * ct * ct * p0
  2380. + 3 * ct * ct * t * p1
  2381. + 3 * ct * t * t * p2
  2382. + t * t *t * p3;
  2383. result.push(val);
  2384. }
  2385. }
  2386. return result;
  2387. }
  2388. /**
  2389. * 计算二阶贝塞尔曲线的包围盒
  2390. * http://pissang.net/blog/?p=91
  2391. */
  2392. function computeQuadraticBezierBoundingBox(p0, p1, p2, min, max) {
  2393. // Find extremities, where derivative in x dim or y dim is zero
  2394. var tmp = (p0[0] + p2[0] - 2 * p1[0]);
  2395. // p1 is center of p0 and p2 in x dim
  2396. var t1;
  2397. if (tmp === 0) {
  2398. t1 = 0.5;
  2399. } else {
  2400. t1 = (p0[0] - p1[0]) / tmp;
  2401. }
  2402. tmp = (p0[1] + p2[1] - 2 * p1[1]);
  2403. // p1 is center of p0 and p2 in y dim
  2404. var t2;
  2405. if (tmp === 0) {
  2406. t2 = 0.5;
  2407. } else {
  2408. t2 = (p0[1] - p1[1]) / tmp;
  2409. }
  2410. t1 = Math.max(Math.min(t1, 1), 0);
  2411. t2 = Math.max(Math.min(t2, 1), 0);
  2412. var ct1 = 1-t1;
  2413. var ct2 = 1-t2;
  2414. var x1 = ct1 * ct1 * p0[0]
  2415. + 2 * ct1 * t1 * p1[0]
  2416. + t1 * t1 * p2[0];
  2417. var y1 = ct1 * ct1 * p0[1]
  2418. + 2 * ct1 * t1 * p1[1]
  2419. + t1 * t1 * p2[1];
  2420. var x2 = ct2 * ct2 * p0[0]
  2421. + 2 * ct2 * t2 * p1[0]
  2422. + t2 * t2 * p2[0];
  2423. var y2 = ct2 * ct2 * p0[1]
  2424. + 2 * ct2 * t2 * p1[1]
  2425. + t2 * t2 * p2[1];
  2426. return computeBoundingBox(
  2427. [p0.slice(), p2.slice(), [x1, y1], [x2, y2]],
  2428. min, max
  2429. );
  2430. }
  2431. /**
  2432. * 计算圆弧的包围盒
  2433. * http://pissang.net/blog/?p=91
  2434. */
  2435. var computeArcBoundingBox = (function(){
  2436. var start = [];
  2437. var end = [];
  2438. // At most 4 extremities
  2439. var extremities = [[], [], [], []];
  2440. return function(
  2441. center, radius, startAngle, endAngle, clockwise, min, max
  2442. ) {
  2443. clockwise = clockwise ? 1 : -1;
  2444. start[0] = Math.cos(startAngle);
  2445. start[1] = Math.sin(startAngle) * clockwise;
  2446. vec2.scale(start, start, radius);
  2447. vec2.add(start, start, center);
  2448. end[0] = Math.cos(endAngle);
  2449. end[1] = Math.sin(endAngle) * clockwise;
  2450. vec2.scale(end, end, radius);
  2451. vec2.add(end, end, center);
  2452. startAngle = startAngle % (Math.PI * 2);
  2453. if (startAngle < 0) {
  2454. startAngle = startAngle + Math.PI * 2;
  2455. }
  2456. endAngle = endAngle % (Math.PI * 2);
  2457. if (endAngle < 0) {
  2458. endAngle = endAngle + Math.PI * 2;
  2459. }
  2460. if (startAngle > endAngle) {
  2461. endAngle += Math.PI * 2;
  2462. }
  2463. var number = 0;
  2464. for (var angle = 0; angle < endAngle; angle += Math.PI / 2) {
  2465. if (angle > startAngle) {
  2466. var extremity = extremities[number++];
  2467. extremity[0] = Math.cos(angle);
  2468. extremity[1] = Math.sin(angle) * clockwise;
  2469. vec2.scale(extremity, extremity, radius);
  2470. vec2.add(extremity, extremity, center);
  2471. }
  2472. }
  2473. var points = extremities.slice(0, number);
  2474. points.push(start, end);
  2475. computeBoundingBox(points, min, max);
  2476. };
  2477. })();
  2478. return {
  2479. clone : clone,
  2480. merge : merge,
  2481. getContext : getContext,
  2482. getPixelContext : getPixelContext,
  2483. getPixelOffset : getPixelOffset,
  2484. adjustCanvasSize : adjustCanvasSize,
  2485. computeBoundingBox : computeBoundingBox,
  2486. computeCubeBezierBoundingBox : computeCubeBezierBoundingBox,
  2487. computeQuadraticBezierBoundingBox :
  2488. computeQuadraticBezierBoundingBox,
  2489. computeArcBoundingBox : computeArcBoundingBox,
  2490. indexOf : indexOf
  2491. };
  2492. }
  2493. );
  2494. /**
  2495. * zrender: 图形空间辅助类
  2496. *
  2497. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  2498. *
  2499. * isInside:是否在区域内部
  2500. * isOutside:是否在区域外部
  2501. * getTextWidth:测算单行文本宽度
  2502. */
  2503. define(
  2504. 'zrender/tool/area',['require','../tool/util'],function(require) {
  2505. var util = require('../tool/util');
  2506. var _ctx;
  2507. /**
  2508. * 包含判断
  2509. * @param {string} shapeClazz : 图形类
  2510. * @param {Object} area : 目标区域
  2511. * @param {number} x : 横坐标
  2512. * @param {number} y : 纵坐标
  2513. */
  2514. function isInside(shapeClazz, area, x, y) {
  2515. if (!area || !shapeClazz) {
  2516. // 无参数或不支持类型
  2517. return false;
  2518. }
  2519. var zoneType = shapeClazz.type;
  2520. if (!_ctx) {
  2521. _ctx = util.getContext();
  2522. }
  2523. if (!_isInsideRectangle(
  2524. area.__rect || shapeClazz.getRect(area), x, y
  2525. )
  2526. ) {
  2527. // 不在矩形区域内直接返回false
  2528. return false;
  2529. }
  2530. // 未实现或不可用时(excanvas不支持)则数学运算,主要是line,brokenLine,ring
  2531. var _mathReturn = _mathMethod(zoneType, area, x, y);
  2532. if (typeof _mathReturn != 'undefined') {
  2533. return _mathReturn;
  2534. }
  2535. if (zoneType != 'beziercurve'
  2536. && shapeClazz.buildPath
  2537. && _ctx.isPointInPath
  2538. ) {
  2539. return _buildPathMethod(shapeClazz, _ctx, area, x, y);
  2540. }
  2541. else if (_ctx.getImageData) {
  2542. return _pixelMethod(shapeClazz, area, x, y);
  2543. }
  2544. // 上面的方法都行不通时
  2545. switch (zoneType) {
  2546. //心形----------------------10
  2547. case 'heart':
  2548. return true; // Todo,不精确
  2549. //水滴----------------------11
  2550. case 'droplet':
  2551. return true; // Todo,不精确
  2552. case 'ellipse':
  2553. return true; // Todo,不精确
  2554. // 旋轮曲线 不准确
  2555. case 'trochoid':
  2556. var _r = area.location == 'out'
  2557. ? area.r1 + area.r2 + area.d
  2558. : area.r1 - area.r2 + area.d;
  2559. return _isInsideCircle(area, x, y, _r);
  2560. // 玫瑰线 不准确
  2561. case 'rose' :
  2562. return _isInsideCircle(area, x, y, area.maxr);
  2563. //路径,椭圆,曲线等-----------------13
  2564. default:
  2565. return false; // Todo,暂不支持
  2566. }
  2567. }
  2568. /**
  2569. * 用数学方法判断,三个方法中最快,但是支持的shape少
  2570. *
  2571. * @param {string} zoneType : 图形类型
  2572. * @param {Object} area :目标区域
  2573. * @param {number} x : 横坐标
  2574. * @param {number} y : 纵坐标
  2575. * @return {boolean=} true表示坐标处在图形中
  2576. */
  2577. function _mathMethod(zoneType, area, x, y) {
  2578. // 在矩形内则部分图形需要进一步判断
  2579. switch (zoneType) {
  2580. //线-----------------------1
  2581. case 'line':
  2582. return _isInsideLine(area, x, y);
  2583. //折线----------------------2
  2584. case 'brokenLine':
  2585. return _isInsideBrokenLine(area, x, y);
  2586. //文本----------------------3
  2587. case 'text':
  2588. return true;
  2589. //圆环----------------------4
  2590. case 'ring':
  2591. return _isInsideRing(area, x, y);
  2592. //矩形----------------------5
  2593. case 'rectangle':
  2594. return true;
  2595. //圆形----------------------6
  2596. case 'circle':
  2597. return _isInsideCircle(area, x, y, area.r);
  2598. //扇形----------------------7
  2599. case 'sector':
  2600. return _isInsideSector(area, x, y);
  2601. //多边形---------------------8
  2602. case 'path':
  2603. return _isInsidePath(area, x, y);
  2604. case 'polygon':
  2605. case 'star':
  2606. case 'isogon':
  2607. return _isInsidePolygon(area, x, y);
  2608. //图片----------------------9
  2609. case 'image':
  2610. return true;
  2611. }
  2612. }
  2613. /**
  2614. * 通过buildPath方法来判断,三个方法中较快,但是不支持线条类型的shape,
  2615. * 而且excanvas不支持isPointInPath方法
  2616. *
  2617. * @param {Object} shapeClazz : shape类
  2618. * @param {Object} context : 上下文
  2619. * @param {Object} area :目标区域
  2620. * @param {number} x : 横坐标
  2621. * @param {number} y : 纵坐标
  2622. * @return {boolean} true表示坐标处在图形中
  2623. */
  2624. function _buildPathMethod(shapeClazz, context, area, x, y) {
  2625. // 图形类实现路径创建了则用类的path
  2626. context.beginPath();
  2627. shapeClazz.buildPath(context, area);
  2628. context.closePath();
  2629. return context.isPointInPath(x, y);
  2630. }
  2631. /**
  2632. * 通过像素值来判断,三个方法中最慢,但是支持广,不足之处是excanvas不支持像素处理
  2633. *
  2634. * @param {Object} shapeClazz : shape类
  2635. * @param {Object} area :目标区域
  2636. * @param {number} x : 横坐标
  2637. * @param {number} y : 纵坐标
  2638. * @return {boolean} true表示坐标处在图形中
  2639. */
  2640. function _pixelMethod(shapeClazz, area, x, y) {
  2641. var _rect = area.__rect || shapeClazz.getRect(area);
  2642. var _context = util.getPixelContext();
  2643. var _offset = util.getPixelOffset();
  2644. util.adjustCanvasSize(x, y);
  2645. _context.clearRect(_rect.x, _rect.y, _rect.width, _rect.height);
  2646. _context.beginPath();
  2647. shapeClazz.brush(_context, {style : area});
  2648. _context.closePath();
  2649. return _isPainted(_context, x + _offset.x, y + _offset.y);
  2650. }
  2651. /**
  2652. * 坐标像素值,判断坐标是否被作色
  2653. *
  2654. * @param {Object} context : 上下文
  2655. * @param {number} x : 横坐标
  2656. * @param {number} y : 纵坐标
  2657. * @param {number=} unit : 触发的精度,越大越容易触发,可选,缺省是为1
  2658. * @return {boolean} 已经被画过返回true
  2659. */
  2660. function _isPainted(context, x, y, unit) {
  2661. var pixelsData;
  2662. if (typeof unit != 'undefined') {
  2663. unit = Math.floor((unit || 1 )/ 2);
  2664. pixelsData = context.getImageData(
  2665. x - unit,
  2666. y - unit,
  2667. unit + unit,
  2668. unit + unit
  2669. ).data;
  2670. }
  2671. else {
  2672. pixelsData = context.getImageData(x, y, 1, 1).data;
  2673. }
  2674. var len = pixelsData.length;
  2675. while (len--) {
  2676. if (pixelsData[len] !== 0) {
  2677. return true;
  2678. }
  2679. }
  2680. return false;
  2681. }
  2682. /**
  2683. * !isInside
  2684. */
  2685. function isOutside(shapeClazz, area, x, y) {
  2686. return !isInside(shapeClazz, area, x, y);
  2687. }
  2688. /**
  2689. * 线段包含判断
  2690. */
  2691. function _isInsideLine(area, x, y) {
  2692. var _x1 = area.xStart;
  2693. var _y1 = area.yStart;
  2694. var _x2 = area.xEnd;
  2695. var _y2 = area.yEnd;
  2696. var _l = area.lineWidth;
  2697. var _a = 0;
  2698. var _b = _x1;
  2699. if (_x1 !== _x2) {
  2700. _a = (_y1 - _y2) / (_x1 - _x2);
  2701. _b = (_x1 * _y2 - _x2 * _y1) / (_x1 - _x2) ;
  2702. }
  2703. else {
  2704. return Math.abs(x - _x1) <= _l / 2;
  2705. }
  2706. var _s = (_a * x - y + _b) * (_a * x - y + _b) / (_a * _a + 1);
  2707. return _s <= _l / 2 * _l / 2;
  2708. }
  2709. function _isInsideBrokenLine(area, x, y) {
  2710. var pointList = area.pointList;
  2711. var lineArea;
  2712. var insideCatch = false;
  2713. for (var i = 0, l = pointList.length - 1; i < l; i++) {
  2714. lineArea = {
  2715. xStart : pointList[i][0],
  2716. yStart : pointList[i][1],
  2717. xEnd : pointList[i + 1][0],
  2718. yEnd : pointList[i + 1][1],
  2719. lineWidth : area.lineWidth
  2720. };
  2721. if (!_isInsideRectangle(
  2722. {
  2723. x : Math.min(lineArea.xStart, lineArea.xEnd)
  2724. - lineArea.lineWidth,
  2725. y : Math.min(lineArea.yStart, lineArea.yEnd)
  2726. - lineArea.lineWidth,
  2727. width : Math.abs(lineArea.xStart - lineArea.xEnd)
  2728. + lineArea.lineWidth,
  2729. height : Math.abs(lineArea.yStart - lineArea.yEnd)
  2730. + lineArea.lineWidth
  2731. },
  2732. x,y
  2733. )
  2734. ) {
  2735. // 不在矩形区内跳过
  2736. continue;
  2737. }
  2738. insideCatch = _isInsideLine(lineArea, x, y);
  2739. if (insideCatch) {
  2740. break;
  2741. }
  2742. }
  2743. return insideCatch;
  2744. }
  2745. function _isInsideRing(area, x, y) {
  2746. if (_isInsideCircle(area, x, y, area.r)
  2747. && !_isInsideCircle(
  2748. {
  2749. x : area.x,
  2750. y : area.y
  2751. },
  2752. x, y,
  2753. area.r0 || 0
  2754. )
  2755. ){
  2756. // 大圆内,小圆外
  2757. return true;
  2758. }
  2759. return false;
  2760. }
  2761. /**
  2762. * 矩形包含判断
  2763. */
  2764. function _isInsideRectangle(area, x, y) {
  2765. if (x >= area.x
  2766. && x <= (area.x + area.width)
  2767. && y >= area.y
  2768. && y <= (area.y + area.height)
  2769. ) {
  2770. return true;
  2771. }
  2772. return false;
  2773. }
  2774. /**
  2775. * 圆形包含判断
  2776. */
  2777. function _isInsideCircle(area, x, y, r) {
  2778. return (x - area.x) * (x - area.x) + (y - area.y) * (y - area.y)
  2779. < r * r;
  2780. }
  2781. /**
  2782. * 扇形包含判断
  2783. */
  2784. function _isInsideSector(area, x, y) {
  2785. if (!_isInsideCircle(area, x, y, area.r)
  2786. || (area.r0 > 0
  2787. && _isInsideCircle(
  2788. {
  2789. x : area.x,
  2790. y : area.y
  2791. },
  2792. x, y,
  2793. area.r0
  2794. )
  2795. )
  2796. ){
  2797. // 大圆外或者小圆内直接false
  2798. return false;
  2799. }
  2800. else {
  2801. // 判断夹角
  2802. var angle = (360
  2803. - Math.atan2(y - area.y, x - area.x)
  2804. / Math.PI
  2805. * 180)
  2806. % 360;
  2807. var endA = (360 + area.endAngle) % 360;
  2808. var startA = (360 + area.startAngle) % 360;
  2809. if (endA > startA) {
  2810. return (angle >= startA && angle <= endA);
  2811. } else {
  2812. return !(angle >= endA && angle <= startA);
  2813. }
  2814. }
  2815. }
  2816. /**
  2817. * 多边形包含判断
  2818. * 警告:下面这段代码会很难看,建议跳过~
  2819. */
  2820. function _isInsidePolygon(area, x, y) {
  2821. /**
  2822. * 射线判别法
  2823. * 如果一个点在多边形内部,任意角度做射线肯定会与多边形要么有一个交点,要么有与多边形边界线重叠
  2824. * 如果一个点在多边形外部,任意角度做射线要么与多边形有一个交点,
  2825. * 要么有两个交点,要么没有交点,要么有与多边形边界线重叠。
  2826. */
  2827. var i;
  2828. var j;
  2829. var polygon = area.pointList;
  2830. var N = polygon.length;
  2831. var inside = false;
  2832. var redo = true;
  2833. var v;
  2834. for (i = 0; i < N; ++i) {
  2835. // 是否在顶点上
  2836. if (polygon[i][0] == x && polygon[i][1] == y ) {
  2837. redo = false;
  2838. inside = true;
  2839. break;
  2840. }
  2841. }
  2842. if (redo) {
  2843. redo = false;
  2844. inside = false;
  2845. for (i = 0,j = N - 1;i < N;j = i++) {
  2846. if ((polygon[i][1] < y && y < polygon[j][1])
  2847. || (polygon[j][1] < y && y < polygon[i][1])
  2848. ) {
  2849. if (x <= polygon[i][0] || x <= polygon[j][0]) {
  2850. v = (y - polygon[i][1])
  2851. * (polygon[j][0] - polygon[i][0])
  2852. / (polygon[j][1] - polygon[i][1])
  2853. + polygon[i][0];
  2854. if (x < v) { // 在线的左侧
  2855. inside = !inside;
  2856. }
  2857. else if (x == v) { // 在线上
  2858. inside = true;
  2859. break;
  2860. }
  2861. }
  2862. }
  2863. else if (y == polygon[i][1]) {
  2864. if (x < polygon[i][0]) { // 交点在顶点上
  2865. polygon[i][1] > polygon[j][1] ? --y : ++y;
  2866. //redo = true;
  2867. break;
  2868. }
  2869. }
  2870. else if (polygon[i][1] == polygon[j][1] // 在水平的边界线上
  2871. && y == polygon[i][1]
  2872. && ((polygon[i][0] < x && x < polygon[j][0])
  2873. || (polygon[j][0] < x && x < polygon[i][0]))
  2874. ) {
  2875. inside = true;
  2876. break;
  2877. }
  2878. }
  2879. }
  2880. return inside;
  2881. }
  2882. /**
  2883. * 路径包含判断,依赖多边形判断
  2884. */
  2885. function _isInsidePath(area, x, y) {
  2886. var pointList = area.pointList;
  2887. var insideCatch = false;
  2888. for (var i = 0, l = pointList.length; i < l; i++) {
  2889. insideCatch = _isInsidePolygon(
  2890. { pointList : pointList[i] }, x, y
  2891. );
  2892. if (insideCatch) {
  2893. break;
  2894. }
  2895. }
  2896. return insideCatch;
  2897. }
  2898. /**
  2899. * 测算单行文本欢度
  2900. * @param {Object} text
  2901. * @param {Object} textFont
  2902. */
  2903. function getTextWidth(text, textFont) {
  2904. if (!_ctx) {
  2905. _ctx = util.getContext();
  2906. }
  2907. _ctx.save();
  2908. if (textFont) {
  2909. _ctx.font = textFont;
  2910. }
  2911. var width = _ctx.measureText(text).width;
  2912. _ctx.restore();
  2913. return width;
  2914. }
  2915. return {
  2916. isInside : isInside,
  2917. isOutside : isOutside,
  2918. getTextWidth : getTextWidth
  2919. };
  2920. }
  2921. );
  2922. /**
  2923. * zrender: 3x2矩阵操作类
  2924. *
  2925. * author: lang(shenyi01@baidu.com)
  2926. * code from mat2d in http://glmatrix.net/
  2927. */
  2928. define(
  2929. 'zrender/tool/matrix',[],function() {
  2930. var matrix = {
  2931. create : function() {
  2932. return [1, 0,
  2933. 0, 1,
  2934. 0, 0];
  2935. },
  2936. identity : function(out) {
  2937. out[0] = 1;
  2938. out[1] = 0;
  2939. out[2] = 0;
  2940. out[3] = 1;
  2941. out[4] = 0;
  2942. out[5] = 0;
  2943. },
  2944. mul : function(out, m1, m2) {
  2945. out[0] = m1[0] * m2[0] + m1[2] * m2[1];
  2946. out[1] = m1[1] * m2[0] + m1[3] * m2[1];
  2947. out[2] = m1[0] * m2[2] + m1[2] * m2[3];
  2948. out[3] = m1[1] * m2[2] + m1[3] * m2[3];
  2949. out[4] = m1[0] * m2[4] + m1[2] * m2[5] + m1[4];
  2950. out[5] = m1[1] * m2[4] + m1[3] * m2[5] + m1[5];
  2951. return out;
  2952. },
  2953. translate : function(out, a, v) {
  2954. out[0] = a[0];
  2955. out[1] = a[1];
  2956. out[2] = a[2];
  2957. out[3] = a[3];
  2958. out[4] = a[4] + v[0];
  2959. out[5] = a[5] + v[1];
  2960. return out;
  2961. },
  2962. rotate : function(out, a, rad) {
  2963. var aa = a[0], ac = a[2], atx = a[4];
  2964. var ab = a[1], ad = a[3], aty = a[5];
  2965. var st = Math.sin(rad);
  2966. var ct = Math.cos(rad);
  2967. out[0] = aa*ct + ab*st;
  2968. out[1] = -aa*st + ab*ct;
  2969. out[2] = ac*ct + ad*st;
  2970. out[3] = -ac*st + ct*ad;
  2971. out[4] = ct*atx + st*aty;
  2972. out[5] = ct*aty - st*atx;
  2973. return out;
  2974. },
  2975. scale : function(out, a, v) {
  2976. var vx = v[0], vy = v[1];
  2977. out[0] = a[0] * vx;
  2978. out[1] = a[1] * vy;
  2979. out[2] = a[2] * vx;
  2980. out[3] = a[3] * vy;
  2981. out[4] = a[4] * vx;
  2982. out[5] = a[5] * vy;
  2983. return out;
  2984. },
  2985. /**
  2986. * 求逆矩阵
  2987. */
  2988. invert : function(out, a) {
  2989. var aa = a[0], ac = a[2], atx = a[4];
  2990. var ab = a[1], ad = a[3], aty = a[5];
  2991. var det = aa * ad - ab * ac;
  2992. if(!det){
  2993. return null;
  2994. }
  2995. det = 1.0 / det;
  2996. out[0] = ad * det;
  2997. out[1] = -ab * det;
  2998. out[2] = -ac * det;
  2999. out[3] = aa * det;
  3000. out[4] = (ac * aty - ad * atx) * det;
  3001. out[5] = (ab * atx - aa * aty) * det;
  3002. return out;
  3003. },
  3004. /**
  3005. * 矩阵左乘向量
  3006. */
  3007. mulVector : function(out, a, v) {
  3008. var aa = a[0], ac = a[2], atx = a[4];
  3009. var ab = a[1], ad = a[3], aty = a[5];
  3010. out[0] = v[0] * aa + v[1] * ac + atx;
  3011. out[1] = v[0] * ab + v[1] * ad + aty;
  3012. return out;
  3013. }
  3014. };
  3015. return matrix;
  3016. }
  3017. );
  3018. /**
  3019. * zrender : 颜色辅助类
  3020. *
  3021. * author: CrossDo (chenhuaimu@baidu.com)
  3022. *
  3023. * getColor:获取色板颜色
  3024. * customPalette : 自定义调色板
  3025. * resetPalette : 重置调色板
  3026. *
  3027. * getHighlightColor : 获取默认高亮颜色
  3028. * customHighlight : 自定义默认高亮颜色
  3029. * resetHighlight : 重置默认高亮颜色
  3030. *
  3031. * getRadialGradient : 径向渐变
  3032. * getLinearGradient : 线性渐变
  3033. * getGradientColors : 获取颜色之间渐变颜色数组
  3034. * getStepColors : 获取两种颜色之间渐变颜色数组
  3035. * reverse : 颜色翻转
  3036. * mix : 颜色混合
  3037. * lift : 颜色升降
  3038. * trim : 清除空格
  3039. * random : 随机颜色
  3040. * toRGB : 转为RGB格式
  3041. * toRGBA : 转为RGBA格式
  3042. * toHex : 转为#RRGGBB格式
  3043. * toHSL : 转为HSL格式
  3044. * toHSLA : 转为HSLA格式
  3045. * toHSB : 转为HSB格式
  3046. * toHSBA : 转为HSBA格式
  3047. * toHSV : 转为HSV格式
  3048. * toHSVA : 转为HSVA格式
  3049. * toName : 转为颜色名字
  3050. * toColor: 颜色值数组转为指定格式颜色
  3051. * toArray: 返回颜色值数组
  3052. * alpha : 设置颜色的透明度
  3053. **/
  3054. define( 'zrender/tool/color',['require','../tool/util'],function(require) {
  3055. var util = require('../tool/util');
  3056. var _ctx;
  3057. // Color palette is an array containing the default colors for the chart's
  3058. // series.
  3059. // When all colors are used, new colors are selected from the start again.
  3060. // Defaults to:
  3061. // 默认色板
  3062. var palette = [
  3063. '#ff9277', ' #dddd00', ' #ffc877', ' #bbe3ff', ' #d5ffbb',
  3064. '#bbbbff', ' #ddb000', ' #b0dd00', ' #e2bbff', ' #ffbbe3',
  3065. '#ff7777', ' #ff9900', ' #83dd00', ' #77e3ff', ' #778fff',
  3066. '#c877ff', ' #ff77ab', ' #ff6600', ' #aa8800', ' #77c7ff',
  3067. '#ad77ff', ' #ff77ff', ' #dd0083', ' #777700', ' #00aa00',
  3068. '#0088aa', ' #8400dd', ' #aa0088', ' #dd0000', ' #772e00'
  3069. ];
  3070. var _palette = palette;
  3071. var highlightColor = 'rgba(255,255,0,0.5)';
  3072. var _highlightColor = highlightColor;
  3073. // 颜色格式
  3074. /*jshint maxlen: 330 */
  3075. var colorRegExp = /^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgba?\(\s*([\d\.]+%?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+%?)?)\s*\)|hsba?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+)?)%?\s*\)|hsla?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+)?)%?\s*\))\s*$/i;
  3076. var _nameColors = {
  3077. aliceblue : '#f0f8ff',
  3078. antiquewhite : '#faebd7',
  3079. aqua : '#0ff',
  3080. aquamarine : '#7fffd4',
  3081. azure : '#f0ffff',
  3082. beige : '#f5f5dc',
  3083. bisque : '#ffe4c4',
  3084. black : '#000',
  3085. blanchedalmond : '#ffebcd',
  3086. blue : '#00f',
  3087. blueviolet : '#8a2be2',
  3088. brown : '#a52a2a',
  3089. burlywood : '#deb887',
  3090. cadetblue : '#5f9ea0',
  3091. chartreuse : '#7fff00',
  3092. chocolate : '#d2691e',
  3093. coral : '#ff7f50',
  3094. cornflowerblue : '#6495ed',
  3095. cornsilk : '#fff8dc',
  3096. crimson : '#dc143c',
  3097. cyan : '#0ff',
  3098. darkblue : '#00008b',
  3099. darkcyan : '#008b8b',
  3100. darkgoldenrod : '#b8860b',
  3101. darkgray : '#a9a9a9',
  3102. darkgrey : '#a9a9a9',
  3103. darkgreen : '#006400',
  3104. darkkhaki : '#bdb76b',
  3105. darkmagenta : '#8b008b',
  3106. darkolivegreen : '#556b2f',
  3107. darkorange : '#ff8c00',
  3108. darkorchid : '#9932cc',
  3109. darkred : '#8b0000',
  3110. darksalmon : '#e9967a',
  3111. darkseagreen : '#8fbc8f',
  3112. darkslateblue : '#483d8b',
  3113. darkslategray : '#2f4f4f',
  3114. darkslategrey : '#2f4f4f',
  3115. darkturquoise : '#00ced1',
  3116. darkviolet : '#9400d3',
  3117. deeppink : '#ff1493',
  3118. deepskyblue : '#00bfff',
  3119. dimgray : '#696969',
  3120. dimgrey : '#696969',
  3121. dodgerblue : '#1e90ff',
  3122. firebrick : '#b22222',
  3123. floralwhite : '#fffaf0',
  3124. forestgreen : '#228b22',
  3125. fuchsia : '#f0f',
  3126. gainsboro : '#dcdcdc',
  3127. ghostwhite : '#f8f8ff',
  3128. gold : '#ffd700',
  3129. goldenrod : '#daa520',
  3130. gray : '#808080',
  3131. grey : '#808080',
  3132. green : '#008000',
  3133. greenyellow : '#adff2f',
  3134. honeydew : '#f0fff0',
  3135. hotpink : '#ff69b4',
  3136. indianred : '#cd5c5c',
  3137. indigo : '#4b0082',
  3138. ivory : '#fffff0',
  3139. khaki : '#f0e68c',
  3140. lavender : '#e6e6fa',
  3141. lavenderblush : '#fff0f5',
  3142. lawngreen : '#7cfc00',
  3143. lemonchiffon : '#fffacd',
  3144. lightblue : '#add8e6',
  3145. lightcoral : '#f08080',
  3146. lightcyan : '#e0ffff',
  3147. lightgoldenrodyellow : '#fafad2',
  3148. lightgray : '#d3d3d3',
  3149. lightgrey : '#d3d3d3',
  3150. lightgreen : '#90ee90',
  3151. lightpink : '#ffb6c1',
  3152. lightsalmon : '#ffa07a',
  3153. lightseagreen : '#20b2aa',
  3154. lightskyblue : '#87cefa',
  3155. lightslategray : '#789',
  3156. lightslategrey : '#789',
  3157. lightsteelblue : '#b0c4de',
  3158. lightyellow : '#ffffe0',
  3159. lime : '#0f0',
  3160. limegreen : '#32cd32',
  3161. linen : '#faf0e6',
  3162. magenta : '#f0f',
  3163. maroon : '#800000',
  3164. mediumaquamarine : '#66cdaa',
  3165. mediumblue : '#0000cd',
  3166. mediumorchid : '#ba55d3',
  3167. mediumpurple : '#9370d8',
  3168. mediumseagreen : '#3cb371',
  3169. mediumslateblue : '#7b68ee',
  3170. mediumspringgreen : '#00fa9a',
  3171. mediumturquoise : '#48d1cc',
  3172. mediumvioletred : '#c71585',
  3173. midnightblue : '#191970',
  3174. mintcream : '#f5fffa',
  3175. mistyrose : '#ffe4e1',
  3176. moccasin : '#ffe4b5',
  3177. navajowhite : '#ffdead',
  3178. navy : '#000080',
  3179. oldlace : '#fdf5e6',
  3180. olive : '#808000',
  3181. olivedrab : '#6b8e23',
  3182. orange : '#ffa500',
  3183. orangered : '#ff4500',
  3184. orchid : '#da70d6',
  3185. palegoldenrod : '#eee8aa',
  3186. palegreen : '#98fb98',
  3187. paleturquoise : '#afeeee',
  3188. palevioletred : '#d87093',
  3189. papayawhip : '#ffefd5',
  3190. peachpuff : '#ffdab9',
  3191. peru : '#cd853f',
  3192. pink : '#ffc0cb',
  3193. plum : '#dda0dd',
  3194. powderblue : '#b0e0e6',
  3195. purple : '#800080',
  3196. red : '#f00',
  3197. rosybrown : '#bc8f8f',
  3198. royalblue : '#4169e1',
  3199. saddlebrown : '#8b4513',
  3200. salmon : '#fa8072',
  3201. sandybrown : '#f4a460',
  3202. seagreen : '#2e8b57',
  3203. seashell : '#fff5ee',
  3204. sienna : '#a0522d',
  3205. silver : '#c0c0c0',
  3206. skyblue : '#87ceeb',
  3207. slateblue : '#6a5acd',
  3208. slategray : '#708090',
  3209. slategrey : '#708090',
  3210. snow : '#fffafa',
  3211. springgreen : '#00ff7f',
  3212. steelblue : '#4682b4',
  3213. tan : '#d2b48c',
  3214. teal : '#008080',
  3215. thistle : '#d8bfd8',
  3216. tomato : '#ff6347',
  3217. turquoise : '#40e0d0',
  3218. violet : '#ee82ee',
  3219. wheat : '#f5deb3',
  3220. white : '#fff',
  3221. whitesmoke : '#f5f5f5',
  3222. yellow : '#ff0',
  3223. yellowgreen : '#9acd32'
  3224. };
  3225. /**
  3226. * 自定义调色板
  3227. */
  3228. function customPalette(userPalete) {
  3229. palette = userPalete;
  3230. }
  3231. /**
  3232. * 复位默认色板
  3233. */
  3234. function resetPalette() {
  3235. palette = _palette;
  3236. }
  3237. /**
  3238. * 获取色板颜色
  3239. * @param {number} idx : 色板位置
  3240. * @param {array} [userPalete] : 自定义色板
  3241. *
  3242. * @return {color} 颜色#000000~#ffffff
  3243. */
  3244. function getColor(idx, userPalete) {
  3245. idx = +idx || 0;
  3246. userPalete = userPalete || palette;
  3247. return userPalete[idx % userPalete.length];
  3248. }
  3249. /**
  3250. * 自定义默认高亮颜色
  3251. */
  3252. function customHighlight(userHighlightColor) {
  3253. highlightColor = userHighlightColor;
  3254. }
  3255. /**
  3256. * 重置默认高亮颜色
  3257. */
  3258. function resetHighlight() {
  3259. _highlightColor = highlightColor;
  3260. }
  3261. /**
  3262. * 获取默认高亮颜色
  3263. */
  3264. function getHighlightColor() {
  3265. return highlightColor;
  3266. }
  3267. /**
  3268. * 径向渐变
  3269. * @param {number} x0 渐变起点
  3270. * @param {number} y0
  3271. * @param {number} r0
  3272. * @param {number} x1 渐变终点
  3273. * @param {number} y1
  3274. * @param {number} r1
  3275. * @param {Array} colorList 颜色列表
  3276. */
  3277. function getRadialGradient(x0, y0, r0, x1, y1, r1, colorList) {
  3278. if (!_ctx) {
  3279. _ctx = util.getContext();
  3280. }
  3281. var gradient = _ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
  3282. for ( var i = 0, l = colorList.length; i < l; i++) {
  3283. gradient.addColorStop(colorList[i][0], colorList[i][1]);
  3284. }
  3285. gradient.__nonRecursion = true;
  3286. return gradient;
  3287. }
  3288. /**
  3289. * 线性渐变
  3290. * @param {Object} x0 渐变起点
  3291. * @param {Object} y0
  3292. * @param {Object} x1 渐变终点
  3293. * @param {Object} y1
  3294. * @param {Array} colorList 颜色列表
  3295. */
  3296. function getLinearGradient(x0, y0, x1, y1, colorList) {
  3297. if (!_ctx) {
  3298. _ctx = util.getContext();
  3299. }
  3300. var gradient = _ctx.createLinearGradient(x0, y0, x1, y1);
  3301. for ( var i = 0, l = colorList.length; i < l; i++) {
  3302. gradient.addColorStop(colorList[i][0], colorList[i][1]);
  3303. }
  3304. gradient.__nonRecursion = true;
  3305. return gradient;
  3306. }
  3307. /**
  3308. * 获取两种颜色之间渐变颜色数组
  3309. * @param {color} start 起始颜色
  3310. * @param {color} end 结束颜色
  3311. * @param {number} step 渐变级数
  3312. * @return {Array} 颜色数组
  3313. */
  3314. function getStepColors(start, end, step) {
  3315. start = toRGBA(start);
  3316. end = toRGBA(end);
  3317. start = getData(start);
  3318. end = getData(end);
  3319. var colors = [];
  3320. var stepR = (end[0] - start[0]) / step;
  3321. var stepG = (end[1] - start[1]) / step;
  3322. var stepB = (end[2] - start[2]) / step;
  3323. // 生成颜色集合
  3324. // fix by linfeng 颜色堆积
  3325. for (var i = 0, r = start[0], g = start[1], b = start[2]; i < step; i++
  3326. ) {
  3327. colors[i] = toColor([
  3328. adjust(Math.floor(r), [ 0, 255 ]),
  3329. adjust(Math.floor(g), [ 0, 255 ]),
  3330. adjust(Math.floor(b), [ 0, 255 ])
  3331. ]);
  3332. r += stepR;
  3333. g += stepG;
  3334. b += stepB;
  3335. }
  3336. r = end[0];
  3337. g = end[1];
  3338. b = end[2];
  3339. colors[i] = toColor( [ r, g, b ]);
  3340. return colors;
  3341. }
  3342. /**
  3343. * 获取指定级数的渐变颜色数组
  3344. * @param {Array} colors 颜色组
  3345. * @param {number=20} step 渐变级数
  3346. * @return {Array} 颜色数组
  3347. */
  3348. function getGradientColors(colors, step) {
  3349. var ret = [];
  3350. var len = colors.length;
  3351. if (step === undefined) {
  3352. step = 20;
  3353. }
  3354. if (len === 1) {
  3355. ret = getStepColors(colors[0], colors[0], step);
  3356. } else if (len > 1) {
  3357. for ( var i = 0, n = len - 1; i < n; i++) {
  3358. var steps = getStepColors(colors[i], colors[i + 1], step);
  3359. if (i < n - 1) {
  3360. steps.pop();
  3361. }
  3362. ret = ret.concat(steps);
  3363. }
  3364. }
  3365. return ret;
  3366. }
  3367. /**
  3368. * 颜色值数组转为指定格式颜色,例如:<br/>
  3369. * data = [60,20,20,0.1] format = 'rgba'
  3370. * 返回:rgba(60,20,20,0.1)
  3371. * @param {Array} data 颜色值数组
  3372. * @param {string} format 格式,默认rgb
  3373. * @return {string} 颜色
  3374. */
  3375. function toColor(data, format) {
  3376. format = format || 'rgb';
  3377. if (data && (data.length === 3 || data.length === 4)) {
  3378. data = map(data,
  3379. function(c) {
  3380. return c > 1 ? Math.ceil(c) : c;
  3381. });
  3382. if (format.indexOf('hex') > -1) {
  3383. data = map(data.slice(0, 3),
  3384. function(c) {
  3385. c = Number(c).toString(16);
  3386. return (c.length === 1) ? '0' + c : c;
  3387. });
  3388. return '#' + data.join('');
  3389. } else if (format.indexOf('hs') > -1) {
  3390. var sx = map(data.slice(1, 3),
  3391. function(c) {
  3392. return c + '%';
  3393. });
  3394. data[1] = sx[0];
  3395. data[2] = sx[1];
  3396. }
  3397. if (format.indexOf('a') > -1) {
  3398. if (data.length === 3) {
  3399. data.push(1);
  3400. }
  3401. data[3] = adjust(data[3], [ 0, 1 ]);
  3402. return format + '(' + data.slice(0, 4).join(',') + ')';
  3403. }
  3404. return format + '(' + data.slice(0, 3).join(',') + ')';
  3405. }
  3406. }
  3407. /**
  3408. * 返回颜色值数组
  3409. * @param {string} color 颜色
  3410. * @return {Array} 颜色值数组
  3411. */
  3412. function toArray(color) {
  3413. color = trim(color);
  3414. if (color.indexOf('#') > -1) {
  3415. color = toRGB(color);
  3416. }
  3417. var data = color.replace(/[rgbahsvl%\(\)]/ig, '').split(',');
  3418. data = map(data,
  3419. function(c) {
  3420. return Number(c);
  3421. });
  3422. return data;
  3423. }
  3424. /**
  3425. * 颜色格式转化
  3426. * @param {Array} data 颜色值数组
  3427. * @param {string} format 格式,默认rgb
  3428. * @return {string} 颜色
  3429. */
  3430. function convert(color, format) {
  3431. var data = getData(color);
  3432. var alpha = data[3];
  3433. if(typeof alpha === 'undefined') {
  3434. alpha = 1;
  3435. }
  3436. if (color.indexOf('hsb') > -1) {
  3437. data = _HSV_2_RGB(data);
  3438. } else if (color.indexOf('hsl') > -1) {
  3439. data = _HSL_2_RGB(data);
  3440. }
  3441. if (format.indexOf('hsb') > -1 || format.indexOf('hsv') > -1) {
  3442. data = _RGB_2_HSB(data);
  3443. } else if (format.indexOf('hsl') > -1) {
  3444. data = _RGB_2_HSL(data);
  3445. }
  3446. data[3] = alpha;
  3447. return toColor(data, format);
  3448. }
  3449. /**
  3450. * 转换为rgba格式的颜色
  3451. * @param {string} color 颜色
  3452. * @return {string} rgba颜色,rgba(r,g,b,a)
  3453. */
  3454. function toRGBA(color) {
  3455. return convert(color, 'rgba');
  3456. }
  3457. /**
  3458. * 转换为rgb数字格式的颜色
  3459. * @param {string} color 颜色
  3460. * @return {string} rgb颜色,rgb(0,0,0)格式
  3461. */
  3462. function toRGB(color) {
  3463. return convert(color, 'rgb');
  3464. }
  3465. /**
  3466. * 转换为16进制颜色
  3467. * @param {string} color 颜色
  3468. * @return {string} 16进制颜色,#rrggbb格式
  3469. */
  3470. function toHex(color) {
  3471. return convert(color, 'hex');
  3472. }
  3473. /**
  3474. * 转换为HSV颜色
  3475. * @param {string} color 颜色
  3476. * @return {string} HSVA颜色,hsva(h,s,v,a)
  3477. */
  3478. function toHSVA(color) {
  3479. return convert(color, 'hsva');
  3480. }
  3481. /**
  3482. * 转换为HSV颜色
  3483. * @param {string} color 颜色
  3484. * @return {string} HSV颜色,hsv(h,s,v)
  3485. */
  3486. function toHSV(color) {
  3487. return convert(color, 'hsv');
  3488. }
  3489. /**
  3490. * 转换为HSBA颜色
  3491. * @param {string} color 颜色
  3492. * @return {string} HSBA颜色,hsba(h,s,b,a)
  3493. */
  3494. function toHSBA(color) {
  3495. return convert(color, 'hsba');
  3496. }
  3497. /**
  3498. * 转换为HSB颜色
  3499. * @param {string} color 颜色
  3500. * @return {string} HSB颜色,hsb(h,s,b)
  3501. */
  3502. function toHSB(color) {
  3503. return convert(color, 'hsb');
  3504. }
  3505. /**
  3506. * 转换为HSLA颜色
  3507. * @param {string} color 颜色
  3508. * @return {string} HSLA颜色,hsla(h,s,l,a)
  3509. */
  3510. function toHSLA(color) {
  3511. return convert(color, 'hsla');
  3512. }
  3513. /**
  3514. * 转换为HSL颜色
  3515. * @param {string} color 颜色
  3516. * @return {string} HSL颜色,hsl(h,s,l)
  3517. */
  3518. function toHSL(color) {
  3519. return convert(color, 'hsl');
  3520. }
  3521. /**
  3522. * 转换颜色名
  3523. * @param {string} color 颜色
  3524. * @return {String} 颜色名
  3525. */
  3526. function toName(color) {
  3527. for ( var key in _nameColors) {
  3528. if (toHex(_nameColors[key]) === toHex(color)) {
  3529. return key;
  3530. }
  3531. }
  3532. return null;
  3533. }
  3534. /**
  3535. * 移除颜色中多余空格
  3536. * @param {String} color 颜色
  3537. * @return {String} 无空格颜色
  3538. */
  3539. function trim(color) {
  3540. color = String(color);
  3541. color = color.replace(/(^\s*)|(\s*$)/g, '');
  3542. if (/^[^#]*?$/i.test(color)) {
  3543. color = color.replace(/\s/g, '');
  3544. }
  3545. return color;
  3546. }
  3547. // 规范化
  3548. function normalize(color) {
  3549. // 颜色名
  3550. if (_nameColors[color]) {
  3551. color = _nameColors[color];
  3552. }
  3553. // 去掉空格
  3554. color = trim(color);
  3555. // hsv与hsb等价
  3556. color = color.replace(/hsv/i, 'hsb');
  3557. // rgb转为rrggbb
  3558. if (/^#[0-9a-f]{3}$/i.test(color)) {
  3559. var d = color.replace('#', '').split('');
  3560. color = '#' + d[0] + d[0] + d[1] + d[1] + d[2] + d[2];
  3561. }
  3562. return color;
  3563. }
  3564. /**
  3565. * 颜色加深或减淡,当level>0加深,当level<0减淡
  3566. * @param {string} color 颜色
  3567. * @param {number} level 升降程度,取值区间[-1,1]
  3568. * @return {string} 加深或减淡后颜色值
  3569. */
  3570. function lift(color, level) {
  3571. var direct = level > 0 ? 1 : -1;
  3572. if (typeof level === 'undefined') {
  3573. level = 0;
  3574. }
  3575. level = Math.abs(level) > 1 ? 1 : Math.abs(level);
  3576. color = toRGB(color);
  3577. var data = getData(color);
  3578. for ( var i = 0; i < 3; i++) {
  3579. if (direct === 1) {
  3580. data[i] = Math.floor(data[i] * (1 - level));
  3581. } else {
  3582. data[i] = Math.floor((255 - data[i]) * level + data[i]);
  3583. }
  3584. }
  3585. return 'rgb(' + data.join(',') + ')';
  3586. }
  3587. /**
  3588. * 颜色翻转,[255-r,255-g,255-b,1-a]
  3589. * @param {string} color 颜色
  3590. * @return {string} 翻转颜色
  3591. */
  3592. function reverse(color) {
  3593. var data = getData(toRGBA(color));
  3594. data = map(data,
  3595. function(c) {
  3596. return 255 - c;
  3597. });
  3598. return toColor(data, 'rgb');
  3599. }
  3600. /**
  3601. * 简单两种颜色混合
  3602. * @param {String} color1 第一种颜色
  3603. * @param {String} color2 第二种颜色
  3604. * @param {String} weight 混合权重[0-1]
  3605. * @return {String} 结果色,rgb(r,g,b)或rgba(r,g,b,a)
  3606. */
  3607. function mix(color1, color2, weight) {
  3608. if(typeof weight === 'undefined') {
  3609. weight = 0.5;
  3610. }
  3611. weight = 1 - adjust(weight, [0, 1]);
  3612. var w = weight * 2 - 1;
  3613. var data1 = getData(toRGBA(color1));
  3614. var data2 = getData(toRGBA(color2));
  3615. var d = data1[3] - data2[3];
  3616. var weight1 = (((w * d === -1) ? w : (w + d) / (1 + w * d)) + 1) / 2;
  3617. var weight2 = 1 - weight1;
  3618. var data = [];
  3619. for ( var i = 0; i < 3; i++) {
  3620. data[i] = data1[i] * weight1 + data2[i] * weight2;
  3621. }
  3622. var alpha = data1[3] * weight + data2[3] * (1 - weight);
  3623. alpha = Math.max(0, Math.min(1, alpha));
  3624. if (data1[3] === 1 && data2[3] === 1) {// 不考虑透明度
  3625. return toColor(data, 'rgb');
  3626. }
  3627. data[3] = alpha;
  3628. return toColor(data, 'rgba');
  3629. }
  3630. /**
  3631. * 随机颜色
  3632. * @return {string} 颜色值,#rrggbb格式
  3633. */
  3634. function random() {
  3635. return toHex(
  3636. 'rgb(' + Math.round(Math.random() * 256) + ','
  3637. + Math.round(Math.random() * 256) + ','
  3638. + Math.round(Math.random() * 256) + ')'
  3639. );
  3640. }
  3641. /**
  3642. * 获取颜色值数组,返回值范围: <br/>
  3643. * RGB 范围[0-255] <br/>
  3644. * HSL/HSV/HSB 范围[0-1]<br/>
  3645. * A透明度范围[0-1]
  3646. * 支持格式:
  3647. * #rgb
  3648. * #rrggbb
  3649. * rgb(r,g,b)
  3650. * rgb(r%,g%,b%)
  3651. * rgba(r,g,b,a)
  3652. * hsb(h,s,b) // hsv与hsb等价
  3653. * hsb(h%,s%,b%)
  3654. * hsba(h,s,b,a)
  3655. * hsl(h,s,l)
  3656. * hsl(h%,s%,l%)
  3657. * hsla(h,s,l,a)
  3658. * @param {string} color 颜色
  3659. * @return {Array} 颜色值数组或null
  3660. */
  3661. function getData(color) {
  3662. color = normalize(color);
  3663. var r = color.match(colorRegExp);
  3664. if (r === null) {
  3665. throw new Error('The color format error'); // 颜色格式错误
  3666. }
  3667. var d;
  3668. var a;
  3669. var data = [];
  3670. var rgb;
  3671. if (r[2]) {
  3672. // #rrggbb
  3673. d = r[2].replace('#', '').split('');
  3674. rgb = [ d[0] + d[1], d[2] + d[3], d[4] + d[5] ];
  3675. data = map(rgb,
  3676. function(c) {
  3677. return adjust(parseInt(c, 16), [ 0, 255 ]);
  3678. });
  3679. }
  3680. else if (r[4]) {
  3681. // rgb rgba
  3682. var rgba = (r[4]).split(',');
  3683. a = rgba[3];
  3684. rgb = rgba.slice(0, 3);
  3685. data = map(
  3686. rgb,
  3687. function(c) {
  3688. c = Math.floor(
  3689. c.indexOf('%') > 0 ? parseInt(c, 0) * 2.55 : c
  3690. );
  3691. return adjust(c, [ 0, 255 ]);
  3692. }
  3693. );
  3694. if( typeof a !== 'undefined') {
  3695. data.push(adjust(parseFloat(a), [ 0, 1 ]));
  3696. }
  3697. }
  3698. else if (r[5] || r[6]) {
  3699. // hsb hsba hsl hsla
  3700. var hsxa = (r[5] || r[6]).split(',');
  3701. var h = parseInt(hsxa[0], 0) / 360;
  3702. var s = hsxa[1];
  3703. var x = hsxa[2];
  3704. a = hsxa[3];
  3705. data = map( [ s, x ],
  3706. function(c) {
  3707. return adjust(parseFloat(c) / 100, [ 0, 1 ]);
  3708. });
  3709. data.unshift(h);
  3710. if( typeof a !== 'undefined') {
  3711. data.push(adjust(parseFloat(a), [ 0, 1 ]));
  3712. }
  3713. }
  3714. return data;
  3715. }
  3716. /**
  3717. * 设置颜色透明度
  3718. * @param {string} color 颜色
  3719. * @param {number} alpha 透明度,区间[0,1]
  3720. * @return {string} rgba颜色值
  3721. */
  3722. function alpha(color, a) {
  3723. if (a === null) {
  3724. a = 1;
  3725. }
  3726. var data = getData(toRGBA(color));
  3727. data[3] = adjust(Number(a).toFixed(4), [ 0, 1 ]);
  3728. return toColor(data, 'rgba');
  3729. }
  3730. // 数组映射
  3731. function map(array, fun) {
  3732. if (typeof fun !== 'function') {
  3733. throw new TypeError();
  3734. }
  3735. var len = array ? array.length : 0;
  3736. for ( var i = 0; i < len; i++) {
  3737. array[i] = fun(array[i]);
  3738. }
  3739. return array;
  3740. }
  3741. // 调整值区间
  3742. function adjust(value, region) {
  3743. // < to <= & > to >=
  3744. // modify by linzhifeng 2014-05-25 because -0 == 0
  3745. if (value <= region[0]) {
  3746. value = region[0];
  3747. }
  3748. else if (value >= region[1]) {
  3749. value = region[1];
  3750. }
  3751. return value;
  3752. }
  3753. // 参见 http:// www.easyrgb.com/index.php?X=MATH
  3754. function _HSV_2_RGB(data) {
  3755. var H = data[0];
  3756. var S = data[1];
  3757. var V = data[2];
  3758. // HSV from 0 to 1
  3759. var R, G, B;
  3760. if (S === 0) {
  3761. R = V * 255;
  3762. G = V * 255;
  3763. B = V * 255;
  3764. } else {
  3765. var h = H * 6;
  3766. if (h === 6) {
  3767. h = 0;
  3768. }
  3769. var i = Math.floor(h);
  3770. var v1 = V * (1 - S);
  3771. var v2 = V * (1 - S * (h - i));
  3772. var v3 = V * (1 - S * (1 - (h - i)));
  3773. var r = 0;
  3774. var g = 0;
  3775. var b = 0;
  3776. if (i === 0) {
  3777. r = V;
  3778. g = v3;
  3779. b = v1;
  3780. } else if (i === 1) {
  3781. r = v2;
  3782. g = V;
  3783. b = v1;
  3784. } else if (i === 2) {
  3785. r = v1;
  3786. g = V;
  3787. b = v3;
  3788. } else if (i === 3) {
  3789. r = v1;
  3790. g = v2;
  3791. b = V;
  3792. } else if (i === 4) {
  3793. r = v3;
  3794. g = v1;
  3795. b = V;
  3796. } else {
  3797. r = V;
  3798. g = v1;
  3799. b = v2;
  3800. }
  3801. // RGB results from 0 to 255
  3802. R = r * 255;
  3803. G = g * 255;
  3804. B = b * 255;
  3805. }
  3806. return [ R, G, B ];
  3807. }
  3808. function _HSL_2_RGB(data) {
  3809. var H = data[0];
  3810. var S = data[1];
  3811. var L = data[2];
  3812. // HSL from 0 to 1
  3813. var R, G, B;
  3814. if (S === 0) {
  3815. R = L * 255;
  3816. G = L * 255;
  3817. B = L * 255;
  3818. } else {
  3819. var v2;
  3820. if (L < 0.5) {
  3821. v2 = L * (1 + S);
  3822. } else {
  3823. v2 = (L + S) - (S * L);
  3824. }
  3825. var v1 = 2 * L - v2;
  3826. R = 255 * _HUE_2_RGB(v1, v2, H + (1 / 3));
  3827. G = 255 * _HUE_2_RGB(v1, v2, H);
  3828. B = 255 * _HUE_2_RGB(v1, v2, H - (1 / 3));
  3829. }
  3830. return [ R, G, B ];
  3831. }
  3832. function _HUE_2_RGB(v1, v2, vH) {
  3833. if (vH < 0) {
  3834. vH += 1;
  3835. }
  3836. if (vH > 1) {
  3837. vH -= 1;
  3838. }
  3839. if ((6 * vH) < 1) {
  3840. return (v1 + (v2 - v1) * 6 * vH);
  3841. }
  3842. if ((2 * vH) < 1) {
  3843. return (v2);
  3844. }
  3845. if ((3 * vH) < 2) {
  3846. return (v1 + (v2 - v1) * ((2 / 3) - vH) * 6);
  3847. }
  3848. return v1;
  3849. }
  3850. function _RGB_2_HSB(data) {
  3851. // RGB from 0 to 255
  3852. var R = (data[0] / 255);
  3853. var G = (data[1] / 255);
  3854. var B = (data[2] / 255);
  3855. var vMin = Math.min(R, G, B); // Min. value of RGB
  3856. var vMax = Math.max(R, G, B); // Max. value of RGB
  3857. var delta = vMax - vMin; // Delta RGB value
  3858. var V = vMax;
  3859. var H;
  3860. var S;
  3861. // HSV results from 0 to 1
  3862. if (delta === 0) {
  3863. H = 0;
  3864. S = 0;
  3865. } else {
  3866. S = delta / vMax;
  3867. var deltaR = (((vMax - R) / 6) + (delta / 2)) / delta;
  3868. var deltaG = (((vMax - G) / 6) + (delta / 2)) / delta;
  3869. var deltaB = (((vMax - B) / 6) + (delta / 2)) / delta;
  3870. if (R === vMax) {
  3871. H = deltaB - deltaG;
  3872. } else if (G === vMax) {
  3873. H = (1 / 3) + deltaR - deltaB;
  3874. } else if (B === vMax) {
  3875. H = (2 / 3) + deltaG - deltaR;
  3876. }
  3877. if (H < 0) {
  3878. H += 1;
  3879. }
  3880. if (H > 1) {
  3881. H -= 1;
  3882. }
  3883. }
  3884. H = H * 360;
  3885. S = S * 100;
  3886. V = V * 100;
  3887. return [ H, S, V ];
  3888. }
  3889. function _RGB_2_HSL(data) {
  3890. // RGB from 0 to 255
  3891. var R = (data[0] / 255);
  3892. var G = (data[1] / 255);
  3893. var B = (data[2] / 255);
  3894. var vMin = Math.min(R, G, B); // Min. value of RGB
  3895. var vMax = Math.max(R, G, B); // Max. value of RGB
  3896. var delta = vMax - vMin; // Delta RGB value
  3897. var L = (vMax + vMin) / 2;
  3898. var H;
  3899. var S;
  3900. // HSL results from 0 to 1
  3901. if (delta === 0) {
  3902. H = 0;
  3903. S = 0;
  3904. } else {
  3905. if (L < 0.5) {
  3906. S = delta / (vMax + vMin);
  3907. } else {
  3908. S = delta / (2 - vMax - vMin);
  3909. }
  3910. var deltaR = (((vMax - R) / 6) + (delta / 2)) / delta;
  3911. var deltaG = (((vMax - G) / 6) + (delta / 2)) / delta;
  3912. var deltaB = (((vMax - B) / 6) + (delta / 2)) / delta;
  3913. if (R === vMax) {
  3914. H = deltaB - deltaG;
  3915. } else if (G === vMax) {
  3916. H = (1 / 3) + deltaR - deltaB;
  3917. } else if (B === vMax) {
  3918. H = (2 / 3) + deltaG - deltaR;
  3919. }
  3920. if (H < 0) {
  3921. H += 1;
  3922. }
  3923. if (H > 1) {
  3924. H -= 1;
  3925. }
  3926. }
  3927. H = H * 360;
  3928. S = S * 100;
  3929. L = L * 100;
  3930. return [ H, S, L ];
  3931. }
  3932. return {
  3933. customPalette : customPalette,
  3934. resetPalette : resetPalette,
  3935. getColor : getColor,
  3936. getHighlightColor : getHighlightColor,
  3937. customHighlight : customHighlight,
  3938. resetHighlight : resetHighlight,
  3939. getRadialGradient : getRadialGradient,
  3940. getLinearGradient : getLinearGradient,
  3941. getGradientColors : getGradientColors,
  3942. getStepColors : getStepColors,
  3943. reverse : reverse,
  3944. mix : mix,
  3945. lift : lift,
  3946. trim : trim,
  3947. random : random,
  3948. toRGB : toRGB,
  3949. toRGBA : toRGBA,
  3950. toHex : toHex,
  3951. toHSL : toHSL,
  3952. toHSLA : toHSLA,
  3953. toHSB : toHSB,
  3954. toHSBA : toHSBA,
  3955. toHSV : toHSV,
  3956. toHSVA : toHSVA,
  3957. toName : toName,
  3958. toColor : toColor,
  3959. toArray : toArray,
  3960. alpha : alpha,
  3961. getData : getData
  3962. };
  3963. });
  3964. /**
  3965. * zrender : shape基类
  3966. *
  3967. * desc: zrender是一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型。
  3968. * author: Kener (@Kener-林峰, linzhifeng@baidu.com)
  3969. *
  3970. * 可配图形属性:
  3971. {
  3972. // 基础属性,详见各shape
  3973. shape : {string}, // 必须,shape类标识,需要显式指定
  3974. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  3975. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  3976. invisible : {boolean}, // 默认为false,是否可见
  3977. // 变换
  3978. position : {array}, // 默认为[0, 0], shape的坐标
  3979. rotation : {number|array}, // 默认为[0, 0, 0],shape绕自身旋转的角度,不被translate 影响
  3980. // 后两个值为旋转的origin
  3981. scale : {array}, // 默认为[1, 1, 0, 0], shape纵横缩放比例,不被translate影响
  3982. // 后两个值为缩放的origin
  3983. // 样式属性,详见各shape,默认状态样式属性
  3984. style : {Object},
  3985. // 样式属性,详见各shape,高亮样式属性,当不存在highlightStyle时使用默认样式扩展显示
  3986. highlightStyle : {Object},
  3987. // 交互属性,zrender支持,非图形类实现
  3988. hoverable : {boolean}, // 默认为true,可悬浮响应,默认悬浮响应为高亮显示
  3989. // 可在onbrush中捕获并阻塞高亮绘画
  3990. clickable : {boolean}, // 默认为false,可点击响应,影响鼠标hover时图标是否为可点击样式
  3991. // 为false则阻断点击事件抛出,为true可在onclick中捕获
  3992. draggable : {boolean}, // 默认为false,可拖拽响应,默认拖拽响应改变图形位置,
  3993. // 可在ondrift中捕获并阻塞默认拖拽行为
  3994. // 事件属性
  3995. onbrush : {Function}, // 默认为null,当前图形被刷画时回调,可用于实现自定义绘画
  3996. // 回传参数为:
  3997. // @param {2D Context} context 当前canvas context
  3998. // @param {Object} shape 当前shape
  3999. // @param {boolean} isHighlight 是否高亮
  4000. // @return {boolean} 回调返回true则不执行默认绘画
  4001. ondrift : {Function}, // 默认为null,当前图形被拖拽改变位置时回调,可用于限制拖拽范围
  4002. // 回传参数为:
  4003. // @param {Object} shape 当前shape
  4004. // @param {number} dx x方向变化
  4005. // @param {number} dy y方向变化
  4006. onclick : {Function}, // 默认为null,当前图形点击响应,回传参数为:
  4007. // @param {Object} eventPacket 对象内容如下:
  4008. // @param {string} eventPacket.type 事件类型,EVENT.CLICK
  4009. // @param {event} eventPacket.event 原始dom事件对象
  4010. // @param {Object} eventPacket.target 当前图形shape对象
  4011. // @return {boolean} 回调返回true则阻止抛出全局事件
  4012. onmousewheel : {Function}, // 默认为null,当前图形上鼠标滚轮触发,回传参数格式同onclick,其中:
  4013. // 事件类型为confit.EVENT.MOUSEWHEEL
  4014. // @return {boolean} 回调返回true则阻止抛出全局事件
  4015. onmousemove : {Function}, // 默认为null,当前图上形鼠标(或手指)移动触发,回传参数格式同onclick,其中:
  4016. // 事件类型为confit.EVENT.MOUSEMOVE
  4017. // @return {boolean} 回调返回true则阻止抛出全局事件
  4018. onmouseover : {Function}, // 默认为null,鼠标(或手指)移动到当前图形上触发,回传参数格式同onclick:
  4019. // 事件类型为confit.EVENT.MOUSEOVER
  4020. // @return {boolean} 回调返回true则阻止抛出全局事件
  4021. onmouseout : {Function}, // 默认为null,鼠标(或手指)从当前图形移开,回传参数格式同onclick,其中:
  4022. // 事件类型为confit.EVENT.MOUSEOUT
  4023. // @return {boolean} 回调返回true则阻止抛出全局事件
  4024. onmousedown : {Function}, // 默认为null,鼠标按钮(或手指)按下,回传参数格式同onclick,其中:
  4025. // 事件类型为confit.EVENT.MOUSEDOWN
  4026. // @return {boolean} 回调返回true则阻止抛出全局事件
  4027. onmouseup : {Function}, // 默认为null,鼠标按钮(或手指)松开,回传参数格式同onclick,其中:
  4028. // 事件类型为confit.EVENT.MOUSEUP
  4029. // @return {boolean} 回调返回true则阻止抛出全局事件
  4030. ondragstart : {Function}, // 默认为null,开始拖拽时触发,回传参数格式同onclick,其中:
  4031. // 事件类型为confit.EVENT.DRAGSTART
  4032. // @return {boolean} 回调返回true则阻止抛出全局事件
  4033. ondragend : {Function}, // 默认为null,拖拽完毕时触发,回传参数格式同onclick,其中:
  4034. // 事件类型为confit.EVENT.DRAGEND
  4035. // @return {boolean} 回调返回true则阻止抛出全局事件
  4036. ondragenter : {Function}, // 默认为null,拖拽图形元素进入目标图形元素时触发
  4037. // 回传参数格式同onclick,其中:
  4038. // @param {string} eventPacket.type 事件类型,EVENT.DRAGENTER
  4039. // @param {Object} eventPacket.target 目标图形元素shape对象
  4040. // @param {Object} eventPacket.dragged 拖拽图形元素shape对象
  4041. // @return {boolean} 回调返回true则阻止抛出全局事件
  4042. ondragover : {Function}, // 默认为null,拖拽图形元素在目标图形元素上移动时触发,
  4043. // 回传参数格式同onclick,其中:
  4044. // @param {string} eventPacket.type 事件类型,EVENT.DRAGOVER
  4045. // @param {Object} eventPacket.target 目标图形元素shape对象
  4046. // @param {Object} eventPacket.dragged 拖拽图形元素shape对象
  4047. // @return {boolean} 回调返回true则阻止抛出全局事件
  4048. ondragleave : {Function}, // 默认为null,拖拽图形元素离开目标图形元素时触发,
  4049. // 回传参数格式同onclick,其中:
  4050. // @param {string} eventPacket.type 事件类型,EVENT.DRAGLEAVE
  4051. // @param {Object} eventPacket.target 目标图形元素shape对象
  4052. // @param {Object} eventPacket.dragged 拖拽图形元素shape对象
  4053. // @return {boolean} 回调返回true则阻止抛出全局事件
  4054. ondrop : {Function}, // 默认为null,拖拽图形元素放在目标图形元素内时触发,
  4055. // 回传参数格式同onclick,其中:
  4056. // @param {string} eventPacket.type 事件类型,EVENT.DRAG
  4057. // @param {Object} eventPacket.target 目标图形元素shape对象
  4058. // @param {Object} eventPacket.dragged 拖拽图形元素shape对象
  4059. // @return {boolean} 回调返回true则阻止抛出全局事件
  4060. }
  4061. */
  4062. define(
  4063. 'zrender/shape/base',['require','../tool/area','../tool/matrix','../tool/vector','../tool/color'],function(require) {
  4064. var self;
  4065. var area = require('../tool/area');
  4066. var matrix = require('../tool/matrix');
  4067. var vec2 = require('../tool/vector');
  4068. /**
  4069. * 派生实现通用功能
  4070. * @param {Object} clazz 图形类
  4071. */
  4072. function derive(clazz) {
  4073. var methods = [ // 派生实现的基类方法
  4074. 'brush',
  4075. 'setContext',
  4076. 'dashedLineTo',
  4077. 'smoothBezier',
  4078. 'smoothSpline',
  4079. 'drawText',
  4080. 'getHighlightStyle',
  4081. 'getHighlightZoom',
  4082. 'drift',
  4083. 'isCover',
  4084. 'updateTransform'
  4085. ];
  4086. var len = methods.length;
  4087. var proto = clazz.prototype;
  4088. var i = 0;
  4089. var method;
  4090. for (; i < len; i++) {
  4091. method = methods[i];
  4092. if (!proto[method]) {
  4093. proto[method] = self[method];
  4094. }
  4095. }
  4096. }
  4097. /**
  4098. * 画刷
  4099. * @param ctx 画布句柄
  4100. * @param e 形状实体
  4101. * @param isHighlight 是否为高亮状态
  4102. * @param updateCallback 需要异步加载资源的shape可以通过这个callback(e)
  4103. * 让painter更新视图,base.brush没用,需要的话重载brush
  4104. */
  4105. function brush(ctx, e, isHighlight) {
  4106. var style = e.style || {};
  4107. if (this.brushTypeOnly) {
  4108. style.brushType = this.brushTypeOnly;
  4109. }
  4110. if (isHighlight) {
  4111. // 根据style扩展默认高亮样式
  4112. style = this.getHighlightStyle(
  4113. style,
  4114. e.highlightStyle || {},
  4115. this.brushTypeOnly
  4116. );
  4117. }
  4118. if (this.brushTypeOnly == 'stroke') {
  4119. style.strokeColor = style.strokeColor || style.color;
  4120. }
  4121. ctx.save();
  4122. this.setContext(ctx, style);
  4123. // 设置transform
  4124. if (e.__needTransform) {
  4125. ctx.transform.apply(ctx,this.updateTransform(e));
  4126. }
  4127. ctx.beginPath();
  4128. this.buildPath(ctx, style);
  4129. if (this.brushTypeOnly != 'stroke') {
  4130. ctx.closePath();
  4131. }
  4132. switch (style.brushType) {
  4133. case 'fill':
  4134. ctx.fill();
  4135. break;
  4136. case 'stroke':
  4137. ctx.stroke();
  4138. break;
  4139. case 'both':
  4140. ctx.stroke();
  4141. ctx.fill();
  4142. break;
  4143. default:
  4144. ctx.fill();
  4145. }
  4146. if (typeof style.text != 'undefined') {
  4147. this.drawText(ctx, style, e.style);
  4148. }
  4149. ctx.restore();
  4150. return;
  4151. }
  4152. /**
  4153. * 画布通用设置
  4154. * @param ctx 画布句柄
  4155. * @param style 通用样式
  4156. */
  4157. function setContext(ctx, style) {
  4158. // 简单判断不做严格类型检测
  4159. if (style.color) {
  4160. ctx.fillStyle = style.color;
  4161. }
  4162. if (style.strokeColor) {
  4163. ctx.strokeStyle = style.strokeColor;
  4164. }
  4165. if (typeof style.opacity != 'undefined') {
  4166. ctx.globalAlpha = style.opacity;
  4167. }
  4168. if (style.lineCap) {
  4169. ctx.lineCap = style.lineCap;
  4170. }
  4171. if (style.lineJoin) {
  4172. ctx.lineJoin = style.lineJoin;
  4173. }
  4174. if (style.miterLimit) {
  4175. ctx.miterLimit = style.miterLimit;
  4176. }
  4177. if (typeof style.lineWidth != 'undefined') {
  4178. ctx.lineWidth = style.lineWidth;
  4179. }
  4180. if (typeof style.shadowBlur != 'undefined') {
  4181. ctx.shadowBlur = style.shadowBlur;
  4182. }
  4183. if (style.shadowColor) {
  4184. ctx.shadowColor = style.shadowColor;
  4185. }
  4186. if (typeof style.shadowOffsetX != 'undefined') {
  4187. ctx.shadowOffsetX = style.shadowOffsetX;
  4188. }
  4189. if (typeof style.shadowOffsetY != 'undefined') {
  4190. ctx.shadowOffsetY = style.shadowOffsetY;
  4191. }
  4192. }
  4193. /**
  4194. * 虚线lineTo
  4195. */
  4196. function dashedLineTo(ctx, x1, y1, x2, y2, dashLength) {
  4197. dashLength = typeof dashLength == 'undefined'
  4198. ? 5 : dashLength;
  4199. var deltaX = x2 - x1;
  4200. var deltaY = y2 - y1;
  4201. var numDashes = Math.floor(
  4202. Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength
  4203. );
  4204. for (var i = 0; i < numDashes; ++i) {
  4205. ctx[i % 2 === 0 ? 'moveTo' : 'lineTo'](
  4206. x1 + (deltaX / numDashes) * i,
  4207. y1 + (deltaY / numDashes) * i
  4208. );
  4209. }
  4210. }
  4211. /**
  4212. * 贝塞尔平滑曲线
  4213. */
  4214. function smoothBezier(points, smooth, loop) {
  4215. var len = points.length;
  4216. var cps = [];
  4217. var v = [];
  4218. var v1 = [];
  4219. var v2 = [];
  4220. var prevPoint;
  4221. var nextPoint;
  4222. for(var i = 0; i < len; i++){
  4223. var point = points[i];
  4224. var prevPoint;
  4225. var nextPoint;
  4226. if (loop) {
  4227. prevPoint = points[i === 0 ? len-1 : i-1];
  4228. nextPoint = points[(i + 1) % len];
  4229. } else {
  4230. if (i === 0 || i === len-1) {
  4231. cps.push(points[i]);
  4232. continue;
  4233. } else {
  4234. prevPoint = points[i-1];
  4235. nextPoint = points[i+1];
  4236. }
  4237. }
  4238. vec2.sub(v, nextPoint, prevPoint);
  4239. //use degree to scale the handle length
  4240. vec2.scale(v, v, smooth);
  4241. var d0 = vec2.distance(point, prevPoint);
  4242. var d1 = vec2.distance(point, nextPoint);
  4243. var sum = d0 + d1;
  4244. d0 /= sum;
  4245. d1 /= sum;
  4246. vec2.scale(v1, v, -d0);
  4247. vec2.scale(v2, v, d1);
  4248. cps.push(vec2.add([], point, v1));
  4249. cps.push(vec2.add([], point, v2));
  4250. }
  4251. if (loop) {
  4252. cps.push(cps.shift());
  4253. }
  4254. return cps;
  4255. }
  4256. /**
  4257. * 多线段平滑曲线 Catmull-Rom spline
  4258. */
  4259. function smoothSpline(points, loop) {
  4260. var len = points.length;
  4261. var ret = [];
  4262. var distance = 0;
  4263. for (var i = 1; i < len; i++) {
  4264. distance += vec2.distance(points[i-1], points[i]);
  4265. }
  4266. var segs = distance / 5;
  4267. for (var i = 0; i < segs; i++) {
  4268. var pos;
  4269. if (loop) {
  4270. pos = i / (segs-1) * len;
  4271. } else {
  4272. pos = i / (segs-1) * (len - 1);
  4273. }
  4274. var idx = Math.floor(pos);
  4275. var w = pos - idx;
  4276. var p0;
  4277. var p1 = points[idx % len];
  4278. var p2;
  4279. var p3;
  4280. if (!loop) {
  4281. p0 = points[idx === 0 ? idx : idx - 1];
  4282. p2 = points[idx > len - 2 ? len - 1 : idx + 1];
  4283. p3 = points[idx > len - 3 ? len - 1 : idx + 2];
  4284. } else {
  4285. p0 = points[(idx -1 + len) % len];
  4286. p2 = points[(idx + 1) % len];
  4287. p3 = points[(idx + 2) % len];
  4288. }
  4289. var w2 = w * w;
  4290. var w3 = w * w2;
  4291. ret.push([
  4292. _interpolate(p0[0], p1[0], p2[0], p3[0], w, w2, w3),
  4293. _interpolate(p0[1], p1[1], p2[1], p3[1], w, w2, w3)
  4294. ]);
  4295. }
  4296. return ret;
  4297. }
  4298. function _interpolate(p0, p1, p2, p3, t, t2, t3) {
  4299. var v0 = (p2 - p0) * 0.5;
  4300. var v1 = (p3 - p1) * 0.5;
  4301. return (2 * (p1 - p2) + v0 + v1) * t3
  4302. + (- 3 * (p1 - p2) - 2 * v0 - v1) * t2
  4303. + v0 * t + p1;
  4304. }
  4305. /**
  4306. * 附加文本
  4307. * @param {Context2D} ctx Canvas 2D上下文
  4308. * @param {Object} style 样式
  4309. * @param {Object} normalStyle 默认样式,用于定位文字显示
  4310. */
  4311. function drawText(ctx, style, normalStyle) {
  4312. // 字体颜色策略
  4313. style.textColor= style.textColor
  4314. || style.color
  4315. || style.strokeColor;
  4316. ctx.fillStyle = style.textColor;
  4317. if (style.textPosition == 'inside') {
  4318. ctx.shadowColor = 'rgba(0,0,0,0)'; // 内部文字不带shadowColor
  4319. }
  4320. // 文本与图形间空白间隙
  4321. var dd = 10;
  4322. var al; // 文本水平对齐
  4323. var bl; // 文本垂直对齐
  4324. var tx; // 文本横坐标
  4325. var ty; // 文本纵坐标
  4326. var textPosition = style.textPosition // 用户定义
  4327. || this.textPosition // shape默认
  4328. || 'top'; // 全局默认
  4329. if ((textPosition == 'inside'
  4330. || textPosition == 'top'
  4331. || textPosition == 'bottom'
  4332. || textPosition == 'left'
  4333. || textPosition == 'right')
  4334. && this.getRect // 矩形定位文字的图形必须提供getRect方法
  4335. ) {
  4336. var rect = (normalStyle || style).__rect
  4337. || this.getRect(normalStyle || style);
  4338. switch (textPosition) {
  4339. case 'inside':
  4340. tx = rect.x + rect.width / 2;
  4341. ty = rect.y + rect.height / 2;
  4342. al = 'center';
  4343. bl = 'middle';
  4344. if (style.brushType != 'stroke'
  4345. && style.textColor == style.color
  4346. ) {
  4347. ctx.fillStyle = '#fff';
  4348. }
  4349. break;
  4350. case 'left':
  4351. tx = rect.x - dd;
  4352. ty = rect.y + rect.height / 2;
  4353. al = 'end';
  4354. bl = 'middle';
  4355. break;
  4356. case 'right':
  4357. tx = rect.x + rect.width + dd;
  4358. ty = rect.y + rect.height / 2;
  4359. al = 'start';
  4360. bl = 'middle';
  4361. break;
  4362. case 'top':
  4363. tx = rect.x + rect.width / 2;
  4364. ty = rect.y - dd;
  4365. al = 'center';
  4366. bl = 'bottom';
  4367. break;
  4368. case 'bottom':
  4369. tx = rect.x + rect.width / 2;
  4370. ty = rect.y + rect.height + dd;
  4371. al = 'center';
  4372. bl = 'top';
  4373. break;
  4374. }
  4375. }
  4376. else if (textPosition == 'start' || textPosition == 'end') {
  4377. var xStart;
  4378. var xEnd;
  4379. var yStart;
  4380. var yEnd;
  4381. if (typeof style.pointList != 'undefined') {
  4382. var pointList = style.pointList;
  4383. if (pointList.length < 2) {
  4384. // 少于2个点就不画了~
  4385. return;
  4386. }
  4387. var length = pointList.length;
  4388. switch (textPosition) {
  4389. case 'start':
  4390. xStart = pointList[0][0];
  4391. xEnd = pointList[1][0];
  4392. yStart = pointList[0][1];
  4393. yEnd = pointList[1][1];
  4394. break;
  4395. case 'end':
  4396. xStart = pointList[length - 2][0];
  4397. xEnd = pointList[length - 1][0];
  4398. yStart = pointList[length - 2][1];
  4399. yEnd = pointList[length - 1][1];
  4400. break;
  4401. }
  4402. }
  4403. else {
  4404. xStart = style.xStart || 0;
  4405. xEnd = style.xEnd || 0;
  4406. yStart = style.yStart || 0;
  4407. yEnd = style.yEnd || 0;
  4408. }
  4409. switch (textPosition) {
  4410. case 'start':
  4411. al = xStart < xEnd ? 'end' : 'start';
  4412. bl = yStart < yEnd ? 'bottom' : 'top';
  4413. tx = xStart;
  4414. ty = yStart;
  4415. break;
  4416. case 'end':
  4417. al = xStart < xEnd ? 'start' : 'end';
  4418. bl = yStart < yEnd ? 'top' : 'bottom';
  4419. tx = xEnd;
  4420. ty = yEnd;
  4421. break;
  4422. }
  4423. dd -= 4;
  4424. if (xStart != xEnd) {
  4425. tx -= (al == 'end' ? dd : -dd);
  4426. } else {
  4427. al = 'center';
  4428. }
  4429. if (yStart != yEnd) {
  4430. ty -= (bl == 'bottom' ? dd : -dd);
  4431. } else {
  4432. bl = 'middle';
  4433. }
  4434. }
  4435. else if (textPosition == 'specific') {
  4436. tx = style.textX || 0;
  4437. ty = style.textY || 0;
  4438. al = 'start';
  4439. bl = 'middle';
  4440. }
  4441. if (typeof tx != 'undefined' && typeof ty != 'undefined') {
  4442. if (style.textFont) {
  4443. ctx.font = style.textFont;
  4444. }
  4445. ctx.textAlign = style.textAlign || al;
  4446. ctx.textBaseline = style.textBaseLine || bl;
  4447. ctx.fillText(style.text, tx, ty);
  4448. }
  4449. }
  4450. /**
  4451. * 根据默认样式扩展高亮样式
  4452. * @param ctx Canvas 2D上下文
  4453. * @param {Object} style 默认样式
  4454. * @param {Object} highlightStyle 高亮样式
  4455. */
  4456. function getHighlightStyle(style, highlightStyle, brushTypeOnly) {
  4457. var newStyle = {};
  4458. for (var k in style) {
  4459. newStyle[k] = style[k];
  4460. }
  4461. var color = require('../tool/color');
  4462. var highlightColor = color.getHighlightColor();
  4463. // 根据highlightStyle扩展
  4464. if (style.brushType != 'stroke') {
  4465. // 带填充则用高亮色加粗边线
  4466. newStyle.strokeColor = highlightColor;
  4467. newStyle.lineWidth = (style.lineWidth || 1)
  4468. + this.getHighlightZoom();
  4469. newStyle.brushType = 'both';
  4470. }
  4471. else {
  4472. if (brushTypeOnly != 'stroke') {
  4473. // 描边型的则用原色加工高亮
  4474. newStyle.strokeColor = highlightColor;
  4475. newStyle.lineWidth = (style.lineWidth || 1)
  4476. + this.getHighlightZoom();
  4477. } else {
  4478. // 线型的则用原色加工高亮
  4479. newStyle.strokeColor = highlightStyle.strokeColor
  4480. || color.mix(
  4481. style.strokeColor,
  4482. color.toRGB(highlightColor)
  4483. );
  4484. }
  4485. }
  4486. // 可自定义覆盖默认值
  4487. for (var k in highlightStyle) {
  4488. newStyle[k] = highlightStyle[k];
  4489. }
  4490. return newStyle;
  4491. }
  4492. /**
  4493. * 高亮放大效果参数
  4494. * 当前统一设置为6,如有需要差异设置,通过this.type判断实例类型
  4495. */
  4496. function getHighlightZoom() {
  4497. return this.type != 'text' ? 6 : 2;
  4498. }
  4499. /**
  4500. * 默认漂移
  4501. * @param e 图形实体
  4502. * @param dx 横坐标变化
  4503. * @param dy 纵坐标变化
  4504. */
  4505. function drift(e, dx, dy) {
  4506. e.position[0] += dx;
  4507. e.position[1] += dy;
  4508. }
  4509. /**
  4510. * 默认区域包含判断
  4511. * @param e 图形实体
  4512. * @param x 横坐标
  4513. * @param y 纵坐标
  4514. */
  4515. function isCover(e, x, y) {
  4516. //对鼠标的坐标也做相同的变换
  4517. if(e.__needTransform && e._transform){
  4518. var inverseMatrix = [];
  4519. matrix.invert(inverseMatrix, e._transform);
  4520. var originPos = [x, y];
  4521. matrix.mulVector(originPos, inverseMatrix, [x, y, 1]);
  4522. if (x == originPos[0] && y == originPos[1]) {
  4523. // 避免外部修改导致的__needTransform不准确
  4524. if (Math.abs(e.rotation[0]) > 0.0001
  4525. || Math.abs(e.position[0]) > 0.0001
  4526. || Math.abs(e.position[1]) > 0.0001
  4527. || Math.abs(e.scale[0] - 1) > 0.0001
  4528. || Math.abs(e.scale[1] - 1) > 0.0001
  4529. ) {
  4530. e.__needTransform = true;
  4531. } else {
  4532. e.__needTransform = false;
  4533. }
  4534. }
  4535. x = originPos[0];
  4536. y = originPos[1];
  4537. }
  4538. // 快速预判并保留判断矩形
  4539. var rect;
  4540. if (e.style.__rect) {
  4541. rect = e.style.__rect;
  4542. }
  4543. else {
  4544. rect = this.getRect(e.style);
  4545. e.style.__rect = rect;
  4546. }
  4547. if (x >= rect.x
  4548. && x <= (rect.x + rect.width)
  4549. && y >= rect.y
  4550. && y <= (rect.y + rect.height)
  4551. ) {
  4552. // 矩形内
  4553. return area.isInside(this, e.style, x, y);
  4554. }
  4555. else {
  4556. return false;
  4557. }
  4558. }
  4559. function updateTransform(e) {
  4560. var _transform = e._transform || matrix.create();
  4561. matrix.identity(_transform);
  4562. if (e.scale && (e.scale[0] !== 1 || e.scale[1] !== 1)) {
  4563. var originX = e.scale[2] || 0;
  4564. var originY = e.scale[3] || 0;
  4565. if (originX || originY ) {
  4566. matrix.translate(
  4567. _transform, _transform, [-originX, -originY]
  4568. );
  4569. }
  4570. matrix.scale(_transform, _transform, e.scale);
  4571. if ( originX || originY ) {
  4572. matrix.translate(
  4573. _transform, _transform, [originX, originY]
  4574. );
  4575. }
  4576. }
  4577. if (e.rotation) {
  4578. if (e.rotation instanceof Array) {
  4579. if (e.rotation[0] !== 0) {
  4580. var originX = e.rotation[1] || 0,
  4581. originY = e.rotation[2] || 0;
  4582. if (originX || originY ) {
  4583. matrix.translate(
  4584. _transform, _transform, [-originX, -originY]
  4585. );
  4586. }
  4587. matrix.rotate(_transform, _transform, e.rotation[0]);
  4588. if (originX || originY ) {
  4589. matrix.translate(
  4590. _transform, _transform, [originX, originY]
  4591. );
  4592. }
  4593. }
  4594. }else{
  4595. if (e.rotation !== 0) {
  4596. matrix.rotate(_transform, _transform, e.rotation);
  4597. }
  4598. }
  4599. }
  4600. if (e.position && (e.position[0] !==0 || e.position[1] !== 0)) {
  4601. matrix.translate(_transform, _transform, e.position);
  4602. }
  4603. // 保存这个变换矩阵
  4604. e._transform = _transform;
  4605. return _transform;
  4606. }
  4607. self = {
  4608. derive : derive,
  4609. brush : brush,
  4610. setContext : setContext,
  4611. dashedLineTo : dashedLineTo,
  4612. smoothBezier : smoothBezier,
  4613. smoothSpline : smoothSpline,
  4614. drawText : drawText,
  4615. getHighlightStyle : getHighlightStyle,
  4616. getHighlightZoom : getHighlightZoom,
  4617. drift : drift,
  4618. isCover : isCover,
  4619. updateTransform : updateTransform
  4620. };
  4621. return self;
  4622. }
  4623. );
  4624. /**
  4625. * zrender
  4626. *
  4627. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  4628. *
  4629. * shape类:圆
  4630. * 可配图形属性:
  4631. {
  4632. // 基础属性
  4633. shape : 'circle', // 必须,shape类标识,需要显式指定
  4634. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  4635. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  4636. invisible : {boolean}, // 默认为false,是否可见
  4637. // 样式属性,默认状态样式样式属性
  4638. style : {
  4639. x : {number}, // 必须,圆心横坐标
  4640. y : {number}, // 必须,圆心纵坐标
  4641. r : {number}, // 必须,圆半径
  4642. brushType : {string}, // 默认为fill,绘画方式
  4643. // fill(填充) | stroke(描边) | both(填充+描边)
  4644. color : {color}, // 默认为'#000',填充颜色,支持rgba
  4645. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  4646. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  4647. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  4648. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  4649. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  4650. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  4651. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  4652. text : {string}, // 默认为null,附加文本
  4653. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  4654. textPosition : {string}, // 默认为top,附加文本位置。
  4655. // inside | left | right | top | bottom
  4656. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  4657. // start | end | left | right | center
  4658. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  4659. // top | bottom | middle |
  4660. // alphabetic | hanging | ideographic
  4661. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  4662. // 'inside' ? '#fff' : color
  4663. },
  4664. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  4665. highlightStyle : {
  4666. // 同style
  4667. }
  4668. // 交互属性,详见shape.Base
  4669. // 事件属性,详见shape.Base
  4670. }
  4671. 例子:
  4672. {
  4673. shape : 'circle',
  4674. id : '123456',
  4675. zlevel : 1,
  4676. style : {
  4677. x : 200,
  4678. y : 100,
  4679. r : 50,
  4680. color : '#eee',
  4681. text : 'Baidu'
  4682. },
  4683. myName : 'kener', // 可自带任何有效自定义属性
  4684. clickable : true,
  4685. onClick : function(eventPacket) {
  4686. alert(eventPacket.target.myName);
  4687. }
  4688. }
  4689. */
  4690. define(
  4691. 'zrender/shape/circle',['require','./base','../shape'],function(require) {
  4692. function Circle() {
  4693. this.type = 'circle';
  4694. }
  4695. Circle.prototype = {
  4696. /**
  4697. * 创建圆形路径
  4698. * @param {Context2D} ctx Canvas 2D上下文
  4699. * @param {Object} style 样式
  4700. */
  4701. buildPath : function(ctx, style) {
  4702. ctx.arc(style.x, style.y, style.r, 0, Math.PI * 2, true);
  4703. return;
  4704. },
  4705. /**
  4706. * 返回矩形区域,用于局部刷新和文字定位
  4707. * @param {Object} style
  4708. */
  4709. getRect : function(style) {
  4710. var lineWidth;
  4711. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  4712. lineWidth = style.lineWidth || 1;
  4713. }
  4714. else {
  4715. lineWidth = 0;
  4716. }
  4717. return {
  4718. x : Math.round(style.x - style.r - lineWidth / 2),
  4719. y : Math.round(style.y - style.r - lineWidth / 2),
  4720. width : style.r * 2 + lineWidth,
  4721. height : style.r * 2 + lineWidth
  4722. };
  4723. }
  4724. };
  4725. var base = require('./base');
  4726. base.derive(Circle);
  4727. var shape = require('../shape');
  4728. shape.define('circle', new Circle());
  4729. return Circle;
  4730. }
  4731. );
  4732. /**
  4733. * zrender
  4734. *
  4735. * author: loutongbing@baidu.com
  4736. *
  4737. * shape类:椭圆
  4738. * Todo:excanvas bug ~ 连续scale保持?? IE8下不建议使用
  4739. * 可配图形属性:
  4740. {
  4741. // 基础属性
  4742. shape : 'ellipse', // 必须,shape类标识,需要显式指定
  4743. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  4744. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  4745. invisible : {boolean}, // 默认为false,是否可见
  4746. // 样式属性,默认状态样式样式属性
  4747. style : {
  4748. x : {number}, // 必须,椭圆心横坐标
  4749. y : {number}, // 必须,椭圆心纵坐标
  4750. a : {number}, // 必须,椭圆横轴半径
  4751. b : {number}, // 必须,椭圆纵轴半径
  4752. brushType : {string}, // 默认为fill,绘画方式
  4753. // fill(填充) | stroke(描边) | both(填充+描边)
  4754. color : {color}, // 默认为'#000',填充颜色,支持rgba
  4755. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  4756. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  4757. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  4758. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  4759. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  4760. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  4761. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  4762. text : {string}, // 默认为null,附加文本
  4763. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  4764. textPosition : {string}, // 默认为top,附加文本位置。
  4765. // inside | left | right | top | bottom
  4766. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  4767. // start | end | left | right | center
  4768. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  4769. // top | bottom | middle |
  4770. // alphabetic | hanging | ideographic
  4771. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  4772. // 'inside' ? '#fff' : color
  4773. },
  4774. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  4775. highlightStyle : {
  4776. // 同style
  4777. }
  4778. // 交互属性,详见shape.Base
  4779. // 事件属性,详见shape.Base
  4780. }
  4781. 例子:
  4782. {
  4783. shape : 'ellipse',
  4784. id : '123456',
  4785. zlevel : 1,
  4786. style : {
  4787. x : 200,
  4788. y : 100,
  4789. a : 100,
  4790. b : 50,
  4791. color : '#eee',
  4792. text : 'Baidu'
  4793. },
  4794. myName : 'kener', // 可自带任何有效自定义属性
  4795. clickable : true,
  4796. onClick : function(eventPacket) {
  4797. alert(eventPacket.target.myName);
  4798. }
  4799. }
  4800. */
  4801. define(
  4802. 'zrender/shape/ellipse',['require','./base','../shape'],function(require) {
  4803. function Ellipse() {
  4804. this.type = 'ellipse';
  4805. }
  4806. Ellipse.prototype = {
  4807. /**
  4808. * 创建圆形路径
  4809. * @param {Context2D} ctx Canvas 2D上下文
  4810. * @param {Object} style 样式
  4811. */
  4812. buildPath : function(ctx, style) {
  4813. var k = 0.5522848;
  4814. var x = style.x;
  4815. var y = style.y;
  4816. var a =style.a;
  4817. var b = style.b;
  4818. var ox = a * k; // 水平控制点偏移量
  4819. var oy = b * k; // 垂直控制点偏移量
  4820. //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
  4821. ctx.moveTo(x - a, y);
  4822. ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
  4823. ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
  4824. ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
  4825. ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
  4826. return;
  4827. },
  4828. /**
  4829. * 返回矩形区域,用于局部刷新和文字定位
  4830. * @param {Object} style
  4831. */
  4832. getRect : function(style) {
  4833. var lineWidth;
  4834. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  4835. lineWidth = style.lineWidth || 1;
  4836. }
  4837. else {
  4838. lineWidth = 0;
  4839. }
  4840. return {
  4841. x : Math.round(style.x - style.a - lineWidth / 2),
  4842. y : Math.round(style.y - style.b - lineWidth / 2),
  4843. width : style.a * 2 + lineWidth,
  4844. height : style.b * 2 + lineWidth
  4845. };
  4846. }
  4847. };
  4848. var base = require('./base');
  4849. base.derive(Ellipse);
  4850. var shape = require('../shape');
  4851. shape.define('ellipse', new Ellipse());
  4852. return Ellipse;
  4853. }
  4854. );
  4855. /**
  4856. * zrender
  4857. *
  4858. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  4859. *
  4860. * shape类:直线
  4861. * 可配图形属性:
  4862. {
  4863. // 基础属性
  4864. shape : 'line', // 必须,shape类标识,需要显式指定
  4865. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  4866. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  4867. invisible : {boolean}, // 默认为false,是否可见
  4868. // 样式属性,默认状态样式样式属性
  4869. style : {
  4870. xStart : {number}, // 必须,起点横坐标
  4871. yStart : {number}, // 必须,起点纵坐标
  4872. xEnd : {number}, // 必须,终点横坐标
  4873. yEnd : {number}, // 必须,终点纵坐标
  4874. strokeColor : {color}, // 默认为'#000',线条颜色(轮廓),支持rgba
  4875. lineType : {string}, // 默认为solid,线条类型,solid | dashed | dotted
  4876. lineWidth : {number}, // 默认为1,线条宽度
  4877. lineCap : {string}, // 默认为butt,线帽样式。butt | round | square
  4878. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  4879. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  4880. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  4881. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  4882. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  4883. text : {string}, // 默认为null,附加文本
  4884. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  4885. textPosition : {string}, // 默认为end,附加文本位置。
  4886. // inside | start | end
  4887. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  4888. // start | end | left | right | center
  4889. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  4890. // top | bottom | middle |
  4891. // alphabetic | hanging | ideographic
  4892. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  4893. // 'inside' ? '#000' : color
  4894. },
  4895. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  4896. highlightStyle : {
  4897. // 同style
  4898. }
  4899. // 交互属性,详见shape.Base
  4900. // 事件属性,详见shape.Base
  4901. }
  4902. 例子:
  4903. {
  4904. shape : 'line',
  4905. id : '123456',
  4906. zlevel : 1,
  4907. style : {
  4908. xStart : 100,
  4909. yStart : 100,
  4910. xEnd : 200,
  4911. yEnd : 200,
  4912. strokeColor : '#eee',
  4913. lineWidth : 20,
  4914. text : 'Baidu'
  4915. },
  4916. myName : 'kener', //可自带任何有效自定义属性
  4917. clickable : true,
  4918. onClick : function(eventPacket) {
  4919. alert(eventPacket.target.myName);
  4920. }
  4921. }
  4922. */
  4923. define(
  4924. 'zrender/shape/line',['require','./base','../shape'],function(require) {
  4925. function Line() {
  4926. this.type = 'line';
  4927. this.brushTypeOnly = 'stroke'; //线条只能描边,填充后果自负
  4928. this.textPosition = 'end';
  4929. }
  4930. Line.prototype = {
  4931. /**
  4932. * 创建线条路径
  4933. * @param {Context2D} ctx Canvas 2D上下文
  4934. * @param {Object} style 样式
  4935. */
  4936. buildPath : function(ctx, style) {
  4937. if (!style.lineType || style.lineType == 'solid') {
  4938. //默认为实线
  4939. ctx.moveTo(style.xStart, style.yStart);
  4940. ctx.lineTo(style.xEnd, style.yEnd);
  4941. }
  4942. else if (style.lineType == 'dashed'
  4943. || style.lineType == 'dotted'
  4944. ) {
  4945. var dashLength =(style.lineWidth || 1)
  4946. * (style.lineType == 'dashed' ? 5 : 1);
  4947. this.dashedLineTo(
  4948. ctx,
  4949. style.xStart, style.yStart,
  4950. style.xEnd, style.yEnd,
  4951. dashLength
  4952. );
  4953. }
  4954. },
  4955. /**
  4956. * 返回矩形区域,用于局部刷新和文字定位
  4957. * @param {Object} style
  4958. */
  4959. getRect : function(style) {
  4960. var lineWidth = style.lineWidth || 1;
  4961. return {
  4962. x : Math.min(style.xStart, style.xEnd) - lineWidth,
  4963. y : Math.min(style.yStart, style.yEnd) - lineWidth,
  4964. width : Math.abs(style.xStart - style.xEnd)
  4965. + lineWidth,
  4966. height : Math.abs(style.yStart - style.yEnd)
  4967. + lineWidth
  4968. };
  4969. }
  4970. };
  4971. var base = require('./base');
  4972. base.derive(Line);
  4973. var shape = require('../shape');
  4974. shape.define('line', new Line());
  4975. return Line;
  4976. }
  4977. );
  4978. /**
  4979. * zrender
  4980. *
  4981. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  4982. *
  4983. * shape类:多边形
  4984. * 可配图形属性:
  4985. {
  4986. // 基础属性
  4987. shape : 'polygon', // 必须,shape类标识,需要显式指定
  4988. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  4989. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  4990. invisible : {boolean}, // 默认为false,是否可见
  4991. // 样式属性,默认状态样式样式属性
  4992. style : {
  4993. pointList : {Array}, // 必须,多边形各个顶角坐标
  4994. brushType : {string}, // 默认为fill,绘画方式
  4995. // fill(填充) | stroke(描边) | both(填充+描边)
  4996. color : {color}, // 默认为'#000',填充颜色,支持rgba
  4997. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  4998. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  4999. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  5000. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  5001. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  5002. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  5003. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  5004. text : {string}, // 默认为null,附加文本
  5005. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  5006. textPosition : {string}, // 默认为top,附加文本位置。
  5007. // inside | left | right | top | bottom
  5008. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  5009. // start | end | left | right | center
  5010. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  5011. // top | bottom | middle |
  5012. // alphabetic | hanging | ideographic
  5013. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  5014. // 'inside' ? '#fff' : color
  5015. },
  5016. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  5017. highlightStyle : {
  5018. // 同style
  5019. }
  5020. // 交互属性,详见shape.Base
  5021. // 事件属性,详见shape.Base
  5022. }
  5023. 例子:
  5024. {
  5025. shape : 'polygon',
  5026. id : '123456',
  5027. zlevel : 1,
  5028. style : {
  5029. pointList : [[10, 10], [300, 20], [298, 400], [50, 450]]
  5030. color : '#eee',
  5031. text : 'Baidu'
  5032. },
  5033. myName : 'kener', // 可自带任何有效自定义属性
  5034. clickable : true,
  5035. onClick : function(eventPacket) {
  5036. alert(eventPacket.target.myName);
  5037. }
  5038. }
  5039. */
  5040. define(
  5041. 'zrender/shape/polygon',['require','./base','../shape'],function(require) {
  5042. function Polygon() {
  5043. this.type = 'polygon';
  5044. }
  5045. Polygon.prototype = {
  5046. /**
  5047. * 画刷
  5048. * @param ctx 画布句柄
  5049. * @param e 形状实体
  5050. * @param isHighlight 是否为高亮状态
  5051. * @param updateCallback 需要异步加载资源的shape可以通过这个callback(e)
  5052. * 让painter更新视图,base.brush没用,需要的话重载brush
  5053. */
  5054. brush : function (ctx, e, isHighlight) {
  5055. var style = e.style || {};
  5056. if (isHighlight) {
  5057. // 根据style扩展默认高亮样式
  5058. style = this.getHighlightStyle(
  5059. style,
  5060. e.highlightStyle || {}
  5061. );
  5062. }
  5063. ctx.save();
  5064. this.setContext(ctx, style);
  5065. // 设置transform
  5066. if (e.__needTransform) {
  5067. ctx.transform.apply(ctx,this.updateTransform(e));
  5068. }
  5069. ctx.beginPath();
  5070. this.buildPath(ctx, style);
  5071. ctx.closePath();
  5072. if (style.brushType == 'stroke' || style.brushType == 'both') {
  5073. ctx.stroke();
  5074. }
  5075. if (style.brushType == 'fill'
  5076. || style.brushType == 'both'
  5077. || typeof style.brushType == 'undefined' // 默认为fill
  5078. ) {
  5079. if (style.lineType == 'dashed'
  5080. || style.lineType == 'dotted'
  5081. ) {
  5082. // 特殊处理,虚线围不成path,实线再build一次
  5083. ctx.beginPath();
  5084. this.buildPath(
  5085. ctx,
  5086. {
  5087. lineType: 'solid',
  5088. lineWidth: style.lineWidth,
  5089. pointList: style.pointList
  5090. }
  5091. );
  5092. ctx.closePath();
  5093. }
  5094. ctx.fill();
  5095. }
  5096. if (style.text) {
  5097. this.drawText(ctx, style, e.style);
  5098. }
  5099. ctx.restore();
  5100. return;
  5101. },
  5102. /**
  5103. * 创建多边形路径
  5104. * @param {Context2D} ctx Canvas 2D上下文
  5105. * @param {Object} style 样式
  5106. */
  5107. buildPath : function(ctx, style) {
  5108. // 虽然能重用brokenLine,但底层图形基于性能考虑,重复代码减少调用吧
  5109. var pointList = style.pointList;
  5110. // 开始点和结束点重复
  5111. var start = pointList[0];
  5112. var end = pointList[pointList.length-1];
  5113. if (start && end) {
  5114. if (start[0] == end[0] &&
  5115. start[1] == end[1]) {
  5116. // 移除最后一个点
  5117. pointList.pop();
  5118. }
  5119. }
  5120. if (pointList.length < 2) {
  5121. // 少于2个点就不画了~
  5122. return;
  5123. }
  5124. if (style.smooth && style.smooth !== 'spline') {
  5125. var controlPoints = this.smoothBezier(
  5126. pointList, style.smooth, true
  5127. );
  5128. ctx.moveTo(pointList[0][0], pointList[0][1]);
  5129. var cp1;
  5130. var cp2;
  5131. var p;
  5132. var len = pointList.length;
  5133. for (var i = 0; i < len; i++) {
  5134. cp1 = controlPoints[i * 2];
  5135. cp2 = controlPoints[i * 2 + 1];
  5136. p = pointList[(i + 1) % len];
  5137. ctx.bezierCurveTo(
  5138. cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]
  5139. );
  5140. }
  5141. }
  5142. else {
  5143. if (style.smooth === 'spline') {
  5144. pointList = this.smoothSpline(pointList, true);
  5145. }
  5146. if (!style.lineType || style.lineType == 'solid') {
  5147. //默认为实线
  5148. ctx.moveTo(pointList[0][0],pointList[0][1]);
  5149. for (var i = 1, l = pointList.length; i < l; i++) {
  5150. ctx.lineTo(pointList[i][0],pointList[i][1]);
  5151. }
  5152. ctx.lineTo(pointList[0][0], pointList[0][1]);
  5153. }
  5154. else if (style.lineType == 'dashed'
  5155. || style.lineType == 'dotted'
  5156. ) {
  5157. var dashLength =
  5158. style._dashLength
  5159. || (style.lineWidth || 1)
  5160. * (style.lineType == 'dashed' ? 5 : 1);
  5161. style._dashLength = dashLength;
  5162. ctx.moveTo(pointList[0][0],pointList[0][1]);
  5163. for (var i = 1, l = pointList.length; i < l; i++) {
  5164. this.dashedLineTo(
  5165. ctx,
  5166. pointList[i - 1][0], pointList[i - 1][1],
  5167. pointList[i][0], pointList[i][1],
  5168. dashLength
  5169. );
  5170. }
  5171. this.dashedLineTo(
  5172. ctx,
  5173. pointList[pointList.length - 1][0],
  5174. pointList[pointList.length - 1][1],
  5175. pointList[0][0],
  5176. pointList[0][1],
  5177. dashLength
  5178. );
  5179. }
  5180. }
  5181. return;
  5182. },
  5183. /**
  5184. * 返回矩形区域,用于局部刷新和文字定位
  5185. * @param {Object} style
  5186. */
  5187. getRect : function(style) {
  5188. var minX = Number.MAX_VALUE;
  5189. var maxX = Number.MIN_VALUE;
  5190. var minY = Number.MAX_VALUE;
  5191. var maxY = Number.MIN_VALUE;
  5192. var pointList = style.pointList;
  5193. for(var i = 0, l = pointList.length; i < l; i++) {
  5194. if (pointList[i][0] < minX) {
  5195. minX = pointList[i][0];
  5196. }
  5197. if (pointList[i][0] > maxX) {
  5198. maxX = pointList[i][0];
  5199. }
  5200. if (pointList[i][1] < minY) {
  5201. minY = pointList[i][1];
  5202. }
  5203. if (pointList[i][1] > maxY) {
  5204. maxY = pointList[i][1];
  5205. }
  5206. }
  5207. var lineWidth;
  5208. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  5209. lineWidth = style.lineWidth || 1;
  5210. }
  5211. else {
  5212. lineWidth = 0;
  5213. }
  5214. return {
  5215. x : Math.round(minX - lineWidth / 2),
  5216. y : Math.round(minY - lineWidth / 2),
  5217. width : maxX - minX + lineWidth,
  5218. height : maxY - minY + lineWidth
  5219. };
  5220. }
  5221. };
  5222. var base = require('./base');
  5223. base.derive(Polygon);
  5224. var shape = require('../shape');
  5225. shape.define('polygon', new Polygon());
  5226. return Polygon;
  5227. }
  5228. );
  5229. /**
  5230. * zrender
  5231. *
  5232. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  5233. *
  5234. * shape类:折线
  5235. * 可配图形属性:
  5236. {
  5237. // 基础属性
  5238. shape : 'brokenLine', // 必须,shape类标识,需要显式指定
  5239. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  5240. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  5241. invisible : {boolean}, // 默认为false,是否可见
  5242. // 样式属性,默认状态样式样式属性
  5243. style : {
  5244. pointList : {Array}, // 必须,各个顶角坐标
  5245. smooth : {Number}, // 默认为0
  5246. strokeColor : {color}, // 默认为'#000',线条颜色(轮廓),支持rgba
  5247. lineType : {string}, // 默认为solid,线条类型,solid | dashed | dotted
  5248. lineWidth : {number}, // 默认为1,线条宽度
  5249. lineCap : {string}, // 默认为butt,线帽样式。butt | round | square
  5250. lineJoin : {string}, // 默认为miter,线段连接样式。miter | round | bevel
  5251. miterLimit : {number}, // 默认为10,最大斜接长度,仅当lineJoin为miter时生效
  5252. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  5253. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  5254. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  5255. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  5256. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  5257. text : {string}, // 默认为null,附加文本
  5258. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  5259. textPosition : {string}, // 默认为end,附加文本位置。
  5260. // start | end
  5261. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  5262. // start | end | left | right | center
  5263. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  5264. // top | bottom | middle |
  5265. // alphabetic | hanging | ideographic
  5266. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  5267. // 'inside' ? '#000' : color
  5268. },
  5269. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  5270. highlightStyle : {
  5271. // 同style
  5272. }
  5273. // 交互属性,详见shape.Base
  5274. // 事件属性,详见shape.Base
  5275. }
  5276. 例子:
  5277. {
  5278. shape : 'brokenLine',
  5279. id : '123456',
  5280. zlevel : 1,
  5281. style : {
  5282. pointList : [[10, 10], [300, 20], [298, 400], [50, 450]],
  5283. strokeColor : '#eee',
  5284. lineWidth : 20,
  5285. text : 'Baidu'
  5286. },
  5287. myName : 'kener', //可自带任何有效自定义属性
  5288. clickable : true,
  5289. onClick : function(eventPacket) {
  5290. alert(eventPacket.target.myName);
  5291. }
  5292. }
  5293. */
  5294. define(
  5295. 'zrender/shape/brokenLine',['require','../shape','./base','../shape'],function(require) {
  5296. function BrokenLine() {
  5297. this.type = 'brokenLine';
  5298. this.brushTypeOnly = 'stroke'; //线条只能描边,填充后果自负
  5299. this.textPosition = 'end';
  5300. }
  5301. BrokenLine.prototype = {
  5302. /**
  5303. * 创建多边形路径
  5304. * @param {Context2D} ctx Canvas 2D上下文
  5305. * @param {Object} style 样式
  5306. */
  5307. buildPath : function(ctx, style) {
  5308. var pointList = style.pointList;
  5309. if (pointList.length < 2) {
  5310. // 少于2个点就不画了~
  5311. return;
  5312. }
  5313. if (style.smooth && style.smooth !== 'spline') {
  5314. var controlPoints = this.smoothBezier(
  5315. pointList, style.smooth, false
  5316. );
  5317. ctx.moveTo(pointList[0][0], pointList[0][1]);
  5318. var cp1;
  5319. var cp2;
  5320. var p;
  5321. for (var i = 0, l = pointList.length; i < l - 1; i++) {
  5322. cp1 = controlPoints[i * 2];
  5323. cp2 = controlPoints[i * 2 + 1];
  5324. p = pointList[i + 1];
  5325. ctx.bezierCurveTo(
  5326. cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]
  5327. );
  5328. }
  5329. }
  5330. else {
  5331. if (style.smooth === 'spline') {
  5332. pointList = this.smoothSpline(pointList, false);
  5333. }
  5334. if (!style.lineType || style.lineType == 'solid') {
  5335. //默认为实线
  5336. ctx.moveTo(pointList[0][0],pointList[0][1]);
  5337. for (var i = 1, l = pointList.length; i < l; i++) {
  5338. ctx.lineTo(pointList[i][0],pointList[i][1]);
  5339. }
  5340. }
  5341. else if (style.lineType == 'dashed'
  5342. || style.lineType == 'dotted'
  5343. ) {
  5344. var dashLength = (style.lineWidth || 1)
  5345. * (style.lineType == 'dashed' ? 5 : 1);
  5346. ctx.moveTo(pointList[0][0],pointList[0][1]);
  5347. for (var i = 1, l = pointList.length; i < l; i++) {
  5348. this.dashedLineTo(
  5349. ctx,
  5350. pointList[i - 1][0], pointList[i - 1][1],
  5351. pointList[i][0], pointList[i][1],
  5352. dashLength
  5353. );
  5354. }
  5355. }
  5356. }
  5357. return;
  5358. },
  5359. /**
  5360. * 返回矩形区域,用于局部刷新和文字定位
  5361. * @param {Object} style
  5362. */
  5363. getRect : function(style) {
  5364. var shape = require('../shape');
  5365. return shape.get('polygon').getRect(style);
  5366. }
  5367. };
  5368. var base = require('./base');
  5369. base.derive(BrokenLine);
  5370. var shape = require('../shape');
  5371. shape.define('brokenLine', new BrokenLine());
  5372. return BrokenLine;
  5373. }
  5374. );
  5375. /**
  5376. * zrender
  5377. *
  5378. * @author Kener (@Kener-林峰, linzhifeng@baidu.com) ,
  5379. * strwind (@劲风FEI, yaofeifei@baidu.com)
  5380. *
  5381. * shape类:矩形
  5382. * 可配图形属性:
  5383. {
  5384. // 基础属性
  5385. shape : 'rectangle', // 必须,shape类标识,需要显式指定
  5386. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  5387. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  5388. invisible : {boolean}, // 默认为false,是否可见
  5389. // 样式属性,默认状态样式样式属性
  5390. style : {
  5391. x : {number}, // 必须,左上角横坐标
  5392. y : {number}, // 必须,左上角纵坐标
  5393. width : {number}, // 必须,宽度
  5394. height : {number}, // 必须,高度
  5395. radius : {array}, // 默认为[0],圆角
  5396. brushType : {string}, // 默认为fill,绘画方式
  5397. // fill(填充) | stroke(描边) | both(填充+描边)
  5398. color : {color}, // 默认为'#000',填充颜色,支持rgba
  5399. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  5400. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  5401. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  5402. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  5403. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  5404. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  5405. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  5406. text : {string}, // 默认为null,附加文本
  5407. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  5408. textPosition : {string}, // 默认为top,附加文本位置。
  5409. // inside | left | right | top | bottom
  5410. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  5411. // start | end | left | right | center
  5412. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  5413. // top | bottom | middle |
  5414. // alphabetic | hanging | ideographic
  5415. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  5416. // 'inside' ? '#fff' : color
  5417. },
  5418. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  5419. highlightStyle : {
  5420. // 同style
  5421. }
  5422. // 交互属性,详见shape.Base
  5423. // 事件属性,详见shape.Base
  5424. }
  5425. 例子:
  5426. {
  5427. shape : 'rectangle',
  5428. id : '123456',
  5429. zlevel : 1,
  5430. style : {
  5431. x : 200,
  5432. y : 100,
  5433. width : 150,
  5434. height : 50,
  5435. color : '#eee',
  5436. text : 'Baidu'
  5437. },
  5438. myName : 'kener', // 可自带任何有效自定义属性
  5439. clickable : true,
  5440. onClick : function(eventPacket) {
  5441. alert(eventPacket.target.myName);
  5442. }
  5443. }
  5444. */
  5445. define(
  5446. 'zrender/shape/rectangle',['require','./base','../shape'],function(require) {
  5447. function Rectangle() {
  5448. this.type = 'rectangle';
  5449. }
  5450. Rectangle.prototype = {
  5451. /**
  5452. * 绘制圆角矩形
  5453. * @param {Context2D} ctx Canvas 2D上下文
  5454. * @param {Object} style 样式
  5455. */
  5456. _buildRadiusPath: function(ctx, style) {
  5457. //左上、右上、右下、左下角的半径依次为r1、r2、r3、r4
  5458. //r缩写为1 相当于 [1, 1, 1, 1]
  5459. //r缩写为[1] 相当于 [1, 1, 1, 1]
  5460. //r缩写为[1, 2] 相当于 [1, 2, 1, 2]
  5461. //r缩写为[1, 2, 3] 相当于 [1, 2, 3, 2]
  5462. var x = style.x;
  5463. var y = style.y;
  5464. var width = style.width;
  5465. var height = style.height;
  5466. var r = style.radius;
  5467. var r1;
  5468. var r2;
  5469. var r3;
  5470. var r4;
  5471. if(typeof r === 'number') {
  5472. r1 = r2 = r3 = r4 = r;
  5473. }
  5474. else if(r instanceof Array) {
  5475. if (r.length === 1) {
  5476. r1 = r2 = r3 = r4 = r[0];
  5477. }
  5478. else if(r.length === 2) {
  5479. r1 = r3 = r[0];
  5480. r2 = r4 = r[1];
  5481. }
  5482. else if(r.length === 3) {
  5483. r1 = r[0];
  5484. r2 = r4 = r[1];
  5485. r3 = r[2];
  5486. } else {
  5487. r1 = r[0];
  5488. r2 = r[1];
  5489. r3 = r[2];
  5490. r4 = r[3];
  5491. }
  5492. } else {
  5493. r1 = r2 = r3 = r4 = 0;
  5494. }
  5495. ctx.moveTo(x + r1, y);
  5496. ctx.lineTo(x + width - r2, y);
  5497. r2 !== 0 && ctx.quadraticCurveTo(
  5498. x + width, y, x + width, y + r2
  5499. );
  5500. ctx.lineTo(x + width, y + height - r3);
  5501. r3 !== 0 && ctx.quadraticCurveTo(
  5502. x + width, y + height, x + width - r3, y + height
  5503. );
  5504. ctx.lineTo(x + r4, y + height);
  5505. r4 !== 0 && ctx.quadraticCurveTo(
  5506. x, y + height, x, y + height - r4
  5507. );
  5508. ctx.lineTo(x, y + r1);
  5509. r1 !== 0 && ctx.quadraticCurveTo(x, y, x + r1, y);
  5510. },
  5511. /**
  5512. * 创建矩形路径
  5513. * @param {Context2D} ctx Canvas 2D上下文
  5514. * @param {Object} style 样式
  5515. */
  5516. buildPath : function(ctx, style) {
  5517. if(!style.radius) {
  5518. ctx.moveTo(style.x, style.y);
  5519. ctx.lineTo(style.x + style.width, style.y);
  5520. ctx.lineTo(style.x + style.width, style.y + style.height);
  5521. ctx.lineTo(style.x, style.y + style.height);
  5522. ctx.lineTo(style.x, style.y);
  5523. //ctx.rect(style.x, style.y, style.width, style.height);
  5524. } else {
  5525. this._buildRadiusPath(ctx, style);
  5526. }
  5527. return;
  5528. },
  5529. /**
  5530. * 返回矩形区域,用于局部刷新和文字定位
  5531. * @param {Object} style
  5532. */
  5533. getRect : function(style) {
  5534. var lineWidth;
  5535. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  5536. lineWidth = style.lineWidth || 1;
  5537. }
  5538. else {
  5539. lineWidth = 0;
  5540. }
  5541. return {
  5542. x : Math.round(style.x - lineWidth / 2),
  5543. y : Math.round(style.y - lineWidth / 2),
  5544. width : style.width + lineWidth,
  5545. height : style.height + lineWidth
  5546. };
  5547. }
  5548. };
  5549. var base = require('./base');
  5550. base.derive(Rectangle);
  5551. var shape = require('../shape');
  5552. shape.define('rectangle', new Rectangle());
  5553. return Rectangle;
  5554. }
  5555. );
  5556. /**
  5557. * zrender
  5558. *
  5559. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  5560. *
  5561. * shape类:圆环
  5562. * 可配图形属性:
  5563. {
  5564. // 基础属性
  5565. shape : 'ring', // 必须,shape类标识,需要显式指定
  5566. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  5567. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  5568. invisible : {boolean}, // 默认为false,是否可见
  5569. // 样式属性,默认状态样式样式属性
  5570. style : {
  5571. x : {number}, // 必须,圆心横坐标
  5572. y : {number}, // 必须,圆心纵坐标
  5573. r0 : {number}, // 必须,内圆半径
  5574. r : {number}, // 必须,外圆半径
  5575. brushType : {string}, // 默认为fill,绘画方式
  5576. // fill(填充) | stroke(描边) | both(填充+描边)
  5577. color : {color}, // 默认为'#000',填充颜色,支持rgba
  5578. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  5579. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  5580. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  5581. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  5582. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  5583. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  5584. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  5585. text : {string}, // 默认为null,附加文本
  5586. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  5587. textPosition : {string}, // 默认为outside,附加文本位置。
  5588. // outside | inside
  5589. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  5590. // start | end | left | right | center
  5591. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  5592. // top | bottom | middle |
  5593. // alphabetic | hanging | ideographic
  5594. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  5595. // 'inside' ? '#fff' : color
  5596. },
  5597. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  5598. highlightStyle : {
  5599. // 同style
  5600. }
  5601. // 交互属性,详见shape.Base
  5602. // 事件属性,详见shape.Base
  5603. }
  5604. 例子:
  5605. {
  5606. shape : 'ring',
  5607. id : '123456',
  5608. zlevel : 1,
  5609. style : {
  5610. x : 200,
  5611. y : 100,
  5612. r : 50,
  5613. color : '#eee',
  5614. text : 'Baidu'
  5615. },
  5616. myName : 'kener', // 可自带任何有效自定义属性
  5617. clickable : true,
  5618. onClick : function(eventPacket) {
  5619. alert(eventPacket.target.myName);
  5620. }
  5621. }
  5622. */
  5623. define(
  5624. 'zrender/shape/ring',['require','./base','../shape'],function(require) {
  5625. function Ring() {
  5626. this.type = 'ring';
  5627. }
  5628. Ring.prototype = {
  5629. /**
  5630. * 创建圆环路径,依赖扇形路径
  5631. * @param {Context2D} ctx Canvas 2D上下文
  5632. * @param {Object} style 样式
  5633. */
  5634. buildPath : function(ctx, style) {
  5635. // 非零环绕填充优化
  5636. ctx.arc(style.x, style.y, style.r, 0, Math.PI * 2, false);
  5637. ctx.moveTo(style.x + style.r0, style.y);
  5638. ctx.arc(style.x, style.y, style.r0, 0, Math.PI * 2, true);
  5639. return;
  5640. },
  5641. /**
  5642. * 返回矩形区域,用于局部刷新和文字定位
  5643. * @param {Object} style
  5644. */
  5645. getRect : function(style) {
  5646. var lineWidth;
  5647. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  5648. lineWidth = style.lineWidth || 1;
  5649. }
  5650. else {
  5651. lineWidth = 0;
  5652. }
  5653. return {
  5654. x : Math.round(style.x - style.r - lineWidth / 2),
  5655. y : Math.round(style.y - style.r - lineWidth / 2),
  5656. width : style.r * 2 + lineWidth,
  5657. height : style.r * 2 + lineWidth
  5658. };
  5659. }
  5660. };
  5661. var base = require('./base');
  5662. base.derive(Ring);
  5663. var shape = require('../shape');
  5664. shape.define('ring', new Ring());
  5665. return Ring;
  5666. }
  5667. );
  5668. /**
  5669. * zrender: 数学辅助类
  5670. *
  5671. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  5672. *
  5673. * sin:正弦函数,自动缓存
  5674. * cos:余弦函数,自动缓存
  5675. * degreeToRadian:角度转弧度
  5676. * radianToDegree:弧度转角度
  5677. */
  5678. define(
  5679. 'zrender/tool/math',[],function() {
  5680. /*
  5681. var _cache = {
  5682. sin : {}, //sin缓存
  5683. cos : {} //cos缓存
  5684. };
  5685. */
  5686. var _radians = Math.PI / 180;
  5687. /**
  5688. * @param angle 弧度(角度)参数
  5689. * @param isDegrees angle参数是否为角度计算,默认为false,angle为以弧度计量的角度
  5690. */
  5691. function sin(angle, isDegrees) {
  5692. return Math.sin(isDegrees ? angle * _radians : angle);
  5693. /*
  5694. angle = (isDegrees ? angle * _radians : angle).toFixed(4);
  5695. if(typeof _cache.sin[angle] == 'undefined') {
  5696. _cache.sin[angle] = Math.sin(angle);
  5697. }
  5698. return _cache.sin[angle];
  5699. */
  5700. }
  5701. /**
  5702. * @param radians 弧度参数
  5703. */
  5704. function cos(angle, isDegrees) {
  5705. return Math.cos(isDegrees ? angle * _radians : angle);
  5706. /*
  5707. angle = (isDegrees ? angle * _radians : angle).toFixed(4);
  5708. if(typeof _cache.cos[angle] == 'undefined') {
  5709. _cache.cos[angle] = Math.cos(angle);
  5710. }
  5711. return _cache.cos[angle];
  5712. */
  5713. }
  5714. /**
  5715. * 角度转弧度
  5716. * @param {Object} angle
  5717. */
  5718. function degreeToRadian(angle) {
  5719. return angle * _radians;
  5720. }
  5721. /**
  5722. * 弧度转角度
  5723. * @param {Object} angle
  5724. */
  5725. function radianToDegree(angle) {
  5726. return angle / _radians;
  5727. }
  5728. return {
  5729. sin : sin,
  5730. cos : cos,
  5731. degreeToRadian : degreeToRadian,
  5732. radianToDegree : radianToDegree
  5733. };
  5734. }
  5735. );
  5736. /**
  5737. * zrender
  5738. *
  5739. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  5740. *
  5741. * shape类:扇形
  5742. * 可配图形属性:
  5743. {
  5744. // 基础属性
  5745. shape : 'sector', // 必须,shape类标识,需要显式指定
  5746. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  5747. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  5748. invisible : {boolean}, // 默认为false,是否可见
  5749. // 样式属性,默认状态样式样式属性
  5750. style : {
  5751. x : {number}, // 必须,圆心横坐标
  5752. y : {number}, // 必须,圆心纵坐标
  5753. r0 : {number}, // 默认为0,内圆半径,指定后将出现内弧,同时扇边长度 = r - r0
  5754. r : {number}, // 必须,外圆半径
  5755. startAngle : {number}, // 必须,起始角度[0, 360)
  5756. endAngle : {number}, // 必须,结束角度(0, 360]
  5757. brushType : {string}, // 默认为fill,绘画方式
  5758. // fill(填充) | stroke(描边) | both(填充+描边)
  5759. color : {color}, // 默认为'#000',填充颜色,支持rgba
  5760. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  5761. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  5762. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  5763. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  5764. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  5765. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  5766. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  5767. text : {string}, // 默认为null,附加文本
  5768. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  5769. textPosition : {string}, // 默认为outside,附加文本位置。
  5770. // outside | inside
  5771. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  5772. // start | end | left | right | center
  5773. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  5774. // top | bottom | middle |
  5775. // alphabetic | hanging | ideographic
  5776. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  5777. // 'inside' ? '#fff' : color
  5778. },
  5779. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  5780. highlightStyle : {
  5781. // 同style
  5782. }
  5783. // 交互属性,详见shape.Base
  5784. // 事件属性,详见shape.Base
  5785. }
  5786. 例子:
  5787. {
  5788. shape : 'sector',
  5789. id : '123456',
  5790. zlevel : 1,
  5791. style : {
  5792. x : 200,
  5793. y : 100,
  5794. r : 50,
  5795. color : '#eee',
  5796. text : 'Baidu'
  5797. },
  5798. myName : 'kener', // 可自带任何有效自定义属性
  5799. clickable : true,
  5800. onClick : function(eventPacket) {
  5801. alert(eventPacket.target.myName);
  5802. }
  5803. }
  5804. */
  5805. define(
  5806. 'zrender/shape/sector',['require','../tool/math','../shape','./base','../shape'],function(require) {
  5807. var math = require('../tool/math');
  5808. function Sector() {
  5809. this.type = 'sector';
  5810. }
  5811. Sector.prototype = {
  5812. /**
  5813. * 创建扇形路径
  5814. * @param {Context2D} ctx Canvas 2D上下文
  5815. * @param {Object} style 样式
  5816. */
  5817. buildPath : function(ctx, style) {
  5818. var x = style.x; // 圆心x
  5819. var y = style.y; // 圆心y
  5820. var r0 = typeof style.r0 == 'undefined' // 形内半径[0,r)
  5821. ? 0 : style.r0;
  5822. var r = style.r; // 扇形外半径(0,r]
  5823. var startAngle = style.startAngle; // 起始角度[0,360)
  5824. var endAngle = style.endAngle; // 结束角度(0,360]
  5825. var PI2 = Math.PI * 2;
  5826. startAngle = math.degreeToRadian(startAngle);
  5827. endAngle = math.degreeToRadian(endAngle);
  5828. //sin&cos已经在tool.math中缓存了,放心大胆的重复调用
  5829. ctx.moveTo(
  5830. math.cos(startAngle) * r0 + x,
  5831. y - math.sin(startAngle) * r0
  5832. );
  5833. ctx.lineTo(
  5834. math.cos(startAngle) * r + x,
  5835. y - math.sin(startAngle) * r
  5836. );
  5837. ctx.arc(x, y, r, PI2 - startAngle, PI2 - endAngle, true);
  5838. ctx.lineTo(
  5839. math.cos(endAngle) * r0 + x,
  5840. y - math.sin(endAngle) * r0
  5841. );
  5842. if (r0 !== 0) {
  5843. ctx.arc(x, y, r0, PI2 - endAngle, PI2 - startAngle, false);
  5844. }
  5845. return;
  5846. },
  5847. /**
  5848. * 返回矩形区域,用于局部刷新和文字定位
  5849. * @param {Object} style
  5850. */
  5851. getRect : function(style) {
  5852. var x = style.x; // 圆心x
  5853. var y = style.y; // 圆心y
  5854. var r0 = typeof style.r0 == 'undefined' // 形内半径[0,r)
  5855. ? 0 : style.r0;
  5856. var r = style.r; // 扇形外半径(0,r]
  5857. var startAngle = style.startAngle; // 起始角度[0,360)
  5858. var endAngle = style.endAngle; // 结束角度(0,360]
  5859. var pointList = [];
  5860. if (startAngle < 90 && endAngle > 90) {
  5861. pointList.push([
  5862. x, y - r
  5863. ]);
  5864. }
  5865. if (startAngle < 180 && endAngle > 180) {
  5866. pointList.push([
  5867. x - r, y
  5868. ]);
  5869. }
  5870. if (startAngle < 270 && endAngle > 270) {
  5871. pointList.push([
  5872. x, y + r
  5873. ]);
  5874. }
  5875. if (startAngle < 360 && endAngle > 360) {
  5876. pointList.push([
  5877. x + r, y
  5878. ]);
  5879. }
  5880. startAngle = math.degreeToRadian(startAngle);
  5881. endAngle = math.degreeToRadian(endAngle);
  5882. pointList.push([
  5883. math.cos(startAngle) * r0 + x,
  5884. y - math.sin(startAngle) * r0
  5885. ]);
  5886. pointList.push([
  5887. math.cos(startAngle) * r + x,
  5888. y - math.sin(startAngle) * r
  5889. ]);
  5890. pointList.push([
  5891. math.cos(endAngle) * r + x,
  5892. y - math.sin(endAngle) * r
  5893. ]);
  5894. pointList.push([
  5895. math.cos(endAngle) * r0 + x,
  5896. y - math.sin(endAngle) * r0
  5897. ]);
  5898. var shape = require('../shape');
  5899. return shape.get('polygon').getRect({
  5900. brushType : style.brushType,
  5901. lineWidth : style.lineWidth,
  5902. pointList : pointList
  5903. });
  5904. }
  5905. };
  5906. var base = require('./base');
  5907. base.derive(Sector);
  5908. var shape = require('../shape');
  5909. shape.define('sector', new Sector());
  5910. return Sector;
  5911. }
  5912. );
  5913. /**
  5914. * zrender
  5915. *
  5916. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  5917. *
  5918. * shape类:文字
  5919. * 可配图形属性:
  5920. {
  5921. // 基础属性
  5922. shape : 'text', // 必须,shape类标识,需要显式指定
  5923. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  5924. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  5925. invisible : {boolean}, // 默认为false,是否可见
  5926. // 样式属性,默认状态样式样式属性
  5927. style : {
  5928. x : {number}, // 必须,横坐标
  5929. y : {number}, // 必须,纵坐标
  5930. brushType : {string}, // 默认为fill,绘画方式
  5931. // fill(填充) | stroke(描边) | both(填充+描边)
  5932. color : {color}, // 默认为'#000',填充颜色,支持rgba
  5933. strokeColor : {color}, // 默认为'#000',线条颜色(轮廓),支持rgba
  5934. lineWidth : {number}, // 默认为1,线条宽度
  5935. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  5936. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  5937. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  5938. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  5939. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  5940. text : {string}, // 必须,文本内容
  5941. textFont : {string}, // 默认为null,文本文字样式,eg:'bold 18px verdana'
  5942. textAlign : {string}, // 默认为start,文本水平对齐。
  5943. // start | end | left | right | center
  5944. textBaseline : {string}, // 默认为middle,文本垂直对齐。
  5945. // top | bottom | middle |
  5946. // alphabetic | hanging | ideographic
  5947. maxWidth : {number} // 默认为null,最大宽度
  5948. },
  5949. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  5950. highlightStyle : {
  5951. // 同style
  5952. }
  5953. // 交互属性,详见shape.Base
  5954. // 事件属性,详见shape.Base
  5955. }
  5956. 例子:
  5957. {
  5958. shape : 'text',
  5959. id : '123456',
  5960. zlevel : 1,
  5961. style : {
  5962. x : 200,
  5963. y : 100,
  5964. color : 'red',
  5965. text : 'Baidu'
  5966. },
  5967. myName : 'kener', //可自带任何有效自定义属性
  5968. clickable : true,
  5969. onClick : function(eventPacket) {
  5970. alert(eventPacket.target.myName);
  5971. }
  5972. }
  5973. */
  5974. define(
  5975. 'zrender/shape/text',['require','../tool/area','./base','../shape'],function(require) {
  5976. function Text() {
  5977. this.type = 'text';
  5978. }
  5979. Text.prototype = {
  5980. /**
  5981. * 画刷,重载基类方法
  5982. * @param {Context2D} ctx Canvas 2D上下文
  5983. * @param e 图形形状实体
  5984. * @param isHighlight 是否为高亮状态
  5985. */
  5986. brush : function(ctx, e, isHighlight) {
  5987. var style = e.style || {};
  5988. if (isHighlight) {
  5989. // 根据style扩展默认高亮样式
  5990. style = this.getHighlightStyle(
  5991. style, e.highlightStyle || {}
  5992. );
  5993. }
  5994. ctx.save();
  5995. this.setContext(ctx, style);
  5996. // 设置transform
  5997. if (e.__needTransform) {
  5998. ctx.transform.apply(ctx,this.updateTransform(e));
  5999. }
  6000. if (style.textFont) {
  6001. ctx.font = style.textFont;
  6002. }
  6003. ctx.textAlign = style.textAlign || 'start';
  6004. ctx.textBaseline = style.textBaseline || 'middle';
  6005. if (style.maxWidth) {
  6006. switch (style.brushType) {
  6007. case 'fill':
  6008. ctx.fillText(
  6009. style.text,
  6010. style.x, style.y, style.maxWidth
  6011. );
  6012. break;
  6013. case 'stroke':
  6014. ctx.strokeText(
  6015. style.text,
  6016. style.x, style.y, style.maxWidth
  6017. );
  6018. break;
  6019. case 'both':
  6020. ctx.strokeText(
  6021. style.text,
  6022. style.x, style.y, style.maxWidth
  6023. );
  6024. ctx.fillText(
  6025. style.text,
  6026. style.x, style.y, style.maxWidth
  6027. );
  6028. break;
  6029. default:
  6030. ctx.fillText(
  6031. style.text,
  6032. style.x, style.y, style.maxWidth
  6033. );
  6034. }
  6035. }
  6036. else{
  6037. switch (style.brushType) {
  6038. case 'fill':
  6039. ctx.fillText(style.text, style.x, style.y);
  6040. break;
  6041. case 'stroke':
  6042. ctx.strokeText(style.text, style.x, style.y);
  6043. break;
  6044. case 'both':
  6045. ctx.strokeText(style.text, style.x, style.y);
  6046. ctx.fillText(style.text, style.x, style.y);
  6047. break;
  6048. default:
  6049. ctx.fillText(style.text, style.x, style.y);
  6050. }
  6051. }
  6052. ctx.restore();
  6053. return;
  6054. },
  6055. /**
  6056. * 返回矩形区域,用于局部刷新和文字定位
  6057. * @param {Object} style
  6058. */
  6059. getRect : function(style) {
  6060. var area = require('../tool/area');
  6061. var width = area.getTextWidth(style.text, style.textFont);
  6062. var height = area.getTextWidth('国', style.textFont); //比较粗暴
  6063. var textX = style.x; //默认start == left
  6064. if (style.textAlign == 'end' || style.textAlign == 'right') {
  6065. textX -= width;
  6066. }
  6067. else if (style.textAlign == 'center') {
  6068. textX -= (width / 2);
  6069. }
  6070. var textY = style.y - height / 2; //默认middle
  6071. if (style.textBaseline == 'top') {
  6072. textY += height / 2;
  6073. }
  6074. else if (style.textBaseline == 'bottom') {
  6075. textX -= height / 2;
  6076. }
  6077. return {
  6078. x : textX,
  6079. y : textY,
  6080. width : width,
  6081. height : height
  6082. };
  6083. }
  6084. };
  6085. var base = require('./base');
  6086. base.derive(Text);
  6087. var shape = require('../shape');
  6088. shape.define('text', new Text());
  6089. return Text;
  6090. }
  6091. );
  6092. /**
  6093. * zrender
  6094. *
  6095. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  6096. *
  6097. * shape类:心形
  6098. * 可配图形属性:
  6099. {
  6100. // 基础属性
  6101. shape : 'heart', // 必须,shape类标识,需要显式指定
  6102. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  6103. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  6104. invisible : {boolean}, // 默认为false,是否可见
  6105. // 样式属性,默认状态样式样式属性
  6106. style : {
  6107. x : {number}, // 必须,心形内部尖端横坐标
  6108. y : {number}, // 必须,心形内部尖端纵坐标
  6109. a : {number}, // 必须,心形横宽(中轴线到水平边缘最宽处距离)
  6110. b : {number}, // 必须,心形纵高(内尖到外尖距离)
  6111. brushType : {string}, // 默认为fill,绘画方式
  6112. // fill(填充) | stroke(描边) | both(填充+描边)
  6113. color : {color}, // 默认为'#000',填充颜色,支持rgba
  6114. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  6115. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  6116. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  6117. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  6118. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  6119. shadowOffsetY : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  6120. text : {string}, // 默认为null,附加文本
  6121. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  6122. textPosition : {string}, // 默认为outside,附加文本位置。
  6123. // outside | inside
  6124. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  6125. // start | end | left | right | center
  6126. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  6127. // top | bottom | middle |
  6128. // alphabetic | hanging | ideographic
  6129. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  6130. // 'inside' ? '#fff' : color
  6131. },
  6132. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  6133. highlightStyle : {
  6134. // 同style
  6135. }
  6136. // 交互属性,详见shape.Base
  6137. // 事件属性,详见shape.Base
  6138. }
  6139. 例子:
  6140. {
  6141. shape : 'heart',
  6142. id : '123456',
  6143. zlevel : 1,
  6144. style : {
  6145. x : 200,
  6146. y : 100,
  6147. a : 50,
  6148. b : 80,
  6149. color : '#eee',
  6150. text : 'Baidu'
  6151. },
  6152. myName : 'kener', // 可自带任何有效自定义属性
  6153. clickable : true,
  6154. onClick : function(eventPacket) {
  6155. alert(eventPacket.target.myName);
  6156. }
  6157. }
  6158. */
  6159. define(
  6160. 'zrender/shape/heart',['require','./base','../shape'],function(require) {
  6161. function Heart() {
  6162. this.type = 'heart';
  6163. }
  6164. Heart.prototype = {
  6165. /**
  6166. * 创建扇形路径
  6167. * @param {Context2D} ctx Canvas 2D上下文
  6168. * @param {Object} style 样式
  6169. */
  6170. buildPath : function(ctx, style) {
  6171. ctx.moveTo(style.x, style.y);
  6172. ctx.bezierCurveTo(
  6173. style.x + style.a / 2,
  6174. style.y - style.b * 2 / 3,
  6175. style.x + style.a * 2,
  6176. style.y + style.b / 3,
  6177. style.x,
  6178. style.y + style.b
  6179. );
  6180. ctx.bezierCurveTo(
  6181. style.x - style.a * 2,
  6182. style.y + style.b / 3,
  6183. style.x - style.a / 2,
  6184. style.y - style.b * 2 / 3,
  6185. style.x,
  6186. style.y
  6187. );
  6188. return;
  6189. },
  6190. /**
  6191. * 返回矩形区域,用于局部刷新和文字定位
  6192. * @param {Object} style
  6193. */
  6194. getRect : function(style) {
  6195. var lineWidth;
  6196. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  6197. lineWidth = style.lineWidth || 1;
  6198. }
  6199. else {
  6200. lineWidth = 0;
  6201. }
  6202. return {
  6203. x : Math.round(style.x - style.a - lineWidth / 2),
  6204. y : Math.round(style.y - style.b / 4 - lineWidth / 2),
  6205. width : style.a * 2 + lineWidth,
  6206. height : style.b * 5 / 4 + lineWidth
  6207. };
  6208. }
  6209. };
  6210. var base = require('./base');
  6211. base.derive(Heart);
  6212. var shape = require('../shape');
  6213. shape.define('heart', new Heart());
  6214. return Heart;
  6215. }
  6216. );
  6217. /**
  6218. * zrender
  6219. *
  6220. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  6221. *
  6222. * shape类:水滴
  6223. * 可配图形属性:
  6224. {
  6225. // 基础属性
  6226. shape : 'heart', // 必须,shape类标识,需要显式指定
  6227. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  6228. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  6229. invisible : {boolean}, // 默认为false,是否可见
  6230. // 样式属性,默认状态样式样式属性
  6231. style : {
  6232. x : {number}, // 必须,水滴中心横坐标
  6233. y : {number}, // 必须,水滴中心纵坐标
  6234. a : {number}, // 必须,水滴横宽(中心到水平边缘最宽处距离)
  6235. b : {number}, // 必须,水滴纵高(中心到尖端距离)
  6236. brushType : {string}, // 默认为fill,绘画方式
  6237. // fill(填充) | stroke(描边) | both(填充+描边)
  6238. color : {color}, // 默认为'#000',填充颜色,支持rgba
  6239. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  6240. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  6241. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  6242. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  6243. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  6244. shadowOffsetY : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  6245. text : {string}, // 默认为null,附加文本
  6246. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  6247. textPosition : {string}, // 默认为outside,附加文本位置。
  6248. // outside | inside
  6249. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  6250. // start | end | left | right | center
  6251. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  6252. // top | bottom | middle |
  6253. // alphabetic | hanging | ideographic
  6254. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  6255. // 'inside' ? '#fff' : color
  6256. },
  6257. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  6258. highlightStyle : {
  6259. // 同style
  6260. }
  6261. // 交互属性,详见shape.Base
  6262. // 事件属性,详见shape.Base
  6263. }
  6264. 例子:
  6265. {
  6266. shape : 'droplet',
  6267. id : '123456',
  6268. zlevel : 1,
  6269. style : {
  6270. x : 200,
  6271. y : 100,
  6272. a : 50,
  6273. b : 80,
  6274. color : '#eee',
  6275. text : 'Baidu'
  6276. },
  6277. myName : 'kener', // 可自带任何有效自定义属性
  6278. clickable : true,
  6279. onClick : function(eventPacket) {
  6280. alert(eventPacket.target.myName);
  6281. }
  6282. }
  6283. */
  6284. define(
  6285. 'zrender/shape/droplet',['require','./base','../shape'],function(require) {
  6286. function Droplet() {
  6287. this.type = 'droplet';
  6288. }
  6289. Droplet.prototype = {
  6290. /**
  6291. * 创建扇形路径
  6292. * @param {Context2D} ctx Canvas 2D上下文
  6293. * @param {Object} style 样式
  6294. */
  6295. buildPath : function(ctx, style) {
  6296. ctx.moveTo(style.x, style.y + style.a);
  6297. ctx.bezierCurveTo(
  6298. style.x + style.a,
  6299. style.y + style.a,
  6300. style.x + style.a * 3 / 2,
  6301. style.y - style.a / 3,
  6302. style.x,
  6303. style.y - style.b
  6304. );
  6305. ctx.bezierCurveTo(
  6306. style.x - style.a * 3 / 2,
  6307. style.y - style.a / 3,
  6308. style.x - style.a,
  6309. style.y + style.a,
  6310. style.x,
  6311. style.y + style.a
  6312. );
  6313. return;
  6314. },
  6315. /**
  6316. * 返回矩形区域,用于局部刷新和文字定位
  6317. * @param {Object} style
  6318. */
  6319. getRect : function(style) {
  6320. var lineWidth;
  6321. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  6322. lineWidth = style.lineWidth || 1;
  6323. }
  6324. else {
  6325. lineWidth = 0;
  6326. }
  6327. return {
  6328. x : Math.round(style.x - style.a - lineWidth / 2),
  6329. y : Math.round(style.y - style.b - lineWidth / 2),
  6330. width : style.a * 2 + lineWidth,
  6331. height : style.a + style.b + lineWidth
  6332. };
  6333. }
  6334. };
  6335. var base = require('./base');
  6336. base.derive(Droplet);
  6337. var shape = require('../shape');
  6338. shape.define('droplet', new Droplet());
  6339. return Droplet;
  6340. }
  6341. );
  6342. /**
  6343. * zrender
  6344. *
  6345. * author: CrossDo (chenhuaimu@baidu.com)
  6346. *
  6347. * shape类:路径
  6348. * 可配图形属性:
  6349. {
  6350. // 基础属性
  6351. shape : 'path', // 必须,shape类标识,需要显式指定
  6352. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  6353. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  6354. invisible : {boolean}, // 默认为false,是否可见
  6355. // 样式属性,默认状态样式样式属性
  6356. style : {
  6357. path : {string},// 必须,路径。例如:M 0 0 L 0 10 L 10 10 Z (一个三角形)
  6358. //M = moveto
  6359. //L = lineto
  6360. //H = horizontal lineto
  6361. //V = vertical lineto
  6362. //C = curveto
  6363. //S = smooth curveto
  6364. //Q = quadratic Belzier curve
  6365. //T = smooth quadratic Belzier curveto
  6366. //Z = closepath
  6367. x : {number}, // 必须,x轴坐标
  6368. y : {number}, // 必须,y轴坐标
  6369. brushType : {string}, // 默认为fill,绘画方式
  6370. // fill(填充) | stroke(描边) | both(填充+描边)
  6371. color : {color}, // 默认为'#000',填充颜色,支持rgba
  6372. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  6373. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  6374. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  6375. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  6376. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  6377. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  6378. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  6379. text : {string}, // 默认为null,附加文本
  6380. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  6381. textPosition : {string}, // 默认为top,附加文本位置。
  6382. // inside | left | right | top | bottom
  6383. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  6384. // start | end | left | right | center
  6385. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  6386. // top | bottom | middle |
  6387. // alphabetic | hanging | ideographic
  6388. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  6389. // 'inside' ? '#fff' : color
  6390. },
  6391. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  6392. highlightStyle : {
  6393. // 同style
  6394. }
  6395. // 交互属性,详见shape.Base
  6396. // 事件属性,详见shape.Base
  6397. }
  6398. **/
  6399. define('zrender/shape/path',['require','./base','../shape'],function(require) {
  6400. function Path() {
  6401. this.type = 'path';
  6402. }
  6403. Path.prototype = {
  6404. _parsePathData : function(data) {
  6405. if (!data) {
  6406. return [];
  6407. }
  6408. // command string
  6409. var cs = data;
  6410. // command chars
  6411. var cc = [
  6412. 'm', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z',
  6413. 'c', 'C', 'q', 'Q', 't', 'T', 's', 'S', 'a', 'A'
  6414. ];
  6415. cs = cs.replace(/ /g, ' ');
  6416. cs = cs.replace(/ /g, ',');
  6417. cs = cs.replace(/,,/g, ',');
  6418. var n;
  6419. // create pipes so that we can split the data
  6420. for (n = 0; n < cc.length; n++) {
  6421. cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
  6422. }
  6423. // create array
  6424. var arr = cs.split('|');
  6425. var ca = [];
  6426. // init context point
  6427. var cpx = 0;
  6428. var cpy = 0;
  6429. for (n = 1; n < arr.length; n++) {
  6430. var str = arr[n];
  6431. var c = str.charAt(0);
  6432. str = str.slice(1);
  6433. str = str.replace(new RegExp('e,-', 'g'), 'e-');
  6434. var p = str.split(',');
  6435. if (p.length > 0 && p[0] === '') {
  6436. p.shift();
  6437. }
  6438. for (var i = 0; i < p.length; i++) {
  6439. p[i] = parseFloat(p[i]);
  6440. }
  6441. while (p.length > 0) {
  6442. if (isNaN(p[0])) {
  6443. break;
  6444. }
  6445. var cmd = null;
  6446. var points = [];
  6447. var ctlPtx;
  6448. var ctlPty;
  6449. var prevCmd;
  6450. var rx;
  6451. var ry;
  6452. var psi;
  6453. var fa;
  6454. var fs;
  6455. var x1 = cpx;
  6456. var y1 = cpy;
  6457. // convert l, H, h, V, and v to L
  6458. switch (c) {
  6459. case 'l':
  6460. cpx += p.shift();
  6461. cpy += p.shift();
  6462. cmd = 'L';
  6463. points.push(cpx, cpy);
  6464. break;
  6465. case 'L':
  6466. cpx = p.shift();
  6467. cpy = p.shift();
  6468. points.push(cpx, cpy);
  6469. break;
  6470. case 'm':
  6471. cpx += p.shift();
  6472. cpy += p.shift();
  6473. cmd = 'M';
  6474. points.push(cpx, cpy);
  6475. c = 'l';
  6476. break;
  6477. case 'M':
  6478. cpx = p.shift();
  6479. cpy = p.shift();
  6480. cmd = 'M';
  6481. points.push(cpx, cpy);
  6482. c = 'L';
  6483. break;
  6484. case 'h':
  6485. cpx += p.shift();
  6486. cmd = 'L';
  6487. points.push(cpx, cpy);
  6488. break;
  6489. case 'H':
  6490. cpx = p.shift();
  6491. cmd = 'L';
  6492. points.push(cpx, cpy);
  6493. break;
  6494. case 'v':
  6495. cpy += p.shift();
  6496. cmd = 'L';
  6497. points.push(cpx, cpy);
  6498. break;
  6499. case 'V':
  6500. cpy = p.shift();
  6501. cmd = 'L';
  6502. points.push(cpx, cpy);
  6503. break;
  6504. case 'C':
  6505. points.push(p.shift(), p.shift(), p.shift(), p.shift());
  6506. cpx = p.shift();
  6507. cpy = p.shift();
  6508. points.push(cpx, cpy);
  6509. break;
  6510. case 'c':
  6511. points.push(
  6512. cpx + p.shift(), cpy + p.shift(),
  6513. cpx + p.shift(), cpy + p.shift()
  6514. );
  6515. cpx += p.shift();
  6516. cpy += p.shift();
  6517. cmd = 'C';
  6518. points.push(cpx, cpy);
  6519. break;
  6520. case 'S':
  6521. ctlPtx = cpx;
  6522. ctlPty = cpy;
  6523. prevCmd = ca[ca.length - 1];
  6524. if (prevCmd.command === 'C') {
  6525. ctlPtx = cpx + (cpx - prevCmd.points[2]);
  6526. ctlPty = cpy + (cpy - prevCmd.points[3]);
  6527. }
  6528. points.push(ctlPtx, ctlPty, p.shift(), p.shift());
  6529. cpx = p.shift();
  6530. cpy = p.shift();
  6531. cmd = 'C';
  6532. points.push(cpx, cpy);
  6533. break;
  6534. case 's':
  6535. ctlPtx = cpx, ctlPty = cpy;
  6536. prevCmd = ca[ca.length - 1];
  6537. if (prevCmd.command === 'C') {
  6538. ctlPtx = cpx + (cpx - prevCmd.points[2]);
  6539. ctlPty = cpy + (cpy - prevCmd.points[3]);
  6540. }
  6541. points.push(
  6542. ctlPtx, ctlPty,
  6543. cpx + p.shift(), cpy + p.shift()
  6544. );
  6545. cpx += p.shift();
  6546. cpy += p.shift();
  6547. cmd = 'C';
  6548. points.push(cpx, cpy);
  6549. break;
  6550. case 'Q':
  6551. points.push(p.shift(), p.shift());
  6552. cpx = p.shift();
  6553. cpy = p.shift();
  6554. points.push(cpx, cpy);
  6555. break;
  6556. case 'q':
  6557. points.push(cpx + p.shift(), cpy + p.shift());
  6558. cpx += p.shift();
  6559. cpy += p.shift();
  6560. cmd = 'Q';
  6561. points.push(cpx, cpy);
  6562. break;
  6563. case 'T':
  6564. ctlPtx = cpx, ctlPty = cpy;
  6565. prevCmd = ca[ca.length - 1];
  6566. if (prevCmd.command === 'Q') {
  6567. ctlPtx = cpx + (cpx - prevCmd.points[0]);
  6568. ctlPty = cpy + (cpy - prevCmd.points[1]);
  6569. }
  6570. cpx = p.shift();
  6571. cpy = p.shift();
  6572. cmd = 'Q';
  6573. points.push(ctlPtx, ctlPty, cpx, cpy);
  6574. break;
  6575. case 't':
  6576. ctlPtx = cpx, ctlPty = cpy;
  6577. prevCmd = ca[ca.length - 1];
  6578. if (prevCmd.command === 'Q') {
  6579. ctlPtx = cpx + (cpx - prevCmd.points[0]);
  6580. ctlPty = cpy + (cpy - prevCmd.points[1]);
  6581. }
  6582. cpx += p.shift();
  6583. cpy += p.shift();
  6584. cmd = 'Q';
  6585. points.push(ctlPtx, ctlPty, cpx, cpy);
  6586. break;
  6587. case 'A':
  6588. rx = p.shift();
  6589. ry = p.shift();
  6590. psi = p.shift();
  6591. fa = p.shift();
  6592. fs = p.shift();
  6593. x1 = cpx, y1 = cpy;
  6594. cpx = p.shift(), cpy = p.shift();
  6595. cmd = 'A';
  6596. points = this._convertPoint(
  6597. x1, y1, cpx, cpy, fa, fs, rx, ry, psi
  6598. );
  6599. break;
  6600. case 'a':
  6601. rx = p.shift();
  6602. ry = p.shift();
  6603. psi = p.shift();
  6604. fa = p.shift();
  6605. fs = p.shift();
  6606. x1 = cpx, y1 = cpy;
  6607. cpx += p.shift();
  6608. cpy += p.shift();
  6609. cmd = 'A';
  6610. points = this._convertPoint(
  6611. x1, y1, cpx, cpy, fa, fs, rx, ry, psi
  6612. );
  6613. break;
  6614. }
  6615. ca.push({
  6616. command : cmd || c,
  6617. points : points
  6618. });
  6619. }
  6620. if (c === 'z' || c === 'Z') {
  6621. ca.push({
  6622. command : 'z',
  6623. points : []
  6624. });
  6625. }
  6626. }
  6627. return ca;
  6628. },
  6629. _convertPoint : function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
  6630. var psi = psiDeg * (Math.PI / 180.0);
  6631. var xp = Math.cos(psi) * (x1 - x2) / 2.0
  6632. + Math.sin(psi) * (y1 - y2) / 2.0;
  6633. var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0
  6634. + Math.cos(psi) * (y1 - y2) / 2.0;
  6635. var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
  6636. if (lambda > 1) {
  6637. rx *= Math.sqrt(lambda);
  6638. ry *= Math.sqrt(lambda);
  6639. }
  6640. var f = Math.sqrt((((rx * rx) * (ry * ry))
  6641. - ((rx * rx) * (yp * yp))
  6642. - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp)
  6643. + (ry * ry) * (xp * xp))
  6644. );
  6645. if (fa === fs) {
  6646. f *= -1;
  6647. }
  6648. if (isNaN(f)) {
  6649. f = 0;
  6650. }
  6651. var cxp = f * rx * yp / ry;
  6652. var cyp = f * -ry * xp / rx;
  6653. var cx = (x1 + x2) / 2.0
  6654. + Math.cos(psi) * cxp
  6655. - Math.sin(psi) * cyp;
  6656. var cy = (y1 + y2) / 2.0
  6657. + Math.sin(psi) * cxp
  6658. + Math.cos(psi) * cyp;
  6659. var vMag = function(v) {
  6660. return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
  6661. };
  6662. var vRatio = function(u, v) {
  6663. return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
  6664. };
  6665. var vAngle = function(u, v) {
  6666. return (u[0] * v[1] < u[1] * v[0] ? -1 : 1)
  6667. * Math.acos(vRatio(u, v));
  6668. };
  6669. var theta = vAngle([ 1, 0 ], [ (xp - cxp) / rx, (yp - cyp) / ry ]);
  6670. var u = [ (xp - cxp) / rx, (yp - cyp) / ry ];
  6671. var v = [ (-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry ];
  6672. var dTheta = vAngle(u, v);
  6673. if (vRatio(u, v) <= -1) {
  6674. dTheta = Math.PI;
  6675. }
  6676. if (vRatio(u, v) >= 1) {
  6677. dTheta = 0;
  6678. }
  6679. if (fs === 0 && dTheta > 0) {
  6680. dTheta = dTheta - 2 * Math.PI;
  6681. }
  6682. if (fs === 1 && dTheta < 0) {
  6683. dTheta = dTheta + 2 * Math.PI;
  6684. }
  6685. return [ cx, cy, rx, ry, theta, dTheta, psi, fs ];
  6686. },
  6687. /**
  6688. * 创建路径
  6689. * @param {Context2D} ctx Canvas 2D上下文
  6690. * @param {Object} style 样式
  6691. */
  6692. buildPath : function(ctx, style) {
  6693. var path = style.path;
  6694. var pathArray = this._parsePathData(path);
  6695. // 平移坐标
  6696. var x = style.x || 0;
  6697. var y = style.y || 0;
  6698. var p;
  6699. // 记录边界点,用于判断inside
  6700. var pointList = style.pointList = [];
  6701. var singlePointList = [];
  6702. for (var i = 0, l = pathArray.length; i < l; i++) {
  6703. if (pathArray[i].command.toUpperCase() == 'M') {
  6704. singlePointList.length > 0
  6705. && pointList.push(singlePointList);
  6706. singlePointList = [];
  6707. }
  6708. p = pathArray[i].points;
  6709. for (var j = 0, k = p.length; j < k; j += 2) {
  6710. singlePointList.push([p[j] + x, p[j+1] + y]);
  6711. }
  6712. }
  6713. singlePointList.length > 0 && pointList.push(singlePointList);
  6714. var c;
  6715. for (var i = 0, l = pathArray.length; i < l; i++) {
  6716. c = pathArray[i].command;
  6717. p = pathArray[i].points;
  6718. // 平移变换
  6719. for (var j = 0, k = p.length; j < k; j++) {
  6720. if (j % 2 === 0) {
  6721. p[j] += x;
  6722. } else {
  6723. p[j] += y;
  6724. }
  6725. }
  6726. switch (c) {
  6727. case 'L':
  6728. ctx.lineTo(p[0], p[1]);
  6729. break;
  6730. case 'M':
  6731. ctx.moveTo(p[0], p[1]);
  6732. break;
  6733. case 'C':
  6734. ctx.bezierCurveTo(p[0], p[1], p[2], p[3], p[4], p[5]);
  6735. break;
  6736. case 'Q':
  6737. ctx.quadraticCurveTo(p[0], p[1], p[2], p[3]);
  6738. break;
  6739. case 'A':
  6740. var cx = p[0];
  6741. var cy = p[1];
  6742. var rx = p[2];
  6743. var ry = p[3];
  6744. var theta = p[4];
  6745. var dTheta = p[5];
  6746. var psi = p[6];
  6747. var fs = p[7];
  6748. var r = (rx > ry) ? rx : ry;
  6749. var scaleX = (rx > ry) ? 1 : rx / ry;
  6750. var scaleY = (rx > ry) ? ry / rx : 1;
  6751. ctx.translate(cx, cy);
  6752. ctx.rotate(psi);
  6753. ctx.scale(scaleX, scaleY);
  6754. ctx.arc(0, 0, r, theta, theta + dTheta, 1 - fs);
  6755. ctx.scale(1 / scaleX, 1 / scaleY);
  6756. ctx.rotate(-psi);
  6757. ctx.translate(-cx, -cy);
  6758. break;
  6759. case 'z':
  6760. ctx.closePath();
  6761. break;
  6762. }
  6763. }
  6764. return;
  6765. },
  6766. /**
  6767. * 返回矩形区域,用于局部刷新和文字定位
  6768. * @param {Object} style 样式
  6769. */
  6770. getRect : function(style) {
  6771. var lineWidth;
  6772. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  6773. lineWidth = style.lineWidth || 1;
  6774. }
  6775. else {
  6776. lineWidth = 0;
  6777. }
  6778. var minX = Number.MAX_VALUE;
  6779. var maxX = Number.MIN_VALUE;
  6780. var minY = Number.MAX_VALUE;
  6781. var maxY = Number.MIN_VALUE;
  6782. // 平移坐标
  6783. var x = style.x || 0;
  6784. var y = style.y || 0;
  6785. var pathArray = this._parsePathData(style.path);
  6786. for (var i = 0; i < pathArray.length; i++) {
  6787. var p = pathArray[i].points;
  6788. for (var j = 0; j < p.length; j++) {
  6789. if (j % 2 === 0) {
  6790. if (p[j] + x < minX) {
  6791. minX = p[j] + x;
  6792. }
  6793. if (p[j] + x > maxX) {
  6794. maxX = p[j] + x;
  6795. }
  6796. } else {
  6797. if (p[j] + y < minY) {
  6798. minY = p[j] + y;
  6799. }
  6800. if (p[j] + y > maxY) {
  6801. maxY = p[j] + y;
  6802. }
  6803. }
  6804. }
  6805. }
  6806. var rect;
  6807. if (minX === Number.MAX_VALUE
  6808. || maxX === Number.MIN_VALUE
  6809. || minY === Number.MAX_VALUE
  6810. || maxY === Number.MIN_VALUE
  6811. ) {
  6812. rect = {
  6813. x : 0,
  6814. y : 0,
  6815. width : 0,
  6816. height : 0
  6817. };
  6818. }
  6819. else {
  6820. rect = {
  6821. x : Math.round(minX - lineWidth / 2),
  6822. y : Math.round(minY - lineWidth / 2),
  6823. width : maxX - minX + lineWidth,
  6824. height : maxY - minY + lineWidth
  6825. };
  6826. }
  6827. return rect;
  6828. }
  6829. };
  6830. var base = require('./base');
  6831. base.derive(Path);
  6832. var shape = require('../shape');
  6833. shape.define('path', new Path());
  6834. return Path;
  6835. });
  6836. /**
  6837. * zrender
  6838. *
  6839. * @author lang( shenyi01@baidu.com )
  6840. *
  6841. * shape类:图片
  6842. * 可配图形属性:
  6843. {
  6844. // 基础属性
  6845. shape : 'image', // 必须,shape类标识,需要显式指定
  6846. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  6847. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  6848. invisible : {boolean}, // 默认为false,是否可见
  6849. // 样式属性,默认状态样式样式属性
  6850. style : {
  6851. x : {number}, // 必须,左上角横坐标
  6852. y : {number}, // 必须,左上角纵坐标
  6853. width : {number}, // 可选,宽度
  6854. height : {number}, // 可选,高度
  6855. sx : {number}, // 可选, 从图片中裁剪的x
  6856. sy : {number}, // 可选, 从图片中裁剪的y
  6857. sWidth : {number}, // 可选, 从图片中裁剪的宽度
  6858. sHeight : {number}, // 可选, 从图片中裁剪的高度
  6859. image : {string|Image} // 必须,图片url或者图片对象
  6860. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  6861. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  6862. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  6863. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  6864. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  6865. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  6866. text : {string}, // 默认为null,附加文本
  6867. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  6868. textPosition : {string}, // 默认为top,附加文本位置。
  6869. // inside | left | right | top | bottom
  6870. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  6871. // start | end | left | right | center
  6872. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  6873. // top | bottom | middle |
  6874. // alphabetic | hanging | ideographic
  6875. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  6876. // 'inside' ? '#fff' : color
  6877. },
  6878. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  6879. highlightStyle : {
  6880. // 同style
  6881. }
  6882. // 交互属性,详见shape.Base
  6883. // 事件属性,详见shape.Base
  6884. }
  6885. 例子:
  6886. {
  6887. shape : 'image',
  6888. id : '123456',
  6889. zlevel : 1,
  6890. style : {
  6891. x : 200,
  6892. y : 100,
  6893. width : 150,
  6894. height : 50,
  6895. image : 'tests.jpg',
  6896. text : 'Baidu'
  6897. },
  6898. myName : 'kener', // 可自带任何有效自定义属性
  6899. clickable : true,
  6900. onClick : function(eventPacket) {
  6901. alert(eventPacket.target.myName);
  6902. }
  6903. }
  6904. */
  6905. define(
  6906. 'zrender/shape/image',['require','./base','../shape'],function(require) {
  6907. var _cache = {};
  6908. var _needsRefresh = [];
  6909. var _refreshTimeout;
  6910. function ZImage() {
  6911. this.type = 'image';
  6912. }
  6913. ZImage.prototype = {
  6914. brush : function(ctx, e, isHighlight, refresh) {
  6915. var style = e.style || {};
  6916. if (isHighlight) {
  6917. // 根据style扩展默认高亮样式
  6918. style = this.getHighlightStyle(
  6919. style, e.highlightStyle || {}
  6920. );
  6921. }
  6922. var image = style.image;
  6923. if (typeof(image) === 'string') {
  6924. var src = image;
  6925. if (_cache[src]) {
  6926. image = _cache[src];
  6927. }
  6928. else {
  6929. image = document.createElement('image');//new Image();
  6930. image.onload = function(){
  6931. image.onload = null;
  6932. clearTimeout( _refreshTimeout );
  6933. _needsRefresh.push( e );
  6934. // 防止因为缓存短时间内触发多次onload事件
  6935. _refreshTimeout = setTimeout(function(){
  6936. refresh( _needsRefresh );
  6937. // 清空needsRefresh
  6938. _needsRefresh = [];
  6939. }, 10);
  6940. };
  6941. _cache[ src ] = image;
  6942. image.src = src;
  6943. }
  6944. }
  6945. if (image) {
  6946. //图片已经加载完成
  6947. if (window.ActiveXObject) {
  6948. if (image.readyState != 'complete') {
  6949. return;
  6950. }
  6951. }
  6952. else {
  6953. if (!image.complete) {
  6954. return;
  6955. }
  6956. }
  6957. ctx.save();
  6958. this.setContext(ctx, style);
  6959. // 设置transform
  6960. if (e.__needTransform) {
  6961. ctx.transform.apply(ctx,this.updateTransform(e));
  6962. }
  6963. var width = style.width || image.width;
  6964. var height = style.height || image.height;
  6965. var x = style.x;
  6966. var y = style.y;
  6967. if (style.sWidth && style.sHeight) {
  6968. var sx = style.sx || 0;
  6969. var sy = style.sy || 0;
  6970. ctx.drawImage(
  6971. image,
  6972. sx, sy, style.sWidth, style.sHeight,
  6973. x, y, width, height
  6974. );
  6975. }
  6976. else if (style.sx && style.sy) {
  6977. var sx = style.sx;
  6978. var sy = style.sy;
  6979. var sWidth = width - sx;
  6980. var sHeight = height - sy;
  6981. ctx.drawImage(
  6982. image,
  6983. sx, sy, sWidth, sHeight,
  6984. x, y, width, height
  6985. );
  6986. }
  6987. else {
  6988. ctx.drawImage(image, x, y, width, height);
  6989. }
  6990. // 如果没设置宽和高的话自动根据图片宽高设置
  6991. style.width = width;
  6992. style.height = height;
  6993. e.style.width = width;
  6994. e.style.height = height;
  6995. if (style.text) {
  6996. this.drawText(ctx, style, e.style);
  6997. }
  6998. ctx.restore();
  6999. }
  7000. return;
  7001. },
  7002. /**
  7003. * 创建路径,用于判断hover时调用isPointInPath~
  7004. * @param {Context2D} ctx Canvas 2D上下文
  7005. * @param {Object} style 样式
  7006. */
  7007. buildPath : function(ctx, style) {
  7008. ctx.rect(style.x, style.y, style.width, style.height);
  7009. return;
  7010. },
  7011. /**
  7012. * 返回矩形区域,用于局部刷新和文字定位
  7013. * @param {Object} style
  7014. */
  7015. getRect : function(style) {
  7016. return {
  7017. x : style.x,
  7018. y : style.y,
  7019. width : style.width,
  7020. height : style.height
  7021. };
  7022. }
  7023. };
  7024. var base = require('./base');
  7025. base.derive(ZImage);
  7026. var shape = require('../shape');
  7027. shape.define('image', new ZImage());
  7028. return ZImage;
  7029. }
  7030. );
  7031. /**
  7032. * zrender
  7033. *
  7034. * @author Neil (杨骥, yangji01@baidu.com)
  7035. *
  7036. * shape类:贝塞尔曲线
  7037. * 可配图形属性:
  7038. {
  7039. // 基础属性
  7040. shape : 'beziercurve', // 必须,shape类标识,需要显式指定
  7041. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  7042. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  7043. invisible : {boolean}, // 默认为false,是否可见
  7044. // 样式属性,默认状态样式样式属性
  7045. style : {
  7046. xStart : {number}, // 必须,起点横坐标
  7047. yStart : {number}, // 必须,起点纵坐标
  7048. cpX1 : {number}, // 必须,第一个关联点横坐标
  7049. cpY1 : {number}, // 必须,第一个关联点纵坐标
  7050. cpX2 : {number}, // 可选,第二个关联点横坐标 缺省即为二次贝塞尔曲线
  7051. cpY2 : {number}, // 可选,第二个关联点纵坐标
  7052. xEnd : {number}, // 必须,终点横坐标
  7053. yEnd : {number}, // 必须,终点纵坐标
  7054. strokeColor : {color}, // 默认为'#000',线条颜色(轮廓),支持rgba
  7055. lineWidth : {number}, // 默认为1,线条宽度
  7056. lineCap : {string}, // 默认为butt,线帽样式。butt | round | square
  7057. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  7058. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  7059. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  7060. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  7061. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  7062. text : {string}, // 默认为null,附加文本
  7063. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  7064. textPosition : {string}, // 默认为end,附加文本位置。
  7065. // inside | start | end
  7066. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  7067. // start | end | left | right | center
  7068. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  7069. // top | bottom | middle |
  7070. // alphabetic | hanging | ideographic
  7071. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  7072. // 'inside' ? '#000' : color
  7073. },
  7074. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  7075. highlightStyle : {
  7076. // 同style
  7077. }
  7078. // 交互属性,详见shape.Base
  7079. // 事件属性,详见shape.Base
  7080. }
  7081. 例子:
  7082. {
  7083. shape : 'beziercurve',
  7084. id : '123456',
  7085. zlevel : 1,
  7086. style : {
  7087. xStart : 100,
  7088. yStart : 100,
  7089. xEnd : 200,
  7090. yEnd : 200,
  7091. strokeColor : '#eee',
  7092. lineWidth : 20,
  7093. text : 'Baidu'
  7094. },
  7095. myName : 'kener', //可自带任何有效自定义属性
  7096. clickable : true,
  7097. onClick : function(eventPacket) {
  7098. alert(eventPacket.target.myName);
  7099. }
  7100. }
  7101. */
  7102. define(
  7103. 'zrender/shape/beziercurve',['require','./base','../shape'],function(require) {
  7104. function Beziercurve() {
  7105. this.type = 'beziercurve';
  7106. this.brushTypeOnly = 'stroke'; //线条只能描边,填充后果自负
  7107. this.textPosition = 'end';
  7108. }
  7109. Beziercurve.prototype = {
  7110. /**
  7111. * 创建线条路径
  7112. * @param {Context2D} ctx Canvas 2D上下文
  7113. * @param {Object} style 样式
  7114. */
  7115. buildPath : function(ctx, style) {
  7116. ctx.moveTo(style.xStart, style.yStart);
  7117. if (typeof style.cpX2 != 'undefined'
  7118. && typeof style.cpY2 != 'undefined'
  7119. ) {
  7120. ctx.bezierCurveTo(
  7121. style.cpX1, style.cpY1,
  7122. style.cpX2, style.cpY2,
  7123. style.xEnd, style.yEnd
  7124. );
  7125. }
  7126. else {
  7127. ctx.quadraticCurveTo(
  7128. style.cpX1, style.cpY1,
  7129. style.xEnd, style.yEnd
  7130. );
  7131. }
  7132. },
  7133. /**
  7134. * 返回矩形区域,用于局部刷新和文字定位
  7135. * @param {Object} style
  7136. */
  7137. getRect : function(style) {
  7138. var _minX = Math.min(style.xStart, style.xEnd, style.cpX1);
  7139. var _minY = Math.min(style.yStart, style.yEnd, style.cpY1);
  7140. var _maxX = Math.max(style.xStart, style.xEnd, style.cpX1);
  7141. var _maxY = Math.max(style.yStart, style.yEnd, style.cpY1);
  7142. var _x2 = style.cpX2;
  7143. var _y2 = style.cpY2;
  7144. if (typeof _x2 != 'undefined'
  7145. && typeof _y2 != 'undefined'
  7146. ) {
  7147. _minX = Math.min(_minX, _x2);
  7148. _minY = Math.min(_minY, _y2);
  7149. _maxX = Math.max(_maxX, _x2);
  7150. _maxY = Math.max(_maxY, _y2);
  7151. }
  7152. var lineWidth = style.lineWidth || 1;
  7153. return {
  7154. x : _minX - lineWidth,
  7155. y : _minY - lineWidth,
  7156. width : _maxX - _minX + lineWidth,
  7157. height : _maxY - _minY + lineWidth
  7158. };
  7159. }
  7160. };
  7161. var base = require('./base');
  7162. base.derive(Beziercurve);
  7163. var shape = require('../shape');
  7164. shape.define('beziercurve', new Beziercurve());
  7165. return Beziercurve;
  7166. }
  7167. );
  7168. /**
  7169. * zrender
  7170. *
  7171. * @author sushuang (宿爽, sushuang@baidu.com)
  7172. *
  7173. * shape类:n角星(n>3)
  7174. * 可配图形属性:
  7175. {
  7176. // 基础属性
  7177. shape : 'star', // 必须,shape类标识,需要显式指定
  7178. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  7179. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  7180. invisible : {boolean}, // 默认为false,是否可见
  7181. // 样式属性,默认状态样式样式属性
  7182. style : {
  7183. x : {number}, // 必须,n角星外接圆心横坐标
  7184. y : {number}, // 必须,n角星外接圆心纵坐标
  7185. r : {number}, // 必须,n角星外接圆半径
  7186. r0 : {number}, // n角星内部顶点(凹点)的外接圆半径,
  7187. // 如果不指定此参数,则自动计算:取相隔外部顶点连线的交点作内部顶点
  7188. n : {number}, // 必须,指明几角星
  7189. brushType : {string}, // 默认为fill,绘画方式
  7190. // fill(填充) | stroke(描边) | both(填充+描边)
  7191. color : {color}, // 默认为'#000',填充颜色,支持rgba
  7192. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  7193. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  7194. lineJoin : {string}, // 默认为miter,线段连接样式。miter | round | bevel
  7195. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  7196. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  7197. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  7198. shadowOffsetY : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  7199. text : {string}, // 默认为null,附加文本
  7200. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  7201. textPosition : {string}, // 默认为outside,附加文本位置。
  7202. // outside | inside
  7203. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  7204. // start | end | left | right | center
  7205. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  7206. // top | bottom | middle |
  7207. // alphabetic | hanging | ideographic
  7208. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  7209. // 'inside' ? '#fff' : color
  7210. },
  7211. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  7212. highlightStyle : {
  7213. // 同style
  7214. }
  7215. // 交互属性,详见shape.Base
  7216. // 事件属性,详见shape.Base
  7217. }
  7218. 例子:
  7219. {
  7220. shape : 'star',
  7221. id : '123456',
  7222. zlevel : 1,
  7223. style : {
  7224. x : 200,
  7225. y : 100,
  7226. r : 150,
  7227. n : 5,
  7228. color : '#eee'
  7229. },
  7230. myName : 'kener', // 可自带任何有效自定义属性
  7231. clickable : true,
  7232. onClick : function(eventPacket) {
  7233. alert(eventPacket.target.myName);
  7234. }
  7235. }
  7236. */
  7237. define(
  7238. 'zrender/shape/star',['require','../tool/math','./base','../shape'],function(require) {
  7239. var math = require('../tool/math');
  7240. var sin = math.sin;
  7241. var cos = math.cos;
  7242. var PI = Math.PI;
  7243. function Star() {
  7244. this.type = 'heart';
  7245. }
  7246. Star.prototype = {
  7247. /**
  7248. * 创建n角星(n>3)路径
  7249. * @param {Context2D} ctx Canvas 2D上下文
  7250. * @param {Object} style 样式
  7251. */
  7252. buildPath : function(ctx, style) {
  7253. var n = style.n;
  7254. if (!n || n < 2) { return; }
  7255. var x = style.x;
  7256. var y = style.y;
  7257. var r = style.r;
  7258. var r0 = style.r0;
  7259. // 如果未指定内部顶点外接圆半径,则自动计算
  7260. if (r0 == null) {
  7261. r0 = n > 4
  7262. // 相隔的外部顶点的连线的交点,
  7263. // 被取为内部交点,以此计算r0
  7264. ? r * cos(2 * PI / n) / cos(PI / n)
  7265. // 二三四角星的特殊处理
  7266. : r / 3;
  7267. }
  7268. var dStep = PI / n;
  7269. var deg = -PI / 2;
  7270. var xStart = x + r * cos(deg);
  7271. var yStart = y + r * sin(deg);
  7272. deg += dStep;
  7273. // 记录边界点,用于判断inside
  7274. var pointList = style.pointList = [];
  7275. pointList.push([xStart, yStart]);
  7276. for (var i = 0, end = n * 2 - 1, ri; i < end; i ++) {
  7277. ri = i % 2 === 0 ? r0 : r;
  7278. pointList.push([x + ri * cos(deg), y + ri * sin(deg)]);
  7279. deg += dStep;
  7280. }
  7281. pointList.push([xStart, yStart]);
  7282. // 绘制
  7283. ctx.moveTo(pointList[0][0], pointList[0][1]);
  7284. for (var i = 0; i < pointList.length; i ++) {
  7285. ctx.lineTo(pointList[i][0], pointList[i][1]);
  7286. }
  7287. return;
  7288. },
  7289. /**
  7290. * 返回矩形区域,用于局部刷新和文字定位
  7291. * @param {Object} style
  7292. */
  7293. getRect : function(style) {
  7294. var lineWidth;
  7295. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  7296. lineWidth = style.lineWidth || 1;
  7297. }
  7298. else {
  7299. lineWidth = 0;
  7300. }
  7301. return {
  7302. x : Math.round(style.x - style.r - lineWidth / 2),
  7303. y : Math.round(style.y - style.r - lineWidth / 2),
  7304. width : style.r * 2 + lineWidth,
  7305. height : style.r * 2 + lineWidth
  7306. };
  7307. }
  7308. };
  7309. var base = require('./base');
  7310. base.derive(Star);
  7311. var shape = require('../shape');
  7312. shape.define('star', new Star());
  7313. return Star;
  7314. }
  7315. );
  7316. /**
  7317. * zrender
  7318. *
  7319. * @author sushuang (宿爽, sushuang@baidu.com)
  7320. *
  7321. * shape类:正n边形(n>=3)
  7322. * 可配图形属性:
  7323. {
  7324. // 基础属性
  7325. shape : 'isogon', // 必须,shape类标识,需要显式指定
  7326. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  7327. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  7328. invisible : {boolean}, // 默认为false,是否可见
  7329. // 样式属性,默认状态样式样式属性
  7330. style : {
  7331. x : {number}, // 必须,正n边形外接圆心横坐标
  7332. y : {number}, // 必须,正n边形外接圆心纵坐标
  7333. r : {number}, // 必须,正n边形外接圆半径
  7334. n : {number}, // 必须,指明正几边形
  7335. brushType : {string}, // 默认为fill,绘画方式
  7336. // fill(填充) | stroke(描边) | both(填充+描边)
  7337. color : {color}, // 默认为'#000',填充颜色,支持rgba
  7338. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  7339. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  7340. lineJoin : {string}, // 默认为miter,线段连接样式。miter | round | bevel
  7341. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  7342. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  7343. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  7344. shadowOffsetY : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  7345. text : {string}, // 默认为null,附加文本
  7346. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  7347. textPosition : {string}, // 默认为outside,附加文本位置。
  7348. // outside | inside
  7349. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  7350. // start | end | left | right | center
  7351. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  7352. // top | bottom | middle |
  7353. // alphabetic | hanging | ideographic
  7354. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  7355. // 'inside' ? '#fff' : color
  7356. },
  7357. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  7358. highlightStyle : {
  7359. // 同style
  7360. }
  7361. // 交互属性,详见shape.Base
  7362. // 事件属性,详见shape.Base
  7363. }
  7364. 例子:
  7365. {
  7366. shape : 'isogon',
  7367. id : '123456',
  7368. zlevel : 1,
  7369. style : {
  7370. x : 400,
  7371. y : 100,
  7372. r : 150,
  7373. n : 7,
  7374. color : '#eee'
  7375. },
  7376. myName : 'kener', // 可自带任何有效自定义属性
  7377. clickable : true,
  7378. onClick : function(eventPacket) {
  7379. alert(eventPacket.target.myName);
  7380. }
  7381. }
  7382. */
  7383. define(
  7384. 'zrender/shape/isogon',['require','../tool/math','./base','../shape'],function(require) {
  7385. var math = require('../tool/math');
  7386. var sin = math.sin;
  7387. var cos = math.cos;
  7388. var PI = Math.PI;
  7389. function Isogon() {
  7390. this.type = 'isogon';
  7391. }
  7392. Isogon.prototype = {
  7393. /**
  7394. * 创建n角星(n>=3)路径
  7395. * @param {Context2D} ctx Canvas 2D上下文
  7396. * @param {Object} style 样式
  7397. */
  7398. buildPath : function(ctx, style) {
  7399. var n = style.n;
  7400. if (!n || n < 2) { return; }
  7401. var x = style.x;
  7402. var y = style.y;
  7403. var r = style.r;
  7404. var dStep = 2 * PI / n;
  7405. var deg = -PI / 2;
  7406. var xStart = x + r * cos(deg);
  7407. var yStart = y + r * sin(deg);
  7408. deg += dStep;
  7409. // 记录边界点,用于判断insight
  7410. var pointList = style.pointList = [];
  7411. pointList.push([xStart, yStart]);
  7412. for (var i = 0, end = n - 1; i < end; i ++) {
  7413. pointList.push([x + r * cos(deg), y + r * sin(deg)]);
  7414. deg += dStep;
  7415. }
  7416. pointList.push([xStart, yStart]);
  7417. // 绘制
  7418. ctx.moveTo(pointList[0][0], pointList[0][1]);
  7419. for (var i = 0; i < pointList.length; i ++) {
  7420. ctx.lineTo(pointList[i][0], pointList[i][1]);
  7421. }
  7422. return;
  7423. },
  7424. /**
  7425. * 返回矩形区域,用于局部刷新和文字定位
  7426. * @param {Object} style
  7427. */
  7428. getRect : function(style) {
  7429. var lineWidth;
  7430. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  7431. lineWidth = style.lineWidth || 1;
  7432. }
  7433. else {
  7434. lineWidth = 0;
  7435. }
  7436. return {
  7437. x : Math.round(style.x - style.r - lineWidth / 2),
  7438. y : Math.round(style.y - style.r - lineWidth / 2),
  7439. width : style.r * 2 + lineWidth,
  7440. height : style.r * 2 + lineWidth
  7441. };
  7442. }
  7443. };
  7444. var base = require('./base');
  7445. base.derive(Isogon);
  7446. var shape = require('../shape');
  7447. shape.define('isogon', new Isogon());
  7448. return Isogon;
  7449. }
  7450. );
  7451. /**
  7452. * 缓动代码来自 https://github.com/sole/tween.js/blob/master/src/Tween.js
  7453. * author: lang(shenyi01@baidu.com)
  7454. */
  7455. define(
  7456. 'zrender/animation/easing',[],function() {
  7457. var Easing = {
  7458. // 线性
  7459. Linear: function(k) {
  7460. return k;
  7461. },
  7462. // 二次方的缓动(t^2)
  7463. QuadraticIn: function(k) {
  7464. return k * k;
  7465. },
  7466. QuadraticOut: function(k) {
  7467. return k * (2 - k);
  7468. },
  7469. QuadraticInOut: function(k) {
  7470. if ((k *= 2) < 1) {
  7471. return 0.5 * k * k;
  7472. }
  7473. return - 0.5 * (--k * (k - 2) - 1);
  7474. },
  7475. // 三次方的缓动(t^3)
  7476. CubicIn: function(k) {
  7477. return k * k * k;
  7478. },
  7479. CubicOut: function(k) {
  7480. return --k * k * k + 1;
  7481. },
  7482. CubicInOut: function(k) {
  7483. if ((k *= 2) < 1) {
  7484. return 0.5 * k * k * k;
  7485. }
  7486. return 0.5 * ((k -= 2) * k * k + 2);
  7487. },
  7488. // 四次方的缓动(t^4)
  7489. QuarticIn: function(k) {
  7490. return k * k * k * k;
  7491. },
  7492. QuarticOut: function(k) {
  7493. return 1 - (--k * k * k * k);
  7494. },
  7495. QuarticInOut: function(k) {
  7496. if ((k *= 2) < 1) {
  7497. return 0.5 * k * k * k * k;
  7498. }
  7499. return - 0.5 * ((k -= 2) * k * k * k - 2);
  7500. },
  7501. // 五次方的缓动(t^5)
  7502. QuinticIn: function(k) {
  7503. return k * k * k * k * k;
  7504. },
  7505. QuinticOut: function(k) {
  7506. return --k * k * k * k * k + 1;
  7507. },
  7508. QuinticInOut: function(k) {
  7509. if ((k *= 2) < 1) {
  7510. return 0.5 * k * k * k * k * k;
  7511. }
  7512. return 0.5 * ((k -= 2) * k * k * k * k + 2);
  7513. },
  7514. // 正弦曲线的缓动(sin(t))
  7515. SinusoidalIn: function(k) {
  7516. return 1 - Math.cos(k * Math.PI / 2);
  7517. },
  7518. SinusoidalOut: function(k) {
  7519. return Math.sin(k * Math.PI / 2);
  7520. },
  7521. SinusoidalInOut: function(k) {
  7522. return 0.5 * (1 - Math.cos(Math.PI * k));
  7523. },
  7524. // 指数曲线的缓动(2^t)
  7525. ExponentialIn: function(k) {
  7526. return k === 0 ? 0 : Math.pow(1024, k - 1);
  7527. },
  7528. ExponentialOut: function(k) {
  7529. return k === 1 ? 1 : 1 - Math.pow(2, - 10 * k);
  7530. },
  7531. ExponentialInOut: function(k) {
  7532. if (k === 0) {
  7533. return 0;
  7534. }
  7535. if (k === 1) {
  7536. return 1;
  7537. }
  7538. if ((k *= 2) < 1) {
  7539. return 0.5 * Math.pow(1024, k - 1);
  7540. }
  7541. return 0.5 * (- Math.pow(2, - 10 * (k - 1)) + 2);
  7542. },
  7543. // 圆形曲线的缓动(sqrt(1-t^2))
  7544. CircularIn: function(k) {
  7545. return 1 - Math.sqrt(1 - k * k);
  7546. },
  7547. CircularOut: function(k) {
  7548. return Math.sqrt(1 - (--k * k));
  7549. },
  7550. CircularInOut: function(k) {
  7551. if ((k *= 2) < 1) {
  7552. return - 0.5 * (Math.sqrt(1 - k * k) - 1);
  7553. }
  7554. return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
  7555. },
  7556. // 创建类似于弹簧在停止前来回振荡的动画
  7557. ElasticIn: function(k) {
  7558. var s, a = 0.1, p = 0.4;
  7559. if (k === 0) {
  7560. return 0;
  7561. }
  7562. if (k === 1) {
  7563. return 1;
  7564. }
  7565. if (!a || a < 1) {
  7566. a = 1; s = p / 4;
  7567. }else{
  7568. s = p * Math.asin(1 / a) / (2 * Math.PI);
  7569. }
  7570. return - (a * Math.pow(2, 10 * (k -= 1)) *
  7571. Math.sin((k - s) * (2 * Math.PI) / p));
  7572. },
  7573. ElasticOut: function(k) {
  7574. var s, a = 0.1, p = 0.4;
  7575. if (k === 0) {
  7576. return 0;
  7577. }
  7578. if (k === 1) {
  7579. return 1;
  7580. }
  7581. if (!a || a < 1) {
  7582. a = 1; s = p / 4;
  7583. }
  7584. else{
  7585. s = p * Math.asin(1 / a) / (2 * Math.PI);
  7586. }
  7587. return (a * Math.pow(2, - 10 * k) *
  7588. Math.sin((k - s) * (2 * Math.PI) / p) + 1);
  7589. },
  7590. ElasticInOut: function(k) {
  7591. var s, a = 0.1, p = 0.4;
  7592. if (k === 0) {
  7593. return 0;
  7594. }
  7595. if (k === 1) {
  7596. return 1;
  7597. }
  7598. if (!a || a < 1) {
  7599. a = 1; s = p / 4;
  7600. }
  7601. else{
  7602. s = p * Math.asin(1 / a) / (2 * Math.PI);
  7603. }
  7604. if ((k *= 2) < 1) {
  7605. return - 0.5 * (a * Math.pow(2, 10 * (k -= 1))
  7606. * Math.sin((k - s) * (2 * Math.PI) / p));
  7607. }
  7608. return a * Math.pow(2, -10 * (k -= 1))
  7609. * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1;
  7610. },
  7611. // 在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动
  7612. BackIn: function(k) {
  7613. var s = 1.70158;
  7614. return k * k * ((s + 1) * k - s);
  7615. },
  7616. BackOut: function(k) {
  7617. var s = 1.70158;
  7618. return --k * k * ((s + 1) * k + s) + 1;
  7619. },
  7620. BackInOut: function(k) {
  7621. var s = 1.70158 * 1.525;
  7622. if ((k *= 2) < 1) {
  7623. return 0.5 * (k * k * ((s + 1) * k - s));
  7624. }
  7625. return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2);
  7626. },
  7627. // 创建弹跳效果
  7628. BounceIn: function(k) {
  7629. return 1 - Easing.BounceOut(1 - k);
  7630. },
  7631. BounceOut: function(k) {
  7632. if (k < (1 / 2.75)) {
  7633. return 7.5625 * k * k;
  7634. }
  7635. else if (k < (2 / 2.75)) {
  7636. return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75;
  7637. } else if (k < (2.5 / 2.75)) {
  7638. return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375;
  7639. } else {
  7640. return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375;
  7641. }
  7642. },
  7643. BounceInOut: function(k) {
  7644. if (k < 0.5) {
  7645. return Easing.BounceIn(k * 2) * 0.5;
  7646. }
  7647. return Easing.BounceOut(k * 2 - 1) * 0.5 + 0.5;
  7648. }
  7649. };
  7650. return Easing;
  7651. }
  7652. );
  7653. /**
  7654. * 动画主控制器
  7655. * @config target 动画对象,可以是数组,如果是数组的话会批量分发onframe等事件
  7656. * @config life(1000) 动画时长
  7657. * @config delay(0) 动画延迟时间
  7658. * @config loop(true)
  7659. * @config gap(0) 循环的间隔时间
  7660. * @config onframe
  7661. * @config easing(optional)
  7662. * @config ondestroy(optional)
  7663. * @config onrestart(optional)
  7664. */
  7665. define(
  7666. 'zrender/animation/clip',['require','./easing'],function(require) {
  7667. var Easing = require('./easing');
  7668. var Clip = function(options) {
  7669. this._targetPool = options.target || {};
  7670. if (this._targetPool.constructor != Array) {
  7671. this._targetPool = [this._targetPool];
  7672. }
  7673. //生命周期
  7674. this._life = options.life || 1000;
  7675. //延时
  7676. this._delay = options.delay || 0;
  7677. //开始时间
  7678. this._startTime = new Date().getTime() + this._delay;//单位毫秒
  7679. //结束时间
  7680. this._endTime = this._startTime + this._life*1000;
  7681. //是否循环
  7682. this.loop = typeof(options.loop) == 'undefined'
  7683. ? false : options.loop;
  7684. this.gap = options.gap || 0;
  7685. this.easing = options.easing || 'Linear';
  7686. this.onframe = options.onframe || null;
  7687. this.ondestroy = options.ondestroy || null;
  7688. this.onrestart = options.onrestart || null;
  7689. };
  7690. Clip.prototype = {
  7691. step : function(time) {
  7692. var percent = (time - this._startTime) / this._life;
  7693. //还没开始
  7694. if (percent < 0) {
  7695. return;
  7696. }
  7697. percent = Math.min(percent, 1);
  7698. var easingFunc = typeof(this.easing) == 'string'
  7699. ? Easing[this.easing]
  7700. : this.easing;
  7701. var schedule;
  7702. if (typeof easingFunc === 'function') {
  7703. schedule = easingFunc(percent);
  7704. }else{
  7705. schedule = percent;
  7706. }
  7707. this.fire('frame', schedule);
  7708. //结束
  7709. if (percent == 1) {
  7710. if (this.loop) {
  7711. this.restart();
  7712. // 重新开始周期
  7713. // 抛出而不是直接调用事件直到 stage.update 后再统一调用这些事件
  7714. return 'restart';
  7715. }else{
  7716. // 动画完成将这个控制器标识为待删除
  7717. // 在Animation.update中进行批量删除
  7718. this._needsRemove = true;
  7719. return 'destroy';
  7720. }
  7721. }else{
  7722. return null;
  7723. }
  7724. },
  7725. restart : function() {
  7726. this._startTime = new Date().getTime() + this.gap;
  7727. },
  7728. fire : function(eventType, arg) {
  7729. for(var i = 0, len = this._targetPool.length; i < len; i++) {
  7730. if (this['on' + eventType]) {
  7731. this['on' + eventType](this._targetPool[i], arg);
  7732. }
  7733. }
  7734. }
  7735. };
  7736. Clip.prototype.constructor = Clip;
  7737. return Clip;
  7738. }
  7739. );
  7740. /**
  7741. * 动画主类, 调度和管理所有动画控制器
  7742. *
  7743. * @author pissang(https://github.com/pissang)
  7744. *
  7745. * @class : Animation
  7746. * @config : stage(optional) 绘制类, 需要提供update接口
  7747. * @config : onframe(optional)
  7748. * @method : add
  7749. * @method : remove
  7750. * @method : update
  7751. * @method : start
  7752. * @method : stop
  7753. */
  7754. define(
  7755. 'zrender/animation/animation',['require','./clip'],function(require) {
  7756. var Clip = require('./clip');
  7757. var requrestAnimationFrame = window.requrestAnimationFrame
  7758. || window.msRequestAnimationFrame
  7759. || window.mozRequestAnimationFrame
  7760. || window.webkitRequestAnimationFrame
  7761. || function(func){setTimeout(func, 16);};
  7762. var arraySlice = Array.prototype.slice;
  7763. var Animation = function(options) {
  7764. options = options || {};
  7765. this.stage = options.stage || {};
  7766. this.onframe = options.onframe || function() {};
  7767. // private properties
  7768. this._clips = [];
  7769. this._running = false;
  7770. };
  7771. Animation.prototype = {
  7772. add : function(clip) {
  7773. this._clips.push(clip);
  7774. },
  7775. remove : function(clip) {
  7776. var idx = this._clips.indexOf(clip);
  7777. if (idx >= 0) {
  7778. this._clips.splice(idx, 1);
  7779. }
  7780. },
  7781. update : function() {
  7782. var time = new Date().getTime();
  7783. var clips = this._clips;
  7784. var len = clips.length;
  7785. var deferredEvents = [];
  7786. var deferredClips = [];
  7787. for (var i = 0; i < len; i++) {
  7788. var clip = clips[i];
  7789. var e = clip.step(time);
  7790. // Throw out the events need to be called after
  7791. // stage.update, like destroy
  7792. if (e) {
  7793. deferredEvents.push(e);
  7794. deferredClips.push(clip);
  7795. }
  7796. }
  7797. if (this.stage
  7798. && this.stage.update
  7799. && this._clips.length
  7800. ) {
  7801. this.stage.update();
  7802. }
  7803. // Remove the finished clip
  7804. var newArray = [];
  7805. for (var i = 0; i < len; i++) {
  7806. if (!clips[i]._needsRemove) {
  7807. newArray.push(clips[i]);
  7808. clips[i]._needsRemove = false;
  7809. }
  7810. }
  7811. this._clips = newArray;
  7812. len = deferredEvents.length;
  7813. for (var i = 0; i < len; i++) {
  7814. deferredClips[i].fire(deferredEvents[i]);
  7815. }
  7816. this.onframe();
  7817. },
  7818. start : function() {
  7819. var self = this;
  7820. this._running = true;
  7821. function step() {
  7822. if (self._running) {
  7823. self.update();
  7824. requrestAnimationFrame(step);
  7825. }
  7826. }
  7827. requrestAnimationFrame(step);
  7828. },
  7829. stop : function() {
  7830. this._running = false;
  7831. },
  7832. clear : function() {
  7833. this._clips = [];
  7834. },
  7835. animate : function(target, options) {
  7836. options = options || {};
  7837. var deferred = new Deferred(
  7838. target,
  7839. options.loop,
  7840. options.getter,
  7841. options.setter
  7842. );
  7843. deferred.animation = this;
  7844. return deferred;
  7845. }
  7846. };
  7847. Animation.prototype.constructor = Animation;
  7848. function _defaultGetter(target, key) {
  7849. return target[key];
  7850. }
  7851. function _defaultSetter(target, key, value) {
  7852. target[key] = value;
  7853. }
  7854. function _interpolateNumber(p0, p1, percent) {
  7855. return (p1 - p0) * percent + p0;
  7856. }
  7857. function _interpolateArray(p0, p1, percent, out, arrDim) {
  7858. var len = p0.length;
  7859. if (arrDim == 1) {
  7860. for (var i = 0; i < len; i++) {
  7861. out[i] = _interpolateNumber(p0[i], p1[i], percent);
  7862. }
  7863. } else {
  7864. var len2 = p0[0].length;
  7865. for (var i = 0; i < len; i++) {
  7866. for (var j = 0; j < len2; j++) {
  7867. out[i][j] = _interpolateNumber(
  7868. p0[i][j], p1[i][j], percent
  7869. );
  7870. }
  7871. }
  7872. }
  7873. }
  7874. function _isArrayLike(data) {
  7875. if (data === undefined) {
  7876. return false;
  7877. } else if (typeof(data) == 'string') {
  7878. return false;
  7879. } else {
  7880. return data.length !== undefined;
  7881. }
  7882. }
  7883. function _catmullRomInterpolateArray(
  7884. p0, p1, p2, p3, t, t2, t3, out, arrDim
  7885. ) {
  7886. var len = p0.length;
  7887. if (arrDim == 1) {
  7888. for (var i = 0; i < len; i++) {
  7889. out[i] = _catmullRomInterpolate(
  7890. p0[i], p1[i], p2[i], p3[i], t, t2, t3
  7891. );
  7892. }
  7893. } else {
  7894. var len2 = p0[0].length;
  7895. for (var i = 0; i < len; i++) {
  7896. for (var j = 0; j < len2; j++) {
  7897. out[i][j] = _catmullRomInterpolate(
  7898. p0[i][j], p1[i][j], p2[i][j], p3[i][j],
  7899. t, t2, t3
  7900. );
  7901. }
  7902. }
  7903. }
  7904. }
  7905. function _catmullRomInterpolate(p0, p1, p2, p3, t, t2, t3) {
  7906. var v0 = (p2 - p0) * 0.5;
  7907. var v1 = (p3 - p1) * 0.5;
  7908. return (2 * (p1 - p2) + v0 + v1) * t3
  7909. + (- 3 * (p1 - p2) - 2 * v0 - v1) * t2
  7910. + v0 * t + p1;
  7911. }
  7912. function Deferred(target, loop, getter, setter) {
  7913. this._tracks = {};
  7914. this._target = target;
  7915. this._loop = loop || false;
  7916. this._getter = getter || _defaultGetter;
  7917. this._setter = setter || _defaultSetter;
  7918. this._clipCount = 0;
  7919. this._delay = 0;
  7920. this._doneList = [];
  7921. this._onframeList = [];
  7922. this._clipList = [];
  7923. }
  7924. Deferred.prototype = {
  7925. when : function(time /* ms */, props) {
  7926. for (var propName in props) {
  7927. if (! this._tracks[propName]) {
  7928. this._tracks[propName] = [];
  7929. // Initialize value
  7930. this._tracks[propName].push({
  7931. time : 0,
  7932. value : this._getter(this._target, propName)
  7933. });
  7934. }
  7935. this._tracks[propName].push({
  7936. time : parseInt(time, 10),
  7937. value : props[propName]
  7938. });
  7939. }
  7940. return this;
  7941. },
  7942. during : function(callback) {
  7943. this._onframeList.push(callback);
  7944. return this;
  7945. },
  7946. start : function(easing) {
  7947. var self = this;
  7948. var setter = this._setter;
  7949. var getter = this._getter;
  7950. var onFrameListLen = self._onframeList.length;
  7951. var useSpline = easing === 'spline';
  7952. var ondestroy = function() {
  7953. self._clipCount--;
  7954. if (self._clipCount === 0) {
  7955. // Clear all tracks
  7956. self._tracks = {};
  7957. var len = self._doneList.length;
  7958. for (var i = 0; i < len; i++) {
  7959. self._doneList[i].call(self);
  7960. }
  7961. }
  7962. };
  7963. var createTrackClip = function(keyframes, propName) {
  7964. var trackLen = keyframes.length;
  7965. if (!trackLen) {
  7966. return;
  7967. }
  7968. // Guess data type
  7969. var firstVal = keyframes[0].value;
  7970. var isValueArray = _isArrayLike(firstVal);
  7971. // For vertices morphing
  7972. var arrDim = (
  7973. isValueArray
  7974. && _isArrayLike(firstVal[0])
  7975. )
  7976. ? 2 : 1;
  7977. // Sort keyframe as ascending
  7978. keyframes.sort(function(a, b) {
  7979. return a.time - b.time;
  7980. });
  7981. var trackMaxTime;
  7982. if (trackLen) {
  7983. trackMaxTime = keyframes[trackLen-1].time;
  7984. }else{
  7985. return;
  7986. }
  7987. // Percents of each keyframe
  7988. var kfPercents = [];
  7989. // Value of each keyframe
  7990. var kfValues = [];
  7991. for (var i = 0; i < trackLen; i++) {
  7992. kfPercents.push(keyframes[i].time / trackMaxTime);
  7993. if (isValueArray) {
  7994. if (arrDim == 2) {
  7995. kfValues[i] = [];
  7996. for (var j = 0; j < firstVal.length; j++) {
  7997. kfValues[i].push(
  7998. arraySlice.call(keyframes[i].value[j])
  7999. );
  8000. }
  8001. } else {
  8002. kfValues.push(arraySlice.call(keyframes[i].value));
  8003. }
  8004. } else {
  8005. kfValues.push(keyframes[i].value);
  8006. }
  8007. }
  8008. // Cache the key of last frame to speed up when
  8009. // animation playback is sequency
  8010. var cacheKey = 0;
  8011. var cachePercent = 0;
  8012. var start;
  8013. var i, w;
  8014. var p0, p1, p2, p3;
  8015. var onframe = function(target, percent) {
  8016. // Find the range keyframes
  8017. // kf1-----kf2---------current--------kf3
  8018. // find kf2 and kf3 and do interpolation
  8019. if (percent < cachePercent) {
  8020. // Start from next key
  8021. start = Math.min(cacheKey + 1, trackLen - 1);
  8022. for (i = start; i >= 0; i--) {
  8023. if (kfPercents[i] <= percent) {
  8024. break;
  8025. }
  8026. }
  8027. i = Math.min(i, trackLen-2);
  8028. } else {
  8029. for (i = cacheKey; i < trackLen; i++) {
  8030. if (kfPercents[i] > percent) {
  8031. break;
  8032. }
  8033. }
  8034. i = Math.min(i-1, trackLen-2);
  8035. }
  8036. cacheKey = i;
  8037. cachePercent = percent;
  8038. var range = (kfPercents[i+1] - kfPercents[i]);
  8039. if (range === 0) {
  8040. return;
  8041. } else {
  8042. w = (percent - kfPercents[i]) / range;
  8043. }
  8044. if (w < 0) {
  8045. console.log(w);
  8046. }
  8047. if (useSpline) {
  8048. p1 = kfValues[i];
  8049. p0 = kfValues[i === 0 ? i : i - 1];
  8050. p2 = kfValues[i > trackLen - 2 ? trackLen - 1 : i + 1];
  8051. p3 = kfValues[i > trackLen - 3 ? trackLen - 1 : i + 2];
  8052. if (isValueArray) {
  8053. _catmullRomInterpolateArray(
  8054. p0, p1, p2, p3, w, w*w, w*w*w,
  8055. getter(target, propName),
  8056. arrDim
  8057. );
  8058. } else {
  8059. setter(
  8060. target,
  8061. propName,
  8062. _catmullRomInterpolate(
  8063. p0, p1, p2, p3, w, w*w, w*w*w
  8064. )
  8065. );
  8066. }
  8067. } else {
  8068. if (isValueArray) {
  8069. _interpolateArray(
  8070. kfValues[i], kfValues[i+1], w,
  8071. getter(target, propName),
  8072. arrDim
  8073. );
  8074. } else {
  8075. setter(
  8076. target,
  8077. propName,
  8078. _interpolateNumber(kfValues[i], kfValues[i+1], w)
  8079. );
  8080. }
  8081. }
  8082. for (i = 0; i < onFrameListLen; i++) {
  8083. self._onframeList[i](target, percent);
  8084. }
  8085. };
  8086. var clip = new Clip({
  8087. target : self._target,
  8088. life : trackMaxTime,
  8089. loop : self._loop,
  8090. delay : self._delay,
  8091. onframe : onframe,
  8092. ondestroy : ondestroy
  8093. });
  8094. if (easing && easing !== 'spline') {
  8095. clip.easing = easing;
  8096. }
  8097. self._clipList.push(clip);
  8098. self._clipCount++;
  8099. self.animation.add(clip);
  8100. };
  8101. for (var propName in this._tracks) {
  8102. createTrackClip(this._tracks[propName], propName);
  8103. }
  8104. return this;
  8105. },
  8106. stop : function() {
  8107. for (var i = 0; i < this._clipList.length; i++) {
  8108. var clip = this._clipList[i];
  8109. this.animation.remove(clip);
  8110. }
  8111. this._clipList = [];
  8112. },
  8113. delay : function(time){
  8114. this._delay = time;
  8115. return this;
  8116. },
  8117. done : function(func) {
  8118. this._doneList.push(func);
  8119. return this;
  8120. }
  8121. };
  8122. return Animation;
  8123. }
  8124. );
  8125. /**
  8126. * zrender: config默认配置项
  8127. *
  8128. * @desc zrender是一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型。
  8129. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  8130. *
  8131. */
  8132. define(
  8133. 'zrender/config',{
  8134. loadingEffect : 'spin', // 默认loading特效
  8135. EVENT : { // 支持事件列表
  8136. RESIZE : 'resize', // 窗口大小变化
  8137. CLICK : 'click', // 鼠标按钮被(手指)按下,事件对象是:目标图形元素或空
  8138. MOUSEWHEEL : 'mousewheel', // 鼠标滚轮变化,事件对象是:目标图形元素或空
  8139. MOUSEMOVE : 'mousemove', // 鼠标(手指)被移动,事件对象是:目标图形元素或空
  8140. MOUSEOVER : 'mouseover', // 鼠标移到某图形元素之上,事件对象是:目标图形元素
  8141. MOUSEOUT : 'mouseout', // 鼠标从某图形元素移开,事件对象是:目标图形元素
  8142. MOUSEDOWN : 'mousedown', // 鼠标按钮(手指)被按下,事件对象是:目标图形元素或空
  8143. MOUSEUP : 'mouseup', // 鼠标按键(手指)被松开,事件对象是:目标图形元素或空
  8144. //
  8145. GLOBALOUT : 'globalout', // 全局离开,MOUSEOUT触发比较频繁,一次离开优化绑定
  8146. // 一次成功元素拖拽的行为事件过程是:
  8147. // dragstart > dragenter > dragover [> dragleave] > drop > dragend
  8148. DRAGSTART : 'dragstart', // 开始拖拽时触发,事件对象是:被拖拽图形元素
  8149. DRAGEND : 'dragend', // 拖拽完毕时触发(在drop之后触发),事件对象是:被拖拽图形元素
  8150. DRAGENTER : 'dragenter', // 拖拽图形元素进入目标图形元素时触发,事件对象是:目标图形元素
  8151. DRAGOVER : 'dragover', // 拖拽图形元素在目标图形元素上移动时触发,事件对象是:目标图形元素
  8152. DRAGLEAVE : 'dragleave', // 拖拽图形元素离开目标图形元素时触发,事件对象是:目标图形元素
  8153. DROP : 'drop', // 拖拽图形元素放在目标图形元素内时触发,事件对象是:目标图形元素
  8154. touchClickDelay : 300 // touch end - start < delay is click
  8155. }
  8156. }
  8157. );
  8158. /**
  8159. * zrender: loading特效
  8160. *
  8161. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  8162. *
  8163. * 扩展loading effect:
  8164. * getBackgroundShape:获取背景图形
  8165. * getTextShape:获取文字
  8166. * define : 定义效果
  8167. *
  8168. * 内置效果
  8169. * bar:进度条
  8170. * whirling:旋转水滴
  8171. * dynamicLine:动态线条
  8172. * bubble:气泡
  8173. */
  8174. define(
  8175. 'zrender/tool/loadingEffect',['require','./util','./color','./color','./color','./color','./color','./math'],function(require) {
  8176. var util = require('./util');
  8177. var self;
  8178. var _defaultText = 'Loading...';
  8179. var _defaultTextFont = 'normal 16px Arial';
  8180. var _width;
  8181. var _height;
  8182. function define(name, fun) {
  8183. self[name] = fun;
  8184. }
  8185. /**
  8186. * 获取loading文字图形
  8187. * @param {Object} textStyle 文字style,同shape/text.style
  8188. */
  8189. function getTextShape(textStyle) {
  8190. return {
  8191. shape : 'text',
  8192. highlightStyle : util.merge(
  8193. {
  8194. x : _width / 2,
  8195. y : _height / 2,
  8196. text : _defaultText,
  8197. textAlign : 'center',
  8198. textBaseline : 'middle',
  8199. textFont : _defaultTextFont,
  8200. color: '#333',
  8201. brushType : 'fill'
  8202. },
  8203. textStyle,
  8204. {'overwrite': true, 'recursive': true}
  8205. )
  8206. };
  8207. }
  8208. /**
  8209. * 获取loading背景图形
  8210. * @param {color} color 背景颜色
  8211. */
  8212. function getBackgroundShape (color) {
  8213. return {
  8214. shape : 'rectangle',
  8215. highlightStyle : {
  8216. x : 0,
  8217. y : 0,
  8218. width : _width,
  8219. height : _height,
  8220. brushType : 'fill',
  8221. color : color
  8222. }
  8223. };
  8224. }
  8225. // 调整值区间
  8226. function _adjust(value, region) {
  8227. if (value <= region[0]) {
  8228. value = region[0];
  8229. }
  8230. else if (value >= region[1]) {
  8231. value = region[1];
  8232. }
  8233. return value;
  8234. }
  8235. /**
  8236. * 进度条
  8237. * @param {Object} loadingOption
  8238. * @param {Object} addShapeHandle
  8239. * @param {Object} refreshHandle
  8240. */
  8241. function bar(loadingOption, addShapeHandle, refreshHandle) {
  8242. var zrColor = require('./color');
  8243. // 特效默认配置
  8244. loadingOption = util.merge(
  8245. loadingOption,
  8246. {
  8247. textStyle : {
  8248. color : '#888'
  8249. },
  8250. backgroundColor : 'rgba(250, 250, 250, 0.8)',
  8251. effectOption : {
  8252. x : 0,
  8253. y : _height / 2 - 30,
  8254. width : _width,
  8255. height : 5,
  8256. brushType : 'fill',
  8257. timeInterval : 100
  8258. }
  8259. },
  8260. {'overwrite': false, 'recursive': true}
  8261. );
  8262. var textShape = getTextShape(loadingOption.textStyle);
  8263. var background = getBackgroundShape(loadingOption.backgroundColor);
  8264. var effectOption = loadingOption.effectOption;
  8265. // 初始化动画元素
  8266. var barShape = {
  8267. shape : 'rectangle',
  8268. highlightStyle : util.clone(effectOption)
  8269. };
  8270. barShape.highlightStyle.color =
  8271. effectOption.color
  8272. || zrColor.getLinearGradient(
  8273. effectOption.x,
  8274. effectOption.y,
  8275. effectOption.x + effectOption.width,
  8276. effectOption.y + effectOption.height,
  8277. [[0, '#ff6400'], [0.5, '#ffe100'], [1, '#b1ff00']]
  8278. );
  8279. if (typeof loadingOption.progress != 'undefined') {
  8280. // 指定进度
  8281. addShapeHandle(background);
  8282. barShape.highlightStyle.width =
  8283. _adjust(loadingOption.progress, [0,1])
  8284. * loadingOption.effectOption.width;
  8285. addShapeHandle(barShape);
  8286. addShapeHandle(textShape);
  8287. refreshHandle();
  8288. return;
  8289. }
  8290. else {
  8291. // 循环显示
  8292. barShape.highlightStyle.width = 0;
  8293. return setInterval(
  8294. function() {
  8295. addShapeHandle(background);
  8296. if (barShape.highlightStyle.width
  8297. < loadingOption.effectOption.width
  8298. ) {
  8299. barShape.highlightStyle.width += 8;
  8300. }
  8301. else {
  8302. barShape.highlightStyle.width = 0;
  8303. }
  8304. addShapeHandle(barShape);
  8305. addShapeHandle(textShape);
  8306. refreshHandle();
  8307. },
  8308. effectOption.timeInterval
  8309. );
  8310. }
  8311. }
  8312. /**
  8313. * 旋转水滴
  8314. * @param {Object} loadingOption
  8315. * @param {Object} addShapeHandle
  8316. * @param {Object} refreshHandle
  8317. */
  8318. function whirling(loadingOption, addShapeHandle, refreshHandle) {
  8319. // 特效默认配置
  8320. loadingOption.effectOption = util.merge(
  8321. loadingOption.effectOption || {},
  8322. {
  8323. x : _width / 2 - 80,
  8324. y : _height / 2,
  8325. r : 18,
  8326. colorIn : '#fff',
  8327. colorOut : '#555',
  8328. colorWhirl : '#6cf',
  8329. timeInterval : 50
  8330. }
  8331. );
  8332. var effectOption = loadingOption.effectOption;
  8333. loadingOption = util.merge(
  8334. loadingOption,
  8335. {
  8336. textStyle : {
  8337. color : '#888',
  8338. x : effectOption.x + effectOption.r + 10,
  8339. y : effectOption.y,
  8340. textAlign : 'start'
  8341. },
  8342. backgroundColor : 'rgba(250, 250, 250, 0.8)'
  8343. },
  8344. {'overwrite': false, 'recursive': true}
  8345. );
  8346. var textShape = getTextShape(loadingOption.textStyle);
  8347. var background = getBackgroundShape(loadingOption.backgroundColor);
  8348. // 初始化动画元素
  8349. var droplet = {
  8350. shape : 'droplet',
  8351. highlightStyle : {
  8352. a : Math.round(effectOption.r / 2),
  8353. b : Math.round(effectOption.r - effectOption.r / 6),
  8354. brushType : 'fill',
  8355. color : effectOption.colorWhirl
  8356. }
  8357. };
  8358. var circleIn = {
  8359. shape : 'circle',
  8360. highlightStyle : {
  8361. r : Math.round(effectOption.r / 6),
  8362. brushType : 'fill',
  8363. color : effectOption.colorIn
  8364. }
  8365. };
  8366. var circleOut = {
  8367. shape : 'ring',
  8368. highlightStyle : {
  8369. r0 : Math.round(effectOption.r - effectOption.r / 3),
  8370. r : effectOption.r,
  8371. brushType : 'fill',
  8372. color : effectOption.colorOut
  8373. }
  8374. };
  8375. var pos = [0, effectOption.x, effectOption.y];
  8376. droplet.highlightStyle.x
  8377. = circleIn.highlightStyle.x
  8378. = circleOut.highlightStyle.x
  8379. = pos[1];
  8380. droplet.highlightStyle.y
  8381. = circleIn.highlightStyle.y
  8382. = circleOut.highlightStyle.y
  8383. = pos[2];
  8384. return setInterval(
  8385. function() {
  8386. addShapeHandle(background);
  8387. addShapeHandle(circleOut);
  8388. pos[0] -= 0.3;
  8389. droplet.rotation = pos;
  8390. addShapeHandle(droplet);
  8391. addShapeHandle(circleIn);
  8392. addShapeHandle(textShape);
  8393. refreshHandle();
  8394. },
  8395. effectOption.timeInterval
  8396. );
  8397. }
  8398. /**
  8399. * 动态线
  8400. * @param {Object} loadingOption
  8401. * @param {Object} addShapeHandle
  8402. * @param {Object} refreshHandle
  8403. */
  8404. function dynamicLine(loadingOption, addShapeHandle, refreshHandle) {
  8405. var zrColor = require('./color');
  8406. // 特效默认配置
  8407. loadingOption = util.merge(
  8408. loadingOption,
  8409. {
  8410. textStyle : {
  8411. color : '#fff'
  8412. },
  8413. backgroundColor : 'rgba(0, 0, 0, 0.8)',
  8414. effectOption : {
  8415. n : 30,
  8416. lineWidth : 1,
  8417. color : 'random',
  8418. timeInterval : 100
  8419. }
  8420. },
  8421. {'overwrite': false, 'recursive': true}
  8422. );
  8423. var textShape = getTextShape(loadingOption.textStyle);
  8424. var background = getBackgroundShape(loadingOption.backgroundColor);
  8425. var effectOption = loadingOption.effectOption;
  8426. var n = effectOption.n;
  8427. var lineWidth = effectOption.lineWidth;
  8428. var shapeList = [];
  8429. var pos;
  8430. var len;
  8431. var xStart;
  8432. var color;
  8433. // 初始化动画元素
  8434. for(var i = 0; i < n; i++) {
  8435. xStart = -Math.ceil(Math.random() * 1000);
  8436. len = Math.ceil(Math.random() * 400);
  8437. pos = Math.ceil(Math.random() * _height);
  8438. if (effectOption.color == 'random') {
  8439. color = zrColor.random();
  8440. }
  8441. else {
  8442. color = effectOption.color;
  8443. }
  8444. shapeList[i] = {
  8445. shape : 'line',
  8446. highlightStyle : {
  8447. xStart : xStart,
  8448. yStart : pos,
  8449. xEnd : xStart + len,
  8450. yEnd : pos,
  8451. strokeColor : color,
  8452. lineWidth : lineWidth
  8453. },
  8454. animationX : Math.ceil(Math.random() * 100),
  8455. len : len
  8456. };
  8457. }
  8458. return setInterval(
  8459. function() {
  8460. addShapeHandle(background);
  8461. var style;
  8462. for(var i = 0; i < n; i++) {
  8463. style = shapeList[i].highlightStyle ;
  8464. if (style.xStart >= _width){
  8465. shapeList[i].len = Math.ceil(Math.random() * 400);
  8466. shapeList[i].highlightStyle .xStart = -400;
  8467. shapeList[i].highlightStyle .xEnd =
  8468. -400 + shapeList[i].len;
  8469. shapeList[i].highlightStyle .yStart =
  8470. Math.ceil(Math.random() * _height);
  8471. shapeList[i].highlightStyle .yEnd =
  8472. shapeList[i].highlightStyle.yStart;
  8473. }
  8474. shapeList[i].highlightStyle.xStart +=
  8475. shapeList[i].animationX;
  8476. shapeList[i].highlightStyle.xEnd +=
  8477. shapeList[i].animationX;
  8478. addShapeHandle(shapeList[i]);
  8479. }
  8480. addShapeHandle(textShape);
  8481. refreshHandle();
  8482. },
  8483. effectOption.timeInterval
  8484. );
  8485. }
  8486. /**
  8487. * 泡泡
  8488. * @param {Object} loadingOption
  8489. * @param {Object} addShapeHandle
  8490. * @param {Object} refreshHandle
  8491. */
  8492. function bubble(loadingOption, addShapeHandle, refreshHandle) {
  8493. var zrColor = require('./color');
  8494. // 特效默认配置
  8495. loadingOption = util.merge(
  8496. loadingOption,
  8497. {
  8498. textStyle : {
  8499. color : '#888'
  8500. },
  8501. backgroundColor : 'rgba(250, 250, 250, 0.8)',
  8502. effectOption : {
  8503. n : 50,
  8504. lineWidth : 2,
  8505. brushType : 'stroke',
  8506. color : 'random',
  8507. timeInterval : 100
  8508. }
  8509. },
  8510. {'overwrite': false, 'recursive': true}
  8511. );
  8512. var textShape = getTextShape(loadingOption.textStyle);
  8513. var background = getBackgroundShape(loadingOption.backgroundColor);
  8514. var effectOption = loadingOption.effectOption;
  8515. var n = effectOption.n;
  8516. var brushType = effectOption.brushType;
  8517. var lineWidth = effectOption.lineWidth;
  8518. var shapeList = [];
  8519. var color;
  8520. // 初始化动画元素
  8521. for(var i = 0; i < n; i++) {
  8522. if (effectOption.color == 'random') {
  8523. color = zrColor.alpha(zrColor.random(), 0.3);
  8524. }
  8525. else {
  8526. color = effectOption.color;
  8527. }
  8528. shapeList[i] = {
  8529. shape : 'circle',
  8530. highlightStyle : {
  8531. x : Math.ceil(Math.random() * _width),
  8532. y : Math.ceil(Math.random() * _height),
  8533. r : Math.ceil(Math.random() * 40),
  8534. brushType : brushType,
  8535. color : color,
  8536. strokeColor : color,
  8537. lineWidth : lineWidth
  8538. },
  8539. animationY : Math.ceil(Math.random() * 20)
  8540. };
  8541. }
  8542. return setInterval(
  8543. function () {
  8544. addShapeHandle(background);
  8545. var style;
  8546. for(var i = 0; i < n; i++) {
  8547. style = shapeList[i].highlightStyle;
  8548. if (style.y - shapeList[i].animationY + style.r <= 0){
  8549. shapeList[i].highlightStyle.y = _height + style.r;
  8550. shapeList[i].highlightStyle.x = Math.ceil(
  8551. Math.random() * _width
  8552. );
  8553. }
  8554. shapeList[i].highlightStyle.y -=
  8555. shapeList[i].animationY;
  8556. addShapeHandle(shapeList[i]);
  8557. }
  8558. addShapeHandle(textShape);
  8559. refreshHandle();
  8560. },
  8561. effectOption.timeInterval
  8562. );
  8563. }
  8564. /**
  8565. * 旋转
  8566. * @param {Object} loadingOption
  8567. * @param {Object} addShapeHandle
  8568. * @param {Object} refreshHandle
  8569. */
  8570. function spin(loadingOption, addShapeHandle, refreshHandle) {
  8571. var zrColor = require('./color');
  8572. // 特效默认配置
  8573. loadingOption.effectOption = util.merge(
  8574. loadingOption.effectOption || {},
  8575. {
  8576. x : _width / 2 - 80,
  8577. y : _height / 2,
  8578. r0 : 9,
  8579. r : 15,
  8580. n : 18,
  8581. color : '#fff',
  8582. timeInterval : 100
  8583. }
  8584. );
  8585. var effectOption = loadingOption.effectOption;
  8586. loadingOption = util.merge(
  8587. loadingOption,
  8588. {
  8589. textStyle : {
  8590. color : '#fff',
  8591. x : effectOption.x + effectOption.r + 10,
  8592. y : effectOption.y,
  8593. textAlign : 'start'
  8594. },
  8595. backgroundColor : 'rgba(0, 0, 0, 0.8)'
  8596. },
  8597. {'overwrite': false, 'recursive': true}
  8598. );
  8599. var textShape = getTextShape(loadingOption.textStyle);
  8600. var background = getBackgroundShape(loadingOption.backgroundColor);
  8601. var n = effectOption.n;
  8602. var x = effectOption.x;
  8603. var y = effectOption.y;
  8604. var r0 = effectOption.r0;
  8605. var r = effectOption.r;
  8606. var color = effectOption.color;
  8607. // 初始化动画元素
  8608. var shapeList = [];
  8609. var preAngle = Math.round(180 / n);
  8610. for(var i = 0; i < n; i++) {
  8611. shapeList[i] = {
  8612. shape : 'sector',
  8613. highlightStyle : {
  8614. x : x,
  8615. y : y,
  8616. r0 : r0,
  8617. r : r,
  8618. startAngle : preAngle * i * 2,
  8619. endAngle : preAngle * i * 2 + preAngle,
  8620. color : zrColor.alpha(color, (i + 1) / n),
  8621. brushType: 'fill'
  8622. }
  8623. };
  8624. }
  8625. var pos = [0, x, y];
  8626. return setInterval(
  8627. function() {
  8628. addShapeHandle(background);
  8629. pos[0] -= 0.3;
  8630. for(var i = 0; i < n; i++) {
  8631. shapeList[i].rotation = pos;
  8632. addShapeHandle(shapeList[i]);
  8633. }
  8634. addShapeHandle(textShape);
  8635. refreshHandle();
  8636. },
  8637. effectOption.timeInterval
  8638. );
  8639. }
  8640. /**
  8641. * 圆环
  8642. * @param {Object} loadingOption
  8643. * @param {Object} addShapeHandle
  8644. * @param {Object} refreshHandle
  8645. */
  8646. function ring(loadingOption, addShapeHandle, refreshHandle) {
  8647. var zrColor = require('./color');
  8648. var zrMath = require('./math');
  8649. // 特效默认配置
  8650. loadingOption = util.merge(
  8651. loadingOption,
  8652. {
  8653. textStyle : {
  8654. color : '#07a'
  8655. },
  8656. backgroundColor : 'rgba(250, 250, 250, 0.8)',
  8657. effectOption : {
  8658. x : _width / 2,
  8659. y : _height / 2,
  8660. r0 : 60,
  8661. r : 100,
  8662. color : '#bbdcff',
  8663. brushType: 'fill',
  8664. textPosition : 'inside',
  8665. textFont : 'normal 30px verdana',
  8666. textColor : 'rgba(30, 144, 255, 0.6)',
  8667. timeInterval : 100
  8668. }
  8669. },
  8670. {'overwrite': false, 'recursive': true}
  8671. );
  8672. var effectOption = loadingOption.effectOption;
  8673. var textStyle = loadingOption.textStyle;
  8674. textStyle.x = typeof textStyle.x != 'undefined'
  8675. ? textStyle.x : effectOption.x;
  8676. textStyle.y = typeof textStyle.y != 'undefined'
  8677. ? textStyle.y
  8678. : (effectOption.y + (effectOption.r0 + effectOption.r) / 2 - 5);
  8679. var textShape = getTextShape(loadingOption.textStyle);
  8680. var background = getBackgroundShape(loadingOption.backgroundColor);
  8681. var x = effectOption.x;
  8682. var y = effectOption.y;
  8683. var r0 = effectOption.r0 + 6;
  8684. var r = effectOption.r - 6;
  8685. var color = effectOption.color;
  8686. var darkColor = zrColor.lift(color, 0.1);
  8687. var shapeRing = {
  8688. shape : 'ring',
  8689. highlightStyle : util.clone(effectOption)
  8690. };
  8691. // 初始化动画元素
  8692. var shapeList = [];
  8693. var clolrList = zrColor.getGradientColors(
  8694. ['#ff6400', '#ffe100', '#97ff00'], 25
  8695. );
  8696. var preAngle = 15;
  8697. var endAngle = 240;
  8698. for(var i = 0; i < 16; i++) {
  8699. shapeList.push({
  8700. shape : 'sector',
  8701. highlightStyle : {
  8702. x : x,
  8703. y : y,
  8704. r0 : r0,
  8705. r : r,
  8706. startAngle : endAngle - preAngle,
  8707. endAngle : endAngle,
  8708. brushType: 'fill',
  8709. color : darkColor
  8710. },
  8711. _color : zrColor.getLinearGradient(
  8712. x + r0 * zrMath.cos(endAngle, true),
  8713. y - r0 * zrMath.sin(endAngle, true),
  8714. x + r0 * zrMath.cos(endAngle - preAngle, true),
  8715. y - r0 * zrMath.sin(endAngle - preAngle, true),
  8716. [
  8717. [0, clolrList[i * 2]],
  8718. [1, clolrList[i * 2 + 1]]
  8719. ]
  8720. )
  8721. });
  8722. endAngle -= preAngle;
  8723. }
  8724. endAngle = 360;
  8725. for(var i = 0; i < 4; i++) {
  8726. shapeList.push({
  8727. shape : 'sector',
  8728. highlightStyle : {
  8729. x : x,
  8730. y : y,
  8731. r0 : r0,
  8732. r : r,
  8733. startAngle : endAngle - preAngle,
  8734. endAngle : endAngle,
  8735. brushType: 'fill',
  8736. color : darkColor
  8737. },
  8738. _color : zrColor.getLinearGradient(
  8739. x + r0 * zrMath.cos(endAngle, true),
  8740. y - r0 * zrMath.sin(endAngle, true),
  8741. x + r0 * zrMath.cos(endAngle - preAngle, true),
  8742. y - r0 * zrMath.sin(endAngle - preAngle, true),
  8743. [
  8744. [0, clolrList[i * 2 + 32]],
  8745. [1, clolrList[i * 2 + 33]]
  8746. ]
  8747. )
  8748. });
  8749. endAngle -= preAngle;
  8750. }
  8751. var n = 0;
  8752. if (typeof loadingOption.progress != 'undefined') {
  8753. // 指定进度
  8754. addShapeHandle(background);
  8755. n = _adjust(loadingOption.progress, [0,1]).toFixed(2) * 100 / 5;
  8756. shapeRing.highlightStyle.text = n * 5 + '%';
  8757. addShapeHandle(shapeRing);
  8758. for(var i = 0; i < 20; i++) {
  8759. shapeList[i].highlightStyle.color = i < n
  8760. ? shapeList[i]._color : darkColor;
  8761. addShapeHandle(shapeList[i]);
  8762. }
  8763. addShapeHandle(textShape);
  8764. refreshHandle();
  8765. return;
  8766. }
  8767. else {
  8768. // 循环显示
  8769. return setInterval(
  8770. function() {
  8771. addShapeHandle(background);
  8772. n += n >= 20 ? -20 : 1;
  8773. //shapeRing.highlightStyle.text = n * 5 + '%';
  8774. addShapeHandle(shapeRing);
  8775. for(var i = 0; i < 20; i++) {
  8776. shapeList[i].highlightStyle.color = i < n
  8777. ? shapeList[i]._color : darkColor;
  8778. addShapeHandle(shapeList[i]);
  8779. }
  8780. addShapeHandle(textShape);
  8781. refreshHandle();
  8782. },
  8783. effectOption.timeInterval
  8784. );
  8785. }
  8786. }
  8787. function start(loadingOption, addShapeHandle, refreshHandle) {
  8788. var loadingEffect = self.ring; // 默认特效
  8789. if (typeof loadingOption.effect == 'function') {
  8790. // 自定义特效
  8791. loadingEffect = loadingOption.effect;
  8792. }
  8793. else if (typeof self[loadingOption.effect] == 'function'){
  8794. // 指定特效
  8795. loadingEffect = self[loadingOption.effect];
  8796. }
  8797. _width = loadingOption.canvasSize.width;
  8798. _height = loadingOption.canvasSize.height;
  8799. return loadingEffect(
  8800. loadingOption, addShapeHandle, refreshHandle
  8801. );
  8802. }
  8803. function stop(loadingTimer) {
  8804. clearInterval(loadingTimer);
  8805. }
  8806. self = {
  8807. // 这三个方法用于扩展loading effect
  8808. getBackgroundShape : getBackgroundShape,
  8809. getTextShape : getTextShape,
  8810. define : define,
  8811. // 内置特效
  8812. bar : bar,
  8813. whirling : whirling,
  8814. dynamicLine : dynamicLine,
  8815. bubble : bubble,
  8816. spin : spin,
  8817. ring : ring,
  8818. // 方法
  8819. start : start,
  8820. stop : stop
  8821. };
  8822. return self;
  8823. }
  8824. );
  8825. /**
  8826. * zrender: 事件辅助类
  8827. *
  8828. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  8829. *
  8830. * getX:获取事件横坐标
  8831. * getY:或者事件纵坐标
  8832. * getDelta:或者鼠标滚轮变化
  8833. * stop:停止事件传播
  8834. * Dispatcher:事件分发器
  8835. */
  8836. define(
  8837. 'zrender/tool/event',[],function() {
  8838. /**
  8839. * 提取鼠标(手指)x坐标
  8840. * @param {event} e 事件.
  8841. * @return {number} 鼠标(手指)x坐标.
  8842. */
  8843. function getX(e) {
  8844. return typeof e.zrenderX != 'undefined' && e.zrenderX
  8845. || typeof e.offsetX != 'undefined' && e.offsetX
  8846. || typeof e.layerX != 'undefined' && e.layerX
  8847. || typeof e.clientX != 'undefined' && e.clientX;
  8848. }
  8849. /**
  8850. * 提取鼠标y坐标
  8851. * @param {event} e 事件.
  8852. * @return {number} 鼠标(手指)y坐标.
  8853. */
  8854. function getY(e) {
  8855. return typeof e.zrenderY != 'undefined' && e.zrenderY
  8856. || typeof e.offsetY != 'undefined' && e.offsetY
  8857. || typeof e.layerY != 'undefined' && e.layerY
  8858. || typeof e.clientY != 'undefined' && e.clientY;
  8859. }
  8860. /**
  8861. * 提取鼠标滚轮变化
  8862. * @param {event} e 事件.
  8863. * @return {number} 滚轮变化,正值说明滚轮是向上滚动,如果是负值说明滚轮是向下滚动
  8864. */
  8865. function getDelta(e) {
  8866. return typeof e.wheelDelta != 'undefined' && e.wheelDelta
  8867. || typeof e.detail != 'undefined' && -e.detail;
  8868. }
  8869. /**
  8870. * 停止冒泡和阻止默认行为
  8871. * @param {Object} e : event对象
  8872. */
  8873. function stop(e) {
  8874. if (e.preventDefault) {
  8875. e.preventDefault();
  8876. e.stopPropagation();
  8877. }
  8878. else {
  8879. e.returnValue = false;
  8880. e.cancelBubble = true;
  8881. }
  8882. }
  8883. /**
  8884. * 事件分发器
  8885. */
  8886. function Dispatcher() {
  8887. var _self = this;
  8888. var _h = {};
  8889. /**
  8890. * 单次触发绑定,dispatch后销毁
  8891. * @param {string} event 事件字符串
  8892. * @param {function} handler 响应函数
  8893. */
  8894. function one(event, handler) {
  8895. if(!handler || !event) {
  8896. return _self;
  8897. }
  8898. if(!_h[event]) {
  8899. _h[event] = [];
  8900. }
  8901. _h[event].push({
  8902. h : handler,
  8903. one : true
  8904. });
  8905. return _self;
  8906. }
  8907. /**
  8908. * 事件绑定
  8909. * @param {string} event 事件字符串
  8910. * @param {function} handler : 响应函数
  8911. */
  8912. function bind(event, handler) {
  8913. if(!handler || !event) {
  8914. return _self;
  8915. }
  8916. if(!_h[event]) {
  8917. _h[event] = [];
  8918. }
  8919. _h[event].push({
  8920. h : handler,
  8921. one : false
  8922. });
  8923. return _self;
  8924. }
  8925. /**
  8926. * 事件解绑定
  8927. * @param {string} event 事件字符串
  8928. * @param {function} handler : 响应函数
  8929. */
  8930. function unbind(event, handler) {
  8931. if(!event) {
  8932. _h = {};
  8933. return _self;
  8934. }
  8935. if(handler) {
  8936. if(_h[event]) {
  8937. var newList = [];
  8938. for (var i = 0, l = _h[event].length; i < l; i++) {
  8939. if (_h[event][i]['h'] != handler) {
  8940. newList.push(_h[event][i]);
  8941. }
  8942. }
  8943. _h[event] = newList;
  8944. }
  8945. if(_h[event] && _h[event].length === 0) {
  8946. delete _h[event];
  8947. }
  8948. }
  8949. else {
  8950. delete _h[event];
  8951. }
  8952. return _self;
  8953. }
  8954. /**
  8955. * 事件分发
  8956. * @param {string} type : 事件类型
  8957. * @param {Object} event : event对象
  8958. * @param {Object} [attachment] : 附加信息
  8959. */
  8960. function dispatch(type, event, attachment) {
  8961. if(_h[type]) {
  8962. var newList = [];
  8963. var eventPacket = attachment || {};
  8964. eventPacket.type = type;
  8965. eventPacket.event = event;
  8966. //eventPacket._target = self;
  8967. for (var i = 0, l = _h[type].length; i < l; i++) {
  8968. _h[type][i]['h'](eventPacket);
  8969. if (!_h[type][i]['one']) {
  8970. newList.push(_h[type][i]);
  8971. }
  8972. }
  8973. if (newList.length != _h[type].length) {
  8974. _h[type] = newList;
  8975. }
  8976. }
  8977. return _self;
  8978. }
  8979. _self.one = one;
  8980. _self.bind = bind;
  8981. _self.unbind = unbind;
  8982. _self.dispatch = dispatch;
  8983. }
  8984. return {
  8985. getX : getX,
  8986. getY : getY,
  8987. getDelta : getDelta,
  8988. stop : stop,
  8989. Dispatcher : Dispatcher
  8990. };
  8991. }
  8992. );
  8993. /*!
  8994. * ZRender, a lightweight canvas library with a MVC architecture, data-driven
  8995. * and provides an event model like DOM.
  8996. *
  8997. * Copyright (c) 2013, Baidu Inc.
  8998. * All rights reserved.
  8999. *
  9000. * Redistribution and use of this software in source and binary forms, with or
  9001. * without modification, are permitted provided that the following conditions
  9002. * are met:
  9003. *
  9004. * Redistributions of source code must retain the above copyright notice, this
  9005. * list of conditions and the following disclaimer.
  9006. *
  9007. * Redistributions in binary form must reproduce the above copyright notice,
  9008. * this list of conditions and the following disclaimer in the documentation
  9009. * and/or other materials provided with the distribution.
  9010. *
  9011. * Neither the name of Baidu Inc. nor the names of its contributors may be used
  9012. * to endorse or promote products derived from this software without specific
  9013. * prior written permission of Baidu Inc.
  9014. *
  9015. * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  9016. * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  9017. * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
  9018. * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
  9019. * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  9020. * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  9021. * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  9022. * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  9023. * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  9024. * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
  9025. * POSSIBILITY OF SUCH DAMAGE.
  9026. */
  9027. /**
  9028. * zrender: core核心类
  9029. *
  9030. * @desc zrender是一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型。
  9031. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  9032. *
  9033. */
  9034. define(
  9035. 'zrender/zrender',['require','./lib/excanvas','./shape','./shape/circle','./shape/ellipse','./shape/line','./shape/polygon','./shape/brokenLine','./shape/rectangle','./shape/ring','./shape/sector','./shape/text','./shape/heart','./shape/droplet','./shape/path','./shape/image','./shape/beziercurve','./shape/star','./shape/isogon','./animation/animation','./tool/util','./tool/util','./config','./tool/loadingEffect','./tool/loadingEffect','./config','./tool/event'],function(require) {
  9036. /*
  9037. * HTML5 Canvas for Internet Explorer!
  9038. * Modern browsers like Firefox, Safari, Chrome and Opera support
  9039. * the HTML5 canvas tag to allow 2D command-based drawing.
  9040. * ExplorerCanvas brings the same functionality to Internet Explorer.
  9041. * To use, web developers only need to include a single script tag
  9042. * in their existing web pages.
  9043. *
  9044. * https://code.google.com/p/explorercanvas/
  9045. * http://explorercanvas.googlecode.com/svn/trunk/excanvas.js
  9046. */
  9047. // 核心代码会生成一个全局变量 G_vmlCanvasManager,模块改造后借用于快速判断canvas支持
  9048. require('./lib/excanvas');
  9049. var self = {};
  9050. var zrender = self; // 提供MVC内部反向使用静态方法;
  9051. var _idx = 0; //ZRender instance's id
  9052. var _instances = {}; //ZRender实例map索引
  9053. self.version = '1.0.5';
  9054. /**
  9055. * zrender初始化
  9056. * 不让外部直接new ZRender实例,为啥?
  9057. * 不为啥,提供全局可控同时减少全局污染和降低命名冲突的风险!
  9058. *
  9059. * @param {HTMLElement} dom dom对象,不帮你做document.getElementById了
  9060. * @param {Object=} params 个性化参数,如自定义shape集合,带进来就好
  9061. *
  9062. * @return {ZRender} ZRender实例
  9063. */
  9064. self.init = function(dom, params) {
  9065. var zi = new ZRender(++_idx + '', dom, params || {});
  9066. _instances[_idx] = zi;
  9067. return zi;
  9068. };
  9069. /**
  9070. * zrender实例销毁,记在_instances里的索引也会删除了
  9071. * 管生就得管死,可以通过zrender.dispose(zi)销毁指定ZRender实例
  9072. * 当然也可以直接zi.dispose()自己销毁
  9073. *
  9074. * @param {ZRender=} zi ZRender对象,不传则销毁全部
  9075. */
  9076. self.dispose = function(zi) {
  9077. if (zi) {
  9078. zi.dispose();
  9079. }
  9080. else {
  9081. for (var z in _instances) {
  9082. _instances[z].dispose();
  9083. }
  9084. _instances = {};
  9085. }
  9086. return self;
  9087. };
  9088. /**
  9089. * 获取zrender实例
  9090. *
  9091. * @param {string} id ZRender对象索引
  9092. */
  9093. self.getInstance = function(id) {
  9094. return _instances[id];
  9095. };
  9096. /**
  9097. * 删除zrender实例,ZRender实例dispose时会调用,
  9098. * 删除后getInstance则返回undefined
  9099. * ps: 仅是删除,删除的实例不代表已经dispose了~~
  9100. * 这是一个摆脱全局zrender.dispose()自动销毁的后门,
  9101. * take care of yourself~
  9102. *
  9103. * @param {string} id ZRender对象索引
  9104. */
  9105. self.delInstance = function(id) {
  9106. if (_instances[id]) {
  9107. //只是对垃圾回收上的友好照顾,不写也大不了~
  9108. _instances[id] = null;
  9109. delete _instances[id];
  9110. }
  9111. return self;
  9112. };
  9113. // 是否异常捕获
  9114. self.catchBrushException = false;
  9115. /**
  9116. * debug日志选项:catchBrushException为true下有效
  9117. * 0 : 不生成debug数据,发布用
  9118. * 1 : 异常抛出,调试用
  9119. * 2 : 控制台输出,调试用
  9120. */
  9121. self.debugMode = 0;
  9122. self.log = function() {
  9123. if (self.debugMode === 0) {
  9124. return;
  9125. }
  9126. else if (self.debugMode == 1) {
  9127. for (var k in arguments) {
  9128. throw new Error(arguments[k]);
  9129. }
  9130. }
  9131. else if (self.debugMode > 1) {
  9132. for (var k in arguments) {
  9133. console.log(arguments[k]);
  9134. }
  9135. }
  9136. return self;
  9137. };
  9138. /**
  9139. * ZRender接口类,对外可用的所有接口都在这里!!
  9140. * storage(M)、painter(V)、handler(C)为内部私有类,外部接口不可见
  9141. * 非get接口统一返回self支持链式调用~
  9142. *
  9143. * @param {string} id 唯一标识
  9144. * @param {HTMLElement} dom dom对象,不帮你做document.getElementById
  9145. * @param {Object=} params 个性化参数,如自定义shape集合,带进来就好
  9146. *
  9147. * @return {ZRender} ZRender实例
  9148. */
  9149. function ZRender(id, dom, params) {
  9150. var self = this;
  9151. var shape = require('./shape');
  9152. // 内置图形注册
  9153. require('./shape/circle');
  9154. require('./shape/ellipse');
  9155. require('./shape/line');
  9156. require('./shape/polygon');
  9157. require('./shape/brokenLine');
  9158. require('./shape/rectangle');
  9159. require('./shape/ring');
  9160. require('./shape/sector');
  9161. require('./shape/text');
  9162. require('./shape/heart');
  9163. require('./shape/droplet');
  9164. require('./shape/path');
  9165. require('./shape/image');
  9166. require('./shape/beziercurve');
  9167. require('./shape/star');
  9168. require('./shape/isogon');
  9169. var shapeLibrary;
  9170. if (typeof params.shape == 'undefined') {
  9171. //默认图形库
  9172. shapeLibrary = shape;
  9173. }
  9174. else {
  9175. //自定义图形库,私有化,实例独占
  9176. shapeLibrary = {};
  9177. for (var s in params.shape) {
  9178. shapeLibrary[s] = params.shape[s];
  9179. }
  9180. shapeLibrary.get = function(name) {
  9181. return shapeLibrary[name] || shape.get(name);
  9182. };
  9183. }
  9184. var storage = new Storage(shapeLibrary);
  9185. var painter = new Painter(dom, storage, shapeLibrary);
  9186. var handler = new Handler(dom, storage, painter, shapeLibrary);
  9187. // 动画控制
  9188. var Animation = require('./animation/animation');
  9189. var animatingShapes = [];
  9190. var animation = new Animation({
  9191. stage : {
  9192. update : function(){
  9193. self.update(animatingShapes);
  9194. }
  9195. }
  9196. });
  9197. animation.start();
  9198. /**
  9199. * 获取实例唯一标识
  9200. */
  9201. self.getId = function() {
  9202. return id;
  9203. };
  9204. /**
  9205. * 添加图形形状
  9206. * @param {Object} shape 形状对象,可用属性全集,详见各shape
  9207. */
  9208. self.addShape = function(shape) {
  9209. storage.add(shape);
  9210. return self;
  9211. };
  9212. /**
  9213. * 删除图形形状
  9214. * @param {string} shapeId 形状对象唯一标识
  9215. */
  9216. self.delShape = function(shapeId) {
  9217. storage.del(shapeId);
  9218. return self;
  9219. };
  9220. /**
  9221. * 修改图形形状
  9222. * @param {string} shapeId 形状对象唯一标识
  9223. * @param {Object} shape 形状对象
  9224. */
  9225. self.modShape = function(shapeId, shape) {
  9226. storage.mod(shapeId, shape);
  9227. return self;
  9228. };
  9229. /**
  9230. * 添加额外高亮层显示,仅提供添加方法,每次刷新后高亮层图形均被清空
  9231. * @param {Object} shape 形状对象
  9232. */
  9233. self.addHoverShape = function(shape) {
  9234. storage.addHover(shape);
  9235. return self;
  9236. };
  9237. /**
  9238. * 渲染
  9239. * @param {Function} callback 渲染结束后回调函数
  9240. * todo:增加缓动函数
  9241. */
  9242. self.render = function(callback) {
  9243. painter.render(callback);
  9244. return self;
  9245. };
  9246. /**
  9247. * 视图更新
  9248. * @param {Function} callback 视图更新后回调函数
  9249. */
  9250. self.refresh = function(callback) {
  9251. painter.refresh(callback);
  9252. return self;
  9253. };
  9254. /**
  9255. * 高亮层更新
  9256. * @param {Function} callback 视图更新后回调函数
  9257. */
  9258. self.refreshHover = function(callback) {
  9259. painter.refreshHover(callback);
  9260. return self;
  9261. };
  9262. /**
  9263. * 视图更新
  9264. * @param {Array} shapeList 需要更新的图形元素列表
  9265. * @param {Function} callback 视图更新后回调函数
  9266. */
  9267. self.update = function(shapeList, callback) {
  9268. painter.update(shapeList, callback);
  9269. return self;
  9270. };
  9271. self.resize = function() {
  9272. painter.resize();
  9273. return self;
  9274. };
  9275. /**
  9276. * 动画
  9277. * @param {string} shapeId 形状对象唯一标识
  9278. * @param {string} path 需要添加动画的属性获取路径,可以通过a.b.c来获取深层的属性
  9279. * @param {boolean} loop 动画是否循环
  9280. * @return {Object} 动画的Deferred对象
  9281. * Example:
  9282. * zr.animate( circleId, 'style', false)
  9283. * .when(1000, { x: 10} )
  9284. * .done( function(){ console.log('Animation done')})
  9285. * .start()
  9286. */
  9287. self.animate = function(shapeId, path, loop) {
  9288. var util = require('./tool/util');
  9289. var shape = storage.get(shapeId);
  9290. if (shape) {
  9291. var target;
  9292. if (path) {
  9293. var pathSplitted = path.split('.');
  9294. var prop = shape;
  9295. for (var i = 0, l = pathSplitted.length; i < l; i++) {
  9296. if (!prop) {
  9297. continue;
  9298. }
  9299. prop = prop[pathSplitted[i]];
  9300. }
  9301. if (prop) {
  9302. target = prop;
  9303. }
  9304. }
  9305. else {
  9306. target = shape;
  9307. }
  9308. if (!target) {
  9309. zrender.log(
  9310. 'Property "'
  9311. + path
  9312. + '" is not existed in shape '
  9313. + shapeId
  9314. );
  9315. return;
  9316. }
  9317. if( typeof(shape.__aniCount) === 'undefined'){
  9318. // 正在进行的动画记数
  9319. shape.__aniCount = 0;
  9320. }
  9321. if( shape.__aniCount === 0 ){
  9322. animatingShapes.push(shape);
  9323. }
  9324. shape.__aniCount ++;
  9325. return animation.animate(target, {loop : loop})
  9326. .done(function() {
  9327. shape.__aniCount --;
  9328. if( shape.__aniCount === 0){
  9329. // 从animatingShapes里移除
  9330. var idx = util.indexOf(animatingShapes, shape);
  9331. animatingShapes.splice(idx, 1);
  9332. }
  9333. });
  9334. }
  9335. else {
  9336. zrender.log('Shape "'+ shapeId + '" not existed');
  9337. }
  9338. };
  9339. /**
  9340. * 停止所有动画
  9341. */
  9342. self.clearAnimation = function() {
  9343. animation.clear();
  9344. };
  9345. /**
  9346. * loading显示
  9347. * @param {Object} loadingOption 参数
  9348. * {
  9349. * effect,
  9350. * //loading话术
  9351. * text:'',
  9352. * // 水平安放位置,默认为 'center',可指定x坐标
  9353. * x:'center' || 'left' || 'right' || {number},
  9354. * // 垂直安放位置,默认为'top',可指定y坐标
  9355. * y:'top' || 'bottom' || {number},
  9356. *
  9357. * textStyle:{
  9358. * textFont: 'normal 20px Arial' || {textFont}, //文本字体
  9359. * color: {color}
  9360. * }
  9361. * }
  9362. */
  9363. self.showLoading = function(loadingOption) {
  9364. painter.showLoading(loadingOption);
  9365. return self;
  9366. };
  9367. /**
  9368. * loading结束
  9369. */
  9370. self.hideLoading = function() {
  9371. painter.hideLoading();
  9372. return self;
  9373. };
  9374. /**
  9375. * 生成形状唯一ID
  9376. * @param {string} [idPrefix] id前缀
  9377. * @return {string} 不重复ID
  9378. */
  9379. self.newShapeId = function(idPrefix) {
  9380. return storage.newShapeId(idPrefix);
  9381. };
  9382. /**
  9383. * 获取视图宽度
  9384. */
  9385. self.getWidth = function() {
  9386. return painter.getWidth();
  9387. };
  9388. /**
  9389. * 获取视图高度
  9390. */
  9391. self.getHeight = function() {
  9392. return painter.getHeight();
  9393. };
  9394. /**
  9395. * 图像导出
  9396. */
  9397. self.toDataURL = function(type, args) {
  9398. return painter.toDataURL(type, args);
  9399. };
  9400. /**
  9401. * 事件绑定
  9402. * @param {string} eventName 事件名称
  9403. * @param {Function} eventHandler 响应函数
  9404. */
  9405. self.on = function(eventName, eventHandler) {
  9406. handler.on(eventName, eventHandler);
  9407. return self;
  9408. };
  9409. /**
  9410. * 事件解绑定,参数为空则解绑所有自定义事件
  9411. * @param {string} eventName 事件名称
  9412. * @param {Function} eventHandler 响应函数
  9413. */
  9414. self.un = function(eventName, eventHandler) {
  9415. handler.un(eventName, eventHandler);
  9416. return self;
  9417. };
  9418. /**
  9419. * 清除当前ZRender下所有类图的数据和显示,clear后MVC和已绑定事件均还存在在,ZRender可用
  9420. */
  9421. self.clear = function() {
  9422. storage.del();
  9423. painter.clear();
  9424. return self;
  9425. };
  9426. /**
  9427. * 释放当前ZR实例(删除包括dom,数据、显示和事件绑定),dispose后ZR不可用
  9428. */
  9429. self.dispose = function() {
  9430. animation.stop();
  9431. animation = null;
  9432. animatingShapes = null;
  9433. self.clear();
  9434. self = null;
  9435. storage.dispose();
  9436. storage = null;
  9437. painter.dispose();
  9438. painter = null;
  9439. handler.dispose();
  9440. handler = null;
  9441. //释放后告诉全局删除对自己的索引,没想到啥好方法
  9442. zrender.delInstance(id);
  9443. return;
  9444. };
  9445. }
  9446. /**
  9447. * 内容仓库 (M)
  9448. * @param {Object} shape 图形库
  9449. */
  9450. function Storage(shape) {
  9451. var util = require('./tool/util');
  9452. var self = this;
  9453. var _idBase = 0; //图形数据id自增基础
  9454. // 所有常规形状,id索引的map
  9455. var _elements = {};
  9456. // 所有形状的z轴方向排列,提高遍历性能,zElements[0]的形状在zElements[1]形状下方
  9457. var _zElements = [];
  9458. // 高亮层形状,不稳定,动态增删,数组位置也是z轴方向,靠前显示在下方
  9459. var _hoverElements = [];
  9460. var _maxZlevel = 0; // 最大zlevel
  9461. var _changedZlevel = {}; // 有数据改变的zlevel
  9462. /**
  9463. * 快速判断标志~
  9464. * e.__silent 是否需要hover判断
  9465. * e.__needTransform 是否需要进行transform
  9466. * e.style.__rect 区域矩阵缓存,修改后清空,重新计算一次
  9467. */
  9468. function _mark(e) {
  9469. if (e.hoverable || e.onclick || e.draggable
  9470. || e.onmousemove || e.onmouseover || e.onmouseout
  9471. || e.onmousedown || e.onmouseup
  9472. || e.ondragenter || e.ondragover || e.ondragleave
  9473. || e.ondrop
  9474. ) {
  9475. e.__silent = false;
  9476. }
  9477. else {
  9478. e.__silent = true;
  9479. }
  9480. if (Math.abs(e.rotation[0]) > 0.0001
  9481. || Math.abs(e.position[0]) > 0.0001
  9482. || Math.abs(e.position[1]) > 0.0001
  9483. || Math.abs(e.scale[0] - 1) > 0.0001
  9484. || Math.abs(e.scale[1] - 1) > 0.0001
  9485. ) {
  9486. e.__needTransform = true;
  9487. }
  9488. else {
  9489. e.__needTransform = false;
  9490. }
  9491. e.style = e.style || {};
  9492. e.style.__rect = null;
  9493. }
  9494. /**
  9495. * 唯一标识id生成
  9496. * @param {string=} idHead 标识前缀
  9497. */
  9498. function newShapeId(idHead) {
  9499. return (idHead || '') + (++_idBase);
  9500. }
  9501. /**
  9502. * 添加
  9503. * @param {Object} params 参数
  9504. */
  9505. function add(params) {
  9506. // 默认&必须的参数
  9507. var e = {
  9508. 'shape': 'circle', // 形状
  9509. 'id': params.id || self.newShapeId(), // 唯一标识
  9510. 'zlevel': 0, // z轴位置
  9511. 'draggable': false, // draggable可拖拽
  9512. 'clickable': false, // clickable可点击响应
  9513. 'hoverable': true, // hoverable可悬浮响应
  9514. 'position': [0, 0],
  9515. 'rotation' : [0, 0, 0],
  9516. 'scale' : [1, 1, 0, 0]
  9517. };
  9518. util.merge(
  9519. e,
  9520. params,
  9521. {
  9522. 'overwrite': true,
  9523. 'recursive': true
  9524. }
  9525. );
  9526. _mark(e);
  9527. _elements[e.id] = e;
  9528. _zElements[e.zlevel] = _zElements[e.zlevel] || [];
  9529. _zElements[e.zlevel].push(e);
  9530. _maxZlevel = Math.max(_maxZlevel,e.zlevel);
  9531. _changedZlevel[e.zlevel] = true;
  9532. return self;
  9533. }
  9534. /**
  9535. * 根据指定的shapeId获取相应的shape属性
  9536. * @param {string=} idx 唯一标识
  9537. */
  9538. function get(shapeId) {
  9539. return _elements[shapeId];
  9540. }
  9541. /**
  9542. * 删除,shapeId不指定则全清空
  9543. * @param {string= | Array} idx 唯一标识
  9544. */
  9545. function del(shapeId) {
  9546. if (typeof shapeId != 'undefined') {
  9547. var delMap = {};
  9548. if (!(shapeId instanceof Array)) {
  9549. // 单个
  9550. delMap[shapeId] = true;
  9551. }
  9552. else {
  9553. // 批量删除
  9554. for (var i = 0, l = shapeId.length; i < l; i++) {
  9555. delMap[shapeId[i].id] = true;
  9556. }
  9557. }
  9558. var newList;
  9559. var oldList;
  9560. var zlevel;
  9561. var zChanged = {};
  9562. for (var sId in delMap) {
  9563. if (_elements[sId]) {
  9564. zlevel = _elements[sId].zlevel;
  9565. _changedZlevel[zlevel] = true;
  9566. if (!zChanged[zlevel]) {
  9567. oldList = _zElements[zlevel];
  9568. newList = [];
  9569. for (var i = 0, l = oldList.length; i < l; i++){
  9570. if (!delMap[oldList[i].id]) {
  9571. newList.push(oldList[i]);
  9572. }
  9573. }
  9574. _zElements[zlevel] = newList;
  9575. zChanged[zlevel] = true;
  9576. }
  9577. delete _elements[sId];
  9578. }
  9579. }
  9580. }
  9581. else{
  9582. //不指定shapeId清空
  9583. _elements = {};
  9584. _zElements = [];
  9585. _hoverElements = [];
  9586. _maxZlevel = 0; //最大zlevel
  9587. _changedZlevel = { //有数据改变的zlevel
  9588. all : true
  9589. };
  9590. }
  9591. return self;
  9592. }
  9593. /**
  9594. * 修改
  9595. * @param {string} idx 唯一标识
  9596. * @param {Object} params]参数
  9597. */
  9598. function mod(shapeId, params) {
  9599. var e = _elements[shapeId];
  9600. if (e) {
  9601. _changedZlevel[e.zlevel] = true; // 可能修改前后不在一层
  9602. util.merge(
  9603. e,
  9604. params,
  9605. {
  9606. 'overwrite': true,
  9607. 'recursive': true
  9608. }
  9609. );
  9610. _mark(e);
  9611. _changedZlevel[e.zlevel] = true; // 可能修改前后不在一层
  9612. _maxZlevel = Math.max(_maxZlevel,e.zlevel);
  9613. }
  9614. return self;
  9615. }
  9616. /**
  9617. * 常规形状位置漂移,形状自身定义漂移函数
  9618. * @param {string} idx 形状唯一标识
  9619. *
  9620. */
  9621. function drift(shapeId, dx, dy) {
  9622. var e = _elements[shapeId];
  9623. if (!e) {
  9624. return;
  9625. }
  9626. e.__needTransform = true;
  9627. if (!e.ondrift //ondrift
  9628. //有onbrush并且调用执行返回false或undefined则继续
  9629. || (e.ondrift && !e.ondrift(e, dx, dy))
  9630. ) {
  9631. if (zrender.catchBrushException) {
  9632. try {
  9633. shape.get(e.shape).drift(e, dx, dy);
  9634. }
  9635. catch(error) {
  9636. zrender.log(error, 'drift error of ' + e.shape, e);
  9637. }
  9638. }
  9639. else {
  9640. shape.get(e.shape).drift(e, dx, dy);
  9641. }
  9642. }
  9643. _changedZlevel[e.zlevel] = true;
  9644. return self;
  9645. }
  9646. /**
  9647. * 添加高亮层数据
  9648. * @param {Object} params 参数
  9649. */
  9650. function addHover(params) {
  9651. if ((params.rotation && Math.abs(params.rotation[0]) > 0.0001)
  9652. || (params.position
  9653. && (Math.abs(params.position[0]) > 0.0001
  9654. || Math.abs(params.position[1]) > 0.0001))
  9655. || (params.scale
  9656. && (Math.abs(params.scale[0] - 1) > 0.0001
  9657. || Math.abs(params.scale[1] - 1) > 0.0001))
  9658. ) {
  9659. params.__needTransform = true;
  9660. }
  9661. else {
  9662. params.__needTransform = false;
  9663. }
  9664. _hoverElements.push(params);
  9665. return self;
  9666. }
  9667. /**
  9668. * 删除高亮层数据
  9669. */
  9670. function delHover() {
  9671. _hoverElements = [];
  9672. return self;
  9673. }
  9674. function hasHoverShape() {
  9675. return _hoverElements.length > 0;
  9676. }
  9677. /**
  9678. * 遍历迭代器
  9679. * @param {Function} fun 迭代回调函数,return true终止迭代
  9680. * @param {Object=} option 迭代参数,缺省为仅降序遍历常规形状
  9681. * hover : true 是否迭代高亮层数据
  9682. * normal : 'down' | 'up' | 'free' 是否迭代常规数据,迭代时是否指定及z轴顺序
  9683. */
  9684. function iterShape(fun, option) {
  9685. if (!option) {
  9686. option = {
  9687. hover: false,
  9688. normal: 'down'
  9689. };
  9690. }
  9691. if (option.hover) {
  9692. //高亮层数据遍历
  9693. for (var i = 0, l = _hoverElements.length; i < l; i++) {
  9694. if (fun(_hoverElements[i])) {
  9695. return self;
  9696. }
  9697. }
  9698. }
  9699. var zlist;
  9700. var len;
  9701. if (typeof option.normal != 'undefined') {
  9702. //z轴遍历: 'down' | 'up' | 'free'
  9703. switch (option.normal) {
  9704. case 'down':
  9705. //降序遍历,高层优先
  9706. for (var l = _zElements.length - 1; l >= 0; l--) {
  9707. zlist = _zElements[l];
  9708. if (zlist) {
  9709. len = zlist.length;
  9710. while (len--) {
  9711. if (fun(zlist[len])) {
  9712. return self;
  9713. }
  9714. }
  9715. }
  9716. }
  9717. break;
  9718. case 'up':
  9719. //升序遍历,底层优先
  9720. for (var i = 0, l = _zElements.length; i < l; i++) {
  9721. zlist = _zElements[i];
  9722. if (zlist) {
  9723. len = zlist.length;
  9724. for (var k = 0; k < len; k++) {
  9725. if (fun(zlist[k])) {
  9726. return self;
  9727. }
  9728. }
  9729. }
  9730. }
  9731. break;
  9732. // case 'free':
  9733. default:
  9734. //无序遍历
  9735. for (var i in _elements) {
  9736. if (fun(_elements[i])) {
  9737. return self;
  9738. }
  9739. }
  9740. break;
  9741. }
  9742. }
  9743. return self;
  9744. }
  9745. function getMaxZlevel() {
  9746. return _maxZlevel;
  9747. }
  9748. function getChangedZlevel() {
  9749. return _changedZlevel;
  9750. }
  9751. function clearChangedZlevel() {
  9752. _changedZlevel = {};
  9753. return self;
  9754. }
  9755. function setChangedZlevle(level){
  9756. _changedZlevel[level] = true;
  9757. return self;
  9758. }
  9759. /**
  9760. * 释放
  9761. */
  9762. function dispose() {
  9763. _elements = null;
  9764. _zElements = null;
  9765. _hoverElements = null;
  9766. self = null;
  9767. return;
  9768. }
  9769. self.newShapeId = newShapeId;
  9770. self.add = add;
  9771. self.get = get;
  9772. self.del = del;
  9773. self.addHover = addHover;
  9774. self.delHover = delHover;
  9775. self.hasHoverShape = hasHoverShape;
  9776. self.mod = mod;
  9777. self.drift = drift;
  9778. self.iterShape = iterShape;
  9779. self.getMaxZlevel = getMaxZlevel;
  9780. self.getChangedZlevel = getChangedZlevel;
  9781. self.clearChangedZlevel = clearChangedZlevel;
  9782. self.setChangedZlevle = setChangedZlevle;
  9783. self.dispose = dispose;
  9784. }
  9785. /**
  9786. * 绘图类 (V)
  9787. * @param {HTMLElement} root 绘图区域
  9788. * @param {storage} storage Storage实例
  9789. * @param {Object} shape 图形库
  9790. */
  9791. function Painter(root, storage, shape) {
  9792. var config = require('./config');
  9793. var self = this;
  9794. var _domList = {}; //canvas dom元素
  9795. var _ctxList = {}; //canvas 2D context对象,与domList对应
  9796. var _maxZlevel = 0; //最大zlevel,缓存记录
  9797. var _loadingTimer;
  9798. var _domRoot = document.createElement('div');
  9799. // 避免页面选中的尴尬
  9800. _domRoot.onselectstart = function() {
  9801. return false;
  9802. };
  9803. //宽,缓存记录
  9804. var _width;
  9805. //高,缓存记录
  9806. var _height;
  9807. //retina 屏幕优化
  9808. var _devicePixelRatio = window.devicePixelRatio || 1;
  9809. function _getWidth() {
  9810. var stl = root.currentStyle
  9811. || document.defaultView.getComputedStyle(root);
  9812. return root.clientWidth
  9813. - stl.paddingLeft.replace(/\D/g,'') // 请原谅我这比较粗暴
  9814. - stl.paddingRight.replace(/\D/g,'');
  9815. }
  9816. function _getHeight(){
  9817. var stl = root.currentStyle
  9818. || document.defaultView.getComputedStyle(root);
  9819. return root.clientHeight
  9820. - stl.paddingTop.replace(/\D/g,'') // 请原谅我这比较粗暴
  9821. - stl.paddingBottom.replace(/\D/g,'');
  9822. }
  9823. function _init() {
  9824. _domRoot.innerHTML = '';
  9825. root.innerHTML = '';
  9826. _width = _getWidth();
  9827. _height = _getHeight();
  9828. //没append呢,原谅我这样写,清晰~
  9829. _domRoot.style.position = 'relative';
  9830. _domRoot.style.overflow = 'hidden';
  9831. _domRoot.style.width = _width + 'px';
  9832. _domRoot.style.height = _height + 'px';
  9833. root.appendChild(_domRoot);
  9834. _domList = {};
  9835. _ctxList = {};
  9836. _maxZlevel = storage.getMaxZlevel();
  9837. //创建各层canvas
  9838. //背景
  9839. _domList['bg'] = _createDom('bg','div');
  9840. _domRoot.appendChild(_domList['bg']);
  9841. //实体
  9842. for (var i = 0; i <= _maxZlevel; i++) {
  9843. _domList[i] = _createDom(i,'canvas');
  9844. _domRoot.appendChild(_domList[i]);
  9845. if (G_vmlCanvasManager) {
  9846. G_vmlCanvasManager.initElement(_domList[i]);
  9847. }
  9848. _ctxList[i] = _domList[i].getContext('2d');
  9849. _devicePixelRatio != 1
  9850. && _ctxList[i].scale(_devicePixelRatio, _devicePixelRatio);
  9851. }
  9852. //高亮
  9853. _domList['hover'] = _createDom('hover','canvas');
  9854. _domList['hover'].id = '_zrender_hover_';
  9855. _domRoot.appendChild(_domList['hover']);
  9856. if (G_vmlCanvasManager) {
  9857. G_vmlCanvasManager.initElement(_domList['hover']);
  9858. }
  9859. _ctxList['hover'] = _domList['hover'].getContext('2d');
  9860. _devicePixelRatio != 1
  9861. && _ctxList['hover'].scale(
  9862. _devicePixelRatio, _devicePixelRatio
  9863. );
  9864. }
  9865. /**
  9866. * 检查_maxZlevel是否变大,如是则同步创建需要的Canvas
  9867. */
  9868. function _syncMaxZlevelCanvase(){
  9869. var curMaxZlevel = storage.getMaxZlevel();
  9870. if (_maxZlevel < curMaxZlevel) {
  9871. //实体
  9872. for (var i = _maxZlevel + 1; i <= curMaxZlevel; i++) {
  9873. _domList[i] = _createDom(i,'canvas');
  9874. _domRoot.insertBefore(_domList[i], _domList['hover']);
  9875. if (G_vmlCanvasManager) {
  9876. G_vmlCanvasManager.initElement(_domList[i]);
  9877. }
  9878. _ctxList[i] = _domList[i].getContext('2d');
  9879. _devicePixelRatio != 1
  9880. && _ctxList[i].scale(
  9881. _devicePixelRatio, _devicePixelRatio
  9882. );
  9883. }
  9884. _maxZlevel = curMaxZlevel;
  9885. }
  9886. }
  9887. /**
  9888. * 创建dom
  9889. * @param {string} id dom id 待用
  9890. * @param {string} type : dom type, such as canvas, div etc.
  9891. */
  9892. function _createDom(id, type) {
  9893. var newDom = document.createElement(type);
  9894. //没append呢,请原谅我这样写,清晰~
  9895. newDom.style.position = 'absolute';
  9896. newDom.style.left = 0;
  9897. newDom.style.top = 0;
  9898. newDom.style.width = _width + 'px';
  9899. newDom.style.height = _height + 'px';
  9900. newDom.setAttribute('width', _width * _devicePixelRatio);
  9901. newDom.setAttribute('height', _height * _devicePixelRatio);
  9902. //id不作为索引用,避免可能造成的重名,定义为私有属性
  9903. newDom.setAttribute('data-id', id);
  9904. return newDom;
  9905. }
  9906. /**
  9907. * 刷画图形
  9908. * @param {Object} changedZlevel 需要更新的zlevel索引
  9909. */
  9910. function _brush(changedZlevel) {
  9911. return function(e) {
  9912. if ((changedZlevel.all || changedZlevel[e.zlevel])
  9913. && !e.invisible
  9914. ) {
  9915. var ctx = _ctxList[e.zlevel];
  9916. if (ctx) {
  9917. if (!e.onbrush //没有onbrush
  9918. //有onbrush并且调用执行返回false或undefined则继续粉刷
  9919. || (e.onbrush && !e.onbrush(ctx, e, false))
  9920. ) {
  9921. if (zrender.catchBrushException) {
  9922. try {
  9923. shape.get(e.shape).brush(
  9924. ctx, e, false, update
  9925. );
  9926. }
  9927. catch(error) {
  9928. zrender.log(
  9929. error,
  9930. 'brush error of ' + e.shape,
  9931. e
  9932. );
  9933. }
  9934. }
  9935. else {
  9936. shape.get(e.shape).brush(
  9937. ctx, e, false, update
  9938. );
  9939. }
  9940. }
  9941. }
  9942. else {
  9943. zrender.log(
  9944. 'can not find the specific zlevel canvas!'
  9945. );
  9946. }
  9947. }
  9948. };
  9949. }
  9950. /**
  9951. * 鼠标悬浮刷画
  9952. */
  9953. function _brushHover(e) {
  9954. var ctx = _ctxList['hover'];
  9955. if (!e.onbrush //没有onbrush
  9956. //有onbrush并且调用执行返回false或undefined则继续粉刷
  9957. || (e.onbrush && !e.onbrush(ctx, e, true))
  9958. ) {
  9959. // Retina 优化
  9960. if (zrender.catchBrushException) {
  9961. try {
  9962. shape.get(e.shape).brush(ctx, e, true, update);
  9963. }
  9964. catch(error) {
  9965. zrender.log(
  9966. error, 'hoverBrush error of ' + e.shape, e
  9967. );
  9968. }
  9969. }
  9970. else {
  9971. shape.get(e.shape).brush(ctx, e, true, update);
  9972. }
  9973. }
  9974. }
  9975. /**
  9976. * 首次绘图,创建各种dom和context
  9977. * @param {Function=} callback 绘画结束后的回调函数
  9978. */
  9979. function render(callback) {
  9980. if (isLoading()) {
  9981. hideLoading();
  9982. }
  9983. //检查_maxZlevel是否变大,如是则同步创建需要的Canvas
  9984. _syncMaxZlevelCanvase();
  9985. //升序遍历,shape上的zlevel指定绘画图层的z轴层叠
  9986. storage.iterShape(
  9987. _brush({ all : true }),
  9988. { normal: 'up' }
  9989. );
  9990. //update到最新则清空标志位
  9991. storage.clearChangedZlevel();
  9992. if (typeof callback == 'function') {
  9993. callback();
  9994. }
  9995. return self;
  9996. }
  9997. /**
  9998. * 刷新
  9999. * @param {Function=} callback 刷新结束后的回调函数
  10000. */
  10001. function refresh(callback) {
  10002. //检查_maxZlevel是否变大,如是则同步创建需要的Canvas
  10003. _syncMaxZlevelCanvase();
  10004. //仅更新有修改的canvas
  10005. var changedZlevel = storage.getChangedZlevel();
  10006. //擦除有修改的canvas
  10007. if (changedZlevel.all){
  10008. clear();
  10009. }
  10010. else {
  10011. for (var k in changedZlevel) {
  10012. if (_ctxList[k]) {
  10013. _ctxList[k].clearRect(
  10014. 0, 0,
  10015. _width * _devicePixelRatio,
  10016. _height * _devicePixelRatio
  10017. );
  10018. }
  10019. }
  10020. }
  10021. //重绘内容,升序遍历,shape上的zlevel指定绘画图层的z轴层叠
  10022. storage.iterShape(
  10023. _brush(changedZlevel),
  10024. { normal: 'up'}
  10025. );
  10026. //update到最新则清空标志位
  10027. storage.clearChangedZlevel();
  10028. if (typeof callback == 'function') {
  10029. callback();
  10030. }
  10031. return self;
  10032. }
  10033. /**
  10034. * 视图更新
  10035. * @param {Array} shapeList 需要更新的图形元素列表
  10036. * @param {Function} callback 视图更新后回调函数
  10037. */
  10038. function update(shapeList, callback) {
  10039. var shape;
  10040. for (var i = 0, l = shapeList.length; i < l; i++) {
  10041. shape = shapeList[i];
  10042. storage.mod(shape.id, shape);
  10043. }
  10044. refresh(callback);
  10045. return self;
  10046. }
  10047. /**
  10048. * 清除hover层外所有内容
  10049. */
  10050. function clear() {
  10051. for (var k in _ctxList) {
  10052. if (k == 'hover') {
  10053. continue;
  10054. }
  10055. _ctxList[k].clearRect(
  10056. 0, 0,
  10057. _width * _devicePixelRatio,
  10058. _height * _devicePixelRatio
  10059. );
  10060. }
  10061. return self;
  10062. }
  10063. /**
  10064. * 刷新hover层
  10065. */
  10066. function refreshHover() {
  10067. clearHover();
  10068. storage.iterShape(_brushHover, { hover: true });
  10069. storage.delHover();
  10070. return self;
  10071. }
  10072. /**
  10073. * 清除hover层所有内容
  10074. */
  10075. function clearHover() {
  10076. _ctxList
  10077. && _ctxList['hover']
  10078. && _ctxList['hover'].clearRect(
  10079. 0, 0,
  10080. _width * _devicePixelRatio,
  10081. _height * _devicePixelRatio
  10082. );
  10083. return self;
  10084. }
  10085. /**
  10086. * 显示loading
  10087. * @param {Object} loadingOption 选项,内容见下
  10088. * @param {color} -.backgroundColor 背景颜色
  10089. * @param {Object} -.textStyle 文字样式,同shape/text.style
  10090. * @param {number=} -.progress 进度参数,部分特效有用
  10091. * @param {Object=} -.effectOption 特效参数,部分特效有用
  10092. * @param {string | function} -.effect 特效依赖tool/loadingEffect,
  10093. * 可传入自定义特效function
  10094. */
  10095. function showLoading(loadingOption) {
  10096. var effect = require('./tool/loadingEffect');
  10097. effect.stop(_loadingTimer);
  10098. loadingOption = loadingOption || {};
  10099. loadingOption.effect = loadingOption.effect
  10100. || config.loadingEffect;
  10101. loadingOption.canvasSize = {
  10102. width : _width,
  10103. height : _height
  10104. };
  10105. _loadingTimer = effect.start(
  10106. loadingOption,
  10107. storage.addHover,
  10108. refreshHover
  10109. );
  10110. self.loading = true;
  10111. return self;
  10112. }
  10113. /**
  10114. * loading结束
  10115. * 乱来的,待重写
  10116. */
  10117. function hideLoading() {
  10118. var effect = require('./tool/loadingEffect');
  10119. effect.stop(_loadingTimer);
  10120. clearHover();
  10121. self.loading = false;
  10122. return self;
  10123. }
  10124. /**
  10125. * loading结束判断
  10126. */
  10127. function isLoading() {
  10128. return self.loading;
  10129. }
  10130. /**
  10131. * 获取绘图区域宽度
  10132. */
  10133. function getWidth() {
  10134. return _width;
  10135. }
  10136. /**
  10137. * 获取绘图区域高度
  10138. */
  10139. function getHeight() {
  10140. return _height;
  10141. }
  10142. /**
  10143. * 区域大小变化后重绘
  10144. */
  10145. function resize() {
  10146. var width;
  10147. var height;
  10148. var dom;
  10149. _domRoot.style.display = 'none';
  10150. width = _getWidth();
  10151. height = _getHeight();
  10152. _domRoot.style.display = '';
  10153. //优化没有实际改变的resize
  10154. if (_width != width || height != _height){
  10155. _width = width;
  10156. _height = height;
  10157. _domRoot.style.width = _width + 'px';
  10158. _domRoot.style.height = _height + 'px';
  10159. for (var i in _domList) {
  10160. dom = _domList[i];
  10161. dom.setAttribute('width', _width);
  10162. dom.setAttribute('height', _height);
  10163. dom.style.width = _width + 'px';
  10164. dom.style.height = _height + 'px';
  10165. }
  10166. storage.setChangedZlevle('all');
  10167. refresh();
  10168. }
  10169. return self;
  10170. }
  10171. /**
  10172. * 释放
  10173. */
  10174. function dispose() {
  10175. if (isLoading()) {
  10176. hideLoading();
  10177. }
  10178. root.innerHTML = '';
  10179. root = null;
  10180. storage = null;
  10181. shape = null;
  10182. _domRoot = null;
  10183. _domList = null;
  10184. _ctxList = null;
  10185. self = null;
  10186. return;
  10187. }
  10188. function getDomHover() {
  10189. return _domList['hover'];
  10190. }
  10191. function toDataURL(type, args) {
  10192. if (G_vmlCanvasManager) {
  10193. return null;
  10194. }
  10195. var imageDom = _createDom('image','canvas');
  10196. _domList['bg'].appendChild(imageDom);
  10197. var ctx = imageDom.getContext('2d');
  10198. _devicePixelRatio != 1
  10199. && ctx.scale(_devicePixelRatio, _devicePixelRatio);
  10200. ctx.fillStyle = '#fff';
  10201. ctx.rect(
  10202. 0, 0,
  10203. _width * _devicePixelRatio,
  10204. _height * _devicePixelRatio
  10205. );
  10206. ctx.fill();
  10207. //升序遍历,shape上的zlevel指定绘画图层的z轴层叠
  10208. storage.iterShape(
  10209. function (e) {
  10210. if (!e.invisible) {
  10211. if (!e.onbrush //没有onbrush
  10212. //有onbrush并且调用执行返回false或undefined则继续粉刷
  10213. || (e.onbrush && !e.onbrush(ctx, e, false))
  10214. ) {
  10215. if (zrender.catchBrushException) {
  10216. try {
  10217. shape.get(e.shape).brush(
  10218. ctx, e, false, update
  10219. );
  10220. }
  10221. catch(error) {
  10222. zrender.log(
  10223. error,
  10224. 'brush error of ' + e.shape,
  10225. e
  10226. );
  10227. }
  10228. }
  10229. else {
  10230. shape.get(e.shape).brush(
  10231. ctx, e, false, update
  10232. );
  10233. }
  10234. }
  10235. }
  10236. },
  10237. { normal: 'up' }
  10238. );
  10239. var image = imageDom.toDataURL(type, args);
  10240. ctx = null;
  10241. _domList['bg'].removeChild(imageDom);
  10242. return image;
  10243. }
  10244. self.render = render;
  10245. self.refresh = refresh;
  10246. self.update = update;
  10247. self.clear = clear;
  10248. self.refreshHover = refreshHover;
  10249. self.clearHover = clearHover;
  10250. self.showLoading = showLoading;
  10251. self.hideLoading = hideLoading;
  10252. self.isLoading = isLoading;
  10253. self.getWidth = getWidth;
  10254. self.getHeight = getHeight;
  10255. self.resize = resize;
  10256. self.dispose = dispose;
  10257. self.getDomHover = getDomHover;
  10258. self.toDataURL = toDataURL;
  10259. _init();
  10260. }
  10261. /**
  10262. * 控制类 (C)
  10263. * @param {HTMLElement} root 绘图区域
  10264. * @param {storage} storage Storage实例
  10265. * @param {painter} painter Painter实例
  10266. * @param {Object} shape 图形库
  10267. *
  10268. * 分发事件支持详见config.EVENT
  10269. */
  10270. function Handler(root, storage, painter, shape) {
  10271. var config = require('./config');
  10272. //添加事件分发器特性
  10273. var eventTool = require('./tool/event');
  10274. eventTool.Dispatcher.call(this);
  10275. var self = this;
  10276. //常用函数加速
  10277. var getX = eventTool.getX;
  10278. var getY = eventTool.getY;
  10279. //各种事件标识的私有变量
  10280. var _event; //原生dom事件
  10281. var _hasfound = false; //是否找到hover图形元素
  10282. var _lastHover = null; //最后一个hover图形元素
  10283. var _mouseDownTarget = null;
  10284. var _draggingTarget = null; //当前被拖拽的图形元素
  10285. var _isMouseDown = false;
  10286. var _isDragging = false;
  10287. var _lastTouchMoment;
  10288. var _lastX = 0;
  10289. var _lastY = 0;
  10290. var _mouseX = 0;
  10291. var _mouseY = 0;
  10292. var _domHover = painter.getDomHover();
  10293. /**
  10294. * 初始化,事件绑定,支持的所有事件都由如下原生事件计算得来
  10295. */
  10296. function _init() {
  10297. if (window.addEventListener) {
  10298. window.addEventListener('resize', _resizeHandler);
  10299. root.addEventListener('click', _clickHandler);
  10300. root.addEventListener('mousewheel', _mouseWheelHandler);
  10301. root.addEventListener('DOMMouseScroll', _mouseWheelHandler);
  10302. root.addEventListener('mousemove', _mouseMoveHandler);
  10303. root.addEventListener('mouseout', _mouseOutHandler);
  10304. root.addEventListener('mousedown', _mouseDownHandler);
  10305. root.addEventListener('mouseup', _mouseUpHandler);
  10306. // mobile支持
  10307. root.addEventListener('touchstart', _touchStartHandler);
  10308. root.addEventListener('touchmove', _touchMoveHandler);
  10309. root.addEventListener('touchend', _touchEndHandler);
  10310. }
  10311. else {
  10312. window.attachEvent('onresize', _resizeHandler);
  10313. root.attachEvent('onclick', _clickHandler);
  10314. root.attachEvent('onmousewheel', _mouseWheelHandler);
  10315. root.attachEvent('onmousemove', _mouseMoveHandler);
  10316. root.attachEvent('onmouseout', _mouseOutHandler);
  10317. root.attachEvent('onmousedown', _mouseDownHandler);
  10318. root.attachEvent('onmouseup', _mouseUpHandler);
  10319. }
  10320. }
  10321. /**
  10322. * 窗口大小改变响应函数
  10323. * @param {event} event dom事件对象
  10324. */
  10325. function _resizeHandler(event) {
  10326. _event = event || window.event;
  10327. _lastHover = null;
  10328. _isMouseDown = false;
  10329. //分发config.EVENT.RESIZE事件,global
  10330. self.dispatch(config.EVENT.RESIZE, _event);
  10331. }
  10332. /**
  10333. * 点击事件
  10334. * @param {event} event dom事件对象
  10335. */
  10336. function _clickHandler(event) {
  10337. _event = _zrenderEventFixed(event);
  10338. //分发config.EVENT.CLICK事件
  10339. if (!_lastHover) {
  10340. _dispatchAgency(_lastHover, config.EVENT.CLICK);
  10341. }
  10342. else if (_lastHover && _lastHover.clickable) {
  10343. _dispatchAgency(_lastHover, config.EVENT.CLICK);
  10344. }
  10345. _mouseMoveHandler(_event);
  10346. }
  10347. /**
  10348. * 鼠标滚轮响应函数
  10349. * @param {event} event dom事件对象
  10350. */
  10351. function _mouseWheelHandler(event) {
  10352. _event = _zrenderEventFixed(event);
  10353. //分发config.EVENT.MOUSEWHEEL事件
  10354. _dispatchAgency(_lastHover, config.EVENT.MOUSEWHEEL);
  10355. _mouseMoveHandler(_event);
  10356. }
  10357. /**
  10358. * 鼠标(手指)移动响应函数
  10359. * @param {event} event dom事件对象
  10360. */
  10361. function _mouseMoveHandler(event) {
  10362. if (painter.isLoading()) {
  10363. return;
  10364. }
  10365. _event = _zrenderEventFixed(event);
  10366. _lastX = _mouseX;
  10367. _lastY = _mouseY;
  10368. _mouseX = getX(_event);
  10369. _mouseY = getY(_event);
  10370. // 可能出现config.EVENT.DRAGSTART事件
  10371. // 避免手抖点击误认为拖拽
  10372. //if (_mouseX - _lastX > 1 || _mouseY - _lastY > 1) {
  10373. _dragStartHandler();
  10374. //}
  10375. _hasfound = false;
  10376. storage.iterShape(_findHover, { normal: 'down'});
  10377. //找到的在迭代函数里做了处理,没找到得在迭代完后处理
  10378. if (!_hasfound) {
  10379. //过滤首次拖拽产生的mouseout和dragLeave
  10380. if (!_draggingTarget
  10381. || (_lastHover && _lastHover.id != _draggingTarget.id)
  10382. ) {
  10383. //可能出现config.EVENT.MOUSEOUT事件
  10384. _outShapeHandler();
  10385. //可能出现config.EVENT.DRAGLEAVE事件
  10386. _dragLeaveHandler();
  10387. }
  10388. _lastHover = null;
  10389. storage.delHover();
  10390. painter.clearHover();
  10391. }
  10392. //如果存在拖拽中元素,被拖拽的图形元素最后addHover
  10393. if (_draggingTarget) {
  10394. storage.drift(
  10395. _draggingTarget.id,
  10396. _mouseX - _lastX,
  10397. _mouseY - _lastY
  10398. );
  10399. storage.addHover(_draggingTarget);
  10400. }
  10401. if (_draggingTarget || (_hasfound && _lastHover.draggable)) {
  10402. root.style.cursor = 'move';
  10403. }
  10404. else if (_hasfound && _lastHover.clickable) {
  10405. root.style.cursor = 'pointer';
  10406. }
  10407. else {
  10408. root.style.cursor = 'default';
  10409. }
  10410. //分发config.EVENT.MOUSEMOVE事件
  10411. _dispatchAgency(_lastHover, config.EVENT.MOUSEMOVE);
  10412. if (_draggingTarget || _hasfound || storage.hasHoverShape()) {
  10413. painter.refreshHover();
  10414. }
  10415. }
  10416. /**
  10417. * 鼠标(手指)离开响应函数
  10418. * @param {event} event dom事件对象
  10419. */
  10420. function _mouseOutHandler(event) {
  10421. _event = _zrenderEventFixed(event);
  10422. var element = _event.toElement || _event.relatedTarget;
  10423. if (element != root) {
  10424. while (element && element.nodeType != 9) {
  10425. if (element == root) {
  10426. // 忽略包含在root中的dom引起的mouseOut
  10427. _mouseMoveHandler(event);
  10428. return;
  10429. }
  10430. element = element.parentNode;
  10431. }
  10432. }
  10433. _event.zrenderX = _lastX;
  10434. _event.zrenderY = _lastY;
  10435. root.style.cursor = 'default';
  10436. _isMouseDown = false;
  10437. _outShapeHandler();
  10438. _dropHandler();
  10439. _dragEndHandler();
  10440. if (!painter.isLoading()) {
  10441. painter.refreshHover();
  10442. }
  10443. self.dispatch(config.EVENT.GLOBALOUT, _event);
  10444. }
  10445. /**
  10446. * 鼠标在某个图形元素上移动
  10447. */
  10448. function _overShapeHandler() {
  10449. //分发config.EVENT.MOUSEOVER事件
  10450. _dispatchAgency(_lastHover, config.EVENT.MOUSEOVER);
  10451. }
  10452. /**
  10453. * 鼠标离开某个图形元素
  10454. */
  10455. function _outShapeHandler() {
  10456. //分发config.EVENT.MOUSEOUT事件
  10457. _dispatchAgency(_lastHover, config.EVENT.MOUSEOUT);
  10458. }
  10459. /**
  10460. * 鼠标(手指)按下响应函数
  10461. * @param {event} event dom事件对象
  10462. */
  10463. function _mouseDownHandler(event) {
  10464. _event = _zrenderEventFixed(event);
  10465. _isMouseDown = true;
  10466. //分发config.EVENT.MOUSEDOWN事件
  10467. _mouseDownTarget = _lastHover;
  10468. _dispatchAgency(_lastHover, config.EVENT.MOUSEDOWN);
  10469. }
  10470. /**
  10471. * 鼠标(手指)抬起响应函数
  10472. * @param {event} event dom事件对象
  10473. */
  10474. function _mouseUpHandler(event) {
  10475. _event = _zrenderEventFixed(event);
  10476. root.style.cursor = 'default';
  10477. _isMouseDown = false;
  10478. _mouseDownTarget = null;
  10479. //分发config.EVENT.MOUSEUP事件
  10480. _dispatchAgency(_lastHover, config.EVENT.MOUSEUP);
  10481. _dropHandler();
  10482. _dragEndHandler();
  10483. }
  10484. /**
  10485. * Touch开始响应函数
  10486. * @param {event} event dom事件对象
  10487. */
  10488. function _touchStartHandler(event) {
  10489. //eventTool.stop(event);// 阻止浏览器默认事件,重要
  10490. _event = _zrenderEventFixed(event, true);
  10491. _lastTouchMoment = new Date();
  10492. _mouseDownHandler(_event);
  10493. }
  10494. /**
  10495. * Touch移动响应函数
  10496. * @param {event} event dom事件对象
  10497. */
  10498. function _touchMoveHandler(event) {
  10499. _event = _zrenderEventFixed(event, true);
  10500. _mouseMoveHandler(_event);
  10501. if (_isDragging) {
  10502. eventTool.stop(event);// 阻止浏览器默认事件,重要
  10503. }
  10504. }
  10505. /**
  10506. * Touch结束响应函数
  10507. * @param {event} event dom事件对象
  10508. */
  10509. function _touchEndHandler(event) {
  10510. //eventTool.stop(event);// 阻止浏览器默认事件,重要
  10511. _event = _zrenderEventFixed(event, true);
  10512. _mouseUpHandler(_event);
  10513. painter.clearHover();
  10514. if (new Date() - _lastTouchMoment
  10515. < config.EVENT.touchClickDelay
  10516. ) {
  10517. _lastHover = null;
  10518. _mouseX = _event.zrenderX;
  10519. _mouseY = _event.zrenderY;
  10520. // touch有指尖错觉,四向尝试,让touch上的点击更好触发事件
  10521. storage.iterShape(_findHover, { normal: 'down'});
  10522. if (!_lastHover) {
  10523. _mouseX += 10;
  10524. storage.iterShape(_findHover, { normal: 'down'});
  10525. }
  10526. if (!_lastHover) {
  10527. _mouseX -= 20;
  10528. storage.iterShape(_findHover, { normal: 'down'});
  10529. }
  10530. if (!_lastHover) {
  10531. _mouseX += 10;
  10532. _mouseY += 10;
  10533. storage.iterShape(_findHover, { normal: 'down'});
  10534. }
  10535. if (!_lastHover) {
  10536. _mouseY -= 20;
  10537. storage.iterShape(_findHover, { normal: 'down'});
  10538. }
  10539. if (_lastHover) {
  10540. _event.zrenderX = _mouseX;
  10541. _event.zrenderY = _mouseY;
  10542. }
  10543. _clickHandler(_event);
  10544. }
  10545. }
  10546. /**
  10547. * 拖拽开始
  10548. */
  10549. function _dragStartHandler() {
  10550. if (_isMouseDown
  10551. && _lastHover
  10552. && _lastHover.draggable
  10553. && !_draggingTarget
  10554. && _mouseDownTarget == _lastHover
  10555. ) {
  10556. _draggingTarget = _lastHover;
  10557. _isDragging = true;
  10558. _draggingTarget.invisible = true;
  10559. storage.mod(_draggingTarget.id,_draggingTarget);
  10560. //分发config.EVENT.DRAGSTART事件
  10561. _dispatchAgency(
  10562. _draggingTarget,
  10563. config.EVENT.DRAGSTART
  10564. );
  10565. painter.refresh();
  10566. }
  10567. }
  10568. /**
  10569. * 拖拽进入目标元素
  10570. */
  10571. function _dragEnterHandler() {
  10572. if (_draggingTarget) {
  10573. //分发config.EVENT.DRAGENTER事件
  10574. _dispatchAgency(
  10575. _lastHover,
  10576. config.EVENT.DRAGENTER,
  10577. _draggingTarget
  10578. );
  10579. }
  10580. }
  10581. /**
  10582. * 拖拽在目标元素上移动
  10583. */
  10584. function _dragOverHandler() {
  10585. if (_draggingTarget) {
  10586. //分发config.EVENT.DRAGOVER事件
  10587. _dispatchAgency(
  10588. _lastHover,
  10589. config.EVENT.DRAGOVER,
  10590. _draggingTarget
  10591. );
  10592. }
  10593. }
  10594. /**
  10595. * 拖拽离开目标元素
  10596. */
  10597. function _dragLeaveHandler() {
  10598. if (_draggingTarget) {
  10599. //分发config.EVENT.DRAGLEAVE事件
  10600. _dispatchAgency(
  10601. _lastHover,
  10602. config.EVENT.DRAGLEAVE,
  10603. _draggingTarget
  10604. );
  10605. }
  10606. }
  10607. /**
  10608. * 拖拽在目标元素上完成
  10609. */
  10610. function _dropHandler() {
  10611. if (_draggingTarget) {
  10612. _draggingTarget.invisible = false;
  10613. storage.mod(_draggingTarget.id,_draggingTarget);
  10614. painter.refresh();
  10615. //分发config.EVENT.DROP事件
  10616. _dispatchAgency(
  10617. _lastHover,
  10618. config.EVENT.DROP,
  10619. _draggingTarget
  10620. );
  10621. }
  10622. }
  10623. /**
  10624. * 拖拽结束
  10625. */
  10626. function _dragEndHandler() {
  10627. if (_draggingTarget) {
  10628. //分发config.EVENT.DRAGEND事件
  10629. _dispatchAgency(
  10630. _draggingTarget,
  10631. config.EVENT.DRAGEND
  10632. );
  10633. _lastHover = null;
  10634. }
  10635. _isDragging = false;
  10636. _draggingTarget = null;
  10637. }
  10638. /**
  10639. * 事件分发代理
  10640. * @param {Object} targetShape 目标图形元素
  10641. * @param {string} eventName 事件名称
  10642. * @param {Object=} draggedShape 拖拽事件特有,当前被拖拽图形元素
  10643. */
  10644. function _dispatchAgency(targetShape, eventName, draggedShape) {
  10645. var eventHandler = 'on' + eventName;
  10646. var eventPacket = {
  10647. type : eventName,
  10648. event : _event,
  10649. target : targetShape
  10650. };
  10651. if (draggedShape) {
  10652. eventPacket.dragged = draggedShape;
  10653. }
  10654. if (targetShape) {
  10655. //“不存在shape级事件”或“存在shape级事件但事件回调返回非true”
  10656. if (!targetShape[eventHandler]
  10657. || !targetShape[eventHandler](eventPacket)
  10658. ) {
  10659. self.dispatch(
  10660. eventName,
  10661. _event,
  10662. eventPacket
  10663. );
  10664. }
  10665. }
  10666. else if (!draggedShape) {
  10667. //无hover目标,无拖拽对象,原生事件分发
  10668. self.dispatch(eventName, _event);
  10669. }
  10670. }
  10671. /**
  10672. * 迭代函数,查找hover到的图形元素并即时做些事件分发
  10673. * @param {Object} e 图形元素
  10674. */
  10675. function _findHover(e) {
  10676. if (_draggingTarget && _draggingTarget.id == e.id) {
  10677. //迭代到当前拖拽的图形上
  10678. return false;
  10679. }
  10680. //打酱油的路过,啥都不响应的shape~
  10681. if (e.__silent) {
  10682. return false;
  10683. }
  10684. var shapeInstance = shape.get(e.shape);
  10685. if (shapeInstance.isCover(e, _mouseX, _mouseY)) {
  10686. if (e.hoverable) {
  10687. storage.addHover(e);
  10688. }
  10689. if (_lastHover != e) {
  10690. _outShapeHandler();
  10691. //可能出现config.EVENT.DRAGLEAVE事件
  10692. _dragLeaveHandler();
  10693. _lastHover = e;
  10694. //可能出现config.EVENT.DRAGENTER事件
  10695. _dragEnterHandler();
  10696. }
  10697. _overShapeHandler();
  10698. //可能出现config.EVENT.DRAGOVER
  10699. _dragOverHandler();
  10700. _hasfound = true;
  10701. return true; //找到则中断迭代查找
  10702. }
  10703. return false;
  10704. }
  10705. // 如果存在第三方嵌入的一些dom触发的事件,或touch事件,需要转换一下事件坐标
  10706. function _zrenderEventFixed(event, isTouch) {
  10707. if (!isTouch) {
  10708. _event = event || window.event;
  10709. // 进入对象优先~
  10710. var target = _event.toElement
  10711. || _event.relatedTarget
  10712. || _event.srcElement
  10713. || _event.target;
  10714. if (target && target != _domHover) {
  10715. _event.zrenderX = (typeof _event.offsetX != 'undefined'
  10716. ? _event.offsetX
  10717. : _event.layerX)
  10718. + target.offsetLeft;
  10719. _event.zrenderY = (typeof _event.offsetY != 'undefined'
  10720. ? _event.offsetY
  10721. : _event.layerY)
  10722. + target.offsetTop;
  10723. }
  10724. }
  10725. else {
  10726. _event = event;
  10727. var touch = _event.type != 'touchend'
  10728. ? _event.targetTouches[0]
  10729. : _event.changedTouches[0];
  10730. if (touch) {
  10731. // touch事件坐标是全屏的~
  10732. _event.zrenderX = touch.clientX - root.offsetLeft
  10733. + document.body.scrollLeft;
  10734. _event.zrenderY = touch.clientY - root.offsetTop
  10735. + document.body.scrollTop;
  10736. }
  10737. }
  10738. return _event;
  10739. }
  10740. /**
  10741. * 自定义事件绑定
  10742. * @param {string} eventName 事件名称,resize,hover,drag,etc~
  10743. * @param {Function} handler 响应函数
  10744. */
  10745. function on(eventName, handler) {
  10746. self.bind(eventName, handler);
  10747. return self;
  10748. }
  10749. /**
  10750. * 自定义事件解绑
  10751. * @param {string} event 事件名称,resize,hover,drag,etc~
  10752. * @param {Function} handler 响应函数
  10753. */
  10754. function un(eventName, handler) {
  10755. self.unbind(eventName, handler);
  10756. return self;
  10757. }
  10758. /**
  10759. * 比较不可控,先不开放了~
  10760. * 触发原生dom事件,用于自定义元素在顶层截获事件后触发zrender行为
  10761. * @param {string} event 事件名称,resize,hover,drag,etc~
  10762. * @param {event=} event event dom事件对象
  10763. function trigger(eventName, event) {
  10764. switch (eventName) {
  10765. case config.EVENT.RESIZE :
  10766. _resizeHandler(event);
  10767. break;
  10768. case config.EVENT.CLICK :
  10769. _clickHandler(event);
  10770. break;
  10771. case config.EVENT.MOUSEWHEEL :
  10772. _mouseWheelHandler(event);
  10773. break;
  10774. case config.EVENT.MOUSEMOVE :
  10775. _mouseMoveHandler(event);
  10776. break;
  10777. case config.EVENT.MOUSEDOWN :
  10778. _mouseDownHandler(event);
  10779. break;
  10780. case config.EVENT.MOUSEUP :
  10781. _mouseUpHandleru(event);
  10782. break;
  10783. }
  10784. }
  10785. */
  10786. /**
  10787. * 释放
  10788. */
  10789. function dispose() {
  10790. if (window.removeEventListener) {
  10791. window.removeEventListener('resize', _resizeHandler);
  10792. root.removeEventListener('click', _clickHandler);
  10793. root.removeEventListener('mousewheel', _mouseWheelHandler);
  10794. root.removeEventListener(
  10795. 'DOMMouseScroll', _mouseWheelHandler
  10796. );
  10797. root.removeEventListener('mousemove', _mouseMoveHandler);
  10798. root.removeEventListener('mouseout', _mouseOutHandler);
  10799. root.removeEventListener('mousedown', _mouseDownHandler);
  10800. root.removeEventListener('mouseup', _mouseUpHandler);
  10801. // mobile支持
  10802. root.removeEventListener('touchstart', _touchStartHandler);
  10803. root.removeEventListener('touchmove', _touchMoveHandler);
  10804. root.removeEventListener('touchend', _touchEndHandler);
  10805. }
  10806. else {
  10807. window.detachEvent('onresize', _resizeHandler);
  10808. root.detachEvent('onclick', _clickHandler);
  10809. root.detachEvent('onmousewheel', _mouseWheelHandler);
  10810. root.detachEvent('onmousemove', _mouseMoveHandler);
  10811. root.detachEvent('onmouseout', _mouseOutHandler);
  10812. root.detachEvent('onmousedown', _mouseDownHandler);
  10813. root.detachEvent('onmouseup', _mouseUpHandler);
  10814. }
  10815. root = null;
  10816. _domHover = null;
  10817. storage = null;
  10818. painter = null;
  10819. shape = null;
  10820. un();
  10821. self = null;
  10822. return;
  10823. }
  10824. self.on = on;
  10825. self.un = un;
  10826. // self.trigger = trigger;
  10827. self.dispose = dispose;
  10828. _init();
  10829. }
  10830. return self;
  10831. }
  10832. );
  10833. define('zrender', ['zrender/zrender'], function (main) { return main; });
  10834. /**
  10835. * echarts扩展zrender shape
  10836. *
  10837. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  10838. *
  10839. * shape类:icon
  10840. * 可配图形属性:
  10841. {
  10842. // 基础属性
  10843. shape : 'icon', // 必须,shape类标识,需要显式指定
  10844. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  10845. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  10846. invisible : {boolean}, // 默认为false,是否可见
  10847. // 样式属性,默认状态样式样式属性
  10848. style : {
  10849. x : {number}, // 必须,左上角横坐标
  10850. y : {number}, // 必须,左上角纵坐标
  10851. width : {number}, // 必须,宽度
  10852. height : {number}, // 必须,高度
  10853. iconType : {string}, // 必须,icon类型
  10854. brushType : {string}, // 默认为fill,绘画方式
  10855. // fill(填充) | stroke(描边) | both(填充+描边)
  10856. color : {color}, // 默认为'#000',填充颜色,支持rgba
  10857. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  10858. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  10859. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  10860. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  10861. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  10862. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  10863. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  10864. text : {string}, // 默认为null,附加文本
  10865. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  10866. textPosition : {string}, // 默认为top,附加文本位置。
  10867. // inside | left | right | top | bottom
  10868. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  10869. // start | end | left | right | center
  10870. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  10871. // top | bottom | middle |
  10872. // alphabetic | hanging | ideographic
  10873. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  10874. // 'inside' ? '#fff' : color
  10875. },
  10876. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  10877. highlightStyle : {
  10878. // 同style
  10879. }
  10880. // 交互属性,详见shape.Base
  10881. // 事件属性,详见shape.Base
  10882. }
  10883. 例子:
  10884. {
  10885. shape : 'icon',
  10886. id : '123456',
  10887. zlevel : 1,
  10888. style : {
  10889. x : 200,
  10890. y : 100,
  10891. width : 150,
  10892. height : 50,
  10893. color : '#eee',
  10894. text : 'Baidu'
  10895. },
  10896. myName : 'kener', // 可自带任何有效自定义属性
  10897. clickable : true,
  10898. onClick : function(eventPacket) {
  10899. alert(eventPacket.target.myName);
  10900. }
  10901. }
  10902. */
  10903. define(
  10904. 'echarts/util/shape/icon',['require','zrender/tool/matrix','zrender/shape','zrender/shape/base','zrender/shape'],function(require) {
  10905. var matrix = require('zrender/tool/matrix');
  10906. function Icon() {
  10907. this.type = 'icon';
  10908. this._iconLibrary = {
  10909. mark : _iconMark,
  10910. markUndo : _iconMarkUndo,
  10911. markClear : _iconMarkClear,
  10912. dataZoom : _iconDataZoom,
  10913. dataZoomReset : _iconDataZoomReset,
  10914. restore : _iconRestore,
  10915. lineChart : _iconLineChart,
  10916. barChart : _iconBarChart,
  10917. dataView : _iconDataView,
  10918. saveAsImage : _iconSave,
  10919. cross : _iconCross,
  10920. circle : _iconCircle,
  10921. rectangle : _iconRectangle,
  10922. triangle : _iconTriangle,
  10923. diamond : _iconDiamond,
  10924. arrow : _iconArrow,
  10925. star : _iconStar
  10926. };
  10927. }
  10928. function _iconMark(ctx, style) {
  10929. var dx = style.width / 16;
  10930. var dy = style.height / 16;
  10931. ctx.moveTo(style.x, style.y + style.height);
  10932. ctx.lineTo(style.x + 5 * dx, style.y + 14 * dy);
  10933. ctx.lineTo(style.x + style.width, style.y + 3 * dy);
  10934. ctx.lineTo(style.x + 13 * dx, style.y);
  10935. ctx.lineTo(style.x + 2 * dx, style.y + 11 * dy);
  10936. ctx.lineTo(style.x, style.y + style.height);
  10937. ctx.moveTo(style.x + 6 * dx, style.y + 10 * dy);
  10938. ctx.lineTo(style.x + 14 * dx, style.y + 2 * dy);
  10939. ctx.moveTo(style.x + 10 * dx, style.y + 13 * dy);
  10940. ctx.lineTo(style.x + style.width, style.y + 13 * dy);
  10941. ctx.moveTo(style.x + 13 * dx, style.y + 10 * dy);
  10942. ctx.lineTo(style.x + 13 * dx, style.y + style.height);
  10943. }
  10944. function _iconMarkUndo(ctx, style) {
  10945. var dx = style.width / 16;
  10946. var dy = style.height / 16;
  10947. ctx.moveTo(style.x, style.y + style.height);
  10948. ctx.lineTo(style.x + 5 * dx, style.y + 14 * dy);
  10949. ctx.lineTo(style.x + style.width, style.y + 3 * dy);
  10950. ctx.lineTo(style.x + 13 * dx, style.y);
  10951. ctx.lineTo(style.x + 2 * dx, style.y + 11 * dy);
  10952. ctx.lineTo(style.x, style.y + style.height);
  10953. ctx.moveTo(style.x + 6 * dx, style.y + 10 * dy);
  10954. ctx.lineTo(style.x + 14 * dx, style.y + 2 * dy);
  10955. ctx.moveTo(style.x + 10 * dx, style.y + 13 * dy);
  10956. ctx.lineTo(style.x + style.width, style.y + 13 * dy);
  10957. }
  10958. function _iconMarkClear(ctx, style) {
  10959. var dx = style.width / 16;
  10960. var dy = style.height / 16;
  10961. ctx.moveTo(style.x + 4 * dx, style.y + 15 * dy);
  10962. ctx.lineTo(style.x + 9 * dx, style.y + 13 * dy);
  10963. ctx.lineTo(style.x + 14 * dx, style.y + 8 * dy);
  10964. ctx.lineTo(style.x + 11 * dx, style.y + 5 * dy);
  10965. ctx.lineTo(style.x + 6 * dx, style.y + 10 * dy);
  10966. ctx.lineTo(style.x + 4 * dx, style.y + 15 * dy);
  10967. ctx.moveTo(style.x + 5 * dx, style.y);
  10968. ctx.lineTo(style.x + 11 * dx, style.y);
  10969. ctx.moveTo(style.x + 5 * dx, style.y + dy);
  10970. ctx.lineTo(style.x + 11 * dx, style.y + dy);
  10971. ctx.moveTo(style.x, style.y + 2 * dy);
  10972. ctx.lineTo(style.x + style.width, style.y + 2 * dy);
  10973. ctx.moveTo(style.x, style.y + 5 * dy);
  10974. ctx.lineTo(style.x + 3 * dx, style.y + style.height);
  10975. ctx.lineTo(style.x + 13 * dx, style.y + style.height);
  10976. ctx.lineTo(style.x + style.width, style.y + 5 * dy);
  10977. }
  10978. function _iconDataZoom(ctx, style) {
  10979. var dx = style.width / 16;
  10980. var dy = style.height / 16;
  10981. ctx.moveTo(style.x, style.y + 3 * dy);
  10982. ctx.lineTo(style.x + 6 * dx, style.y + 3 * dy);
  10983. ctx.moveTo(style.x + 3 * dx, style.y);
  10984. ctx.lineTo(style.x + 3 * dx, style.y + 6 * dy);
  10985. ctx.moveTo(style.x + 3 * dx, style.y + 8 * dy);
  10986. ctx.lineTo(style.x + 3 * dx, style.y + style.height);
  10987. ctx.lineTo(style.x + style.width, style.y + style.height);
  10988. ctx.lineTo(style.x + style.width, style.y + 3 * dy);
  10989. ctx.lineTo(style.x + 8 * dx, style.y + 3 * dy);
  10990. ctx.moveTo(style.x, style.y); // 避免closePath
  10991. ctx.lineTo(style.x, style.y); // 避免closePath
  10992. }
  10993. function _iconDataZoomReset(ctx, style) {
  10994. var dx = style.width / 16;
  10995. var dy = style.height / 16;
  10996. ctx.moveTo(style.x + 6 * dx, style.y);
  10997. ctx.lineTo(style.x + 2 * dx, style.y + 3 * dy);
  10998. ctx.lineTo(style.x + 6 * dx, style.y + 6 * dy);
  10999. ctx.moveTo(style.x + 2 * dx, style.y + 3 * dy);
  11000. ctx.lineTo(style.x + 14 * dx, style.y + 3 * dy);
  11001. ctx.lineTo(style.x + 14 * dx, style.y + 11 * dy);
  11002. ctx.moveTo(style.x + 2 * dx, style.y + 5 * dy);
  11003. ctx.lineTo(style.x + 2 * dx, style.y + 13 * dy);
  11004. ctx.lineTo(style.x + 14 * dx, style.y + 13 * dy);
  11005. ctx.moveTo(style.x + 10 * dx, style.y + 10 * dy);
  11006. ctx.lineTo(style.x + 14 * dx, style.y + 13 * dy);
  11007. ctx.lineTo(style.x + 10 * dx, style.y + style.height);
  11008. ctx.moveTo(style.x, style.y); // 避免closePath
  11009. ctx.lineTo(style.x, style.y); // 避免closePath
  11010. }
  11011. function _iconRestore(ctx, style) {
  11012. var dx = style.width / 16;
  11013. var dy = style.height / 16;
  11014. var r = style.width / 2;
  11015. ctx.lineWidth = 1.5;
  11016. ctx.arc(style.x + r, style.y + r, r - dx, 0, Math.PI * 2 / 3);
  11017. ctx.moveTo(style.x + 3 * dx, style.y + style.height);
  11018. ctx.lineTo(style.x + 0 * dx, style.y + 12 * dy);
  11019. ctx.lineTo(style.x + 5 * dx, style.y + 11 * dy);
  11020. ctx.moveTo(style.x, style.y + 8 * dy);
  11021. ctx.arc(style.x + r, style.y + r, r - dx, Math.PI, Math.PI * 5 / 3);
  11022. ctx.moveTo(style.x + 13 * dx, style.y);
  11023. ctx.lineTo(style.x + style.width, style.y + 4 * dy);
  11024. ctx.lineTo(style.x + 11 * dx, style.y + 5 * dy);
  11025. ctx.moveTo(style.x, style.y); // 避免closePath
  11026. ctx.lineTo(style.x, style.y); // 避免closePath
  11027. }
  11028. function _iconLineChart(ctx, style) {
  11029. var dx = style.width / 16;
  11030. var dy = style.height / 16;
  11031. ctx.moveTo(style.x, style.y);
  11032. ctx.lineTo(style.x, style.y + style.height);
  11033. ctx.lineTo(style.x + style.width, style.y + style.height);
  11034. ctx.moveTo(style.x + 2 * dx, style.y + 14 * dy);
  11035. ctx.lineTo(style.x + 7 * dx, style.y + 6 * dy);
  11036. ctx.lineTo(style.x + 11 * dx, style.y + 11 * dy);
  11037. ctx.lineTo(style.x + 15 * dx, style.y + 2 * dy);
  11038. ctx.moveTo(style.x, style.y); // 避免closePath
  11039. ctx.lineTo(style.x, style.y); // 避免closePath
  11040. }
  11041. function _iconBarChart(ctx, style) {
  11042. var dx = style.width / 16;
  11043. var dy = style.height / 16;
  11044. ctx.moveTo(style.x, style.y);
  11045. ctx.lineTo(style.x, style.y + style.height);
  11046. ctx.lineTo(style.x + style.width, style.y + style.height);
  11047. ctx.moveTo(style.x + 3 * dx, style.y + 14 * dy);
  11048. ctx.lineTo(style.x + 3 * dx, style.y + 6 * dy);
  11049. ctx.lineTo(style.x + 4 * dx, style.y + 6 * dy);
  11050. ctx.lineTo(style.x + 4 * dx, style.y + 14 * dy);
  11051. ctx.moveTo(style.x + 7 * dx, style.y + 14 * dy);
  11052. ctx.lineTo(style.x + 7 * dx, style.y + 2 * dy);
  11053. ctx.lineTo(style.x + 8 * dx, style.y + 2 * dy);
  11054. ctx.lineTo(style.x + 8 * dx, style.y + 14 * dy);
  11055. ctx.moveTo(style.x + 11 * dx, style.y + 14 * dy);
  11056. ctx.lineTo(style.x + 11 * dx, style.y + 9 * dy);
  11057. ctx.lineTo(style.x + 12 * dx, style.y + 9 * dy);
  11058. ctx.lineTo(style.x + 12 * dx, style.y + 14 * dy);
  11059. }
  11060. function _iconDataView(ctx, style) {
  11061. var dx = style.width / 16;
  11062. ctx.moveTo(style.x + dx, style.y);
  11063. ctx.lineTo(style.x + dx, style.y + style.height);
  11064. ctx.lineTo(style.x + 15 * dx, style.y + style.height);
  11065. ctx.lineTo(style.x + 15 * dx, style.y);
  11066. ctx.lineTo(style.x + dx, style.y);
  11067. ctx.moveTo(style.x + 3 * dx, style.y + 3 * dx);
  11068. ctx.lineTo(style.x + 13 * dx, style.y + 3 * dx);
  11069. ctx.moveTo(style.x + 3 * dx, style.y + 6 * dx);
  11070. ctx.lineTo(style.x + 13 * dx, style.y + 6 * dx);
  11071. ctx.moveTo(style.x + 3 * dx, style.y + 9 * dx);
  11072. ctx.lineTo(style.x + 13 * dx, style.y + 9 * dx);
  11073. ctx.moveTo(style.x + 3 * dx, style.y + 12 * dx);
  11074. ctx.lineTo(style.x + 9 * dx, style.y + 12 * dx);
  11075. }
  11076. function _iconSave(ctx, style) {
  11077. var dx = style.width / 16;
  11078. var dy = style.height / 16;
  11079. ctx.moveTo(style.x, style.y);
  11080. ctx.lineTo(style.x, style.y + style.height);
  11081. ctx.lineTo(style.x + style.width, style.y + style.height);
  11082. ctx.lineTo(style.x + style.width, style.y);
  11083. ctx.lineTo(style.x, style.y);
  11084. ctx.moveTo(style.x + 4 * dx, style.y);
  11085. ctx.lineTo(style.x + 4 * dx, style.y + 8 * dy);
  11086. ctx.lineTo(style.x + 12 * dx, style.y + 8 * dy);
  11087. ctx.lineTo(style.x + 12 * dx, style.y);
  11088. ctx.moveTo(style.x + 6 * dx, style.y + 11 * dy);
  11089. ctx.lineTo(style.x + 6 * dx, style.y + 13 * dy);
  11090. ctx.lineTo(style.x + 10 * dx, style.y + 13 * dy);
  11091. ctx.lineTo(style.x + 10 * dx, style.y + 11 * dy);
  11092. ctx.lineTo(style.x + 6 * dx, style.y + 11 * dy);
  11093. ctx.moveTo(style.x, style.y); // 避免closePath
  11094. ctx.lineTo(style.x, style.y); // 避免closePath
  11095. }
  11096. function _iconCross(ctx, style) {
  11097. var x = style.x;
  11098. var y = style.y;
  11099. var width = style.width;
  11100. var height = style.height;
  11101. ctx.moveTo(x, y + height / 2);
  11102. ctx.lineTo(x + width, y + height / 2);
  11103. ctx.moveTo(x + width / 2, y);
  11104. ctx.lineTo(x + width / 2, y + height);
  11105. }
  11106. function _iconCircle(ctx, style) {
  11107. var width = style.width / 2;
  11108. var height = style.height / 2;
  11109. ctx.arc(
  11110. style.x + width,
  11111. style.y + height,
  11112. Math.min(width, height),
  11113. 0,
  11114. Math.PI * 2
  11115. );
  11116. }
  11117. function _iconRectangle(ctx, style) {
  11118. ctx.rect(style.x, style.y, style.width, style.height);
  11119. }
  11120. function _iconTriangle(ctx, style) {
  11121. var width = style.width / 2;
  11122. var height = style.height / 2;
  11123. var x = style.x + width;
  11124. var y = style.y + height;
  11125. var symbolSize = Math.min(width, height);
  11126. ctx.moveTo(x, y - symbolSize);
  11127. ctx.lineTo(x + symbolSize, y + symbolSize);
  11128. ctx.lineTo(x - symbolSize, y + symbolSize);
  11129. ctx.lineTo(x, y - symbolSize);
  11130. }
  11131. function _iconDiamond(ctx, style) {
  11132. var width = style.width / 2;
  11133. var height = style.height / 2;
  11134. var x = style.x + width;
  11135. var y = style.y + height;
  11136. var symbolSize = Math.min(width, height);
  11137. ctx.moveTo(x, y - symbolSize);
  11138. ctx.lineTo(x + symbolSize, y);
  11139. ctx.lineTo(x, y + symbolSize);
  11140. ctx.lineTo(x - symbolSize, y);
  11141. ctx.lineTo(x, y - symbolSize);
  11142. }
  11143. function _iconArrow(ctx, style) {
  11144. var x = style.x;
  11145. var y = style.y;
  11146. var dx = style.width / 16;
  11147. ctx.moveTo(x + 8 * dx, y);
  11148. ctx.lineTo(x + dx, y + style.height);
  11149. ctx.lineTo(x + 8 * dx, y + style.height / 4 * 3);
  11150. ctx.lineTo(x + 15 * dx, y + style.height);
  11151. ctx.lineTo(x + 8 * dx, y);
  11152. }
  11153. function _iconStar(ctx, style) {
  11154. var width = style.width / 2;
  11155. var height = style.height / 2;
  11156. var star = require('zrender/shape').get('star');
  11157. star.buildPath(ctx, {
  11158. x : style.x + width,
  11159. y : style.y + height,
  11160. r : Math.min(width, height),
  11161. n : style.n || 5
  11162. });
  11163. }
  11164. Icon.prototype = {
  11165. /**
  11166. * 创建矩形路径
  11167. * @param {Context2D} ctx Canvas 2D上下文
  11168. * @param {Object} style 样式
  11169. */
  11170. buildPath : function(ctx, style) {
  11171. if (this._iconLibrary[style.iconType]) {
  11172. this._iconLibrary[style.iconType](ctx, style);
  11173. }
  11174. else {
  11175. ctx.moveTo(style.x, style.y);
  11176. ctx.lineTo(style.x + style.width, style.y);
  11177. ctx.lineTo(style.x + style.width, style.y + style.height);
  11178. ctx.lineTo(style.x, style.y + style.height);
  11179. ctx.lineTo(style.x, style.y);
  11180. }
  11181. return;
  11182. },
  11183. /**
  11184. * 返回矩形区域,用于局部刷新和文字定位
  11185. * @param {Object} style
  11186. */
  11187. getRect : function(style) {
  11188. return {
  11189. x : Math.round(style.x),
  11190. y : Math.round(style.y),
  11191. width : style.width,
  11192. height : style.height
  11193. };
  11194. },
  11195. isCover : function(e, x, y) {
  11196. //对鼠标的坐标也做相同的变换
  11197. if(e.__needTransform && e._transform){
  11198. var inverseMatrix = [];
  11199. matrix.invert(inverseMatrix, e._transform);
  11200. var originPos = [x, y];
  11201. matrix.mulVector(originPos, inverseMatrix, [x, y, 1]);
  11202. if (x == originPos[0] && y == originPos[1]) {
  11203. // 避免外部修改导致的__needTransform不准确
  11204. if (Math.abs(e.rotation[0]) > 0.0001
  11205. || Math.abs(e.position[0]) > 0.0001
  11206. || Math.abs(e.position[1]) > 0.0001
  11207. || Math.abs(e.scale[0] - 1) > 0.0001
  11208. || Math.abs(e.scale[1] - 1) > 0.0001
  11209. ) {
  11210. e.__needTransform = true;
  11211. } else {
  11212. e.__needTransform = false;
  11213. }
  11214. }
  11215. x = originPos[0];
  11216. y = originPos[1];
  11217. }
  11218. // 快速预判并保留判断矩形
  11219. var rect;
  11220. if (e.style.__rect) {
  11221. rect = e.style.__rect;
  11222. }
  11223. else {
  11224. rect = this.getRect(e.style);
  11225. e.style.__rect = rect;
  11226. }
  11227. // 提高交互体验,包围盒四向扩大5px
  11228. var delta = 5;
  11229. if (x >= rect.x - delta
  11230. && x <= (rect.x + rect.width + 2 * delta)
  11231. && y >= rect.y - delta
  11232. && y <= (rect.y + rect.height + 2 * delta)
  11233. ) {
  11234. // 矩形内
  11235. return true;
  11236. }
  11237. else {
  11238. return false;
  11239. }
  11240. },
  11241. define : function(iconType, pathMethod) {
  11242. this._iconLibrary[iconType] = pathMethod;
  11243. },
  11244. get : function(iconType) {
  11245. return this._iconLibrary[iconType];
  11246. }
  11247. };
  11248. require('zrender/shape/base').derive(Icon);
  11249. require('zrender/shape').define('icon', new Icon());
  11250. return Icon;
  11251. }
  11252. );
  11253. /**
  11254. * echart图表库
  11255. *
  11256. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  11257. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  11258. */
  11259. define('echarts/chart',[],function(/*require*/) { //chart
  11260. var self = {};
  11261. var _chartLibrary = {}; //echart图表库
  11262. /**
  11263. * 定义图形实现
  11264. * @param {Object} name
  11265. * @param {Object} clazz 图形实现
  11266. */
  11267. self.define = function(name, clazz) {
  11268. _chartLibrary[name] = clazz;
  11269. return self;
  11270. };
  11271. /**
  11272. * 获取图形实现
  11273. * @param {Object} name
  11274. */
  11275. self.get = function(name) {
  11276. return _chartLibrary[name];
  11277. };
  11278. return self;
  11279. });
  11280. /**
  11281. * echarts组件基类
  11282. *
  11283. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  11284. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  11285. *
  11286. */
  11287. define('echarts/component/base',['require','../config','zrender/tool/util'],function(require) {
  11288. function Base(zr){
  11289. var ecConfig = require('../config');
  11290. var zrUtil = require('zrender/tool/util');
  11291. var self = this;
  11292. self.zr =zr;
  11293. self.shapeList = [];
  11294. /**
  11295. * 获取zlevel基数配置
  11296. * @param {Object} contentType
  11297. */
  11298. function getZlevelBase(contentType) {
  11299. contentType = contentType || self.type + '';
  11300. switch (contentType) {
  11301. case ecConfig.COMPONENT_TYPE_GRID :
  11302. case ecConfig.COMPONENT_TYPE_AXIS_CATEGORY :
  11303. case ecConfig.COMPONENT_TYPE_AXIS_VALUE :
  11304. return 0;
  11305. case ecConfig.CHART_TYPE_LINE :
  11306. case ecConfig.CHART_TYPE_BAR :
  11307. case ecConfig.CHART_TYPE_SCATTER :
  11308. case ecConfig.CHART_TYPE_PIE :
  11309. case ecConfig.CHART_TYPE_RADAR :
  11310. case ecConfig.CHART_TYPE_MAP :
  11311. case ecConfig.CHART_TYPE_K :
  11312. case ecConfig.CHART_TYPE_CHORD:
  11313. return 2;
  11314. case ecConfig.COMPONENT_TYPE_LEGEND :
  11315. case ecConfig.COMPONENT_TYPE_DATARANGE:
  11316. case ecConfig.COMPONENT_TYPE_DATAZOOM :
  11317. return 4;
  11318. case ecConfig.CHART_TYPE_ISLAND :
  11319. return 5;
  11320. case ecConfig.COMPONENT_TYPE_TOOLBOX :
  11321. case ecConfig.COMPONENT_TYPE_TITLE :
  11322. return 6;
  11323. case ecConfig.COMPONENT_TYPE_TOOLTIP :
  11324. return 7;
  11325. default :
  11326. return 0;
  11327. }
  11328. }
  11329. /**
  11330. * 参数修正&默认值赋值
  11331. * @param {Object} opt 参数
  11332. *
  11333. * @return {Object} 修正后的参数
  11334. */
  11335. function reformOption(opt) {
  11336. return zrUtil.merge(
  11337. opt || {},
  11338. ecConfig[self.type] || {},
  11339. {
  11340. 'overwrite': false,
  11341. 'recursive': true
  11342. }
  11343. );
  11344. }
  11345. /**
  11346. * css类属性数组补全,如padding,margin等~
  11347. */
  11348. function reformCssArray(p) {
  11349. if (p instanceof Array) {
  11350. switch (p.length + '') {
  11351. case '4':
  11352. return p;
  11353. case '3':
  11354. return [p[0], p[1], p[2], p[1]];
  11355. case '2':
  11356. return [p[0], p[1], p[0], p[1]];
  11357. case '1':
  11358. return [p[0], p[0], p[0], p[0]];
  11359. case '0':
  11360. return [0, 0, 0, 0];
  11361. }
  11362. }
  11363. else {
  11364. return [p, p, p, p];
  11365. }
  11366. }
  11367. /**
  11368. * 获取多级控制嵌套属性的基础方法
  11369. * 返回ctrList中优先级最高(最靠前)的非undefined属性,ctrList中均无定义则返回undefined
  11370. */
  11371. var deepQuery = (function() {
  11372. /**
  11373. * 获取嵌套选项的基础方法
  11374. * 返回optionTarget中位于optionLocation上的值,如果没有定义,则返回undefined
  11375. */
  11376. function _query(optionTarget, optionLocation) {
  11377. if (typeof optionTarget == 'undefined') {
  11378. return undefined;
  11379. }
  11380. if (!optionLocation) {
  11381. return optionTarget;
  11382. }
  11383. optionLocation = optionLocation.split('.');
  11384. var length = optionLocation.length;
  11385. var curIdx = 0;
  11386. while (curIdx < length) {
  11387. optionTarget = optionTarget[optionLocation[curIdx]];
  11388. if (typeof optionTarget == 'undefined') {
  11389. return undefined;
  11390. }
  11391. curIdx++;
  11392. }
  11393. return optionTarget;
  11394. }
  11395. return function(ctrList, optionLocation) {
  11396. var finalOption;
  11397. for (var i = 0, l = ctrList.length; i < l; i++) {
  11398. finalOption = _query(ctrList[i], optionLocation);
  11399. if (typeof finalOption != 'undefined') {
  11400. return finalOption;
  11401. }
  11402. }
  11403. return undefined;
  11404. };
  11405. })();
  11406. /**
  11407. * 获取自定义和默认配置合并后的字体设置
  11408. */
  11409. function getFont(textStyle) {
  11410. var finalTextStyle = zrUtil.merge(
  11411. zrUtil.clone(textStyle) || {},
  11412. ecConfig.textStyle,
  11413. { 'overwrite': false}
  11414. );
  11415. return finalTextStyle.fontStyle + ' '
  11416. + finalTextStyle.fontWeight + ' '
  11417. + finalTextStyle.fontSize + 'px '
  11418. + finalTextStyle.fontFamily;
  11419. }
  11420. /**
  11421. * 添加文本
  11422. */
  11423. function addLabel(tarShape, serie, data, name, orient) {
  11424. // 多级控制
  11425. var nLabel = zrUtil.merge(
  11426. zrUtil.clone(
  11427. self.deepQuery([serie], 'itemStyle.normal.label')
  11428. ),
  11429. self.deepQuery([data], 'itemStyle.normal.label'),
  11430. { 'overwrite': true, 'recursive': true }
  11431. );
  11432. var eLabel = zrUtil.merge(
  11433. zrUtil.clone(
  11434. self.deepQuery([serie], 'itemStyle.emphasis.label')
  11435. ),
  11436. self.deepQuery([data], 'itemStyle.emphasis.label'),
  11437. { 'overwrite': true, 'recursive': true }
  11438. );
  11439. var nTextStyle = nLabel.textStyle || {};
  11440. var eTextStyle = eLabel.textStyle || {};
  11441. if (nLabel.show) {
  11442. tarShape.style.text = _getLabelText(
  11443. serie, data, name, 'normal'
  11444. );
  11445. tarShape.style.textPosition =
  11446. typeof nLabel.position == 'undefined'
  11447. ? (orient == 'horizontal' ? 'right' : 'top')
  11448. : nLabel.position;
  11449. tarShape.style.textColor = nTextStyle.color;
  11450. tarShape.style.textFont = self.getFont(nTextStyle);
  11451. }
  11452. if (eLabel.show) {
  11453. tarShape.highlightStyle.text = _getLabelText(
  11454. serie, data, name, 'emphasis'
  11455. );
  11456. tarShape.highlightStyle.textPosition =
  11457. typeof eLabel.position == 'undefined'
  11458. ? (orient == 'horizontal' ? 'right' : 'top')
  11459. : eLabel.position;
  11460. tarShape.highlightStyle.textColor = eTextStyle.color;
  11461. tarShape.highlightStyle.textFont = self.getFont(eTextStyle);
  11462. }
  11463. return tarShape;
  11464. }
  11465. /**
  11466. * 根据lable.format计算label text
  11467. */
  11468. function _getLabelText(serie, data, name, status) {
  11469. var formatter = self.deepQuery(
  11470. [data, serie],
  11471. 'itemStyle.' + status + '.label.formatter'
  11472. );
  11473. var value = typeof data != 'undefined'
  11474. ? (typeof data.value != 'undefined'
  11475. ? data.value
  11476. : data)
  11477. : '-';
  11478. if (formatter) {
  11479. if (typeof formatter == 'function') {
  11480. return formatter(
  11481. serie.name,
  11482. name,
  11483. value
  11484. );
  11485. }
  11486. else if (typeof formatter == 'string') {
  11487. formatter = formatter.replace('{a}','{a0}')
  11488. .replace('{b}','{b0}')
  11489. .replace('{c}','{c0}');
  11490. formatter = formatter.replace('{a0}', serie.name)
  11491. .replace('{b0}', name)
  11492. .replace('{c0}', value);
  11493. return formatter;
  11494. }
  11495. }
  11496. else {
  11497. return value;
  11498. }
  11499. }
  11500. /**
  11501. * 百分比计算
  11502. */
  11503. function parsePercent(value, maxValue) {
  11504. if (typeof(value) === 'string') {
  11505. if (_trim(value).match(/%$/)) {
  11506. return parseFloat(value) / 100 * maxValue;
  11507. } else {
  11508. return parseFloat(value);
  11509. }
  11510. } else {
  11511. return value;
  11512. }
  11513. }
  11514. /**
  11515. * 获取中心坐标
  11516. */
  11517. function parseCenter(center) {
  11518. return [
  11519. parsePercent(center[0], self.zr.getWidth()),
  11520. parsePercent(center[1], self.zr.getHeight()),
  11521. ];
  11522. }
  11523. function _trim(str) {
  11524. return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
  11525. }
  11526. // 记录自适应原始定义,resize用
  11527. function backupAdaptiveParams(series, attrs, isAll) {
  11528. for (var i = 0, l = series.length; i < l; i++) {
  11529. if (isAll || series[i].type == self.type) {
  11530. for (var j = 0, k = attrs.length; j < k; j++) {
  11531. series[i]['__' + attrs[i]] = zrUtil.clone(
  11532. series[i][attrs[i]]
  11533. );
  11534. }
  11535. }
  11536. }
  11537. }
  11538. // 还原自适应原始定义,resize用
  11539. function restoreAdaptiveParams(series, attrs, isAll) {
  11540. for (var i = 0, l = series.length; i < l; i++) {
  11541. if (isAll || series[i].type == self.type) {
  11542. for (var j = 0, k = attrs.length; j < k; j++) {
  11543. series[i][attrs[i]] = zrUtil.clone(
  11544. series[i]['__' + attrs[i]]
  11545. );
  11546. }
  11547. }
  11548. }
  11549. }
  11550. function resize() {
  11551. self.refresh && self.refresh();
  11552. }
  11553. /**
  11554. * 清除图形数据,实例仍可用
  11555. */
  11556. function clear() {
  11557. if (self.zr) {
  11558. self.zr.delShape(self.shapeList);
  11559. self.zr.clearAnimation
  11560. && self.zr.clearAnimation();
  11561. }
  11562. self.shapeList = [];
  11563. }
  11564. /**
  11565. * 释放后实例不可用
  11566. */
  11567. function dispose() {
  11568. self.clear();
  11569. self.shapeList = null;
  11570. self = null;
  11571. }
  11572. /**
  11573. * 基类方法
  11574. */
  11575. self.getZlevelBase = getZlevelBase;
  11576. self.reformOption = reformOption;
  11577. self.reformCssArray = reformCssArray;
  11578. self.deepQuery = deepQuery;
  11579. self.getFont = getFont;
  11580. self.addLabel = addLabel;
  11581. self.parsePercent = parsePercent;
  11582. self.parseCenter = parseCenter;
  11583. self.clear = clear;
  11584. self.dispose = dispose;
  11585. self.backupAdaptiveParams = backupAdaptiveParams;
  11586. self.restoreAdaptiveParams = restoreAdaptiveParams;
  11587. self.resize = resize;
  11588. }
  11589. return Base;
  11590. });
  11591. /**
  11592. * echarts通用私有数据服务
  11593. *
  11594. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  11595. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  11596. *
  11597. */
  11598. define('echarts/util/ecData',[],function() {
  11599. /**
  11600. * 打包私有数据
  11601. *
  11602. * @param {shape} shape 修改目标
  11603. * @param {Object} series
  11604. * @param {number} seriesIndex
  11605. * @param {number | Object} data
  11606. * @param {number} dataIndex
  11607. * @param {*=} special
  11608. * @param {*=} special2
  11609. */
  11610. function pack(
  11611. shape, series, seriesIndex, data, dataIndex, name, special, special2
  11612. ) {
  11613. var value;
  11614. if (typeof data != 'undefined') {
  11615. if (typeof data.value != 'undefined') {
  11616. value = data.value;
  11617. }
  11618. else {
  11619. value = data;
  11620. }
  11621. }
  11622. shape._echartsData = {
  11623. '_series' : series,
  11624. '_seriesIndex' : seriesIndex,
  11625. '_data' : data,
  11626. '_dataIndex' : dataIndex,
  11627. '_name' : name,
  11628. '_value' : value,
  11629. '_special' : special,
  11630. '_special2' : special2
  11631. };
  11632. return shape._echartsData;
  11633. }
  11634. /**
  11635. * 从私有数据中获取特定项
  11636. * @param {shape} shape
  11637. * @param {string} key
  11638. */
  11639. function get(shape, key) {
  11640. var data = shape._echartsData;
  11641. if (!key) {
  11642. return data;
  11643. }
  11644. switch (key) {
  11645. case 'series' :
  11646. return data && data._series;
  11647. case 'seriesIndex' :
  11648. return data && data._seriesIndex;
  11649. case 'data' :
  11650. return data && data._data;
  11651. case 'dataIndex' :
  11652. return data && data._dataIndex;
  11653. case 'name' :
  11654. return data && data._name;
  11655. case 'value' :
  11656. return data && data._value;
  11657. case 'special' :
  11658. return data && data._special;
  11659. case 'special2' :
  11660. return data && data._special2;
  11661. }
  11662. return null;
  11663. }
  11664. /**
  11665. * 修改私有数据中获取特定项
  11666. * @param {shape} shape
  11667. * @param {string} key
  11668. * @param {*} value
  11669. */
  11670. function set(shape, key, value) {
  11671. shape._echartsData = shape._echartsData || {};
  11672. switch (key) {
  11673. case 'series' : // 当前系列值
  11674. shape._echartsData._series = value;
  11675. break;
  11676. case 'seriesIndex' : // 系列数组位置索引
  11677. shape._echartsData._seriesIndex = value;
  11678. break;
  11679. case 'data' : // 当前数据值
  11680. shape._echartsData._data = value;
  11681. break;
  11682. case 'dataIndex' : // 数据数组位置索引
  11683. shape._echartsData._dataIndex = value;
  11684. break;
  11685. case 'name' :
  11686. shape._echartsData._name = value;
  11687. break;
  11688. case 'value' :
  11689. shape._echartsData._value = value;
  11690. break;
  11691. case 'special' :
  11692. shape._echartsData._special = value;
  11693. break;
  11694. case 'special2' :
  11695. shape._echartsData._special2 = value;
  11696. break;
  11697. }
  11698. }
  11699. return {
  11700. pack : pack,
  11701. set : set,
  11702. get : get
  11703. };
  11704. });
  11705. /**
  11706. * echarts组件基类
  11707. *
  11708. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  11709. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  11710. *
  11711. */
  11712. define('echarts/chart/calculableBase',['require','../util/ecData','zrender/tool/util'],function(require) {
  11713. function Base(zr, option){
  11714. var ecData = require('../util/ecData');
  11715. var zrUtil = require('zrender/tool/util');
  11716. var self = this;
  11717. self.selectedMap = {};
  11718. self.shapeHandler = {
  11719. onclick : function() {
  11720. self.isClick = true;
  11721. },
  11722. ondragover : function (param) {
  11723. // 返回触发可计算特性的图形提示
  11724. var calculableShape = zrUtil.clone(param.target);
  11725. calculableShape.highlightStyle = {
  11726. text : '',
  11727. r : calculableShape.style.r + 5,
  11728. brushType : 'stroke',
  11729. strokeColor : self.zr.getCalculableColor(),
  11730. lineWidth : (calculableShape.style.lineWidth || 1) + 12
  11731. };
  11732. self.zr.addHoverShape(calculableShape);
  11733. },
  11734. ondrop : function (param) {
  11735. // 排除一些非数据的拖拽进入
  11736. if (typeof ecData.get(param.dragged, 'data') != 'undefined') {
  11737. self.isDrop = true;
  11738. }
  11739. },
  11740. ondragend : function () {
  11741. self.isDragend = true;
  11742. }
  11743. };
  11744. function setCalculable(shape) {
  11745. shape.ondragover = self.shapeHandler.ondragover;
  11746. shape.ondragend = self.shapeHandler.ondragend;
  11747. shape.ondrop = self.shapeHandler.ondrop;
  11748. return shape;
  11749. }
  11750. /**
  11751. * 数据项被拖拽进来
  11752. */
  11753. function ondrop(param, status) {
  11754. if (!self.isDrop || !param.target) {
  11755. // 没有在当前实例上发生拖拽行为则直接返回
  11756. return;
  11757. }
  11758. var target = param.target; // 拖拽安放目标
  11759. var dragged = param.dragged; // 当前被拖拽的图形对象
  11760. var seriesIndex = ecData.get(target, 'seriesIndex');
  11761. var dataIndex = ecData.get(target, 'dataIndex');
  11762. // 落到bar上,数据被拖拽到某个数据项上,数据修改
  11763. var data = option.series[seriesIndex].data[dataIndex] || '-';
  11764. if (data.value) {
  11765. if (data.value != '-') {
  11766. option.series[seriesIndex].data[dataIndex].value +=
  11767. ecData.get(dragged, 'value');
  11768. }
  11769. else {
  11770. option.series[seriesIndex].data[dataIndex].value =
  11771. ecData.get(dragged, 'value');
  11772. }
  11773. }
  11774. else {
  11775. if (data != '-') {
  11776. option.series[seriesIndex].data[dataIndex] +=
  11777. ecData.get(dragged, 'value');
  11778. }
  11779. else {
  11780. option.series[seriesIndex].data[dataIndex] =
  11781. ecData.get(dragged, 'value');
  11782. }
  11783. }
  11784. // 别status = {}赋值啊!!
  11785. status.dragIn = status.dragIn || true;
  11786. // 处理完拖拽事件后复位
  11787. self.isDrop = false;
  11788. return;
  11789. }
  11790. /**
  11791. * 数据项被拖拽出去
  11792. */
  11793. function ondragend(param, status) {
  11794. if (!self.isDragend || !param.target) {
  11795. // 没有在当前实例上发生拖拽行为则直接返回
  11796. return;
  11797. }
  11798. var target = param.target; // 被拖拽图形元素
  11799. var seriesIndex = ecData.get(target, 'seriesIndex');
  11800. var dataIndex = ecData.get(target, 'dataIndex');
  11801. // 被拖拽的图形是折线图bar,删除被拖拽走的数据
  11802. option.series[seriesIndex].data[dataIndex] = '-';
  11803. // 别status = {}赋值啊!!
  11804. status.dragOut = true;
  11805. status.needRefresh = true;
  11806. // 处理完拖拽事件后复位
  11807. self.isDragend = false;
  11808. return;
  11809. }
  11810. /**
  11811. * 图例选择
  11812. */
  11813. function onlegendSelected(param, status) {
  11814. var legendSelected = param.selected;
  11815. for (var itemName in self.selectedMap) {
  11816. if (self.selectedMap[itemName] != legendSelected[itemName]) {
  11817. // 有一项不一致都需要重绘
  11818. status.needRefresh = true;
  11819. return;
  11820. }
  11821. }
  11822. }
  11823. /**
  11824. * 基类方法
  11825. */
  11826. self.setCalculable = setCalculable;
  11827. self.ondrop = ondrop;
  11828. self.ondragend = ondragend;
  11829. self.onlegendSelected = onlegendSelected;
  11830. }
  11831. return Base;
  11832. });
  11833. /**
  11834. * echarts组件:孤岛数据
  11835. *
  11836. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  11837. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  11838. *
  11839. */
  11840. define('echarts/chart/island',['require','../component/base','./calculableBase','../config','../util/ecData','zrender/tool/event','zrender/tool/color','../chart'],function (require) {
  11841. /**
  11842. * 构造函数
  11843. * @param {Object} messageCenter echart消息中心
  11844. * @param {ZRender} zr zrender实例
  11845. * @param {Object} option 图表选项
  11846. */
  11847. function Island(messageCenter, zr) {
  11848. // 基类装饰
  11849. var ComponentBase = require('../component/base');
  11850. ComponentBase.call(this, zr);
  11851. // 可计算特性装饰
  11852. var CalculableBase = require('./calculableBase');
  11853. CalculableBase.call(this, zr);
  11854. var ecConfig = require('../config');
  11855. var ecData = require('../util/ecData');
  11856. var zrEvent = require('zrender/tool/event');
  11857. var self = this;
  11858. self.type = ecConfig.CHART_TYPE_ISLAND;
  11859. var option;
  11860. var _zlevelBase = self.getZlevelBase();
  11861. var _nameConnector;
  11862. var _valueConnector;
  11863. var _zrHeight = zr.getHeight();
  11864. var _zrWidth = zr.getWidth();
  11865. /**
  11866. * 孤岛合并
  11867. *
  11868. * @param {string} tarShapeIndex 目标索引
  11869. * @param {Object} srcShape 源目标,合入目标后删除
  11870. */
  11871. function _combine(tarShape, srcShape) {
  11872. var zrColor = require('zrender/tool/color');
  11873. var value = ecData.get(tarShape, 'value')
  11874. + ecData.get(srcShape, 'value');
  11875. var name = ecData.get(tarShape, 'name')
  11876. + _nameConnector
  11877. + ecData.get(srcShape, 'name');
  11878. tarShape.style.text = name + _valueConnector + value;
  11879. ecData.set(tarShape, 'value', value);
  11880. ecData.set(tarShape, 'name', name);
  11881. tarShape.style.r = option.island.r;
  11882. tarShape.style.color = zrColor.mix(
  11883. tarShape.style.color,
  11884. srcShape.style.color
  11885. );
  11886. }
  11887. /**
  11888. * 刷新
  11889. */
  11890. function refresh(newOption) {
  11891. if (newOption) {
  11892. newOption.island = self.reformOption(newOption.island);
  11893. option = newOption;
  11894. _nameConnector = option.nameConnector;
  11895. _valueConnector = option.valueConnector;
  11896. }
  11897. }
  11898. function render(newOption) {
  11899. refresh(newOption);
  11900. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  11901. zr.addShape(self.shapeList[i]);
  11902. }
  11903. }
  11904. function getOption() {
  11905. return option;
  11906. }
  11907. function resize() {
  11908. var newWidth = zr.getWidth();
  11909. var newHieght = zr.getHeight();
  11910. var xScale = newWidth / (_zrWidth || newWidth);
  11911. var yScale = newHieght / (_zrHeight || newHieght);
  11912. if (xScale == 1 && yScale == 1) {
  11913. return;
  11914. }
  11915. _zrWidth = newWidth;
  11916. _zrHeight = newHieght;
  11917. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  11918. zr.modShape(
  11919. self.shapeList[i].id,
  11920. {
  11921. style: {
  11922. x: Math.round(self.shapeList[i].style.x * xScale),
  11923. y: Math.round(self.shapeList[i].style.y * yScale)
  11924. }
  11925. }
  11926. );
  11927. }
  11928. }
  11929. function add(shape) {
  11930. var name = ecData.get(shape, 'name');
  11931. var value = ecData.get(shape, 'value');
  11932. var seriesName = typeof ecData.get(shape, 'series') != 'undefined'
  11933. ? ecData.get(shape, 'series').name
  11934. : '';
  11935. var font = self.getFont(option.island.textStyle);
  11936. var islandShape = {
  11937. shape : 'circle',
  11938. id : zr.newShapeId(self.type),
  11939. zlevel : _zlevelBase,
  11940. style : {
  11941. x : shape.style.x,
  11942. y : shape.style.y,
  11943. r : option.island.r,
  11944. color : shape.style.color || shape.style.strokeColor,
  11945. text : name + _valueConnector + value,
  11946. textFont : font
  11947. },
  11948. draggable : true,
  11949. hoverable : true,
  11950. onmousewheel : self.shapeHandler.onmousewheel,
  11951. _type : 'island'
  11952. };
  11953. if (islandShape.style.color == '#fff') {
  11954. islandShape.style.color = shape.style.strokeColor;
  11955. }
  11956. self.setCalculable(islandShape);
  11957. ecData.pack(
  11958. islandShape,
  11959. {name:seriesName}, -1,
  11960. value, -1,
  11961. name
  11962. );
  11963. self.shapeList.push(islandShape);
  11964. zr.addShape(islandShape);
  11965. }
  11966. function del(shape) {
  11967. zr.delShape(shape.id);
  11968. var newShapeList = [];
  11969. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  11970. if (self.shapeList[i].id != shape.id) {
  11971. newShapeList.push(self.shapeList[i]);
  11972. }
  11973. }
  11974. self.shapeList = newShapeList;
  11975. }
  11976. /**
  11977. * 数据项被拖拽进来, 重载基类方法
  11978. */
  11979. function ondrop(param, status) {
  11980. if (!self.isDrop || !param.target) {
  11981. // 没有在当前实例上发生拖拽行为则直接返回
  11982. return;
  11983. }
  11984. // 拖拽产生孤岛数据合并
  11985. var target = param.target; // 拖拽安放目标
  11986. var dragged = param.dragged; // 当前被拖拽的图形对象
  11987. _combine(target, dragged);
  11988. zr.modShape(target.id, target);
  11989. status.dragIn = true;
  11990. // 处理完拖拽事件后复位
  11991. self.isDrop = false;
  11992. return;
  11993. }
  11994. /**
  11995. * 数据项被拖拽出去, 重载基类方法
  11996. */
  11997. function ondragend(param, status) {
  11998. var target = param.target; // 拖拽安放目标
  11999. if (!self.isDragend) {
  12000. // 拖拽的不是孤岛数据,如果没有图表接受孤岛数据,需要新增孤岛数据
  12001. if (!status.dragIn) {
  12002. target.style.x = zrEvent.getX(param.event);
  12003. target.style.y = zrEvent.getY(param.event);
  12004. add(target);
  12005. status.needRefresh = true;
  12006. }
  12007. }
  12008. else {
  12009. // 拖拽的是孤岛数据,如果有图表接受了孤岛数据,需要删除孤岛数据
  12010. if (status.dragIn) {
  12011. del(target);
  12012. status.needRefresh = true;
  12013. }
  12014. }
  12015. // 处理完拖拽事件后复位
  12016. self.isDragend = false;
  12017. return;
  12018. }
  12019. /**
  12020. * 滚轮改变孤岛数据值
  12021. */
  12022. self.shapeHandler.onmousewheel = function(param) {
  12023. var shape = param.target;
  12024. var event = param.event;
  12025. var delta = zrEvent.getDelta(event);
  12026. delta = delta > 0 ? (-1) : 1;
  12027. shape.style.r -= delta;
  12028. shape.style.r = shape.style.r < 5 ? 5 : shape.style.r;
  12029. var value = ecData.get(shape, 'value');
  12030. var dvalue = value * option.island.calculateStep;
  12031. if (dvalue > 1) {
  12032. value = Math.round(value - dvalue * delta);
  12033. }
  12034. else {
  12035. value = (value - dvalue * delta).toFixed(2) - 0;
  12036. }
  12037. var name = ecData.get(shape, 'name');
  12038. shape.style.text = name + ':' + value;
  12039. ecData.set(shape, 'value', value);
  12040. ecData.set(shape, 'name', name);
  12041. zr.modShape(shape.id, shape);
  12042. zr.refresh();
  12043. zrEvent.stop(event);
  12044. };
  12045. self.refresh = refresh;
  12046. self.render = render;
  12047. self.resize = resize;
  12048. self.getOption = getOption;
  12049. self.add = add;
  12050. self.del = del;
  12051. self.ondrop = ondrop;
  12052. self.ondragend = ondragend;
  12053. }
  12054. // 图表注册
  12055. require('../chart').define('island', Island);
  12056. return Island;
  12057. });
  12058. /**
  12059. * echart组件库
  12060. *
  12061. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  12062. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  12063. *
  12064. */
  12065. define('echarts/component',[],function(/*require*/) { //component
  12066. var self = {};
  12067. var _componentLibrary = {}; //echart组件库
  12068. /**
  12069. * 定义图形实现
  12070. * @param {Object} name
  12071. * @param {Object} clazz 图形实现
  12072. */
  12073. self.define = function(name, clazz) {
  12074. _componentLibrary[name] = clazz;
  12075. return self;
  12076. };
  12077. /**
  12078. * 获取图形实现
  12079. * @param {Object} name
  12080. */
  12081. self.get = function(name) {
  12082. return _componentLibrary[name];
  12083. };
  12084. return self;
  12085. });
  12086. /**
  12087. * echarts组件:图表标题
  12088. *
  12089. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  12090. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  12091. *
  12092. */
  12093. define('echarts/component/title',['require','./base','../config','zrender/tool/area','zrender/tool/util','../component'],function (require) {
  12094. /**
  12095. * 构造函数
  12096. * @param {Object} messageCenter echart消息中心
  12097. * @param {ZRender} zr zrender实例
  12098. * @param {Object} option 图表参数
  12099. */
  12100. function Title(messageCenter, zr, option) {
  12101. var Base = require('./base');
  12102. Base.call(this, zr);
  12103. var ecConfig = require('../config');
  12104. var zrArea = require('zrender/tool/area');
  12105. var zrUtil = require('zrender/tool/util');
  12106. var self = this;
  12107. self.type = ecConfig.COMPONENT_TYPE_TITLE;
  12108. var titleOption; // 标题选项,共享数据源
  12109. var _zlevelBase = self.getZlevelBase();
  12110. var _itemGroupLocation = {}; // 标题元素组的位置参数,通过计算所得x, y, width, height
  12111. function _buildShape() {
  12112. _itemGroupLocation = _getItemGroupLocation();
  12113. _buildBackground();
  12114. _buildItem();
  12115. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  12116. self.shapeList[i].id = zr.newShapeId(self.type);
  12117. zr.addShape(self.shapeList[i]);
  12118. }
  12119. }
  12120. /**
  12121. * 构建所有标题元素
  12122. */
  12123. function _buildItem() {
  12124. var text = titleOption.text;
  12125. var link = titleOption.link;
  12126. var subtext = titleOption.subtext;
  12127. var sublink = titleOption.sublink;
  12128. var font = self.getFont(titleOption.textStyle);
  12129. var subfont = self.getFont(titleOption.subtextStyle);
  12130. var x = _itemGroupLocation.x;
  12131. var y = _itemGroupLocation.y;
  12132. var width = _itemGroupLocation.width;
  12133. var height = _itemGroupLocation.height;
  12134. var textShape = {
  12135. shape : 'text',
  12136. zlevel : _zlevelBase,
  12137. style : {
  12138. y : y,
  12139. color : titleOption.textStyle.color,
  12140. text: text,
  12141. textFont: font,
  12142. textBaseline: 'top'
  12143. },
  12144. hoverable: false
  12145. };
  12146. if (link) {
  12147. textShape.hoverable = true;
  12148. textShape.clickable = true;
  12149. textShape.onclick = function(){
  12150. window.open(link);
  12151. };
  12152. }
  12153. var subtextShape = {
  12154. shape : 'text',
  12155. zlevel : _zlevelBase,
  12156. style : {
  12157. y : y + height,
  12158. color : titleOption.subtextStyle.color,
  12159. text: subtext,
  12160. textFont: subfont,
  12161. textBaseline: 'bottom'
  12162. },
  12163. hoverable: false
  12164. };
  12165. if (sublink) {
  12166. subtextShape.hoverable = true;
  12167. subtextShape.clickable = true;
  12168. subtextShape.onclick = function(){
  12169. window.open(sublink);
  12170. };
  12171. }
  12172. switch (titleOption.x) {
  12173. case 'center' :
  12174. textShape.style.x = subtextShape.style.x = x + width / 2;
  12175. textShape.style.textAlign = subtextShape.style.textAlign
  12176. = 'center';
  12177. break;
  12178. case 'left' :
  12179. textShape.style.x = subtextShape.style.x = x;
  12180. textShape.style.textAlign = subtextShape.style.textAlign
  12181. = 'left';
  12182. break;
  12183. case 'right' :
  12184. textShape.style.x = subtextShape.style.x = x + width;
  12185. textShape.style.textAlign = subtextShape.style.textAlign
  12186. = 'right';
  12187. break;
  12188. default :
  12189. x = titleOption.x - 0;
  12190. x = isNaN(x) ? 0 : x;
  12191. textShape.style.x = subtextShape.style.x = x;
  12192. break;
  12193. }
  12194. if (titleOption.textAlign) {
  12195. textShape.style.textAlign = subtextShape.style.textAlign
  12196. = titleOption.textAlign;
  12197. }
  12198. self.shapeList.push(textShape);
  12199. subtext !== '' && self.shapeList.push(subtextShape);
  12200. }
  12201. function _buildBackground() {
  12202. var pTop = titleOption.padding[0];
  12203. var pRight = titleOption.padding[1];
  12204. var pBottom = titleOption.padding[2];
  12205. var pLeft = titleOption.padding[3];
  12206. self.shapeList.push({
  12207. shape : 'rectangle',
  12208. zlevel : _zlevelBase,
  12209. hoverable :false,
  12210. style : {
  12211. x : _itemGroupLocation.x - pLeft,
  12212. y : _itemGroupLocation.y - pTop,
  12213. width : _itemGroupLocation.width + pLeft + pRight,
  12214. height : _itemGroupLocation.height + pTop + pBottom,
  12215. brushType : titleOption.borderWidth === 0
  12216. ? 'fill' : 'both',
  12217. color : titleOption.backgroundColor,
  12218. strokeColor : titleOption.borderColor,
  12219. lineWidth : titleOption.borderWidth
  12220. }
  12221. });
  12222. }
  12223. /**
  12224. * 根据选项计算标题实体的位置坐标
  12225. */
  12226. function _getItemGroupLocation() {
  12227. var text = titleOption.text;
  12228. var subtext = titleOption.subtext;
  12229. var font = self.getFont(titleOption.textStyle);
  12230. var subfont = self.getFont(titleOption.subtextStyle);
  12231. var totalWidth = Math.max(
  12232. zrArea.getTextWidth(text, font),
  12233. zrArea.getTextWidth(subtext, subfont)
  12234. );
  12235. var totalHeight = zrArea.getTextWidth('国', font)
  12236. + (subtext === ''
  12237. ? 0
  12238. : (titleOption.itemGap
  12239. + zrArea.getTextWidth('国', subfont))
  12240. );
  12241. var x;
  12242. var zrWidth = zr.getWidth();
  12243. switch (titleOption.x) {
  12244. case 'center' :
  12245. x = Math.floor((zrWidth - totalWidth) / 2);
  12246. break;
  12247. case 'left' :
  12248. x = titleOption.padding[3] + titleOption.borderWidth;
  12249. break;
  12250. case 'right' :
  12251. x = zrWidth
  12252. - totalWidth
  12253. - titleOption.padding[1]
  12254. - titleOption.borderWidth;
  12255. break;
  12256. default :
  12257. x = titleOption.x - 0;
  12258. x = isNaN(x) ? 0 : x;
  12259. break;
  12260. }
  12261. var y;
  12262. var zrHeight = zr.getHeight();
  12263. switch (titleOption.y) {
  12264. case 'top' :
  12265. y = titleOption.padding[0] + titleOption.borderWidth;
  12266. break;
  12267. case 'bottom' :
  12268. y = zrHeight
  12269. - totalHeight
  12270. - titleOption.padding[2]
  12271. - titleOption.borderWidth;
  12272. break;
  12273. case 'center' :
  12274. y = Math.floor((zrHeight - totalHeight) / 2);
  12275. break;
  12276. default :
  12277. y = titleOption.y - 0;
  12278. y = isNaN(y) ? 0 : y;
  12279. break;
  12280. }
  12281. return {
  12282. x : x,
  12283. y : y,
  12284. width : totalWidth,
  12285. height : totalHeight
  12286. };
  12287. }
  12288. function init(newOption) {
  12289. refresh(newOption);
  12290. }
  12291. /**
  12292. * 刷新
  12293. */
  12294. function refresh(newOption) {
  12295. if (newOption) {
  12296. option = newOption;
  12297. option.title = self.reformOption(option.title);
  12298. // 补全padding属性
  12299. option.title.padding = self.reformCssArray(
  12300. option.title.padding
  12301. );
  12302. titleOption = option.title;
  12303. titleOption.textStyle = zrUtil.merge(
  12304. titleOption.textStyle,
  12305. ecConfig.textStyle,
  12306. {
  12307. 'overwrite': false,
  12308. 'recursive': false
  12309. }
  12310. );
  12311. titleOption.subtextStyle = zrUtil.merge(
  12312. titleOption.subtextStyle,
  12313. ecConfig.textStyle,
  12314. {
  12315. 'overwrite': false,
  12316. 'recursive': false
  12317. }
  12318. );
  12319. self.clear();
  12320. _buildShape();
  12321. }
  12322. }
  12323. function resize() {
  12324. self.clear();
  12325. _buildShape();
  12326. }
  12327. self.init = init;
  12328. self.refresh = refresh;
  12329. self.resize = resize;
  12330. init(option);
  12331. }
  12332. require('../component').define('title', Title);
  12333. return Title;
  12334. });
  12335. /**
  12336. * echarts组件: 类目轴
  12337. *
  12338. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  12339. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  12340. *
  12341. */
  12342. define('echarts/component/categoryAxis',['require','./base','../config','zrender/tool/util','zrender/tool/area','../component'],function (require) {
  12343. /**
  12344. * 构造函数
  12345. * @param {Object} messageCenter echart消息中心
  12346. * @param {ZRender} zr zrender实例
  12347. * @param {Object} option 类目轴参数
  12348. * @param {Grid} grid 网格对象
  12349. */
  12350. function CategoryAxis(messageCenter, zr, option, component) {
  12351. var Base = require('./base');
  12352. Base.call(this, zr);
  12353. var ecConfig = require('../config');
  12354. var zrUtil = require('zrender/tool/util');
  12355. var zrArea = require('zrender/tool/area');
  12356. var self = this;
  12357. self.type = ecConfig.COMPONENT_TYPE_AXIS_CATEGORY;
  12358. var grid = component.grid;
  12359. var _zlevelBase = self.getZlevelBase();
  12360. var _interval; // 标签显示的挑选间隔
  12361. var _labelData;
  12362. function _reformLabel() {
  12363. var data = zrUtil.clone(option.data);
  12364. var axisFormatter = option.axisLabel.formatter;
  12365. var formatter;
  12366. for (var i = 0, l = data.length; i < l; i++) {
  12367. formatter = data[i].formatter || axisFormatter;
  12368. if (formatter) {
  12369. if (typeof formatter == 'function') {
  12370. if (typeof data[i].value != 'undefined') {
  12371. data[i].value = formatter(data[i].value);
  12372. }
  12373. else {
  12374. data[i] = formatter(data[i]);
  12375. }
  12376. }
  12377. else if (typeof formatter == 'string') {
  12378. if (typeof data[i].value != 'undefined') {
  12379. data[i].value = formatter.replace(
  12380. '{value}',data[i].value
  12381. );
  12382. }
  12383. else {
  12384. data[i] = formatter.replace('{value}',data[i]);
  12385. }
  12386. }
  12387. }
  12388. }
  12389. return data;
  12390. }
  12391. /**
  12392. * 计算标签显示挑选间隔
  12393. */
  12394. function _getInterval() {
  12395. var interval = option.axisLabel.interval;
  12396. if (interval == 'auto') {
  12397. // 麻烦的自适应计算
  12398. var fontSize = option.axisLabel.textStyle.fontSize;
  12399. var font = self.getFont(option.axisLabel.textStyle);
  12400. var data = option.data;
  12401. var dataLength = option.data.length;
  12402. if (option.position == 'bottom' || option.position == 'top') {
  12403. // 横向
  12404. if (dataLength > 3) {
  12405. var gap = getGap();
  12406. var isEnough = false;
  12407. var labelSpace;
  12408. var labelSize;
  12409. interval = 0;
  12410. while (!isEnough && interval < dataLength) {
  12411. interval++;
  12412. isEnough = true;
  12413. labelSpace = gap * interval - 10; // 标签左右至少间隔为5px
  12414. for (var i = 0; i < dataLength; i += interval) {
  12415. if (option.axisLabel.rotate !== 0) {
  12416. // 有旋转
  12417. labelSize = fontSize;
  12418. }
  12419. else if (data[i].textStyle) {
  12420. labelSize = zrArea.getTextWidth(
  12421. _labelData[i].value || _labelData[i],
  12422. self.getFont(
  12423. zrUtil.merge(
  12424. data[i].textStyle,
  12425. option.axisLabel.textStyle,
  12426. {
  12427. 'overwrite': false,
  12428. 'recursive': true
  12429. }
  12430. )
  12431. )
  12432. );
  12433. }
  12434. else {
  12435. labelSize = zrArea.getTextWidth(
  12436. _labelData[i].value || _labelData[i],
  12437. font
  12438. );
  12439. }
  12440. if (labelSpace < labelSize) {
  12441. // 放不下,中断循环让interval++
  12442. isEnough = false;
  12443. break;
  12444. }
  12445. }
  12446. }
  12447. }
  12448. else {
  12449. // 少于3个则全部显示
  12450. interval = 1;
  12451. }
  12452. }
  12453. else {
  12454. // 纵向
  12455. if (dataLength > 3) {
  12456. var gap = getGap();
  12457. interval = 1;
  12458. // 标签上下至少间隔为3px
  12459. while ((gap * interval - 6) < fontSize
  12460. && interval < dataLength
  12461. ) {
  12462. interval++;
  12463. }
  12464. }
  12465. else {
  12466. // 少于3个则全部显示
  12467. interval = 1;
  12468. }
  12469. }
  12470. }
  12471. else {
  12472. // 用户自定义间隔
  12473. interval += 1;
  12474. }
  12475. return interval;
  12476. }
  12477. function _buildShape() {
  12478. _labelData = _reformLabel();
  12479. _interval = _getInterval();
  12480. option.splitArea.show && _buildSplitArea();
  12481. option.splitLine.show && _buildSplitLine();
  12482. option.axisLine.show && _buildAxisLine();
  12483. option.axisTick.show && _buildAxisTick();
  12484. option.axisLabel.show && _buildAxisLabel();
  12485. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  12486. self.shapeList[i].id = zr.newShapeId(self.type);
  12487. zr.addShape(self.shapeList[i]);
  12488. }
  12489. }
  12490. // 轴线
  12491. function _buildAxisLine() {
  12492. var axShape = {
  12493. shape : 'line',
  12494. zlevel: _zlevelBase + 1,
  12495. hoverable: false
  12496. };
  12497. switch (option.position) {
  12498. case 'left':
  12499. axShape.style = {
  12500. xStart : grid.getX(),
  12501. yStart : grid.getY(),
  12502. xEnd : grid.getX(),
  12503. yEnd : grid.getYend()
  12504. };
  12505. break;
  12506. case 'right':
  12507. axShape.style = {
  12508. xStart : grid.getXend(),
  12509. yStart : grid.getY(),
  12510. xEnd : grid.getXend(),
  12511. yEnd : grid.getYend()
  12512. };
  12513. break;
  12514. case 'bottom':
  12515. axShape.style = {
  12516. xStart : grid.getX(),
  12517. yStart : grid.getYend(),
  12518. xEnd : grid.getXend(),
  12519. yEnd : grid.getYend()
  12520. };
  12521. break;
  12522. case 'top':
  12523. axShape.style = {
  12524. xStart : grid.getX(),
  12525. yStart : grid.getY(),
  12526. xEnd : grid.getXend(),
  12527. yEnd : grid.getY()
  12528. };
  12529. break;
  12530. }
  12531. axShape.style.strokeColor = option.axisLine.lineStyle.color;
  12532. axShape.style.lineWidth = option.axisLine.lineStyle.width;
  12533. axShape.style.lineType = option.axisLine.lineStyle.type;
  12534. self.shapeList.push(axShape);
  12535. }
  12536. // 小标记
  12537. function _buildAxisTick() {
  12538. var axShape;
  12539. var data = option.data;
  12540. var dataLength = option.data.length;
  12541. var length = option.axisTick.length;
  12542. var color = option.axisTick.lineStyle.color;
  12543. var lineWidth = option.axisTick.lineStyle.width;
  12544. if (option.position == 'bottom' || option.position == 'top') {
  12545. // 横向
  12546. var yPosition = option.position == 'bottom'
  12547. ? grid.getYend()
  12548. : (grid.getY() - length);
  12549. for (var i = 0; i < dataLength; i++) {
  12550. axShape = {
  12551. shape : 'line',
  12552. zlevel : _zlevelBase,
  12553. hoverable : false,
  12554. style : {
  12555. xStart : getCoord(data[i].value || data[i]),
  12556. yStart : yPosition,
  12557. xEnd : getCoord(data[i].value || data[i]),
  12558. yEnd : yPosition + length,
  12559. strokeColor : color,
  12560. lineWidth : lineWidth
  12561. }
  12562. };
  12563. self.shapeList.push(axShape);
  12564. }
  12565. }
  12566. else {
  12567. // 纵向
  12568. var xPosition = option.position == 'left'
  12569. ? (grid.getX() - length)
  12570. : grid.getXend();
  12571. for (var i = 0; i < dataLength; i++) {
  12572. axShape = {
  12573. shape : 'line',
  12574. zlevel : _zlevelBase,
  12575. hoverable : false,
  12576. style : {
  12577. xStart : xPosition,
  12578. yStart : getCoord(data[i].value || data[i]),
  12579. xEnd : xPosition + length,
  12580. yEnd : getCoord(data[i].value || data[i]),
  12581. strokeColor : color,
  12582. lineWidth : lineWidth
  12583. }
  12584. };
  12585. self.shapeList.push(axShape);
  12586. }
  12587. }
  12588. }
  12589. // 坐标轴文本
  12590. function _buildAxisLabel() {
  12591. var axShape;
  12592. var data = option.data;
  12593. var dataLength = option.data.length;
  12594. var rotate = option.axisLabel.rotate;
  12595. var margin = option.axisLabel.margin;
  12596. var textStyle = option.axisLabel.textStyle;
  12597. var dataTextStyle;
  12598. if (option.position == 'bottom' || option.position == 'top') {
  12599. // 横向
  12600. var yPosition;
  12601. var baseLine;
  12602. if (option.position == 'bottom') {
  12603. yPosition = grid.getYend() + margin;
  12604. baseLine = 'top';
  12605. }
  12606. else {
  12607. yPosition = grid.getY() - margin;
  12608. baseLine = 'bottom';
  12609. }
  12610. for (var i = 0; i < dataLength; i += _interval) {
  12611. dataTextStyle = zrUtil.merge(
  12612. data[i].textStyle || {},
  12613. textStyle,
  12614. {'overwrite': false}
  12615. );
  12616. axShape = {
  12617. shape : 'text',
  12618. zlevel : _zlevelBase,
  12619. hoverable : false,
  12620. style : {
  12621. x : getCoord(data[i].value || data[i]),
  12622. y : yPosition,
  12623. color : dataTextStyle.color,
  12624. text : _labelData[i].value || _labelData[i],
  12625. textFont : self.getFont(dataTextStyle),
  12626. textAlign : 'center',
  12627. textBaseline : baseLine
  12628. }
  12629. };
  12630. if (rotate) {
  12631. axShape.style.textAlign = rotate > 0
  12632. ? (option.position == 'bottom'
  12633. ? 'right' : 'left')
  12634. : (option.position == 'bottom'
  12635. ? 'left' : 'right');
  12636. axShape.rotation = [
  12637. rotate * Math.PI / 180,
  12638. axShape.style.x,
  12639. axShape.style.y
  12640. ];
  12641. }
  12642. self.shapeList.push(axShape);
  12643. }
  12644. }
  12645. else {
  12646. // 纵向
  12647. var xPosition;
  12648. var align;
  12649. if (option.position == 'left') {
  12650. xPosition = grid.getX() - margin;
  12651. align = 'right';
  12652. }
  12653. else {
  12654. xPosition = grid.getXend() + margin;
  12655. align = 'left';
  12656. }
  12657. for (var i = 0; i < dataLength; i += _interval) {
  12658. dataTextStyle = zrUtil.merge(
  12659. data[i].textStyle || {},
  12660. textStyle,
  12661. {'overwrite': false}
  12662. );
  12663. axShape = {
  12664. shape : 'text',
  12665. zlevel : _zlevelBase,
  12666. hoverable : false,
  12667. style : {
  12668. x : xPosition,
  12669. y : getCoord(data[i].value || data[i]),
  12670. color : dataTextStyle.color,
  12671. text : _labelData[i].value || _labelData[i],
  12672. textFont : self.getFont(dataTextStyle),
  12673. textAlign : align,
  12674. textBaseline : 'middle'
  12675. }
  12676. };
  12677. if (rotate) {
  12678. axShape.rotation = [
  12679. rotate * Math.PI / 180,
  12680. axShape.style.x,
  12681. axShape.style.y
  12682. ];
  12683. }
  12684. self.shapeList.push(axShape);
  12685. }
  12686. }
  12687. }
  12688. function _buildSplitLine() {
  12689. var axShape;
  12690. var data = option.data;
  12691. var dataLength = option.data.length;
  12692. var color = option.splitLine.lineStyle.color;
  12693. color = color instanceof Array ? color : [color];
  12694. var colorLength = color.length;
  12695. if (option.position == 'bottom' || option.position == 'top') {
  12696. // 横向
  12697. var sy = grid.getY();
  12698. var ey = grid.getYend();
  12699. var x;
  12700. for (var i = 0; i < dataLength; i += _interval) {
  12701. x = getCoord(data[i].value || data[i]);
  12702. axShape = {
  12703. shape : 'line',
  12704. zlevel : _zlevelBase,
  12705. hoverable : false,
  12706. style : {
  12707. xStart : x,
  12708. yStart : sy,
  12709. xEnd : x,
  12710. yEnd : ey,
  12711. strokeColor : color[(i / _interval) % colorLength],
  12712. lineType : option.splitLine.lineStyle.type,
  12713. lineWidth : option.splitLine.lineStyle.width
  12714. }
  12715. };
  12716. self.shapeList.push(axShape);
  12717. }
  12718. }
  12719. else {
  12720. // 纵向
  12721. var sx = grid.getX();
  12722. var ex = grid.getXend();
  12723. var y;
  12724. for (var i = 0; i < dataLength; i += _interval) {
  12725. y = getCoord(data[i].value || data[i]);
  12726. axShape = {
  12727. shape : 'line',
  12728. zlevel : _zlevelBase,
  12729. hoverable : false,
  12730. style : {
  12731. xStart : sx,
  12732. yStart : y,
  12733. xEnd : ex,
  12734. yEnd : y,
  12735. strokeColor : color[(i / _interval) % colorLength],
  12736. linetype : option.splitLine.lineStyle.type,
  12737. lineWidth : option.splitLine.lineStyle.width
  12738. }
  12739. };
  12740. self.shapeList.push(axShape);
  12741. }
  12742. }
  12743. }
  12744. function _buildSplitArea() {
  12745. var axShape;
  12746. var color = option.splitArea.areaStyle.color;
  12747. color = color instanceof Array ? color : [color];
  12748. var colorLength = color.length;
  12749. var data = option.data;
  12750. var dataLength = option.data.length;
  12751. if (option.position == 'bottom' || option.position == 'top') {
  12752. // 横向
  12753. var y = grid.getY();
  12754. var height = grid.getHeight();
  12755. var lastX = grid.getX();
  12756. var curX;
  12757. for (var i = 0; i <= dataLength; i += _interval) {
  12758. curX = i < dataLength
  12759. ? getCoord(data[i].value || data[i])
  12760. : grid.getXend();
  12761. axShape = {
  12762. shape : 'rectangle',
  12763. zlevel : _zlevelBase,
  12764. hoverable : false,
  12765. style : {
  12766. x : lastX,
  12767. y : y,
  12768. width : curX - lastX,
  12769. height : height,
  12770. color : color[(i / _interval) % colorLength]
  12771. // type : option.splitArea.areaStyle.type,
  12772. }
  12773. };
  12774. self.shapeList.push(axShape);
  12775. lastX = curX;
  12776. }
  12777. }
  12778. else {
  12779. // 纵向
  12780. var x = grid.getX();
  12781. var width = grid.getWidth();
  12782. var lastYend = grid.getYend();
  12783. var curY;
  12784. for (var i = 0; i <= dataLength; i += _interval) {
  12785. curY = i < dataLength
  12786. ? getCoord(data[i].value || data[i])
  12787. : grid.getY();
  12788. axShape = {
  12789. shape : 'rectangle',
  12790. zlevel : _zlevelBase,
  12791. hoverable : false,
  12792. style : {
  12793. x : x,
  12794. y : curY,
  12795. width : width,
  12796. height : lastYend - curY,
  12797. color : color[(i / _interval) % colorLength]
  12798. // type : option.splitArea.areaStyle.type
  12799. }
  12800. };
  12801. self.shapeList.push(axShape);
  12802. lastYend = curY;
  12803. }
  12804. }
  12805. }
  12806. /**
  12807. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  12808. * @param {Object} newZr
  12809. * @param {Object} newOption
  12810. * @param {Object} newGrid
  12811. */
  12812. function init(newOption, newGrid) {
  12813. if (newOption.data.length < 1) {
  12814. return;
  12815. }
  12816. grid = newGrid;
  12817. refresh(newOption);
  12818. }
  12819. /**
  12820. * 刷新
  12821. */
  12822. function refresh(newOption) {
  12823. if (newOption) {
  12824. option = self.reformOption(newOption);
  12825. // 通用字体设置
  12826. option.axisLabel.textStyle = zrUtil.merge(
  12827. option.axisLabel.textStyle || {},
  12828. ecConfig.textStyle,
  12829. {
  12830. 'overwrite' : false,
  12831. 'recursive' : true
  12832. }
  12833. );
  12834. option.axisLabel.textStyle = zrUtil.merge(
  12835. option.axisLabel.textStyle || {},
  12836. ecConfig.textStyle,
  12837. {
  12838. 'overwrite' : false,
  12839. 'recursive' : true
  12840. }
  12841. );
  12842. }
  12843. self.clear();
  12844. _buildShape();
  12845. }
  12846. /**
  12847. * 返回间隔
  12848. */
  12849. function getGap() {
  12850. var dataLength = option.data.length;
  12851. var total = (option.position == 'bottom'
  12852. || option.position == 'top')
  12853. ? grid.getWidth()
  12854. : grid.getHeight();
  12855. if (option.boundaryGap) { // 留空
  12856. return total / (dataLength + 1);
  12857. }
  12858. else { // 顶头
  12859. return total / (dataLength > 1 ? (dataLength - 1) : 1);
  12860. }
  12861. }
  12862. // 根据值换算位置
  12863. function getCoord(value) {
  12864. var data = option.data;
  12865. var dataLength = data.length;
  12866. var gap = getGap();
  12867. var position = option.boundaryGap ? gap : 0;
  12868. // Math.floor可能引起一些偏差,但性能会更好
  12869. for (var i = 0; i < dataLength; i++) {
  12870. if (data[i] == value
  12871. || (typeof data[i].value != 'undefined'
  12872. && data[i].value == value)
  12873. ) {
  12874. if (option.position == 'bottom'
  12875. || option.position == 'top'
  12876. ) {
  12877. // 横向
  12878. position = grid.getX() + position;
  12879. }
  12880. else {
  12881. // 纵向
  12882. position = grid.getYend() - position;
  12883. }
  12884. return (i === 0 || i == dataLength - 1)
  12885. ? position
  12886. : Math.floor(position);
  12887. }
  12888. position += gap;
  12889. }
  12890. }
  12891. // 根据类目轴数据索引换算位置
  12892. function getCoordByIndex(dataIndex) {
  12893. if (dataIndex < 0) {
  12894. if (option.position == 'bottom' || option.position == 'top') {
  12895. return grid.getX();
  12896. }
  12897. else {
  12898. return grid.getYend();
  12899. }
  12900. }
  12901. else if (dataIndex >= option.data.length) {
  12902. if (option.position == 'bottom' || option.position == 'top') {
  12903. return grid.getXend();
  12904. }
  12905. else {
  12906. return grid.getY();
  12907. }
  12908. }
  12909. else {
  12910. var gap = getGap();
  12911. var position = option.boundaryGap ? gap : 0;
  12912. position += dataIndex * gap;
  12913. if (option.position == 'bottom'
  12914. || option.position == 'top'
  12915. ) {
  12916. // 横向
  12917. position = grid.getX() + position;
  12918. }
  12919. else {
  12920. // 纵向
  12921. position = grid.getYend() - position;
  12922. }
  12923. return (dataIndex === 0 || dataIndex == option.data.length - 1)
  12924. ? position
  12925. : Math.floor(position);
  12926. // return getCoord(option.data[dataIndex]);
  12927. }
  12928. }
  12929. // 根据类目轴数据索引换算类目轴名称
  12930. function getNameByIndex(dataIndex) {
  12931. return option.data[dataIndex];
  12932. }
  12933. /**
  12934. * 根据类目轴数据索引返回是否为主轴线
  12935. * @param {number} dataIndex 类目轴数据索引
  12936. * @return {boolean} 是否为主轴
  12937. */
  12938. function isMainAxis(dataIndex) {
  12939. return dataIndex % _interval === 0;
  12940. }
  12941. function getPosition() {
  12942. return option.position;
  12943. }
  12944. self.init = init;
  12945. self.refresh = refresh;
  12946. self.getGap = getGap;
  12947. self.getCoord = getCoord;
  12948. self.getCoordByIndex = getCoordByIndex;
  12949. self.getNameByIndex = getNameByIndex;
  12950. self.isMainAxis = isMainAxis;
  12951. self.getPosition = getPosition;
  12952. init(option, grid);
  12953. }
  12954. require('../component').define('categoryAxis', CategoryAxis);
  12955. return CategoryAxis;
  12956. });
  12957. /**
  12958. * echarts组件: 数值轴
  12959. *
  12960. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  12961. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  12962. *
  12963. */
  12964. define('echarts/component/valueAxis',['require','./base','../config','zrender/tool/util','../component'],function (require) {
  12965. /**
  12966. * 构造函数
  12967. * @param {Object} messageCenter echart消息中心
  12968. * @param {ZRender} zr zrender实例
  12969. * @param {Object} option 类目轴参数
  12970. * @param {Grid} grid 网格对象
  12971. * @param {Array} series 数据对象
  12972. */
  12973. function ValueAxis(messageCenter, zr, option, component, series) {
  12974. var Base = require('./base');
  12975. Base.call(this, zr);
  12976. var ecConfig = require('../config');
  12977. var zrUtil = require('zrender/tool/util');
  12978. var self = this;
  12979. self.type = ecConfig.COMPONENT_TYPE_AXIS_VALUE;
  12980. var grid = component.grid;
  12981. var _zlevelBase = self.getZlevelBase();
  12982. var _min;
  12983. var _max;
  12984. var _hasData;
  12985. var _valueList;
  12986. var _valueLabel;
  12987. function _buildShape() {
  12988. _hasData = false;
  12989. _calculateValue();
  12990. if (!_hasData) {
  12991. return;
  12992. }
  12993. option.splitArea.show && _buildSplitArea();
  12994. option.splitLine.show && _buildSplitLine();
  12995. option.axisLine.show && _buildAxisLine();
  12996. option.axisTick.show && _buildAxisTick();
  12997. option.axisLabel.show && _buildAxisLabel();
  12998. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  12999. self.shapeList[i].id = zr.newShapeId(self.type);
  13000. zr.addShape(self.shapeList[i]);
  13001. }
  13002. }
  13003. // 轴线
  13004. function _buildAxisLine() {
  13005. var axShape = {
  13006. shape : 'line',
  13007. zlevel : _zlevelBase + 1,
  13008. hoverable : false
  13009. };
  13010. switch (option.position) {
  13011. case 'left' :
  13012. axShape.style = {
  13013. xStart : grid.getX(),
  13014. yStart : grid.getYend(),
  13015. xEnd : grid.getX(),
  13016. yEnd : grid.getY()
  13017. };
  13018. break;
  13019. case 'right' :
  13020. axShape.style = {
  13021. xStart : grid.getXend(),
  13022. yStart : grid.getYend(),
  13023. xEnd : grid.getXend(),
  13024. yEnd : grid.getY()
  13025. };
  13026. break;
  13027. case 'bottom' :
  13028. axShape.style = {
  13029. xStart : grid.getX(),
  13030. yStart : grid.getYend(),
  13031. xEnd : grid.getXend(),
  13032. yEnd : grid.getYend()
  13033. };
  13034. break;
  13035. case 'top' :
  13036. axShape.style = {
  13037. xStart : grid.getX(),
  13038. yStart : grid.getY(),
  13039. xEnd : grid.getXend(),
  13040. yEnd : grid.getY()
  13041. };
  13042. break;
  13043. }
  13044. if (option.name !== '') {
  13045. axShape.style.text = option.name;
  13046. axShape.style.textPosition = option.nameLocation;
  13047. }
  13048. axShape.style.strokeColor = option.axisLine.lineStyle.color;
  13049. axShape.style.lineWidth = option.axisLine.lineStyle.width;
  13050. axShape.style.lineType = option.axisLine.lineStyle.type;
  13051. self.shapeList.push(axShape);
  13052. }
  13053. // 小标记
  13054. function _buildAxisTick() {
  13055. var axShape;
  13056. var data = _valueList;
  13057. var dataLength = _valueList.length;
  13058. var length = option.axisTick.length;
  13059. var color = option.axisTick.lineStyle.color;
  13060. var lineWidth = option.axisTick.lineStyle.width;
  13061. if (option.position == 'bottom' || option.position == 'top') {
  13062. // 横向
  13063. var yPosition = option.position == 'bottom'
  13064. ? grid.getYend()
  13065. : (grid.getY() - length);
  13066. for (var i = 0; i < dataLength; i++) {
  13067. axShape = {
  13068. shape : 'line',
  13069. zlevel : _zlevelBase,
  13070. hoverable : false,
  13071. style : {
  13072. xStart : getCoord(data[i]),
  13073. yStart : yPosition,
  13074. xEnd : getCoord(data[i]),
  13075. yEnd : yPosition + length,
  13076. strokeColor : color,
  13077. lineWidth : lineWidth
  13078. }
  13079. };
  13080. self.shapeList.push(axShape);
  13081. }
  13082. }
  13083. else {
  13084. // 纵向
  13085. var xPosition = option.position == 'left'
  13086. ? (grid.getX() - length)
  13087. : grid.getXend();
  13088. for (var i = 0; i < dataLength; i++) {
  13089. axShape = {
  13090. shape : 'line',
  13091. zlevel : _zlevelBase,
  13092. hoverable : false,
  13093. style : {
  13094. xStart : xPosition,
  13095. yStart : getCoord(data[i]),
  13096. xEnd : xPosition + length,
  13097. yEnd : getCoord(data[i]),
  13098. strokeColor : color,
  13099. lineWidth : lineWidth
  13100. }
  13101. };
  13102. self.shapeList.push(axShape);
  13103. }
  13104. }
  13105. }
  13106. // 坐标轴文本
  13107. function _buildAxisLabel() {
  13108. var axShape;
  13109. var data = _valueList;
  13110. var dataLength = _valueList.length;
  13111. var rotate = option.axisLabel.rotate;
  13112. var margin = option.axisLabel.margin;
  13113. var textStyle = option.axisLabel.textStyle;
  13114. if (option.position == 'bottom' || option.position == 'top') {
  13115. // 横向
  13116. var yPosition;
  13117. var baseLine;
  13118. if (option.position == 'bottom') {
  13119. yPosition = grid.getYend() + margin;
  13120. baseLine = 'top';
  13121. }
  13122. else {
  13123. yPosition = grid.getY() - margin;
  13124. baseLine = 'bottom';
  13125. }
  13126. for (var i = 0; i < dataLength; i++) {
  13127. axShape = {
  13128. shape : 'text',
  13129. zlevel : _zlevelBase,
  13130. hoverable : false,
  13131. style : {
  13132. x : getCoord(data[i]),
  13133. y : yPosition,
  13134. color : textStyle.color,
  13135. text : _valueLabel[i],
  13136. textFont : self.getFont(textStyle),
  13137. textAlign : (i === 0 && option.name !== '')
  13138. ? 'left'
  13139. : (i == (dataLength - 1)
  13140. && option.name !== '')
  13141. ? 'right'
  13142. : 'center',
  13143. textBaseline : baseLine
  13144. }
  13145. };
  13146. if (rotate) {
  13147. axShape.style.textAlign = rotate > 0
  13148. ? (option.position == 'bottom'
  13149. ? 'right' : 'left')
  13150. : (option.position == 'bottom'
  13151. ? 'left' : 'right');
  13152. axShape.rotation = [
  13153. rotate * Math.PI / 180,
  13154. axShape.style.x,
  13155. axShape.style.y
  13156. ];
  13157. }
  13158. self.shapeList.push(axShape);
  13159. }
  13160. }
  13161. else {
  13162. // 纵向
  13163. var xPosition;
  13164. var align;
  13165. if (option.position == 'left') {
  13166. xPosition = grid.getX() - margin;
  13167. align = 'right';
  13168. }
  13169. else {
  13170. xPosition = grid.getXend() + margin;
  13171. align = 'left';
  13172. }
  13173. for (var i = 0; i < dataLength; i++) {
  13174. axShape = {
  13175. shape : 'text',
  13176. zlevel : _zlevelBase,
  13177. hoverable : false,
  13178. style : {
  13179. x : xPosition,
  13180. y : getCoord(data[i]),
  13181. color : textStyle.color,
  13182. text : _valueLabel[i],
  13183. textFont : self.getFont(textStyle),
  13184. textAlign : align,
  13185. textBaseline : (i === 0 && option.name !== '')
  13186. ? 'bottom'
  13187. : (i == (dataLength - 1)
  13188. && option.name !== '')
  13189. ? 'top'
  13190. : 'middle'
  13191. }
  13192. };
  13193. if (rotate) {
  13194. axShape.rotation = [
  13195. rotate * Math.PI / 180,
  13196. axShape.style.x,
  13197. axShape.style.y
  13198. ];
  13199. }
  13200. self.shapeList.push(axShape);
  13201. }
  13202. }
  13203. }
  13204. function _buildSplitLine() {
  13205. var axShape;
  13206. var data = _valueList;
  13207. var dataLength = _valueList.length;
  13208. var color = option.splitLine.lineStyle.color;
  13209. color = color instanceof Array ? color : [color];
  13210. var colorLength = color.length;
  13211. if (option.position == 'bottom' || option.position == 'top') {
  13212. // 横向
  13213. var sy = grid.getY();
  13214. var ey = grid.getYend();
  13215. var x;
  13216. for (var i = 0; i < dataLength; i++) {
  13217. x = getCoord(data[i]);
  13218. axShape = {
  13219. shape : 'line',
  13220. zlevel : _zlevelBase,
  13221. hoverable : false,
  13222. style : {
  13223. xStart : x,
  13224. yStart : sy,
  13225. xEnd : x,
  13226. yEnd : ey,
  13227. strokeColor : color[i % colorLength],
  13228. lineType : option.splitLine.lineStyle.type,
  13229. lineWidth : option.splitLine.lineStyle.width
  13230. }
  13231. };
  13232. self.shapeList.push(axShape);
  13233. }
  13234. }
  13235. else {
  13236. // 纵向
  13237. var sx = grid.getX();
  13238. var ex = grid.getXend();
  13239. var y;
  13240. for (var i = 0; i < dataLength; i++) {
  13241. y = getCoord(data[i]);
  13242. axShape = {
  13243. shape : 'line',
  13244. zlevel : _zlevelBase,
  13245. hoverable : false,
  13246. style : {
  13247. xStart : sx,
  13248. yStart : y,
  13249. xEnd : ex,
  13250. yEnd : y,
  13251. strokeColor : color[i % colorLength],
  13252. lineType : option.splitLine.lineStyle.type,
  13253. lineWidth : option.splitLine.lineStyle.width
  13254. }
  13255. };
  13256. self.shapeList.push(axShape);
  13257. }
  13258. }
  13259. }
  13260. function _buildSplitArea() {
  13261. var axShape;
  13262. var color = option.splitArea.areaStyle.color;
  13263. if (!(color instanceof Array)) {
  13264. // 非数组一律认为是单一颜色的字符串,单一颜色则用一个背景,颜色错误不负责啊!!!
  13265. axShape = {
  13266. shape : 'rectangle',
  13267. zlevel : _zlevelBase,
  13268. hoverable : false,
  13269. style : {
  13270. x : grid.getX(),
  13271. y : grid.getY(),
  13272. width : grid.getWidth(),
  13273. height : grid.getHeight(),
  13274. color : color
  13275. // type : option.splitArea.areaStyle.type,
  13276. }
  13277. };
  13278. self.shapeList.push(axShape);
  13279. }
  13280. else {
  13281. // 多颜色
  13282. var colorLength = color.length;
  13283. var data = _valueList;
  13284. var dataLength = _valueList.length;
  13285. if (option.position == 'bottom' || option.position == 'top') {
  13286. // 横向
  13287. var y = grid.getY();
  13288. var height = grid.getHeight();
  13289. var lastX = grid.getX();
  13290. var curX;
  13291. for (var i = 0; i <= dataLength; i++) {
  13292. curX = i < dataLength
  13293. ? getCoord(data[i])
  13294. : grid.getXend();
  13295. axShape = {
  13296. shape : 'rectangle',
  13297. zlevel : _zlevelBase,
  13298. hoverable : false,
  13299. style : {
  13300. x : lastX,
  13301. y : y,
  13302. width : curX - lastX,
  13303. height : height,
  13304. color : color[i % colorLength]
  13305. // type : option.splitArea.areaStyle.type,
  13306. }
  13307. };
  13308. self.shapeList.push(axShape);
  13309. lastX = curX;
  13310. }
  13311. }
  13312. else {
  13313. // 纵向
  13314. var x = grid.getX();
  13315. var width = grid.getWidth();
  13316. var lastYend = grid.getYend();
  13317. var curY;
  13318. for (var i = 0; i <= dataLength; i++) {
  13319. curY = i < dataLength
  13320. ? getCoord(data[i])
  13321. : grid.getY();
  13322. axShape = {
  13323. shape : 'rectangle',
  13324. zlevel : _zlevelBase,
  13325. hoverable : false,
  13326. style : {
  13327. x : x,
  13328. y : curY,
  13329. width : width,
  13330. height : lastYend - curY,
  13331. color : color[i % colorLength]
  13332. // type : option.splitArea.areaStyle.type
  13333. }
  13334. };
  13335. self.shapeList.push(axShape);
  13336. lastYend = curY;
  13337. }
  13338. }
  13339. }
  13340. }
  13341. /**
  13342. * 极值计算
  13343. */
  13344. function _calculateValue() {
  13345. if (isNaN(option.min) || isNaN(option.max)) {
  13346. // 有一个没指定都得算
  13347. // 数据整形
  13348. var oriData; // 原始数据
  13349. var data = {}; // 整形后数据抽取
  13350. var value;
  13351. var xIdx;
  13352. var yIdx;
  13353. var legend = component.legend;
  13354. for (var i = 0, l = series.length; i < l; i++) {
  13355. if (series[i].type != ecConfig.CHART_TYPE_LINE
  13356. && series[i].type != ecConfig.CHART_TYPE_BAR
  13357. && series[i].type != ecConfig.CHART_TYPE_SCATTER
  13358. && series[i].type != ecConfig.CHART_TYPE_K
  13359. ) {
  13360. // 非坐标轴支持的不算极值
  13361. continue;
  13362. }
  13363. // 请允许我写开,跟上面一个不是一样东西
  13364. if (legend && !legend.isSelected(series[i].name)){
  13365. continue;
  13366. }
  13367. // 不指定默认为第一轴线
  13368. xIdx = series[i].xAxisIndex || 0;
  13369. yIdx = series[i].yAxisIndex || 0;
  13370. if ((option.xAxisIndex != xIdx)
  13371. && (option.yAxisIndex != yIdx)
  13372. ) {
  13373. // 不是自己的数据不计算极值
  13374. continue;
  13375. }
  13376. if (!series[i].stack) {
  13377. var key = series[i].name || '';
  13378. data[key] = [];
  13379. oriData = series[i].data;
  13380. for (var j = 0, k = oriData.length; j < k; j++) {
  13381. value = typeof oriData[j].value != 'undefined'
  13382. ? oriData[j].value
  13383. : oriData[j];
  13384. if (series[i].type == ecConfig.CHART_TYPE_SCATTER) {
  13385. if (option.xAxisIndex != -1) {
  13386. data[key].push(value[0]);
  13387. }
  13388. if (option.yAxisIndex != -1) {
  13389. data[key].push(value[1]);
  13390. }
  13391. }
  13392. else if (series[i].type == ecConfig.CHART_TYPE_K) {
  13393. data[key].push(value[0]);
  13394. data[key].push(value[1]);
  13395. data[key].push(value[2]);
  13396. data[key].push(value[3]);
  13397. }
  13398. else {
  13399. data[key].push(value);
  13400. }
  13401. }
  13402. }
  13403. else {
  13404. // 堆叠数据,需要区分正负向堆叠
  13405. var keyP = '__Magic_Key_Positive__' + series[i].stack;
  13406. var keyN = '__Magic_Key_Negative__' + series[i].stack;
  13407. data[keyP] = data[keyP] || [];
  13408. data[keyN] = data[keyN] || [];
  13409. oriData = series[i].data;
  13410. for (var j = 0, k = oriData.length; j < k; j++) {
  13411. value = typeof oriData[j].value != 'undefined'
  13412. ? oriData[j].value
  13413. : oriData[j];
  13414. if (value == '-') {
  13415. continue;
  13416. }
  13417. value = value - 0;
  13418. if (value >= 0) {
  13419. if (typeof data[keyP][j] != 'undefined') {
  13420. data[keyP][j] += value;
  13421. }
  13422. else {
  13423. data[keyP][j] = value;
  13424. }
  13425. }
  13426. else {
  13427. if (typeof data[keyN][j] != 'undefined') {
  13428. data[keyN][j] += value;
  13429. }
  13430. else {
  13431. data[keyN][j] = value;
  13432. }
  13433. }
  13434. }
  13435. }
  13436. }
  13437. // 找极值
  13438. for (var i in data){
  13439. oriData = data[i];
  13440. for (var j = 0, k = oriData.length; j < k; j++) {
  13441. if (!isNaN(oriData[j])){
  13442. _hasData = true;
  13443. _min = oriData[j];
  13444. _max = oriData[j];
  13445. break;
  13446. }
  13447. }
  13448. if (_hasData) {
  13449. break;
  13450. }
  13451. }
  13452. for (var i in data){
  13453. oriData = data[i];
  13454. for (var j = 0, k = oriData.length; j < k; j++) {
  13455. if (!isNaN(oriData[j])){
  13456. _min = Math.min(_min, oriData[j]);
  13457. _max = Math.max(_max, oriData[j]);
  13458. }
  13459. }
  13460. }
  13461. }
  13462. else {
  13463. _hasData = true;
  13464. }
  13465. //console.log(_min,_max,'vvvvv111111')
  13466. _min = isNaN(option.min)
  13467. ? (_min - Math.abs(_min * option.boundaryGap[0]))
  13468. : option.min; // 指定min忽略boundaryGay[0]
  13469. _max = isNaN(option.max)
  13470. ? (_max + Math.abs(_max * option.boundaryGap[1]))
  13471. : option.max; // 指定max忽略boundaryGay[1]
  13472. if (_min == _max) {
  13473. _max += 1;
  13474. }
  13475. _reformValue(option.scale);
  13476. }
  13477. /**
  13478. * 找到原始数据的极值后根据选项整形最终 _min / _max / _valueList
  13479. * 如果你不知道这个“整形”的用义,请不要试图去理解和修改这个方法!找我也没用,我相信我已经记不起来!
  13480. * 如果你有更简洁的数学推导欢迎重写,后果自负~
  13481. * 一旦你不得不遇到了需要修改或重写的厄运,希望下面的脚手架能帮助你
  13482. * ps:其实我是想说别搞砸了!升级后至少得保证这些case通过!!
  13483. *
  13484. * by linzhifeng@baidu.com 2013-1-8
  13485. * --------
  13486. _valueList = [];
  13487. option = {splitNumber:5,power:100,precision:0};
  13488. _min = 1; _max = 123; console.log(_min, _max); _reformValue();
  13489. console.log('result is :', _min, _max, _valueList);
  13490. console.log('should be : 0 150 [0, 30, 60, 90, 120, 150]',
  13491. (_min == 0 && _max == 150) ? 'success' : 'failed');
  13492. _min = 10; _max = 1923; console.log(_min, _max); _reformValue();
  13493. console.log('result is :', _min, _max, _valueList);
  13494. console.log('should be : 0 2000 [0, 400, 800, 1200, 1600, 2000]',
  13495. (_min == 0 && _max == 2000) ? 'success' : 'failed');
  13496. _min = 10; _max = 78; console.log(_min, _max); _reformValue();
  13497. console.log('result is :', _min, _max, _valueList);
  13498. console.log('should be : 0 100 [0, 20, 40, 60, 80, 100]',
  13499. (_min == 0 && _max == 100) ? 'success' : 'failed');
  13500. _min = -31; _max = -3; console.log(_min, _max); _reformValue();
  13501. console.log('result is :', _min, _max, _valueList);
  13502. console.log('should be : -35 0 [-35, -28, -21, -14, -7, 0]',
  13503. (_min == -35 && _max == 0) ? 'success' : 'failed');
  13504. _min = -51; _max = 203; console.log(_min, _max); _reformValue();
  13505. console.log('result is :', _min, _max, _valueList);
  13506. console.log('should be : -60 240 [-60, 0, 60, 120, 180, 240]',
  13507. (_min == -60 && _max == 240) ? 'success' : 'failed');
  13508. _min = -251; _max = 23; console.log(_min, _max); _reformValue();
  13509. console.log('result is :', _min, _max, _valueList);
  13510. console.log('should be : -280 70 [-280, -210, -140, -70, 0, 70]',
  13511. (_min == -280 && _max == 70) ? 'success' : 'failed');
  13512. option.precision = 2;
  13513. _min = 0.23; _max = 0.78; console.log(_min, _max); _reformValue();
  13514. console.log('result is :', _min, _max, _valueList);
  13515. console.log('should be : 0.00 1.00'
  13516. + '["0.00", "0.20", "0.40", "0.60", "0.80", "1.00"]',
  13517. (_min == 0.00 && _max == 1.00) ? 'success' : 'failed');
  13518. _min = -12.23; _max = -0.78; console.log(_min, _max);
  13519. _reformValue();
  13520. console.log('result is :', _min, _max, _valueList);
  13521. console.log('should be : -15.00 0.00'
  13522. + '["-15.00", "-12.00", "-9.00", "-6.00", "-3.00", "0.00"]',
  13523. (_min == -15.00 && _max == 0.00) ? 'success' : 'failed');
  13524. _min = -0.23; _max = 0.78; console.log(_min, _max); _reformValue();
  13525. console.log('result is :', _min, _max, _valueList);
  13526. console.log('should be : -0.30 1.20'
  13527. + '["-0.30", "0.00", "0.30", "0.60", "0.90", "1.20"]',
  13528. (_min == -0.30 && _max == 1.20) ? 'success' : 'failed');
  13529. _min = -1.23; _max = 0.78; console.log(_min, _max); _reformValue();
  13530. console.log('result is :', _min, _max, _valueList);
  13531. console.log('should be : -1.50 1.00'
  13532. + '["-1.50", "-1.00", "-0.50", "0.00", "0.50", "1.00"]',
  13533. (_min == -1.50 && _max == 1.00) ? 'success' : 'failed');
  13534. option.precision = 1;
  13535. _min = -2.3; _max = 0.5; console.log(_min, _max); _reformValue();
  13536. console.log('result is :', _min, _max, _valueList);
  13537. console.log('should be : -2.4 0.6'
  13538. + '["-2.4", "-1.8", "-1.2", "-0.6", "0.0", "0.6"]',
  13539. (_min == -2.4 && _max == 0.6) ? 'success' : 'failed');
  13540. * --------
  13541. */
  13542. function _reformValue(scale) {
  13543. var splitNumber = option.splitNumber;
  13544. var precision = option.precision;
  13545. var splitGap;
  13546. var power;
  13547. if (precision === 0) { // 整数
  13548. power = option.power;
  13549. }
  13550. else { // 小数
  13551. // 放大倍数后复用整数逻辑,最后再缩小回去
  13552. power = Math.pow(10, precision);
  13553. _min *= power;
  13554. _max *= power;
  13555. power = option.power;
  13556. }
  13557. // console.log(_min,_max)
  13558. var total;
  13559. if (_min >= 0 && _max >= 0) {
  13560. // 双正
  13561. if (!scale) {
  13562. _min = 0;
  13563. }
  13564. // power自动降级
  13565. while ((_max / power < splitNumber) && power != 1) {
  13566. power = power / 10;
  13567. }
  13568. total = _max - _min;
  13569. // 粗算
  13570. splitGap = Math.ceil((total / splitNumber) / power) * power;
  13571. if (scale) {
  13572. if (precision === 0) { // 整数
  13573. _min = Math.floor(_min / splitGap) * splitGap;
  13574. }
  13575. // 修正
  13576. if (_min + splitGap * splitNumber < _max) {
  13577. splitGap =
  13578. Math.ceil(((_max - _min) / splitNumber) / power)
  13579. * power;
  13580. }
  13581. }
  13582. _max = _min + splitGap * splitNumber;
  13583. }
  13584. else if (_min <= 0 && _max <= 0) {
  13585. // 双负
  13586. if (!scale) {
  13587. _max = 0;
  13588. }
  13589. power = -power;
  13590. // power自动降级
  13591. while ((_min / power < splitNumber) && power != -1) {
  13592. power = power / 10;
  13593. }
  13594. total = _min - _max;
  13595. splitGap = -Math.ceil((total / splitNumber) / power) * power;
  13596. if (scale) {
  13597. if (precision === 0) { // 整数
  13598. _max = Math.ceil(_max / splitGap) * splitGap;
  13599. }
  13600. // 修正
  13601. if (_max - splitGap * splitNumber > _min) {
  13602. splitGap =
  13603. Math.ceil(((_min - _max) / splitNumber) / power)
  13604. * power;
  13605. }
  13606. }
  13607. _min = -splitGap * splitNumber + _max;
  13608. }
  13609. else {
  13610. // 一正一负,确保0被选中
  13611. total = _max - _min;
  13612. // power自动降级
  13613. while ((total / power < splitNumber) && power != 1) {
  13614. power = power/10;
  13615. }
  13616. // 正数部分的分隔数
  13617. var partSplitNumber = Math.round(_max / total * splitNumber);
  13618. // 修正数据范围极度偏正向,留给负数一个
  13619. partSplitNumber -= (partSplitNumber == splitNumber ? 1 : 0);
  13620. // 修正数据范围极度偏负向,留给正数一个
  13621. partSplitNumber += partSplitNumber === 0 ? 1 : 0;
  13622. splitGap = (Math.ceil(Math.max(
  13623. _max / partSplitNumber,
  13624. _min / (partSplitNumber - splitNumber)
  13625. )
  13626. / power))
  13627. * power;
  13628. _max = splitGap * partSplitNumber;
  13629. _min = splitGap * (partSplitNumber - splitNumber);
  13630. }
  13631. //console.log(_min,_max,'vvvvvrrrrrr')
  13632. _valueList = [];
  13633. for (var i = 0; i <= splitNumber; i++) {
  13634. _valueList.push(_min + splitGap * i);
  13635. }
  13636. if (precision !== 0) { // 小数
  13637. // 放大倍数后复用整数逻辑,最后再缩小回去
  13638. power = Math.pow(10, precision);
  13639. _min = (_min / power).toFixed(precision) - 0;
  13640. _max = (_max / power).toFixed(precision) - 0;
  13641. for (var i = 0; i <= splitNumber; i++) {
  13642. _valueList[i] = (_valueList[i] / power).toFixed(precision);
  13643. }
  13644. }
  13645. _reformLabelData();
  13646. }
  13647. function _reformLabelData() {
  13648. _valueLabel = [];
  13649. var formatter = option.axisLabel.formatter;
  13650. if (formatter) {
  13651. for (var i = 0, l = _valueList.length; i < l; i++) {
  13652. if (typeof formatter == 'function') {
  13653. _valueLabel.push(formatter(_valueList[i]));
  13654. }
  13655. else if (typeof formatter == 'string') {
  13656. _valueLabel.push(
  13657. formatter.replace('{value}',_valueList[i])
  13658. );
  13659. }
  13660. }
  13661. }
  13662. else {
  13663. _valueLabel = _valueList;
  13664. }
  13665. }
  13666. function getExtremum() {
  13667. _calculateValue();
  13668. return {
  13669. min: _min,
  13670. max: _max
  13671. };
  13672. }
  13673. /**
  13674. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  13675. * @param {Object} newZr
  13676. * @param {Object} newOption
  13677. * @param {Object} newGrid
  13678. */
  13679. function init(newOption, newGrid, newSeries) {
  13680. if (!newSeries || newSeries.length === 0) {
  13681. return;
  13682. }
  13683. grid = newGrid;
  13684. refresh(newOption, newSeries);
  13685. }
  13686. /**
  13687. * 刷新
  13688. */
  13689. function refresh(newOption, newSeries) {
  13690. if (newOption) {
  13691. option = self.reformOption(newOption);
  13692. // 通用字体设置
  13693. option.axisLabel.textStyle = zrUtil.merge(
  13694. option.axisLabel.textStyle || {},
  13695. ecConfig.textStyle,
  13696. {
  13697. 'overwrite' : false,
  13698. 'recursive' : true
  13699. }
  13700. );
  13701. option.axisLabel.textStyle = zrUtil.merge(
  13702. option.axisLabel.textStyle || {},
  13703. ecConfig.textStyle,
  13704. {
  13705. 'overwrite' : false,
  13706. 'recursive' : true
  13707. }
  13708. );
  13709. series = newSeries;
  13710. }
  13711. if (zr) { // 数值轴的另外一个功能只是用来计算极值
  13712. self.clear();
  13713. _buildShape();
  13714. }
  13715. }
  13716. // 根据值换算位置
  13717. function getCoord(value) {
  13718. value = value < _min ? _min : value;
  13719. value = value > _max ? _max : value;
  13720. var valueRange = _max - _min;
  13721. var total;
  13722. var result;
  13723. if (option.position == 'left' || option.position == 'right') {
  13724. // 纵向
  13725. total = grid.getHeight();
  13726. result = grid.getYend() - (value - _min) / valueRange * total;
  13727. }
  13728. else {
  13729. // 横向
  13730. total = grid.getWidth();
  13731. result = (value - _min) / valueRange * total + grid.getX();
  13732. }
  13733. // Math.floor可能引起一些偏差,但性能会更好
  13734. return (value == _min || value == _max)
  13735. ? result
  13736. : Math.floor(result);
  13737. }
  13738. function getPosition() {
  13739. return option.position;
  13740. }
  13741. self.init = init;
  13742. self.refresh = refresh;
  13743. self.getExtremum = getExtremum;
  13744. self.getCoord = getCoord;
  13745. self.getPosition = getPosition;
  13746. init(option, grid, series);
  13747. }
  13748. require('../component').define('valueAxis', ValueAxis);
  13749. return ValueAxis;
  13750. });
  13751. /**
  13752. * echarts组件类: 坐标轴
  13753. *
  13754. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  13755. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  13756. *
  13757. * 直角坐标系中坐标轴数组,数组中每一项代表一条横轴(纵轴)坐标轴。
  13758. * 标准(1.0)中规定最多同时存在2条横轴和2条纵轴
  13759. * 单条横轴时可指定安放于grid的底部(默认)或顶部,2条同时存在时则默认第一条安放于底部,第二天安放于顶部
  13760. * 单条纵轴时可指定安放于grid的左侧(默认)或右侧,2条同时存在时则默认第一条安放于左侧,第二天安放于右侧。
  13761. * 坐标轴有两种类型,类目型和数值型(区别详见axis):
  13762. * 横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型
  13763. * 纵轴通常为数值型,但条形图时则纵轴为类目型。
  13764. *
  13765. */
  13766. define('echarts/component/axis',['require','./base','../config','./categoryAxis','./valueAxis','../component'],function (require) {
  13767. /**
  13768. * 构造函数
  13769. * @param {Object} messageCenter echart消息中心
  13770. * @param {ZRender} zr zrender实例
  13771. * @param {Object} option 图表选项
  13772. * @param {string=} option.xAxis.type 坐标轴类型,横轴默认为类目型'category'
  13773. * @param {string=} option.yAxis.type 坐标轴类型,纵轴默认为类目型'value'
  13774. * @param {Object} component 组件
  13775. * @param {string} axisType 横走or纵轴
  13776. */
  13777. function Axis(messageCenter, zr, option, component, axisType) {
  13778. var Base = require('./base');
  13779. Base.call(this, zr);
  13780. var ecConfig = require('../config');
  13781. var self = this;
  13782. self.type = ecConfig.COMPONENT_TYPE_AXIS;
  13783. var _axisList = [];
  13784. /**
  13785. * 参数修正&默认值赋值,重载基类方法
  13786. * @param {Object} opt 参数
  13787. */
  13788. function reformOption(opt) {
  13789. // 不写或传了个空数值默认为数值轴
  13790. if (!opt
  13791. || (opt instanceof Array && opt.length === 0)
  13792. ) {
  13793. opt = [{
  13794. type : ecConfig.COMPONENT_TYPE_AXIS_VALUE
  13795. }];
  13796. }
  13797. else if (!(opt instanceof Array)){
  13798. opt = [opt];
  13799. }
  13800. // 最多两条,其他参数忽略
  13801. if (opt.length > 2) {
  13802. opt = [opt[0],opt[1]];
  13803. }
  13804. if (axisType == 'xAxis') {
  13805. // 横轴位置默认配置
  13806. if (!opt[0].position // 没配置或配置错
  13807. || (opt[0].position != 'bottom'
  13808. && opt[0].position != 'top')
  13809. ) {
  13810. opt[0].position = 'bottom';
  13811. }
  13812. if (opt.length > 1) {
  13813. opt[1].position = opt[0].position == 'bottom'
  13814. ? 'top' : 'bottom';
  13815. }
  13816. for (var i = 0, l = opt.length; i < l; i++) {
  13817. // 坐标轴类型,横轴默认为类目型'category'
  13818. opt[i].type = opt[i].type || 'category';
  13819. // 标识轴类型&索引
  13820. opt[i].xAxisIndex = i;
  13821. opt[i].yAxisIndex = -1;
  13822. }
  13823. }
  13824. else {
  13825. // 纵轴位置默认配置
  13826. if (!opt[0].position // 没配置或配置错
  13827. || (opt[0].position != 'left'
  13828. && opt[0].position != 'right')
  13829. ) {
  13830. opt[0].position = 'left';
  13831. }
  13832. if (opt.length > 1) {
  13833. opt[1].position = opt[0].position == 'left'
  13834. ? 'right' : 'left';
  13835. }
  13836. for (var i = 0, l = opt.length; i < l; i++) {
  13837. // 坐标轴类型,纵轴默认为数值型'value'
  13838. opt[i].type = opt[i].type || 'value';
  13839. // 标识轴类型&索引
  13840. opt[i].xAxisIndex = -1;
  13841. opt[i].yAxisIndex = i;
  13842. }
  13843. }
  13844. return opt;
  13845. }
  13846. /**
  13847. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  13848. * @param {Object} newZr
  13849. * @param {Object} newOption
  13850. * @param {Object} newCompoent
  13851. */
  13852. function init(newOption, newCompoent, newAxisType) {
  13853. component = newCompoent;
  13854. axisType = newAxisType;
  13855. self.clear();
  13856. var axisOption;
  13857. if (axisType == 'xAxis') {
  13858. option.xAxis =self.reformOption(newOption.xAxis);
  13859. axisOption = option.xAxis;
  13860. }
  13861. else {
  13862. option.yAxis = reformOption(newOption.yAxis);
  13863. axisOption = option.yAxis;
  13864. }
  13865. var CategoryAxis = require('./categoryAxis');
  13866. var ValueAxis = require('./valueAxis');
  13867. for (var i = 0, l = axisOption.length; i < l; i++) {
  13868. _axisList.push(
  13869. axisOption[i].type == 'category'
  13870. ? new CategoryAxis(
  13871. messageCenter, zr,
  13872. axisOption[i], component
  13873. )
  13874. : new ValueAxis(
  13875. messageCenter, zr,
  13876. axisOption[i], component,
  13877. option.series
  13878. )
  13879. );
  13880. }
  13881. }
  13882. /**
  13883. * 刷新
  13884. */
  13885. function refresh(newOption) {
  13886. var axisOption;
  13887. var series;
  13888. if (newOption) {
  13889. if (axisType == 'xAxis') {
  13890. option.xAxis =self.reformOption(newOption.xAxis);
  13891. axisOption = option.xAxis;
  13892. }
  13893. else {
  13894. option.yAxis = reformOption(newOption.yAxis);
  13895. axisOption = option.yAxis;
  13896. }
  13897. series = newOption.series;
  13898. }
  13899. for (var i = 0, l = _axisList.length; i < l; i++) {
  13900. _axisList[i].refresh && _axisList[i].refresh(
  13901. axisOption ? axisOption[i] : false, series
  13902. );
  13903. }
  13904. }
  13905. /**
  13906. * 根据值换算位置
  13907. * @param {number} idx 坐标轴索引0~1
  13908. */
  13909. function getAxis(idx) {
  13910. return _axisList[idx];
  13911. }
  13912. /**
  13913. * 清除坐标轴子对象,实例仍可用,重载基类方法
  13914. */
  13915. function clear() {
  13916. for (var i = 0, l = _axisList.length; i < l; i++) {
  13917. _axisList[i].dispose && _axisList[i].dispose();
  13918. }
  13919. _axisList = [];
  13920. }
  13921. // 重载基类方法
  13922. self.clear = clear;
  13923. self.reformOption = reformOption;
  13924. self.init = init;
  13925. self.refresh = refresh;
  13926. self.getAxis = getAxis;
  13927. init(option, component, axisType);
  13928. }
  13929. require('../component').define('axis', Axis);
  13930. return Axis;
  13931. });
  13932. /**
  13933. * echarts组件: 网格
  13934. *
  13935. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  13936. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  13937. *
  13938. */
  13939. define('echarts/component/grid',['require','./base','../config','../component'],function (require) {
  13940. /**
  13941. * 构造函数
  13942. * @param {Object} messageCenter echart消息中心
  13943. * @param {ZRender} zr zrender实例
  13944. * @param {Object} option 图表选项
  13945. * @param {number=} option.grid.x 直角坐标系内绘图网格起始横坐标,数值单位px
  13946. * @param {number=} option.grid.y 直角坐标系内绘图网格起始纵坐标,数值单位px
  13947. * @param {number=} option.grid.width 直角坐标系内绘图网格宽度,数值单位px
  13948. * @param {number=} option.grid.height 直角坐标系内绘图网格高度,数值单位px
  13949. */
  13950. function Grid(messageCenter, zr, option) {
  13951. var Base = require('./base');
  13952. Base.call(this, zr);
  13953. var ecConfig = require('../config');
  13954. var self = this;
  13955. self.type = ecConfig.COMPONENT_TYPE_GRID;
  13956. var _zlevelBase = self.getZlevelBase();
  13957. var _x;
  13958. var _y;
  13959. var _width;
  13960. var _height;
  13961. var _zrWidth;
  13962. var _zrHeight;
  13963. /**
  13964. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  13965. * @param {Object} newZr
  13966. * @param {Object} newOption
  13967. */
  13968. function init(newOption) {
  13969. option = newOption;
  13970. option.grid = self.reformOption(option.grid);
  13971. var gridOption = option.grid;
  13972. _x = gridOption.x;
  13973. _y = gridOption.y;
  13974. var x2 = gridOption.x2;
  13975. var y2 = gridOption.y2;
  13976. _zrWidth = zr.getWidth();
  13977. _zrHeight = zr.getHeight();
  13978. if (typeof gridOption.width == 'undefined') {
  13979. _width = _zrWidth - _x - x2;
  13980. }
  13981. else {
  13982. _width = gridOption.width;
  13983. }
  13984. if (typeof gridOption.height == 'undefined') {
  13985. _height = _zrHeight - _y - y2;
  13986. }
  13987. else {
  13988. _height = gridOption.height;
  13989. }
  13990. self.shapeList.push({
  13991. shape : 'rectangle',
  13992. id : zr.newShapeId('grid'),
  13993. zlevel : _zlevelBase,
  13994. hoverable : false,
  13995. style : {
  13996. x : _x,
  13997. y : _y,
  13998. width : _width,
  13999. height : _height,
  14000. brushType : 'both',
  14001. color : gridOption.backgroundColor,
  14002. strokeColor: gridOption.borderColor,
  14003. lineWidth : gridOption.borderWidth
  14004. // type : option.splitArea.areaStyle.type,
  14005. }
  14006. });
  14007. zr.addShape(self.shapeList[0]);
  14008. }
  14009. function getX() {
  14010. return _x;
  14011. }
  14012. function getY() {
  14013. return _y;
  14014. }
  14015. function getWidth() {
  14016. return _width;
  14017. }
  14018. function getHeight() {
  14019. return _height;
  14020. }
  14021. function getXend() {
  14022. return _x + _width;
  14023. }
  14024. function getYend() {
  14025. return _y + _height;
  14026. }
  14027. function getArea() {
  14028. return {
  14029. x : _x,
  14030. y : _y,
  14031. width : _width,
  14032. height : _height
  14033. };
  14034. }
  14035. function refresh(newOption) {
  14036. if (_zrWidth != zr.getWidth()
  14037. || _zrHeight != zr.getHeight()
  14038. || newOption
  14039. ) {
  14040. self.clear();
  14041. init(newOption || option);
  14042. }
  14043. }
  14044. self.init = init;
  14045. self.getX = getX;
  14046. self.getY = getY;
  14047. self.getWidth = getWidth;
  14048. self.getHeight = getHeight;
  14049. self.getXend = getXend;
  14050. self.getYend = getYend;
  14051. self.getArea = getArea;
  14052. self.refresh = refresh;
  14053. init(option);
  14054. }
  14055. require('../component').define('grid', Grid);
  14056. return Grid;
  14057. });
  14058. /**
  14059. * echarts组件:数据区域缩放
  14060. *
  14061. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  14062. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  14063. *
  14064. */
  14065. define('echarts/component/dataZoom',['require','./base','../config','../component','zrender/tool/util','../component'],function (require) {
  14066. /**
  14067. * 构造函数
  14068. * @param {Object} messageCenter echart消息中心
  14069. * @param {ZRender} zr zrender实例
  14070. * @param {Object} option 图表参数
  14071. * @param {Object} component 组件
  14072. */
  14073. function DataZoom(messageCenter, zr, option, component) {
  14074. var Base = require('./base');
  14075. Base.call(this, zr);
  14076. var ecConfig = require('../config');
  14077. var self = this;
  14078. self.type = ecConfig.COMPONENT_TYPE_DATAZOOM;
  14079. var _zlevelBase = self.getZlevelBase();
  14080. var zoomOption;
  14081. var _fillerSize = 30; // 填充大小
  14082. var _handleSize = 10; // 手柄大小
  14083. var _location; // 位置参数,通过计算所得x, y, width, height
  14084. var _zoom; // 缩放参数
  14085. var _fillerShae;
  14086. var _startShape;
  14087. var _endShape;
  14088. var _syncTicket;
  14089. var _isSilence = false;
  14090. var _originalData;
  14091. function _buildShape() {
  14092. _buildBackground();
  14093. _buildDataBackground();
  14094. _buildFiller();
  14095. _bulidHandle();
  14096. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  14097. self.shapeList[i].id = zr.newShapeId(self.type);
  14098. zr.addShape(self.shapeList[i]);
  14099. }
  14100. _syncData();
  14101. }
  14102. /**
  14103. * 根据选项计算实体的位置坐标
  14104. */
  14105. function _getLocation() {
  14106. var x;
  14107. var y;
  14108. var width;
  14109. var height;
  14110. var grid = component.grid;
  14111. // 不指定则根据grid适配
  14112. if (zoomOption.orient == 'horizontal') {
  14113. // 水平布局
  14114. width = zoomOption.width || grid.getWidth();
  14115. height = zoomOption.height || _fillerSize;
  14116. x = typeof zoomOption.x != 'undefined'
  14117. ? zoomOption.x : grid.getX();
  14118. y = typeof zoomOption.y != 'undefined'
  14119. ? zoomOption.y : (zr.getHeight() - height);
  14120. }
  14121. else {
  14122. // 垂直布局
  14123. width = zoomOption.width || _fillerSize;
  14124. height = zoomOption.height || grid.getHeight();
  14125. x = typeof zoomOption.x != 'undefined'
  14126. ? zoomOption.x : 0;
  14127. y = typeof zoomOption.y != 'undefined'
  14128. ? zoomOption.y : grid.getY();
  14129. }
  14130. return {
  14131. x : x,
  14132. y : y,
  14133. width : width,
  14134. height : height
  14135. };
  14136. }
  14137. /**
  14138. * 计算缩放参数
  14139. * 修正单坐标轴只传对象为数组。
  14140. */
  14141. function _getZoom() {
  14142. var series = option.series;
  14143. var xAxis = option.xAxis;
  14144. if (xAxis && !(xAxis instanceof Array)) {
  14145. xAxis = [xAxis];
  14146. option.xAxis = xAxis;
  14147. }
  14148. var yAxis = option.yAxis;
  14149. if (yAxis && !(yAxis instanceof Array)) {
  14150. yAxis = [yAxis];
  14151. option.yAxis = yAxis;
  14152. }
  14153. var zoomSeriesIndex = [];
  14154. var xAxisIndex;
  14155. var yAxisIndex;
  14156. var zOptIdx = zoomOption.xAxisIndex;
  14157. if (xAxis && typeof zOptIdx == 'undefined') {
  14158. xAxisIndex = [];
  14159. for (var i = 0, l = xAxis.length; i < l; i++) {
  14160. // 横纵默认为类目轴
  14161. if (xAxis[i].type == 'category'
  14162. || typeof xAxis[i].type == 'undefined'
  14163. ) {
  14164. xAxisIndex.push(i);
  14165. }
  14166. }
  14167. }
  14168. else {
  14169. if (zOptIdx instanceof Array) {
  14170. xAxisIndex = zOptIdx;
  14171. }
  14172. else if (typeof zOptIdx != 'undefined') {
  14173. xAxisIndex = [zOptIdx];
  14174. }
  14175. else {
  14176. xAxisIndex = [];
  14177. }
  14178. }
  14179. zOptIdx = zoomOption.yAxisIndex;
  14180. if (yAxis && typeof zOptIdx == 'undefined') {
  14181. yAxisIndex = [];
  14182. for (var i = 0, l = yAxis.length; i < l; i++) {
  14183. if (yAxis[i].type == 'category') {
  14184. yAxisIndex.push(i);
  14185. }
  14186. }
  14187. }
  14188. else {
  14189. if (zOptIdx instanceof Array) {
  14190. yAxisIndex = zOptIdx;
  14191. }
  14192. else if (typeof zOptIdx != 'undefined') {
  14193. yAxisIndex = [zOptIdx];
  14194. }
  14195. else {
  14196. yAxisIndex = [];
  14197. }
  14198. }
  14199. // 找到缩放控制的所有series
  14200. for (var i = 0, l = series.length; i < l; i++) {
  14201. if (series[i].type != ecConfig.CHART_TYPE_LINE
  14202. && series[i].type != ecConfig.CHART_TYPE_BAR
  14203. && series[i].type != ecConfig.CHART_TYPE_SCATTER
  14204. && series[i].type != ecConfig.CHART_TYPE_K
  14205. ) {
  14206. continue;
  14207. }
  14208. for (var j = 0, k = xAxisIndex.length; j < k; j++) {
  14209. if (xAxisIndex[j] == (series[i].xAxisIndex || 0)) {
  14210. zoomSeriesIndex.push(i);
  14211. break;
  14212. }
  14213. }
  14214. for (var j = 0, k = yAxisIndex.length; j < k; j++) {
  14215. if (yAxisIndex[j] == (series[i].yAxisIndex || 0)) {
  14216. zoomSeriesIndex.push(i);
  14217. break;
  14218. }
  14219. }
  14220. // 不指定接管坐标轴,则散点图被纳入接管范围
  14221. if (series[i].type == ecConfig.CHART_TYPE_SCATTER
  14222. && typeof zoomOption.xAxisIndex == 'undefined'
  14223. && typeof zoomOption.yAxisIndex == 'undefined'
  14224. ) {
  14225. zoomSeriesIndex.push(i);
  14226. }
  14227. }
  14228. var start = typeof zoomOption.start != 'undefined'
  14229. && zoomOption.start >= 0
  14230. && zoomOption.start <= 100
  14231. ? zoomOption.start : 0;
  14232. var end = typeof zoomOption.end != 'undefined'
  14233. && zoomOption.end >= 0
  14234. && zoomOption.end <= 100
  14235. ? zoomOption.end : 100;
  14236. if (start > end) {
  14237. // 大小颠倒自动翻转
  14238. start = start + end;
  14239. end = start - end;
  14240. start = start - end;
  14241. }
  14242. var size = Math.round(
  14243. (end - start) / 100
  14244. * (zoomOption.orient == 'horizontal'
  14245. ? _location.width : _location.height)
  14246. );
  14247. return {
  14248. start : start,
  14249. end : end,
  14250. start2 : 0,
  14251. end2 : 100,
  14252. size : size,
  14253. xAxisIndex : xAxisIndex,
  14254. yAxisIndex : yAxisIndex,
  14255. seriesIndex : zoomSeriesIndex
  14256. };
  14257. }
  14258. function _backupData() {
  14259. _originalData = {
  14260. xAxis : {},
  14261. yAxis : {},
  14262. series : {}
  14263. };
  14264. var xAxis = option.xAxis;
  14265. var xAxisIndex = _zoom.xAxisIndex;
  14266. for (var i = 0, l = xAxisIndex.length; i < l; i++) {
  14267. _originalData.xAxis[xAxisIndex[i]] = xAxis[xAxisIndex[i]].data;
  14268. }
  14269. var yAxis = option.yAxis;
  14270. var yAxisIndex = _zoom.yAxisIndex;
  14271. for (var i = 0, l = yAxisIndex.length; i < l; i++) {
  14272. _originalData.yAxis[yAxisIndex[i]] = yAxis[yAxisIndex[i]].data;
  14273. }
  14274. var series = option.series;
  14275. var seriesIndex = _zoom.seriesIndex;
  14276. var serie;
  14277. for (var i = 0, l = seriesIndex.length; i < l; i++) {
  14278. serie = series[seriesIndex[i]];
  14279. _originalData.series[seriesIndex[i]] = serie.data;
  14280. if (serie.type == ecConfig.CHART_TYPE_SCATTER) {
  14281. _calculScatterMap(seriesIndex[i]);
  14282. }
  14283. }
  14284. }
  14285. function _calculScatterMap(seriesIndex) {
  14286. _zoom.scatterMap = _zoom.scatterMap || {};
  14287. _zoom.scatterMap[seriesIndex] = _zoom.scatterMap[seriesIndex] || {};
  14288. var componentLibrary = require('../component');
  14289. var zrUtil = require('zrender/tool/util');
  14290. // x轴极值
  14291. var Axis = componentLibrary.get('axis');
  14292. var axisOption = zrUtil.clone(option.xAxis);
  14293. if (axisOption instanceof Array) {
  14294. axisOption[0].type = 'value';
  14295. axisOption[1] && (axisOption[1].type = 'value');
  14296. }
  14297. else {
  14298. axisOption.type = 'value';
  14299. }
  14300. var vAxis = new Axis(
  14301. null, // messageCenter
  14302. false, // zr
  14303. {
  14304. xAxis: axisOption,
  14305. series : option.series
  14306. },
  14307. component,
  14308. 'xAxis'
  14309. );
  14310. var axisIndex = option.series[seriesIndex].xAxisIndex || 0;
  14311. _zoom.scatterMap[seriesIndex].x =
  14312. vAxis.getAxis(axisIndex).getExtremum();
  14313. vAxis.dispose();
  14314. // y轴极值
  14315. axisOption = zrUtil.clone(option.yAxis);
  14316. if (axisOption instanceof Array) {
  14317. axisOption[0].type = 'value';
  14318. axisOption[1] && (axisOption[1].type = 'value');
  14319. }
  14320. else {
  14321. axisOption.type = 'value';
  14322. }
  14323. vAxis = new Axis(
  14324. null, // messageCenter
  14325. false, // zr
  14326. {
  14327. yAxis: axisOption,
  14328. series : option.series
  14329. },
  14330. component,
  14331. 'yAxis'
  14332. );
  14333. axisIndex = option.series[seriesIndex].yAxisIndex || 0;
  14334. _zoom.scatterMap[seriesIndex].y =
  14335. vAxis.getAxis(axisIndex).getExtremum();
  14336. vAxis.dispose();
  14337. // console.log(_zoom.scatterMap);
  14338. }
  14339. function _buildBackground() {
  14340. self.shapeList.push({
  14341. shape : 'rectangle',
  14342. zlevel : _zlevelBase,
  14343. hoverable :false,
  14344. style : {
  14345. x : _location.x,
  14346. y : _location.y,
  14347. width : _location.width,
  14348. height : _location.height,
  14349. color : zoomOption.backgroundColor
  14350. }
  14351. });
  14352. }
  14353. function _buildDataBackground() {
  14354. self.shapeList.push({
  14355. shape : 'rectangle',
  14356. zlevel : _zlevelBase,
  14357. hoverable :false,
  14358. style : {
  14359. x : _location.x,
  14360. y : _location.y,
  14361. width : _location.width,
  14362. height : _location.height,
  14363. color : zoomOption.backgroundColor
  14364. }
  14365. });
  14366. var maxLength = 0;
  14367. var xAxis = option.xAxis;
  14368. var xAxisIndex = _zoom.xAxisIndex;
  14369. for (var i = 0, l = xAxisIndex.length; i < l; i++) {
  14370. maxLength = Math.max(
  14371. maxLength, xAxis[xAxisIndex[i]].data.length
  14372. );
  14373. }
  14374. var yAxis = option.yAxis;
  14375. var yAxisIndex = _zoom.yAxisIndex;
  14376. for (var i = 0, l = yAxisIndex.length; i < l; i++) {
  14377. maxLength = Math.max(
  14378. maxLength, yAxis[yAxisIndex[i]].data.length
  14379. );
  14380. }
  14381. var data = option.series[_zoom.seriesIndex[0]].data;
  14382. var maxValue = Number.MIN_VALUE;
  14383. var minValue = Number.MAX_VALUE;
  14384. var value;
  14385. for (var i = 0, l = data.length; i < l; i++) {
  14386. value = typeof data[i] != 'undefined'
  14387. ? (typeof data[i].value != 'undefined'
  14388. ? data[i].value : data[i])
  14389. : 0;
  14390. if (option.series[_zoom.seriesIndex[0]].type
  14391. == ecConfig.CHART_TYPE_K
  14392. ) {
  14393. value = value[1]; // 收盘价
  14394. }
  14395. if (isNaN(value)) {
  14396. value = 0;
  14397. }
  14398. maxValue = Math.max(maxValue, value);
  14399. minValue = Math.min(minValue, value);
  14400. }
  14401. var pointList = [];
  14402. var x = _location.width / maxLength;
  14403. var y = _location.height / maxLength;
  14404. for (var i = 0, l = maxLength; i < l; i++) {
  14405. value = typeof data[i] != 'undefined'
  14406. ? (typeof data[i].value != 'undefined'
  14407. ? data[i].value : data[i])
  14408. : 0;
  14409. if (option.series[_zoom.seriesIndex[0]].type
  14410. == ecConfig.CHART_TYPE_K
  14411. ) {
  14412. value = value[1]; // 收盘价
  14413. }
  14414. if (isNaN(value)) {
  14415. value = 0;
  14416. }
  14417. if (zoomOption.orient == 'horizontal') {
  14418. pointList.push([
  14419. _location.x + x * i,
  14420. _location.y + _location.height - 5 - Math.round(
  14421. (value - minValue)
  14422. / (maxValue - minValue)
  14423. * (_location.height - 10)
  14424. )
  14425. ]);
  14426. }
  14427. else {
  14428. pointList.push([
  14429. _location.x + 5 + Math.round(
  14430. (value - minValue)
  14431. / (maxValue - minValue)
  14432. * (_location.width - 10)
  14433. ),
  14434. _location.y + y * i
  14435. ]);
  14436. }
  14437. }
  14438. if (zoomOption.orient == 'horizontal') {
  14439. pointList.push([
  14440. _location.x + _location.width,
  14441. _location.y + _location.height
  14442. ]);
  14443. pointList.push([
  14444. _location.x, _location.y + _location.height
  14445. ]);
  14446. }
  14447. else {
  14448. pointList.push([
  14449. _location.x, _location.y + _location.height
  14450. ]);
  14451. pointList.push([
  14452. _location.x, _location.y
  14453. ]);
  14454. }
  14455. self.shapeList.push({
  14456. shape : 'polygon',
  14457. zlevel : _zlevelBase,
  14458. style : {
  14459. pointList : pointList,
  14460. color : zoomOption.dataBackgroundColor
  14461. },
  14462. hoverable : false
  14463. });
  14464. }
  14465. /**
  14466. * 构建填充物
  14467. */
  14468. function _buildFiller() {
  14469. _fillerShae = {
  14470. shape : 'rectangle',
  14471. zlevel : _zlevelBase,
  14472. draggable : true,
  14473. ondrift : _ondrift,
  14474. ondragend : _ondragend,
  14475. _type : 'filler'
  14476. };
  14477. if (zoomOption.orient == 'horizontal') {
  14478. // 横向
  14479. _fillerShae.style = {
  14480. x : _location.x
  14481. + Math.round(_zoom.start / 100 * _location.width)
  14482. + _handleSize,
  14483. y : _location.y + 3,
  14484. width : _zoom.size - _handleSize * 2,
  14485. height : _location.height - 6,
  14486. color : zoomOption.fillerColor,
  14487. text : ':::',
  14488. textPosition : 'inside'
  14489. };
  14490. }
  14491. else {
  14492. _fillerShae.style ={
  14493. x : _location.x + 3,
  14494. y : _location.y
  14495. + Math.round(_zoom.start / 100 * _location.height)
  14496. + _handleSize,
  14497. width : _location.width - 6,
  14498. height : _zoom.size - _handleSize * 2,
  14499. color : zoomOption.fillerColor,
  14500. text : '=',
  14501. textPosition : 'inside'
  14502. };
  14503. }
  14504. self.shapeList.push(_fillerShae);
  14505. }
  14506. /**
  14507. * 构建拖拽手柄
  14508. */
  14509. function _bulidHandle() {
  14510. _startShape = {
  14511. shape : 'rectangle',
  14512. zlevel : _zlevelBase
  14513. };
  14514. _endShape = {
  14515. shape : 'rectangle',
  14516. zlevel : _zlevelBase
  14517. };
  14518. _startShape.draggable = true;
  14519. _startShape.ondrift = _ondrift;
  14520. _startShape.ondragend = _ondragend;
  14521. _endShape.draggable = true;
  14522. _endShape.ondrift = _ondrift;
  14523. _endShape.ondragend = _ondragend;
  14524. if (zoomOption.orient == 'horizontal') {
  14525. // 头
  14526. _startShape.style = {
  14527. x : _fillerShae.style.x - _handleSize,
  14528. y : _location.y,
  14529. width : _handleSize,
  14530. height : _location.height,
  14531. color : zoomOption.handleColor,
  14532. text : '|',
  14533. textPosition : 'inside'
  14534. };
  14535. // 尾
  14536. _endShape.style = {
  14537. x : _fillerShae.style.x + _fillerShae.style.width,
  14538. y : _location.y,
  14539. width : _handleSize,
  14540. height : _location.height,
  14541. color : zoomOption.handleColor,
  14542. text : '|',
  14543. textPosition : 'inside'
  14544. };
  14545. }
  14546. else {
  14547. // 头
  14548. _startShape.style = {
  14549. x : _location.x,
  14550. y : _fillerShae.style.y - _handleSize,
  14551. width : _location.width,
  14552. height : _handleSize,
  14553. color : zoomOption.handleColor,
  14554. text : '—',
  14555. textPosition : 'inside'
  14556. };
  14557. // 尾
  14558. _endShape.style = {
  14559. x : _location.x,
  14560. y : _fillerShae.style.y + _fillerShae.style.height,
  14561. width : _location.width,
  14562. height : _handleSize,
  14563. color : zoomOption.handleColor,
  14564. text : '—',
  14565. textPosition : 'inside'
  14566. };
  14567. }
  14568. self.shapeList.push(_startShape);
  14569. self.shapeList.push(_endShape);
  14570. }
  14571. /**
  14572. * 拖拽范围控制
  14573. */
  14574. function _ondrift(e, dx, dy) {
  14575. if (zoomOption.zoomLock) {
  14576. // zoomLock时把handle转成filler的拖拽
  14577. e = _fillerShae;
  14578. }
  14579. var detailSize = e._type == 'filler' ? _handleSize : 0;
  14580. if (zoomOption.orient == 'horizontal') {
  14581. if (e.style.x + dx - detailSize <= _location.x) {
  14582. e.style.x = _location.x + detailSize;
  14583. }
  14584. else if (e.style.x + dx + e.style.width + detailSize
  14585. >= _location.x + _location.width
  14586. ) {
  14587. e.style.x = _location.x + _location.width
  14588. - e.style.width - detailSize;
  14589. }
  14590. else {
  14591. e.style.x += dx;
  14592. }
  14593. }
  14594. else {
  14595. if (e.style.y + dy - detailSize <= _location.y) {
  14596. e.style.y = _location.y + detailSize;
  14597. }
  14598. else if (e.style.y + dy + e.style.height + detailSize
  14599. >= _location.y + _location.height
  14600. ) {
  14601. e.style.y = _location.y + _location.height
  14602. - e.style.height - detailSize;
  14603. }
  14604. else {
  14605. e.style.y += dy;
  14606. }
  14607. }
  14608. if (e._type == 'filler') {
  14609. _syncHandleShape();
  14610. }
  14611. else {
  14612. _syncFillerShape();
  14613. }
  14614. if (zoomOption.realtime) {
  14615. _syncData();
  14616. }
  14617. else {
  14618. clearTimeout(_syncTicket);
  14619. _syncTicket = setTimeout(_syncData, 200);
  14620. }
  14621. return true;
  14622. }
  14623. function _syncHandleShape() {
  14624. if (zoomOption.orient == 'horizontal') {
  14625. _startShape.style.x = _fillerShae.style.x - _handleSize;
  14626. _endShape.style.x = _fillerShae.style.x
  14627. + _fillerShae.style.width;
  14628. _zoom.start = Math.floor(
  14629. (_startShape.style.x - _location.x)
  14630. / _location.width * 100
  14631. );
  14632. _zoom.end = Math.ceil(
  14633. (_endShape.style.x + _handleSize - _location.x)
  14634. / _location.width * 100
  14635. );
  14636. }
  14637. else {
  14638. _startShape.style.y = _fillerShae.style.y - _handleSize;
  14639. _endShape.style.y = _fillerShae.style.y
  14640. + _fillerShae.style.height;
  14641. _zoom.start = Math.floor(
  14642. (_startShape.style.y - _location.y)
  14643. / _location.height * 100
  14644. );
  14645. _zoom.end = Math.ceil(
  14646. (_endShape.style.y + _handleSize - _location.y)
  14647. / _location.height * 100
  14648. );
  14649. }
  14650. zr.modShape(_startShape.id, _startShape);
  14651. zr.modShape(_endShape.id, _endShape);
  14652. zr.refresh();
  14653. }
  14654. function _syncFillerShape() {
  14655. var a;
  14656. var b;
  14657. if (zoomOption.orient == 'horizontal') {
  14658. a = _startShape.style.x;
  14659. b = _endShape.style.x;
  14660. _fillerShae.style.x = Math.min(a, b) + _handleSize;
  14661. _fillerShae.style.width = Math.abs(a - b) - _handleSize;
  14662. _zoom.start = Math.floor(
  14663. (Math.min(a, b) - _location.x)
  14664. / _location.width * 100
  14665. );
  14666. _zoom.end = Math.ceil(
  14667. (Math.max(a, b) + _handleSize - _location.x)
  14668. / _location.width * 100
  14669. );
  14670. }
  14671. else {
  14672. a = _startShape.style.y;
  14673. b = _endShape.style.y;
  14674. _fillerShae.style.y = Math.min(a, b) + _handleSize;
  14675. _fillerShae.style.height = Math.abs(a - b) - _handleSize;
  14676. _zoom.start = Math.floor(
  14677. (Math.min(a, b) - _location.y)
  14678. / _location.height * 100
  14679. );
  14680. _zoom.end = Math.ceil(
  14681. (Math.max(a, b) + _handleSize - _location.y)
  14682. / _location.height * 100
  14683. );
  14684. }
  14685. zr.modShape(_fillerShae.id, _fillerShae);
  14686. zr.refresh();
  14687. }
  14688. function _syncShape() {
  14689. if (!zoomOption.show) {
  14690. // 没有伸缩控件
  14691. return;
  14692. }
  14693. if (zoomOption.orient == 'horizontal') {
  14694. _startShape.style.x = _location.x
  14695. + _zoom.start / 100 * _location.width;
  14696. _endShape.style.x = _location.x
  14697. + _zoom.end / 100 * _location.width
  14698. - _handleSize;
  14699. _fillerShae.style.x = _startShape.style.x + _handleSize;
  14700. _fillerShae.style.width = _endShape.style.x
  14701. - _startShape.style.x
  14702. - _handleSize;
  14703. }
  14704. else {
  14705. _startShape.style.y = _location.y
  14706. + _zoom.start / 100 * _location.height;
  14707. _endShape.style.y = _location.y
  14708. + _zoom.end / 100 * _location.height
  14709. - _handleSize;
  14710. _fillerShae.style.y = _startShape.style.y + _handleSize;
  14711. _fillerShae.style.height = _endShape.style.y
  14712. - _startShape.style.y
  14713. - _handleSize;
  14714. }
  14715. zr.modShape(_startShape.id, _startShape);
  14716. zr.modShape(_endShape.id, _endShape);
  14717. zr.modShape(_fillerShae.id, _fillerShae);
  14718. zr.refresh();
  14719. }
  14720. function _syncData(dispatchNow) {
  14721. var target;
  14722. var start;
  14723. var end;
  14724. var length;
  14725. var data;
  14726. for (var key in _originalData) {
  14727. target = _originalData[key];
  14728. for (var idx in target) {
  14729. data = target[idx];
  14730. length = data.length;
  14731. start = Math.floor(_zoom.start / 100 * length);
  14732. end = Math.ceil(_zoom.end / 100 * length);
  14733. if (option[key][idx].type != ecConfig.CHART_TYPE_SCATTER) {
  14734. option[key][idx].data = data.slice(start, end);
  14735. }
  14736. else {
  14737. // 散点图特殊处理
  14738. option[key][idx].data = _synScatterData(idx, data);
  14739. }
  14740. }
  14741. }
  14742. if (!_isSilence && (zoomOption.realtime || dispatchNow)) {
  14743. messageCenter.dispatch(
  14744. ecConfig.EVENT.DATA_ZOOM,
  14745. null,
  14746. {zoom: _zoom}
  14747. );
  14748. }
  14749. zoomOption.start = _zoom.start;
  14750. zoomOption.end = _zoom.end;
  14751. }
  14752. function _synScatterData(seriesIndex, data) {
  14753. var newData = [];
  14754. var scale = _zoom.scatterMap[seriesIndex];
  14755. var total;
  14756. var xStart;
  14757. var xEnd;
  14758. var yStart;
  14759. var yEnd;
  14760. if (zoomOption.orient == 'horizontal') {
  14761. total = scale.x.max - scale.x.min;
  14762. xStart = _zoom.start / 100 * total + scale.x.min;
  14763. xEnd = _zoom.end / 100 * total + scale.x.min;
  14764. total = scale.y.max - scale.y.min;
  14765. yStart = _zoom.start2 / 100 * total + scale.y.min;
  14766. yEnd = _zoom.end2 / 100 * total + scale.y.min;
  14767. }
  14768. else {
  14769. total = scale.x.max - scale.x.min;
  14770. xStart = _zoom.start2 / 100 * total + scale.x.min;
  14771. xEnd = _zoom.end2 / 100 * total + scale.x.min;
  14772. total = scale.y.max - scale.y.min;
  14773. yStart = _zoom.start / 100 * total + scale.y.min;
  14774. yEnd = _zoom.end / 100 * total + scale.y.min;
  14775. }
  14776. // console.log(xStart,xEnd,yStart,yEnd);
  14777. for (var i = 0, l = data.length; i < l; i++) {
  14778. if (data[i][0] >= xStart
  14779. && data[i][0] <= xEnd
  14780. && data[i][1] >= yStart
  14781. && data[i][1] <= yEnd
  14782. ) {
  14783. newData.push(data[i]);
  14784. }
  14785. }
  14786. return newData;
  14787. }
  14788. function _ondragend() {
  14789. self.isDragend = true;
  14790. }
  14791. /**
  14792. * 数据项被拖拽出去
  14793. */
  14794. function ondragend(param, status) {
  14795. if (!self.isDragend || !param.target) {
  14796. // 没有在当前实例上发生拖拽行为则直接返回
  14797. return;
  14798. }
  14799. _syncData();
  14800. // 别status = {}赋值啊!!
  14801. status.dragOut = true;
  14802. status.dragIn = true;
  14803. if (!_isSilence && !zoomOption.realtime) {
  14804. messageCenter.dispatch(
  14805. ecConfig.EVENT.DATA_ZOOM,
  14806. null,
  14807. {zoom: _zoom}
  14808. );
  14809. }
  14810. status.needRefresh = false; // 会有消息触发fresh,不用再刷一遍
  14811. // 处理完拖拽事件后复位
  14812. self.isDragend = false;
  14813. return;
  14814. }
  14815. function ondataZoom(param, status) {
  14816. status.needRefresh = true;
  14817. return;
  14818. }
  14819. function absoluteZoom(param) {
  14820. zoomOption.start = _zoom.start = param.start;
  14821. zoomOption.end = _zoom.end = param.end;
  14822. zoomOption.start2 = _zoom.start2 = param.start2;
  14823. zoomOption.end2 = _zoom.end2 = param.end2;
  14824. //console.log(rect,gridArea,_zoom,total)
  14825. _syncShape();
  14826. _syncData(true);
  14827. return;
  14828. }
  14829. function rectZoom(param) {
  14830. if (!param) {
  14831. // 重置拖拽
  14832. zoomOption.start =
  14833. zoomOption.start2 =
  14834. _zoom.start =
  14835. _zoom.start2 = 0;
  14836. zoomOption.end =
  14837. zoomOption.end2 =
  14838. _zoom.end =
  14839. _zoom.end2 = 100;
  14840. _syncShape();
  14841. _syncData(true);
  14842. return _zoom;
  14843. }
  14844. var gridArea = component.grid.getArea();
  14845. var rect = {
  14846. x : param.x,
  14847. y : param.y,
  14848. width : param.width,
  14849. height : param.height
  14850. };
  14851. // 修正方向框选
  14852. if (rect.width < 0) {
  14853. rect.x += rect.width;
  14854. rect.width = -rect.width;
  14855. }
  14856. if (rect.height < 0) {
  14857. rect.y += rect.height;
  14858. rect.height = -rect.height;
  14859. }
  14860. // console.log(rect,_zoom);
  14861. // 剔除无效缩放
  14862. if (rect.x > gridArea.x + gridArea.width
  14863. || rect.y > gridArea.y + gridArea.height
  14864. ) {
  14865. return false; // 无效缩放
  14866. }
  14867. // 修正框选超出
  14868. if (rect.x < gridArea.x) {
  14869. rect.x = gridArea.x;
  14870. }
  14871. if (rect.x + rect.width > gridArea.x + gridArea.width) {
  14872. rect.width = gridArea.x + gridArea.width - rect.x;
  14873. }
  14874. if (rect.y + rect.height > gridArea.y + gridArea.height) {
  14875. rect.height = gridArea.y + gridArea.height - rect.y;
  14876. }
  14877. var total;
  14878. var sdx = (rect.x - gridArea.x) / gridArea.width;
  14879. var edx = 1- (rect.x + rect.width - gridArea.x) / gridArea.width;
  14880. var sdy = 1- (rect.y + rect.height - gridArea.y) / gridArea.height;
  14881. var edy = (rect.y - gridArea.y) / gridArea.height;
  14882. //console.log('this',sdy,edy,_zoom.start,_zoom.end)
  14883. if (zoomOption.orient == 'horizontal') {
  14884. total = _zoom.end - _zoom.start;
  14885. _zoom.start += total * sdx;
  14886. _zoom.end -= total * edx;
  14887. total = _zoom.end2 - _zoom.start2;
  14888. _zoom.start2 += total * sdy;
  14889. _zoom.end2 -= total * edy;
  14890. }
  14891. else {
  14892. total = _zoom.end - _zoom.start;
  14893. _zoom.start += total * sdy;
  14894. _zoom.end -= total * edy;
  14895. total = _zoom.end2 - _zoom.start2;
  14896. _zoom.start2 += total * sdx;
  14897. _zoom.end2 -= total * edx;
  14898. }
  14899. //console.log(_zoom.start,_zoom.end,_zoom.start2,_zoom.end2)
  14900. zoomOption.start = _zoom.start;
  14901. zoomOption.end = _zoom.end;
  14902. zoomOption.start2 = _zoom.start2;
  14903. zoomOption.end2 = _zoom.end2;
  14904. //console.log(rect,gridArea,_zoom,total)
  14905. _syncShape();
  14906. _syncData(true);
  14907. return _zoom;
  14908. }
  14909. function syncBackupData(curOption, optionBackup) {
  14910. var start;
  14911. var target = _originalData['series'];
  14912. var curSeries = curOption.series;
  14913. var curData;
  14914. for (var i = 0, l = curSeries.length; i < l; i++) {
  14915. curData = curSeries[i].data;
  14916. if (target[i]) {
  14917. // dataZoom接管的
  14918. start = Math.floor(_zoom.start / 100 * target[i].length);
  14919. }
  14920. else {
  14921. // 非dataZoom接管
  14922. start = 0;
  14923. }
  14924. for (var j = 0, k = curData.length; j < k; j++) {
  14925. optionBackup.series[i].data[j + start] = curData[j];
  14926. if (target[i]) {
  14927. // 同步内部备份
  14928. target[i][j + start]
  14929. = curData[j];
  14930. }
  14931. }
  14932. }
  14933. }
  14934. function silence(s) {
  14935. _isSilence = s;
  14936. }
  14937. function init(newOption) {
  14938. option = newOption;
  14939. option.dataZoom = self.reformOption(option.dataZoom);
  14940. zoomOption = option.dataZoom;
  14941. self.clear();
  14942. // 自己show 或者 toolbox启用且dataZoom有效
  14943. if (option.dataZoom.show
  14944. || (
  14945. self.deepQuery([option], 'toolbox.show')
  14946. && self.deepQuery([option], 'toolbox.feature.dataZoom')
  14947. )
  14948. ) {
  14949. _location = _getLocation();
  14950. _zoom = _getZoom();
  14951. _backupData();
  14952. }
  14953. if (option.dataZoom.show) {
  14954. _buildShape();
  14955. }
  14956. }
  14957. /**
  14958. * 避免dataZoom带来两次refresh,不设refresh接口,resize重复一下buildshape逻辑
  14959. */
  14960. function resize() {
  14961. self.clear();
  14962. // 自己show 或者 toolbox启用且dataZoom有效
  14963. if (option.dataZoom.show
  14964. || (
  14965. self.deepQuery([option], 'toolbox.show')
  14966. && self.deepQuery([option], 'toolbox.feature.dataZoom')
  14967. )
  14968. ) {
  14969. _location = _getLocation();
  14970. _zoom = _getZoom();
  14971. }
  14972. if (option.dataZoom.show) {
  14973. _buildBackground();
  14974. _buildDataBackground();
  14975. _buildFiller();
  14976. _bulidHandle();
  14977. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  14978. self.shapeList[i].id = zr.newShapeId(self.type);
  14979. zr.addShape(self.shapeList[i]);
  14980. }
  14981. }
  14982. }
  14983. self.init = init;
  14984. self.resize = resize;
  14985. self.syncBackupData = syncBackupData;
  14986. self.absoluteZoom = absoluteZoom;
  14987. self.rectZoom = rectZoom;
  14988. self.ondragend = ondragend;
  14989. self.ondataZoom = ondataZoom;
  14990. self.silence = silence;
  14991. init(option);
  14992. }
  14993. require('../component').define('dataZoom', DataZoom);
  14994. return DataZoom;
  14995. });
  14996. /**
  14997. * echarts组件:图例
  14998. *
  14999. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  15000. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  15001. *
  15002. */
  15003. define('echarts/component/legend',['require','./base','../config','zrender/tool/area','zrender/shape','zrender/shape','zrender/shape','zrender/shape','zrender/shape','../component'],function (require) {
  15004. /**
  15005. * 构造函数
  15006. * @param {Object} messageCenter echart消息中心
  15007. * @param {ZRender} zr zrender实例
  15008. * @param {Object} option 图表参数
  15009. * @param {Object=} selected 用于状态保持
  15010. */
  15011. function Legend(messageCenter, zr, option, selected) {
  15012. var Base = require('./base');
  15013. Base.call(this, zr);
  15014. var ecConfig = require('../config');
  15015. var zrArea = require('zrender/tool/area');
  15016. var self = this;
  15017. self.type = ecConfig.COMPONENT_TYPE_LEGEND;
  15018. var legendOption; // 图例选项,共享数据源
  15019. var _zlevelBase = self.getZlevelBase();
  15020. var _itemGroupLocation = {}; // 图例元素组的位置参数,通过计算所得x, y, width, height
  15021. var _colorIndex = 0;
  15022. var _colorMap = {};
  15023. var _selectedMap = {};
  15024. var icon = require('zrender/shape').get('icon');
  15025. for (var k in legendIcon) {
  15026. icon.define('legendicon' + k, legendIcon[k]);
  15027. //console.log('legendicon' + k, legendIcon[k])
  15028. }
  15029. function _buildShape() {
  15030. _itemGroupLocation = _getItemGroupLocation();
  15031. _buildBackground();
  15032. _buildItem();
  15033. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  15034. self.shapeList[i].id = zr.newShapeId(self.type);
  15035. zr.addShape(self.shapeList[i]);
  15036. }
  15037. }
  15038. /**
  15039. * 构建所有图例元素
  15040. */
  15041. function _buildItem() {
  15042. var data = legendOption.data;
  15043. var dataLength = data.length;
  15044. var itemName;
  15045. var itemType;
  15046. var itemShape;
  15047. var textShape;
  15048. var font = self.getFont(legendOption.textStyle);
  15049. var zrWidth = zr.getWidth();
  15050. var zrHeight = zr.getHeight();
  15051. var lastX = _itemGroupLocation.x;
  15052. var lastY = _itemGroupLocation.y;
  15053. var itemWidth = legendOption.itemWidth;
  15054. var itemHeight = legendOption.itemHeight;
  15055. var itemGap = legendOption.itemGap;
  15056. var color;
  15057. if (legendOption.orient == 'vertical'
  15058. && legendOption.x == 'right'
  15059. ) {
  15060. lastX = _itemGroupLocation.x
  15061. + _itemGroupLocation.width
  15062. - itemWidth;
  15063. }
  15064. for (var i = 0; i < dataLength; i++) {
  15065. itemName = data[i];
  15066. if (itemName === '') {
  15067. if (legendOption.orient == 'horizontal') {
  15068. lastX = _itemGroupLocation.x;
  15069. lastY += itemHeight + itemGap;
  15070. }
  15071. else {
  15072. legendOption.x == 'right'
  15073. ? lastX -= _itemGroupLocation.maxWidth + itemGap
  15074. : lastX += _itemGroupLocation.maxWidth + itemGap;
  15075. lastY = _itemGroupLocation.y;
  15076. }
  15077. continue;
  15078. }
  15079. itemType = _getSeriesByName(itemName);
  15080. if (itemType) {
  15081. itemType = itemType.type;
  15082. } else {
  15083. itemType = 'bar';
  15084. }
  15085. color = getColor(itemName);
  15086. if (legendOption.orient == 'horizontal') {
  15087. if (zrWidth - lastX < 200 // 最后200px做分行预判
  15088. && (itemWidth + 5
  15089. + zrArea.getTextWidth(itemName, font)
  15090. // 分行的最后一个不用算itemGap
  15091. + (i == dataLength - 1 || data[i+1] === ''
  15092. ? 0 : itemGap))
  15093. >= zrWidth - lastX
  15094. ) {
  15095. lastX = _itemGroupLocation.x;
  15096. lastY += itemHeight + itemGap;
  15097. }
  15098. }
  15099. else {
  15100. if (zrHeight - lastY < 200 // 最后200px做分行预判
  15101. && (itemHeight
  15102. // 分行的最后一个不用算itemGap
  15103. + (i == dataLength - 1 || data[i+1] === ''
  15104. ? 0 : itemGap))
  15105. >= zrHeight - lastY
  15106. ) {
  15107. legendOption.x == 'right'
  15108. ? lastX -= _itemGroupLocation.maxWidth + itemGap
  15109. : lastX += _itemGroupLocation.maxWidth + itemGap;
  15110. lastY = _itemGroupLocation.y;
  15111. }
  15112. }
  15113. // 图形
  15114. itemShape = _getItemShapeByType(
  15115. lastX, lastY,
  15116. itemWidth, itemHeight,
  15117. (_selectedMap[itemName] ? color : '#ccc'),
  15118. itemType
  15119. );
  15120. itemShape._name = itemName;
  15121. if (legendOption.selectedMode) {
  15122. itemShape.onclick = _legendSelected;
  15123. }
  15124. self.shapeList.push(itemShape);
  15125. // 文字
  15126. textShape = {
  15127. shape : 'text',
  15128. zlevel : _zlevelBase,
  15129. style : {
  15130. x : lastX + itemWidth + 5,
  15131. y : lastY,
  15132. color : _selectedMap[itemName]
  15133. ? legendOption.textStyle.color
  15134. : '#ccc',
  15135. text: itemName,
  15136. textFont: font,
  15137. textBaseline: 'top'
  15138. },
  15139. hoverable : legendOption.selectedMode,
  15140. clickable : legendOption.selectedMode
  15141. };
  15142. if (legendOption.orient == 'vertical'
  15143. && legendOption.x == 'right'
  15144. ) {
  15145. textShape.style.x -= (itemWidth + 10);
  15146. textShape.style.textAlign = 'right';
  15147. }
  15148. textShape._name = itemName;
  15149. if (legendOption.selectedMode) {
  15150. textShape.onclick = _legendSelected;
  15151. }
  15152. self.shapeList.push(textShape);
  15153. if (legendOption.orient == 'horizontal') {
  15154. lastX += itemWidth + 5
  15155. + zrArea.getTextWidth(itemName, font)
  15156. + itemGap;
  15157. }
  15158. else {
  15159. lastY += itemHeight + itemGap;
  15160. }
  15161. }
  15162. }
  15163. function _buildBackground() {
  15164. var pTop = legendOption.padding[0];
  15165. var pRight = legendOption.padding[1];
  15166. var pBottom = legendOption.padding[2];
  15167. var pLeft = legendOption.padding[3];
  15168. self.shapeList.push({
  15169. shape : 'rectangle',
  15170. zlevel : _zlevelBase,
  15171. hoverable :false,
  15172. style : {
  15173. x : _itemGroupLocation.x - pLeft,
  15174. y : _itemGroupLocation.y - pTop,
  15175. width : _itemGroupLocation.width + pLeft + pRight,
  15176. height : _itemGroupLocation.height + pTop + pBottom,
  15177. brushType : legendOption.borderWidth === 0
  15178. ? 'fill' : 'both',
  15179. color : legendOption.backgroundColor,
  15180. strokeColor : legendOption.borderColor,
  15181. lineWidth : legendOption.borderWidth
  15182. }
  15183. });
  15184. }
  15185. /**
  15186. * 根据选项计算图例实体的位置坐标
  15187. */
  15188. function _getItemGroupLocation() {
  15189. var data = legendOption.data;
  15190. var dataLength = data.length;
  15191. var itemGap = legendOption.itemGap;
  15192. var itemWidth = legendOption.itemWidth + 5; // 5px是图形和文字的间隔,不可配
  15193. var itemHeight = legendOption.itemHeight;
  15194. var font = self.getFont(legendOption.textStyle);
  15195. var totalWidth = 0;
  15196. var totalHeight = 0;
  15197. var padding = legendOption.padding;
  15198. var zrWidth = zr.getWidth() - padding[1] - padding[3];
  15199. var zrHeight = zr.getHeight() - padding[0] - padding[2];
  15200. var temp = 0; // 宽高计算,用于多行判断
  15201. var maxWidth = 0; // 垂直布局有用
  15202. if (legendOption.orient == 'horizontal') {
  15203. // 水平布局,计算总宽度
  15204. totalHeight = itemHeight;
  15205. for (var i = 0; i < dataLength; i++) {
  15206. if (data[i] === '') {
  15207. temp -= itemGap;
  15208. if (temp > zrWidth) {
  15209. totalWidth = zrWidth;
  15210. totalHeight += itemHeight + itemGap;
  15211. }
  15212. else {
  15213. totalWidth = Math.max(totalWidth, temp);
  15214. }
  15215. totalHeight += itemHeight + itemGap;
  15216. temp = 0;
  15217. continue;
  15218. }
  15219. temp += itemWidth
  15220. + zrArea.getTextWidth(
  15221. data[i],
  15222. font
  15223. )
  15224. + itemGap;
  15225. }
  15226. totalHeight = Math.max(totalHeight, itemHeight);
  15227. temp -= itemGap; // 减去最后一个的itemGap
  15228. if (temp > zrWidth) {
  15229. totalWidth = zrWidth;
  15230. totalHeight += itemHeight + itemGap;
  15231. } else {
  15232. totalWidth = Math.max(totalWidth, temp);
  15233. }
  15234. }
  15235. else {
  15236. // 垂直布局,计算总高度
  15237. for (var i = 0; i < dataLength; i++) {
  15238. maxWidth = Math.max(
  15239. maxWidth,
  15240. zrArea.getTextWidth(
  15241. data[i],
  15242. font
  15243. )
  15244. );
  15245. }
  15246. maxWidth += itemWidth;
  15247. totalWidth = maxWidth;
  15248. for (var i = 0; i < dataLength; i++) {
  15249. if (data[i] === '') {
  15250. temp -= itemGap;
  15251. if (temp > zrHeight) {
  15252. totalHeight = zrHeight;
  15253. totalWidth += maxWidth + itemGap;
  15254. }
  15255. else {
  15256. totalHeight = Math.max(totalHeight, temp);
  15257. }
  15258. totalWidth += maxWidth + itemGap;
  15259. temp = 0;
  15260. continue;
  15261. }
  15262. temp += itemHeight + itemGap;
  15263. }
  15264. totalWidth = Math.max(totalWidth, maxWidth);
  15265. temp -= itemGap; // 减去最后一个的itemGap
  15266. if (temp > zrHeight) {
  15267. totalHeight = zrHeight;
  15268. totalWidth += maxWidth + itemGap;
  15269. } else {
  15270. totalHeight = Math.max(totalHeight, temp);
  15271. }
  15272. }
  15273. zrWidth = zr.getWidth();
  15274. zrHeight = zr.getHeight();
  15275. var x;
  15276. switch (legendOption.x) {
  15277. case 'center' :
  15278. x = Math.floor((zrWidth - totalWidth) / 2);
  15279. break;
  15280. case 'left' :
  15281. x = legendOption.padding[3] + legendOption.borderWidth;
  15282. break;
  15283. case 'right' :
  15284. x = zrWidth
  15285. - totalWidth
  15286. - legendOption.padding[1]
  15287. - legendOption.padding[3]
  15288. - legendOption.borderWidth * 2;
  15289. break;
  15290. default :
  15291. x = legendOption.x - 0;
  15292. x = isNaN(x) ? 0 : x;
  15293. break;
  15294. }
  15295. var y;
  15296. switch (legendOption.y) {
  15297. case 'top' :
  15298. y = legendOption.padding[0] + legendOption.borderWidth;
  15299. break;
  15300. case 'bottom' :
  15301. y = zrHeight
  15302. - totalHeight
  15303. - legendOption.padding[0]
  15304. - legendOption.padding[2]
  15305. - legendOption.borderWidth * 2;
  15306. break;
  15307. case 'center' :
  15308. y = Math.floor((zrHeight - totalHeight) / 2);
  15309. break;
  15310. default :
  15311. y = legendOption.y - 0;
  15312. y = isNaN(y) ? 0 : y;
  15313. break;
  15314. }
  15315. return {
  15316. x : x,
  15317. y : y,
  15318. width : totalWidth,
  15319. height : totalHeight,
  15320. maxWidth : maxWidth
  15321. };
  15322. }
  15323. /**
  15324. * 根据名称返回series数据
  15325. */
  15326. function _getSeriesByName(name) {
  15327. var series = option.series;
  15328. var hasFind;
  15329. var data;
  15330. for (var i = 0, l = series.length; i < l; i++) {
  15331. if (series[i].name == name) {
  15332. // 系列名称优先
  15333. return series[i];
  15334. }
  15335. if (
  15336. series[i].type == ecConfig.CHART_TYPE_PIE
  15337. || series[i].type == ecConfig.CHART_TYPE_RADAR
  15338. || series[i].type == ecConfig.CHART_TYPE_CHORD
  15339. ) {
  15340. // 饼图、雷达图、和弦图得查找里面的数据名字
  15341. hasFind = false;
  15342. data = series[i].data;
  15343. for (var j = 0, k = data.length; j < k; j++) {
  15344. if (data[j].name == name) {
  15345. data = data[j];
  15346. data.type =
  15347. series[i].type == ecConfig.CHART_TYPE_CHORD
  15348. ? ecConfig.CHART_TYPE_PIE // 和弦图复用pie图样式
  15349. : series[i].type;
  15350. hasFind = true;
  15351. break;
  15352. }
  15353. }
  15354. if (hasFind) {
  15355. return data;
  15356. }
  15357. }
  15358. else if (series[i].type == ecConfig.CHART_TYPE_FORCE) {
  15359. // 力导布局查找categories配置
  15360. hasFind = false;
  15361. data = series[i].categories;
  15362. for (var j = 0, k = data.length; j < k; j++) {
  15363. if (data[j].name == name) {
  15364. data = data[j];
  15365. data.type = ecConfig.CHART_TYPE_FORCE;
  15366. hasFind = true;
  15367. break;
  15368. }
  15369. }
  15370. if (hasFind) {
  15371. return data;
  15372. }
  15373. }
  15374. }
  15375. return;
  15376. }
  15377. function _getItemShapeByType(x, y, width, height, color, itemType) {
  15378. var itemShape = {
  15379. shape : 'icon',
  15380. zlevel : _zlevelBase,
  15381. style : {
  15382. iconType : 'legendicon' + itemType,
  15383. x : x,
  15384. y : y,
  15385. width : width,
  15386. height : height,
  15387. color : color,
  15388. strokeColor : color,
  15389. lineWidth : 3
  15390. },
  15391. hoverable : legendOption.selectedMode,
  15392. clickable : legendOption.selectedMode
  15393. };
  15394. // 特殊设置
  15395. switch (itemType) {
  15396. case 'line' :
  15397. itemShape.style.brushType = 'stroke';
  15398. break;
  15399. case 'k' :
  15400. itemShape.style.brushType = 'both';
  15401. itemShape.style.color = self.deepQuery(
  15402. [ecConfig], 'k.itemStyle.normal.color'
  15403. ) || '#fff';
  15404. itemShape.style.strokeColor = color != '#ccc'
  15405. ? self.deepQuery(
  15406. [ecConfig], 'k.itemStyle.normal.lineStyle.color'
  15407. ) || '#ff3200'
  15408. : color;
  15409. }
  15410. return itemShape;
  15411. }
  15412. function _legendSelected(param) {
  15413. var itemName = param.target._name;
  15414. _selectedMap[itemName] = !_selectedMap[itemName];
  15415. messageCenter.dispatch(
  15416. ecConfig.EVENT.LEGEND_SELECTED,
  15417. param.event,
  15418. {selected : _selectedMap}
  15419. );
  15420. }
  15421. function init(newOption) {
  15422. if (!self.deepQuery([newOption], 'legend.data')) {
  15423. return;
  15424. }
  15425. option = newOption;
  15426. option.legend = self.reformOption(option.legend);
  15427. // 补全padding属性
  15428. option.legend.padding = self.reformCssArray(
  15429. option.legend.padding
  15430. );
  15431. legendOption = option.legend;
  15432. self.clear();
  15433. _selectedMap = {};
  15434. var data = legendOption.data || [];
  15435. var itemName;
  15436. var serie;
  15437. var color;
  15438. for (var i = 0, dataLength = data.length; i < dataLength; i++) {
  15439. itemName = data[i];
  15440. if (itemName === '') {
  15441. continue;
  15442. }
  15443. serie = _getSeriesByName(itemName);
  15444. if (!serie) {
  15445. _selectedMap[itemName] = false;
  15446. }
  15447. else {
  15448. color = self.deepQuery(
  15449. [serie], 'itemStyle.normal.color'
  15450. );
  15451. if (color && serie.type != ecConfig.CHART_TYPE_K) {
  15452. setColor(itemName, color);
  15453. }
  15454. _selectedMap[itemName] = true;
  15455. }
  15456. }
  15457. if (selected) {
  15458. for (var k in selected) {
  15459. _selectedMap[k] = selected[k];
  15460. }
  15461. }
  15462. _buildShape();
  15463. }
  15464. /**
  15465. * 刷新
  15466. */
  15467. function refresh(newOption) {
  15468. if (newOption) {
  15469. option = newOption;
  15470. option.legend = self.reformOption(option.legend);
  15471. // 补全padding属性
  15472. option.legend.padding = self.reformCssArray(
  15473. option.legend.padding
  15474. );
  15475. if (option.legend.selected) {
  15476. for (var k in option.legend.selected) {
  15477. _selectedMap[k] = option.legend.selected[k];
  15478. }
  15479. }
  15480. }
  15481. legendOption = option.legend;
  15482. self.clear();
  15483. _buildShape();
  15484. }
  15485. function setColor(legendName, color) {
  15486. _colorMap[legendName] = color;
  15487. }
  15488. function getColor(legendName) {
  15489. if (!_colorMap[legendName]) {
  15490. _colorMap[legendName] = zr.getColor(_colorIndex++);
  15491. }
  15492. return _colorMap[legendName];
  15493. }
  15494. function hasColor(legendName) {
  15495. return _colorMap[legendName] ? _colorMap[legendName] : false;
  15496. }
  15497. function add(name, color){
  15498. legendOption.data.push(name);
  15499. setColor(name,color);
  15500. _selectedMap[name] = true;
  15501. }
  15502. function del(name){
  15503. var data = legendOption.data;
  15504. var finalData = [];
  15505. var found = false;
  15506. for (var i = 0, dataLength = data.length; i < dataLength; i++) {
  15507. if (found || data[i] != name) {
  15508. finalData.push(data[i]);
  15509. }
  15510. else {
  15511. found = true;
  15512. continue;
  15513. }
  15514. }
  15515. legendOption.data = finalData;
  15516. }
  15517. /**
  15518. * 特殊图形元素回调设置
  15519. * @param {Object} name
  15520. * @param {Object} itemShape
  15521. */
  15522. function getItemShape(name) {
  15523. if (typeof name == 'undefined') {
  15524. return;
  15525. }
  15526. var shape;
  15527. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  15528. shape = self.shapeList[i];
  15529. if (shape._name == name && shape.shape != 'text') {
  15530. return shape;
  15531. }
  15532. }
  15533. }
  15534. /**
  15535. * 特殊图形元素回调设置
  15536. * @param {Object} name
  15537. * @param {Object} itemShape
  15538. */
  15539. function setItemShape(name, itemShape) {
  15540. var shape;
  15541. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  15542. shape = self.shapeList[i];
  15543. if (shape._name == name && shape.shape != 'text') {
  15544. if (!_selectedMap[name]) {
  15545. itemShape.style.color = '#ccc';
  15546. itemShape.style.strokeColor = '#ccc';
  15547. }
  15548. zr.modShape(shape.id, itemShape);
  15549. }
  15550. }
  15551. }
  15552. function isSelected(itemName) {
  15553. if (typeof _selectedMap[itemName] != 'undefined') {
  15554. return _selectedMap[itemName];
  15555. }
  15556. else {
  15557. // 没在legend里定义的都为true啊~
  15558. return true;
  15559. }
  15560. }
  15561. self.init = init;
  15562. self.refresh = refresh;
  15563. self.setColor = setColor;
  15564. self.getColor = getColor;
  15565. self.hasColor = hasColor;
  15566. self.add = add;
  15567. self.del = del;
  15568. self.getItemShape = getItemShape;
  15569. self.setItemShape = setItemShape;
  15570. self.isSelected = isSelected;
  15571. init(option);
  15572. }
  15573. var legendIcon = {
  15574. line : function (ctx, style) {
  15575. var dy = style.height / 2;
  15576. ctx.moveTo(style.x, style.y + dy);
  15577. ctx.lineTo(style.x + style.width,style.y + dy);
  15578. },
  15579. pie : function (ctx, style) {
  15580. var x = style.x;
  15581. var y = style.y;
  15582. var width = style.width;
  15583. var height = style.height;
  15584. var sector = require('zrender/shape').get('sector');
  15585. sector.buildPath(ctx, {
  15586. x : x + width / 2,
  15587. y : y + height + 2,
  15588. r : height + 2,
  15589. r0 : 6,
  15590. startAngle : 45,
  15591. endAngle : 135
  15592. });
  15593. },
  15594. chord : function(ctx, style) {
  15595. var x = style.x;
  15596. var y = style.y;
  15597. var width = style.width;
  15598. var height = style.height;
  15599. var beziercurve = require('zrender/shape').get('beziercurve');
  15600. ctx.moveTo(x, y + height);
  15601. beziercurve.buildPath(ctx, {
  15602. xStart : x,
  15603. yStart : y + height,
  15604. cpX1 : x + width,
  15605. cpY1 : y + height,
  15606. cpX2 : x,
  15607. cpY2 : y + 4,
  15608. xEnd : x + width,
  15609. yEnd : y + 4
  15610. });
  15611. ctx.lineTo(x + width, y);
  15612. beziercurve.buildPath(ctx, {
  15613. xStart : x + width,
  15614. yStart : y,
  15615. cpX1 : x,
  15616. cpY1 : y,
  15617. cpX2 : x + width,
  15618. cpY2 : y + height - 4,
  15619. xEnd : x,
  15620. yEnd : y + height - 4
  15621. });
  15622. ctx.lineTo(x, y + height);
  15623. /*
  15624. var x = style.x + 2;
  15625. var y = style.y;
  15626. var width = style.width - 2;
  15627. var height = style.height;
  15628. var r = width / Math.sqrt(3);
  15629. ctx.moveTo(x, y);
  15630. ctx.quadraticCurveTo(x + width / 4 * 3, y, x + width, y + height);
  15631. ctx.arc(
  15632. x + width / 2, y + height + r / 2,
  15633. r, -Math.PI / 6, -Math.PI / 6 * 5, true);
  15634. ctx.quadraticCurveTo(x - width / 2, y + height / 3, x, y);
  15635. */
  15636. },
  15637. k : function (ctx, style) {
  15638. var x = style.x;
  15639. var y = style.y;
  15640. var width = style.width;
  15641. var height = style.height;
  15642. var candle = require('zrender/shape').get('candle');
  15643. candle.buildPath(ctx, {
  15644. x : x + width / 2,
  15645. y : [y + 1, y + 1, y + height - 6, y + height],
  15646. width : width - 6
  15647. });
  15648. },
  15649. bar : function (ctx, style) {
  15650. ctx.rect(style.x, style.y + 1, style.width, style.height - 2);
  15651. },
  15652. force : function(ctx, style) {
  15653. require('zrender/shape').get('icon').get('circle')(ctx, style);
  15654. },
  15655. radar: function(ctx, style) {
  15656. var n = 6;
  15657. var x = style.x + style.width / 2;
  15658. var y = style.y + style.height / 2;
  15659. var r = style.height / 2;
  15660. var dStep = 2 * Math.PI / n;
  15661. var deg = -Math.PI / 2;
  15662. var xStart = x + r * Math.cos(deg);
  15663. var yStart = y + r * Math.sin(deg);
  15664. ctx.moveTo(xStart, yStart);
  15665. deg += dStep;
  15666. for (var i = 0, end = n - 1; i < end; i ++) {
  15667. ctx.lineTo(x + r * Math.cos(deg), y + r * Math.sin(deg));
  15668. deg += dStep;
  15669. }
  15670. ctx.lineTo(xStart, yStart);
  15671. }
  15672. };
  15673. require('../component').define('legend', Legend);
  15674. return Legend;
  15675. });
  15676. /**
  15677. * echarts组件:值域
  15678. *
  15679. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  15680. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  15681. *
  15682. */
  15683. define('echarts/component/dataRange',['require','./base','../config','zrender/tool/area','zrender/tool/color','zrender/tool/color','../component'],function (require) {
  15684. /**
  15685. * 构造函数
  15686. * @param {Object} messageCenter echart消息中心
  15687. * @param {ZRender} zr zrender实例
  15688. * @param {Object} option 图表参数
  15689. * @param {Object=} selected 用于状态保持
  15690. */
  15691. function DataRange(messageCenter, zr, option) {
  15692. var Base = require('./base');
  15693. Base.call(this, zr);
  15694. var ecConfig = require('../config');
  15695. var zrArea = require('zrender/tool/area');
  15696. var self = this;
  15697. self.type = ecConfig.COMPONENT_TYPE_DATARANGE;
  15698. var dataRangeOption; // 值域选项,共享数据源
  15699. var _zlevelBase = self.getZlevelBase();
  15700. var _itemGroupLocation = {}; // 值域元素组的位置参数,通过计算所得x, y, width, height
  15701. var _calculableLocation; // 可计算元素的位置缓存
  15702. var _startShape;
  15703. var _startMask;
  15704. var _endShape;
  15705. var _endMask;
  15706. var _fillerShae;
  15707. var _range;
  15708. var _syncTicket;
  15709. var _textGap = 10; // 非值文字间隔
  15710. var _gap;
  15711. var _colorList;
  15712. var _valueTextList;
  15713. var _selectedMap = {};
  15714. function _buildShape() {
  15715. _itemGroupLocation = _getItemGroupLocation();
  15716. // console.log(_itemGroupLocation);
  15717. _buildBackground();
  15718. if (dataRangeOption.splitNumber <= 0
  15719. || dataRangeOption.calculable
  15720. ) {
  15721. _buildGradient();
  15722. }
  15723. else {
  15724. _buildItem();
  15725. }
  15726. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  15727. self.shapeList[i].id = zr.newShapeId(self.type);
  15728. zr.addShape(self.shapeList[i]);
  15729. }
  15730. }
  15731. /**
  15732. * 构建图例型的值域元素
  15733. */
  15734. function _buildItem() {
  15735. var data = _valueTextList;
  15736. var dataLength = data.length;
  15737. var itemName;
  15738. var itemShape;
  15739. var textShape;
  15740. var font = self.getFont(dataRangeOption.textStyle);
  15741. var lastX = _itemGroupLocation.x;
  15742. var lastY = _itemGroupLocation.y;
  15743. var itemWidth = dataRangeOption.itemWidth;
  15744. var itemHeight = dataRangeOption.itemHeight;
  15745. var itemGap = dataRangeOption.itemGap;
  15746. var textHeight = zrArea.getTextWidth('国', font);
  15747. var color;
  15748. if (dataRangeOption.orient == 'vertical'
  15749. && dataRangeOption.x == 'right'
  15750. ) {
  15751. lastX = _itemGroupLocation.x
  15752. + _itemGroupLocation.width
  15753. - itemWidth;
  15754. }
  15755. var needValueText = true;
  15756. if (dataRangeOption.text) {
  15757. needValueText = false;
  15758. // 第一个文字
  15759. if (dataRangeOption.text[0]) {
  15760. textShape = _getTextShape(
  15761. lastX, lastY, dataRangeOption.text[0]
  15762. );
  15763. if (dataRangeOption.orient == 'horizontal') {
  15764. lastX += zrArea.getTextWidth(
  15765. dataRangeOption.text[0],
  15766. font
  15767. )
  15768. + _textGap;
  15769. }
  15770. else {
  15771. lastY += textHeight + _textGap;
  15772. }
  15773. self.shapeList.push(textShape);
  15774. }
  15775. }
  15776. for (var i = 0; i < dataLength; i++) {
  15777. itemName = data[i];
  15778. color = getColor((dataLength - i) * _gap + dataRangeOption.min);
  15779. // 图形
  15780. itemShape = _getItemShape(
  15781. lastX, lastY,
  15782. itemWidth, itemHeight,
  15783. (_selectedMap[i] ? color : '#ccc')
  15784. );
  15785. itemShape._idx = i;
  15786. itemShape.onclick = _dataRangeSelected;
  15787. self.shapeList.push(itemShape);
  15788. if (needValueText) {
  15789. // 文字
  15790. textShape = {
  15791. shape : 'text',
  15792. zlevel : _zlevelBase,
  15793. style : {
  15794. x : lastX + itemWidth + 5,
  15795. y : lastY,
  15796. color : _selectedMap[i]
  15797. ? dataRangeOption.textStyle.color
  15798. : '#ccc',
  15799. text: data[i],
  15800. textFont: font,
  15801. textBaseline: 'top'
  15802. },
  15803. clickable : true
  15804. };
  15805. if (dataRangeOption.orient == 'vertical'
  15806. && dataRangeOption.x == 'right'
  15807. ) {
  15808. textShape.style.x -= (itemWidth + 10);
  15809. textShape.style.textAlign = 'right';
  15810. }
  15811. textShape._idx = i;
  15812. textShape.onclick = _dataRangeSelected;
  15813. self.shapeList.push(textShape);
  15814. }
  15815. if (dataRangeOption.orient == 'horizontal') {
  15816. lastX += itemWidth
  15817. + (needValueText ? 5 : 0)
  15818. + (needValueText
  15819. ? zrArea.getTextWidth(itemName, font)
  15820. : 0)
  15821. + itemGap;
  15822. }
  15823. else {
  15824. lastY += itemHeight + itemGap;
  15825. }
  15826. }
  15827. if (!needValueText && dataRangeOption.text[1]) {
  15828. if (dataRangeOption.orient == 'horizontal') {
  15829. lastX = lastX - itemGap + _textGap;
  15830. }
  15831. else {
  15832. lastY = lastY - itemGap + _textGap;
  15833. }
  15834. // 最后一个文字
  15835. textShape = _getTextShape(
  15836. lastX, lastY, dataRangeOption.text[1]
  15837. );
  15838. self.shapeList.push(textShape);
  15839. }
  15840. }
  15841. /**
  15842. * 构建渐变型的值域元素
  15843. */
  15844. function _buildGradient() {
  15845. var itemShape;
  15846. var textShape;
  15847. var font = self.getFont(dataRangeOption.textStyle);
  15848. var lastX = _itemGroupLocation.x;
  15849. var lastY = _itemGroupLocation.y;
  15850. var itemWidth = dataRangeOption.itemWidth;
  15851. var itemHeight = dataRangeOption.itemHeight;
  15852. var textHeight = zrArea.getTextWidth('国', font);
  15853. var needValueText = true;
  15854. if (dataRangeOption.text) {
  15855. needValueText = false;
  15856. // 第一个文字
  15857. if (dataRangeOption.text[0]) {
  15858. textShape = _getTextShape(
  15859. lastX, lastY, dataRangeOption.text[0]
  15860. );
  15861. if (dataRangeOption.orient == 'horizontal') {
  15862. lastX += zrArea.getTextWidth(
  15863. dataRangeOption.text[0],
  15864. font
  15865. )
  15866. + _textGap;
  15867. }
  15868. else {
  15869. lastY += textHeight + _textGap;
  15870. }
  15871. self.shapeList.push(textShape);
  15872. }
  15873. }
  15874. var zrColor = require('zrender/tool/color');
  15875. var per = 1 / (dataRangeOption.color.length - 1);
  15876. var colorList = [];
  15877. for (var i = 0, l = dataRangeOption.color.length; i < l; i++) {
  15878. colorList.push([i * per, dataRangeOption.color[i]]);
  15879. }
  15880. if (dataRangeOption.orient == 'horizontal') {
  15881. itemShape = {
  15882. shape : 'rectangle',
  15883. zlevel : _zlevelBase,
  15884. style : {
  15885. x : lastX,
  15886. y : lastY,
  15887. width : itemWidth * 10,
  15888. height : itemHeight,
  15889. color : zrColor.getLinearGradient(
  15890. lastX, lastY, lastX + itemWidth * 10, lastY,
  15891. colorList
  15892. )
  15893. },
  15894. hoverable : false
  15895. };
  15896. lastX += itemWidth * 10 + _textGap;
  15897. }
  15898. else {
  15899. itemShape = {
  15900. shape : 'rectangle',
  15901. zlevel : _zlevelBase,
  15902. style : {
  15903. x : lastX,
  15904. y : lastY,
  15905. width : itemWidth,
  15906. height : itemHeight * 10,
  15907. color : zrColor.getLinearGradient(
  15908. lastX, lastY, lastX, lastY + itemHeight * 10,
  15909. colorList
  15910. )
  15911. },
  15912. hoverable : false
  15913. };
  15914. lastY += itemHeight * 10 + _textGap;
  15915. }
  15916. self.shapeList.push(itemShape);
  15917. if (dataRangeOption.calculable) {
  15918. _calculableLocation = itemShape.style;
  15919. _buildFiller();
  15920. _bulidMask();
  15921. _bulidHandle();
  15922. }
  15923. if (!needValueText && dataRangeOption.text[1]) {
  15924. // 最后一个文字
  15925. textShape = _getTextShape(
  15926. lastX, lastY, dataRangeOption.text[1]
  15927. );
  15928. self.shapeList.push(textShape);
  15929. }
  15930. }
  15931. /**
  15932. * 构建填充物
  15933. */
  15934. function _buildFiller() {
  15935. _fillerShae = {
  15936. shape : 'rectangle',
  15937. zlevel : _zlevelBase + 1,
  15938. style : {
  15939. x : _calculableLocation.x,
  15940. y : _calculableLocation.y,
  15941. width : _calculableLocation.width,
  15942. height : _calculableLocation.height,
  15943. color : 'rgba(255,255,255,0.2)'
  15944. },
  15945. draggable : true,
  15946. ondrift : _ondrift,
  15947. ondragend : _ondragend,
  15948. _type : 'filler'
  15949. };
  15950. self.shapeList.push(_fillerShae);
  15951. }
  15952. /**
  15953. * 构建拖拽手柄
  15954. */
  15955. function _bulidHandle() {
  15956. var x = _calculableLocation.x;
  15957. var y = _calculableLocation.y;
  15958. var width = _calculableLocation.width;
  15959. var height = _calculableLocation.height;
  15960. var font = self.getFont(dataRangeOption.textStyle);
  15961. var textHieght = zrArea.getTextWidth('国', font) + 2;
  15962. var textWidth = Math.max(
  15963. zrArea.getTextWidth(
  15964. dataRangeOption.precision === 0
  15965. ? dataRangeOption.max
  15966. : dataRangeOption.max.toFixed(
  15967. dataRangeOption.precision
  15968. ),
  15969. font),
  15970. zrArea.getTextWidth(
  15971. dataRangeOption.precision === 0
  15972. ? dataRangeOption.min
  15973. : dataRangeOption.min.toFixed(
  15974. dataRangeOption.precision
  15975. ),
  15976. font
  15977. )
  15978. ) + 2;
  15979. var pointListStart;
  15980. var textXStart;
  15981. var textYStart;
  15982. var pointListEnd;
  15983. var textXEnd;
  15984. var textYEnd;
  15985. if (dataRangeOption.orient == 'horizontal') {
  15986. // 水平
  15987. if (dataRangeOption.y != 'bottom') {
  15988. // 手柄统统在下方
  15989. pointListStart = [
  15990. [x, y],
  15991. [x, y + height + textHieght / 2 * 3],
  15992. [x - textWidth, y + height + textHieght / 2 * 3],
  15993. [x - textWidth, y + height + textHieght / 2],
  15994. [x - textHieght / 2, y + height + textHieght / 2],
  15995. [x - 1, y + height],
  15996. [x - 1, y]
  15997. ];
  15998. textXStart = x - textWidth / 2;
  15999. textYStart = y + height + textHieght;
  16000. pointListEnd = [
  16001. [x + width, y],
  16002. [x + width, y + height + textHieght / 2 * 3],
  16003. [x + width + textWidth, y + height + textHieght/2*3],
  16004. [x + width + textWidth, y + height + textHieght / 2],
  16005. [x + width + textHieght / 2, y + height + textHieght/2],
  16006. [x + width + 1, y + height],
  16007. [x + width + 1, y]
  16008. ];
  16009. textXEnd = x + width + textWidth / 2;
  16010. textYEnd = textYStart;
  16011. }
  16012. else {
  16013. // 手柄在上方
  16014. pointListStart = [
  16015. [x, y + height],
  16016. [x, y - textHieght / 2 * 3],
  16017. [x - textWidth, y - textHieght / 2 * 3],
  16018. [x - textWidth, y - textHieght / 2],
  16019. [x - textHieght / 2, y - textHieght / 2],
  16020. [x - 1, y],
  16021. [x - 1, y + height]
  16022. ];
  16023. textXStart = x - textWidth / 2;
  16024. textYStart = y - textHieght;
  16025. pointListEnd = [
  16026. [x + width, y + height],
  16027. [x + width, y - textHieght / 2 * 3],
  16028. [x + width + textWidth, y - textHieght / 2 * 3],
  16029. [x + width + textWidth, y - textHieght / 2],
  16030. [x + width + textHieght / 2, y - textHieght / 2],
  16031. [x + width + 1, y],
  16032. [x + width + 1, y + height]
  16033. ];
  16034. textXEnd = x + width + textWidth / 2;
  16035. textYEnd = textYStart;
  16036. }
  16037. }
  16038. else {
  16039. textWidth += textHieght;
  16040. // 垂直
  16041. if (dataRangeOption.x != 'right') {
  16042. // 手柄统统在右侧
  16043. pointListStart = [
  16044. [x, y],
  16045. [x + width + textWidth, y],
  16046. [x + width + textWidth, y - textHieght],
  16047. [x + width + textHieght, y - textHieght],
  16048. [x + width, y - 1],
  16049. [x, y - 1]
  16050. ];
  16051. textXStart = x + width + textWidth / 2 + textHieght / 2;
  16052. textYStart = y - textHieght / 2;
  16053. pointListEnd = [
  16054. [x, y + height],
  16055. [x + width + textWidth, y + height],
  16056. [x + width + textWidth, y + textHieght + height],
  16057. [x + width + textHieght, y + textHieght + height],
  16058. [x + width, y + 1 + height],
  16059. [x, y + height + 1]
  16060. ];
  16061. textXEnd = textXStart;
  16062. textYEnd = y + height + textHieght / 2;
  16063. }
  16064. else {
  16065. // 手柄在左侧
  16066. pointListStart = [
  16067. [x + width, y],
  16068. [x - textWidth, y],
  16069. [x - textWidth, y - textHieght],
  16070. [x - textHieght, y - textHieght],
  16071. [x, y - 1],
  16072. [x + width, y - 1]
  16073. ];
  16074. textXStart = x - textWidth / 2 - textHieght / 2;
  16075. textYStart = y - textHieght / 2;
  16076. pointListEnd = [
  16077. [x + width, y + height],
  16078. [x - textWidth, y + height],
  16079. [x - textWidth, y + textHieght + height],
  16080. [x - textHieght, y + textHieght + height],
  16081. [x, y + 1 + height],
  16082. [x + width, y + height + 1]
  16083. ];
  16084. textXEnd = textXStart;
  16085. textYEnd = y + height + textHieght / 2;
  16086. }
  16087. }
  16088. _startShape = {
  16089. shape : 'polygon',
  16090. zlevel : _zlevelBase + 1,
  16091. style : {
  16092. pointList : pointListStart,
  16093. text : dataRangeOption.max + '',
  16094. textX : textXStart,
  16095. textY : textYStart,
  16096. textPosition : 'specific',
  16097. textAlign : 'center',
  16098. textBaseline : 'middle ',
  16099. textColor: dataRangeOption.textStyle.color,
  16100. color : getColor(dataRangeOption.max),
  16101. width : 0, // for ondrif计算统一
  16102. height : 0,
  16103. x : pointListStart[0][0],
  16104. y : pointListStart[0][1],
  16105. _x : pointListStart[0][0], // 拖拽区域控制缓存
  16106. _y : pointListStart[0][1]
  16107. },
  16108. draggable : true,
  16109. ondrift : _ondrift,
  16110. ondragend : _ondragend
  16111. };
  16112. _endShape = {
  16113. shape : 'polygon',
  16114. zlevel : _zlevelBase + 1,
  16115. style : {
  16116. pointList : pointListEnd,
  16117. text : dataRangeOption.min + '',
  16118. textX : textXEnd,
  16119. textY : textYEnd,
  16120. textPosition : 'specific',
  16121. textAlign : 'center',
  16122. textBaseline : 'middle ',
  16123. textColor: dataRangeOption.textStyle.color,
  16124. color : getColor(dataRangeOption.min),
  16125. width : 0, // for ondrif计算统一
  16126. height : 0,
  16127. x : pointListEnd[0][0],
  16128. y : pointListEnd[0][1],
  16129. _x : pointListEnd[0][0], // 拖拽区域控制缓存
  16130. _y : pointListEnd[0][1]
  16131. },
  16132. draggable : true,
  16133. ondrift : _ondrift,
  16134. ondragend : _ondragend
  16135. };
  16136. self.shapeList.push(_startShape);
  16137. self.shapeList.push(_endShape);
  16138. }
  16139. function _bulidMask() {
  16140. var x = _calculableLocation.x;
  16141. var y = _calculableLocation.y;
  16142. var width = _calculableLocation.width;
  16143. var height = _calculableLocation.height;
  16144. _startMask = {
  16145. shape : 'rectangle',
  16146. zlevel : _zlevelBase + 1,
  16147. style : {
  16148. x : x,
  16149. y : y,
  16150. width : dataRangeOption.orient == 'horizontal'
  16151. ? 0 : width,
  16152. height : dataRangeOption.orient == 'horizontal'
  16153. ? height : 0,
  16154. color : '#ccc'
  16155. },
  16156. hoverable:false
  16157. };
  16158. _endMask = {
  16159. shape : 'rectangle',
  16160. zlevel : _zlevelBase + 1,
  16161. style : {
  16162. x : dataRangeOption.orient == 'horizontal'
  16163. ? x + width : x,
  16164. y : dataRangeOption.orient == 'horizontal'
  16165. ? y : y + height,
  16166. width : dataRangeOption.orient == 'horizontal'
  16167. ? 0 : width,
  16168. height : dataRangeOption.orient == 'horizontal'
  16169. ? height : 0,
  16170. color : '#ccc'
  16171. },
  16172. hoverable:false
  16173. };
  16174. self.shapeList.push(_startMask);
  16175. self.shapeList.push(_endMask);
  16176. }
  16177. function _buildBackground() {
  16178. var pTop = dataRangeOption.padding[0];
  16179. var pRight = dataRangeOption.padding[1];
  16180. var pBottom = dataRangeOption.padding[2];
  16181. var pLeft = dataRangeOption.padding[3];
  16182. self.shapeList.push({
  16183. shape : 'rectangle',
  16184. zlevel : _zlevelBase,
  16185. hoverable :false,
  16186. style : {
  16187. x : _itemGroupLocation.x - pLeft,
  16188. y : _itemGroupLocation.y - pTop,
  16189. width : _itemGroupLocation.width + pLeft + pRight,
  16190. height : _itemGroupLocation.height + pTop + pBottom,
  16191. brushType : dataRangeOption.borderWidth === 0
  16192. ? 'fill' : 'both',
  16193. color : dataRangeOption.backgroundColor,
  16194. strokeColor : dataRangeOption.borderColor,
  16195. lineWidth : dataRangeOption.borderWidth
  16196. }
  16197. });
  16198. }
  16199. /**
  16200. * 根据选项计算值域实体的位置坐标
  16201. */
  16202. function _getItemGroupLocation() {
  16203. var data = _valueTextList;
  16204. var dataLength = data.length;
  16205. var itemGap = dataRangeOption.itemGap;
  16206. var itemWidth = dataRangeOption.itemWidth;
  16207. var itemHeight = dataRangeOption.itemHeight;
  16208. var totalWidth = 0;
  16209. var totalHeight = 0;
  16210. var font = self.getFont(dataRangeOption.textStyle);
  16211. var textHeight = zrArea.getTextWidth('国', font);
  16212. if (dataRangeOption.orient == 'horizontal') {
  16213. // 水平布局,计算总宽度
  16214. if (dataRangeOption.text
  16215. || dataRangeOption.splitNumber <= 0
  16216. || dataRangeOption.calculable
  16217. ) {
  16218. // 指定文字或线性渐变
  16219. totalWidth =
  16220. ((dataRangeOption.splitNumber <= 0
  16221. || dataRangeOption.calculable)
  16222. ? (itemWidth * 10 + itemGap)
  16223. : dataLength * (itemWidth + itemGap))
  16224. + (dataRangeOption.text
  16225. && typeof dataRangeOption.text[0] != 'undefined'
  16226. ? (zrArea.getTextWidth(
  16227. dataRangeOption.text[0],
  16228. font
  16229. ) + _textGap)
  16230. : 0)
  16231. + (dataRangeOption.text
  16232. && typeof dataRangeOption.text[1] != 'undefined'
  16233. ? (zrArea.getTextWidth(
  16234. dataRangeOption.text[1],
  16235. font
  16236. ) + _textGap)
  16237. : 0);
  16238. }
  16239. else {
  16240. // 值标签
  16241. itemWidth += 5;
  16242. for (var i = 0; i < dataLength; i++) {
  16243. totalWidth += itemWidth
  16244. + zrArea.getTextWidth(
  16245. data[i],
  16246. font
  16247. )
  16248. + itemGap;
  16249. }
  16250. }
  16251. totalWidth -= itemGap; // 减去最后一个的itemGap
  16252. totalHeight = Math.max(textHeight, itemHeight);
  16253. }
  16254. else {
  16255. // 垂直布局,计算总高度
  16256. var maxWidth;
  16257. if (dataRangeOption.text
  16258. || dataRangeOption.splitNumber <= 0
  16259. || dataRangeOption.calculable
  16260. ) {
  16261. // 指定文字或线性渐变
  16262. totalHeight =
  16263. ((dataRangeOption.splitNumber <= 0
  16264. || dataRangeOption.calculable)
  16265. ? (itemHeight * 10 + itemGap)
  16266. : dataLength * (itemHeight + itemGap))
  16267. + (dataRangeOption.text
  16268. && typeof dataRangeOption.text[0] != 'undefined'
  16269. ? (_textGap + textHeight)
  16270. : 0)
  16271. + (dataRangeOption.text
  16272. && typeof dataRangeOption.text[1] != 'undefined'
  16273. ? (_textGap + textHeight)
  16274. : 0);
  16275. maxWidth = Math.max(
  16276. zrArea.getTextWidth(
  16277. (dataRangeOption.text && dataRangeOption.text[0])
  16278. || '',
  16279. font
  16280. ),
  16281. zrArea.getTextWidth(
  16282. (dataRangeOption.text && dataRangeOption.text[1])
  16283. || '',
  16284. font
  16285. )
  16286. );
  16287. totalWidth = Math.max(itemWidth, maxWidth);
  16288. }
  16289. else {
  16290. totalHeight = (itemHeight + itemGap) * dataLength;
  16291. // 值标签
  16292. itemWidth += 5;
  16293. maxWidth = 0;
  16294. for (var i = 0; i < dataLength; i++) {
  16295. maxWidth = Math.max(
  16296. maxWidth,
  16297. zrArea.getTextWidth(
  16298. data[i],
  16299. font
  16300. )
  16301. );
  16302. }
  16303. totalWidth = itemWidth + maxWidth;
  16304. }
  16305. totalHeight -= itemGap; // 减去最后一个的itemGap;
  16306. }
  16307. var x;
  16308. var zrWidth = zr.getWidth();
  16309. switch (dataRangeOption.x) {
  16310. case 'center' :
  16311. x = Math.floor((zrWidth - totalWidth) / 2);
  16312. break;
  16313. case 'left' :
  16314. x = dataRangeOption.padding[3]
  16315. + dataRangeOption.borderWidth;
  16316. break;
  16317. case 'right' :
  16318. x = zrWidth
  16319. - totalWidth
  16320. - dataRangeOption.padding[1]
  16321. - dataRangeOption.borderWidth;
  16322. break;
  16323. default :
  16324. x = dataRangeOption.x - 0;
  16325. x = isNaN(x) ? 0 : x;
  16326. break;
  16327. }
  16328. var y;
  16329. var zrHeight = zr.getHeight();
  16330. switch (dataRangeOption.y) {
  16331. case 'top' :
  16332. y = dataRangeOption.padding[0]
  16333. + dataRangeOption.borderWidth;
  16334. break;
  16335. case 'bottom' :
  16336. y = zrHeight
  16337. - totalHeight
  16338. - dataRangeOption.padding[2]
  16339. - dataRangeOption.borderWidth;
  16340. break;
  16341. case 'center' :
  16342. y = Math.floor((zrHeight - totalHeight) / 2);
  16343. break;
  16344. default :
  16345. y = dataRangeOption.y - 0;
  16346. y = isNaN(y) ? 0 : y;
  16347. break;
  16348. }
  16349. if (dataRangeOption.calculable) {
  16350. // 留出手柄控件
  16351. var handlerWidth = Math.max(
  16352. zrArea.getTextWidth(dataRangeOption.max, font),
  16353. zrArea.getTextWidth(dataRangeOption.min, font)
  16354. );
  16355. if (dataRangeOption.orient == 'horizontal') {
  16356. if (x < handlerWidth) {
  16357. x = handlerWidth + 5;
  16358. }
  16359. if (x + totalWidth + handlerWidth > zrWidth) {
  16360. x -= handlerWidth + 5;
  16361. }
  16362. }
  16363. else {
  16364. if (y < textHeight) {
  16365. y = textHeight + 5;
  16366. }
  16367. if (y + totalHeight + textHeight > zrHeight) {
  16368. y -= textHeight + 5;
  16369. }
  16370. }
  16371. }
  16372. return {
  16373. x : x,
  16374. y : y,
  16375. width : totalWidth,
  16376. height : totalHeight
  16377. };
  16378. }
  16379. // 指定文本
  16380. function _getTextShape(x, y, text) {
  16381. return {
  16382. shape : 'text',
  16383. zlevel : _zlevelBase,
  16384. style : {
  16385. x : (dataRangeOption.orient == 'horizontal'
  16386. ? x
  16387. : _itemGroupLocation.x
  16388. + _itemGroupLocation.width / 2
  16389. ),
  16390. y : (dataRangeOption.orient == 'horizontal'
  16391. ? _itemGroupLocation.y
  16392. + _itemGroupLocation.height / 2
  16393. : y
  16394. ),
  16395. color : dataRangeOption.textStyle.color,
  16396. text: text,
  16397. textFont: self.getFont(dataRangeOption.textStyle),
  16398. textBaseline: (dataRangeOption.orient == 'horizontal'
  16399. ? 'middle' : 'top'),
  16400. textAlign: (dataRangeOption.orient == 'horizontal'
  16401. ? 'left' : 'center')
  16402. }
  16403. };
  16404. }
  16405. // 色尺legend item shape
  16406. function _getItemShape(x, y, width, height, color) {
  16407. return {
  16408. shape : 'rectangle',
  16409. zlevel : _zlevelBase,
  16410. style : {
  16411. x : x,
  16412. y : y + 1,
  16413. width : width,
  16414. height : height - 2,
  16415. color : color
  16416. },
  16417. clickable : true
  16418. };
  16419. }
  16420. /**
  16421. * 拖拽范围控制
  16422. */
  16423. function _ondrift(e, dx, dy) {
  16424. var x = _calculableLocation.x;
  16425. var y = _calculableLocation.y;
  16426. var width = _calculableLocation.width;
  16427. var height = _calculableLocation.height;
  16428. if (dataRangeOption.orient == 'horizontal') {
  16429. if (e.style.x + dx <= x) {
  16430. e.style.x = x;
  16431. }
  16432. else if (e.style.x + dx + e.style.width >= x + width) {
  16433. e.style.x = x + width - e.style.width;
  16434. }
  16435. else {
  16436. e.style.x += dx;
  16437. }
  16438. }
  16439. else {
  16440. if (e.style.y + dy <= y) {
  16441. e.style.y = y;
  16442. }
  16443. else if (e.style.y + dy + e.style.height >= y + height) {
  16444. e.style.y = y + height - e.style.height;
  16445. }
  16446. else {
  16447. e.style.y += dy;
  16448. }
  16449. }
  16450. if (e._type == 'filler') {
  16451. _syncHandleShape();
  16452. }
  16453. else {
  16454. //e.position = [e.style.x - e.style._x, e.style.y - e.style._y];
  16455. _syncFillerShape(e);
  16456. }
  16457. if (dataRangeOption.realtime) {
  16458. _syncData();
  16459. }
  16460. else {
  16461. clearTimeout(_syncTicket);
  16462. _syncTicket = setTimeout(_syncData, 200);
  16463. }
  16464. return true;
  16465. }
  16466. function _ondragend() {
  16467. self.isDragend = true;
  16468. }
  16469. /**
  16470. * 数据项被拖拽出去
  16471. */
  16472. function ondragend(param, status) {
  16473. if (!self.isDragend || !param.target) {
  16474. // 没有在当前实例上发生拖拽行为则直接返回
  16475. return;
  16476. }
  16477. _syncData();
  16478. // 别status = {}赋值啊!!
  16479. status.dragOut = true;
  16480. status.dragIn = true;
  16481. if (!dataRangeOption.realtime) {
  16482. messageCenter.dispatch(ecConfig.EVENT.DATA_RANGE);
  16483. }
  16484. status.needRefresh = false; // 会有消息触发fresh,不用再刷一遍
  16485. // 处理完拖拽事件后复位
  16486. self.isDragend = false;
  16487. return;
  16488. }
  16489. function _syncHandleShape() {
  16490. var x = _calculableLocation.x;
  16491. var y = _calculableLocation.y;
  16492. var width = _calculableLocation.width;
  16493. var height = _calculableLocation.height;
  16494. if (dataRangeOption.orient == 'horizontal') {
  16495. _startShape.style.x = _fillerShae.style.x;
  16496. _startMask.style.width = _startShape.style.x - x;
  16497. _endShape.style.x = _fillerShae.style.x
  16498. + _fillerShae.style.width;
  16499. _endMask.style.x = _endShape.style.x;
  16500. _endMask.style.width = x + width - _endShape.style.x;
  16501. _range.start = Math.ceil(
  16502. 100 - (_startShape.style.x - x) / width * 100
  16503. );
  16504. _range.end = Math.floor(
  16505. 100 - (_endShape.style.x - x) / width * 100
  16506. );
  16507. }
  16508. else {
  16509. _startShape.style.y = _fillerShae.style.y;
  16510. _startMask.style.height = _startShape.style.y - y;
  16511. _endShape.style.y = _fillerShae.style.y
  16512. + _fillerShae.style.height;
  16513. _endMask.style.y = _endShape.style.y;
  16514. _endMask.style.height = y + height - _endShape.style.y;
  16515. _range.start = Math.ceil(
  16516. 100 - (_startShape.style.y - y) / height * 100
  16517. );
  16518. _range.end = Math.floor(
  16519. 100 - (_endShape.style.y - y) / height * 100
  16520. );
  16521. }
  16522. _syncShape(false);
  16523. }
  16524. function _syncFillerShape(e) {
  16525. var x = _calculableLocation.x;
  16526. var y = _calculableLocation.y;
  16527. var width = _calculableLocation.width;
  16528. var height = _calculableLocation.height;
  16529. var a;
  16530. var b;
  16531. if (dataRangeOption.orient == 'horizontal') {
  16532. a = _startShape.style.x;
  16533. b = _endShape.style.x;
  16534. if (e.id == _startShape.id && a >= b) {
  16535. // _startShape触发
  16536. b = a;
  16537. _endShape.style.x = a;
  16538. }
  16539. else if (e.id == _endShape.id && a >= b) {
  16540. // _endShape触发
  16541. a = b;
  16542. _startShape.style.x = a;
  16543. }
  16544. _fillerShae.style.x = a;
  16545. _fillerShae.style.width = b - a;
  16546. _startMask.style.width = a - x;
  16547. _endMask.style.x = b;
  16548. _endMask.style.width = x + width - b;
  16549. _range.start = Math.ceil(100 - (a - x) / width * 100);
  16550. _range.end = Math.floor(100 - (b - x) / width * 100);
  16551. }
  16552. else {
  16553. a = _startShape.style.y;
  16554. b = _endShape.style.y;
  16555. if (e.id == _startShape.id && a >= b) {
  16556. // _startShape触发
  16557. b = a;
  16558. _endShape.style.y = a;
  16559. }
  16560. else if (e.id == _endShape.id && a >= b) {
  16561. // _endShape触发
  16562. a = b;
  16563. _startShape.style.y = a;
  16564. }
  16565. _fillerShae.style.y = a;
  16566. _fillerShae.style.height = b - a;
  16567. _startMask.style.height = a - y;
  16568. _endMask.style.y = b;
  16569. _endMask.style.height = y + height - b;
  16570. _range.start = Math.ceil(100 - (a - y) / height * 100);
  16571. _range.end = Math.floor(100 - (b - y) / height * 100);
  16572. }
  16573. _syncShape(true);
  16574. }
  16575. function _syncShape(needFiller) {
  16576. _startShape.position = [
  16577. _startShape.style.x - _startShape.style._x,
  16578. _startShape.style.y - _startShape.style._y
  16579. ];
  16580. if (dataRangeOption.precision === 0) {
  16581. _startShape.style.text = Math.round(
  16582. _gap * _range.start + dataRangeOption.min
  16583. ) + '';
  16584. } else {
  16585. _startShape.style.text =(
  16586. _gap * _range.start + dataRangeOption.min
  16587. ).toFixed(dataRangeOption.precision);
  16588. }
  16589. _startShape.style.color = getColor(
  16590. _gap * _range.start + dataRangeOption.min
  16591. );
  16592. zr.modShape(_startShape.id, _startShape);
  16593. _endShape.position = [
  16594. _endShape.style.x - _endShape.style._x,
  16595. _endShape.style.y - _endShape.style._y
  16596. ];
  16597. if (dataRangeOption.precision === 0) {
  16598. _endShape.style.text = Math.round(
  16599. _gap * _range.end + dataRangeOption.min
  16600. ) + '';
  16601. } else {
  16602. _endShape.style.text = (
  16603. _gap * _range.end + dataRangeOption.min
  16604. ).toFixed(dataRangeOption.precision);
  16605. }
  16606. _endShape.style.color = getColor(
  16607. _gap * _range.end + dataRangeOption.min
  16608. );
  16609. zr.modShape(_endShape.id, _endShape);
  16610. zr.modShape(_startMask.id, _startMask);
  16611. zr.modShape(_endMask.id, _endMask);
  16612. needFiller && zr.modShape(_fillerShae.id, _fillerShae);
  16613. zr.refresh();
  16614. }
  16615. function _syncData() {
  16616. if (dataRangeOption.realtime) {
  16617. messageCenter.dispatch(ecConfig.EVENT.DATA_RANGE);
  16618. }
  16619. }
  16620. function _dataRangeSelected(param) {
  16621. var idx = param.target._idx;
  16622. _selectedMap[idx] = !_selectedMap[idx];
  16623. messageCenter.dispatch(ecConfig.EVENT.REFRESH);
  16624. }
  16625. function init(newOption) {
  16626. if (typeof self.deepQuery([newOption], 'dataRange.min')
  16627. == 'undefined'
  16628. || typeof self.deepQuery([newOption], 'dataRange.max')
  16629. == 'undefined'
  16630. ) {
  16631. return;
  16632. }
  16633. option = newOption;
  16634. option.dataRange = self.reformOption(option.dataRange);
  16635. // 补全padding属性
  16636. option.dataRange.padding = self.reformCssArray(
  16637. option.dataRange.padding
  16638. );
  16639. dataRangeOption = option.dataRange;
  16640. self.clear();
  16641. _selectedMap = {};
  16642. var zrColor = require('zrender/tool/color');
  16643. var splitNumber = dataRangeOption.splitNumber <= 0
  16644. || dataRangeOption.calculable
  16645. ? 100
  16646. : dataRangeOption.splitNumber;
  16647. _colorList = zrColor.getGradientColors(
  16648. dataRangeOption.color,
  16649. (splitNumber - dataRangeOption.color.length)
  16650. / (dataRangeOption.color.length - 1) + 1
  16651. );
  16652. _colorList = _colorList.slice(0, splitNumber);
  16653. //console.log(_colorList.length)
  16654. if (dataRangeOption.precision === 0) {
  16655. _gap = Math.round(
  16656. (dataRangeOption.max - dataRangeOption.min)
  16657. / splitNumber
  16658. ) || 1;
  16659. } else {
  16660. _gap = (dataRangeOption.max - dataRangeOption.min)
  16661. / splitNumber;
  16662. _gap = _gap.toFixed(dataRangeOption.precision) - 0;
  16663. }
  16664. _valueTextList = [];
  16665. for (var i = 0; i < splitNumber; i++) {
  16666. _selectedMap[i] = true;
  16667. _valueTextList.unshift(
  16668. (i * _gap + dataRangeOption.min).toFixed(
  16669. dataRangeOption.precision
  16670. )
  16671. + ' - '
  16672. + ((i + 1) * _gap + dataRangeOption.min).toFixed(
  16673. dataRangeOption.precision
  16674. )
  16675. );
  16676. }
  16677. _range = {
  16678. start: 100,
  16679. end: 0
  16680. };
  16681. // console.log(_valueTextList,_gap);
  16682. // console.log(_colorList);
  16683. _buildShape();
  16684. }
  16685. /**
  16686. * 刷新
  16687. */
  16688. function refresh(newOption) {
  16689. if (newOption) {
  16690. option = newOption;
  16691. option.dataRange = self.reformOption(option.dataRange);
  16692. // 补全padding属性
  16693. option.dataRange.padding = self.reformCssArray(
  16694. option.dataRange.padding
  16695. );
  16696. }
  16697. dataRangeOption = option.dataRange;
  16698. _range = {
  16699. start: 100,
  16700. end: 0
  16701. };
  16702. self.clear();
  16703. _buildShape();
  16704. }
  16705. function getColor(value) {
  16706. if (isNaN(value)) {
  16707. return null;
  16708. }
  16709. if (value < dataRangeOption.min) {
  16710. value = dataRangeOption.min;
  16711. }
  16712. else if (value > dataRangeOption.max) {
  16713. value = dataRangeOption.max;
  16714. }
  16715. if (dataRangeOption.calculable) {
  16716. if (value > _gap * _range.start + dataRangeOption.min
  16717. || value < _gap * _range.end + dataRangeOption.min) {
  16718. return null;
  16719. }
  16720. }
  16721. var idx = _colorList.length - Math.ceil(
  16722. (value - dataRangeOption.min)
  16723. / (dataRangeOption.max - dataRangeOption.min)
  16724. * _colorList.length
  16725. );
  16726. if (idx == _colorList.length) {
  16727. idx--;
  16728. }
  16729. //console.log(value, idx,_colorList[idx])
  16730. if (_selectedMap[idx]) {
  16731. return _colorList[idx];
  16732. }
  16733. else {
  16734. return null;
  16735. }
  16736. }
  16737. self.init = init;
  16738. self.refresh = refresh;
  16739. self.getColor = getColor;
  16740. self.ondragend = ondragend;
  16741. init(option);
  16742. }
  16743. require('../component').define('dataRange', DataRange);
  16744. return DataRange;
  16745. });
  16746. /**
  16747. * echarts组件:提示框
  16748. *
  16749. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  16750. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  16751. *
  16752. */
  16753. define('echarts/component/tooltip',['require','./base','../config','../util/ecData','zrender/config','zrender/shape','zrender/tool/event','zrender/tool/area','zrender/tool/color','zrender/tool/util','zrender/shape/base','../component'],function (require) {
  16754. /**
  16755. * 构造函数
  16756. * @param {Object} messageCenter echart消息中心
  16757. * @param {ZRender} zr zrender实例
  16758. * @param {Object} option 提示框参数
  16759. * @param {HtmlElement} dom 目标对象
  16760. */
  16761. function Tooltip(messageCenter, zr, option, dom) {
  16762. var Base = require('./base');
  16763. Base.call(this, zr);
  16764. var ecConfig = require('../config');
  16765. var ecData = require('../util/ecData');
  16766. var zrConfig = require('zrender/config');
  16767. var zrShape = require('zrender/shape');
  16768. var zrEvent = require('zrender/tool/event');
  16769. var zrArea = require('zrender/tool/area');
  16770. var zrColor = require('zrender/tool/color');
  16771. var zrUtil = require('zrender/tool/util');
  16772. var zrShapeBase = require('zrender/shape/base');
  16773. var rectangle = zrShape.get('rectangle');
  16774. var self = this;
  16775. self.type = ecConfig.COMPONENT_TYPE_TOOLTIP;
  16776. var _zlevelBase = self.getZlevelBase();
  16777. var component = {}; // 组件索引
  16778. var grid;
  16779. var xAxis;
  16780. var yAxis;
  16781. var polar;
  16782. // tooltip dom & css
  16783. var _tDom = document.createElement('div');
  16784. // 通用样式
  16785. var _gCssText = 'position:absolute;'
  16786. + 'display:block;'
  16787. + 'border-style:solid;'
  16788. + 'white-space:nowrap;';
  16789. // 默认样式
  16790. var _defaultCssText; // css样式缓存
  16791. var _needAxisTrigger; // 坐标轴触发
  16792. var _hidingTicket;
  16793. var _hideDelay; // 隐藏延迟
  16794. var _showingTicket;
  16795. var _showDelay; // 显示延迟
  16796. var _curTarget;
  16797. var _event;
  16798. var _curTicket; // 异步回调标识,用来区分多个请求
  16799. // 缓存一些高宽数据
  16800. var _zrHeight = zr.getHeight();
  16801. var _zrWidth = zr.getWidth();
  16802. var _lastTipShape = false;
  16803. var _axisLineShape = {
  16804. shape : 'line',
  16805. id : zr.newShapeId('tooltip'),
  16806. zlevel: _zlevelBase,
  16807. invisible : true,
  16808. hoverable: false,
  16809. style : {
  16810. // lineWidth : 2,
  16811. // strokeColor : ecConfig.categoryAxis.axisLine.lineStyle.color
  16812. }
  16813. };
  16814. var _axisShadowShape = {
  16815. shape : 'line',
  16816. id : zr.newShapeId('tooltip'),
  16817. zlevel: 1, // grid上,chart下
  16818. invisible : true,
  16819. hoverable: false,
  16820. style : {
  16821. // lineWidth : 10,
  16822. // strokeColor : ecConfig.categoryAxis.axisLine.lineStyle.color
  16823. }
  16824. };
  16825. zr.addShape(_axisLineShape);
  16826. zr.addShape(_axisShadowShape);
  16827. /**
  16828. * 根据配置设置dom样式
  16829. */
  16830. function _style(opt) {
  16831. if (!opt) {
  16832. return '';
  16833. }
  16834. cssText = [];
  16835. if (opt.transitionDuration) {
  16836. var transitionText = 'left ' + opt.transitionDuration + 's,'
  16837. + 'top ' + opt.transitionDuration + 's';
  16838. cssText.push(
  16839. 'transition:' + transitionText
  16840. );
  16841. cssText.push(
  16842. '-moz-transition:' + transitionText
  16843. );
  16844. cssText.push(
  16845. '-webkit-transition:' + transitionText
  16846. );
  16847. cssText.push(
  16848. '-o-transition:' + transitionText
  16849. );
  16850. }
  16851. if (opt.backgroundColor) {
  16852. // for sb ie~
  16853. cssText.push(
  16854. 'background-Color:' + zrColor.toHex(
  16855. opt.backgroundColor
  16856. )
  16857. );
  16858. cssText.push('filter:alpha(opacity=70)');
  16859. cssText.push('background-Color:' + opt.backgroundColor);
  16860. }
  16861. if (typeof opt.borderWidth != 'undefined') {
  16862. cssText.push('border-width:' + opt.borderWidth + 'px');
  16863. }
  16864. if (typeof opt.borderColor != 'undefined') {
  16865. cssText.push('border-color:' + opt.borderColor);
  16866. }
  16867. if (typeof opt.borderRadius != 'undefined') {
  16868. cssText.push(
  16869. 'border-radius:' + opt.borderRadius + 'px'
  16870. );
  16871. cssText.push(
  16872. '-moz-border-radius:' + opt.borderRadius + 'px'
  16873. );
  16874. cssText.push(
  16875. '-webkit-border-radius:' + opt.borderRadius + 'px'
  16876. );
  16877. cssText.push(
  16878. '-o-border-radius:' + opt.borderRadius + 'px'
  16879. );
  16880. }
  16881. var textStyle = opt.textStyle;
  16882. if (textStyle) {
  16883. textStyle.color && cssText.push('color:' + textStyle.color);
  16884. textStyle.decoration && cssText.push(
  16885. 'text-decoration:' + textStyle.decoration
  16886. );
  16887. textStyle.align && cssText.push(
  16888. 'text-align:' + textStyle.align
  16889. );
  16890. textStyle.fontFamily && cssText.push(
  16891. 'font-family:' + textStyle.fontFamily
  16892. );
  16893. textStyle.fontSize && cssText.push(
  16894. 'font-size:' + textStyle.fontSize + 'px'
  16895. );
  16896. textStyle.fontSize && cssText.push(
  16897. 'line-height:' + Math.round(textStyle.fontSize*3/2) + 'px'
  16898. );
  16899. textStyle.fontStyle && cssText.push(
  16900. 'font-style:' + textStyle.fontStyle
  16901. );
  16902. textStyle.fontWeight && cssText.push(
  16903. 'font-weight:' + textStyle.fontWeight
  16904. );
  16905. }
  16906. var padding = opt.padding;
  16907. if (typeof padding != 'undefined') {
  16908. padding = self.reformCssArray(padding);
  16909. cssText.push(
  16910. 'padding:' + padding[0] + 'px '
  16911. + padding[1] + 'px '
  16912. + padding[2] + 'px '
  16913. + padding[3] + 'px'
  16914. );
  16915. }
  16916. cssText = cssText.join(';') + ';';
  16917. return cssText;
  16918. }
  16919. function _hide() {
  16920. if (_tDom) {
  16921. _tDom.style.display = 'none';
  16922. }
  16923. var needRefresh = false;
  16924. if (!_axisLineShape.invisible) {
  16925. _axisLineShape.invisible = true;
  16926. zr.modShape(_axisLineShape.id, _axisLineShape);
  16927. needRefresh = true;
  16928. }
  16929. if (!_axisShadowShape.invisible) {
  16930. _axisShadowShape.invisible = true;
  16931. zr.modShape(_axisShadowShape.id, _axisShadowShape);
  16932. needRefresh = true;
  16933. }
  16934. if (_lastTipShape && _lastTipShape.tipShape.length > 0) {
  16935. zr.delShape(_lastTipShape.tipShape);
  16936. _lastTipShape = false;
  16937. }
  16938. needRefresh && zr.refresh();
  16939. }
  16940. function _show(x, y, specialCssText) {
  16941. var domHeight = _tDom.offsetHeight;
  16942. var domWidth = _tDom.offsetWidth;
  16943. if (x + domWidth > _zrWidth) {
  16944. x = _zrWidth - domWidth;
  16945. }
  16946. if (y + domHeight > _zrHeight) {
  16947. y = _zrHeight - domHeight;
  16948. }
  16949. if (y < 20) {
  16950. y = 0;
  16951. }
  16952. _tDom.style.cssText = _gCssText
  16953. + _defaultCssText
  16954. + (specialCssText ? specialCssText : '')
  16955. + 'left:' + x + 'px;top:' + y + 'px;';
  16956. if (_zrWidth - x < 100 || _zrHeight - y < 100) {
  16957. // 太靠边的做一次refixed
  16958. setTimeout(_refixed, 20);
  16959. }
  16960. }
  16961. function _refixed() {
  16962. if (_tDom) {
  16963. var cssText = '';
  16964. var domHeight = _tDom.offsetHeight;
  16965. var domWidth = _tDom.offsetWidth;
  16966. if (_tDom.offsetLeft + domWidth > _zrWidth) {
  16967. cssText += 'left:' + (_zrWidth - domWidth) + 'px;';
  16968. }
  16969. if (_tDom.offsetTop + domHeight > _zrHeight) {
  16970. cssText += 'top:' + (_zrHeight - domHeight) + 'px;';
  16971. }
  16972. if (cssText !== '') {
  16973. _tDom.style.cssText += cssText;
  16974. }
  16975. }
  16976. }
  16977. function _tryShow() {
  16978. var needShow;
  16979. var trigger;
  16980. if (!_curTarget) {
  16981. // 坐标轴事件
  16982. _findPolarTrigger() || _findAxisTrigger();
  16983. }
  16984. else {
  16985. // 数据项事件
  16986. if (_curTarget._type == 'island' && option.tooltip.show) {
  16987. _showItemTrigger();
  16988. return;
  16989. }
  16990. var serie = ecData.get(_curTarget, 'series');
  16991. var data = ecData.get(_curTarget, 'data');
  16992. needShow = self.deepQuery(
  16993. [data, serie, option],
  16994. 'tooltip.show'
  16995. );
  16996. if (typeof serie == 'undefined'
  16997. || typeof data == 'undefined'
  16998. || needShow === false
  16999. ) {
  17000. // 不响应tooltip的数据对象延时隐藏
  17001. clearTimeout(_hidingTicket);
  17002. clearTimeout(_showingTicket);
  17003. _hidingTicket = setTimeout(_hide, _hideDelay);
  17004. }
  17005. else {
  17006. trigger = self.deepQuery(
  17007. [data, serie, option],
  17008. 'tooltip.trigger'
  17009. );
  17010. trigger == 'axis'
  17011. ? _showAxisTrigger(
  17012. serie.xAxisIndex, serie.yAxisIndex,
  17013. ecData.get(_curTarget, 'dataIndex')
  17014. )
  17015. : _showItemTrigger();
  17016. }
  17017. }
  17018. }
  17019. /**
  17020. * 直角系
  17021. */
  17022. function _findAxisTrigger() {
  17023. if (!xAxis || !yAxis) {
  17024. _hidingTicket = setTimeout(_hide, _hideDelay);
  17025. return;
  17026. }
  17027. var series = option.series;
  17028. var xAxisIndex;
  17029. var yAxisIndex;
  17030. for (var i = 0, l = series.length; i < l; i++) {
  17031. // 找到第一个axis触发tooltip的系列
  17032. if (self.deepQuery(
  17033. [series[i], option], 'tooltip.trigger'
  17034. ) == 'axis'
  17035. ) {
  17036. xAxisIndex = series[i].xAxisIndex || 0;
  17037. yAxisIndex = series[i].yAxisIndex || 0;
  17038. if (xAxis.getAxis(xAxisIndex)
  17039. && xAxis.getAxis(xAxisIndex).type
  17040. == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
  17041. ) {
  17042. // 横轴为类目轴
  17043. _showAxisTrigger(xAxisIndex, yAxisIndex,
  17044. _getNearestDataIndex('x', xAxis.getAxis(xAxisIndex))
  17045. );
  17046. return;
  17047. }
  17048. else if (yAxis.getAxis(yAxisIndex)
  17049. && yAxis.getAxis(yAxisIndex).type
  17050. == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
  17051. ) {
  17052. // 纵轴为类目轴
  17053. _showAxisTrigger(xAxisIndex, yAxisIndex,
  17054. _getNearestDataIndex('y', yAxis.getAxis(yAxisIndex))
  17055. );
  17056. return;
  17057. }
  17058. }
  17059. }
  17060. }
  17061. /**
  17062. * 极坐标
  17063. */
  17064. function _findPolarTrigger() {
  17065. if (!polar) {
  17066. return false;
  17067. }
  17068. var x = zrEvent.getX(_event);
  17069. var y = zrEvent.getY(_event);
  17070. var polarIndex = polar.getNearestIndex([x, y]);
  17071. var valueIndex;
  17072. if (polarIndex) {
  17073. valueIndex = polarIndex.valueIndex;
  17074. polarIndex = polarIndex.polarIndex;
  17075. }
  17076. else {
  17077. polarIndex = -1;
  17078. }
  17079. if (polarIndex != -1) {
  17080. return _showPolarTrigger(polarIndex, valueIndex);
  17081. }
  17082. return false;
  17083. }
  17084. /**
  17085. * 根据坐标轴事件带的属性获取最近的axisDataIndex
  17086. */
  17087. function _getNearestDataIndex(direction, categoryAxis) {
  17088. var dataIndex = -1;
  17089. var x = zrEvent.getX(_event);
  17090. var y = zrEvent.getY(_event);
  17091. if (direction == 'x') {
  17092. // 横轴为类目轴
  17093. var left;
  17094. var right;
  17095. var xEnd = grid.getXend();
  17096. var curCoord = categoryAxis.getCoordByIndex(dataIndex);
  17097. while (curCoord < xEnd) {
  17098. if (curCoord <= x) {
  17099. left = curCoord;
  17100. }
  17101. if (curCoord >= x) {
  17102. break;
  17103. }
  17104. curCoord = categoryAxis.getCoordByIndex(++dataIndex);
  17105. right = curCoord;
  17106. }
  17107. if (x - left < right - x) {
  17108. dataIndex -= 1;
  17109. }
  17110. else {
  17111. // 离右边近,看是否为最后一个
  17112. if (typeof categoryAxis.getNameByIndex(dataIndex)
  17113. == 'undefined'
  17114. ) {
  17115. dataIndex = -1;
  17116. }
  17117. }
  17118. return dataIndex;
  17119. }
  17120. else {
  17121. // 纵轴为类目轴
  17122. var top;
  17123. var bottom;
  17124. var yStart = grid.getY();
  17125. var curCoord = categoryAxis.getCoordByIndex(dataIndex);
  17126. while (curCoord > yStart) {
  17127. if (curCoord >= y) {
  17128. bottom = curCoord;
  17129. }
  17130. if (curCoord <= y) {
  17131. break;
  17132. }
  17133. curCoord = categoryAxis.getCoordByIndex(++dataIndex);
  17134. top = curCoord;
  17135. }
  17136. if (y - top > bottom - y) {
  17137. dataIndex -= 1;
  17138. }
  17139. else {
  17140. // 离上方边近,看是否为最后一个
  17141. if (typeof categoryAxis.getNameByIndex(dataIndex)
  17142. == 'undefined'
  17143. ) {
  17144. dataIndex = -1;
  17145. }
  17146. }
  17147. return dataIndex;
  17148. }
  17149. return -1;
  17150. }
  17151. /**
  17152. * 直角系
  17153. */
  17154. function _showAxisTrigger(xAxisIndex, yAxisIndex, dataIndex) {
  17155. if (typeof xAxis == 'undefined'
  17156. || typeof yAxis == 'undefined'
  17157. || typeof xAxisIndex == 'undefined'
  17158. || typeof yAxisIndex == 'undefined'
  17159. || dataIndex < 0
  17160. ) {
  17161. // 不响应tooltip的数据对象延时隐藏
  17162. clearTimeout(_hidingTicket);
  17163. clearTimeout(_showingTicket);
  17164. _hidingTicket = setTimeout(_hide, _hideDelay);
  17165. return;
  17166. }
  17167. var series = option.series;
  17168. var seriesArray = [];
  17169. var seriesIndex = [];
  17170. var categoryAxis;
  17171. var x;
  17172. var y;
  17173. var formatter;
  17174. var showContent;
  17175. var specialCssText = '';
  17176. if (option.tooltip.trigger == 'axis') {
  17177. if (option.tooltip.show === false) {
  17178. return;
  17179. }
  17180. formatter = option.tooltip.formatter;
  17181. }
  17182. if (xAxisIndex != -1
  17183. && xAxis.getAxis(xAxisIndex).type
  17184. == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
  17185. ) {
  17186. // 横轴为类目轴,找到所有用这条横轴并且axis触发的系列数据
  17187. categoryAxis = xAxis.getAxis(xAxisIndex);
  17188. for (var i = 0, l = series.length; i < l; i++) {
  17189. if (series[i].xAxisIndex == xAxisIndex
  17190. && self.deepQuery(
  17191. [series[i], option], 'tooltip.trigger'
  17192. ) == 'axis'
  17193. ) {
  17194. showContent = self.deepQuery(
  17195. [series[i]],
  17196. 'tooltip.showContent'
  17197. ) || showContent;
  17198. formatter = self.deepQuery(
  17199. [series[i]],
  17200. 'tooltip.formatter'
  17201. ) || formatter;
  17202. specialCssText += _style(self.deepQuery(
  17203. [series[i]], 'tooltip'
  17204. ));
  17205. seriesArray.push(series[i]);
  17206. seriesIndex.push(i);
  17207. }
  17208. }
  17209. // 寻找高亮元素
  17210. messageCenter.dispatch(
  17211. ecConfig.EVENT.TOOLTIP_HOVER,
  17212. _event,
  17213. {
  17214. seriesIndex : seriesIndex,
  17215. dataIndex : dataIndex
  17216. }
  17217. );
  17218. y = zrEvent.getY(_event) + 10;
  17219. x = categoryAxis.getCoordByIndex(dataIndex);
  17220. _styleAxisPointer(
  17221. seriesArray,
  17222. x, grid.getY(),
  17223. x, grid.getYend(),
  17224. categoryAxis.getGap()
  17225. );
  17226. x += 10;
  17227. }
  17228. else if (yAxisIndex != -1
  17229. && yAxis.getAxis(yAxisIndex).type
  17230. == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
  17231. ) {
  17232. // 纵轴为类目轴,找到所有用这条纵轴并且axis触发的系列数据
  17233. categoryAxis = yAxis.getAxis(yAxisIndex);
  17234. for (var i = 0, l = series.length; i < l; i++) {
  17235. if (series[i].yAxisIndex == yAxisIndex
  17236. && self.deepQuery(
  17237. [series[i], option], 'tooltip.trigger'
  17238. ) == 'axis'
  17239. ) {
  17240. showContent = self.deepQuery(
  17241. [series[i]],
  17242. 'tooltip.showContent'
  17243. ) || showContent;
  17244. formatter = self.deepQuery(
  17245. [series[i]],
  17246. 'tooltip.formatter'
  17247. ) || formatter;
  17248. specialCssText += _style(self.deepQuery(
  17249. [series[i]], 'tooltip'
  17250. ));
  17251. seriesArray.push(series[i]);
  17252. seriesIndex.push(i);
  17253. }
  17254. }
  17255. // 寻找高亮元素
  17256. messageCenter.dispatch(
  17257. ecConfig.EVENT.TOOLTIP_HOVER,
  17258. _event,
  17259. {
  17260. seriesIndex : seriesIndex,
  17261. dataIndex : dataIndex
  17262. }
  17263. );
  17264. x = zrEvent.getX(_event) + 10;
  17265. y = categoryAxis.getCoordByIndex(dataIndex);
  17266. _styleAxisPointer(
  17267. seriesArray,
  17268. grid.getX(), y,
  17269. grid.getXend(), y,
  17270. categoryAxis.getGap()
  17271. );
  17272. y += 10;
  17273. }
  17274. if (seriesArray.length > 0) {
  17275. var data;
  17276. if (typeof formatter == 'function') {
  17277. var params = [];
  17278. for (var i = 0, l = seriesArray.length; i < l; i++) {
  17279. data = seriesArray[i].data[dataIndex];
  17280. data = typeof data != 'undefined'
  17281. ? (typeof data.value != 'undefined'
  17282. ? data.value
  17283. : data)
  17284. : '-';
  17285. params.push([
  17286. seriesArray[i].name || '',
  17287. categoryAxis.getNameByIndex(dataIndex),
  17288. data
  17289. ]);
  17290. }
  17291. _curTicket = 'axis:' + dataIndex;
  17292. _tDom.innerHTML = formatter(
  17293. params, _curTicket, _setContent
  17294. );
  17295. }
  17296. else if (typeof formatter == 'string') {
  17297. _curTicket = NaN;
  17298. formatter = formatter.replace('{a}','{a0}')
  17299. .replace('{b}','{b0}')
  17300. .replace('{c}','{c0}');
  17301. for (var i = 0, l = seriesArray.length; i < l; i++) {
  17302. formatter = formatter.replace(
  17303. '{a' + i + '}',
  17304. _encodeHTML(seriesArray[i].name || '')
  17305. );
  17306. formatter = formatter.replace(
  17307. '{b' + i + '}',
  17308. _encodeHTML(categoryAxis.getNameByIndex(dataIndex))
  17309. );
  17310. data = seriesArray[i].data[dataIndex];
  17311. data = typeof data != 'undefined'
  17312. ? (typeof data.value != 'undefined'
  17313. ? data.value
  17314. : data)
  17315. : '-';
  17316. formatter = formatter.replace(
  17317. '{c' + i + '}',
  17318. data
  17319. );
  17320. }
  17321. _tDom.innerHTML = formatter;
  17322. }
  17323. else {
  17324. _curTicket = NaN;
  17325. formatter = _encodeHTML(
  17326. categoryAxis.getNameByIndex(dataIndex)
  17327. );
  17328. for (var i = 0, l = seriesArray.length; i < l; i++) {
  17329. formatter += '<br/>'
  17330. + _encodeHTML(seriesArray[i].name || '')
  17331. + ' : ';
  17332. data = seriesArray[i].data[dataIndex];
  17333. data = typeof data != 'undefined'
  17334. ? (typeof data.value != 'undefined'
  17335. ? data.value
  17336. : data)
  17337. : '-';
  17338. formatter += data;
  17339. }
  17340. _tDom.innerHTML = formatter;
  17341. }
  17342. if (showContent === false || !option.tooltip.showContent) {
  17343. // 只用tooltip的行为,不显示主体
  17344. return;
  17345. }
  17346. if (!self.hasAppend) {
  17347. _tDom.style.left = _zrWidth / 2 + 'px';
  17348. _tDom.style.top = _zrHeight / 2 + 'px';
  17349. dom.firstChild.appendChild(_tDom);
  17350. self.hasAppend = true;
  17351. }
  17352. _show(x, y, specialCssText);
  17353. }
  17354. }
  17355. /**
  17356. * 极坐标
  17357. */
  17358. function _showPolarTrigger(polarIndex, dataIndex) {
  17359. if (typeof polar == 'undefined'
  17360. || typeof polarIndex == 'undefined'
  17361. || typeof dataIndex == 'undefined'
  17362. || dataIndex < 0
  17363. ) {
  17364. return false;
  17365. }
  17366. var series = option.series;
  17367. var seriesArray = [];
  17368. var formatter;
  17369. var showContent;
  17370. var specialCssText = '';
  17371. if (option.tooltip.trigger == 'axis') {
  17372. if (option.tooltip.show === false) {
  17373. return false;
  17374. }
  17375. formatter = option.tooltip.formatter;
  17376. }
  17377. // 找到所有用这个极坐标并且axis触发的系列数据
  17378. for (var i = 0, l = series.length; i < l; i++) {
  17379. if (series[i].polarIndex == polarIndex
  17380. && self.deepQuery(
  17381. [series[i], option], 'tooltip.trigger'
  17382. ) == 'axis'
  17383. ) {
  17384. showContent = self.deepQuery(
  17385. [series[i]],
  17386. 'tooltip.showContent'
  17387. ) || showContent;
  17388. formatter = self.deepQuery(
  17389. [series[i]],
  17390. 'tooltip.formatter'
  17391. ) || formatter;
  17392. specialCssText += _style(self.deepQuery(
  17393. [series[i]], 'tooltip'
  17394. ));
  17395. seriesArray.push(series[i]);
  17396. }
  17397. }
  17398. if (seriesArray.length > 0) {
  17399. var polarData;
  17400. var data;
  17401. var params = [];
  17402. var indicatorName =
  17403. option.polar[polarIndex].indicator[dataIndex].text;
  17404. for (var i = 0, l = seriesArray.length; i < l; i++) {
  17405. polarData = seriesArray[i].data;
  17406. for (var j = 0, k = polarData.length; j < k; j++) {
  17407. data = polarData[j];
  17408. data = typeof data != 'undefined'
  17409. ? data
  17410. : {name:'', value: {dataIndex:'-'}};
  17411. params.push([
  17412. seriesArray[i].name || '',
  17413. data.name,
  17414. data.value[dataIndex],
  17415. indicatorName
  17416. ]);
  17417. }
  17418. }
  17419. if (params.length <= 0) {
  17420. return;
  17421. }
  17422. if (typeof formatter == 'function') {
  17423. _curTicket = 'axis:' + dataIndex;
  17424. _tDom.innerHTML = formatter(
  17425. params, _curTicket, _setContent
  17426. );
  17427. }
  17428. else if (typeof formatter == 'string') {
  17429. formatter = formatter.replace('{a}','{a0}')
  17430. .replace('{b}','{b0}')
  17431. .replace('{c}','{c0}')
  17432. .replace('{d}','{d0}');
  17433. for (var i = 0, l = params.length; i < l; i++) {
  17434. formatter = formatter.replace(
  17435. '{a' + i + '}',
  17436. _encodeHTML(params[i][0])
  17437. );
  17438. formatter = formatter.replace(
  17439. '{b' + i + '}',
  17440. _encodeHTML(params[i][1])
  17441. );
  17442. formatter = formatter.replace(
  17443. '{c' + i + '}',
  17444. params[i][2]
  17445. );
  17446. formatter = formatter.replace(
  17447. '{d' + i + '}',
  17448. _encodeHTML(params[i][3])
  17449. );
  17450. }
  17451. _tDom.innerHTML = formatter;
  17452. }
  17453. else {
  17454. formatter = _encodeHTML(params[0][1]) + '<br/>'
  17455. + _encodeHTML(params[0][3]) + ' : '
  17456. + params[0][2];
  17457. for (var i = 1, l = params.length; i < l; i++) {
  17458. formatter += '<br/>' + _encodeHTML(params[i][1])
  17459. + '<br/>';
  17460. formatter += _encodeHTML(params[i][3]) + ' : '
  17461. + params[i][2];
  17462. }
  17463. _tDom.innerHTML = formatter;
  17464. }
  17465. if (showContent === false || !option.tooltip.showContent) {
  17466. // 只用tooltip的行为,不显示主体
  17467. return;
  17468. }
  17469. if (!self.hasAppend) {
  17470. _tDom.style.left = _zrWidth / 2 + 'px';
  17471. _tDom.style.top = _zrHeight / 2 + 'px';
  17472. dom.firstChild.appendChild(_tDom);
  17473. self.hasAppend = true;
  17474. }
  17475. _show(
  17476. zrEvent.getX(_event),
  17477. zrEvent.getY(_event),
  17478. specialCssText
  17479. );
  17480. return true;
  17481. }
  17482. }
  17483. function _showItemTrigger() {
  17484. var serie = ecData.get(_curTarget, 'series');
  17485. var data = ecData.get(_curTarget, 'data');
  17486. var name = ecData.get(_curTarget, 'name');
  17487. var value = ecData.get(_curTarget, 'value');
  17488. var special = ecData.get(_curTarget, 'special');
  17489. var special2 = ecData.get(_curTarget, 'special2');
  17490. // 从低优先级往上找到trigger为item的formatter和样式
  17491. var formatter;
  17492. var showContent;
  17493. var specialCssText = '';
  17494. var indicator;
  17495. var html = '';
  17496. if (_curTarget._type != 'island') {
  17497. // 全局
  17498. if (option.tooltip.trigger == 'item') {
  17499. formatter = option.tooltip.formatter;
  17500. }
  17501. // 系列
  17502. if (self.deepQuery([serie], 'tooltip.trigger') == 'item') {
  17503. showContent = self.deepQuery(
  17504. [serie], 'tooltip.showContent'
  17505. ) || showContent;
  17506. formatter = self.deepQuery(
  17507. [serie], 'tooltip.formatter'
  17508. ) || formatter;
  17509. specialCssText += _style(self.deepQuery(
  17510. [serie], 'tooltip'
  17511. ));
  17512. }
  17513. // 数据项
  17514. showContent = self.deepQuery(
  17515. [data], 'tooltip.showContent'
  17516. ) || showContent;
  17517. formatter = self.deepQuery(
  17518. [data], 'tooltip.formatter'
  17519. ) || formatter;
  17520. specialCssText += _style(self.deepQuery([data], 'tooltip'));
  17521. }
  17522. else {
  17523. showContent = self.deepQuery(
  17524. [data, serie, option],
  17525. 'tooltip.showContent'
  17526. );
  17527. formatter = self.deepQuery(
  17528. [data, serie, option],
  17529. 'tooltip.islandFormatter'
  17530. );
  17531. }
  17532. if (typeof formatter == 'function') {
  17533. _curTicket = (serie.name || '')
  17534. + ':'
  17535. + ecData.get(_curTarget, 'dataIndex');
  17536. _tDom.innerHTML = formatter(
  17537. [
  17538. serie.name || '',
  17539. name,
  17540. value,
  17541. special,
  17542. special2
  17543. ],
  17544. _curTicket,
  17545. _setContent
  17546. );
  17547. }
  17548. else if (typeof formatter == 'string') {
  17549. _curTicket = NaN;
  17550. formatter = formatter.replace('{a}','{a0}')
  17551. .replace('{b}','{b0}')
  17552. .replace('{c}','{c0}');
  17553. formatter = formatter.replace(
  17554. '{a0}', _encodeHTML(serie.name || '')
  17555. )
  17556. .replace('{b0}', _encodeHTML(name))
  17557. .replace('{c0}', value);
  17558. formatter = formatter.replace('{d}','{d0}')
  17559. .replace('{d0}', special || '');
  17560. formatter = formatter.replace('{e}','{e0}')
  17561. .replace('{e0}', ecData.get(_curTarget, 'special2') || '');
  17562. _tDom.innerHTML = formatter;
  17563. }
  17564. else {
  17565. _curTicket = NaN;
  17566. if (serie.type == ecConfig.CHART_TYPE_SCATTER) {
  17567. _tDom.innerHTML = (typeof serie.name != 'undefined'
  17568. ? (_encodeHTML(serie.name) + '<br/>')
  17569. : ''
  17570. )
  17571. + (name === ''
  17572. ? '' : (_encodeHTML(name) + ' : ')
  17573. )
  17574. + value
  17575. + (typeof special == 'undefined'
  17576. ? ''
  17577. : (' (' + special + ')'));
  17578. }
  17579. else if (serie.type == ecConfig.CHART_TYPE_RADAR) {
  17580. indicator = special;
  17581. html += _encodeHTML(
  17582. name === '' ? (serie.name || '') : name
  17583. );
  17584. html += html === '' ? '' : '<br />';
  17585. for (var i = 0 ; i < indicator.length; i ++) {
  17586. html += _encodeHTML(indicator[i].text) + ' : '
  17587. + value[i] + '<br />';
  17588. }
  17589. _tDom.innerHTML = html;
  17590. }
  17591. else if (serie.type == ecConfig.CHART_TYPE_CHORD) {
  17592. if (typeof special2 == 'undefined') {
  17593. // 外环上
  17594. _tDom.innerHTML = _encodeHTML(name)+' (' + value + ')';
  17595. }
  17596. else {
  17597. var name1 = _encodeHTML(name);
  17598. var name2 = _encodeHTML(special);
  17599. // 内部弦上
  17600. _tDom.innerHTML = (typeof serie.name != 'undefined'
  17601. ? (_encodeHTML(serie.name) + '<br/>')
  17602. : '')
  17603. + name1 + ' -> ' + name2 + ' (' + value + ')'
  17604. + '<br />'
  17605. + name2 + ' -> ' + name1+ ' (' + special2 + ')';
  17606. }
  17607. }
  17608. else {
  17609. _tDom.innerHTML = (typeof serie.name != 'undefined'
  17610. ? (_encodeHTML(serie.name) + '<br/>')
  17611. : '')
  17612. + _encodeHTML(name) + ' : ' + value +
  17613. (typeof special == 'undefined'
  17614. ? ''
  17615. : (' (' + special + ')'));
  17616. }
  17617. }
  17618. if (!_axisLineShape.invisible) {
  17619. _axisLineShape.invisible = true;
  17620. zr.modShape(_axisLineShape.id, _axisLineShape);
  17621. zr.refresh();
  17622. }
  17623. if (showContent === false || !option.tooltip.showContent) {
  17624. // 只用tooltip的行为,不显示主体
  17625. return;
  17626. }
  17627. if (!self.hasAppend) {
  17628. _tDom.style.left = _zrWidth / 2 + 'px';
  17629. _tDom.style.top = _zrHeight / 2 + 'px';
  17630. dom.firstChild.appendChild(_tDom);
  17631. self.hasAppend = true;
  17632. }
  17633. _show(
  17634. zrEvent.getX(_event) + 20,
  17635. zrEvent.getY(_event) - 20,
  17636. specialCssText
  17637. );
  17638. }
  17639. /**
  17640. * 设置坐标轴指示器样式
  17641. */
  17642. function _styleAxisPointer(
  17643. seriesArray, xStart, yStart, xEnd, yEnd, gap
  17644. ) {
  17645. if (seriesArray.length > 0) {
  17646. var queryTarget;
  17647. var curType;
  17648. var axisPointer = option.tooltip.axisPointer;
  17649. var pointType = axisPointer.type;
  17650. var lineColor = axisPointer.lineStyle.color;
  17651. var lineWidth = axisPointer.lineStyle.width;
  17652. var lineType = axisPointer.lineStyle.type;
  17653. var areaSize = axisPointer.areaStyle.size;
  17654. var areaColor = axisPointer.areaStyle.color;
  17655. for (var i = 0, l = seriesArray.length; i < l; i++) {
  17656. if (self.deepQuery(
  17657. [seriesArray[i], option], 'tooltip.trigger'
  17658. ) == 'axis'
  17659. ) {
  17660. queryTarget = [seriesArray[i]];
  17661. curType = self.deepQuery(
  17662. queryTarget,
  17663. 'tooltip.axisPointer.type'
  17664. );
  17665. pointType = curType || pointType;
  17666. if (curType == 'line') {
  17667. lineColor = self.deepQuery(
  17668. queryTarget,
  17669. 'tooltip.axisPointer.lineStyle.color'
  17670. ) || lineColor;
  17671. lineWidth = self.deepQuery(
  17672. queryTarget,
  17673. 'tooltip.axisPointer.lineStyle.width'
  17674. ) || lineWidth;
  17675. lineType = self.deepQuery(
  17676. queryTarget,
  17677. 'tooltip.axisPointer.lineStyle.type'
  17678. ) || lineType;
  17679. }
  17680. else if (curType == 'shadow') {
  17681. areaSize = self.deepQuery(
  17682. queryTarget,
  17683. 'tooltip.axisPointer.areaStyle.size'
  17684. ) || areaSize;
  17685. areaColor = self.deepQuery(
  17686. queryTarget,
  17687. 'tooltip.axisPointer.areaStyle.color'
  17688. ) || areaColor;
  17689. }
  17690. }
  17691. }
  17692. if (pointType == 'line') {
  17693. _axisLineShape.style = {
  17694. xStart : xStart,
  17695. yStart : yStart,
  17696. xEnd : xEnd,
  17697. yEnd : yEnd,
  17698. strokeColor : lineColor,
  17699. lineWidth : lineWidth,
  17700. lineType : lineType
  17701. };
  17702. _axisLineShape.invisible = false;
  17703. zr.modShape(_axisLineShape.id, _axisLineShape);
  17704. }
  17705. else if (pointType == 'shadow') {
  17706. if (typeof areaSize == 'undefined'
  17707. || areaSize == 'auto'
  17708. || isNaN(areaSize)
  17709. ) {
  17710. lineWidth = gap;
  17711. }
  17712. else {
  17713. lineWidth = areaSize;
  17714. }
  17715. if (xStart == xEnd) {
  17716. // 纵向
  17717. if (Math.abs(grid.getX() - xStart) < 2) {
  17718. // 最左边
  17719. lineWidth /= 2;
  17720. xStart = xEnd = xEnd + lineWidth / 2;
  17721. }
  17722. else if (Math.abs(grid.getXend() - xStart) < 2) {
  17723. // 最右边
  17724. lineWidth /= 2;
  17725. xStart = xEnd = xEnd - lineWidth / 2;
  17726. }
  17727. }
  17728. else if (yStart == yEnd) {
  17729. // 横向
  17730. if (Math.abs(grid.getY() - yStart) < 2) {
  17731. // 最上边
  17732. lineWidth /= 2;
  17733. yStart = yEnd = yEnd + lineWidth / 2;
  17734. }
  17735. else if (Math.abs(grid.getYend() - yStart) < 2) {
  17736. // 最右边
  17737. lineWidth /= 2;
  17738. yStart = yEnd = yEnd - lineWidth / 2;
  17739. }
  17740. }
  17741. _axisShadowShape.style = {
  17742. xStart : xStart,
  17743. yStart : yStart,
  17744. xEnd : xEnd,
  17745. yEnd : yEnd,
  17746. strokeColor : areaColor,
  17747. lineWidth : lineWidth
  17748. };
  17749. _axisShadowShape.invisible = false;
  17750. zr.modShape(_axisShadowShape.id, _axisShadowShape);
  17751. }
  17752. zr.refresh();
  17753. }
  17754. }
  17755. /**
  17756. * zrender事件响应:鼠标移动
  17757. */
  17758. function _onmousemove(param) {
  17759. clearTimeout(_hidingTicket);
  17760. clearTimeout(_showingTicket);
  17761. var target = param.target;
  17762. var mx = zrEvent.getX(param.event);
  17763. var my = zrEvent.getY(param.event);
  17764. if (!target) {
  17765. // 判断是否落到直角系里,axis触发的tooltip
  17766. _curTarget = false;
  17767. _event = param.event;
  17768. _event._target = _event.target || _event.toElement;
  17769. _event.zrenderX = mx;
  17770. _event.zrenderY = my;
  17771. if (_needAxisTrigger
  17772. && grid
  17773. && zrArea.isInside(
  17774. rectangle,
  17775. grid.getArea(),
  17776. mx,
  17777. my
  17778. )
  17779. ) {
  17780. _showingTicket = setTimeout(_tryShow, _showDelay);
  17781. }
  17782. else if (_needAxisTrigger
  17783. && polar
  17784. && polar.isInside([mx, my]) != -1
  17785. ) {
  17786. _showingTicket = setTimeout(_tryShow, _showDelay);
  17787. }
  17788. else {
  17789. _hidingTicket = setTimeout(_hide, _hideDelay);
  17790. }
  17791. }
  17792. else {
  17793. _curTarget = target;
  17794. _event = param.event;
  17795. _event._target = _event.target || _event.toElement;
  17796. _event.zrenderX = mx;
  17797. _event.zrenderY = my;
  17798. var polarIndex;
  17799. if (_needAxisTrigger
  17800. && polar
  17801. && (polarIndex = polar.isInside([mx, my])) != -1
  17802. ) {
  17803. // 看用这个polar的系列数据是否是axis触发,如果是设置_curTarget为nul
  17804. var series = option.series;
  17805. for (var i = 0, l = series.length; i < l; i++) {
  17806. if (series[i].polarIndex == polarIndex
  17807. && self.deepQuery(
  17808. [series[i], option], 'tooltip.trigger'
  17809. ) == 'axis'
  17810. ) {
  17811. _curTarget = null;
  17812. break;
  17813. }
  17814. }
  17815. }
  17816. _showingTicket = setTimeout(_tryShow, _showDelay);
  17817. }
  17818. }
  17819. /**
  17820. * zrender事件响应:鼠标离开绘图区域
  17821. */
  17822. function _onglobalout() {
  17823. clearTimeout(_hidingTicket);
  17824. clearTimeout(_showingTicket);
  17825. _hidingTicket = setTimeout(_hide, _hideDelay);
  17826. }
  17827. /**
  17828. * 异步回调填充内容
  17829. */
  17830. function _setContent(ticket, content) {
  17831. if (ticket == _curTicket) {
  17832. _tDom.innerHTML = content;
  17833. }
  17834. var cssText = '';
  17835. var domHeight = _tDom.offsetHeight;
  17836. var domWidth = _tDom.offsetWidth;
  17837. if (_tDom.offsetLeft + domWidth > _zrWidth) {
  17838. cssText += 'left:' + (_zrWidth - domWidth) + 'px;';
  17839. }
  17840. if (_tDom.offsetTop + domHeight > _zrHeight) {
  17841. cssText += 'top:' + (_zrHeight - domHeight) + 'px;';
  17842. }
  17843. if (cssText !== '') {
  17844. _tDom.style.cssText += cssText;
  17845. }
  17846. if (_zrWidth - _tDom.offsetLeft < 100
  17847. || _zrHeight - _tDom.offsetTop < 100
  17848. ) {
  17849. // 太靠边的做一次refixed
  17850. setTimeout(_refixed, 20);
  17851. }
  17852. }
  17853. function setComponent(newComponent) {
  17854. component = newComponent;
  17855. grid = component.grid;
  17856. xAxis = component.xAxis;
  17857. yAxis = component.yAxis;
  17858. polar = component.polar;
  17859. }
  17860. function ontooltipHover(param, tipShape) {
  17861. if (!_lastTipShape // 不存在或者存在但dataIndex发生变化才需要重绘
  17862. || (_lastTipShape && _lastTipShape.dataIndex != param.dataIndex)
  17863. ) {
  17864. if (_lastTipShape && _lastTipShape.tipShape.length > 0) {
  17865. zr.delShape(_lastTipShape.tipShape);
  17866. }
  17867. for (var i = 0, l = tipShape.length; i < l; i++) {
  17868. tipShape[i].id = zr.newShapeId('tooltip');
  17869. tipShape[i].zlevel = _zlevelBase;
  17870. tipShape[i].style = zrShapeBase.getHighlightStyle(
  17871. tipShape[i].style,
  17872. tipShape[i].highlightStyle
  17873. );
  17874. tipShape[i].draggable = false;
  17875. tipShape[i].hoverable = false;
  17876. tipShape[i].clickable = false;
  17877. tipShape[i].ondragend = null;
  17878. tipShape[i].ondragover = null;
  17879. tipShape[i].ondrop = null;
  17880. zr.addShape(tipShape[i]);
  17881. }
  17882. _lastTipShape = {
  17883. dataIndex : param.dataIndex,
  17884. tipShape : tipShape
  17885. };
  17886. }
  17887. }
  17888. function ondragend() {
  17889. _hide();
  17890. }
  17891. function init(newOption, newDom) {
  17892. option = newOption;
  17893. dom = newDom;
  17894. option.tooltip = self.reformOption(option.tooltip);
  17895. option.tooltip.textStyle = zrUtil.merge(
  17896. option.tooltip.textStyle,
  17897. ecConfig.textStyle,
  17898. {
  17899. 'overwrite': false,
  17900. 'recursive': true
  17901. }
  17902. );
  17903. // 补全padding属性
  17904. option.tooltip.padding = self.reformCssArray(
  17905. option.tooltip.padding
  17906. );
  17907. _needAxisTrigger = false;
  17908. if (option.tooltip.trigger == 'axis') {
  17909. _needAxisTrigger = true;
  17910. }
  17911. var series = option.series;
  17912. for (var i = 0, l = series.length; i < l; i++) {
  17913. if (self.deepQuery([series[i]], 'tooltip.trigger')
  17914. == 'axis'
  17915. ) {
  17916. _needAxisTrigger = true;
  17917. break;
  17918. }
  17919. }
  17920. _showDelay = option.tooltip.showDelay;
  17921. _hideDelay = option.tooltip.hideDelay;
  17922. _defaultCssText = _style(option.tooltip);
  17923. _tDom.style.position = 'absolute'; // 不是多余的,别删!
  17924. self.hasAppend = false;
  17925. }
  17926. /**
  17927. * 刷新
  17928. */
  17929. function refresh(newOption) {
  17930. if (newOption) {
  17931. option = newOption;
  17932. option.tooltip = self.reformOption(option.tooltip);
  17933. option.tooltip.textStyle = zrUtil.merge(
  17934. option.tooltip.textStyle,
  17935. ecConfig.textStyle,
  17936. {
  17937. 'overwrite': false,
  17938. 'recursive': true
  17939. }
  17940. );
  17941. // 补全padding属性
  17942. option.tooltip.padding = self.reformCssArray(
  17943. option.tooltip.padding
  17944. );
  17945. }
  17946. }
  17947. /**
  17948. * zrender事件响应:窗口大小改变
  17949. */
  17950. function resize() {
  17951. _zrHeight = zr.getHeight();
  17952. _zrWidth = zr.getWidth();
  17953. }
  17954. /**
  17955. * 释放后实例不可用,重载基类方法
  17956. */
  17957. function dispose() {
  17958. clearTimeout(_hidingTicket);
  17959. clearTimeout(_showingTicket);
  17960. zr.un(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
  17961. zr.un(zrConfig.EVENT.GLOBALOUT, _onglobalout);
  17962. if (self.hasAppend) {
  17963. dom.firstChild.removeChild(_tDom);
  17964. }
  17965. _tDom = null;
  17966. // self.clear();
  17967. self.shapeList = null;
  17968. self = null;
  17969. }
  17970. /**
  17971. * html转码的方法
  17972. */
  17973. _encodeHTML = function (source) {
  17974. return String(source)
  17975. .replace(/&/g, '&amp;')
  17976. .replace(/</g, '&lt;')
  17977. .replace(/>/g, '&gt;')
  17978. .replace(/"/g, '&quot;')
  17979. .replace(/'/g, '&#39;');
  17980. };
  17981. zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
  17982. zr.on(zrConfig.EVENT.GLOBALOUT, _onglobalout);
  17983. // 重载基类方法
  17984. self.dispose = dispose;
  17985. self.init = init;
  17986. self.refresh = refresh;
  17987. self.resize = resize;
  17988. self.setComponent = setComponent;
  17989. self.ontooltipHover = ontooltipHover;
  17990. self.ondragend = ondragend;
  17991. init(option, dom);
  17992. }
  17993. require('../component').define('tooltip', Tooltip);
  17994. return Tooltip;
  17995. });
  17996. /**
  17997. * echarts组件:工具箱
  17998. *
  17999. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  18000. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  18001. *
  18002. */
  18003. define('echarts/component/toolbox',['require','./base','../config','zrender/config','zrender/tool/event','../component','../component'],function (require) {
  18004. /**
  18005. * 构造函数
  18006. * @param {Object} messageCenter echart消息中心
  18007. * @param {ZRender} zr zrender实例
  18008. * @param {HtmlElement} dom 目标对象
  18009. */
  18010. function Toolbox(messageCenter, zr, dom) {
  18011. var Base = require('./base');
  18012. Base.call(this, zr);
  18013. var ecConfig = require('../config');
  18014. var zrConfig = require('zrender/config');
  18015. var zrEvent = require('zrender/tool/event');
  18016. var option;
  18017. var component;
  18018. var self = this;
  18019. self.type = ecConfig.COMPONENT_TYPE_TOOLBOX;
  18020. var _zlevelBase = self.getZlevelBase();
  18021. var _magicType;
  18022. var _magicMap;
  18023. var _iconList;
  18024. var _iconShapeMap = {};
  18025. var _itemGroupLocation;
  18026. var _enableColor = 'red';
  18027. var _disableColor = '#ccc';
  18028. var _markColor;
  18029. var _markStart;
  18030. var _marking;
  18031. var _markShape;
  18032. var _zoomStart;
  18033. var _zooming;
  18034. var _zoomShape;
  18035. var _zoomQueue;
  18036. var _dataView;
  18037. function _buildShape() {
  18038. _iconList = [];
  18039. var feature = option.toolbox.feature;
  18040. for (var key in feature){
  18041. if (feature[key]) {
  18042. switch (key) {
  18043. case 'mark' :
  18044. _iconList.push('mark');
  18045. _iconList.push('markUndo');
  18046. _iconList.push('markClear');
  18047. break;
  18048. case 'magicType' :
  18049. for (var i = 0, l = feature[key].length; i < l; i++
  18050. ) {
  18051. _iconList.push(feature[key][i] + 'Chart');
  18052. }
  18053. break;
  18054. case 'dataZoom' :
  18055. _iconList.push('dataZoom');
  18056. _iconList.push('dataZoomReset');
  18057. break;
  18058. case 'saveAsImage' :
  18059. if (!G_vmlCanvasManager) {
  18060. _iconList.push('saveAsImage');
  18061. }
  18062. break;
  18063. default :
  18064. _iconList.push(key);
  18065. break;
  18066. }
  18067. }
  18068. }
  18069. if (_iconList.length > 0) {
  18070. _itemGroupLocation = _getItemGroupLocation();
  18071. _buildBackground();
  18072. _buildItem();
  18073. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  18074. self.shapeList[i].id = zr.newShapeId(self.type);
  18075. zr.addShape(self.shapeList[i]);
  18076. }
  18077. if (_iconShapeMap['mark']) {
  18078. _iconDisable(_iconShapeMap['markUndo']);
  18079. _iconDisable(_iconShapeMap['markClear']);
  18080. }
  18081. if (_iconShapeMap['dataZoomReset'] && _zoomQueue.length === 0) {
  18082. _iconDisable(_iconShapeMap['dataZoomReset']);
  18083. }
  18084. }
  18085. }
  18086. /**
  18087. * 构建所有图例元素
  18088. */
  18089. function _buildItem() {
  18090. var toolboxOption = option.toolbox;
  18091. var iconLength = _iconList.length;
  18092. var lastX = _itemGroupLocation.x;
  18093. var lastY = _itemGroupLocation.y;
  18094. var itemSize = toolboxOption.itemSize;
  18095. var itemGap = toolboxOption.itemGap;
  18096. var itemShape;
  18097. var color = toolboxOption.color instanceof Array
  18098. ? toolboxOption.color : [toolboxOption.color];
  18099. /*
  18100. var textPosition;
  18101. if (toolboxOption.orient == 'horizontal') {
  18102. textPosition = toolboxOption.y != 'bottom'
  18103. ? 'bottom' : 'top';
  18104. }
  18105. else {
  18106. textPosition = toolboxOption.x != 'left'
  18107. ? 'left' : 'right';
  18108. }
  18109. */
  18110. _iconShapeMap = {};
  18111. for (var i = 0; i < iconLength; i++) {
  18112. // 图形
  18113. itemShape = {
  18114. shape : 'icon',
  18115. zlevel : _zlevelBase,
  18116. style : {
  18117. x : lastX,
  18118. y : lastY,
  18119. width : itemSize,
  18120. height : itemSize,
  18121. iconType : _iconList[i],
  18122. strokeColor : color[i % color.length],
  18123. shadowColor: '#ccc',
  18124. shadowBlur : 2,
  18125. shadowOffsetX : 2,
  18126. shadowOffsetY : 2,
  18127. brushType: 'stroke'
  18128. },
  18129. highlightStyle : {
  18130. lineWidth : 2,
  18131. shadowBlur: 5,
  18132. strokeColor : color[i % color.length]
  18133. },
  18134. hoverable : true,
  18135. clickable : true
  18136. };
  18137. switch(_iconList[i]) {
  18138. case 'mark':
  18139. itemShape.onclick = _onMark;
  18140. _markColor = itemShape.style.strokeColor;
  18141. break;
  18142. case 'markUndo':
  18143. itemShape.onclick = _onMarkUndo;
  18144. break;
  18145. case 'markClear':
  18146. itemShape.onclick = _onMarkClear;
  18147. break;
  18148. case 'dataZoom':
  18149. itemShape.onclick = _onDataZoom;
  18150. break;
  18151. case 'dataZoomReset':
  18152. itemShape.onclick = _onDataZoomReset;
  18153. break;
  18154. case 'dataView' :
  18155. if (!_dataView) {
  18156. var componentLibrary = require('../component');
  18157. var DataView = componentLibrary.get('dataView');
  18158. _dataView = new DataView(
  18159. messageCenter, zr, option, dom
  18160. );
  18161. }
  18162. itemShape.onclick = _onDataView;
  18163. break;
  18164. case 'restore':
  18165. itemShape.onclick = _onRestore;
  18166. break;
  18167. case 'saveAsImage':
  18168. itemShape.onclick = _onSaveAsImage;
  18169. break;
  18170. default:
  18171. if (_iconList[i].match('Chart')) {
  18172. itemShape._name = _iconList[i].replace('Chart', '');
  18173. if (itemShape._name == _magicType) {
  18174. itemShape.style.strokeColor = _enableColor;
  18175. }
  18176. itemShape.onclick = _onMagicType;
  18177. }
  18178. break;
  18179. }
  18180. self.shapeList.push(itemShape);
  18181. _iconShapeMap[_iconList[i]] = itemShape;
  18182. if (toolboxOption.orient == 'horizontal') {
  18183. lastX += itemSize + itemGap;
  18184. }
  18185. else {
  18186. lastY += itemSize + itemGap;
  18187. }
  18188. }
  18189. }
  18190. function _buildBackground() {
  18191. var toolboxOption = option.toolbox;
  18192. var pTop = toolboxOption.padding[0];
  18193. var pRight = toolboxOption.padding[1];
  18194. var pBottom = toolboxOption.padding[2];
  18195. var pLeft = toolboxOption.padding[3];
  18196. self.shapeList.push({
  18197. shape : 'rectangle',
  18198. zlevel : _zlevelBase,
  18199. hoverable :false,
  18200. style : {
  18201. x : _itemGroupLocation.x - pLeft,
  18202. y : _itemGroupLocation.y - pTop,
  18203. width : _itemGroupLocation.width + pLeft + pRight,
  18204. height : _itemGroupLocation.height + pTop + pBottom,
  18205. brushType : toolboxOption.borderWidth === 0
  18206. ? 'fill' : 'both',
  18207. color : toolboxOption.backgroundColor,
  18208. strokeColor : toolboxOption.borderColor,
  18209. lineWidth : toolboxOption.borderWidth
  18210. }
  18211. });
  18212. }
  18213. /**
  18214. * 根据选项计算图例实体的位置坐标
  18215. */
  18216. function _getItemGroupLocation() {
  18217. var toolboxOption = option.toolbox;
  18218. var iconLength = _iconList.length;
  18219. var itemGap = toolboxOption.itemGap;
  18220. var itemSize = toolboxOption.itemSize;
  18221. var totalWidth = 0;
  18222. var totalHeight = 0;
  18223. if (toolboxOption.orient == 'horizontal') {
  18224. // 水平布局,计算总宽度,别忘减去最后一个的itemGap
  18225. totalWidth = (itemSize + itemGap) * iconLength - itemGap;
  18226. totalHeight = itemSize;
  18227. }
  18228. else {
  18229. // 垂直布局,计算总高度
  18230. totalHeight = (itemSize + itemGap) * iconLength - itemGap;
  18231. totalWidth = itemSize;
  18232. }
  18233. var x;
  18234. var zrWidth = zr.getWidth();
  18235. switch (toolboxOption.x) {
  18236. case 'center' :
  18237. x = Math.floor((zrWidth - totalWidth) / 2);
  18238. break;
  18239. case 'left' :
  18240. x = toolboxOption.padding[3] + toolboxOption.borderWidth;
  18241. break;
  18242. case 'right' :
  18243. x = zrWidth
  18244. - totalWidth
  18245. - toolboxOption.padding[1]
  18246. - toolboxOption.borderWidth;
  18247. break;
  18248. default :
  18249. x = toolboxOption.x - 0;
  18250. x = isNaN(x) ? 0 : x;
  18251. break;
  18252. }
  18253. var y;
  18254. var zrHeight = zr.getHeight();
  18255. switch (toolboxOption.y) {
  18256. case 'top' :
  18257. y = toolboxOption.padding[0] + toolboxOption.borderWidth;
  18258. break;
  18259. case 'bottom' :
  18260. y = zrHeight
  18261. - totalHeight
  18262. - toolboxOption.padding[2]
  18263. - toolboxOption.borderWidth;
  18264. break;
  18265. case 'center' :
  18266. y = Math.floor((zrHeight - totalHeight) / 2);
  18267. break;
  18268. default :
  18269. y = toolboxOption.y - 0;
  18270. y = isNaN(y) ? 0 : y;
  18271. break;
  18272. }
  18273. return {
  18274. x : x,
  18275. y : y,
  18276. width : totalWidth,
  18277. height : totalHeight
  18278. };
  18279. }
  18280. function _onMark(param) {
  18281. var target = param.target;
  18282. if (_marking || _markStart) {
  18283. // 取消
  18284. _resetMark();
  18285. zr.refresh();
  18286. }
  18287. else {
  18288. // 启用Mark
  18289. _resetZoom(); // mark与dataZoom互斥
  18290. zr.modShape(target.id, {style: {strokeColor: _enableColor}});
  18291. zr.refresh();
  18292. _markStart = true;
  18293. setTimeout(function(){
  18294. zr
  18295. && zr.on(zrConfig.EVENT.CLICK, _onclick)
  18296. && zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
  18297. }, 10);
  18298. }
  18299. return true; // 阻塞全局事件
  18300. }
  18301. function _onDataZoom(param) {
  18302. var target = param.target;
  18303. if (_zooming || _zoomStart) {
  18304. // 取消
  18305. _resetZoom();
  18306. zr.refresh();
  18307. dom.style.cursor = 'default';
  18308. }
  18309. else {
  18310. // 启用Zoom
  18311. _resetMark(); // mark与dataZoom互斥
  18312. zr.modShape(target.id, {style: {strokeColor: _enableColor}});
  18313. zr.refresh();
  18314. _zoomStart = true;
  18315. setTimeout(function(){
  18316. zr
  18317. && zr.on(zrConfig.EVENT.MOUSEDOWN, _onmousedown)
  18318. && zr.on(zrConfig.EVENT.MOUSEUP, _onmouseup)
  18319. && zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
  18320. }, 10);
  18321. dom.style.cursor = 'crosshair';
  18322. }
  18323. return true; // 阻塞全局事件
  18324. }
  18325. function _onmousemove(param) {
  18326. if (_marking) {
  18327. _markShape.style.xEnd = zrEvent.getX(param.event);
  18328. _markShape.style.yEnd = zrEvent.getY(param.event);
  18329. zr.addHoverShape(_markShape);
  18330. }
  18331. if (_zooming) {
  18332. _zoomShape.style.width =
  18333. zrEvent.getX(param.event) - _zoomShape.style.x;
  18334. _zoomShape.style.height =
  18335. zrEvent.getY(param.event) - _zoomShape.style.y;
  18336. zr.addHoverShape(_zoomShape);
  18337. dom.style.cursor = 'crosshair';
  18338. }
  18339. if (_zoomStart
  18340. && (dom.style.cursor != 'pointer' && dom.style.cursor != 'move')
  18341. ) {
  18342. dom.style.cursor = 'crosshair';
  18343. }
  18344. }
  18345. function _onmousedown(param) {
  18346. if (param.target) {
  18347. return;
  18348. }
  18349. _zooming = true;
  18350. var x = zrEvent.getX(param.event);
  18351. var y = zrEvent.getY(param.event);
  18352. var zoomOption = option.dataZoom || {};
  18353. _zoomShape = {
  18354. shape : 'rectangle',
  18355. id : zr.newShapeId('zoom'),
  18356. zlevel : _zlevelBase,
  18357. style : {
  18358. x : x,
  18359. y : y,
  18360. width : 1,
  18361. height : 1,
  18362. brushType: 'both'
  18363. },
  18364. highlightStyle : {
  18365. lineWidth : 2,
  18366. color: zoomOption.fillerColor
  18367. || ecConfig.dataZoom.fillerColor,
  18368. strokeColor : zoomOption.handleColor
  18369. || ecConfig.dataZoom.handleColor,
  18370. brushType: 'both'
  18371. }
  18372. };
  18373. zr.addHoverShape(_zoomShape);
  18374. return true; // 阻塞全局事件
  18375. }
  18376. function _onmouseup(/*param*/) {
  18377. if (!_zoomShape
  18378. || Math.abs(_zoomShape.style.width) < 10
  18379. || Math.abs(_zoomShape.style.height) < 10
  18380. ) {
  18381. _zooming = false;
  18382. return true;
  18383. }
  18384. if (_zooming && component.dataZoom) {
  18385. _zooming = false;
  18386. var zoom = component.dataZoom.rectZoom(_zoomShape.style);
  18387. if (zoom) {
  18388. _zoomQueue.push({
  18389. start : zoom.start,
  18390. end : zoom.end,
  18391. start2 : zoom.start2,
  18392. end2 : zoom.end2
  18393. });
  18394. _iconEnable(_iconShapeMap['dataZoomReset']);
  18395. zr.refresh();
  18396. }
  18397. }
  18398. return true; // 阻塞全局事件
  18399. }
  18400. function _onclick(param) {
  18401. if (_marking) {
  18402. _marking = false;
  18403. self.shapeList.push(_markShape);
  18404. _iconEnable(_iconShapeMap['markUndo']);
  18405. _iconEnable(_iconShapeMap['markClear']);
  18406. zr.addShape(_markShape);
  18407. zr.refresh();
  18408. } else if (_markStart) {
  18409. _marking = true;
  18410. var x = zrEvent.getX(param.event);
  18411. var y = zrEvent.getY(param.event);
  18412. _markShape = {
  18413. shape : 'line',
  18414. id : zr.newShapeId('mark'),
  18415. zlevel : _zlevelBase,
  18416. style : {
  18417. xStart : x,
  18418. yStart : y,
  18419. xEnd : x,
  18420. yEnd : y,
  18421. lineWidth : self.deepQuery(
  18422. [option],
  18423. 'toolbox.feature.mark.lineStyle.width'
  18424. ) || 2,
  18425. strokeColor : self.deepQuery(
  18426. [option],
  18427. 'toolbox.feature.mark.lineStyle.color'
  18428. ) || _markColor,
  18429. lineType : self.deepQuery(
  18430. [option],
  18431. 'toolbox.feature.mark.lineStyle.type'
  18432. ) || 'dashed'
  18433. }
  18434. };
  18435. zr.addHoverShape(_markShape);
  18436. }
  18437. }
  18438. function _onMarkUndo() {
  18439. if (_marking) {
  18440. _marking = false;
  18441. } else {
  18442. var len = self.shapeList.length - 1; // 有一个是背景shape
  18443. if (_iconList.length == len - 1) {
  18444. _iconDisable(_iconShapeMap['markUndo']);
  18445. _iconDisable(_iconShapeMap['markClear']);
  18446. }
  18447. if (_iconList.length < len) {
  18448. var target = self.shapeList[self.shapeList.length - 1];
  18449. zr.delShape(target.id);
  18450. zr.refresh();
  18451. self.shapeList.pop();
  18452. }
  18453. }
  18454. return true;
  18455. }
  18456. function _onMarkClear() {
  18457. if (_marking) {
  18458. _marking = false;
  18459. }
  18460. // 有一个是背景shape
  18461. var len = self.shapeList.length - _iconList.length - 1;
  18462. var hasClear = false;
  18463. while(len--) {
  18464. zr.delShape(self.shapeList.pop().id);
  18465. hasClear = true;
  18466. }
  18467. if (hasClear) {
  18468. _iconDisable(_iconShapeMap['markUndo']);
  18469. _iconDisable(_iconShapeMap['markClear']);
  18470. zr.refresh();
  18471. }
  18472. return true;
  18473. }
  18474. function _onDataZoomReset() {
  18475. if (_zooming) {
  18476. _zooming = false;
  18477. }
  18478. _zoomQueue.pop();
  18479. //console.log(_zoomQueue)
  18480. if (_zoomQueue.length > 0) {
  18481. component.dataZoom.absoluteZoom(
  18482. _zoomQueue[_zoomQueue.length - 1]
  18483. );
  18484. }
  18485. else {
  18486. component.dataZoom.rectZoom();
  18487. _iconDisable(_iconShapeMap['dataZoomReset']);
  18488. zr.refresh();
  18489. }
  18490. return true;
  18491. }
  18492. function _resetMark() {
  18493. _marking = false;
  18494. if (_markStart) {
  18495. _markStart = false;
  18496. if (_iconShapeMap['mark']) {
  18497. // 还原图标为未生效状态
  18498. zr.modShape(
  18499. _iconShapeMap['mark'].id,
  18500. {
  18501. style: {
  18502. strokeColor: _iconShapeMap['mark']
  18503. .highlightStyle
  18504. .strokeColor
  18505. }
  18506. }
  18507. );
  18508. }
  18509. zr.un(zrConfig.EVENT.CLICK, _onclick);
  18510. zr.un(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
  18511. }
  18512. }
  18513. function _resetZoom() {
  18514. _zooming = false;
  18515. if (_zoomStart) {
  18516. _zoomStart = false;
  18517. if (_iconShapeMap['dataZoom']) {
  18518. // 还原图标为未生效状态
  18519. zr.modShape(
  18520. _iconShapeMap['dataZoom'].id,
  18521. {
  18522. style: {
  18523. strokeColor: _iconShapeMap['dataZoom']
  18524. .highlightStyle
  18525. .strokeColor
  18526. }
  18527. }
  18528. );
  18529. }
  18530. zr.un(zrConfig.EVENT.MOUSEDOWN, _onmousedown);
  18531. zr.un(zrConfig.EVENT.MOUSEUP, _onmouseup);
  18532. zr.un(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
  18533. }
  18534. }
  18535. function _iconDisable(target) {
  18536. zr.modShape(target.id, {
  18537. hoverable : false,
  18538. clickable : false,
  18539. style : {
  18540. strokeColor : _disableColor
  18541. }
  18542. });
  18543. }
  18544. function _iconEnable(target) {
  18545. zr.modShape(target.id, {
  18546. hoverable : true,
  18547. clickable : true,
  18548. style : {
  18549. strokeColor : target.highlightStyle.strokeColor
  18550. }
  18551. });
  18552. }
  18553. function _onDataView() {
  18554. _dataView.show(option);
  18555. return true;
  18556. }
  18557. function _onRestore(){
  18558. _resetMark();
  18559. _resetZoom();
  18560. messageCenter.dispatch(ecConfig.EVENT.RESTORE);
  18561. return true;
  18562. }
  18563. function _onSaveAsImage() {
  18564. var saveOption = option.toolbox.feature.saveAsImage;
  18565. var imgType = saveOption.type || 'png';
  18566. if (imgType != 'png' && imgType != 'jpeg') {
  18567. imgType = 'png';
  18568. }
  18569. var image = zr.toDataURL('image/' + imgType);
  18570. var downloadDiv = document.createElement('div');
  18571. downloadDiv.id = '__echarts_download_wrap__';
  18572. downloadDiv.style.cssText = 'position:fixed;'
  18573. + 'z-index:99999;'
  18574. + 'display:block;'
  18575. + 'top:0;left:0;'
  18576. + 'background-color:rgba(33,33,33,0.5);'
  18577. + 'text-align:center;'
  18578. + 'width:100%;'
  18579. + 'height:100%;'
  18580. + 'line-height:'
  18581. + document.documentElement.clientHeight + 'px;';
  18582. downloadDiv.onclick = _close;
  18583. var downloadLink = document.createElement('a');
  18584. //downloadLink.onclick = _saveImageForIE;
  18585. downloadLink.href = image;
  18586. downloadLink.setAttribute(
  18587. 'download',
  18588. (saveOption.name
  18589. ? saveOption.name
  18590. : (option.title && (option.title.text || option.title.subtext))
  18591. ? (option.title.text || option.title.subtext)
  18592. : 'ECharts')
  18593. + '.' + imgType
  18594. );
  18595. downloadLink.innerHTML = '<img src="' + image
  18596. + '" title="'
  18597. + (!!(window.attachEvent
  18598. && navigator.userAgent.indexOf('Opera') === -1)
  18599. ? '右键->图片另存为'
  18600. : (saveOption.lang ? saveOption.lang : '点击保存'))
  18601. + '"/>';
  18602. downloadDiv.appendChild(downloadLink);
  18603. document.body.appendChild(downloadDiv);
  18604. downloadLink = null;
  18605. downloadDiv = null;
  18606. function _close() {
  18607. var d = document.getElementById('__echarts_download_wrap__');
  18608. d.onclick = null;
  18609. d.innerHTML = '';
  18610. document.body.removeChild(d);
  18611. d = null;
  18612. }
  18613. /*
  18614. function _saveImageForIE() {
  18615. window.win = window.open(image);
  18616. win.document.execCommand("SaveAs");
  18617. win.close()
  18618. }
  18619. */
  18620. return;
  18621. }
  18622. function _onMagicType(param) {
  18623. _resetMark();
  18624. var itemName = param.target._name;
  18625. if (itemName == _magicType) {
  18626. // 取消
  18627. _magicType = false;
  18628. }
  18629. else {
  18630. // 启用
  18631. _magicType = itemName;
  18632. }
  18633. messageCenter.dispatch(
  18634. ecConfig.EVENT.MAGIC_TYPE_CHANGED,
  18635. param.event,
  18636. {magicType : _magicType}
  18637. );
  18638. return true;
  18639. }
  18640. function reset(newOption) {
  18641. if (newOption.toolbox
  18642. && newOption.toolbox.show
  18643. && newOption.toolbox.feature.magicType
  18644. && newOption.toolbox.feature.magicType.length > 0
  18645. ) {
  18646. var magicType = newOption.toolbox.feature.magicType;
  18647. var len = magicType.length;
  18648. _magicMap = {}; // 标识可控类型
  18649. while (len--) {
  18650. _magicMap[magicType[len]] = true;
  18651. }
  18652. len = newOption.series.length;
  18653. var oriType; // 备份还原可控类型
  18654. var axis;
  18655. while (len--) {
  18656. oriType = newOption.series[len].type;
  18657. if (_magicMap[oriType]) {
  18658. axis = newOption.xAxis instanceof Array
  18659. ? newOption.xAxis[
  18660. newOption.series[len].xAxisIndex || 0
  18661. ]
  18662. : newOption.xAxis;
  18663. if (axis && axis.type == 'category') {
  18664. axis.__boundaryGap =
  18665. typeof axis.boundaryGap != 'undefined'
  18666. ? axis.boundaryGap : true;
  18667. }
  18668. axis = newOption.yAxis instanceof Array
  18669. ? newOption.yAxis[
  18670. newOption.series[len].yAxisIndex || 0
  18671. ]
  18672. : newOption.yAxis;
  18673. if (axis && axis.type == 'category') {
  18674. axis.__boundaryGap =
  18675. typeof axis.boundaryGap != 'undefined'
  18676. ? axis.boundaryGap : true;
  18677. }
  18678. newOption.series[len].__type = oriType;
  18679. }
  18680. }
  18681. }
  18682. _magicType = false;
  18683. var zoomOption = newOption.dataZoom;
  18684. if (zoomOption && zoomOption.show) {
  18685. var start = typeof zoomOption.start != 'undefined'
  18686. && zoomOption.start >= 0
  18687. && zoomOption.start <= 100
  18688. ? zoomOption.start : 0;
  18689. var end = typeof zoomOption.end != 'undefined'
  18690. && zoomOption.end >= 0
  18691. && zoomOption.end <= 100
  18692. ? zoomOption.end : 100;
  18693. if (start > end) {
  18694. // 大小颠倒自动翻转
  18695. start = start + end;
  18696. end = start - end;
  18697. start = start - end;
  18698. }
  18699. _zoomQueue = [{
  18700. start : start,
  18701. end : end,
  18702. start2 : 0,
  18703. end2 : 100
  18704. }];
  18705. }
  18706. else {
  18707. _zoomQueue = [];
  18708. }
  18709. }
  18710. function getMagicOption(){
  18711. if (_magicType) {
  18712. // 启动
  18713. for (var i = 0, l = option.series.length; i < l; i++) {
  18714. if (_magicMap[option.series[i].type]) {
  18715. option.series[i].type = _magicType;
  18716. }
  18717. }
  18718. var boundaryGap = _magicType == ecConfig.CHART_TYPE_LINE
  18719. ? false : true;
  18720. var len;
  18721. if (option.xAxis instanceof Array) {
  18722. len = option.xAxis.length;
  18723. while (len--) {
  18724. // 横纵默认为类目
  18725. if ((option.xAxis[len].type || 'category')
  18726. == 'category'
  18727. ) {
  18728. option.xAxis[len].boundaryGap = boundaryGap;
  18729. }
  18730. }
  18731. }
  18732. else {
  18733. if (option.xAxis
  18734. && (option.xAxis.type || 'category') == 'category'
  18735. ) {
  18736. option.xAxis.boundaryGap = boundaryGap;
  18737. }
  18738. }
  18739. if (option.yAxis instanceof Array) {
  18740. len = option.yAxis.length;
  18741. while (len--) {
  18742. if ((option.yAxis[len].type) == 'category') {
  18743. option.yAxis[len].boundaryGap = boundaryGap;
  18744. }
  18745. }
  18746. }
  18747. else {
  18748. if (option.yAxis && option.yAxis.type == 'category') {
  18749. option.yAxis.boundaryGap = boundaryGap;
  18750. }
  18751. }
  18752. }
  18753. else {
  18754. // 还原
  18755. var axis;
  18756. for (var i = 0, l = option.series.length; i < l; i++) {
  18757. if (_magicMap[option.series[i].type]) {
  18758. option.series[i].type = option.series[i].__type;
  18759. if (option.xAxis instanceof Array) {
  18760. axis = option.xAxis[
  18761. option.series[i].xAxisIndex || 0
  18762. ];
  18763. if (axis.type == 'category') {
  18764. axis.boundaryGap = axis.__boundaryGap;
  18765. }
  18766. }
  18767. else {
  18768. axis = option.xAxis;
  18769. if (axis && axis.type == 'category') {
  18770. axis.boundaryGap = axis.__boundaryGap;
  18771. }
  18772. }
  18773. if (option.yAxis instanceof Array) {
  18774. axis = option.yAxis[
  18775. option.series[i].yAxisIndex || 0
  18776. ];
  18777. if (axis.type == 'category') {
  18778. axis.boundaryGap = axis.__boundaryGap;
  18779. }
  18780. }
  18781. else {
  18782. axis = option.yAxis;
  18783. if (axis && axis.type == 'category') {
  18784. axis.boundaryGap = axis.__boundaryGap;
  18785. }
  18786. }
  18787. }
  18788. }
  18789. }
  18790. return option;
  18791. }
  18792. function render(newOption, newComponent){
  18793. _resetMark();
  18794. _resetZoom();
  18795. newOption.toolbox = self.reformOption(newOption.toolbox);
  18796. // 补全padding属性
  18797. newOption.toolbox.padding = self.reformCssArray(
  18798. newOption.toolbox.padding
  18799. );
  18800. option = newOption;
  18801. component = newComponent;
  18802. self.shapeList = [];
  18803. if (newOption.toolbox.show) {
  18804. _buildShape();
  18805. }
  18806. hideDataView();
  18807. }
  18808. function resize() {
  18809. _resetMark();
  18810. self.clear();
  18811. if (option.toolbox.show) {
  18812. _buildShape();
  18813. }
  18814. if (_dataView) {
  18815. _dataView.resize();
  18816. }
  18817. }
  18818. function hideDataView() {
  18819. if (_dataView) {
  18820. _dataView.hide();
  18821. }
  18822. }
  18823. /**
  18824. * 释放后实例不可用
  18825. */
  18826. function dispose() {
  18827. if (_dataView) {
  18828. _dataView.dispose();
  18829. }
  18830. self.clear();
  18831. self.shapeList = null;
  18832. self = null;
  18833. }
  18834. /**
  18835. * 刷新
  18836. */
  18837. function refresh(newOption) {
  18838. if (newOption) {
  18839. newOption.toolbox = self.reformOption(newOption.toolbox);
  18840. // 补全padding属性
  18841. newOption.toolbox.padding = self.reformCssArray(
  18842. newOption.toolbox.padding
  18843. );
  18844. option = newOption;
  18845. }
  18846. }
  18847. // 重载基类方法
  18848. self.dispose = dispose;
  18849. self.render = render;
  18850. self.resize = resize;
  18851. self.hideDataView = hideDataView;
  18852. self.getMagicOption = getMagicOption;
  18853. self.reset = reset;
  18854. self.refresh = refresh;
  18855. }
  18856. require('../component').define('toolbox', Toolbox);
  18857. return Toolbox;
  18858. });
  18859. /**
  18860. * echarts组件:提示框
  18861. *
  18862. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  18863. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  18864. *
  18865. */
  18866. define('echarts/component/dataView',['require','./base','../config','../component'],function (require) {
  18867. /**
  18868. * 构造函数
  18869. * @param {Object} messageCenter echart消息中心
  18870. * @param {ZRender} zr zrender实例
  18871. * @param {Object} option 提示框参数
  18872. * @param {HtmlElement} dom 目标对象
  18873. */
  18874. function DataView(messageCenter, zr, option, dom) {
  18875. var Base = require('./base');
  18876. Base.call(this, zr);
  18877. var ecConfig = require('../config');
  18878. var self = this;
  18879. self.type = ecConfig.COMPONENT_TYPE_DATAVIEW;
  18880. var _lang = ['Data View', 'close', 'refresh'];
  18881. // dataview dom & css
  18882. var _tDom = document.createElement('div');
  18883. var _textArea = document.createElement('textArea');
  18884. var _buttonRefresh = document.createElement('button');
  18885. var _buttonClose = document.createElement('button');
  18886. var _hasShow = false;
  18887. // 通用样式
  18888. var _gCssText = 'position:absolute;'
  18889. + 'display:block;'
  18890. + 'overflow:hidden;'
  18891. + 'transition:height 0.8s,background-color 1s;'
  18892. + '-moz-transition:height 0.8s,background-color 1s;'
  18893. + '-webkit-transition:height 0.8s,background-color 1s;'
  18894. + '-o-transition:height 0.8s,background-color 1s;'
  18895. + 'z-index:1;'
  18896. + 'left:0;'
  18897. + 'top:0;';
  18898. var _sizeCssText;
  18899. var _cssName = 'echarts-dataview';
  18900. // 缓存一些高宽数据
  18901. var _zrHeight = zr.getHeight();
  18902. var _zrWidth = zr.getWidth();
  18903. function hide() {
  18904. _sizeCssText = 'width:' + _zrWidth + 'px;'
  18905. + 'height:' + 0 + 'px;'
  18906. + 'background-color:#f0ffff;';
  18907. _tDom.style.cssText = _gCssText + _sizeCssText;
  18908. // 这是个很恶心的事情
  18909. dom.onselectstart = function() {
  18910. return false;
  18911. };
  18912. }
  18913. function show(newOption) {
  18914. _hasShow = true;
  18915. var lang = self.deepQuery([option],'toolbox.feature.dataView.lang')
  18916. || _lang;
  18917. option = newOption;
  18918. _tDom.innerHTML = '<p style="padding:8px 0;margin:0 0 10px 0;'
  18919. + 'border-bottom:1px solid #eee">'
  18920. + (lang[0] || _lang[0])
  18921. + '</p>';
  18922. _textArea.style.cssText =
  18923. 'display:block;margin:0 0 8px 0;padding:4px 6px;overflow:auto;'
  18924. + 'width:' + (_zrWidth - 15) + 'px;'
  18925. + 'height:' + (_zrHeight - 100) + 'px;';
  18926. var customContent = self.deepQuery(
  18927. [option], 'toolbox.feature.dataView.optionToContent'
  18928. );
  18929. if (typeof customContent != 'function') {
  18930. _textArea.value = _optionToContent();
  18931. }
  18932. else {
  18933. _textArea.value = customContent(option);
  18934. }
  18935. _tDom.appendChild(_textArea);
  18936. _buttonClose.style.cssText = 'float:right;padding:1px 6px;';
  18937. _buttonClose.innerHTML = lang[1] || _lang[1];
  18938. _buttonClose.onclick = hide;
  18939. _tDom.appendChild(_buttonClose);
  18940. if (self.deepQuery([option], 'toolbox.feature.dataView.readOnly')
  18941. === false
  18942. ) {
  18943. _buttonRefresh.style.cssText =
  18944. 'float:right;margin-right:10px;padding:1px 6px;';
  18945. _buttonRefresh.innerHTML = lang[2] || _lang[2];
  18946. _buttonRefresh.onclick = _save;
  18947. _tDom.appendChild(_buttonRefresh);
  18948. _textArea.readOnly = false;
  18949. _textArea.style.cursor = 'default';
  18950. }
  18951. else {
  18952. _textArea.readOnly = true;
  18953. _textArea.style.cursor = 'text';
  18954. }
  18955. _sizeCssText = 'width:' + _zrWidth + 'px;'
  18956. + 'height:' + _zrHeight + 'px;'
  18957. + 'background-color:#fff;';
  18958. _tDom.style.cssText = _gCssText + _sizeCssText;
  18959. // 这是个很恶心的事情
  18960. dom.onselectstart = function() {
  18961. return true;
  18962. };
  18963. }
  18964. function _optionToContent() {
  18965. var i;
  18966. var j;
  18967. var k;
  18968. var len;
  18969. var data;
  18970. var valueList;
  18971. var axisList = [];
  18972. var content = '';
  18973. if (option.xAxis) {
  18974. if (option.xAxis instanceof Array) {
  18975. axisList = option.xAxis;
  18976. } else {
  18977. axisList = [option.xAxis];
  18978. }
  18979. for (i = 0, len = axisList.length; i < len; i++) {
  18980. // 横纵默认为类目
  18981. if ((axisList[i].type || 'category') == 'category') {
  18982. valueList = [];
  18983. for (j = 0, k = axisList[i].data.length; j < k; j++) {
  18984. data = axisList[i].data[j];
  18985. valueList.push(
  18986. typeof data.value != 'undefined'
  18987. ? data.value : data
  18988. );
  18989. }
  18990. content += valueList.join(', ') + '\n\n';
  18991. }
  18992. }
  18993. }
  18994. if (option.yAxis) {
  18995. if (option.yAxis instanceof Array) {
  18996. axisList = option.yAxis;
  18997. } else {
  18998. axisList = [option.yAxis];
  18999. }
  19000. for (i = 0, len = axisList.length; i < len; i++) {
  19001. if (axisList[i].type == 'category') {
  19002. valueList = [];
  19003. for (j = 0, k = axisList[i].data.length; j < k; j++) {
  19004. data = axisList[i].data[j];
  19005. valueList.push(
  19006. typeof data.value != 'undefined'
  19007. ? data.value : data
  19008. );
  19009. }
  19010. content += valueList.join(', ') + '\n\n';
  19011. }
  19012. }
  19013. }
  19014. var series = option.series;
  19015. var itemName;
  19016. for (i = 0, len = series.length; i < len; i++) {
  19017. valueList = [];
  19018. for (j = 0, k = series[i].data.length; j < k; j++) {
  19019. data = series[i].data[j];
  19020. if (series[i].type == ecConfig.CHART_TYPE_PIE
  19021. || series[i].type == ecConfig.CHART_TYPE_MAP
  19022. ) {
  19023. itemName = (data.name || '-') + ':';
  19024. }
  19025. else {
  19026. itemName = '';
  19027. }
  19028. if (series[i].type == ecConfig.CHART_TYPE_SCATTER) {
  19029. data = typeof data.value != 'undefined'
  19030. ? data.value
  19031. : data;
  19032. data = data.join(', ');
  19033. }
  19034. valueList.push(
  19035. itemName
  19036. + (typeof data.value != 'undefined' ? data.value : data)
  19037. );
  19038. }
  19039. content += (series[i].name || '-') + ' : \n';
  19040. content += valueList.join(
  19041. series[i].type == ecConfig.CHART_TYPE_SCATTER ? '\n': ', '
  19042. );
  19043. content += '\n\n';
  19044. }
  19045. return content;
  19046. }
  19047. function _save() {
  19048. var text = _textArea.value;
  19049. var customContent = self.deepQuery(
  19050. [option], 'toolbox.feature.dataView.contentToOption'
  19051. );
  19052. if (typeof customContent != 'function') {
  19053. text = text.split('\n');
  19054. var content = [];
  19055. for (var i = 0, l = text.length; i < l; i++) {
  19056. text[i] = _trim(text[i]);
  19057. if (text[i] !== '') {
  19058. content.push(text[i]);
  19059. }
  19060. }
  19061. _contentToOption(content);
  19062. }
  19063. else {
  19064. customContent(text, option);
  19065. }
  19066. hide();
  19067. setTimeout(
  19068. function(){
  19069. messageCenter && messageCenter.dispatch(
  19070. ecConfig.EVENT.DATA_VIEW_CHANGED,
  19071. null,
  19072. {option : option}
  19073. );
  19074. },
  19075. !G_vmlCanvasManager ? 800 : 100
  19076. );
  19077. }
  19078. function _contentToOption(content) {
  19079. var i;
  19080. var j;
  19081. var k;
  19082. var len;
  19083. var data;
  19084. var axisList = [];
  19085. var contentIdx = 0;
  19086. var contentValueList;
  19087. var value;
  19088. if (option.xAxis) {
  19089. if (option.xAxis instanceof Array) {
  19090. axisList = option.xAxis;
  19091. } else {
  19092. axisList = [option.xAxis];
  19093. }
  19094. for (i = 0, len = axisList.length; i < len; i++) {
  19095. // 横纵默认为类目
  19096. if ((axisList[i].type || 'category') == 'category'
  19097. ) {
  19098. contentValueList = content[contentIdx].split(',');
  19099. for (j = 0, k = axisList[i].data.length; j < k; j++) {
  19100. value = _trim(contentValueList[j] || '');
  19101. data = axisList[i].data[j];
  19102. if (typeof axisList[i].data[j].value != 'undefined'
  19103. ) {
  19104. axisList[i].data[j].value = value;
  19105. }
  19106. else {
  19107. axisList[i].data[j] = value;
  19108. }
  19109. }
  19110. contentIdx++;
  19111. }
  19112. }
  19113. }
  19114. if (option.yAxis) {
  19115. if (option.yAxis instanceof Array) {
  19116. axisList = option.yAxis;
  19117. } else {
  19118. axisList = [option.yAxis];
  19119. }
  19120. for (i = 0, len = axisList.length; i < len; i++) {
  19121. if (axisList[i].type == 'category') {
  19122. contentValueList = content[contentIdx].split(',');
  19123. for (j = 0, k = axisList[i].data.length; j < k; j++) {
  19124. value = _trim(contentValueList[j] || '');
  19125. data = axisList[i].data[j];
  19126. if (typeof axisList[i].data[j].value != 'undefined'
  19127. ) {
  19128. axisList[i].data[j].value = value;
  19129. }
  19130. else {
  19131. axisList[i].data[j] = value;
  19132. }
  19133. }
  19134. contentIdx++;
  19135. }
  19136. }
  19137. }
  19138. var series = option.series;
  19139. for (i = 0, len = series.length; i < len; i++) {
  19140. contentIdx++;
  19141. if (series[i].type == ecConfig.CHART_TYPE_SCATTER) {
  19142. for (var j = 0, k = series[i].data.length; j < k; j++) {
  19143. contentValueList = content[contentIdx];
  19144. value = contentValueList.replace(' ','').split(',');
  19145. if (typeof series[i].data[j].value != 'undefined'
  19146. ) {
  19147. series[i].data[j].value = value;
  19148. }
  19149. else {
  19150. series[i].data[j] = value;
  19151. }
  19152. contentIdx++;
  19153. }
  19154. }
  19155. else {
  19156. contentValueList = content[contentIdx].split(',');
  19157. for (var j = 0, k = series[i].data.length; j < k; j++) {
  19158. value = (contentValueList[j] || '').replace(/.*:/,'');
  19159. value = _trim(value);
  19160. value = (value != '-' && value !== '')
  19161. ? (value - 0)
  19162. : '-';
  19163. if (typeof series[i].data[j].value != 'undefined'
  19164. ) {
  19165. series[i].data[j].value = value;
  19166. }
  19167. else {
  19168. series[i].data[j] = value;
  19169. }
  19170. }
  19171. contentIdx++;
  19172. }
  19173. }
  19174. }
  19175. function _trim(str){
  19176. var trimer = new RegExp(
  19177. '(^[\\s\\t\\xa0\\u3000]+)|([\\u3000\\xa0\\s\\t]+\x24)', 'g'
  19178. );
  19179. return str.replace(trimer, '');
  19180. }
  19181. // 阻塞zrender事件
  19182. function _stop(e){
  19183. e = e || window.event;
  19184. if (e.stopPropagation) {
  19185. e.stopPropagation();
  19186. }
  19187. else {
  19188. e.cancelBubble = true;
  19189. }
  19190. }
  19191. function _init() {
  19192. _tDom.className = _cssName;
  19193. hide();
  19194. dom.firstChild.appendChild(_tDom);
  19195. if (window.addEventListener) {
  19196. _tDom.addEventListener('click', _stop);
  19197. _tDom.addEventListener('mousewheel', _stop);
  19198. _tDom.addEventListener('mousemove', _stop);
  19199. _tDom.addEventListener('mousedown', _stop);
  19200. _tDom.addEventListener('mouseup', _stop);
  19201. // mobile支持
  19202. _tDom.addEventListener('touchstart', _stop);
  19203. _tDom.addEventListener('touchmove', _stop);
  19204. _tDom.addEventListener('touchend', _stop);
  19205. }
  19206. else {
  19207. _tDom.attachEvent('onclick', _stop);
  19208. _tDom.attachEvent('onmousewheel', _stop);
  19209. _tDom.attachEvent('onmousemove', _stop);
  19210. _tDom.attachEvent('onmousedown', _stop);
  19211. _tDom.attachEvent('onmouseup', _stop);
  19212. }
  19213. }
  19214. /**
  19215. * zrender事件响应:窗口大小改变
  19216. */
  19217. function resize() {
  19218. _zrHeight = zr.getHeight();
  19219. _zrWidth = zr.getWidth();
  19220. if (_tDom.offsetHeight > 10) {
  19221. _sizeCssText = 'width:' + _zrWidth + 'px;'
  19222. + 'height:' + _zrHeight + 'px;'
  19223. + 'background-color:#fff;';
  19224. _tDom.style.cssText = _gCssText + _sizeCssText;
  19225. _textArea.style.cssText = 'display:block;margin:0 0 8px 0;'
  19226. + 'padding:4px 6px;overflow:auto;'
  19227. + 'width:' + (_zrWidth - 15) + 'px;'
  19228. + 'height:' + (_zrHeight - 100) + 'px;';
  19229. }
  19230. }
  19231. /**
  19232. * 释放后实例不可用,重载基类方法
  19233. */
  19234. function dispose() {
  19235. if (window.removeEventListener) {
  19236. _tDom.removeEventListener('click', _stop);
  19237. _tDom.removeEventListener('mousewheel', _stop);
  19238. _tDom.removeEventListener('mousemove', _stop);
  19239. _tDom.removeEventListener('mousedown', _stop);
  19240. _tDom.removeEventListener('mouseup', _stop);
  19241. // mobile支持
  19242. _tDom.removeEventListener('touchstart', _stop);
  19243. _tDom.removeEventListener('touchmove', _stop);
  19244. _tDom.removeEventListener('touchend', _stop);
  19245. }
  19246. else {
  19247. _tDom.detachEvent('onclick', _stop);
  19248. _tDom.detachEvent('onmousewheel', _stop);
  19249. _tDom.detachEvent('onmousemove', _stop);
  19250. _tDom.detachEvent('onmousedown', _stop);
  19251. _tDom.detachEvent('onmouseup', _stop);
  19252. }
  19253. _buttonRefresh.onclick = null;
  19254. _buttonClose.onclick = null;
  19255. if (_hasShow) {
  19256. _tDom.removeChild(_textArea);
  19257. _tDom.removeChild(_buttonRefresh);
  19258. _tDom.removeChild(_buttonClose);
  19259. }
  19260. _textArea = null;
  19261. _buttonRefresh = null;
  19262. _buttonClose = null;
  19263. dom.firstChild.removeChild(_tDom);
  19264. _tDom = null;
  19265. self = null;
  19266. }
  19267. // 重载基类方法
  19268. self.dispose = dispose;
  19269. self.resize = resize;
  19270. self.show = show;
  19271. self.hide = hide;
  19272. _init();
  19273. }
  19274. require('../component').define('dataView', DataView);
  19275. return DataView;
  19276. });
  19277. /**
  19278. * echarts坐标处理方法
  19279. * Copyright 2013 Baidu Inc. All rights reserved.
  19280. *
  19281. * @author Neil (杨骥, linzhifeng@baidu.com)
  19282. */
  19283. define(
  19284. 'echarts/util/coordinates',['require','zrender/tool/math'],function(require) {
  19285. var zrMath = require('zrender/tool/math');
  19286. /**
  19287. * 极坐标转直角坐标
  19288. *
  19289. * @param {number} 半径
  19290. * @param {number} 角度
  19291. *
  19292. * @return {Array.<number>} 直角坐标[x,y]
  19293. */
  19294. function polar2cartesian(r, theta) {
  19295. return [r * zrMath.sin(theta), r*zrMath.cos(theta)];
  19296. }
  19297. /**
  19298. * 直角坐标转极坐标
  19299. *
  19300. * @param {number} 横坐标
  19301. * @param {number} 纵坐标
  19302. *
  19303. * @return {Array.<number>} 极坐标[r,theta]
  19304. */
  19305. function cartesian2polar(x, y) {
  19306. return [Math.sqrt(x * x + y * y), Math.atan(y / x)];
  19307. }
  19308. return {
  19309. polar2cartesian : polar2cartesian,
  19310. cartesian2polar : cartesian2polar
  19311. };
  19312. }
  19313. );
  19314. /**
  19315. * echarts组件类:极坐标
  19316. * Copyright 2013 Baidu Inc. All rights reserved.
  19317. *
  19318. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  19319. * @author Neil (杨骥, yangji01@baidu.com)
  19320. *
  19321. */
  19322. define(
  19323. 'echarts/component/polar',['require','./base','../config','../util/coordinates','zrender/tool/util','../component'],function(require) {
  19324. function Polar(messageCenter, zr, option, component) {
  19325. var Base = require('./base');
  19326. Base.call(this, zr);
  19327. var ecConfig = require('../config');
  19328. var ecCoordinates = require('../util/coordinates');
  19329. var zrUtil = require('zrender/tool/util');
  19330. var self = this;
  19331. self.type = ecConfig.COMPONENT_TYPE_POLAR;
  19332. var polar;
  19333. var _width = zr.getWidth();
  19334. var _height = zr.getHeight();
  19335. var series;
  19336. var _queryTarget;
  19337. function init(newOption, newComponent) {
  19338. component = newComponent;
  19339. refresh(newOption);
  19340. }
  19341. /**
  19342. * 绘制图形
  19343. */
  19344. function _buildShape() {
  19345. for (var i = 0; i < polar.length; i ++) {
  19346. self.reformOption(polar[i]);
  19347. _queryTarget = [polar[i], option];
  19348. _createVector(i);
  19349. _buildSpiderWeb(i);
  19350. _buildText(i);
  19351. _adjustIndicatorValue(i);
  19352. _addAxisLabel(i);
  19353. }
  19354. for (var i = 0; i < self.shapeList.length; i ++) {
  19355. self.shapeList[i].id = zr.newShapeId(self.type);
  19356. zr.addShape(self.shapeList[i]);
  19357. }
  19358. }
  19359. /**
  19360. * 生成蜘蛛网顶点坐标
  19361. * @param {number} polar的index
  19362. */
  19363. function _createVector(index) {
  19364. var item = polar[index];
  19365. var indicator = self.deepQuery(_queryTarget, 'indicator');
  19366. var length = indicator.length;
  19367. var startAngle = item.startAngle ;
  19368. var dStep = 2 * Math.PI / length;
  19369. var radius = item.radius;
  19370. var __ecIndicator = item.__ecIndicator = [];
  19371. var vector;
  19372. if (typeof radius != 'number') {
  19373. radius = Math.floor(
  19374. Math.min(_width, _height) / 2 - 50
  19375. );
  19376. }
  19377. for (var i = 0 ;i < length ; i ++) {
  19378. vector = ecCoordinates.polar2cartesian(
  19379. radius, startAngle * Math.PI / 180 + dStep * i
  19380. );
  19381. __ecIndicator.push({
  19382. // 将图形翻转
  19383. vector : [vector[1], -vector[0]]
  19384. });
  19385. }
  19386. }
  19387. /**
  19388. * 构建蜘蛛网
  19389. * @param {number} polar的index
  19390. */
  19391. function _buildSpiderWeb(index) {
  19392. var item = polar[index];
  19393. var __ecIndicator = item.__ecIndicator;
  19394. var splitArea = item.splitArea;
  19395. var splitLine = item.splitLine;
  19396. var center = item.center;
  19397. var splitNumber = item.splitNumber;
  19398. var strokeColor = splitLine.lineStyle.color;
  19399. var lineWidth = splitLine.lineStyle.width;
  19400. var show = splitLine.show;
  19401. var axisLine = self.deepQuery(_queryTarget, 'axisLine');
  19402. _addArea(
  19403. __ecIndicator, splitNumber, center,
  19404. splitArea, strokeColor, lineWidth, show
  19405. );
  19406. _addLine(
  19407. __ecIndicator, center, axisLine
  19408. );
  19409. }
  19410. /**
  19411. * 绘制axisLabel
  19412. */
  19413. function _addAxisLabel(index) {
  19414. var item = polar[index];
  19415. var indicator = self.deepQuery(_queryTarget, 'indicator');
  19416. var __ecIndicator = item.__ecIndicator;
  19417. var axisLabel;
  19418. var vector;
  19419. var style;
  19420. var newStyle;
  19421. var splitNumber = self.deepQuery(_queryTarget, 'splitNumber');
  19422. var center = item.center;
  19423. var vector;
  19424. var value;
  19425. var text;
  19426. var theta;
  19427. // var startAngle = self.deepQuery(_queryTarget, 'startAngle');
  19428. var offset;
  19429. var precision = self.deepQuery(_queryTarget, 'precision');
  19430. for (var i = 0; i < indicator.length; i ++) {
  19431. axisLabel = self.deepQuery([indicator[i], item, option],
  19432. 'axisLabel');
  19433. if (axisLabel.show) {
  19434. style = {};
  19435. style.styleFont = self.getFont();
  19436. style = zrUtil.merge(style, axisLabel);
  19437. style.lineWidth = style.width;
  19438. vector = __ecIndicator[i].vector;
  19439. value = __ecIndicator[i].value;
  19440. theta = i / indicator.length * 2 * Math.PI;
  19441. offset = axisLabel.offset || 10;
  19442. for (var j = 1 ; j <= splitNumber; j ++) {
  19443. newStyle = zrUtil.merge({}, style);
  19444. text =
  19445. j * (value.max - value.min) / splitNumber
  19446. + value.min;
  19447. if (precision) {
  19448. text = text.toFixed(precision);
  19449. }
  19450. newStyle.text = text;
  19451. newStyle.x = j * vector[0] / splitNumber
  19452. + Math.cos(theta) * offset + center[0];
  19453. newStyle.y = j * vector[1] / splitNumber
  19454. + Math.sin(theta) * offset + center[1];
  19455. self.shapeList.push({
  19456. shape : 'text',
  19457. style : newStyle,
  19458. draggable : false,
  19459. hoverable : false
  19460. });
  19461. }
  19462. }
  19463. }
  19464. }
  19465. /**
  19466. * 绘制坐标头的文字
  19467. * @param {number} polar的index
  19468. */
  19469. function _buildText (index) {
  19470. var item = polar[index];
  19471. var __ecIndicator = item.__ecIndicator;
  19472. var vector;
  19473. var indicator = self.deepQuery(_queryTarget, 'indicator');
  19474. var center = item.center;
  19475. var style;
  19476. var textAlign;
  19477. var name;
  19478. var rotation;
  19479. var x = 0;
  19480. var y = 0;
  19481. var margin;
  19482. var textStyle;
  19483. for (var i = 0; i < indicator.length; i ++) {
  19484. name = self.deepQuery(
  19485. [indicator[i], item, option], 'name'
  19486. );
  19487. if (!name.show) {
  19488. continue;
  19489. }
  19490. textStyle = self.deepQuery([name, item, option],
  19491. 'textStyle');
  19492. style = {};
  19493. style.styleFont = self.getFont(textStyle);
  19494. if (typeof name.formatter == 'function') {
  19495. style.text = name.formatter(indicator[i].text, i);
  19496. }
  19497. else if (typeof name.formatter == 'string'){
  19498. style.text = name.formatter.replace(
  19499. '{value}', indicator[i].text
  19500. );
  19501. }
  19502. else {
  19503. style.text = indicator[i].text;
  19504. }
  19505. vector = __ecIndicator[i].vector;
  19506. if (Math.round(vector[0]) > 0) {
  19507. textAlign = 'left';
  19508. }
  19509. else if (Math.round(vector[0]) < 0) {
  19510. textAlign = 'right';
  19511. }
  19512. else {
  19513. textAlign = 'center';
  19514. }
  19515. if (!name.margin) {
  19516. vector = _mapVector(vector, center, 1.2);
  19517. }
  19518. else {
  19519. margin = name.margin;
  19520. x = vector[0] > 0 ? margin : - margin;
  19521. y = vector[1] > 0 ? margin : - margin;
  19522. x = vector[0] === 0 ? 0 : x;
  19523. y = vector[1] === 0 ? 0 : y;
  19524. vector = _mapVector(vector, center, 1);
  19525. }
  19526. style.textAlign = textAlign;
  19527. style.x = vector[0] + x;
  19528. style.y = vector[1] + y;
  19529. if (name.rotate) {
  19530. rotation = [
  19531. name.rotate / 180 * Math.PI,
  19532. vector[0], vector[1]
  19533. ];
  19534. }
  19535. self.shapeList.push({
  19536. shape : 'text',
  19537. style : style,
  19538. draggable : false,
  19539. hoverable : false,
  19540. rotation : rotation
  19541. });
  19542. }
  19543. }
  19544. /**
  19545. * 添加一个隐形的盒子 当做drop的容器 暴露给外部的图形类使用
  19546. * @param {number} polar的index
  19547. * @return {Object} 添加的盒子图形
  19548. */
  19549. function _addDropBox(index) {
  19550. var index = index || 0;
  19551. var item = polar[index];
  19552. var center = item.center;
  19553. var __ecIndicator = item.__ecIndicator;
  19554. var len = __ecIndicator.length;
  19555. var pointList = [];
  19556. var vector;
  19557. var shape;
  19558. for (var i = 0; i < len; i ++) {
  19559. vector = __ecIndicator[i].vector;
  19560. pointList.push(_mapVector(vector, center, 1.2));
  19561. }
  19562. shape = _getShape(
  19563. pointList, 'fill', 'rgba(0,0,0,0)', '', 1
  19564. );
  19565. return shape;
  19566. }
  19567. /**
  19568. * 绘制蜘蛛网的正n变形
  19569. *
  19570. * @param {Array<Object>} 指标数组
  19571. * @param {number} 分割线数量
  19572. * @param {Array<number>} 中点坐标
  19573. * @param {Object} 分割区域对象
  19574. * @param {string} 线条颜色
  19575. * @param {number} 线条宽度
  19576. */
  19577. function _addArea(
  19578. __ecIndicator, splitNumber, center,
  19579. splitArea, strokeColor, lineWidth, show
  19580. ) {
  19581. var shape;
  19582. var scale;
  19583. var scale1;
  19584. var pointList;
  19585. for (var i = 0; i < splitNumber ; i ++ ) {
  19586. scale = (splitNumber - i) / splitNumber;
  19587. pointList = _getPointList(__ecIndicator, scale, center);
  19588. if (show) {
  19589. shape = _getShape(
  19590. pointList, 'stroke', '', strokeColor, lineWidth
  19591. );
  19592. self.shapeList.push(shape);
  19593. }
  19594. if (splitArea.show) {
  19595. scale1 = (splitNumber - i - 1) / splitNumber;
  19596. _addSplitArea(
  19597. __ecIndicator, splitArea, scale, scale1, center, i
  19598. );
  19599. }
  19600. }
  19601. }
  19602. /**
  19603. * 获取需要绘制的多边形的点集
  19604. * @param {Object} serie的指标参数
  19605. * @param {number} 缩小的系数
  19606. * @param {Array<number>} 中点坐标
  19607. *
  19608. * @return {Array<Array<number>>} 返回绘制的点集
  19609. */
  19610. function _getPointList(__ecIndicator, scale, center) {
  19611. var pointList = [];
  19612. var len = __ecIndicator.length;
  19613. var vector;
  19614. for (var i = 0 ; i < len ; i ++ ) {
  19615. vector = __ecIndicator[i].vector;
  19616. pointList.push(_mapVector(vector, center, scale));
  19617. }
  19618. return pointList;
  19619. }
  19620. /**
  19621. * 获取绘制的图形
  19622. * @param {Array<Array<number>>} 绘制的点集
  19623. * @param {string} 绘制方式 stroke | fill | both 描边 | 填充 | 描边 + 填充
  19624. * @param {string} 颜色
  19625. * @param {string} 描边颜色
  19626. * @param {number} 线条宽度
  19627. * @param {boolean=} hoverable
  19628. * @param {boolean=} draggable
  19629. * @return {Object} 绘制的图形对象
  19630. */
  19631. function _getShape(
  19632. pointList, brushType, color, strokeColor, lineWidth,
  19633. hoverable, draggable
  19634. ) {
  19635. return {
  19636. shape : 'polygon',
  19637. style : {
  19638. pointList : pointList,
  19639. brushType : brushType,
  19640. color : color,
  19641. strokeColor : strokeColor,
  19642. lineWidth : lineWidth
  19643. },
  19644. hoverable : hoverable || false,
  19645. draggable : draggable || false
  19646. };
  19647. }
  19648. /**
  19649. * 绘制填充区域
  19650. */
  19651. function _addSplitArea(
  19652. __ecIndicator, splitArea, scale, scale1, center, colorInd
  19653. ) {
  19654. var indLen = __ecIndicator.length;
  19655. var color;
  19656. var colorArr = splitArea.areaStyle.color;
  19657. var colorLen;
  19658. var vector;
  19659. var vector1;
  19660. var pointList = [];
  19661. var indLen = __ecIndicator.length;
  19662. var shape;
  19663. if (typeof colorArr == 'string') {
  19664. colorArr = [colorArr];
  19665. }
  19666. colorLen = colorArr.length;
  19667. color = colorArr[ colorInd % colorLen];
  19668. for (var i = 0; i < indLen ; i ++) {
  19669. pointList = [];
  19670. vector = __ecIndicator[i].vector;
  19671. vector1 = __ecIndicator[(i + 1) % indLen].vector;
  19672. pointList.push(_mapVector(vector, center, scale));
  19673. pointList.push(_mapVector(vector, center, scale1));
  19674. pointList.push(_mapVector(vector1, center, scale1));
  19675. pointList.push(_mapVector(vector1, center, scale));
  19676. shape = _getShape(
  19677. pointList, 'fill', color, '', 1
  19678. );
  19679. self.shapeList.push(shape);
  19680. }
  19681. }
  19682. /**
  19683. * 转换坐标
  19684. *
  19685. * @param {Array<number>} 原始坐标
  19686. * @param {Array<number>} 中点坐标
  19687. * @param {number} 缩小的倍数
  19688. *
  19689. * @return {Array<number>} 转换后的坐标
  19690. */
  19691. function _mapVector(vector, center, scale) {
  19692. return [
  19693. vector[0] * scale + center[0],
  19694. vector[1] * scale + center[1]
  19695. ];
  19696. }
  19697. /**
  19698. * 获取中心点位置 暴露给外部图形类使用
  19699. * @param {number} polar的index
  19700. */
  19701. function getCenter(index) {
  19702. var index = index || 0;
  19703. return polar[index].center;
  19704. }
  19705. /**
  19706. * 绘制从中点出发的线
  19707. *
  19708. * @param {Array<Object>} 指标对象
  19709. * @param {Array<number>} 中点坐标
  19710. * @param {string} 线条颜色
  19711. * @param {number} 线条宽度
  19712. * @param {string} 线条绘制类型
  19713. * solid | dotted | dashed 实线 | 点线 | 虚线
  19714. */
  19715. function _addLine(
  19716. __ecIndicator, center, axisLine
  19717. ) {
  19718. var indLen = __ecIndicator.length;
  19719. var line;
  19720. var vector;
  19721. var lineStyle = axisLine.lineStyle;
  19722. var strokeColor = lineStyle.color;
  19723. var lineWidth = lineStyle.width;
  19724. var lineType = lineStyle.type;
  19725. for (var i = 0; i < indLen ; i ++ ) {
  19726. vector = __ecIndicator[i].vector;
  19727. line = _getLine(
  19728. center[0], center[1],
  19729. vector[0] + center[0],
  19730. vector[1] + center[1],
  19731. strokeColor, lineWidth, lineType
  19732. );
  19733. self.shapeList.push(line);
  19734. }
  19735. }
  19736. /**
  19737. * 获取线条对象
  19738. * @param {number} 出发点横坐标
  19739. * @param {number} 出发点纵坐标
  19740. * @param {number} 终点横坐标
  19741. * @param {number} 终点纵坐标
  19742. * @param {string} 线条颜色
  19743. * @param {number} 线条宽度
  19744. * @param {string} 线条类型
  19745. *
  19746. * @return {Object} 线条对象
  19747. */
  19748. function _getLine(
  19749. xStart, yStart, xEnd, yEnd, strokeColor, lineWidth, lineType
  19750. ) {
  19751. return {
  19752. shape : 'line',
  19753. style : {
  19754. xStart : xStart,
  19755. yStart : yStart,
  19756. xEnd : xEnd,
  19757. yEnd : yEnd,
  19758. strokeColor : strokeColor,
  19759. lineWidth : lineWidth,
  19760. lineType : lineType
  19761. },
  19762. hoverable : false
  19763. };
  19764. }
  19765. /**
  19766. * 调整指标的值,当indicator中存在max时设置为固定值
  19767. * @param {number} polar的index
  19768. */
  19769. function _adjustIndicatorValue(index) {
  19770. var item = polar[index];
  19771. var indicator = self.deepQuery(_queryTarget, 'indicator');
  19772. var len = indicator.length;
  19773. var __ecIndicator = item.__ecIndicator;
  19774. var value;
  19775. var max;
  19776. var min;
  19777. var data = _getSeriesData(index);
  19778. var splitNumber = item.splitNumber;
  19779. var boundaryGap = self.deepQuery(_queryTarget, 'boundaryGap');
  19780. var precision = self.deepQuery(_queryTarget, 'precision');
  19781. var power = self.deepQuery(_queryTarget, 'power');
  19782. var scale = self.deepQuery(_queryTarget, 'scale');
  19783. for (var i = 0; i < len ; i ++ ) {
  19784. if (typeof indicator[i].max == 'number') {
  19785. max = indicator[i].max;
  19786. min = indicator[i].min || 0;
  19787. value = {
  19788. max : max,
  19789. min : min
  19790. };
  19791. }
  19792. else {
  19793. value = _findValue(
  19794. data, i, splitNumber,
  19795. boundaryGap, precision, power, scale
  19796. );
  19797. }
  19798. __ecIndicator[i].value = value;
  19799. }
  19800. }
  19801. /**
  19802. * 将series中的数据拿出来,如果没有polarIndex属性,默认为零
  19803. * @param {number} polar 的index
  19804. * @param {Array<Object>} 需要处理的数据
  19805. */
  19806. function _getSeriesData(index) {
  19807. var data = [];
  19808. var serie;
  19809. var serieData;
  19810. var legend = component.legend;
  19811. for (var i = 0; i < series.length; i ++) {
  19812. serie = series[i];
  19813. serieData = serie.data || [];
  19814. for (var j = 0; j < serieData.length; j ++) {
  19815. polarIndex = self.deepQuery(
  19816. [serieData[j], serie, option], 'polarIndex'
  19817. ) || 0;
  19818. if (polarIndex == index
  19819. && (!legend || legend.isSelected(serieData[j].name))
  19820. ) {
  19821. data.push(serieData[j]);
  19822. }
  19823. }
  19824. }
  19825. return data;
  19826. }
  19827. /**
  19828. * 查找指标合适的值
  19829. *
  19830. * 如果只有一组数据以数据中的最大值作为最大值 0为最小值
  19831. * 如果是多组,使用同一维度的进行比较 选出最大值最小值
  19832. * 对它们进行处理
  19833. * @param {Object} serie 的 data
  19834. * @param {number} 指标的序号
  19835. * @param {boolean} boundaryGap 两端留白
  19836. * @param {number} precision 小数精度
  19837. * @param {number} power 整数精度
  19838. * @return {Object} 指标的最大值最小值
  19839. */
  19840. function _findValue(
  19841. data, index, splitNumber, boundaryGap, precision, power, scale
  19842. ) {
  19843. var max;
  19844. var min;
  19845. var value;
  19846. var delta;
  19847. var str;
  19848. var len = 0;
  19849. var max0;
  19850. var min0;
  19851. var one;
  19852. if (!data || data.length === 0) {
  19853. return;
  19854. }
  19855. function _compare(item) {
  19856. (item > max || max === undefined) && (max = item);
  19857. (item < min || min === undefined) && (min = item);
  19858. }
  19859. if (data.length == 1) {
  19860. min = 0;
  19861. }
  19862. if (data.length != 1) {
  19863. for (var i = 0; i < data.length; i ++) {
  19864. value = data[i].value[index];
  19865. _compare(value);
  19866. }
  19867. }
  19868. else {
  19869. one = data[0];
  19870. for (var i = 0; i < one.value.length; i ++) {
  19871. _compare(one.value[i]);
  19872. }
  19873. }
  19874. if (data.length != 1) {
  19875. if (scale) {
  19876. delta = _getDelta(
  19877. max, min, splitNumber, precision, power
  19878. );
  19879. if (delta >= 1) {
  19880. min = Math.floor(min / delta) * delta - delta;
  19881. }
  19882. else if (delta === 0) {
  19883. if (max > 0) {
  19884. min0 = 0;
  19885. max0 = 2 * max;
  19886. }
  19887. else if (max === 0) {
  19888. min0 = 0;
  19889. max0 = 100;
  19890. }
  19891. else {
  19892. max0 = 0;
  19893. min0 = 2 * min;
  19894. }
  19895. return {
  19896. max : max0,
  19897. min : min0
  19898. };
  19899. }
  19900. else {
  19901. str = (delta + '').split('.')[1];
  19902. len = str.length;
  19903. min = Math.floor(
  19904. min * Math.pow(10, len)) / Math.pow(10, len
  19905. ) - delta;
  19906. }
  19907. if (Math.abs(min) <= delta) {
  19908. min = 0;
  19909. }
  19910. max = min + Math.floor(delta * Math.pow(10, len)
  19911. * (splitNumber + 1)) / Math.pow(10, len) ;
  19912. }
  19913. else {
  19914. min = min > 0 ? 0 : min;
  19915. }
  19916. }
  19917. if (boundaryGap) {
  19918. max = max > 0 ? max * 1.2 : max * 0.8;
  19919. min = min > 0 ? min * 0.8 : min * 1.2;
  19920. }
  19921. return {
  19922. max : max,
  19923. min : min
  19924. };
  19925. }
  19926. /**
  19927. * 获取最大值与最小值中间比较合适的差值
  19928. * @param {number} max;
  19929. * @param {number} min
  19930. * @param {number} precision 小数精度
  19931. * @param {number} power 整数精度
  19932. * @return {number} delta
  19933. */
  19934. function _getDelta(max , min, splitNumber, precision, power) {
  19935. var delta = (max - min) / splitNumber;
  19936. var str;
  19937. var n;
  19938. if (delta > 1) {
  19939. if (!power) {
  19940. str = (delta + '').split('.')[0];
  19941. n = str.length;
  19942. if (str[0] >= 5) {
  19943. return Math.pow(10, n);
  19944. }
  19945. else {
  19946. return (str[0] - 0 + 1 ) * Math.pow(10, n - 1);
  19947. }
  19948. }
  19949. else {
  19950. delta = Math.ceil(delta);
  19951. if (delta % power > 0) {
  19952. return (Math.ceil(delta / power) + 1) * power;
  19953. }
  19954. else {
  19955. return delta;
  19956. }
  19957. }
  19958. }
  19959. else if (delta == 1) {
  19960. return 1;
  19961. }
  19962. else if (delta === 0) {
  19963. return 0;
  19964. }
  19965. else {
  19966. if (!precision) {
  19967. str = (delta + '').split('.')[1];
  19968. n = 0;
  19969. while (str[n] == '0') {
  19970. n ++ ;
  19971. }
  19972. if (str[n] >= 5) {
  19973. return '0.' + str.substring(0, n + 1) - 0
  19974. + 1 / Math.pow(10, n);
  19975. }
  19976. else {
  19977. return '0.' + str.substring(0, n + 1) - 0
  19978. + 1 / Math.pow(10, n + 1);
  19979. }
  19980. }
  19981. else {
  19982. return Math.ceil(delta * Math.pow(10, precision))
  19983. / Math.pow(10, precision);
  19984. }
  19985. }
  19986. }
  19987. function reformOption(opt) {
  19988. // 常用方法快捷方式
  19989. var _merge = zrUtil.merge;
  19990. opt = _merge(
  19991. opt || {},
  19992. ecConfig.polar,
  19993. {
  19994. 'overwrite' : false,
  19995. 'recursive' : true
  19996. }
  19997. );
  19998. opt.center = self.parseCenter(opt.center);
  19999. if (!opt.radius) {
  20000. opt.radius = Math.floor(
  20001. Math.min(_width, _height) / 2 - 50
  20002. );
  20003. }
  20004. return opt;
  20005. }
  20006. /**
  20007. * 获取每个指标上某个value对应的坐标
  20008. * @param {number} polarIndex
  20009. * @param {number} indicatorIndex
  20010. * @param {number} value
  20011. * @return {Array<number>} 对应坐标
  20012. */
  20013. function getVector(polarIndex, indicatorIndex, value) {
  20014. polarIndex = polarIndex || 0;
  20015. indicatorIndex = indicatorIndex || 0;
  20016. var __ecIndicator = polar[polarIndex].__ecIndicator;
  20017. if (indicatorIndex >= __ecIndicator.length) {
  20018. return ;
  20019. }
  20020. var indicator = polar[polarIndex].__ecIndicator[indicatorIndex];
  20021. var center = polar[polarIndex].center;
  20022. var vector = indicator.vector;
  20023. var max = indicator.value.max;
  20024. var min = indicator.value.min;
  20025. var alpha;
  20026. if (typeof value != 'number') {
  20027. return center;
  20028. }
  20029. else {
  20030. if ( max != min) {
  20031. alpha = (value - min) / (max - min);
  20032. }
  20033. else {
  20034. alpha = 0.5;
  20035. }
  20036. return _mapVector(vector, center, alpha);
  20037. }
  20038. }
  20039. /**
  20040. * 判断一个点是否在网内
  20041. * @param {Array<number>} 坐标
  20042. * @return {number} 返回polarindex 返回-1表示不在任何polar
  20043. */
  20044. function isInside(vector) {
  20045. var polar = getNearestIndex(vector);
  20046. if (polar) {
  20047. return polar.polarIndex;
  20048. }
  20049. return -1;
  20050. }
  20051. /**
  20052. * 如果一个点在网内,返回离它最近的数据轴的index
  20053. * @param {Array<number>} 坐标
  20054. * @return {Object} | false
  20055. * polarIndex
  20056. * valueIndex
  20057. */
  20058. function getNearestIndex(vector) {
  20059. var item;
  20060. var center;
  20061. var radius;
  20062. var polarVector;
  20063. var startAngle;
  20064. var indicator;
  20065. var len;
  20066. var angle;
  20067. var finalAngle;
  20068. for (var i = 0 ; i < polar.length; i ++) {
  20069. item = polar[i];
  20070. center = getCenter(i);
  20071. if (vector[0] == center[0] && vector[1] == center[1]) {
  20072. return {
  20073. polarIndex : i,
  20074. valueIndex : 0
  20075. };
  20076. }
  20077. radius = self.deepQuery([item, option], 'radius');
  20078. startAngle = item.startAngle;
  20079. indicator = item.indicator;
  20080. len = indicator.length;
  20081. angle = 2 * Math.PI / len;
  20082. // 注意y轴的翻转
  20083. polarVector = ecCoordinates.cartesian2polar(
  20084. vector[0] - center[0], center[1] - vector[1]
  20085. );
  20086. if (vector[0] - center[0] < 0) {
  20087. polarVector[1] += Math.PI;
  20088. }
  20089. if (polarVector[1] < 0) {
  20090. polarVector[1] += 2 * Math.PI;
  20091. }
  20092. // 减去startAngle的偏移量 再加2PI变成正数
  20093. finalAngle = polarVector[1] -
  20094. startAngle / 180 * Math.PI + Math.PI * 2;
  20095. if (Math.abs(Math.cos(finalAngle % (angle / 2))) * radius
  20096. > polarVector[0])
  20097. {
  20098. return {
  20099. polarIndex : i,
  20100. valueIndex : Math.floor(
  20101. (finalAngle + angle / 2 ) / angle
  20102. ) % len
  20103. };
  20104. }
  20105. }
  20106. }
  20107. /**
  20108. * 获取指标信息
  20109. * @param {number} polarIndex
  20110. * @return {Array<Object>} indicator
  20111. */
  20112. function getIndicator(index) {
  20113. var index = index || 0;
  20114. return polar[index].indicator;
  20115. }
  20116. /**
  20117. * 刷新
  20118. */
  20119. function refresh(newOption) {
  20120. if (newOption) {
  20121. option = newOption;
  20122. polar = option.polar;
  20123. series = option.series;
  20124. self.backupAdaptiveParams(polar,['center', 'radius'],true);
  20125. }
  20126. self.clear();
  20127. _buildShape();
  20128. }
  20129. function resize() {
  20130. // 复位录原始定义
  20131. self.restoreAdaptiveParams(polar, ['center', 'radius'], true);
  20132. refresh();
  20133. }
  20134. self.refresh = refresh;
  20135. self.resize = resize;
  20136. self.reformOption = reformOption;
  20137. self.getVector = getVector;
  20138. self.getDropBox = _addDropBox;
  20139. self.getCenter = getCenter;
  20140. self.getIndicator = getIndicator;
  20141. self.isInside = isInside;
  20142. self.getNearestIndex = getNearestIndex;
  20143. init(option, component);
  20144. }
  20145. require('../component').define('polar', Polar);
  20146. return Polar;
  20147. }
  20148. );
  20149. /*!
  20150. * ECharts, a javascript interactive chart library.
  20151. *
  20152. * Copyright (c) 2013, Baidu Inc.
  20153. * All rights reserved.
  20154. *
  20155. * Redistribution and use of this software in source and binary forms, with or
  20156. * without modification, are permitted provided that the following conditions
  20157. * are met:
  20158. *
  20159. * Redistributions of source code must retain the above copyright notice, this
  20160. * list of conditions and the following disclaimer.
  20161. *
  20162. * Redistributions in binary form must reproduce the above copyright notice,
  20163. * this list of conditions and the following disclaimer in the documentation
  20164. * and/or other materials provided with the distribution.
  20165. *
  20166. * Neither the name of Baidu Inc. nor the names of its contributors may be used
  20167. * to endorse or promote products derived from this software without specific
  20168. * prior written permission of Baidu Inc.
  20169. *
  20170. * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  20171. * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  20172. * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
  20173. * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
  20174. * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  20175. * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  20176. * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  20177. * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  20178. * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  20179. * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
  20180. * POSSIBILITY OF SUCH DAMAGE.
  20181. */
  20182. /**
  20183. * echarts
  20184. *
  20185. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  20186. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  20187. *
  20188. */
  20189. define('echarts/echarts',['require','./config','zrender','zrender/tool/util','zrender/tool/event','zrender/config','./util/shape/icon','./chart','./chart/island','./component','./component/title','./component/axis','./component/categoryAxis','./component/valueAxis','./component/grid','./component/dataZoom','./component/legend','./component/dataRange','./component/tooltip','./component/toolbox','./component/dataView','./component/polar','./util/ecData','./chart','./component','zrender/tool/util','zrender/tool/util','zrender/tool/util','zrender/tool/color','zrender/tool/util','zrender/tool/util'],function(require) {
  20190. var self = {};
  20191. var echarts = self; // 提供内部反向使用静态方法;
  20192. self.version = '1.3.0';
  20193. self.dependencies = {
  20194. zrender : '1.0.5'
  20195. };
  20196. /**
  20197. * 入口方法
  20198. */
  20199. self.init = function(dom, libOption) {
  20200. libOption = libOption || {type : 'canvas'};
  20201. if (libOption.type == 'canvas') {
  20202. return new Echarts(dom);
  20203. }
  20204. else if (libOption.type == 'flash') {
  20205. alert('未配置');
  20206. }
  20207. };
  20208. /**
  20209. * 基于zrender实现Echarts接口层
  20210. * @param {HtmlElement} dom 必要
  20211. * @param {Object} option 可选参数,同setOption
  20212. */
  20213. function Echarts(dom, option) {
  20214. var ecConfig = require('./config');
  20215. var self = this;
  20216. var _zr;
  20217. var _option;
  20218. var _optionBackup; // for各种change和zoom
  20219. var _optionRestore; // for restore;
  20220. var _chartList; // 图表实例
  20221. var _messageCenter; // Echarts层的消息中心,做zrender原始事件转换
  20222. var _status = { // 用于图表间通信
  20223. dragIn : false,
  20224. dragOut : false,
  20225. needRefresh : false
  20226. };
  20227. var _selectedMap;
  20228. var _island;
  20229. var _toolbox;
  20230. var _refreshInside; // 内部刷新标志位
  20231. // 初始化::构造函数
  20232. _init();
  20233. function _init() {
  20234. var zrender = require('zrender');
  20235. if (((zrender.version || '1.0.3').replace('.', '') - 0)
  20236. < (echarts.dependencies.zrender.replace('.', '') - 0)
  20237. ) {
  20238. console.error(
  20239. 'ZRender ' + (zrender.version || '1.0.3-')
  20240. + ' is too old for ECharts ' + echarts.version
  20241. + '. Current version need ZRender '
  20242. + echarts.dependencies.zrender + '+'
  20243. );
  20244. }
  20245. _zr = zrender.init(dom);
  20246. var zrUtil = require('zrender/tool/util');
  20247. _option = zrUtil.clone(option || {});
  20248. _chartList = []; // 图表实例
  20249. _messageCenter = {}; // Echarts层的消息中心,做zrender原始事件转换
  20250. // 添加消息中心的事件分发器特性
  20251. var zrEvent = require('zrender/tool/event');
  20252. zrEvent.Dispatcher.call(_messageCenter);
  20253. _messageCenter.bind(
  20254. ecConfig.EVENT.LEGEND_SELECTED, _onlegendSelected
  20255. );
  20256. _messageCenter.bind(
  20257. ecConfig.EVENT.DATA_ZOOM, _ondataZoom
  20258. );
  20259. _messageCenter.bind(
  20260. ecConfig.EVENT.DATA_RANGE, _ondataRange
  20261. );
  20262. _messageCenter.bind(
  20263. ecConfig.EVENT.MAGIC_TYPE_CHANGED, _onmagicTypeChanged
  20264. );
  20265. _messageCenter.bind(
  20266. ecConfig.EVENT.DATA_VIEW_CHANGED, _ondataViewChanged
  20267. );
  20268. _messageCenter.bind(
  20269. ecConfig.EVENT.TOOLTIP_HOVER, _tooltipHover
  20270. );
  20271. _messageCenter.bind(
  20272. ecConfig.EVENT.RESTORE, _onrestore
  20273. );
  20274. _messageCenter.bind(
  20275. ecConfig.EVENT.REFRESH, _onrefresh
  20276. );
  20277. var zrConfig = require('zrender/config');
  20278. _zr.on(zrConfig.EVENT.CLICK, _onclick);
  20279. _zr.on(zrConfig.EVENT.MOUSEOVER, _onhover);
  20280. _zr.on(zrConfig.EVENT.MOUSEWHEEL, _onmousewheel);
  20281. _zr.on(zrConfig.EVENT.DRAGSTART, _ondragstart);
  20282. _zr.on(zrConfig.EVENT.DRAGEND, _ondragend);
  20283. _zr.on(zrConfig.EVENT.DRAGENTER, _ondragenter);
  20284. _zr.on(zrConfig.EVENT.DRAGOVER, _ondragover);
  20285. _zr.on(zrConfig.EVENT.DRAGLEAVE, _ondragleave);
  20286. _zr.on(zrConfig.EVENT.DROP, _ondrop);
  20287. // 动态扩展zrender shape:icon
  20288. require('./util/shape/icon');
  20289. // 内置图表注册
  20290. var chartLibrary = require('./chart');
  20291. require('./chart/island');
  20292. // 孤岛
  20293. var Island = chartLibrary.get('island');
  20294. _island = new Island(_messageCenter, _zr);
  20295. // 内置组件注册
  20296. var componentLibrary = require('./component');
  20297. require('./component/title');
  20298. require('./component/axis');
  20299. require('./component/categoryAxis');
  20300. require('./component/valueAxis');
  20301. require('./component/grid');
  20302. require('./component/dataZoom');
  20303. require('./component/legend');
  20304. require('./component/dataRange');
  20305. require('./component/tooltip');
  20306. require('./component/toolbox');
  20307. require('./component/dataView');
  20308. require('./component/polar');
  20309. // 工具箱
  20310. var Toolbox = componentLibrary.get('toolbox');
  20311. _toolbox = new Toolbox(_messageCenter, _zr, dom);
  20312. }
  20313. /**
  20314. * 点击事件,响应zrender事件,包装后分发到Echarts层
  20315. */
  20316. function _onclick(param) {
  20317. var len = _chartList.length;
  20318. while (len--) {
  20319. _chartList[len]
  20320. && _chartList[len].onclick
  20321. && _chartList[len].onclick(param);
  20322. }
  20323. if (param.target) {
  20324. var ecData = _eventPackage(param.target);
  20325. if (ecData && typeof ecData.seriesIndex != 'undefined') {
  20326. _messageCenter.dispatch(
  20327. ecConfig.EVENT.CLICK,
  20328. param.event,
  20329. ecData
  20330. );
  20331. }
  20332. }
  20333. }
  20334. /**
  20335. * 悬浮事件,响应zrender事件,包装后分发到Echarts层
  20336. */
  20337. function _onhover(param) {
  20338. if (param.target) {
  20339. var ecData = _eventPackage(param.target);
  20340. if (ecData && typeof ecData.seriesIndex != 'undefined') {
  20341. _messageCenter.dispatch(
  20342. ecConfig.EVENT.HOVER,
  20343. param.event,
  20344. ecData
  20345. );
  20346. }
  20347. }
  20348. }
  20349. /**
  20350. * 滚轮回调,孤岛可计算特性
  20351. */
  20352. function _onmousewheel(param) {
  20353. _messageCenter.dispatch(
  20354. ecConfig.EVENT.MOUSEWHEEL,
  20355. param.event,
  20356. _eventPackage(param.target)
  20357. );
  20358. }
  20359. /**
  20360. * dragstart回调,可计算特性实现
  20361. */
  20362. function _ondragstart(param) {
  20363. // 复位用于图表间通信拖拽标识
  20364. _status = {
  20365. dragIn : false,
  20366. dragOut : false,
  20367. needRefresh : false
  20368. };
  20369. var len = _chartList.length;
  20370. while (len--) {
  20371. _chartList[len]
  20372. && _chartList[len].ondragstart
  20373. && _chartList[len].ondragstart(param);
  20374. }
  20375. }
  20376. /**
  20377. * dragging回调,可计算特性实现
  20378. */
  20379. function _ondragenter(param) {
  20380. var len = _chartList.length;
  20381. while (len--) {
  20382. _chartList[len]
  20383. && _chartList[len].ondragenter
  20384. && _chartList[len].ondragenter(param);
  20385. }
  20386. }
  20387. /**
  20388. * dragstart回调,可计算特性实现
  20389. */
  20390. function _ondragover(param) {
  20391. var len = _chartList.length;
  20392. while (len--) {
  20393. _chartList[len]
  20394. && _chartList[len].ondragover
  20395. && _chartList[len].ondragover(param);
  20396. }
  20397. }
  20398. /**
  20399. * dragstart回调,可计算特性实现
  20400. */
  20401. function _ondragleave(param) {
  20402. var len = _chartList.length;
  20403. while (len--) {
  20404. _chartList[len]
  20405. && _chartList[len].ondragleave
  20406. && _chartList[len].ondragleave(param);
  20407. }
  20408. }
  20409. /**
  20410. * dragstart回调,可计算特性实现
  20411. */
  20412. function _ondrop(param) {
  20413. var len = _chartList.length;
  20414. while (len--) {
  20415. _chartList[len]
  20416. && _chartList[len].ondrop
  20417. && _chartList[len].ondrop(param, _status);
  20418. }
  20419. _island.ondrop(param, _status);
  20420. }
  20421. /**
  20422. * dragdone回调 ,可计算特性实现
  20423. */
  20424. function _ondragend(param) {
  20425. var len = _chartList.length;
  20426. while (len--) {
  20427. _chartList[len]
  20428. && _chartList[len].ondragend
  20429. && _chartList[len].ondragend(param, _status);
  20430. }
  20431. _island.ondragend(param, _status);
  20432. // 发生过重计算
  20433. if (_status.needRefresh) {
  20434. _syncBackupData(_island.getOption());
  20435. _messageCenter.dispatch(
  20436. ecConfig.EVENT.DATA_CHANGED,
  20437. param.event,
  20438. _eventPackage(param.target)
  20439. );
  20440. _messageCenter.dispatch(ecConfig.EVENT.REFRESH);
  20441. }
  20442. }
  20443. /**
  20444. * 图例选择响应
  20445. */
  20446. function _onlegendSelected(param) {
  20447. // 用于图表间通信
  20448. _status.needRefresh = false;
  20449. var len = _chartList.length;
  20450. while (len--) {
  20451. _chartList[len]
  20452. && _chartList[len].onlegendSelected
  20453. && _chartList[len].onlegendSelected(param, _status);
  20454. }
  20455. _selectedMap = param.selected;
  20456. if (_status.needRefresh) {
  20457. _messageCenter.dispatch(ecConfig.EVENT.REFRESH);
  20458. }
  20459. }
  20460. /**
  20461. * 数据区域缩放响应
  20462. */
  20463. function _ondataZoom(param) {
  20464. // 用于图表间通信
  20465. _status.needRefresh = false;
  20466. var len = _chartList.length;
  20467. while (len--) {
  20468. _chartList[len]
  20469. && _chartList[len].ondataZoom
  20470. && _chartList[len].ondataZoom(param, _status);
  20471. }
  20472. if (_status.needRefresh) {
  20473. _messageCenter.dispatch(ecConfig.EVENT.REFRESH);
  20474. }
  20475. }
  20476. /**
  20477. * 值域漫游响应
  20478. */
  20479. function _ondataRange(param) {
  20480. // 用于图表间通信
  20481. _status.needRefresh = false;
  20482. var len = _chartList.length;
  20483. while (len--) {
  20484. _chartList[len]
  20485. && _chartList[len].ondataRange
  20486. && _chartList[len].ondataRange(param, _status);
  20487. }
  20488. // 没有相互影响,直接刷新即可
  20489. if (_status.needRefresh) {
  20490. _zr.refresh();
  20491. }
  20492. }
  20493. /**
  20494. * 动态类型切换响应
  20495. */
  20496. function _onmagicTypeChanged() {
  20497. _render(_getMagicOption());
  20498. }
  20499. /**
  20500. * 数据视图修改响应
  20501. */
  20502. function _ondataViewChanged(param) {
  20503. _syncBackupData(param.option);
  20504. _messageCenter.dispatch(
  20505. ecConfig.EVENT.DATA_CHANGED,
  20506. null,
  20507. param
  20508. );
  20509. _messageCenter.dispatch(ecConfig.EVENT.REFRESH);
  20510. }
  20511. /**
  20512. * tooltip与图表间通信
  20513. */
  20514. function _tooltipHover(param) {
  20515. var len = _chartList.length;
  20516. var tipShape = [];
  20517. while (len--) {
  20518. _chartList[len]
  20519. && _chartList[len].ontooltipHover
  20520. && _chartList[len].ontooltipHover(param, tipShape);
  20521. }
  20522. }
  20523. /**
  20524. * 还原
  20525. */
  20526. function _onrestore() {
  20527. self.restore();
  20528. }
  20529. /**
  20530. * 刷新
  20531. */
  20532. function _onrefresh(param) {
  20533. _refreshInside = true;
  20534. self.refresh(param);
  20535. _refreshInside = false;
  20536. }
  20537. /**
  20538. * 当前正在使用的option,还原可能存在的dataZoom
  20539. */
  20540. function _getMagicOption(targetOption) {
  20541. var magicOption = targetOption || _toolbox.getMagicOption();
  20542. var len;
  20543. // 横轴数据还原
  20544. if (_optionBackup.xAxis) {
  20545. if (_optionBackup.xAxis instanceof Array) {
  20546. len = _optionBackup.xAxis.length;
  20547. while (len--) {
  20548. magicOption.xAxis[len].data =
  20549. _optionBackup.xAxis[len].data;
  20550. }
  20551. }
  20552. else {
  20553. magicOption.xAxis.data = _optionBackup.xAxis.data;
  20554. }
  20555. }
  20556. // 纵轴数据还原
  20557. if (_optionBackup.yAxis) {
  20558. if (_optionBackup.yAxis instanceof Array) {
  20559. len = _optionBackup.yAxis.length;
  20560. while (len--) {
  20561. magicOption.yAxis[len].data =
  20562. _optionBackup.yAxis[len].data;
  20563. }
  20564. }
  20565. else {
  20566. magicOption.yAxis.data = _optionBackup.yAxis.data;
  20567. }
  20568. }
  20569. // 系列数据还原
  20570. len = magicOption.series.length;
  20571. while (len--) {
  20572. magicOption.series[len].data = _optionBackup.series[len].data;
  20573. }
  20574. return magicOption;
  20575. }
  20576. /**
  20577. * 数据修改后的反向同步备份数据
  20578. */
  20579. function _syncBackupData(curOption) {
  20580. if ((curOption.dataZoom && curOption.dataZoom.show)
  20581. || (curOption.toolbox
  20582. && curOption.toolbox.show
  20583. && curOption.toolbox.feature
  20584. && curOption.toolbox.feature.dataZoom
  20585. )
  20586. ) {
  20587. // 有dataZoom就dataZoom做同步
  20588. for (var i = 0, l = _chartList.length; i < l; i++) {
  20589. if (_chartList[i].type == ecConfig.COMPONENT_TYPE_DATAZOOM
  20590. ) {
  20591. _chartList[i].syncBackupData(curOption, _optionBackup);
  20592. return;
  20593. }
  20594. }
  20595. }
  20596. // 没有就ECharts做
  20597. var curSeries = curOption.series;
  20598. var curData;
  20599. for (var i = 0, l = curSeries.length; i < l; i++) {
  20600. curData = curSeries[i].data;
  20601. for (var j = 0, k = curData.length; j < k; j++) {
  20602. _optionBackup.series[i].data[j] = curData[j];
  20603. }
  20604. }
  20605. }
  20606. /**
  20607. * 打包Echarts层的事件附件
  20608. */
  20609. function _eventPackage(target) {
  20610. if (target) {
  20611. var ecData = require('./util/ecData');
  20612. return {
  20613. seriesIndex : ecData.get(target, 'seriesIndex'),
  20614. dataIndex : ecData.get(target, 'dataIndex')
  20615. };
  20616. }
  20617. return;
  20618. }
  20619. /**
  20620. * 图表渲染
  20621. */
  20622. function _render(magicOption) {
  20623. _disposeChartList();
  20624. _zr.clear();
  20625. var chartLibrary = require('./chart');
  20626. var componentLibrary = require('./component');
  20627. // 标题
  20628. var title;
  20629. if (magicOption.title) {
  20630. var Title = new componentLibrary.get('title');
  20631. title = new Title(
  20632. _messageCenter, _zr, magicOption
  20633. );
  20634. _chartList.push(title);
  20635. }
  20636. // 提示
  20637. var tooltip;
  20638. if (magicOption.tooltip) {
  20639. var Tooltip = componentLibrary.get('tooltip');
  20640. tooltip = new Tooltip(_messageCenter, _zr, magicOption, dom);
  20641. _chartList.push(tooltip);
  20642. }
  20643. // 图例
  20644. var legend;
  20645. if (magicOption.legend) {
  20646. var Legend = new componentLibrary.get('legend');
  20647. legend = new Legend(
  20648. _messageCenter, _zr, magicOption, _selectedMap
  20649. );
  20650. _chartList.push(legend);
  20651. }
  20652. // 值域控件
  20653. var dataRange;
  20654. if (magicOption.dataRange) {
  20655. var DataRange = new componentLibrary.get('dataRange');
  20656. dataRange = new DataRange(
  20657. _messageCenter, _zr, magicOption
  20658. );
  20659. _chartList.push(dataRange);
  20660. }
  20661. // 直角坐标系
  20662. var grid;
  20663. var dataZoom;
  20664. var xAxis;
  20665. var yAxis;
  20666. if (magicOption.grid || magicOption.xAxis || magicOption.yAxis) {
  20667. var Grid = componentLibrary.get('grid');
  20668. grid = new Grid(_messageCenter, _zr, magicOption);
  20669. _chartList.push(grid);
  20670. var DataZoom = componentLibrary.get('dataZoom');
  20671. dataZoom = new DataZoom(
  20672. _messageCenter,
  20673. _zr,
  20674. magicOption,
  20675. {
  20676. 'legend' : legend,
  20677. 'grid' : grid
  20678. }
  20679. );
  20680. _chartList.push(dataZoom);
  20681. var Axis = componentLibrary.get('axis');
  20682. xAxis = new Axis(
  20683. _messageCenter,
  20684. _zr,
  20685. magicOption,
  20686. {
  20687. 'legend' : legend,
  20688. 'grid' : grid
  20689. },
  20690. 'xAxis'
  20691. );
  20692. _chartList.push(xAxis);
  20693. yAxis = new Axis(
  20694. _messageCenter,
  20695. _zr,
  20696. magicOption,
  20697. {
  20698. 'legend' : legend,
  20699. 'grid' : grid
  20700. },
  20701. 'yAxis'
  20702. );
  20703. _chartList.push(yAxis);
  20704. }
  20705. // 极坐标系
  20706. var polar;
  20707. if (magicOption.polar) {
  20708. var Polar = componentLibrary.get('polar');
  20709. polar = new Polar(
  20710. _messageCenter,
  20711. _zr,
  20712. magicOption,
  20713. {
  20714. 'legend' : legend
  20715. }
  20716. );
  20717. _chartList.push(polar);
  20718. }
  20719. tooltip && tooltip.setComponent({
  20720. 'grid' : grid,
  20721. 'xAxis' : xAxis,
  20722. 'yAxis' : yAxis,
  20723. 'polar' : polar
  20724. });
  20725. var ChartClass;
  20726. var chartType;
  20727. var chart;
  20728. var chartMap = {}; // 记录已经初始化的图表
  20729. for (var i = 0, l = magicOption.series.length; i < l; i++) {
  20730. chartType = magicOption.series[i].type;
  20731. if (!chartType) {
  20732. continue;
  20733. }
  20734. if (!chartMap[chartType]) {
  20735. chartMap[chartType] = true;
  20736. ChartClass = chartLibrary.get(chartType);
  20737. if (ChartClass) {
  20738. chart = new ChartClass(
  20739. _messageCenter,
  20740. _zr,
  20741. magicOption,
  20742. {
  20743. 'tooltip' : tooltip,
  20744. 'legend' : legend,
  20745. 'dataRange' : dataRange,
  20746. 'grid' : grid,
  20747. 'xAxis' : xAxis,
  20748. 'yAxis' : yAxis,
  20749. 'polar' : polar
  20750. }
  20751. );
  20752. _chartList.push(chart);
  20753. }
  20754. }
  20755. }
  20756. _island.render(magicOption);
  20757. _toolbox.render(magicOption, {dataZoom: dataZoom});
  20758. if (magicOption.animation) {
  20759. var len = _chartList.length;
  20760. while (len--) {
  20761. _chartList[len]
  20762. && _chartList[len].animation
  20763. && _chartList[len].animation();
  20764. }
  20765. }
  20766. _zr.render();
  20767. }
  20768. /**
  20769. * 还原
  20770. */
  20771. function restore() {
  20772. var zrUtil = require('zrender/tool/util');
  20773. if (_optionRestore.legend && _optionRestore.legend.selected) {
  20774. _selectedMap = _optionRestore.legend.selected;
  20775. }
  20776. else {
  20777. _selectedMap = {};
  20778. }
  20779. _optionBackup = zrUtil.clone(_optionRestore);
  20780. _option = zrUtil.clone(_optionRestore);
  20781. _island.clear();
  20782. _toolbox.reset(_option);
  20783. _render(_option);
  20784. }
  20785. /**
  20786. * 刷新
  20787. * @param {Object=} param,可选参数,用于附带option,内部同步用,外部不建议带入数据修改,无法同步
  20788. */
  20789. function refresh(param) {
  20790. param = param || {};
  20791. var magicOption = param.option;
  20792. // 外部调用的refresh且有option带入
  20793. if (!_refreshInside && param.option) {
  20794. // 做简单的差异合并去同步内部持有的数据克隆,不建议带入数据
  20795. // 开启数据区域缩放、拖拽重计算、数据视图可编辑模式情况下,当用户产生了数据变化后无法同步
  20796. // 如有带入option存在数据变化,请重新setOption
  20797. var zrUtil = require('zrender/tool/util');
  20798. if (_optionBackup.toolbox
  20799. && _optionBackup.toolbox.show
  20800. && _optionBackup.toolbox.feature.magicType
  20801. && _optionBackup.toolbox.feature.magicType.length > 0
  20802. ) {
  20803. magicOption = _getMagicOption();
  20804. }
  20805. else {
  20806. magicOption = _getMagicOption(_island.getOption());
  20807. }
  20808. zrUtil.merge(
  20809. magicOption, param.option,
  20810. { 'overwrite': true, 'recursive': true }
  20811. );
  20812. zrUtil.merge(
  20813. _optionBackup, param.option,
  20814. { 'overwrite': true, 'recursive': true }
  20815. );
  20816. zrUtil.merge(
  20817. _optionRestore, param.option,
  20818. { 'overwrite': true, 'recursive': true }
  20819. );
  20820. _island.refresh(magicOption);
  20821. _toolbox.refresh(magicOption);
  20822. }
  20823. // 先来后到,安顺序刷新各种图表,图表内部refresh优化检查magicOption,无需更新则不更新~
  20824. for (var i = 0, l = _chartList.length; i < l; i++) {
  20825. _chartList[i].refresh && _chartList[i].refresh(magicOption);
  20826. }
  20827. _zr.refresh();
  20828. }
  20829. /**
  20830. * 释放图表实例
  20831. */
  20832. function _disposeChartList() {
  20833. var len = _chartList.length;
  20834. while (len--) {
  20835. _chartList[len]
  20836. && _chartList[len].dispose
  20837. && _chartList[len].dispose();
  20838. }
  20839. _chartList = [];
  20840. }
  20841. /**
  20842. * 万能接口,配置图表实例任何可配置选项,多次调用时option选项做merge处理
  20843. * @param {Object} option
  20844. * @param {boolean=} notMerge 多次调用时option选项是默认是合并(merge)的,
  20845. * 如果不需求,可以通过notMerger参数为true阻止与上次option的合并
  20846. */
  20847. function setOption(option, notMerge) {
  20848. var zrUtil = require('zrender/tool/util');
  20849. if (!notMerge) {
  20850. zrUtil.merge(
  20851. _option,
  20852. zrUtil.clone(option),
  20853. {
  20854. 'overwrite': true,
  20855. 'recursive': true
  20856. }
  20857. );
  20858. }
  20859. else {
  20860. _option = zrUtil.clone(option);
  20861. }
  20862. if (!option.series || option.series.length === 0) {
  20863. return;
  20864. }
  20865. // 非图表全局属性merge~~
  20866. if (typeof _option.calculable == 'undefined') {
  20867. _option.calculable = ecConfig.calculable;
  20868. }
  20869. if (typeof _option.nameConnector == 'undefined') {
  20870. _option.nameConnector = ecConfig.nameConnector;
  20871. }
  20872. if (typeof _option.valueConnector == 'undefined') {
  20873. _option.valueConnector = ecConfig.valueConnector;
  20874. }
  20875. if (typeof _option.animation == 'undefined') {
  20876. _option.animation = ecConfig.animation;
  20877. }
  20878. if (typeof _option.animationDuration == 'undefined') {
  20879. _option.animationDuration = ecConfig.animationDuration;
  20880. }
  20881. if (typeof _option.animationEasing == 'undefined') {
  20882. _option.animationEasing = ecConfig.animationEasing;
  20883. }
  20884. if (typeof _option.addDataAnimation == 'undefined') {
  20885. _option.addDataAnimation = ecConfig.addDataAnimation;
  20886. }
  20887. var zrColor = require('zrender/tool/color');
  20888. // 数值系列的颜色列表,不传则采用内置颜色,可配数组
  20889. if (_option.color && _option.color.length > 0) {
  20890. _zr.getColor = function(idx) {
  20891. return zrColor.getColor(idx, _option.color);
  20892. };
  20893. }
  20894. else {
  20895. _zr.getColor = function(idx) {
  20896. return zrColor.getColor(idx, ecConfig.color);
  20897. };
  20898. }
  20899. // calculable可计算颜色提示
  20900. _zr.getCalculableColor = function () {
  20901. return _option.calculableColor || ecConfig.calculableColor;
  20902. };
  20903. _optionBackup = zrUtil.clone(_option);
  20904. _optionRestore = zrUtil.clone(_option);
  20905. if (_option.legend && _option.legend.selected) {
  20906. _selectedMap = _option.legend.selected;
  20907. }
  20908. else {
  20909. _selectedMap = {};
  20910. }
  20911. _island.clear();
  20912. _toolbox.reset(_option);
  20913. _render(_option);
  20914. return self;
  20915. }
  20916. /**
  20917. * 数据设置快捷接口
  20918. * @param {Array} series
  20919. * @param {boolean=} notMerge 多次调用时option选项是默认是合并(merge)的,
  20920. * 如果不需求,可以通过notMerger参数为true阻止与上次option的合并。
  20921. */
  20922. function setSeries(series, notMerge) {
  20923. if (!notMerge) {
  20924. self.setOption({series: series});
  20925. }
  20926. else {
  20927. _option.series = series;
  20928. self.setOption(_option, notMerge);
  20929. }
  20930. return self;
  20931. }
  20932. /**
  20933. * 动态数据添加
  20934. * 形参为单组数据参数,多组时为数据,内容同[seriesIdx, data, isShift, additionData]
  20935. * @param {number} seriesIdx 系列索引
  20936. * @param {number | Object} data 增加数据
  20937. * @param {boolean=} isHead 是否队头加入,默认,不指定或false时为队尾插入
  20938. * @param {boolean=} dataGrow 是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据
  20939. * @param {string=} additionData 是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow
  20940. */
  20941. function addData(seriesIdx, data, isHead, dataGrow, additionData) {
  20942. var zrUtil = require('zrender/tool/util');
  20943. var params = seriesIdx instanceof Array
  20944. ? seriesIdx
  20945. : [[seriesIdx, data, isHead, dataGrow, additionData]];
  20946. var axisIdx;
  20947. var legendDataIdx;
  20948. var magicOption;
  20949. if (_optionBackup.toolbox
  20950. && _optionBackup.toolbox.show
  20951. && _optionBackup.toolbox.feature.magicType
  20952. && _optionBackup.toolbox.feature.magicType.length > 0
  20953. ) {
  20954. magicOption = _getMagicOption();
  20955. }
  20956. else {
  20957. magicOption = _getMagicOption(_island.getOption());
  20958. }
  20959. //_optionRestore 和 _optionBackup都要同步
  20960. for (var i = 0, l = params.length; i < l; i++) {
  20961. seriesIdx = params[i][0];
  20962. data = params[i][1];
  20963. isHead = params[i][2];
  20964. dataGrow = params[i][3];
  20965. additionData = params[i][4];
  20966. if (_optionRestore.series[seriesIdx]) {
  20967. if (isHead) {
  20968. _optionRestore.series[seriesIdx].data.unshift(data);
  20969. _optionBackup.series[seriesIdx].data.unshift(data);
  20970. if (!dataGrow) {
  20971. _optionRestore.series[seriesIdx].data.pop();
  20972. data = _optionBackup.series[seriesIdx].data.pop();
  20973. }
  20974. }
  20975. else {
  20976. _optionRestore.series[seriesIdx].data.push(data);
  20977. _optionBackup.series[seriesIdx].data.push(data);
  20978. if (!dataGrow) {
  20979. _optionRestore.series[seriesIdx].data.shift();
  20980. data = _optionBackup.series[seriesIdx].data.shift();
  20981. }
  20982. }
  20983. if (typeof additionData != 'undefined'
  20984. && _optionRestore.series[seriesIdx].type
  20985. == ecConfig.CHART_TYPE_PIE
  20986. && _optionBackup.legend
  20987. && _optionBackup.legend.data
  20988. ) {
  20989. magicOption.legend.data = _optionBackup.legend.data;
  20990. if (isHead) {
  20991. _optionRestore.legend.data.unshift(additionData);
  20992. _optionBackup.legend.data.unshift(additionData);
  20993. }
  20994. else {
  20995. _optionRestore.legend.data.push(additionData);
  20996. _optionBackup.legend.data.push(additionData);
  20997. }
  20998. if (!dataGrow) {
  20999. legendDataIdx = zrUtil.indexOf(
  21000. _optionBackup.legend.data,
  21001. data.name
  21002. );
  21003. legendDataIdx != -1
  21004. && (
  21005. _optionRestore.legend.data.splice(
  21006. legendDataIdx, 1
  21007. ),
  21008. _optionBackup.legend.data.splice(
  21009. legendDataIdx, 1
  21010. )
  21011. );
  21012. }
  21013. _selectedMap[additionData] = true;
  21014. }
  21015. else if (typeof additionData != 'undefined'
  21016. && typeof _optionRestore.xAxis != 'undefined'
  21017. && typeof _optionRestore.yAxis != 'undefined'
  21018. ) {
  21019. // x轴类目
  21020. axisIdx = _optionRestore.series[seriesIdx].xAxisIndex
  21021. || 0;
  21022. if (typeof _optionRestore.xAxis[axisIdx].type
  21023. == 'undefined'
  21024. || _optionRestore.xAxis[axisIdx].type == 'category'
  21025. ) {
  21026. if (isHead) {
  21027. _optionRestore.xAxis[axisIdx].data.unshift(
  21028. additionData
  21029. );
  21030. _optionBackup.xAxis[axisIdx].data.unshift(
  21031. additionData
  21032. );
  21033. if (!dataGrow) {
  21034. _optionRestore.xAxis[axisIdx].data.pop();
  21035. _optionBackup.xAxis[axisIdx].data.pop();
  21036. }
  21037. }
  21038. else {
  21039. _optionRestore.xAxis[axisIdx].data.push(
  21040. additionData
  21041. );
  21042. _optionBackup.xAxis[axisIdx].data.push(
  21043. additionData
  21044. );
  21045. if (!dataGrow) {
  21046. _optionRestore.xAxis[axisIdx].data.shift();
  21047. _optionBackup.xAxis[axisIdx].data.shift();
  21048. }
  21049. }
  21050. }
  21051. // y轴类目
  21052. axisIdx = _optionRestore.series[seriesIdx].yAxisIndex
  21053. || 0;
  21054. if (_optionRestore.yAxis[axisIdx].type == 'category') {
  21055. if (isHead) {
  21056. _optionRestore.yAxis[axisIdx].data.unshift(
  21057. additionData
  21058. );
  21059. _optionBackup.yAxis[axisIdx].data.unshift(
  21060. additionData
  21061. );
  21062. if (!dataGrow) {
  21063. _optionRestore.yAxis[axisIdx].data.pop();
  21064. _optionBackup.yAxis[axisIdx].data.pop();
  21065. }
  21066. }
  21067. else {
  21068. _optionRestore.yAxis[axisIdx].data.push(
  21069. additionData
  21070. );
  21071. _optionBackup.yAxis[axisIdx].data.push(
  21072. additionData
  21073. );
  21074. if (!dataGrow) {
  21075. _optionRestore.yAxis[axisIdx].data.shift();
  21076. _optionBackup.yAxis[axisIdx].data.shift();
  21077. }
  21078. }
  21079. }
  21080. }
  21081. }
  21082. }
  21083. magicOption.legend && (magicOption.legend.selected = _selectedMap);
  21084. // dataZoom同步一下数据
  21085. for (var i = 0, l = _chartList.length; i < l; i++) {
  21086. if (magicOption.addDataAnimation
  21087. && _chartList[i].addDataAnimation
  21088. ) {
  21089. _chartList[i].addDataAnimation(params);
  21090. }
  21091. if (_chartList[i].type
  21092. == ecConfig.COMPONENT_TYPE_DATAZOOM
  21093. ) {
  21094. _chartList[i].silence(true);
  21095. _chartList[i].init(magicOption);
  21096. _chartList[i].silence(false);
  21097. }
  21098. }
  21099. _island.refresh(magicOption);
  21100. _toolbox.refresh(magicOption);
  21101. setTimeout(function(){
  21102. _messageCenter.dispatch(
  21103. ecConfig.EVENT.REFRESH,
  21104. '',
  21105. {option: magicOption}
  21106. );
  21107. }, magicOption.addDataAnimation ? 500 : 0);
  21108. return self;
  21109. }
  21110. /**
  21111. * 获取当前zrender实例,可用于添加额为的shape和深度控制
  21112. */
  21113. function getZrender() {
  21114. return _zr;
  21115. }
  21116. /**
  21117. * 绑定事件
  21118. * @param {Object} eventName 事件名称
  21119. * @param {Object} eventListener 事件响应函数
  21120. */
  21121. function on(eventName, eventListener) {
  21122. _messageCenter.bind(eventName, eventListener);
  21123. return self;
  21124. }
  21125. /**
  21126. * 解除事件绑定
  21127. * @param {Object} eventName 事件名称
  21128. * @param {Object} eventListener 事件响应函数
  21129. */
  21130. function un(eventName, eventListener) {
  21131. _messageCenter.unbind(eventName, eventListener);
  21132. return self;
  21133. }
  21134. /**
  21135. * 显示loading过渡
  21136. * @param {Object} loadingOption
  21137. */
  21138. function showLoading(loadingOption) {
  21139. _toolbox.hideDataView();
  21140. var zrUtil = require('zrender/tool/util');
  21141. loadingOption = loadingOption || {};
  21142. loadingOption.textStyle = loadingOption.textStyle || {};
  21143. var finalTextStyle = zrUtil.merge(
  21144. zrUtil.clone(loadingOption.textStyle),
  21145. ecConfig.textStyle,
  21146. { 'overwrite': false}
  21147. );
  21148. loadingOption.textStyle.textFont = finalTextStyle.fontStyle + ' '
  21149. + finalTextStyle.fontWeight + ' '
  21150. + finalTextStyle.fontSize + 'px '
  21151. + finalTextStyle.fontFamily;
  21152. loadingOption.textStyle.text = loadingOption.text || 'Loading...';
  21153. if (typeof loadingOption.x != 'undefined') {
  21154. loadingOption.textStyle.x = loadingOption.x;
  21155. }
  21156. if (typeof loadingOption.y != 'undefined') {
  21157. loadingOption.textStyle.y = loadingOption.y;
  21158. }
  21159. _zr.showLoading(loadingOption);
  21160. return self;
  21161. }
  21162. /**
  21163. * 隐藏loading过渡
  21164. */
  21165. function hideLoading() {
  21166. _zr.hideLoading();
  21167. return self;
  21168. }
  21169. /**
  21170. * 视图区域大小变化更新,不默认绑定,供使用方按需调用
  21171. */
  21172. function resize() {
  21173. _zr.resize();
  21174. // 先来后到,不能仅刷新自己,也不能在上一个循环中刷新,如坐标系数据改变会影响其他图表的大小
  21175. // 所以安顺序刷新各种图表,图表内部refresh优化无需更新则不更新~
  21176. for (var i = 0, l = _chartList.length; i < l; i++) {
  21177. _chartList[i].resize && _chartList[i].resize();
  21178. }
  21179. _island.resize();
  21180. _toolbox.resize();
  21181. _zr.refresh();
  21182. return self;
  21183. }
  21184. /**
  21185. * 清楚已渲染内容 ,clear后echarts实例可用
  21186. */
  21187. function clear() {
  21188. _zr.clear();
  21189. return self;
  21190. }
  21191. /**
  21192. * 释放,dispose后echarts实例不可用
  21193. */
  21194. function dispose() {
  21195. _island.dispose();
  21196. _toolbox.dispose();
  21197. _disposeChartList();
  21198. _messageCenter.unbind();
  21199. _zr.dispose();
  21200. self = null;
  21201. return;
  21202. }
  21203. // 接口方法暴漏
  21204. self.setOption = setOption;
  21205. self.setSeries = setSeries;
  21206. self.addData = addData;
  21207. self.getZrender = getZrender;
  21208. self.on = on;
  21209. self.un = un;
  21210. self.showLoading = showLoading;
  21211. self.hideLoading = hideLoading;
  21212. self.resize = resize;
  21213. self.refresh = refresh;
  21214. self.restore = restore;
  21215. self.clear = clear;
  21216. self.dispose = dispose;
  21217. }
  21218. return self;
  21219. });
  21220. define('echarts', ['echarts/echarts'], function (main) { return main; });
  21221. /**
  21222. * zrender
  21223. *
  21224. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  21225. *
  21226. * shape类:大规模散点图图形
  21227. * 可配图形属性:
  21228. {
  21229. // 基础属性
  21230. shape : 'symbol', // 必须,shape类标识,需要显式指定
  21231. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  21232. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  21233. invisible : {boolean}, // 默认为false,是否可见
  21234. // 样式属性,默认状态样式样式属性
  21235. style : {
  21236. pointList : {Array}, // 必须,二维数组,二维内容如下
  21237. x : {number}, // 必须,横坐标
  21238. y : {number}, // 必须,纵坐标数组
  21239. size : {number}, // 必须,半宽
  21240. type : {string=}, // 默认为'circle',图形类型
  21241. color : {color}, // 默认为'#000',填充颜色,支持rgba
  21242. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  21243. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  21244. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  21245. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  21246. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  21247. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  21248. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  21249. text : {string}, // 默认为null,附加文本
  21250. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  21251. textPosition : {string}, // 默认为top,附加文本位置。
  21252. // inside | left | right | top | bottom
  21253. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  21254. // start | end | left | right | center
  21255. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  21256. // top | bottom | middle |
  21257. // alphabetic | hanging | ideographic
  21258. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  21259. // 'inside' ? '#fff' : color
  21260. },
  21261. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  21262. highlightStyle : {
  21263. // 同style
  21264. }
  21265. // 交互属性,详见shape.Base
  21266. // 事件属性,详见shape.Base
  21267. }
  21268. 例子:
  21269. {
  21270. shape : 'symbol',
  21271. id : '123456',
  21272. zlevel : 1,
  21273. style : {
  21274. x : 200,
  21275. y : [100,123,90,125],
  21276. width : 150,
  21277. color : '#eee',
  21278. text : 'Baidu'
  21279. },
  21280. myName : 'kener', // 可自带任何有效自定义属性
  21281. clickable : true,
  21282. onClick : function(eventPacket) {
  21283. alert(eventPacket.target.myName);
  21284. }
  21285. }
  21286. */
  21287. define(
  21288. 'echarts/util/shape/symbol',['require','zrender/tool/color','zrender/shape','zrender/shape/base','zrender/shape'],function(require) {
  21289. function Symbol() {
  21290. this.type = 'symbol';
  21291. }
  21292. Symbol.prototype = {
  21293. /*
  21294. * pointlist=[
  21295. * 0 x,
  21296. * 1 y,
  21297. * 2 图形大小
  21298. * 3 图形类型
  21299. * 4 数据index
  21300. * 5 名称
  21301. * ]
  21302. */
  21303. _buildSinglePoint : function(ctx, singlePoint) {
  21304. switch (singlePoint[3]) {
  21305. case 'circle' :
  21306. case 'emptyCircle' :
  21307. ctx.arc(
  21308. singlePoint[0],
  21309. singlePoint[1],
  21310. singlePoint[2],
  21311. 0,
  21312. Math.PI * 2,
  21313. true
  21314. );
  21315. break;
  21316. case 'rectangle' :
  21317. case 'emptyRectangle' :
  21318. ctx.rect(
  21319. singlePoint[0] - singlePoint[2],
  21320. singlePoint[1] - singlePoint[2],
  21321. singlePoint[2] * 2,
  21322. singlePoint[2] * 2
  21323. );
  21324. break;
  21325. case 'triangle' :
  21326. case 'emptyTriangle' :
  21327. itemShape = {
  21328. shape : 'polygon',
  21329. style : {
  21330. pointList : [
  21331. [x, y - symbolSize],
  21332. [x + symbolSize, y + symbolSize],
  21333. [x - symbolSize, y + symbolSize]
  21334. ],
  21335. brushType : symbolType == 'triangle'
  21336. ? 'fill' : 'stroke'
  21337. }
  21338. };
  21339. break;
  21340. case 'diamond' :
  21341. case 'emptyDiamond' :
  21342. itemShape = {
  21343. shape : 'polygon',
  21344. style : {
  21345. pointList : [
  21346. [x, y - symbolSize],
  21347. [x + symbolSize, y],
  21348. [x, y + symbolSize],
  21349. [x - symbolSize, y]
  21350. ],
  21351. brushType : symbolType == 'diamond'
  21352. ? 'fill' : 'stroke'
  21353. }
  21354. };
  21355. break;
  21356. default:
  21357. itemShape = {
  21358. shape : 'circle',
  21359. style : {
  21360. x : x,
  21361. y : y,
  21362. r : symbolSize,
  21363. brushType : 'fill'
  21364. }
  21365. };
  21366. break;
  21367. }
  21368. },
  21369. /**
  21370. * 创建矩形路径
  21371. * @param {Context2D} ctx Canvas 2D上下文
  21372. * @param {Object} style 样式
  21373. */
  21374. buildPath : function(ctx, style) {
  21375. var pointList = style.pointList;
  21376. var rect = this.getRect(style);
  21377. var ratio = window.devicePixelRatio || 1;
  21378. // console.log(rect)
  21379. // var ti = new Date();
  21380. var pixels = ctx.getImageData(
  21381. rect.x * ratio, rect.y * ratio,
  21382. rect.width * ratio, rect.height * ratio
  21383. );
  21384. var data = pixels.data;
  21385. var idx;
  21386. var zrColor = require('zrender/tool/color');
  21387. var color = zrColor.toArray(style.color);
  21388. var r = color[0];
  21389. var g = color[1];
  21390. var b = color[2];
  21391. var width = rect.width;
  21392. for (var i = 1, l = pointList.length; i < l; i++) {
  21393. idx = ( (pointList[i][0] - rect.x) * ratio
  21394. + (pointList[i][1]- rect.y) * width * ratio * ratio
  21395. ) * 4;
  21396. data[idx] = r;
  21397. data[idx + 1] = g;
  21398. data[idx + 2] = b;
  21399. data[idx + 3] = 255;
  21400. }
  21401. ctx.putImageData(pixels, rect.x * ratio, rect.y * ratio);
  21402. // console.log(new Date() - ti);
  21403. return;
  21404. },
  21405. /**
  21406. * 返回矩形区域,用于局部刷新和文字定位
  21407. * @param {Object} style
  21408. */
  21409. getRect : function(style) {
  21410. var shape = require('zrender/shape');
  21411. return shape.get('polygon').getRect(style);
  21412. },
  21413. isCover : function() {
  21414. return false;
  21415. }
  21416. };
  21417. require('zrender/shape/base').derive(Symbol);
  21418. require('zrender/shape').define('symbol', new Symbol());
  21419. return Symbol;
  21420. }
  21421. );
  21422. /**
  21423. * echarts图表类:散点图
  21424. *
  21425. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  21426. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  21427. *
  21428. */
  21429. define('echarts/chart/scatter',['require','../component/base','./calculableBase','../config','../util/ecData','zrender/tool/color','../util/shape/symbol','../chart'],function(require) {
  21430. /**
  21431. * 构造函数
  21432. * @param {Object} messageCenter echart消息中心
  21433. * @param {ZRender} zr zrender实例
  21434. * @param {Object} series 数据
  21435. * @param {Object} component 组件
  21436. */
  21437. function Scatter(messageCenter, zr, option, component){
  21438. // 基类装饰
  21439. var ComponentBase = require('../component/base');
  21440. ComponentBase.call(this, zr);
  21441. // 可计算特性装饰
  21442. var CalculableBase = require('./calculableBase');
  21443. CalculableBase.call(this, zr, option);
  21444. var ecConfig = require('../config');
  21445. var ecData = require('../util/ecData');
  21446. var zrColor = require('zrender/tool/color');
  21447. var self = this;
  21448. self.type = ecConfig.CHART_TYPE_SCATTER;
  21449. var series; // 共享数据源,不要修改跟自己无关的项
  21450. var _zlevelBase = self.getZlevelBase();
  21451. var _sIndex2ColorMap = {}; // series默认颜色索引,seriesIndex索引到color
  21452. var _symbol = [
  21453. 'circle', 'rectangle', 'triangle', 'diamond',
  21454. 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
  21455. ];
  21456. var _sIndex2ShapeMap = {}; // series图形类型,seriesIndex索引到_symbol
  21457. function _buildShape() {
  21458. self.selectedMap = {};
  21459. var legend = component.legend;
  21460. var seriesArray = [];
  21461. var serie; // 临时映射变量
  21462. var serieName; // 临时映射变量
  21463. var iconShape;
  21464. var iconType;
  21465. for (var i = 0, l = series.length; i < l; i++) {
  21466. serie = series[i];
  21467. serieName = serie.name;
  21468. if (serie.type == ecConfig.CHART_TYPE_SCATTER) {
  21469. series[i] = self.reformOption(series[i]);
  21470. _sIndex2ShapeMap[i] = self.deepQuery([serie], 'symbol')
  21471. || _symbol[i % _symbol.length];
  21472. if (legend){
  21473. self.selectedMap[serieName] =
  21474. legend.isSelected(serieName);
  21475. _sIndex2ColorMap[i] =
  21476. zrColor.alpha(legend.getColor(serieName),0.5);
  21477. iconShape = legend.getItemShape(serieName);
  21478. if (iconShape) {
  21479. // 回调legend,换一个更形象的icon
  21480. iconShape.shape = 'icon';
  21481. var iconType = _sIndex2ShapeMap[i];
  21482. iconShape.style.brushType = iconType.match('empty')
  21483. ? 'stroke' : 'both';
  21484. iconType = iconType.replace('empty', '')
  21485. .toLowerCase();
  21486. if (iconType.match('star')) {
  21487. iconShape.style.n =
  21488. (iconType.replace('star','') - 0) || 5;
  21489. iconType = 'star';
  21490. }
  21491. iconShape.style.iconType = iconType;
  21492. legend.setItemShape(serieName, iconShape);
  21493. }
  21494. } else {
  21495. self.selectedMap[serieName] = true;
  21496. _sIndex2ColorMap[i] = zr.getColor(i);
  21497. }
  21498. if (self.selectedMap[serieName]) {
  21499. seriesArray.push(i);
  21500. }
  21501. }
  21502. }
  21503. if (seriesArray.length === 0) {
  21504. return;
  21505. }
  21506. _buildSeries(seriesArray);
  21507. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  21508. self.shapeList[i].id = zr.newShapeId(self.type);
  21509. zr.addShape(self.shapeList[i]);
  21510. }
  21511. }
  21512. /**
  21513. * 构建类目轴为水平方向的散点图系列
  21514. */
  21515. function _buildSeries(seriesArray) {
  21516. var seriesIndex;
  21517. var serie;
  21518. var data;
  21519. var value;
  21520. var xAxis;
  21521. var yAxis;
  21522. var pointList = {};
  21523. var x;
  21524. var y;
  21525. var symbolSize;
  21526. for (var j = 0, k = seriesArray.length; j < k; j++) {
  21527. seriesIndex = seriesArray[j];
  21528. serie = series[seriesIndex];
  21529. if (serie.data.length === 0) {
  21530. continue;
  21531. }
  21532. xAxis = component.xAxis.getAxis(serie.xAxisIndex || 0);
  21533. yAxis = component.yAxis.getAxis(serie.yAxisIndex || 0);
  21534. symbolSize = self.deepQuery([serie], 'symbolSize');
  21535. pointList[seriesIndex] = [];
  21536. for (var i = 0, l = serie.data.length; i < l; i++) {
  21537. data = serie.data[i];
  21538. value = typeof data != 'undefined'
  21539. ? (typeof data.value != 'undefined'
  21540. ? data.value
  21541. : data)
  21542. : '-';
  21543. if (value == '-' || value.length < 2) {
  21544. // 数据格式不符
  21545. continue;
  21546. }
  21547. x = xAxis.getCoord(value[0]);
  21548. y = yAxis.getCoord(value[1]);
  21549. pointList[seriesIndex].push([
  21550. x, // 横坐标
  21551. y, // 纵坐标
  21552. (typeof symbolSize == 'function'
  21553. ? symbolSize(value)
  21554. : symbolSize), // 图形大小
  21555. _sIndex2ShapeMap[seriesIndex], // 图形类型
  21556. i, // 数据index
  21557. data.name || '' // 名称
  21558. ]);
  21559. }
  21560. }
  21561. // console.log(pointList)
  21562. _buildPointList(pointList);
  21563. }
  21564. /**
  21565. * 生成折线和折线上的拐点
  21566. */
  21567. function _buildPointList(pointList) {
  21568. var dataRange = component.dataRange;
  21569. var rangColor; // 更高优先级
  21570. var nColor; // normal
  21571. var nLineWidth;
  21572. var eColor; // emphasis
  21573. var eLineWidth;
  21574. var serie;
  21575. var queryTarget;
  21576. var data;
  21577. var seriesPL;
  21578. var singlePoint;
  21579. var symbolRotate;
  21580. for (var seriesIndex in pointList) {
  21581. serie = series[seriesIndex];
  21582. seriesPL = pointList[seriesIndex];
  21583. // 多级控制
  21584. queryTarget = [serie];
  21585. nColor = self.deepQuery(
  21586. queryTarget, 'itemStyle.normal.color'
  21587. ) || _sIndex2ColorMap[seriesIndex];
  21588. nLineWidth = self.deepQuery(
  21589. queryTarget, 'itemStyle.normal.lineStyle.width'
  21590. );
  21591. eColor = self.deepQuery(
  21592. queryTarget, 'itemStyle.emphasis.color'
  21593. );
  21594. eLineWidth = self.deepQuery(
  21595. queryTarget, 'itemStyle.emphasis.lineStyle.width'
  21596. );
  21597. symbolRotate = self.deepQuery(
  21598. queryTarget, 'symbolRotate'
  21599. );
  21600. if (serie.large && serie.data.length > serie.largeThreshold) {
  21601. self.shapeList.push(_getLargeSymbol(
  21602. seriesPL, nColor, eColor
  21603. ));
  21604. continue;
  21605. }
  21606. /*
  21607. * pointlist=[
  21608. * 0 x,
  21609. * 1 y,
  21610. * 2 图形大小
  21611. * 3 图形类型
  21612. * 4 数据index
  21613. * 5 名称
  21614. * ]
  21615. */
  21616. for (var i = 0, l = seriesPL.length; i < l; i++) {
  21617. singlePoint = seriesPL[i];
  21618. data = serie.data[singlePoint[4]];
  21619. if (dataRange) {
  21620. if (isNaN(data[2])) {
  21621. continue;
  21622. }
  21623. rangColor = dataRange.getColor(data[2]);
  21624. if (!rangColor) {
  21625. continue;
  21626. }
  21627. }
  21628. else {
  21629. rangColor = nColor;
  21630. }
  21631. queryTarget = [data];
  21632. self.shapeList.push(_getSymbol(
  21633. seriesIndex, // seriesIndex
  21634. singlePoint[4], // dataIndex
  21635. singlePoint[5], // name
  21636. singlePoint[0], // x
  21637. singlePoint[1], // y
  21638. // 大小
  21639. self.deepQuery(queryTarget, 'symbolSize')
  21640. || singlePoint[2],
  21641. // 方向
  21642. self.deepQuery(queryTarget, 'symbolRotate')
  21643. || symbolRotate,
  21644. // 类型
  21645. self.deepQuery(queryTarget, 'symbol')
  21646. || singlePoint[3],
  21647. // 填充颜色
  21648. self.deepQuery(queryTarget, 'itemStyle.normal.color')
  21649. || rangColor,
  21650. // 线宽
  21651. self.deepQuery(
  21652. queryTarget, 'itemStyle.normal.lineStyle.width'
  21653. )|| nLineWidth,
  21654. //------------高亮
  21655. // 填充颜色
  21656. self.deepQuery(
  21657. queryTarget, 'itemStyle.emphasis.color'
  21658. ) || eColor || nColor,
  21659. // 线宽
  21660. self.deepQuery(
  21661. queryTarget, 'itemStyle.emphasis.lineStyle.width'
  21662. )|| eLineWidth || nLineWidth
  21663. ));
  21664. }
  21665. }
  21666. // console.log(self.shapeList)
  21667. }
  21668. /**
  21669. * 生成散点图上的图形
  21670. */
  21671. function _getSymbol(
  21672. seriesIndex, dataIndex, name,
  21673. x, y, symbolSize, symbolRotate, symbol,
  21674. nColor, nLineWidth, eColor, eLineWidth
  21675. ) {
  21676. var itemShape = {
  21677. shape : 'icon',
  21678. zlevel : _zlevelBase,
  21679. style : {
  21680. iconType : symbol.replace('empty', '').toLowerCase(),
  21681. x : x - symbolSize,
  21682. y : y - symbolSize,
  21683. width : symbolSize * 2,
  21684. height : symbolSize * 2,
  21685. brushType : symbol.match('empty') ? 'stroke' : 'fill',
  21686. color : nColor,
  21687. strokeColor : nColor,
  21688. lineWidth: nLineWidth
  21689. },
  21690. highlightStyle : {
  21691. color : eColor,
  21692. strokeColor : eColor,
  21693. lineWidth : eLineWidth
  21694. },
  21695. clickable : true
  21696. };
  21697. if (typeof symbolRotate != 'undefined') {
  21698. itemShape.rotation = [
  21699. symbolRotate * Math.PI / 180, x, y
  21700. ];
  21701. }
  21702. if (symbol.match('star')) {
  21703. itemShape.style.iconType = 'star';
  21704. itemShape.style.n =
  21705. (symbol.replace('empty', '').replace('star','') - 0) || 5;
  21706. }
  21707. if (symbol == 'none') {
  21708. itemShape.invisible = true;
  21709. itemShape.hoverable = false;
  21710. }
  21711. /*
  21712. if (self.deepQuery([data, serie, option], 'calculable')) {
  21713. self.setCalculable(itemShape);
  21714. itemShape.draggable = true;
  21715. }
  21716. */
  21717. itemShape = self.addLabel(
  21718. itemShape,
  21719. series[seriesIndex],
  21720. series[seriesIndex].data[dataIndex],
  21721. name,
  21722. 'vertical'
  21723. );
  21724. ecData.pack(
  21725. itemShape,
  21726. series[seriesIndex], seriesIndex,
  21727. series[seriesIndex].data[dataIndex], dataIndex,
  21728. name
  21729. );
  21730. // for animation
  21731. itemShape._x = x;
  21732. itemShape._y = y;
  21733. return itemShape;
  21734. }
  21735. function _getLargeSymbol(symbolList, nColor, eColor) {
  21736. return {
  21737. shape : 'symbol',
  21738. zlevel : _zlevelBase,
  21739. hoverable: false,
  21740. style : {
  21741. pointList : symbolList,
  21742. color : nColor,
  21743. strokeColor : nColor
  21744. },
  21745. highlightStyle : {
  21746. color : eColor,
  21747. strokeColor : eColor
  21748. }
  21749. };
  21750. }
  21751. /**
  21752. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  21753. * @param {Object} newZr
  21754. * @param {Object} newSeries
  21755. * @param {Object} newComponent
  21756. */
  21757. function init(newOption, newComponent) {
  21758. component = newComponent;
  21759. refresh(newOption);
  21760. }
  21761. /**
  21762. * 刷新
  21763. */
  21764. function refresh(newOption) {
  21765. if (newOption) {
  21766. option = newOption;
  21767. series = option.series;
  21768. }
  21769. self.clear();
  21770. _buildShape();
  21771. }
  21772. /**
  21773. * 值域响应
  21774. * @param {Object} param
  21775. * @param {Object} status
  21776. */
  21777. function ondataRange(param, status) {
  21778. if (component.dataRange) {
  21779. refresh();
  21780. status.needRefresh = true;
  21781. }
  21782. return;
  21783. }
  21784. /**
  21785. * 动画设定
  21786. */
  21787. function animation() {
  21788. var duration = self.deepQuery([option], 'animationDuration');
  21789. var easing = self.deepQuery([option], 'animationEasing');
  21790. var x;
  21791. var y;
  21792. var serie;
  21793. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  21794. x = self.shapeList[i]._x || 0;
  21795. y = self.shapeList[i]._y || 0;
  21796. zr.modShape(self.shapeList[i].id, {
  21797. scale : [0, 0, x, y]
  21798. });
  21799. zr.animate(self.shapeList[i].id, '')
  21800. .when(
  21801. (self.deepQuery([serie],'animationDuration')
  21802. || duration),
  21803. {scale : [1, 1, x, y]}
  21804. )
  21805. .start(
  21806. self.deepQuery([serie], 'animationEasing') || easing
  21807. );
  21808. }
  21809. }
  21810. self.init = init;
  21811. self.refresh = refresh;
  21812. self.ondataRange = ondataRange;
  21813. self.animation = animation;
  21814. init(option, component);
  21815. }
  21816. // 动态扩展zrender shape:symbol
  21817. require('../util/shape/symbol');
  21818. // 自注册
  21819. require('../chart').define('scatter', Scatter);
  21820. return Scatter;
  21821. });
  21822. /**
  21823. * zrender
  21824. *
  21825. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  21826. *
  21827. * shape类:蜡烛
  21828. * 可配图形属性:
  21829. {
  21830. // 基础属性
  21831. shape : 'candle', // 必须,shape类标识,需要显式指定
  21832. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  21833. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  21834. invisible : {boolean}, // 默认为false,是否可见
  21835. // 样式属性,默认状态样式样式属性
  21836. style : {
  21837. x : {number}, // 必须,横坐标
  21838. y : {Array}, // 必须,纵坐标数组
  21839. width : {number}, // 必须,宽度
  21840. brushType : {string}, // 默认为fill,绘画方式
  21841. // fill(填充) | stroke(描边) | both(填充+描边)
  21842. color : {color}, // 默认为'#000',填充颜色,支持rgba
  21843. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  21844. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  21845. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  21846. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  21847. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  21848. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  21849. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  21850. text : {string}, // 默认为null,附加文本
  21851. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  21852. textPosition : {string}, // 默认为top,附加文本位置。
  21853. // inside | left | right | top | bottom
  21854. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  21855. // start | end | left | right | center
  21856. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  21857. // top | bottom | middle |
  21858. // alphabetic | hanging | ideographic
  21859. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  21860. // 'inside' ? '#fff' : color
  21861. },
  21862. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  21863. highlightStyle : {
  21864. // 同style
  21865. }
  21866. // 交互属性,详见shape.Base
  21867. // 事件属性,详见shape.Base
  21868. }
  21869. 例子:
  21870. {
  21871. shape : 'candle',
  21872. id : '123456',
  21873. zlevel : 1,
  21874. style : {
  21875. x : 200,
  21876. y : [100,123,90,125],
  21877. width : 150,
  21878. color : '#eee',
  21879. text : 'Baidu'
  21880. },
  21881. myName : 'kener', // 可自带任何有效自定义属性
  21882. clickable : true,
  21883. onClick : function(eventPacket) {
  21884. alert(eventPacket.target.myName);
  21885. }
  21886. }
  21887. */
  21888. define(
  21889. 'echarts/util/shape/candle',['require','zrender/tool/matrix','zrender/shape/base','zrender/shape'],function(require) {
  21890. var matrix = require('zrender/tool/matrix');
  21891. function Candle() {
  21892. this.type = 'candle';
  21893. }
  21894. Candle.prototype = {
  21895. _numberOrder : function(a, b) {
  21896. return b - a;
  21897. },
  21898. /**
  21899. * 创建矩形路径
  21900. * @param {Context2D} ctx Canvas 2D上下文
  21901. * @param {Object} style 样式
  21902. */
  21903. buildPath : function(ctx, style) {
  21904. style.y.sort(this._numberOrder);
  21905. ctx.moveTo(style.x, style.y[3]);
  21906. ctx.lineTo(style.x, style.y[2]);
  21907. ctx.moveTo(style.x - style.width / 2, style.y[2]);
  21908. ctx.rect(
  21909. style.x - style.width / 2,
  21910. style.y[2],
  21911. style.width,
  21912. style.y[1] - style.y[2]
  21913. );
  21914. ctx.moveTo(style.x, style.y[1]);
  21915. ctx.lineTo(style.x, style.y[0]);
  21916. return;
  21917. },
  21918. /**
  21919. * 返回矩形区域,用于局部刷新和文字定位
  21920. * @param {Object} style
  21921. */
  21922. getRect : function(style) {
  21923. var lineWidth;
  21924. if (style.brushType == 'stroke' || style.brushType == 'fill') {
  21925. lineWidth = style.lineWidth || 1;
  21926. }
  21927. else {
  21928. lineWidth = 0;
  21929. }
  21930. return {
  21931. x : Math.round(style.x - style.width / 2 - lineWidth / 2),
  21932. y : Math.round(style.y[3] - lineWidth / 2),
  21933. width : style.width + lineWidth,
  21934. height : style.y[0] - style.y[3] + lineWidth
  21935. };
  21936. },
  21937. isCover : function(e, x, y) {
  21938. //对鼠标的坐标也做相同的变换
  21939. if(e.__needTransform && e._transform){
  21940. var inverseMatrix = [];
  21941. matrix.invert(inverseMatrix, e._transform);
  21942. var originPos = [x, y];
  21943. matrix.mulVector(originPos, inverseMatrix, [x, y, 1]);
  21944. if (x == originPos[0] && y == originPos[1]) {
  21945. // 避免外部修改导致的__needTransform不准确
  21946. if (Math.abs(e.rotation[0]) > 0.0001
  21947. || Math.abs(e.position[0]) > 0.0001
  21948. || Math.abs(e.position[1]) > 0.0001
  21949. || Math.abs(e.scale[0] - 1) > 0.0001
  21950. || Math.abs(e.scale[1] - 1) > 0.0001
  21951. ) {
  21952. e.__needTransform = true;
  21953. } else {
  21954. e.__needTransform = false;
  21955. }
  21956. }
  21957. x = originPos[0];
  21958. y = originPos[1];
  21959. }
  21960. // 快速预判并保留判断矩形
  21961. var rect;
  21962. if (e.style.__rect) {
  21963. rect = e.style.__rect;
  21964. }
  21965. else {
  21966. rect = this.getRect(e.style);
  21967. rect = [
  21968. rect.x,
  21969. rect.x + rect.width,
  21970. rect.y,
  21971. rect.y + rect.height
  21972. ];
  21973. e.style.__rect = rect;
  21974. }
  21975. if (x >= rect[0]
  21976. && x <= rect[1]
  21977. && y >= rect[2]
  21978. && y <= rect[3]
  21979. ) {
  21980. // 矩形内
  21981. return true;
  21982. }
  21983. else {
  21984. return false;
  21985. }
  21986. }
  21987. };
  21988. require('zrender/shape/base').derive(Candle);
  21989. require('zrender/shape').define('candle', new Candle());
  21990. return Candle;
  21991. }
  21992. );
  21993. /**
  21994. * echarts图表类:K线图
  21995. *
  21996. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  21997. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  21998. *
  21999. */
  22000. define('echarts/chart/k',['require','../component/base','./calculableBase','../config','../util/ecData','../util/shape/candle','../chart'],function(require) {
  22001. /**
  22002. * 构造函数
  22003. * @param {Object} messageCenter echart消息中心
  22004. * @param {ZRender} zr zrender实例
  22005. * @param {Object} series 数据
  22006. * @param {Object} component 组件
  22007. */
  22008. function K(messageCenter, zr, option, component){
  22009. // 基类装饰
  22010. var ComponentBase = require('../component/base');
  22011. ComponentBase.call(this, zr);
  22012. // 可计算特性装饰
  22013. var CalculableBase = require('./calculableBase');
  22014. CalculableBase.call(this, zr, option);
  22015. var ecConfig = require('../config');
  22016. var ecData = require('../util/ecData');
  22017. var self = this;
  22018. self.type = ecConfig.CHART_TYPE_K;
  22019. var series; // 共享数据源,不要修改跟自己无关的项
  22020. var _zlevelBase = self.getZlevelBase();
  22021. function _buildShape() {
  22022. self.selectedMap = {};
  22023. // 水平垂直双向series索引 ,position索引到seriesIndex
  22024. var _position2sIndexMap = {
  22025. top : [],
  22026. bottom : []
  22027. };
  22028. var xAxis;
  22029. for (var i = 0, l = series.length; i < l; i++) {
  22030. if (series[i].type == ecConfig.CHART_TYPE_K) {
  22031. series[i] = self.reformOption(series[i]);
  22032. xAxis = component.xAxis.getAxis(series[i].xAxisIndex);
  22033. if (xAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
  22034. ) {
  22035. _position2sIndexMap[xAxis.getPosition()].push(i);
  22036. }
  22037. }
  22038. }
  22039. //console.log(_position2sIndexMap)
  22040. for (var position in _position2sIndexMap) {
  22041. if (_position2sIndexMap[position].length > 0) {
  22042. _buildSinglePosition(
  22043. position, _position2sIndexMap[position]
  22044. );
  22045. }
  22046. }
  22047. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  22048. self.shapeList[i].id = zr.newShapeId(self.type);
  22049. zr.addShape(self.shapeList[i]);
  22050. }
  22051. }
  22052. /**
  22053. * 构建单个方向上的K线图
  22054. *
  22055. * @param {number} seriesIndex 系列索引
  22056. */
  22057. function _buildSinglePosition(position, seriesArray) {
  22058. var mapData = _mapData(seriesArray);
  22059. var locationMap = mapData.locationMap;
  22060. var maxDataLength = mapData.maxDataLength;
  22061. if (maxDataLength === 0 || locationMap.length === 0) {
  22062. return;
  22063. }
  22064. _buildHorizontal(maxDataLength, locationMap);
  22065. }
  22066. /**
  22067. * 数据整形
  22068. * 数组位置映射到系列索引
  22069. */
  22070. function _mapData(seriesArray) {
  22071. var serie; // 临时映射变量
  22072. var serieName; // 临时映射变量
  22073. var legend = component.legend;
  22074. var locationMap = []; // 需要返回的东西:数组位置映射到系列索引
  22075. var maxDataLength = 0; // 需要返回的东西:最大数据长度
  22076. // 计算需要显示的个数和分配位置并记在下面这个结构里
  22077. for (var i = 0, l = seriesArray.length; i < l; i++) {
  22078. serie = series[seriesArray[i]];
  22079. serieName = serie.name;
  22080. if (legend){
  22081. self.selectedMap[serieName] = legend.isSelected(serieName);
  22082. } else {
  22083. self.selectedMap[serieName] = true;
  22084. }
  22085. if (self.selectedMap[serieName]) {
  22086. locationMap.push(seriesArray[i]);
  22087. }
  22088. // 兼职帮算一下最大长度
  22089. maxDataLength = Math.max(maxDataLength, serie.data.length);
  22090. }
  22091. return {
  22092. locationMap : locationMap,
  22093. maxDataLength : maxDataLength
  22094. };
  22095. }
  22096. /**
  22097. * 构建类目轴为水平方向的K线图系列
  22098. */
  22099. function _buildHorizontal(maxDataLength, locationMap) {
  22100. // 确定类目轴和数值轴,同一方向随便找一个即可
  22101. var seriesIndex;
  22102. var serie;
  22103. var xAxisIndex;
  22104. var categoryAxis;
  22105. var yAxisIndex; // 数值轴各异
  22106. var valueAxis; // 数值轴各异
  22107. var pointList = {};
  22108. var candleWidth;
  22109. var data;
  22110. var value;
  22111. var barMaxWidth;
  22112. for (var j = 0, k = locationMap.length; j < k; j++) {
  22113. seriesIndex = locationMap[j];
  22114. serie = series[seriesIndex];
  22115. xAxisIndex = serie.xAxisIndex || 0;
  22116. categoryAxis = component.xAxis.getAxis(xAxisIndex);
  22117. candleWidth = serie.barWidth
  22118. || Math.floor(categoryAxis.getGap() / 2);
  22119. barMaxWidth = serie.barMaxWidth;
  22120. if (barMaxWidth && barMaxWidth < candleWidth) {
  22121. candleWidth = barMaxWidth;
  22122. }
  22123. yAxisIndex = serie.yAxisIndex || 0;
  22124. valueAxis = component.yAxis.getAxis(yAxisIndex);
  22125. pointList[seriesIndex] = [];
  22126. for (var i = 0, l = maxDataLength; i < l; i++) {
  22127. if (typeof categoryAxis.getNameByIndex(i)
  22128. == 'undefined'
  22129. ) {
  22130. // 系列数据超出类目轴长度
  22131. break;
  22132. }
  22133. data = serie.data[i];
  22134. value = typeof data != 'undefined'
  22135. ? (typeof data.value != 'undefined'
  22136. ? data.value
  22137. : data)
  22138. : '-';
  22139. if (value == '-' || value.length != 4) {
  22140. // 数据格式不符
  22141. continue;
  22142. }
  22143. pointList[seriesIndex].push([
  22144. categoryAxis.getCoordByIndex(i), // 横坐标
  22145. candleWidth,
  22146. valueAxis.getCoord(value[0]), // 纵坐标:开盘
  22147. valueAxis.getCoord(value[1]), // 纵坐标:收盘
  22148. valueAxis.getCoord(value[2]), // 纵坐标:最低
  22149. valueAxis.getCoord(value[3]), // 纵坐标:最高
  22150. i, // 数据index
  22151. categoryAxis.getNameByIndex(i) // 类目名称
  22152. ]);
  22153. }
  22154. }
  22155. // console.log(pointList)
  22156. _buildKLine(pointList);
  22157. }
  22158. /**
  22159. * 生成K线
  22160. */
  22161. function _buildKLine(pointList) {
  22162. // normal:
  22163. var nLineWidth;
  22164. var nLineColor;
  22165. var nLineColor0; // 阴线
  22166. var nColor;
  22167. var nColor0; // 阴线
  22168. // emphasis:
  22169. var eLineWidth;
  22170. var eLineColor;
  22171. var eLineColor0;
  22172. var eColor;
  22173. var eColor0;
  22174. var serie;
  22175. var queryTarget;
  22176. var data;
  22177. var seriesPL;
  22178. var singlePoint;
  22179. var candleType;
  22180. for (var seriesIndex = 0, len = series.length;
  22181. seriesIndex < len;
  22182. seriesIndex++
  22183. ) {
  22184. serie = series[seriesIndex];
  22185. seriesPL = pointList[seriesIndex];
  22186. if (serie.type == ecConfig.CHART_TYPE_K
  22187. && typeof seriesPL != 'undefined'
  22188. ) {
  22189. // 多级控制
  22190. queryTarget = [serie];
  22191. nLineWidth = self.deepQuery(
  22192. queryTarget, 'itemStyle.normal.lineStyle.width'
  22193. );
  22194. nLineColor = self.deepQuery(
  22195. queryTarget, 'itemStyle.normal.lineStyle.color'
  22196. );
  22197. nLineColor0 = self.deepQuery(
  22198. queryTarget, 'itemStyle.normal.lineStyle.color0'
  22199. );
  22200. nColor = self.deepQuery(
  22201. queryTarget, 'itemStyle.normal.color'
  22202. );
  22203. nColor0 = self.deepQuery(
  22204. queryTarget, 'itemStyle.normal.color0'
  22205. );
  22206. eLineWidth = self.deepQuery(
  22207. queryTarget, 'itemStyle.emphasis.lineStyle.width'
  22208. );
  22209. eLineColor = self.deepQuery(
  22210. queryTarget, 'itemStyle.emphasis.lineStyle.color'
  22211. );
  22212. eLineColor0 = self.deepQuery(
  22213. queryTarget, 'itemStyle.emphasis.lineStyle.color0'
  22214. );
  22215. eColor = self.deepQuery(
  22216. queryTarget, 'itemStyle.emphasis.color'
  22217. );
  22218. eColor0 = self.deepQuery(
  22219. queryTarget, 'itemStyle.emphasis.color0'
  22220. );
  22221. /*
  22222. * pointlist=[
  22223. * 0 x,
  22224. * 1 width,
  22225. * 2 y0,
  22226. * 3 y1,
  22227. * 4 y2,
  22228. * 5 y3,
  22229. * 6 dataIndex,
  22230. * 7 categoryName
  22231. * ]
  22232. */
  22233. for (var i = 0, l = seriesPL.length; i < l; i++) {
  22234. singlePoint = seriesPL[i];
  22235. data = serie.data[singlePoint[6]];
  22236. queryTarget = [data];
  22237. candleType = singlePoint[3] < singlePoint[2];
  22238. self.shapeList.push(_getCandle(
  22239. seriesIndex, // seriesIndex
  22240. singlePoint[6], // dataIndex
  22241. singlePoint[7], // name
  22242. singlePoint[0], // x
  22243. singlePoint[1], // width
  22244. singlePoint[2], // y开盘
  22245. singlePoint[3], // y收盘
  22246. singlePoint[4], // y最低
  22247. singlePoint[5], // y最高
  22248. // 填充颜色
  22249. candleType
  22250. ? (self.deepQuery( // 阳
  22251. queryTarget, 'itemStyle.normal.color'
  22252. ) || nColor)
  22253. : (self.deepQuery( // 阴
  22254. queryTarget, 'itemStyle.normal.color0'
  22255. ) || nColor0),
  22256. // 线宽
  22257. self.deepQuery(
  22258. queryTarget, 'itemStyle.normal.lineStyle.width'
  22259. ) || nLineWidth,
  22260. // 线色
  22261. candleType
  22262. ? (self.deepQuery( // 阳
  22263. queryTarget,
  22264. 'itemStyle.normal.lineStyle.color'
  22265. ) || nLineColor)
  22266. : (self.deepQuery( // 阴
  22267. queryTarget,
  22268. 'itemStyle.normal.lineStyle.color0'
  22269. ) || nLineColor0),
  22270. //------------高亮
  22271. // 填充颜色
  22272. candleType
  22273. ? (self.deepQuery( // 阳
  22274. queryTarget, 'itemStyle.emphasis.color'
  22275. ) || eColor || nColor)
  22276. : (self.deepQuery( // 阴
  22277. queryTarget, 'itemStyle.emphasis.color0'
  22278. ) || eColor0 || nColor0),
  22279. // 线宽
  22280. self.deepQuery(
  22281. queryTarget, 'itemStyle.emphasis.lineStyle.width'
  22282. ) || eLineWidth || nLineWidth,
  22283. // 线色
  22284. candleType
  22285. ? (self.deepQuery( // 阳
  22286. queryTarget,
  22287. 'itemStyle.emphasis.lineStyle.color'
  22288. ) || eLineColor || nLineColor)
  22289. : (self.deepQuery( // 阴
  22290. queryTarget,
  22291. 'itemStyle.emphasis.lineStyle.color0'
  22292. ) || eLineColor0 || nLineColor0)
  22293. ));
  22294. }
  22295. }
  22296. }
  22297. // console.log(self.shapeList)
  22298. }
  22299. /**
  22300. * 生成K线图上的图形
  22301. */
  22302. function _getCandle(
  22303. seriesIndex, dataIndex, name,
  22304. x, width, y0, y1, y2, y3,
  22305. nColor, nLinewidth, nLineColor,
  22306. eColor, eLinewidth, eLineColor
  22307. ) {
  22308. var itemShape = {
  22309. shape : 'candle',
  22310. zlevel : _zlevelBase,
  22311. clickable: true,
  22312. style : {
  22313. x : x,
  22314. y : [y0, y1, y2, y3],
  22315. width : width,
  22316. color : nColor,
  22317. strokeColor : nLineColor,
  22318. lineWidth : nLinewidth,
  22319. brushType : 'both'
  22320. },
  22321. highlightStyle : {
  22322. color : eColor,
  22323. strokeColor : eLineColor,
  22324. lineWidth : eLinewidth
  22325. },
  22326. _seriesIndex: seriesIndex
  22327. };
  22328. ecData.pack(
  22329. itemShape,
  22330. series[seriesIndex], seriesIndex,
  22331. series[seriesIndex].data[dataIndex], dataIndex,
  22332. name
  22333. );
  22334. return itemShape;
  22335. }
  22336. /**
  22337. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  22338. * @param {Object} newSeries
  22339. * @param {Object} newComponent
  22340. */
  22341. function init(newOption, newComponent) {
  22342. component = newComponent;
  22343. refresh(newOption);
  22344. }
  22345. /**
  22346. * 刷新
  22347. */
  22348. function refresh(newOption) {
  22349. if (newOption) {
  22350. option = newOption;
  22351. series = option.series;
  22352. }
  22353. self.clear();
  22354. _buildShape();
  22355. }
  22356. /**
  22357. * 动画设定
  22358. */
  22359. function addDataAnimation(params) {
  22360. var aniMap = {}; // seriesIndex索引参数
  22361. for (var i = 0, l = params.length; i < l; i++) {
  22362. aniMap[params[i][0]] = params[i];
  22363. }
  22364. var x;
  22365. var dx;
  22366. var y;
  22367. var serie;
  22368. var seriesIndex;
  22369. var dataIndex;
  22370. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  22371. seriesIndex = self.shapeList[i]._seriesIndex;
  22372. if (aniMap[seriesIndex] && !aniMap[seriesIndex][3]) {
  22373. // 有数据删除才有移动的动画
  22374. if (self.shapeList[i].shape == 'candle') {
  22375. dataIndex = ecData.get(self.shapeList[i], 'dataIndex');
  22376. serie = series[seriesIndex];
  22377. if (aniMap[seriesIndex][2]
  22378. && dataIndex == serie.data.length - 1
  22379. ) {
  22380. // 队头加入删除末尾
  22381. zr.delShape(self.shapeList[i].id);
  22382. continue;
  22383. }
  22384. else if (!aniMap[seriesIndex][2] && dataIndex === 0) {
  22385. // 队尾加入删除头部
  22386. zr.delShape(self.shapeList[i].id);
  22387. continue;
  22388. }
  22389. dx = component.xAxis.getAxis(
  22390. serie.xAxisIndex || 0
  22391. ).getGap();
  22392. x = aniMap[seriesIndex][2] ? dx : -dx;
  22393. y = 0;
  22394. zr.animate(self.shapeList[i].id, '')
  22395. .when(
  22396. 500,
  22397. {position : [x, y]}
  22398. )
  22399. .start();
  22400. }
  22401. }
  22402. }
  22403. }
  22404. /**
  22405. * 动画设定
  22406. */
  22407. function animation() {
  22408. var duration = self.deepQuery([option], 'animationDuration');
  22409. var easing = self.deepQuery([option], 'animationEasing');
  22410. var x;
  22411. var y;
  22412. var serie;
  22413. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  22414. if (self.shapeList[i].shape == 'candle') {
  22415. serie = series[self.shapeList[i]._seriesIndex];
  22416. x = self.shapeList[i].style.x;
  22417. y = self.shapeList[i].style.y[0];
  22418. zr.modShape(self.shapeList[i].id, {
  22419. scale : [1, 0, x, y]
  22420. });
  22421. zr.animate(self.shapeList[i].id, '')
  22422. .when(
  22423. (self.deepQuery([serie],'animationDuration')
  22424. || duration),
  22425. {scale : [1, 1, x, y]}
  22426. )
  22427. .start(
  22428. self.deepQuery([serie], 'animationEasing') || easing
  22429. );
  22430. }
  22431. }
  22432. }
  22433. self.init = init;
  22434. self.refresh = refresh;
  22435. self.addDataAnimation = addDataAnimation;
  22436. self.animation = animation;
  22437. init(option, component);
  22438. }
  22439. // 动态扩展zrender shape:candle
  22440. require('../util/shape/candle');
  22441. // 图表注册
  22442. require('../chart').define('k', K);
  22443. return K;
  22444. });
  22445. /**
  22446. * echarts图表类:雷达图
  22447. * Copyright 2013 Baidu Inc. All rights reserved.
  22448. *
  22449. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  22450. * @author Neil (杨骥, yangji01@baidu.com)
  22451. *
  22452. */
  22453. define('echarts/chart/radar',['require','../component/base','./calculableBase','../config','../util/ecData','zrender/tool/color','../chart'],function(require) {
  22454. /**
  22455. * 构造函数
  22456. * @param {Object} messageCenter echart消息中心
  22457. * @param {ZRender} zr zrender实例
  22458. * @param {Object} series 数据
  22459. * @param {Object} component 组件
  22460. */
  22461. function Radar(messageCenter, zr, option, component) {
  22462. // 基类装饰
  22463. var ComponentBase = require('../component/base');
  22464. ComponentBase.call(this, zr);
  22465. // 可计算特性装饰
  22466. var CalculableBase = require('./calculableBase');
  22467. CalculableBase.call(this, zr, option);
  22468. var ecConfig = require('../config');
  22469. var ecData = require('../util/ecData');
  22470. var zrColor = require('zrender/tool/color');
  22471. var self = this;
  22472. self.type = ecConfig.CHART_TYPE_RADAR;
  22473. var series; // 共享数据源,不要修改跟自己无关的项
  22474. var serie;
  22475. var _zlevelBase = self.getZlevelBase();
  22476. var _queryTarget;
  22477. var _dropBoxList;
  22478. var _symbol = [
  22479. 'circle', 'rectangle', 'triangle', 'diamond',
  22480. 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
  22481. ];
  22482. var _radarDataCounter;
  22483. /**
  22484. * 绘制图形
  22485. */
  22486. function _buildShape() {
  22487. self.selectedMap = {};
  22488. _dropBoxList = [];
  22489. _radarDataCounter = 0;
  22490. for (var i = 0, l = series.length; i < l ; i ++) {
  22491. if (series[i].type == ecConfig.CHART_TYPE_RADAR) {
  22492. serie = self.reformOption(series[i]);
  22493. _queryTarget = [serie, option];
  22494. // 添加可拖拽提示框,多系列共用一个极坐标,第一个优先
  22495. if (self.deepQuery(_queryTarget, 'calculable')) {
  22496. _addDropBox(i);
  22497. }
  22498. _buildSingleRadar(i);
  22499. }
  22500. }
  22501. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  22502. self.shapeList[i].id = zr.newShapeId(self.type);
  22503. zr.addShape(self.shapeList[i]);
  22504. }
  22505. }
  22506. /**
  22507. * 构建数据图形
  22508. * @param {number} 序列的index
  22509. */
  22510. function _buildSingleRadar(index) {
  22511. var legend = component.legend;
  22512. var iconShape;
  22513. var data = serie.data;
  22514. var defaultColor;
  22515. var name;
  22516. var pointList;
  22517. var calculable = self.deepQuery(_queryTarget, 'calculable');
  22518. for (var i = 0; i < data.length; i ++) {
  22519. name = data[i].name || '';
  22520. // 图例开关
  22521. self.selectedMap[name] = legend
  22522. ? legend.isSelected(name)
  22523. : true;
  22524. if (!self.selectedMap[name]) {
  22525. continue;
  22526. }
  22527. // 默认颜色策略
  22528. if (legend) {
  22529. // 有图例则从图例中获取颜色定义
  22530. defaultColor = legend.getColor(name);
  22531. iconShape = legend.getItemShape(name);
  22532. if (iconShape) {
  22533. // 回调legend,换一个更形象的icon
  22534. iconShape.style.brushType = self.deepQuery(
  22535. [data[i], serie], 'itemStyle.normal.areaStyle'
  22536. ) ? 'both' : 'stroke';
  22537. legend.setItemShape(name, iconShape);
  22538. }
  22539. }
  22540. else {
  22541. // 全局颜色定义
  22542. defaultColor = zr.getColor(i);
  22543. }
  22544. pointList = _getPointList(serie.polarIndex, data[i]);
  22545. // 添加拐点形状
  22546. _addSymbol(pointList, defaultColor, data[i], index);
  22547. // 添加数据形状
  22548. _addDataShape(
  22549. pointList, defaultColor, data[i],
  22550. index, i, calculable
  22551. );
  22552. _radarDataCounter++;
  22553. }
  22554. }
  22555. /**
  22556. * 获取数据的点集
  22557. * @param {number} polarIndex
  22558. * @param {Array<Object>} 处理的数据
  22559. * @return {Array<Array<number>>} 点集
  22560. */
  22561. function _getPointList(polarIndex, dataArr) {
  22562. var pointList = [];
  22563. var vector;
  22564. var polar = component.polar;
  22565. for (var i = 0, l = dataArr.value.length; i < l; i++) {
  22566. vector = polar.getVector(polarIndex, i, dataArr.value[i]);
  22567. if (vector) {
  22568. pointList.push(vector);
  22569. }
  22570. }
  22571. return pointList;
  22572. }
  22573. /**
  22574. * 生成折线图上的拐点图形
  22575. */
  22576. function _getSymbol(
  22577. x, y, symbol, symbolSize, normalColor, emphasisColor, lineWidth
  22578. ) {
  22579. var itemShape = {
  22580. shape : 'icon',
  22581. zlevel : _zlevelBase + 1,
  22582. style : {
  22583. iconType : symbol.replace('empty', '').toLowerCase(),
  22584. x : x - symbolSize,
  22585. y : y - symbolSize,
  22586. width : symbolSize * 2,
  22587. height : symbolSize * 2,
  22588. brushType : 'both',
  22589. color : symbol.match('empty') ? '#fff' : normalColor,
  22590. strokeColor : normalColor,
  22591. lineWidth: lineWidth * 2
  22592. },
  22593. hoverable: false
  22594. };
  22595. if (symbol.match('star')) {
  22596. itemShape.style.iconType = 'star';
  22597. itemShape.style.n =
  22598. (symbol.replace('empty', '').replace('star','') - 0) || 5;
  22599. }
  22600. itemShape._x = x;
  22601. itemShape._y = y;
  22602. return itemShape;
  22603. }
  22604. /**
  22605. * 添加拐点
  22606. * @param {Array<Array<number>>} pointList 点集
  22607. * @param {string} defaultColor 默认填充颜色
  22608. * @param {object} data 数据
  22609. * @param {number} serieIndex
  22610. */
  22611. function _addSymbol(pointList, defaultColor, data) {
  22612. // 多级控制
  22613. var queryTarget = [data, serie];
  22614. var symbol = self.deepQuery(queryTarget,'symbol')
  22615. || _symbol[_radarDataCounter % _symbol.length]
  22616. || 'cricle';
  22617. if (symbol != 'none') {
  22618. var symbolSize = self.deepQuery(queryTarget,'symbolSize');
  22619. var nColor = self.deepQuery(
  22620. queryTarget, 'itemStyle.normal.color'
  22621. );
  22622. var eColor = self.deepQuery(
  22623. queryTarget, 'itemStyle.emphasis.color'
  22624. );
  22625. var lineWidth = self.deepQuery(
  22626. queryTarget, 'itemStyle.normal.lineStyle.width'
  22627. );
  22628. for (var i = 0, l = pointList.length; i < l; i++) {
  22629. self.shapeList.push(_getSymbol(
  22630. pointList[i][0], // x
  22631. pointList[i][1], // y
  22632. symbol,
  22633. symbolSize,
  22634. nColor || defaultColor,
  22635. eColor || nColor || defaultColor,
  22636. lineWidth
  22637. ));
  22638. }
  22639. }
  22640. }
  22641. /**
  22642. * 添加数据图形
  22643. * @param {Array<Array<number>>} pointList 点集
  22644. * @param {string} defaultColor 默认填充颜色
  22645. * @param {object} data 数据
  22646. * @param {number} serieIndex
  22647. * @param {number} dataIndex
  22648. * @param {boolean} calcalable
  22649. */
  22650. function _addDataShape(
  22651. pointList, defaultColor, data,
  22652. seriesIndex, dataIndex, calculable
  22653. ) {
  22654. // 多级控制
  22655. var queryTarget = [data, serie];
  22656. var nColor = self.deepQuery(
  22657. queryTarget, 'itemStyle.normal.color'
  22658. );
  22659. var nLineWidth = self.deepQuery(
  22660. queryTarget, 'itemStyle.normal.lineStyle.width'
  22661. );
  22662. var nLineType = self.deepQuery(
  22663. queryTarget, 'itemStyle.normal.lineStyle.type'
  22664. );
  22665. var nAreaColor = self.deepQuery(
  22666. queryTarget, 'itemStyle.normal.areaStyle.color'
  22667. );
  22668. var nIsAreaFill = self.deepQuery(
  22669. queryTarget, 'itemStyle.normal.areaStyle'
  22670. );
  22671. var shape = {
  22672. shape : 'polygon',
  22673. zlevel : _zlevelBase,
  22674. style : {
  22675. pointList : pointList,
  22676. brushType : nIsAreaFill ? 'both' : 'stroke',
  22677. color : nAreaColor
  22678. || nColor
  22679. || zrColor.alpha(defaultColor,0.5),
  22680. strokeColor : nColor || defaultColor,
  22681. lineWidth : nLineWidth,
  22682. lineType : nLineType
  22683. },
  22684. highlightStyle : {
  22685. brushType : self.deepQuery(
  22686. queryTarget,
  22687. 'itemStyle.emphasis.areaStyle'
  22688. ) || nIsAreaFill
  22689. ? 'both' : 'stroke',
  22690. color : self.deepQuery(
  22691. queryTarget,
  22692. 'itemStyle.emphasis.areaStyle.color'
  22693. )
  22694. || nAreaColor
  22695. || nColor
  22696. || zrColor.alpha(defaultColor,0.5),
  22697. strokeColor : self.deepQuery(
  22698. queryTarget, 'itemStyle.emphasis.color'
  22699. ) || nColor || defaultColor,
  22700. lineWidth : self.deepQuery(
  22701. queryTarget,
  22702. 'itemStyle.emphasis.lineStyle.width'
  22703. ) || nLineWidth,
  22704. lineType : self.deepQuery(
  22705. queryTarget,
  22706. 'itemStyle.emphasis.lineStyle.type'
  22707. ) || nLineType
  22708. }
  22709. };
  22710. ecData.pack(
  22711. shape,
  22712. series[seriesIndex], // 系列
  22713. seriesIndex, // 系列索引
  22714. data, // 数据
  22715. dataIndex, // 数据索引
  22716. data.name, // 数据名称
  22717. // 附加指标信息
  22718. component.polar.getIndicator(series[seriesIndex].polarIndex)
  22719. );
  22720. if (calculable) {
  22721. shape.draggable = true;
  22722. self.setCalculable(shape);
  22723. }
  22724. self.shapeList.push(shape);
  22725. }
  22726. /**
  22727. * 增加外围接受框
  22728. * @param {number} serie的序列
  22729. */
  22730. function _addDropBox(index) {
  22731. var polarIndex = self.deepQuery(
  22732. _queryTarget, 'polarIndex'
  22733. );
  22734. if (!_dropBoxList[polarIndex]) {
  22735. var shape = component.polar.getDropBox(polarIndex);
  22736. shape.zlevel = _zlevelBase;
  22737. self.setCalculable(shape);
  22738. ecData.pack(shape, series, index, undefined, -1);
  22739. self.shapeList.push(shape);
  22740. _dropBoxList[polarIndex] = true;
  22741. }
  22742. }
  22743. /**
  22744. * 数据项被拖拽出去,重载基类方法
  22745. */
  22746. function ondragend(param, status) {
  22747. if (!self.isDragend || !param.target) {
  22748. // 没有在当前实例上发生拖拽行为则直接返回
  22749. return;
  22750. }
  22751. var target = param.target; // 被拖拽图形元素
  22752. var seriesIndex = ecData.get(target, 'seriesIndex');
  22753. var dataIndex = ecData.get(target, 'dataIndex');
  22754. // 被拖拽的图形是饼图sector,删除被拖拽走的数据
  22755. component.legend && component.legend.del(
  22756. series[seriesIndex].data[dataIndex].name
  22757. );
  22758. series[seriesIndex].data.splice(dataIndex, 1);
  22759. // 别status = {}赋值啊!!
  22760. status.dragOut = true;
  22761. status.needRefresh = true;
  22762. // 处理完拖拽事件后复位
  22763. self.isDragend = false;
  22764. return;
  22765. }
  22766. /**
  22767. * 数据项被拖拽进来, 重载基类方法
  22768. */
  22769. function ondrop(param, status) {
  22770. if (!self.isDrop || !param.target) {
  22771. // 没有在当前实例上发生拖拽行为则直接返回
  22772. return;
  22773. }
  22774. var target = param.target; // 拖拽安放目标
  22775. var dragged = param.dragged; // 当前被拖拽的图形对象
  22776. var seriesIndex = ecData.get(target, 'seriesIndex');
  22777. var dataIndex = ecData.get(target, 'dataIndex');
  22778. var data;
  22779. var legend = component.legend;
  22780. var value;
  22781. if (dataIndex == -1) {
  22782. data = {
  22783. value : ecData.get(dragged, 'value'),
  22784. name : ecData.get(dragged, 'name')
  22785. };
  22786. series[seriesIndex].data.push(data);
  22787. legend && legend.add(
  22788. data.name,
  22789. dragged.style.color || dragged.style.strokeColor
  22790. );
  22791. }
  22792. else {
  22793. data = series[seriesIndex].data[dataIndex];
  22794. legend && legend.del(data.name);
  22795. data.name += option.nameConnector
  22796. + ecData.get(dragged, 'name');
  22797. value = ecData.get(dragged, 'value');
  22798. for (var i = 0 ; i < value.length; i ++) {
  22799. data.value[i] += value[i];
  22800. }
  22801. legend && legend.add(
  22802. data.name,
  22803. dragged.style.color || dragged.style.strokeColor
  22804. );
  22805. }
  22806. // 别status = {}赋值啊!!
  22807. status.dragIn = status.dragIn || true;
  22808. // 处理完拖拽事件后复位
  22809. self.isDrop = false;
  22810. return;
  22811. }
  22812. /**
  22813. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  22814. * @param {Object} newZr
  22815. * @param {Object} newSeries
  22816. * @param {Object} newComponent
  22817. */
  22818. function init(newOption, newComponent) {
  22819. component = newComponent;
  22820. refresh(newOption);
  22821. }
  22822. /**
  22823. * 刷新
  22824. */
  22825. function refresh(newOption) {
  22826. if (newOption) {
  22827. option = newOption;
  22828. series = option.series;
  22829. }
  22830. self.clear();
  22831. _buildShape();
  22832. }
  22833. function animation() {
  22834. var duration = self.deepQuery([option], 'animationDuration');
  22835. var easing = self.deepQuery([option], 'animationEasing');
  22836. var dataIndex;
  22837. var seriesIndex;
  22838. var data;
  22839. var serie;
  22840. var polarIndex;
  22841. var polar = component.polar;
  22842. var center;
  22843. var item;
  22844. var x;
  22845. var y;
  22846. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  22847. if (self.shapeList[i].shape == 'polygon') {
  22848. item = self.shapeList[i];
  22849. seriesIndex = ecData.get(item, 'seriesIndex');
  22850. dataIndex = ecData.get(item, 'dataIndex');
  22851. serie = series[seriesIndex];
  22852. data = serie.data[dataIndex];
  22853. polarIndex = self.deepQuery(
  22854. [data, serie, option], 'polarIndex');
  22855. center = polar.getCenter(polarIndex);
  22856. x = center[0];
  22857. y = center[1];
  22858. zr.modShape(self.shapeList[i].id, {
  22859. scale : [0.1, 0.1, x, y]
  22860. });
  22861. zr.animate(item.id, '')
  22862. .when(
  22863. (self.deepQuery([serie],'animationDuration')
  22864. || duration)
  22865. + dataIndex * 100,
  22866. {scale : [1, 1, x, y]}
  22867. )
  22868. .start(
  22869. self.deepQuery([serie], 'animationEasing') || easing
  22870. );
  22871. }
  22872. else {
  22873. x = self.shapeList[i]._x || 0;
  22874. y = self.shapeList[i]._y || 0;
  22875. zr.modShape(self.shapeList[i].id, {
  22876. scale : [0, 0, x, y]
  22877. });
  22878. zr.animate(self.shapeList[i].id, '')
  22879. .when(
  22880. duration,
  22881. {scale : [1, 1, x, y]}
  22882. )
  22883. .start('QuinticOut');
  22884. }
  22885. }
  22886. }
  22887. self.init = init;
  22888. self.refresh = refresh;
  22889. self.animation = animation;
  22890. self.ondrop = ondrop;
  22891. self.ondragend = ondragend;
  22892. init(option, component);
  22893. }
  22894. // 图表注册
  22895. require('../chart').define('radar', Radar);
  22896. return Radar;
  22897. });
  22898. /**
  22899. * zrender
  22900. *
  22901. * @author pissang (https://github.com/pissang)
  22902. *
  22903. * shape类:chord
  22904. * 可配图形属性:
  22905. {
  22906. // 基础属性
  22907. shape : 'candle', // 必须,shape类标识,需要显式指定
  22908. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  22909. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  22910. invisible : {boolean}, // 默认为false,是否可见
  22911. // 样式属性,默认状态样式样式属性
  22912. style : {
  22913. center : {array},
  22914. source0 : {number},
  22915. source1 : {number},
  22916. target0 : {number},
  22917. target1 : {number},
  22918. r : {number},
  22919. brushType : {string}, // 默认为fill,绘画方式
  22920. // fill(填充) | stroke(描边) | both(填充+描边)
  22921. color : {color}, // 默认为'#000',填充颜色,支持rgba
  22922. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  22923. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  22924. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  22925. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  22926. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  22927. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  22928. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  22929. text : {string}, // 默认为null,附加文本
  22930. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  22931. textPosition : {string}, // 默认为top,附加文本位置。
  22932. // inside | left | right | top | bottom
  22933. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  22934. // start | end | left | right | center
  22935. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  22936. // top | bottom | middle |
  22937. // alphabetic | hanging | ideographic
  22938. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  22939. // 'inside' ? '#fff' : color
  22940. },
  22941. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  22942. highlightStyle : {
  22943. // 同style
  22944. }
  22945. // 交互属性,详见shape.Base
  22946. // 事件属性,详见shape.Base
  22947. }
  22948. 例子:
  22949. {
  22950. shape : 'candle',
  22951. id : '123456',
  22952. zlevel : 1,
  22953. style : {
  22954. x : 200,
  22955. y : [100,123,90,125],
  22956. width : 150,
  22957. color : '#eee',
  22958. text : 'Baidu'
  22959. },
  22960. myName : 'kener', // 可自带任何有效自定义属性
  22961. clickable : true,
  22962. onClick : function(eventPacket) {
  22963. alert(eventPacket.target.myName);
  22964. }
  22965. }
  22966. */
  22967. define('echarts/util/shape/chord',['require','zrender/tool/util','zrender/shape/base','zrender/shape'],function(require) {
  22968. var util = require('zrender/tool/util');
  22969. function ChordShape() {
  22970. this.type = 'chord';
  22971. }
  22972. var _ctx = util.getContext();
  22973. ChordShape.prototype = {
  22974. // center, source0, source1, target0, target1, r
  22975. buildPath : function(ctx, style) {
  22976. var PI2 = Math.PI * 2;
  22977. var cx = style.center[0];
  22978. var cy = style.center[1];
  22979. var r = style.r;
  22980. var s0 = style.source0 / 180 * Math.PI;
  22981. var s1 = style.source1 / 180 * Math.PI;
  22982. var t0 = style.target0 / 180 * Math.PI;
  22983. var t1 = style.target1 / 180 * Math.PI;
  22984. var sx0 = cx + Math.cos(PI2 - s0) * r;
  22985. var sy0 = cy - Math.sin(PI2 - s0) * r;
  22986. var sx1 = cx + Math.cos(PI2 - s1) * r;
  22987. var sy1 = cy - Math.sin(PI2 - s1) * r;
  22988. var tx0 = cx + Math.cos(PI2 - t0) * r;
  22989. var ty0 = cy - Math.sin(PI2 - t0) * r;
  22990. var tx1 = cx + Math.cos(PI2 - t1) * r;
  22991. var ty1 = cy - Math.sin(PI2 - t1) * r;
  22992. ctx.moveTo(sx0, sy0);
  22993. ctx.arc(cx, cy, style.r, s0, s1, false);
  22994. ctx.bezierCurveTo(
  22995. (cx - sx1) * 0.70 + sx1,
  22996. (cy - sy1) * 0.70 + sy1,
  22997. (cx - tx0) * 0.70 + tx0,
  22998. (cy - ty0) * 0.70 + ty0,
  22999. tx0, ty0
  23000. );
  23001. // Chord to self
  23002. if (style.source0 === style.target0 &&
  23003. style.source1 === style.target1) {
  23004. return;
  23005. }
  23006. ctx.arc(cx, cy, style.r, t0, t1, false);
  23007. ctx.bezierCurveTo(
  23008. (cx - tx1) * 0.70 + tx1,
  23009. (cy - ty1) * 0.70 + ty1,
  23010. (cx - sx0) * 0.70 + sx0,
  23011. (cy - sy0) * 0.70 + sy0,
  23012. sx0, sy0
  23013. );
  23014. },
  23015. getRect : function(){
  23016. return {
  23017. x : 0,
  23018. y : 0,
  23019. width : 0,
  23020. height : 0
  23021. };
  23022. },
  23023. isCover : function(e, x, y) {
  23024. if (!_ctx.isPointInPath) { // In ie
  23025. return false;
  23026. }
  23027. //对鼠标的坐标也做相同的变换
  23028. if(e.__needTransform && e._transform){
  23029. var inverseMatrix = [];
  23030. matrix.invert(inverseMatrix, e._transform);
  23031. var originPos = [x, y];
  23032. matrix.mulVector(originPos, inverseMatrix, [x, y, 1]);
  23033. if (x == originPos[0] && y == originPos[1]) {
  23034. // 避免外部修改导致的__needTransform不准确
  23035. if (Math.abs(e.rotation[0]) > 0.0001
  23036. || Math.abs(e.position[0]) > 0.0001
  23037. || Math.abs(e.position[1]) > 0.0001
  23038. || Math.abs(e.scale[0] - 1) > 0.0001
  23039. || Math.abs(e.scale[1] - 1) > 0.0001
  23040. ) {
  23041. e.__needTransform = true;
  23042. } else {
  23043. e.__needTransform = false;
  23044. }
  23045. }
  23046. x = originPos[0];
  23047. y = originPos[1];
  23048. }
  23049. _ctx.beginPath();
  23050. ChordShape.prototype.buildPath.call(null, _ctx, e.style);
  23051. _ctx.closePath();
  23052. return _ctx.isPointInPath(x, y);
  23053. }
  23054. };
  23055. require('zrender/shape/base').derive(ChordShape);
  23056. require('zrender/shape').define('chord', new ChordShape());
  23057. return ChordShape;
  23058. });
  23059. define('echarts/util/kwargs',[],function(){
  23060. function kwargs(defaults) {
  23061. var func = this;
  23062. /*jshint maxlen : 200*/
  23063. var removeComments = new RegExp('(\\/\\*[\\w\\\'\\,\\(\\)\\s\\r\\n\\*]*\\*\\/)|(\\/\\/[\\w\\s\\\'][^\\n\\r]*$)|(<![\\-\\-\\s\\w\\>\\/]*>)', 'gim');
  23064. var removeWhitespc = new RegExp('\\s+', 'gim');
  23065. var matchSignature = new RegExp('function.*?\\((.*?)\\)', 'i');
  23066. // get the argument names from function source
  23067. var names = func.toString()
  23068. .replace(removeComments, '')
  23069. .replace(removeWhitespc, '')
  23070. .match(matchSignature)[1]
  23071. .split(',');
  23072. // Check the existance of default, if not create an object
  23073. if(defaults !== Object(defaults)){
  23074. defaults = {};
  23075. }
  23076. return function() {
  23077. var args = Array.prototype.slice.call(arguments);
  23078. var kwargs = args[args.length - 1];
  23079. // Check the existance of the kwargs
  23080. if (kwargs && kwargs.constructor === Object) {
  23081. args.pop();
  23082. }else{
  23083. kwargs = {};
  23084. }
  23085. // Fill the arguments and apply them
  23086. for (var i = 0; i < names.length; i++) {
  23087. var name = names[i];
  23088. if (name in kwargs) {
  23089. args[i] = kwargs[name];
  23090. }else if(name in defaults && args[i] === undefined){
  23091. args[i] = defaults[name];
  23092. }
  23093. }
  23094. return func.apply(this, args);
  23095. };
  23096. }
  23097. // As function prototype
  23098. Function.prototype.kwargs = kwargs;
  23099. });
  23100. /**
  23101. * Numpy like n-dimensional array proccessing class
  23102. * http://docs.scipy.org/doc/numpy/reference/arrays.ndarray.html
  23103. *
  23104. * @author pissang (https://github.com/pissang/)
  23105. */
  23106. define('echarts/util/ndarray',['require','./kwargs'],function(require) {
  23107. require('./kwargs');
  23108. var ArraySlice = Array.prototype.slice;
  23109. var global = window;
  23110. // Polyfill of Typed Array
  23111. global.Int32Array = global.Int32Array || Array;
  23112. global.Int16Array = global.Int16Array || Array;
  23113. global.Int8Array = global.Int8Array || Array;
  23114. global.Uint32Array = global.Uint32Array || Array;
  23115. global.Uint16Array = global.Uint16Array || Array;
  23116. global.Uint8Array = global.Uint8Array || Array;
  23117. global.Float32Array = global.Float32Array || Array;
  23118. global.Float64Array = global.Float64Array || Array;
  23119. // Map of numpy dtype and typed array
  23120. // http://docs.scipy.org/doc/numpy/reference/arrays.dtypes.html#arrays-dtypes
  23121. // http://www.khronos.org/registry/typedarray/specs/latest/
  23122. var ArrayConstructor = {
  23123. 'int32' : global.Int32Array,
  23124. 'int16' : global.Int16Array,
  23125. 'int8' : global.Int8Array,
  23126. 'uint32' : global.Uint32Array,
  23127. 'uint16' : global.Uint16Array,
  23128. 'uint8' : global.Uint8Array,
  23129. // 'uint8c' is not existed in numpy
  23130. 'uint8c' : global.Uint8ClampedArray,
  23131. 'float32' : global.Float32Array,
  23132. 'float64' : global.Float64Array,
  23133. 'number' : Array
  23134. };
  23135. var dTypeStrideMap = {
  23136. 'int32' : 4,
  23137. 'int16' : 2,
  23138. 'int8' : 1,
  23139. 'uint32' : 4,
  23140. 'uint16' : 2,
  23141. 'uint8' : 1,
  23142. 'uint8c' : 1,
  23143. 'float32' : 4,
  23144. 'float64' : 8,
  23145. // Consider array stride is 1
  23146. 'number' : 1
  23147. };
  23148. var E_ADD = 0;
  23149. var E_SUB = 1;
  23150. var E_MUL = 2;
  23151. var E_DIV = 3;
  23152. var E_MOD = 4;
  23153. var E_AND = 5;
  23154. var E_OR = 6;
  23155. var E_XOR = 7;
  23156. var E_EQL = 8;
  23157. function guessDataType(arr) {
  23158. if (typeof(arr) === 'undefined') {
  23159. return 'number';
  23160. }
  23161. switch(Object.prototype.toString.call(arr)) {
  23162. case '[object Int32Array]':
  23163. return 'int32';
  23164. case '[object Int16Array]':
  23165. return 'int16';
  23166. case '[object Int8Array]':
  23167. return 'int8';
  23168. case '[object Uint32Array]':
  23169. return 'uint32';
  23170. case '[object Uint16Array]':
  23171. return 'uint16';
  23172. case '[object Uint8Array]':
  23173. return 'uint8';
  23174. case '[object Uint8ClampedArray]':
  23175. return 'uint8c';
  23176. case '[object Float32Array]':
  23177. return 'float32';
  23178. case '[object Float64Array]':
  23179. return 'float64';
  23180. default:
  23181. return 'number';
  23182. }
  23183. }
  23184. /**
  23185. * NDArray
  23186. * @param {Array|NDArray} array
  23187. * @param {String} dtype
  23188. */
  23189. var NDArray = function(array) {
  23190. // Last argument describe the data type of ndarray
  23191. var dtype = arguments[arguments.length-1];
  23192. if (typeof(dtype) == 'string') {
  23193. this._dtype = dtype;
  23194. } else {
  23195. // Normal array
  23196. this._dtype = guessDataType(array);
  23197. }
  23198. if (array && typeof(array) !== 'string') {
  23199. if (array instanceof NDArray) {
  23200. array._dtype = this._dtype;
  23201. return array;
  23202. } else if (array.length) {
  23203. // Init from array
  23204. this.initFromArray(array);
  23205. } else if(typeof(array) === 'number') {
  23206. // Init from shape
  23207. this.initFromShape.apply(this, arguments);
  23208. }
  23209. } else {
  23210. /**
  23211. * _array
  23212. * Initialized with an empty array
  23213. * Data is continuous one-dimensional array, row-major
  23214. * A [2, 2] dim empty array is stored like
  23215. * [0,0, 0,0]
  23216. * TODO : Consider column majors ?
  23217. * @type {ArrayConstructor}
  23218. */
  23219. this._array = new ArrayConstructor[this._dtype]();
  23220. /**
  23221. * _shape
  23222. * a tuple array describe the dimension and size of each dimension
  23223. * [10, 10] means a 10x10 array
  23224. * @type {Array}
  23225. */
  23226. this._shape = [0];
  23227. /**
  23228. * _size
  23229. * size of the storage array length
  23230. * @type {Number}
  23231. */
  23232. this._size = 0;
  23233. }
  23234. };
  23235. NDArray.prototype = {
  23236. /**
  23237. * Initialize from a normal js array.
  23238. *
  23239. * @param {Array} input
  23240. * @return {NDArray} this
  23241. */
  23242. initFromArray : function(input) {
  23243. var dim = getDimension(input);
  23244. var cursor = 0;
  23245. function flatten(axis, _out, _in) {
  23246. var len = _in.length;
  23247. for (var i = 0; i < len; i++) {
  23248. if (axis < dim-1) {
  23249. flatten(axis+1, _out, _in[i]);
  23250. } else {
  23251. _out[cursor++] = _in[i];
  23252. }
  23253. }
  23254. }
  23255. var shape = getShape(input);
  23256. var size = getSize(shape);
  23257. this._array = new ArrayConstructor[this._dtype](size);
  23258. flatten(0, this._array, input);
  23259. this._shape = shape;
  23260. this._size = size;
  23261. return this;
  23262. },
  23263. /**
  23264. * Initialize from the given shape description.
  23265. * @param {Array} shape
  23266. * @return {NDArray} this
  23267. */
  23268. initFromShape : function(shape) {
  23269. if (typeof(shape) == 'number') {
  23270. shape = Array.prototype.slice.call(arguments);
  23271. }
  23272. if(shape) {
  23273. var size = getSize(shape);
  23274. if (this._dtype === 'number') {
  23275. this._array = [];
  23276. var data = this._array;
  23277. for (var i = 0; i < size; i++) {
  23278. data[i] = 0;
  23279. }
  23280. } else {
  23281. this._array = new ArrayConstructor[this._dtype](size);
  23282. }
  23283. }
  23284. this._shape = shape;
  23285. this._size = getSize(shape);
  23286. return this;
  23287. },
  23288. /**
  23289. * Fill the array with the given value.
  23290. * @param {Number} value
  23291. * @return {NDArray} this
  23292. */
  23293. fill : function(value) {
  23294. var data = this._array;
  23295. for (var i = 0; i < data.length; i++) {
  23296. data[i] = value;
  23297. }
  23298. return this;
  23299. },
  23300. /**
  23301. * Get ndarray shape copy.
  23302. * @return {Array}
  23303. */
  23304. shape : function() {
  23305. // Create a copy
  23306. return this._shape.slice();
  23307. },
  23308. /**
  23309. * Get array size
  23310. * @return {Number}
  23311. */
  23312. size : function() {
  23313. return this._size;
  23314. },
  23315. /**
  23316. * Get array data type.
  23317. * 'int32'
  23318. * 'int16'
  23319. * 'int8'
  23320. * 'uint32'
  23321. * 'uint16'
  23322. * 'uint8'
  23323. * 'float32'
  23324. * 'float64'
  23325. * @return {String}
  23326. */
  23327. dtype : function() {
  23328. return this._dtype;
  23329. },
  23330. /**
  23331. * Get array dimension.
  23332. * @return {[type]} [description]
  23333. */
  23334. dimension : function() {
  23335. return this._shape.length;
  23336. },
  23337. /**
  23338. * Tuple of bytes to step in each dimension when traversing an array.
  23339. * @return {Array}
  23340. */
  23341. strides : function() {
  23342. var strides = calculateDimStrides(this._shape);
  23343. var dTypeStride = dTypeStrideMap[this._dtype];
  23344. for (var i = 0; i < strides.length; i++) {
  23345. strides[i] *= dTypeStride;
  23346. }
  23347. return strides;
  23348. },
  23349. /**
  23350. * Gives a new shape to an array without changing its data.
  23351. * @param {Array} shape
  23352. * @return {NDArray}
  23353. */
  23354. reshape : function(shape) {
  23355. if (typeof(shape) == 'number') {
  23356. shape = Array.prototype.slice.call(arguments);
  23357. }
  23358. if (this._isShapeValid(shape)) {
  23359. this._shape = shape;
  23360. } else {
  23361. throw new Error('Total size of new array must be unchanged');
  23362. }
  23363. return this;
  23364. },
  23365. _isShapeValid : function(shape) {
  23366. return getSize(shape) === this._size;
  23367. },
  23368. /**
  23369. * Change shape and size of array in-place.
  23370. * @param {Array} shape
  23371. * @return {NDArray}
  23372. */
  23373. resize : function(shape) {
  23374. if (typeof(shape) == 'number') {
  23375. shape = Array.prototype.slice.call(arguments);
  23376. }
  23377. var len = getSize(shape);
  23378. if (len < this._size) {
  23379. if (this._dtype === 'number') {
  23380. this._array.length = len;
  23381. }
  23382. } else {
  23383. if (this._dtype === 'number') {
  23384. for (var i = this._array.length; i < len; i++) {
  23385. // Fill the rest with zero
  23386. this._array[i] = 0;
  23387. }
  23388. } else {
  23389. // Reallocate new buffer
  23390. var newArr = new ArrayConstructor[this._dtype](len);
  23391. var originArr = this._array;
  23392. // Copy data
  23393. for (var i = 0; i < originArr.length; i++) {
  23394. newArr[i] = originArr[i];
  23395. }
  23396. this._array = newArr;
  23397. }
  23398. }
  23399. this._shape = shape;
  23400. this._size = len;
  23401. return this;
  23402. },
  23403. /**
  23404. * Returns a new array with axes transposed.
  23405. * @param {Array} [axes]
  23406. * @param {NDArray} [out]
  23407. * @return {NDArray}
  23408. */
  23409. transpose : function(axes, out) {
  23410. var originAxes = [];
  23411. for (var i = 0; i < this._shape.length; i++) {
  23412. originAxes.push(i);
  23413. }
  23414. if (typeof(axes) === 'undefined') {
  23415. axes = originAxes.slice();
  23416. }
  23417. // Check if any axis is out of bounds
  23418. for (var i = 0; i < axes.length; i++) {
  23419. if (axes[i] >= this._shape.length) {
  23420. throw new Error(axisOutofBoundsErrorMsg(axes[i]));
  23421. }
  23422. }
  23423. // Has no effect on 1-D transpose
  23424. if (axes.length <= 1) {
  23425. return this;
  23426. }
  23427. var targetAxes = originAxes.slice();
  23428. for (var i = 0; i < Math.floor(axes.length / 2); i++) {
  23429. for (var j = axes.length-1; j >= Math.ceil(axes.length / 2) ; j--) {
  23430. // Swap axes
  23431. targetAxes[axes[i]] = axes[j];
  23432. targetAxes[axes[j]] = axes[i];
  23433. }
  23434. }
  23435. return this._transposelike(targetAxes, out);
  23436. }.kwargs(),
  23437. /**
  23438. * Return a new array with axis1 and axis2 interchanged.
  23439. * @param {Number} axis1
  23440. * @param {Number} axis2
  23441. * @param {NDArray} out
  23442. * @return {NDArray}
  23443. */
  23444. swapaxes : function(axis1, axis2, out) {
  23445. return this.transpose([axis1, axis2], out);
  23446. }.kwargs(),
  23447. /**
  23448. * Roll the specified axis backwards, until it lies in a given position.
  23449. * @param {Number} axis
  23450. * @param {Number} [start=0]
  23451. * @param {NDArray} out
  23452. * @return {NDArray}
  23453. */
  23454. rollaxis : function(axis, start, out) {
  23455. if (axis >= this._shape.length) {
  23456. throw new Error(axisOutofBoundsErrorMsg(axis));
  23457. }
  23458. var axes = [];
  23459. for (var i = 0; i < this._shape.length; i++) {
  23460. axes.push(i);
  23461. }
  23462. axes.splice(axis, 1);
  23463. axes.splice(start, 0, axis);
  23464. return this._transposelike(axes, out);
  23465. }.kwargs({ start : 0}),
  23466. // Base function for transpose-like operations
  23467. _transposelike : function(axes, out) {
  23468. var source = this._array;
  23469. var shape = this._shape.slice();
  23470. var strides = calculateDimStrides(this._shape);
  23471. var dim = shape.length;
  23472. // Swap
  23473. var tmpStrides = [];
  23474. var tmpShape = [];
  23475. for (var i = 0; i < axes.length; i++) {
  23476. var axis = axes[i];
  23477. // swap to target axis
  23478. tmpShape[i] = shape[axis];
  23479. tmpStrides[i] = strides[axis];
  23480. }
  23481. strides = tmpStrides;
  23482. shape = tmpShape;
  23483. this._shape = shape;
  23484. var transposedStrides = calculateDimStrides(this._shape);
  23485. if (!out) {
  23486. out = new NDArray();
  23487. out._shape = this._shape.slice();
  23488. out._dtype = this._dtype;
  23489. out._size = this._size;
  23490. }
  23491. // FIXME in-place transpose?
  23492. var transposedData = new ArrayConstructor[this._dtype](this._size);
  23493. out._array = transposedData;
  23494. // @param Item offset in current axis offset of the original array
  23495. // @param Item offset in current axis offset of the transposed array
  23496. function transpose(axis, offset, transposedOffset) {
  23497. var size = shape[axis];
  23498. // strides in orginal array
  23499. var stride = strides[axis];
  23500. // strides in transposed array
  23501. var transposedStride = transposedStrides[axis];
  23502. if (axis < dim-1) {
  23503. for (var i = 0; i < size; i++) {
  23504. transpose(
  23505. axis+1,
  23506. offset + stride * i,
  23507. transposedOffset + transposedStride * i
  23508. );
  23509. }
  23510. } else {
  23511. for (var i = 0; i < size; i++) {
  23512. // offset + stride * i is the index of the original array
  23513. // transposedOffset + i is the index of the transposed array
  23514. transposedData[transposedOffset + i]
  23515. = source[offset + stride * i];
  23516. }
  23517. }
  23518. }
  23519. transpose(0, 0, 0);
  23520. return out;
  23521. },
  23522. /**
  23523. * Repeat elements of an array along axis
  23524. * @param {Number} repeats
  23525. * The number of repetitions for each element.
  23526. * repeats is broadcasted to fit the shape of the given axis.
  23527. * @param {Number} [axis]
  23528. * The axis along which to repeat values.
  23529. * By default, use the flattened input array,
  23530. * and return a flat output array.
  23531. * @param {NDArray} [out]
  23532. * @return {NDArray}
  23533. */
  23534. repeat : function(repeats, axis, out) {
  23535. var shape;
  23536. // flattened input array
  23537. if (typeof(axis) === 'undefined') {
  23538. shape = [this._size];
  23539. axis = 0;
  23540. } else {
  23541. shape = this._shape.slice();
  23542. }
  23543. var originShape = shape.slice();
  23544. shape[axis] *= repeats;
  23545. if (!out) {
  23546. out = new NDArray(this._dtype);
  23547. out.initFromShape(shape);
  23548. } else {
  23549. if (!arrayEqual(shape, out._shape)) {
  23550. throw new Error(broadcastErrorMsg(shape, out._shape));
  23551. }
  23552. }
  23553. var data = out._array;
  23554. var stride = calculateDimStride(originShape, axis);
  23555. var axisSize = originShape[axis];
  23556. var source = this._array;
  23557. var offsetStride = stride * axisSize;
  23558. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  23559. for (var k = 0; k < stride; k++) {
  23560. var idx = offset + k;
  23561. var idxRepeated = offset * repeats + k;
  23562. for (var i = 0; i < axisSize; i++) {
  23563. for (var j = 0; j < repeats; j++) {
  23564. data[idxRepeated] = source[idx];
  23565. idxRepeated += stride;
  23566. }
  23567. idx += stride;
  23568. }
  23569. }
  23570. }
  23571. return out;
  23572. }.kwargs(),
  23573. choose : function() {
  23574. console.warn('TODO');
  23575. },
  23576. take : function() {
  23577. console.warn('TODO');
  23578. },
  23579. tile : function() {
  23580. console.warn('TODO');
  23581. },
  23582. /**
  23583. * Preprocess for array calculation
  23584. * max, min, argmax, argmin, sum, ptp, val, mean
  23585. * Which will reduce one axis if the axis is given
  23586. *
  23587. * @param {Number} axis
  23588. * @param {NDArray} out
  23589. * @param {Function} funcWithAxis
  23590. * @param {Function} funcFlatten
  23591. * @return {Number|NDArray}
  23592. */
  23593. _withPreprocess1 : function(axis, out, funcWithAxis, funcFlatten) {
  23594. var source = this._array;
  23595. if (!this._size) {
  23596. return;
  23597. }
  23598. if (typeof(axis)!=='undefined') {
  23599. if (axis < 0) {
  23600. axis = this._shape.length + axis;
  23601. }
  23602. if (axis >= this._shape.length || axis < 0) {
  23603. throw new Error(axisOutofBoundsErrorMsg(axis));
  23604. }
  23605. var shape = this._shape.slice();
  23606. shape.splice(axis, 1);
  23607. if (out && !arrayEqual(shape, out._shape)) {
  23608. throw new Error(broadcastErrorMsg(shape, out._shape));
  23609. }
  23610. if (!out) {
  23611. out = new NDArray(this._dtype);
  23612. out.initFromShape(shape);
  23613. }
  23614. var data = out._array;
  23615. var stride = calculateDimStride(this._shape, axis);
  23616. var axisSize = this._shape[axis];
  23617. var offsetStride = stride * axisSize;
  23618. funcWithAxis.call(
  23619. this, data, source, offsetStride, axisSize, stride
  23620. );
  23621. return out;
  23622. } else {
  23623. return funcFlatten.call(this, source);
  23624. }
  23625. },
  23626. /**
  23627. * Preprocess for array calculation cumsum, cumprod
  23628. * Which will keep the shape if axis is given
  23629. * and flatten if axis is undefined
  23630. * @param {Number} axis
  23631. * @param {NDArray} out
  23632. * @param {Function} funcWithAxis
  23633. * @param {Function} funcFlatten
  23634. * @return {NDArray}
  23635. */
  23636. _withPreprocess2 : function(axis, out, funcWithAxis, funcFlatten) {
  23637. var source = this._array;
  23638. if (!this._size) {
  23639. return;
  23640. }
  23641. if (out && !arrayEqual(this._shape, out._shape)) {
  23642. throw new Error(broadcastErrorMsg(this._shape, out._shape));
  23643. }
  23644. if (!out) {
  23645. out = new NDArray(this._dtype);
  23646. out.initFromShape(this._shape);
  23647. }
  23648. var data = out._array;
  23649. if (typeof(axis)!=='undefined') {
  23650. if (axis < 0) {
  23651. axis = this._shape.length + axis;
  23652. }
  23653. if (axis >= this._shape.length || axis < 0) {
  23654. throw new Error(axisOutofBoundsErrorMsg(axis));
  23655. }
  23656. if (axis >= this._shape.length) {
  23657. throw new Error(axisOutofBoundsErrorMsg(axis));
  23658. }
  23659. var stride = calculateDimStride(this._shape, axis);
  23660. var axisSize = this._shape[axis];
  23661. var offsetStride = stride * axisSize;
  23662. funcWithAxis.call(
  23663. this, data, source, offsetStride, axisSize, stride
  23664. );
  23665. } else {
  23666. out.reshape([this._size]);
  23667. funcFlatten.call(this, data, source);
  23668. }
  23669. return out;
  23670. },
  23671. /**
  23672. * Get the max value of ndarray
  23673. * If the axis is given, the max is only calculate in this dimension
  23674. * Example, for the given ndarray
  23675. * [[3, 9],
  23676. * [4, 8]]
  23677. * >>> max(0)
  23678. * [4, 9]
  23679. * >>> max(1)
  23680. * [9, 8]
  23681. *
  23682. * @param {Number} [axis]
  23683. * @param {NDArray} out
  23684. * @return {NDArray}
  23685. */
  23686. max : (function() {
  23687. function withAxis(data, source, offsetStride, axisSize, stride) {
  23688. var cursor = 0;
  23689. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  23690. for (var i = 0; i < stride; i++) {
  23691. var idx = i + offset;
  23692. var max = source[idx];
  23693. for (var j = 0; j < axisSize; j++) {
  23694. var d = source[idx];
  23695. if (d > max) {
  23696. max = d;
  23697. }
  23698. idx += stride;
  23699. }
  23700. data[cursor++] = max;
  23701. }
  23702. }
  23703. }
  23704. function withFlatten(source) {
  23705. var max = source[0];
  23706. for (var i = 1; i < this._size; i++) {
  23707. if (source[i] > max) {
  23708. max = source[i];
  23709. }
  23710. }
  23711. return max;
  23712. }
  23713. return function(axis, out) {
  23714. return this._withPreprocess1(
  23715. axis, out,
  23716. withAxis, withFlatten
  23717. );
  23718. };
  23719. })().kwargs(),
  23720. /**
  23721. * Return the minimum of an array or minimum along an axis.
  23722. * @param {Number} [axis]
  23723. * @param {NDArray} out
  23724. * @return {NDArray}
  23725. */
  23726. min : (function() {
  23727. function withAxis(data, source, offsetStride, axisSize, stride) {
  23728. var cursor = 0;
  23729. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  23730. for (var i = 0; i < stride; i++) {
  23731. var idx = i + offset;
  23732. var min = source[idx];
  23733. for (var j = 0; j < axisSize; j++) {
  23734. var d = source[idx];
  23735. if (d < min) {
  23736. min = d;
  23737. }
  23738. idx += stride;
  23739. }
  23740. data[cursor++] = min;
  23741. }
  23742. }
  23743. }
  23744. function withFlatten(source) {
  23745. var min = source[0];
  23746. for (var i = 1; i < this._size; i++) {
  23747. if (source[i] < min) {
  23748. min = source[i];
  23749. }
  23750. }
  23751. return min;
  23752. }
  23753. return function(axis, out) {
  23754. return this._withPreprocess1(
  23755. axis, out,
  23756. withAxis, withFlatten
  23757. );
  23758. };
  23759. })().kwargs(),
  23760. /**
  23761. * Return indices of the maximum values along an axis.
  23762. * @param {Number} [axis]
  23763. * @param {NDArray} out
  23764. * @return {NDArray}
  23765. */
  23766. argmax : (function() {
  23767. function withAxis(data, source, offsetStride, axisSize, stride) {
  23768. var cursor = 0;
  23769. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  23770. for (var i = 0; i < stride; i++) {
  23771. var dataIdx = 0;
  23772. var idx = i + offset;
  23773. var max = source[idx];
  23774. for (var j = 0; j < axisSize; j++) {
  23775. var d = source[idx];
  23776. if (d > max) {
  23777. max = d;
  23778. dataIdx = j;
  23779. }
  23780. idx += stride;
  23781. }
  23782. data[cursor++] = dataIdx;
  23783. }
  23784. }
  23785. }
  23786. function withFlatten(source) {
  23787. var max = source[0];
  23788. var idx = 0;
  23789. for (var i = 1; i < this._size; i++) {
  23790. if (source[i] > max) {
  23791. idx = i;
  23792. max = source[i];
  23793. }
  23794. }
  23795. return idx;
  23796. }
  23797. return function(axis, out) {
  23798. return this._withPreprocess1(
  23799. axis, out,
  23800. withAxis, withFlatten
  23801. );
  23802. };
  23803. })().kwargs(),
  23804. /**
  23805. * Indices of the minimum values along an axis.
  23806. * @param {Number} [axis]
  23807. * @param {NDArray} out
  23808. * @return {NDArray}
  23809. */
  23810. argmin : (function() {
  23811. function withAxis(data, source, offsetStride, axisSize, stride) {
  23812. var cursor = 0;
  23813. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  23814. for (var i = 0; i < stride; i++) {
  23815. var dataIdx = 0;
  23816. var idx = i + offset;
  23817. var min = source[idx];
  23818. for (var j = 0; j < axisSize; j++) {
  23819. var d = source[idx];
  23820. if (d < min) {
  23821. min = d;
  23822. dataIdx = j;
  23823. }
  23824. idx += stride;
  23825. }
  23826. data[cursor++] = dataIdx;
  23827. }
  23828. }
  23829. }
  23830. function withFlatten(source) {
  23831. var min = source[0];
  23832. var idx = 0;
  23833. for (var i = 1; i < this._size; i++) {
  23834. if (source[i] < min) {
  23835. idx = i;
  23836. min = source[i];
  23837. }
  23838. }
  23839. return idx;
  23840. }
  23841. return function(axis, out) {
  23842. return this._withPreprocess1(
  23843. axis, out,
  23844. withAxis, withFlatten
  23845. );
  23846. };
  23847. })().kwargs(),
  23848. /**
  23849. * Return the sum of the array elements over the given axis.
  23850. * @param {Number} [axis]
  23851. * @param {NDArray} out
  23852. * @return {NDArray}
  23853. */
  23854. sum : (function() {
  23855. function withAxis(data, source, offsetStride, axisSize, stride) {
  23856. var cursor = 0;
  23857. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  23858. for (var i = 0; i < stride; i++) {
  23859. var sum = 0;
  23860. var idx = i + offset;
  23861. for (var j = 0; j < axisSize; j++) {
  23862. sum += source[idx];
  23863. idx += stride;
  23864. }
  23865. data[cursor++] = sum;
  23866. }
  23867. }
  23868. }
  23869. function withFlatten(source) {
  23870. var sum = 0;
  23871. for (var i = 0; i < this._size; i++) {
  23872. sum += source[i];
  23873. }
  23874. return sum;
  23875. }
  23876. return function(axis, out) {
  23877. return this._withPreprocess1(
  23878. axis, out,
  23879. withAxis, withFlatten
  23880. );
  23881. };
  23882. })().kwargs(),
  23883. /**
  23884. * Return the product of the array elements over the given axis.
  23885. * @param {Number} [axis]
  23886. * @param {NDArray} out
  23887. * @return {NDArray}
  23888. */
  23889. prod : (function() {
  23890. function withAxis(data, source, offsetStride, axisSize, stride) {
  23891. var cursor = 0;
  23892. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  23893. for (var i = 0; i < stride; i++) {
  23894. var prod = 1;
  23895. var idx = i + offset;
  23896. for (var j = 0; j < axisSize; j++) {
  23897. prod *= source[idx];
  23898. idx += stride;
  23899. }
  23900. data[cursor++] = prod;
  23901. }
  23902. }
  23903. }
  23904. function withFlatten(source) {
  23905. var prod = 1;
  23906. for (var i = 0; i < this._size; i++) {
  23907. prod *= source[i];
  23908. }
  23909. return prod;
  23910. }
  23911. return function(axis, out) {
  23912. return this._withPreprocess1(
  23913. axis, out,
  23914. withAxis, withFlatten
  23915. );
  23916. };
  23917. })().kwargs(),
  23918. /**
  23919. * Returns the average of the array elements along given axis.
  23920. * @param {Number} [axis]
  23921. * @param {NDArray} out
  23922. * @return {NDArray}
  23923. */
  23924. mean : (function() {
  23925. function withAxis(data, source, offsetStride, axisSize, stride) {
  23926. var cursor = 0;
  23927. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  23928. for (var i = 0; i < stride; i++) {
  23929. var sum = 0;
  23930. var idx = i + offset;
  23931. for (var j = 0; j < axisSize; j++) {
  23932. sum += source[idx];
  23933. idx += stride;
  23934. }
  23935. var mean = sum / axisSize;
  23936. data[cursor++] = mean;
  23937. }
  23938. }
  23939. }
  23940. function withFlatten(source) {
  23941. var sum = 0;
  23942. var len = source.length;
  23943. for (var i = 0; i < len; i++) {
  23944. sum += source[i];
  23945. }
  23946. var mean = sum / len;
  23947. return mean;
  23948. }
  23949. return function(axis, out) {
  23950. return this._withPreprocess1(
  23951. axis, out,
  23952. withAxis, withFlatten
  23953. );
  23954. };
  23955. })().kwargs(),
  23956. /**
  23957. * Return the variance of the array elements over the given axis.
  23958. * @param {Number} [axis]
  23959. * @param {NDArray} out
  23960. * @return {NDArray}
  23961. */
  23962. 'var' : (function() {
  23963. function withAxis(data, source, offsetStride, axisSize, stride) {
  23964. var cursor = 0;
  23965. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  23966. for (var i = 0; i < stride; i++) {
  23967. var sum = 0;
  23968. var idx = i + offset;
  23969. for (var j = 0; j < axisSize; j++) {
  23970. sum += source[idx];
  23971. idx += stride;
  23972. }
  23973. var mean = sum / axisSize;
  23974. var moments = 0;
  23975. idx = i + offset;
  23976. for (var j = 0; j < axisSize; j++) {
  23977. var diff = source[idx] - mean;
  23978. moments += diff * diff;
  23979. idx += stride;
  23980. }
  23981. data[cursor++] = moments / axisSize;
  23982. }
  23983. }
  23984. }
  23985. function withFlatten(source) {
  23986. var sum = 0;
  23987. var len = source.length;
  23988. for (var i = 0; i < len; i++) {
  23989. sum += source[i];
  23990. }
  23991. var mean = sum / len;
  23992. var moments = 0;
  23993. for (var i = 0; i < len; i++) {
  23994. var diff = source[i] - mean;
  23995. moments += diff * diff;
  23996. }
  23997. return moments / len;
  23998. }
  23999. return function(axis, out) {
  24000. return this._withPreprocess1(
  24001. axis, out,
  24002. withAxis, withFlatten
  24003. );
  24004. };
  24005. })().kwargs(),
  24006. /**
  24007. * Return the standard derivatione of the array elements
  24008. * over the given axis.
  24009. * @param {Number} [axis]
  24010. * @param {NDArray} out
  24011. * @return {NDArray}
  24012. */
  24013. std : (function() {
  24014. function withAxis(data, source, offsetStride, axisSize, stride) {
  24015. var cursor = 0;
  24016. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  24017. for (var i = 0; i < stride; i++) {
  24018. var sum = 0;
  24019. var idx = i + offset;
  24020. for (var j = 0; j < axisSize; j++) {
  24021. sum += source[idx];
  24022. idx += stride;
  24023. }
  24024. var mean = sum / axisSize;
  24025. var moments = 0;
  24026. idx = i + offset;
  24027. for (var j = 0; j < axisSize; j++) {
  24028. var diff = source[idx] - mean;
  24029. moments += diff * diff;
  24030. idx += stride;
  24031. }
  24032. data[cursor++] = Math.sqrt(moments / axisSize);
  24033. }
  24034. }
  24035. }
  24036. function withFlatten(source) {
  24037. var sum = 0;
  24038. var len = source.length;
  24039. for (var i = 0; i < len; i++) {
  24040. sum += source[i];
  24041. }
  24042. var mean = sum / len;
  24043. var moments = 0;
  24044. for (var i = 0; i < len; i++) {
  24045. var diff = source[i] - mean;
  24046. moments += diff * diff;
  24047. }
  24048. return Math.sqrt(moments / len);
  24049. }
  24050. return function(axis, out) {
  24051. return this._withPreprocess1(
  24052. axis, out,
  24053. withAxis, withFlatten
  24054. );
  24055. };
  24056. })().kwargs(),
  24057. /**
  24058. * Peak to peak (maximum - minimum) value along a given axis.
  24059. * @param {Number} [axis]
  24060. * @param {NDArray} out
  24061. * @return {NDArray}
  24062. */
  24063. ptp : (function() {
  24064. function withAxis(data, source, offsetStride, axisSize, stride) {
  24065. var cursor = 0;
  24066. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  24067. for (var i = 0; i < stride; i++) {
  24068. var idx = offset + i;
  24069. var min = source[idx];
  24070. var max = source[idx];
  24071. for (var j = 0; j < axisSize; j++) {
  24072. var d = source[idx];
  24073. if (d < min) {
  24074. min = d;
  24075. }
  24076. if (d > max) {
  24077. max = d;
  24078. }
  24079. idx += stride;
  24080. }
  24081. data[cursor++] = max - min;
  24082. }
  24083. }
  24084. }
  24085. function withFlatten(source) {
  24086. var min = source[0];
  24087. var max = source[0];
  24088. for (var i = 1; i < this._size; i++) {
  24089. if (source[i] < min) {
  24090. min = source[i];
  24091. }
  24092. if (source[i] > max) {
  24093. max = source[i];
  24094. }
  24095. }
  24096. return max - min;
  24097. }
  24098. return function(axis, out) {
  24099. return this._withPreprocess1(
  24100. axis, out,
  24101. withAxis, withFlatten
  24102. );
  24103. };
  24104. })().kwargs(),
  24105. /**
  24106. *
  24107. * @param {Number} [axis=-1]
  24108. * @param {string} [order='ascending']
  24109. * 'ascending' | 'descending'
  24110. * @return {NDArray}
  24111. */
  24112. // FIXME : V8 is quick sort, firefox and safari is merge sort
  24113. // order : ascending or desc
  24114. sort : function(axis, order) {
  24115. if (axis < 0) {
  24116. axis = this._shape.length + axis;
  24117. }
  24118. var compareFunc;
  24119. if (order === 'ascending') {
  24120. compareFunc = function(a, b) {
  24121. return a - b;
  24122. };
  24123. } else if( order === 'descending') {
  24124. compareFunc = function(a, b) {
  24125. return b - a;
  24126. };
  24127. }
  24128. var source = this._array;
  24129. var stride = calculateDimStride(this._shape, axis);
  24130. var axisSize = this._shape[axis];
  24131. var offsetStride = stride * axisSize;
  24132. var tmp = new Array(axisSize);
  24133. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  24134. for (var i = 0; i < stride; i++) {
  24135. var idx = offset + i;
  24136. for (var j = 0; j < axisSize; j++) {
  24137. tmp[j] = source[idx];
  24138. idx += stride;
  24139. }
  24140. tmp.sort(compareFunc);
  24141. var idx = offset + i;
  24142. // Copy back
  24143. for (var j = 0; j < axisSize; j++) {
  24144. source[idx] = tmp[j];
  24145. idx += stride;
  24146. }
  24147. }
  24148. }
  24149. return this;
  24150. }.kwargs({axis : -1, order : 'ascending'}),
  24151. /**
  24152. *
  24153. * @param {Number} [axis=-1]
  24154. * @param {string} [order='ascending']
  24155. * 'ascending' | 'descending'
  24156. * @param {NDArray} [out]
  24157. * @return {NDArray}
  24158. */
  24159. argsort : function(axis, order, out) {
  24160. if (axis < 0) {
  24161. axis = this._shape.length + axis;
  24162. }
  24163. if (!this._size) {
  24164. return;
  24165. }
  24166. if (out && !arrayEqual(this._shape, out._shape)) {
  24167. throw new Error(broadcastErrorMsg(this._shape, out._shape));
  24168. }
  24169. if (!out) {
  24170. out = new NDArray(this._dtype);
  24171. out.initFromShape(this._shape);
  24172. }
  24173. var data = out._array;
  24174. var compareFunc;
  24175. if (order === 'ascending') {
  24176. compareFunc = function(a, b) {
  24177. return tmp[a] - tmp[b];
  24178. };
  24179. } else if( order === 'descending') {
  24180. compareFunc = function(a, b) {
  24181. return tmp[b] - tmp[a];
  24182. };
  24183. }
  24184. var source = this._array;
  24185. var stride = calculateDimStride(this._shape, axis);
  24186. var axisSize = this._shape[axis];
  24187. var offsetStride = stride * axisSize;
  24188. var tmp = new Array(axisSize);
  24189. var indexList = new Array(axisSize);
  24190. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  24191. for (var i = 0; i < stride; i++) {
  24192. var idx = offset + i;
  24193. for (var j = 0; j < axisSize; j++) {
  24194. tmp[j] = source[idx];
  24195. indexList[j] = j;
  24196. idx += stride;
  24197. }
  24198. indexList.sort(compareFunc);
  24199. // Copy back
  24200. var idx = offset + i;
  24201. for (var j = 0; j < axisSize; j++) {
  24202. data[idx] = indexList[j];
  24203. idx += stride;
  24204. }
  24205. }
  24206. }
  24207. return out;
  24208. }.kwargs({axis : -1, order : 'ascending'}),
  24209. /**
  24210. * Return the cumulative sum of the elements along the given axis.
  24211. * @param {Number} [axis]
  24212. * @param {NDArray} out
  24213. * @return {NDArray}
  24214. */
  24215. cumsum : (function() {
  24216. function withAxis(data, source, offsetStride, axisSize, stride) {
  24217. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  24218. for (var i = 0; i < stride; i++) {
  24219. var idx = offset + i;
  24220. var prevIdx = idx;
  24221. data[idx] = source[idx];
  24222. for (var j = 1; j < axisSize; j++) {
  24223. prevIdx = idx;
  24224. idx += stride;
  24225. data[idx] = data[prevIdx] + source[idx];
  24226. }
  24227. }
  24228. }
  24229. }
  24230. function withFlatten(data, source) {
  24231. data[0] = source[0];
  24232. for (var i = 1; i < data.length; i++) {
  24233. data[i] = data[i-1] + source[i];
  24234. }
  24235. }
  24236. return function(axis, out) {
  24237. return this._withPreprocess2(
  24238. axis, out,
  24239. withAxis, withFlatten
  24240. );
  24241. };
  24242. })().kwargs(),
  24243. /**
  24244. * Return the cumulative product of the elements along the given axis.
  24245. * @param {Number} [axis]
  24246. * @param {NDArray} out
  24247. * @return {NDArray}
  24248. */
  24249. cumprod : (function() {
  24250. function withAxis(data, source, offsetStride, axisSize, stride) {
  24251. for (var offset = 0; offset < this._size; offset+=offsetStride) {
  24252. for (var i = 0; i < stride; i++) {
  24253. var idx = offset + i;
  24254. var prevIdx = idx;
  24255. data[idx] = source[idx];
  24256. for (var j = 1; j < axisSize; j++) {
  24257. prevIdx = idx;
  24258. idx += stride;
  24259. data[idx] = data[prevIdx] * source[idx];
  24260. }
  24261. }
  24262. }
  24263. }
  24264. function withFlatten(data, source) {
  24265. data[0] = source[0];
  24266. for (var i = 1; i < data.length; i++) {
  24267. data[i] = data[i-1] * source[i];
  24268. }
  24269. }
  24270. return function(axis, out) {
  24271. return this._withPreprocess2(
  24272. axis, out,
  24273. withAxis, withFlatten
  24274. );
  24275. };
  24276. })().kwargs(),
  24277. /**
  24278. * Dot product of two arrays.
  24279. *
  24280. * @param {NDArray|Number} b
  24281. * @param {NDArray} [out]
  24282. * @return {NDArray|Number}
  24283. */
  24284. dot : function() {
  24285. console.warn('TODO');
  24286. },
  24287. /**
  24288. * Mapped to region [min, max]
  24289. * @param {Number} mappedMin
  24290. * @param {Number} mappedMax
  24291. */
  24292. map : function(mappedMin, mappedMax) {
  24293. var input = this._array;
  24294. var output = this._array;
  24295. var min = input[0];
  24296. var max = input[0];
  24297. var l = this._size;
  24298. for (var i = 1; i < l; i++) {
  24299. var val = input[i];
  24300. if (val < min) {
  24301. min = val;
  24302. }
  24303. if (val > max) {
  24304. max = val;
  24305. }
  24306. }
  24307. var range = max - min;
  24308. var mappedRange = mappedMax - mappedMin;
  24309. for (var i = 0; i < l; i++) {
  24310. if (range === 0) {
  24311. output[i] = mappedMin;
  24312. } else {
  24313. var val = input[i];
  24314. var percent = (val - min) / range;
  24315. output[i] = mappedRange * percent + mappedMin;
  24316. }
  24317. }
  24318. return this;
  24319. },
  24320. /**
  24321. * Add
  24322. */
  24323. add : function(rightOperand, out) {
  24324. return this.binaryOperation(
  24325. this, rightOperand, E_ADD, out
  24326. );
  24327. },
  24328. /**
  24329. * Substract
  24330. */
  24331. sub : function(rightOperand, out) {
  24332. return this.binaryOperation(
  24333. this, rightOperand, E_SUB, out
  24334. );
  24335. },
  24336. /**
  24337. * Multiply
  24338. */
  24339. mul : function(rightOperand, out) {
  24340. return this.binaryOperation(
  24341. this, rightOperand, E_MUL, out
  24342. );
  24343. },
  24344. /**
  24345. * Divide
  24346. */
  24347. div : function(rightOperand, out) {
  24348. return this.binaryOperation(
  24349. this, rightOperand, E_DIV, out
  24350. );
  24351. },
  24352. /**
  24353. * mod
  24354. */
  24355. mod : function(rightOperand, out) {
  24356. return this.binaryOperation(
  24357. this, rightOperand, E_MOD, out
  24358. );
  24359. },
  24360. /**
  24361. * and
  24362. */
  24363. and : function(rightOperand, out) {
  24364. return this.binaryOperation(
  24365. this, rightOperand, E_AND, out
  24366. );
  24367. },
  24368. /**
  24369. * or
  24370. */
  24371. or : function(rightOperand, out) {
  24372. return this.binaryOperation(
  24373. this, rightOperand, E_OR, out
  24374. );
  24375. },
  24376. /**
  24377. * xor
  24378. */
  24379. xor : function(rightOperand, out) {
  24380. return this.binaryOperation(
  24381. this, rightOperand, E_XOR, out
  24382. );
  24383. },
  24384. /**
  24385. * equal
  24386. */
  24387. equal : function(rightOperand) {
  24388. return this.binaryOperation(
  24389. this, rightOperand, E_EQL, out
  24390. );
  24391. },
  24392. binaryOperation : function(lo, ro, op, out) {
  24393. // Broadcasting
  24394. // http://docs.scipy.org/doc/numpy/user/basics.broadcasting.html
  24395. var shape = [];
  24396. var isLoScalar = typeof(lo) === 'number';
  24397. var isRoScalar = typeof(ro) === 'number';
  24398. if (isLoScalar) {
  24399. shape = ro._shape.slice();
  24400. } else if (isRoScalar) {
  24401. shape = lo._shape.slice();
  24402. } else {
  24403. // Starts with the trailing dimensions
  24404. var cl = lo._shape.length-1;
  24405. var cr = ro._shape.length-1;
  24406. var loBroadCasted = lo;
  24407. var roBroadCasted = ro;
  24408. while (cl >= 0 && cr >= 0) {
  24409. if (lo._shape[cl] == 1) {
  24410. shape.unshift(ro._shape[cr]);
  24411. loBroadCasted = lo.repeat(ro._shape[cr], cl);
  24412. } else if(ro._shape[cr] == 1) {
  24413. shape.unshift(lo._shape[cl]);
  24414. roBroadCasted = ro.repeat(lo._shape[cl], cr);
  24415. } else if(ro._shape[cr] == lo._shape[cl]) {
  24416. shape.unshift(lo._shape[cl]);
  24417. } else {
  24418. throw new Error(broadcastErrorMsg(lo._shape, ro._shape));
  24419. }
  24420. cl --;
  24421. cr --;
  24422. }
  24423. for (var i = cl; i >= 0; i--) {
  24424. shape.unshift(lo._shape[i]);
  24425. }
  24426. for (var i = cr; i >= 0; i--) {
  24427. shape.unshift(ro._shape[i]);
  24428. }
  24429. lo = loBroadCasted;
  24430. ro = roBroadCasted;
  24431. }
  24432. if (!out) {
  24433. out = new NDArray(this._dtype);
  24434. out.initFromShape(shape);
  24435. } else {
  24436. if (! arrayEqual(shape, out._shape)) {
  24437. throw new Error(broadcastErrorMsg(shape, out._shape));
  24438. }
  24439. }
  24440. var outData = out._array;
  24441. var diffAxis;
  24442. var isLoLarger;
  24443. var loData;
  24444. var roData;
  24445. if (isLoScalar) {
  24446. diffAxis = ro._shape.length-1;
  24447. isLoLarger = false;
  24448. loData = lo;
  24449. roData = ro._array;
  24450. } else if(isRoScalar) {
  24451. diffAxis = lo._shape.length-1;
  24452. isLoLarger = true;
  24453. roData = ro;
  24454. loData = lo._array;
  24455. } else {
  24456. diffAxis = Math.abs(lo._shape.length - ro._shape.length);
  24457. isLoLarger = lo._shape.length >= ro._shape.length;
  24458. loData = lo._array;
  24459. roData = ro._array;
  24460. }
  24461. var stride = calculateDimStride(shape, diffAxis);
  24462. var axisSize = shape[diffAxis];
  24463. var offsetStride = stride * axisSize;
  24464. var offsetRepeats = out._size / offsetStride;
  24465. var _a, _b, res;
  24466. var idx = 0;
  24467. if (isLoLarger) {
  24468. if(isRoScalar) {
  24469. for (var c = 0; c < offsetRepeats; c++) {
  24470. for (var i = 0; i < offsetStride; i++) {
  24471. _a = loData[idx]; _b = roData;
  24472. switch (op) {
  24473. case E_ADD: res = _a + _b; break;
  24474. case E_SUB: res = _a - _b; break;
  24475. case E_MUL: res = _a * _b; break;
  24476. case E_DIV: res = _a / _b; break;
  24477. case E_MOD: res = _a % _b; break;
  24478. case E_AND: res = _a & _b; break;
  24479. case E_OR: res = _a | _b; break;
  24480. case E_XOR: res = _a ^ _b; break;
  24481. case E_EQL: res = _a == _b; break;
  24482. default: throw new Error('Unkown operation ' + op);
  24483. }
  24484. outData[idx] = res;
  24485. idx ++;
  24486. }
  24487. }
  24488. } else {
  24489. for (var c = 0; c < offsetRepeats; c++) {
  24490. for (var i = 0; i < offsetStride; i++) {
  24491. _a = loData[idx]; _b = roData[i];
  24492. switch (op) {
  24493. case E_ADD: res = _a + _b; break;
  24494. case E_SUB: res = _a - _b; break;
  24495. case E_MUL: res = _a * _b; break;
  24496. case E_DIV: res = _a / _b; break;
  24497. case E_MOD: res = _a % _b; break;
  24498. case E_AND: res = _a & _b; break;
  24499. case E_OR: res = _a | _b; break;
  24500. case E_XOR: res = _a ^ _b; break;
  24501. case E_EQL: res = _a == _b; break;
  24502. default: throw new Error('Unkown operation ' + op);
  24503. }
  24504. outData[idx] = res;
  24505. idx ++;
  24506. }
  24507. }
  24508. }
  24509. } else {
  24510. if (isLoScalar) {
  24511. for (var c = 0; c < offsetRepeats; c++) {
  24512. for (var i = 0; i < offsetStride; i++) {
  24513. _a = loData; _b = roData[idx];
  24514. switch (op) {
  24515. case E_ADD: res = _a + _b; break;
  24516. case E_SUB: res = _a - _b; break;
  24517. case E_MUL: res = _a * _b; break;
  24518. case E_DIV: res = _a / _b; break;
  24519. case E_MOD: res = _a % _b; break;
  24520. case E_AND: res = _a & _b; break;
  24521. case E_OR: res = _a | _b; break;
  24522. case E_XOR: res = _a ^ _b; break;
  24523. case E_EQL: res = _a == _b; break;
  24524. default: throw new Error('Unkown operation ' + op);
  24525. }
  24526. outData[idx] = res;
  24527. idx ++;
  24528. }
  24529. }
  24530. } else {
  24531. for (var c = 0; c < offsetRepeats; c++) {
  24532. for (var i = 0; i < offsetStride; i++) {
  24533. _a = loData[idx]; _b = roData[i];
  24534. switch (op) {
  24535. case E_ADD: res = _a + _b; break;
  24536. case E_SUB: res = _a - _b; break;
  24537. case E_MUL: res = _a * _b; break;
  24538. case E_DIV: res = _a / _b; break;
  24539. case E_MOD: res = _a % _b; break;
  24540. case E_AND: res = _a & _b; break;
  24541. case E_OR: res = _a | _b; break;
  24542. case E_XOR: res = _a ^ _b; break;
  24543. case E_EQL: res = _a == _b; break;
  24544. default: throw new Error('Unkown operation ' + op);
  24545. }
  24546. outData[idx] = res;
  24547. idx ++;
  24548. }
  24549. }
  24550. }
  24551. }
  24552. return out;
  24553. },
  24554. /**
  24555. * negtive
  24556. */
  24557. neg : function() {
  24558. var data = this._array;
  24559. for (var i = 0; i < this._size; i++) {
  24560. data[i] = -data[i];
  24561. }
  24562. return this;
  24563. },
  24564. /**
  24565. * @return {NDArray} this
  24566. */
  24567. sin : function() {
  24568. return this._mathAdapter(Math.sin);
  24569. },
  24570. /**
  24571. * @return {NDArray} this
  24572. */
  24573. cos : function() {
  24574. return this._mathAdapter(Math.cos);
  24575. },
  24576. /**
  24577. * @return {NDArray} this
  24578. */
  24579. tan : function() {
  24580. return this._mathAdapter(Math.tan);
  24581. },
  24582. /**
  24583. * @return {NDArray} this
  24584. */
  24585. abs : function() {
  24586. return this._mathAdapter(Math.abs);
  24587. },
  24588. /**
  24589. * @return {NDArray} this
  24590. */
  24591. log : function() {
  24592. return this._mathAdapter(Math.log);
  24593. },
  24594. /**
  24595. * @return {NDArray} this
  24596. */
  24597. sqrt : function() {
  24598. return this._mathAdapter(Math.sqrt);
  24599. },
  24600. /**
  24601. * @return {NDArray} this
  24602. */
  24603. ceil : function() {
  24604. return this._mathAdapter(Math.ceil);
  24605. },
  24606. /**
  24607. * @return {NDArray} this
  24608. */
  24609. floor : function() {
  24610. return this._mathAdapter(Math.floor);
  24611. },
  24612. /**
  24613. * @return {NDArray} this
  24614. */
  24615. pow : function(exp) {
  24616. var data = this._array;
  24617. for (var i = 0; i < this._size; i++) {
  24618. data[i] = Math.pow(data[i], exp);
  24619. }
  24620. return this;
  24621. },
  24622. _mathAdapter : function(mathFunc) {
  24623. var data = this._array;
  24624. for (var i = 0; i < this._size; i++) {
  24625. data[i] = mathFunc(data[i]);
  24626. }
  24627. return this;
  24628. },
  24629. /**
  24630. * @param {Number} decimals
  24631. * @return {NDArray} this
  24632. */
  24633. round : function(decimals) {
  24634. decimals = Math.floor(decimals || 0);
  24635. var offset = Math.pow(10, decimals);
  24636. var data = this._array;
  24637. if (decimals === 0) {
  24638. for (var i = 0; i < this._size; i++) {
  24639. data[i] = Math.round(data[i]);
  24640. }
  24641. } else {
  24642. for (var i = 0; i < this._size; i++) {
  24643. data[i] = Math.round(data[i] * offset) / offset;
  24644. }
  24645. }
  24646. return this;
  24647. },
  24648. /**
  24649. * @param {Number} min
  24650. * @param {Number} max
  24651. * Clip to [min, max]
  24652. */
  24653. clip : function(min, max) {
  24654. // TODO : Support array_like param
  24655. var data = this._array;
  24656. for (var i = 0; i < this._size; i++) {
  24657. data[i] = Math.max(Math.min(data[i], max), min);
  24658. }
  24659. return this;
  24660. },
  24661. /**
  24662. * Indexing array, support range indexing
  24663. * @param {string} index
  24664. * Index syntax can be an integer 1, 2, 3
  24665. * Or more complex range indexing
  24666. * '1:2'
  24667. * '1:2, 1:2'
  24668. * '1:2, :'
  24669. * More about the indexing syntax can check the doc of numpy ndarray
  24670. * @param {NDArray} [out]
  24671. * @return {NDArray} New created sub array, or out if given
  24672. */
  24673. get : function(index, out) {
  24674. if (typeof(index) == 'number') {
  24675. index = index.toString();
  24676. }
  24677. var strides = calculateDimStrides(this._shape);
  24678. var res = this._parseRanges(index);
  24679. var ranges = res[0];
  24680. var shape = res[1];
  24681. if (ranges.length > this._shape.length) {
  24682. throw new Error('Too many indices');
  24683. }
  24684. // Get data
  24685. var len = ranges.length;
  24686. var data;
  24687. if (shape.length) {
  24688. out = new NDArray(this._dtype);
  24689. out.initFromShape(shape);
  24690. data = out._array;
  24691. } else {
  24692. data = [];
  24693. }
  24694. var source = this._array;
  24695. var cursor = 0;
  24696. function getPiece(axis, offset) {
  24697. var range = ranges[axis];
  24698. var stride = strides[axis];
  24699. if (axis < len-1) {
  24700. if (range[2] > 0) {
  24701. for (var i = range[0]; i < range[1]; i += range[2]) {
  24702. getPiece(axis+1, offset + stride * i);
  24703. }
  24704. } else {
  24705. for (var i = range[0]; i > range[1]; i += range[2]) {
  24706. getPiece(axis+1, offset + stride * i);
  24707. }
  24708. }
  24709. } else {
  24710. if (range[2] > 0) {
  24711. for (var i = range[0]; i < range[1]; i += range[2]) {
  24712. for (var j = 0; j < stride; j++) {
  24713. data[cursor++] = source[i*stride + j + offset];
  24714. }
  24715. }
  24716. } else {
  24717. for (var i = range[0]; i > range[1]; i += range[2]) {
  24718. for (var j = 0; j < stride; j++) {
  24719. data[cursor++] = source[i*stride + j + offset];
  24720. }
  24721. }
  24722. }
  24723. }
  24724. }
  24725. getPiece(0, 0);
  24726. if (shape.length) {
  24727. // Return scalar
  24728. return out;
  24729. } else {
  24730. return data[0];
  24731. }
  24732. },
  24733. /**
  24734. *
  24735. * @param {string} index
  24736. * index syntax can be an integer 1, 2, 3
  24737. * Or more complex range indexing
  24738. * '1:2'
  24739. * '1:2, 1:2'
  24740. * '1:2, :'
  24741. * More about the indexing syntax can check the doc of numpy ndarray
  24742. * @param {NDArray} ndarray Ndarray data source
  24743. * @return {NDArray} this
  24744. */
  24745. set : function(index, narray) {
  24746. if (typeof(index) == 'number') {
  24747. index = index.toString();
  24748. }
  24749. var strides = calculateDimStrides(this._shape);
  24750. var res = this._parseRanges(index);
  24751. var ranges = res[0];
  24752. var shape = res[1];
  24753. if (ranges.length > this._shape.length) {
  24754. throw new Error('Too many indices');
  24755. }
  24756. var isScalar = typeof(narray) == 'number';
  24757. var len = ranges.length;
  24758. var data = this._array;
  24759. if (isScalar) {
  24760. // Set with a single scalar
  24761. var source = narray;
  24762. } else {
  24763. if (!arrayEqual(shape, narray.shape())) {
  24764. throw new Error(broadcastErrorMsg(shape, narray.shape()));
  24765. }
  24766. var source = narray._array;
  24767. }
  24768. var cursor = 0;
  24769. var setPiece = function(axis, offset) {
  24770. var range = ranges[axis];
  24771. var stride = strides[axis];
  24772. if (axis < len-1) {
  24773. if (range[2] > 0) {
  24774. for (var i = range[0]; i < range[1]; i += range[2]) {
  24775. setPiece(axis+1, offset + stride * i);
  24776. }
  24777. } else {
  24778. for (var i = range[0]; i > range[1]; i += range[2]) {
  24779. setPiece(axis+1, offset + stride * i);
  24780. }
  24781. }
  24782. } else {
  24783. if (range[2] > 0) {
  24784. for (var i = range[0]; i < range[1]; i += range[2]) {
  24785. for (var j = 0; j < stride; j++) {
  24786. if (isScalar) {
  24787. data[i*stride + j + offset] = source;
  24788. } else {
  24789. data[i*stride + j + offset] = source[cursor++];
  24790. }
  24791. }
  24792. }
  24793. } else {
  24794. for (var i = range[0]; i > range[1]; i += range[2]) {
  24795. for (var j = 0; j < stride; j++) {
  24796. if (isScalar) {
  24797. data[i*stride + j + offset] = source;
  24798. } else {
  24799. data[i*stride + j + offset] = source[cursor++];
  24800. }
  24801. }
  24802. }
  24803. }
  24804. }
  24805. };
  24806. setPiece(0, 0);
  24807. return this;
  24808. },
  24809. /**
  24810. * Insert values along the given axis before the given indices.
  24811. * @param {Number|Array} obj
  24812. * Object that defines the index or indices before
  24813. * which values is inserted.
  24814. * @param {Number|Array|NDArray} values
  24815. * Values to insert
  24816. * @param {Number} [axis]
  24817. * @return {NDArray} this
  24818. */
  24819. insert : function(obj, values, axis) {
  24820. var data = this._array;
  24821. var isObjScalar = false;
  24822. if (typeof(obj) === 'number') {
  24823. obj = [obj];
  24824. isObjScalar = true;
  24825. }
  24826. if (typeof(values) === 'number') {
  24827. values = new NDArray([values]);
  24828. } else if (values instanceof Array) {
  24829. values = new NDArray(values);
  24830. }
  24831. if (typeof(axis) === 'undefined') {
  24832. this._shape = [this._size];
  24833. axis = 0;
  24834. }
  24835. // Checking if indices is valid
  24836. var prev = obj[0];
  24837. var axisSize = this._shape[axis];
  24838. for (var i = 0; i < obj.length; i++) {
  24839. if (obj[i] < 0) {
  24840. obj[i] = axisSize + obj[i];
  24841. }
  24842. if (obj[i] > axisSize) {
  24843. throw new Error(indexOutofBoundsErrorMsg(obj[i]));
  24844. }
  24845. if (obj[i] < prev) {
  24846. throw new Error('Index must be in ascending order');
  24847. }
  24848. prev = obj[i];
  24849. }
  24850. // Broadcasting
  24851. var targetShape = this._shape.slice();
  24852. if (isObjScalar) {
  24853. targetShape.splice(axis, 1);
  24854. } else {
  24855. targetShape[axis] = obj.length;
  24856. }
  24857. var sourceShape = values._shape;
  24858. var cs = sourceShape.length - 1;
  24859. var ct = targetShape.length - 1;
  24860. var valueBroadcasted = values;
  24861. while (cs >= 0 && ct >= 0) {
  24862. if (sourceShape[cs] === 1) {
  24863. valueBroadcasted = values.repeat(targetShape[ct], cs);
  24864. } else if(sourceShape[cs] !== targetShape[ct]) {
  24865. throw new Error(broadcastErrorMsg(sourceShape, targetShape));
  24866. }
  24867. cs --;
  24868. ct --;
  24869. }
  24870. values = valueBroadcasted;
  24871. // Calculate indices to insert
  24872. var stride = calculateDimStride(this._shape, axis);
  24873. var axisSize = this._shape[axis];
  24874. var offsetStride = axisSize * stride;
  24875. var offsetRepeats = this._size / offsetStride;
  24876. var objLen = obj.length;
  24877. var indices = new Uint32Array(offsetRepeats * objLen);
  24878. var cursor = 0;
  24879. for (var offset = 0; offset < this._size; offset += offsetStride) {
  24880. for (var i = 0; i < objLen; i++) {
  24881. var objIdx = obj[i];
  24882. indices[cursor++] = offset + objIdx * stride;
  24883. }
  24884. }
  24885. var resShape = this._shape.slice();
  24886. resShape[axis] += obj.length;
  24887. var resSize = getSize(resShape);
  24888. if (this._array.length < resSize) {
  24889. var data = new ArrayConstructor[this._dtype](resSize);
  24890. } else {
  24891. var data = this._array;
  24892. }
  24893. var source = this._array;
  24894. var valuesArr = values._array;
  24895. var idxCursor = indices.length - 1;
  24896. var end = this._size;
  24897. var start = indices[idxCursor];
  24898. var dataCursor = resSize - 1;
  24899. var valueCursor = values._size - 1;
  24900. while (idxCursor >= 0) {
  24901. // Copy source data;
  24902. for (var i = end - 1; i >= start; i--) {
  24903. data[dataCursor--] = source[i];
  24904. }
  24905. end = start;
  24906. start = indices[--idxCursor];
  24907. // Copy inserted data;
  24908. for (var i = 0; i < stride; i++) {
  24909. if (valueCursor < 0) {
  24910. valueCursor = values._size - 1;
  24911. }
  24912. data[dataCursor--] = valuesArr[valueCursor--];
  24913. }
  24914. }
  24915. // Copy the rest
  24916. for (var i = end - 1; i >= 0; i--) {
  24917. data[dataCursor--] = source[i];
  24918. }
  24919. this._array = data;
  24920. this._shape = resShape;
  24921. this._size = resSize;
  24922. return this;
  24923. }.kwargs(),
  24924. append : function() {
  24925. console.warn('TODO');
  24926. }.kwargs(),
  24927. /**
  24928. * Delete values along the axis
  24929. * @param {Array|Number} obj
  24930. * @param {Number} [axis]
  24931. * @return {NDArray} this
  24932. */
  24933. 'delete' : function(obj, axis) {
  24934. var data = this._array;
  24935. if (typeof(obj) === 'number') {
  24936. obj = [obj];
  24937. }
  24938. var size = this._size;
  24939. if (typeof(axis) === 'undefined') {
  24940. this._shape = [size];
  24941. axis = 0;
  24942. }
  24943. var stride = calculateDimStride(this._shape, axis);
  24944. var axisSize = this._shape[axis];
  24945. var offsetStride = stride * axisSize;
  24946. var cursor = 0;
  24947. for (var offset = 0; offset < size; offset += offsetStride) {
  24948. var start = 0;
  24949. var end = obj[0];
  24950. var objCursor = 0;
  24951. while(objCursor < obj.length) {
  24952. if (end < 0) {
  24953. end = end + axisSize;
  24954. }
  24955. if (end > axisSize) {
  24956. throw new Error(indexOutofBoundsErrorMsg(end));
  24957. }
  24958. if (end < start) {
  24959. throw new Error('Index must be in ascending order');
  24960. }
  24961. for (var i = start; i < end; i++) {
  24962. for (var j = 0; j < stride; j++) {
  24963. data[cursor++] = data[i * stride + j + offset];
  24964. }
  24965. }
  24966. start = end + 1;
  24967. end = obj[++objCursor];
  24968. }
  24969. // Copy the rest
  24970. for (var i = start; i < axisSize; i++) {
  24971. for (var j = 0; j < stride; j++) {
  24972. data[cursor++] = data[i * stride + j + offset];
  24973. }
  24974. }
  24975. }
  24976. this._shape[axis] -= obj.length;
  24977. this._size = getSize(this._shape);
  24978. return this;
  24979. }.kwargs(),
  24980. _parseRanges : function(index) {
  24981. var rangesStr = index.split(/\s*,\s*/);
  24982. // Parse range of each axis
  24983. var ranges = [];
  24984. var shape = [];
  24985. var j = 0;
  24986. for (var i = 0; i < rangesStr.length; i++) {
  24987. if (rangesStr[i] === '...') {
  24988. var end = this._shape.length - (rangesStr.length - i);
  24989. while (j <= end) {
  24990. ranges.push([0, this._shape[j], 1]);
  24991. shape.push(this._shape[j]);
  24992. j++;
  24993. }
  24994. } else {
  24995. var range = parseRange(rangesStr[i], this._shape[j]);
  24996. ranges.push(range);
  24997. if(rangesStr[i].indexOf(':') >= 0) {
  24998. var size = Math.floor((range[1] - range[0]) / range[2]);
  24999. size = size < 0 ? 0 : size;
  25000. // Get a range not a item
  25001. shape.push(size);
  25002. }
  25003. j++;
  25004. }
  25005. }
  25006. // Copy the lower dimension size
  25007. for (; j < this._shape.length; j++) {
  25008. shape.push(this._shape[j]);
  25009. }
  25010. return [ranges, shape];
  25011. },
  25012. /**
  25013. * Export normal js array
  25014. * @return {Array}
  25015. */
  25016. toArray : function() {
  25017. var data = this._array;
  25018. var cursor = 0;
  25019. var shape = this._shape;
  25020. var dim = shape.length;
  25021. function create(axis, out) {
  25022. var len = shape[axis];
  25023. for (var i = 0; i < len; i++) {
  25024. if (axis < dim-1) {
  25025. create(axis+1, out[i] = []);
  25026. } else {
  25027. out[i] = data[cursor++];
  25028. }
  25029. }
  25030. }
  25031. var output = [];
  25032. create(0, output);
  25033. return output;
  25034. },
  25035. /**
  25036. * Create a copy of self
  25037. * @return {NDArray}
  25038. */
  25039. copy : function() {
  25040. var numArr = new NDArray();
  25041. numArr._array = ArraySlice.call(this._array);
  25042. numArr._shape = this._shape.slice();
  25043. numArr._dtype = this._dtype;
  25044. numArr._size = this._size;
  25045. return numArr;
  25046. },
  25047. constructor : NDArray
  25048. };
  25049. /**
  25050. *
  25051. * @param {Number} [min=0]
  25052. * @param {Number} max
  25053. * @param {Number} [step=1]
  25054. * @param {string} [dtype]
  25055. * @return {NDArray}
  25056. */
  25057. NDArray.range = function(min, max, step, dtype) {
  25058. var args = ArraySlice.call(arguments);
  25059. // Last argument describe the data type of ndarray
  25060. var lastArg = args[args.length-1];
  25061. if (typeof(lastArg) == 'string') {
  25062. var dtype = lastArg;
  25063. args.pop();
  25064. }
  25065. if (args.length === 1) {
  25066. max = args[0];
  25067. step = 1;
  25068. min = 0;
  25069. } else if(args.length == 2) {
  25070. step = 1;
  25071. }
  25072. dtype = dtype || 'number';
  25073. var array = new ArrayConstructor[dtype](Math.ceil((max - min)/step));
  25074. var cursor = 0;
  25075. for (var i = min; i < max; i+=step) {
  25076. array[cursor++] = i;
  25077. }
  25078. var ndarray = new NDArray();
  25079. ndarray._array = array;
  25080. ndarray._shape = [array.length];
  25081. ndarray._dtype = dtype;
  25082. ndarray._size = array.length;
  25083. return ndarray;
  25084. }.kwargs();
  25085. /**
  25086. *
  25087. * @param {Array} shape
  25088. * @param {String} [dtype]
  25089. * @return {NDArray}
  25090. */
  25091. NDArray.zeros = function(shape, dtype) {
  25092. var ret = new NDArray(dtype);
  25093. ret.initFromShape(shape);
  25094. return ret;
  25095. }.kwargs();
  25096. /**
  25097. * Python like array indexing
  25098. * http://www.python.org/dev/peps/pep-0204/
  25099. *
  25100. * @param {string} index
  25101. * index can be a simple integer 1,2,3,
  25102. * or a range 2:10, 2:10:1
  25103. * example :
  25104. * 2:10 => [2, 10, 1],
  25105. * 10:2:-2 => [10, 2, -2],
  25106. * : => [0, dimSize, 1],
  25107. * ::-1 => [dimSize-1, -1, -1],
  25108. * @param {number} dimSize
  25109. * @return {Array} a tuple array [startOffset, endOffset, sliceStep]
  25110. */
  25111. function parseRange(index, dimSize) {
  25112. if (index.indexOf(':') >= 0) {
  25113. // Range indexing;
  25114. var res = index.split(/\s*:\s*/);
  25115. var step = parseInt(res[2] || 1, 10);
  25116. var start, end;
  25117. if (step === 0) {
  25118. throw new Error('Slice step cannot be zero');
  25119. }
  25120. else if (step > 0) {
  25121. start = parseInt(res[0] || 0, 10);
  25122. end = parseInt(res[1] || dimSize, 10);
  25123. }
  25124. else {
  25125. start = parseInt(res[0] || dimSize - 1, 10);
  25126. end = parseInt(res[1] || -1, 10);
  25127. }
  25128. // Negtive offset
  25129. if (start < 0) {
  25130. start = dimSize + start;
  25131. }
  25132. // Negtive offset
  25133. if (end < 0 && res[1]) {
  25134. end = dimSize + end;
  25135. }
  25136. if (step > 0) {
  25137. // Clamp to [0-dimSize]
  25138. start = Math.max(Math.min(dimSize, start), 0);
  25139. // Clamp to [0-dimSize]
  25140. end = Math.max(Math.min(dimSize, end), 0);
  25141. } else {
  25142. // Clamp to [0-dimSize)
  25143. start = Math.max(Math.min(dimSize-1, start), -1);
  25144. // Clamp to [0-dimSize)
  25145. end = Math.max(Math.min(dimSize-1, end), -1);
  25146. }
  25147. return [start, end, step];
  25148. } else {
  25149. var start = parseInt(index, 10);
  25150. // Negtive offset
  25151. if (start < 0) {
  25152. start = dimSize + start;
  25153. }
  25154. if (start < 0 || start > dimSize) {
  25155. throw new Error(indexOutofBoundsErrorMsg(index));
  25156. }
  25157. // Clamp to [0-dimSize)
  25158. start = Math.max(Math.min(dimSize-1, start), 0);
  25159. return [start, start+1, 1];
  25160. }
  25161. }
  25162. function getSize(shape) {
  25163. var size = shape[0];
  25164. for (var i = 1; i < shape.length; i++) {
  25165. size *= shape[i];
  25166. }
  25167. return size;
  25168. }
  25169. function getDimension(array) {
  25170. var dim = 1;
  25171. var el = array[0];
  25172. while (el instanceof Array) {
  25173. el = el[0];
  25174. dim ++;
  25175. }
  25176. return dim;
  25177. }
  25178. function getShape(array) {
  25179. var shape = [array.length];
  25180. var el = array[0];
  25181. while (el instanceof Array) {
  25182. shape.push(el.length);
  25183. el = el[0];
  25184. }
  25185. return shape;
  25186. }
  25187. function calculateDimStride(shape, axis) {
  25188. if (axis == shape.length-1) {
  25189. return 1;
  25190. }
  25191. var stride = shape[axis+1];
  25192. for (var i = axis+2; i < shape.length; i++) {
  25193. stride *= shape[i];
  25194. }
  25195. return stride;
  25196. }
  25197. function calculateDimStrides(shape) {
  25198. // Calculate stride of each axis
  25199. var strides = [];
  25200. var tmp = 1;
  25201. var len = getSize(shape);
  25202. for (var i = 0; i < shape.length; i++) {
  25203. tmp *= shape[i];
  25204. strides.push(len / tmp);
  25205. }
  25206. return strides;
  25207. }
  25208. function arrayEqual(arr1, arr2) {
  25209. if (arr1.length !== arr2.length) {
  25210. return false;
  25211. }
  25212. for (var i = 0; i <arr1.length; i++) {
  25213. if (arr1[i] !== arr2[i]) {
  25214. return false;
  25215. }
  25216. }
  25217. return true;
  25218. }
  25219. function broadcastErrorMsg(shape1, shape2) {
  25220. return 'Shape ('
  25221. + shape1.toString() + ') (' + shape2.toString()
  25222. +') could not be broadcast together';
  25223. }
  25224. function axisOutofBoundsErrorMsg(axis) {
  25225. return 'Axis ' + axis + ' out of bounds';
  25226. }
  25227. function indexOutofBoundsErrorMsg(idx) {
  25228. return 'Index ' + idx + ' out of bounds';
  25229. }
  25230. return NDArray;
  25231. });
  25232. /**
  25233. * echarts图表类:chord diagram
  25234. *
  25235. * @author pissang (https://github.com/pissang/)
  25236. *
  25237. */
  25238. define('echarts/chart/chord',['require','../util/shape/chord','../component/base','./calculableBase','../config','../util/ecData','zrender/tool/util','zrender/tool/vector','../util/ndarray','../chart'],function(require) {
  25239. require('../util/shape/chord');
  25240. var _devicePixelRatio = window.devicePixelRatio || 1;
  25241. function Chord(messageCenter, zr, option, component) {
  25242. var self = this;
  25243. var CompomentBase = require('../component/base');
  25244. CompomentBase.call(this, zr);
  25245. var CalculableBase = require('./calculableBase');
  25246. CalculableBase.call(this, zr, option);
  25247. var ecConfig = require('../config');
  25248. var ecData = require('../util/ecData');
  25249. var zrUtil = require('zrender/tool/util');
  25250. var vec2 = require('zrender/tool/vector');
  25251. var NDArray = require('../util/ndarray');
  25252. var legend;
  25253. var getColor;
  25254. var isSelected;
  25255. var series;
  25256. this.type = ecConfig.CHART_TYPE_CHORD;
  25257. var _zlevelBase = self.getZlevelBase();
  25258. var chordSerieSample;
  25259. // Config
  25260. var chordSeries = [];
  25261. var groups;
  25262. var startAngle;
  25263. var clockWise;
  25264. var innerRadius;
  25265. var outerRadius;
  25266. var padding;
  25267. var sortGroups;
  25268. var sortSubGroups;
  25269. var center;
  25270. var showScale;
  25271. var showScaleText;
  25272. var strokeFix = 0;
  25273. // Adjacency matrix
  25274. var dataMat;
  25275. var sectorShapes = [];
  25276. var chordShapes = [];
  25277. var scaleLineLength = 4;
  25278. var scaleUnitAngle = 4;
  25279. function _buildShape() {
  25280. self.selectedMap = {};
  25281. chordSeries = [];
  25282. chordSerieSample = null;
  25283. var matrix = [];
  25284. var serieNumber = 0;
  25285. for (var i = 0, l = series.length; i < l; i++) {
  25286. if (series[i].type === self.type) {
  25287. // Use the config of first chord serie
  25288. if (!chordSerieSample) {
  25289. chordSerieSample = series[i];
  25290. self.reformOption(chordSerieSample);
  25291. }
  25292. var _isSelected = isSelected(series[i].name);
  25293. // Filter by selected serie
  25294. self.selectedMap[series[i].name] = _isSelected;
  25295. if (!_isSelected) {
  25296. continue;
  25297. }
  25298. chordSeries.push(series[i]);
  25299. matrix.push(series[i].matrix);
  25300. serieNumber++;
  25301. }
  25302. }
  25303. if (!chordSerieSample) {
  25304. return;
  25305. }
  25306. if (!chordSeries.length) {
  25307. return;
  25308. }
  25309. var zrWidth = zr.getWidth();
  25310. var zrHeight = zr.getHeight();
  25311. var zrSize = Math.min(zrWidth, zrHeight);
  25312. groups = chordSerieSample.data;
  25313. startAngle = chordSerieSample.startAngle;
  25314. // Constrain to [0, 360]
  25315. startAngle = startAngle % 360;
  25316. if (startAngle < 0) {
  25317. startAngle = startAngle + 360;
  25318. }
  25319. clockWise = chordSerieSample.clockWise;
  25320. innerRadius = self.parsePercent(
  25321. chordSerieSample.radius[0],
  25322. zrSize / 2
  25323. );
  25324. outerRadius = self.parsePercent(
  25325. chordSerieSample.radius[1],
  25326. zrSize / 2
  25327. );
  25328. padding = chordSerieSample.padding;
  25329. sortGroups = chordSerieSample.sort;
  25330. sortSubGroups = chordSerieSample.sortSub;
  25331. showScale = chordSerieSample.showScale;
  25332. showScaleText = chordSerieSample.showScaleText;
  25333. center = [
  25334. self.parsePercent(chordSerieSample.center[0], zrWidth),
  25335. self.parsePercent(chordSerieSample.center[1], zrHeight)
  25336. ];
  25337. var fixSize =
  25338. chordSerieSample.itemStyle.normal.chordStyle.lineStyle.width -
  25339. chordSerieSample.itemStyle.normal.lineStyle.width;
  25340. strokeFix =
  25341. (fixSize / _devicePixelRatio) / innerRadius / Math.PI * 180;
  25342. dataMat = new NDArray(matrix);
  25343. dataMat = dataMat._transposelike([1, 2, 0]);
  25344. // Filter the data by selected legend
  25345. var res = _filterData(dataMat, groups);
  25346. dataMat = res[0];
  25347. groups = res[1];
  25348. // Check if data is valid
  25349. var shape = dataMat.shape();
  25350. if (shape[0] !== shape[1] || shape[0] !== groups.length) {
  25351. throw new Error('Data not valid');
  25352. }
  25353. if (shape[0] === 0 || shape[2] === 0) {
  25354. return;
  25355. }
  25356. // Down to 2 dimension
  25357. // More convenient for angle calculating and sort
  25358. dataMat.reshape(shape[0], shape[1] * shape[2]);
  25359. // Processing data
  25360. var sumOut = dataMat.sum(1);
  25361. var percents = sumOut.mul(1 / sumOut.sum());
  25362. var groupNumber = shape[0];
  25363. var subGroupNumber = shape[1] * shape[2];
  25364. var groupAngles = percents.mul(360 - padding * groupNumber);
  25365. var subGroupAngles = dataMat.div(
  25366. dataMat.sum(1).reshape(groupNumber, 1)
  25367. );
  25368. subGroupAngles = subGroupAngles.mul(
  25369. groupAngles.sub(strokeFix * 2).reshape(groupNumber, 1)
  25370. );
  25371. switch (sortGroups) {
  25372. case 'ascending':
  25373. case 'descending':
  25374. var groupIndices = groupAngles
  25375. .argsort(0, sortGroups);
  25376. groupAngles['sort'](0, sortGroups);
  25377. sumOut['sort'](0, sortGroups);
  25378. break;
  25379. default:
  25380. var groupIndices = NDArray.range(shape[0]);
  25381. }
  25382. switch (sortSubGroups) {
  25383. case 'ascending':
  25384. case 'descending':
  25385. var subGroupIndices = subGroupAngles
  25386. .argsort(1, sortSubGroups);
  25387. subGroupAngles['sort'](1, sortSubGroups);
  25388. break;
  25389. default:
  25390. var subGroupIndices = NDArray
  25391. .range(subGroupNumber)
  25392. .reshape(1, subGroupNumber)
  25393. .repeat(groupNumber, 0);
  25394. }
  25395. var groupIndicesArr = groupIndices.toArray();
  25396. var groupAnglesArr = groupAngles.toArray();
  25397. var subGroupIndicesArr = subGroupIndices.toArray();
  25398. var subGroupAnglesArr = subGroupAngles.toArray();
  25399. var sumOutArray = sumOut.toArray();
  25400. var sectorAngles = [];
  25401. var chordAngles = new NDArray(
  25402. groupNumber, subGroupNumber
  25403. ).toArray();
  25404. var values = [];
  25405. var start = 0;
  25406. var end = 0;
  25407. for (var i = 0; i < groupNumber; i++) {
  25408. var sortedIdx = groupIndicesArr[i];
  25409. values[sortedIdx] = sumOutArray[i];
  25410. end = start + groupAnglesArr[i];
  25411. sectorAngles[sortedIdx] = [start, end];
  25412. // Sub Group
  25413. var subStart = start + strokeFix;
  25414. var subEnd = subStart;
  25415. for (var j = 0; j < subGroupNumber; j++) {
  25416. subEnd = subStart + subGroupAnglesArr[sortedIdx][j];
  25417. var subSortedIndex = subGroupIndicesArr[sortedIdx][j];
  25418. /*jshint maxlen : 200*/
  25419. chordAngles[sortedIdx][subSortedIndex]
  25420. = [subStart, subEnd];
  25421. subStart = subEnd;
  25422. }
  25423. start = end + padding;
  25424. }
  25425. // reset data
  25426. chordShapes = new NDArray(groupNumber, groupNumber, serieNumber)
  25427. .toArray();
  25428. sectorShapes = [];
  25429. _buildSectors(sectorAngles, values);
  25430. chordAngles = new NDArray(chordAngles).reshape(
  25431. groupNumber, groupNumber, serieNumber, 2
  25432. ).toArray();
  25433. _buildChords(chordAngles, dataMat.reshape(shape).toArray());
  25434. var res = normalizeValue(values);
  25435. if (showScale) {
  25436. _buildScales(
  25437. res[0],
  25438. res[1],
  25439. sectorAngles,
  25440. new NDArray(res[0]).sum() / (360 - padding * groupNumber)
  25441. );
  25442. }
  25443. }
  25444. function _filterData (dataMat, groups) {
  25445. var indices = [];
  25446. var groupsFilted = [];
  25447. // Filter by selected group
  25448. for (var i = 0; i < groups.length; i++) {
  25449. var name = groups[i].name;
  25450. self.selectedMap[name] = isSelected(name);
  25451. if (!self.selectedMap[name]) {
  25452. indices.push(i);
  25453. } else {
  25454. groupsFilted.push(groups[i]);
  25455. }
  25456. }
  25457. if (indices.length) {
  25458. dataMat = dataMat['delete'](indices, 0);
  25459. dataMat = dataMat['delete'](indices, 1);
  25460. }
  25461. if (!dataMat.size()) {
  25462. return [dataMat, groupsFilted];
  25463. }
  25464. // Empty data also need to be removed
  25465. indices = [];
  25466. var groupsFilted2 = [];
  25467. var shape = dataMat.shape();
  25468. dataMat.reshape(shape[0], shape[1] * shape[2]);
  25469. var sumOutArray = dataMat.sum(1).toArray();
  25470. dataMat.reshape(shape);
  25471. for (var i = 0; i < groupsFilted.length; i++) {
  25472. if (sumOutArray[i] === 0) {
  25473. indices.push(i);
  25474. } else {
  25475. groupsFilted2.push(groupsFilted[i]);
  25476. }
  25477. }
  25478. if (indices.length) {
  25479. dataMat = dataMat['delete'](indices, 0);
  25480. dataMat = dataMat['delete'](indices, 1);
  25481. }
  25482. return [dataMat, groupsFilted2];
  25483. }
  25484. function _buildSectors(angles, data) {
  25485. var len = groups.length;
  25486. var len2 = chordSeries.length;
  25487. var timeout;
  25488. var showLabel = self.deepQuery(
  25489. [chordSerieSample], 'itemStyle.normal.label.show'
  25490. );
  25491. var labelColor = self.deepQuery(
  25492. [chordSerieSample], 'itemStyle.normal.label.color'
  25493. );
  25494. function createMouseOver(idx) {
  25495. return function() {
  25496. if (timeout) {
  25497. clearTimeout(timeout);
  25498. }
  25499. timeout = setTimeout(function(){
  25500. for (var i = 0; i < len; i++) {
  25501. sectorShapes[i].style.opacity
  25502. = i === idx ? 1 : 0.1;
  25503. zr.modShape(
  25504. sectorShapes[i].id,
  25505. sectorShapes[i]
  25506. );
  25507. for (var j = 0; j < len; j++) {
  25508. for (var k = 0; k < len2; k++) {
  25509. var chordShape = chordShapes[i][j][k];
  25510. if (chordShape) {
  25511. chordShape.style.opacity
  25512. = (i === idx || j === idx)
  25513. ? 0.5 : 0.03;
  25514. zr.modShape(chordShape.id, chordShape);
  25515. }
  25516. }
  25517. }
  25518. }
  25519. zr.refresh();
  25520. }, 50);
  25521. };
  25522. }
  25523. function createMouseOut() {
  25524. return function() {
  25525. if (timeout) {
  25526. clearTimeout(timeout);
  25527. }
  25528. timeout = setTimeout(function(){
  25529. for (var i = 0; i < len; i++) {
  25530. sectorShapes[i].style.opacity = 1.0;
  25531. zr.modShape(sectorShapes[i].id, sectorShapes[i]);
  25532. for (var j = 0; j < len; j++) {
  25533. for (var k = 0; k < len2; k++) {
  25534. var chordShape = chordShapes[i][j][k];
  25535. if (chordShape) {
  25536. chordShape.style.opacity = 0.5;
  25537. zr.modShape(chordShape.id, chordShape);
  25538. }
  25539. }
  25540. }
  25541. }
  25542. zr.refresh();
  25543. }, 50);
  25544. };
  25545. }
  25546. for (var i = 0; i < len; i++) {
  25547. var group = groups[i];
  25548. var angle = angles[i];
  25549. var _start = (clockWise ? (360 - angle[1]) : angle[0])
  25550. + startAngle;
  25551. var _end = (clockWise ? (360 - angle[0]) : angle[1])
  25552. + startAngle;
  25553. var sector = {
  25554. id : zr.newShapeId(self.type),
  25555. shape : 'sector',
  25556. zlevel : _zlevelBase,
  25557. style : {
  25558. x : center[0],
  25559. y : center[1],
  25560. r0 : innerRadius,
  25561. r : outerRadius,
  25562. startAngle : _start,
  25563. endAngle : _end,
  25564. brushType : 'fill',
  25565. opacity: 1,
  25566. color : getColor(group.name)
  25567. },
  25568. highlightStyle : {
  25569. brushType : 'fill'
  25570. }
  25571. };
  25572. sector.style.lineWidth = self.deepQuery(
  25573. [group, chordSerieSample],
  25574. 'itemStyle.normal.lineStyle.width'
  25575. );
  25576. sector.highlightStyle.lineWidth = self.deepQuery(
  25577. [group, chordSerieSample],
  25578. 'itemStyle.emphasis.lineStyle.width'
  25579. );
  25580. sector.style.strokeColor = self.deepQuery(
  25581. [group, chordSerieSample],
  25582. 'itemStyle.normal.lineStyle.color'
  25583. );
  25584. sector.highlightStyle.strokeColor = self.deepQuery(
  25585. [group, chordSerieSample],
  25586. 'itemStyle.emphasis.lineStyle.color'
  25587. );
  25588. if (sector.style.lineWidth > 0) {
  25589. sector.style.brushType = 'both';
  25590. }
  25591. if (sector.highlightStyle.lineWidth > 0) {
  25592. sector.highlightStyle.brushType = 'both';
  25593. }
  25594. ecData.pack(
  25595. sector,
  25596. chordSeries[0],
  25597. 0,
  25598. data[i], 0,
  25599. group.name
  25600. );
  25601. if (showLabel) {
  25602. var halfAngle = [_start + _end] / 2;
  25603. halfAngle %= 360; // Constrain to [0,360]
  25604. var isRightSide = halfAngle <= 90
  25605. || halfAngle >= 270;
  25606. halfAngle = halfAngle * Math.PI / 180;
  25607. var v = [Math.cos(halfAngle), -Math.sin(halfAngle)];
  25608. var distance = showScaleText ? 45 : 20;
  25609. var start = vec2.scale([], v, outerRadius + distance);
  25610. vec2.add(start, start, center);
  25611. var labelShape = {
  25612. shape : 'text',
  25613. id : zr.newShapeId(self.type),
  25614. zlevel : _zlevelBase - 1,
  25615. hoverable : false,
  25616. style : {
  25617. x : start[0],
  25618. y : start[1],
  25619. text : group.name,
  25620. textAlign : isRightSide ? 'left' : 'right',
  25621. color : labelColor,
  25622. hoverable : false
  25623. }
  25624. };
  25625. labelShape.style.textColor = self.deepQuery(
  25626. [group, chordSerieSample],
  25627. 'itemStyle.normal.label.textStyle.color'
  25628. ) || '#fff';
  25629. sector.style.textFont = self.getFont(self.deepQuery(
  25630. [group, chordSerieSample],
  25631. 'itemStyle.normal.label.textStyle'
  25632. ));
  25633. zr.addShape(labelShape);
  25634. self.shapeList.push(labelShape);
  25635. }
  25636. sector.onmouseover = createMouseOver(i);
  25637. sector.onmouseout = createMouseOut();
  25638. self.shapeList.push(sector);
  25639. sectorShapes.push(sector);
  25640. zr.addShape(sector);
  25641. }
  25642. }
  25643. function _buildChords(angles, dataArr) {
  25644. var len = angles.length;
  25645. if (!len) {
  25646. return;
  25647. }
  25648. var len2 = angles[0][0].length;
  25649. var chordLineStyle
  25650. = chordSerieSample.itemStyle.normal.chordStyle.lineStyle;
  25651. var chordLineStyleEmphsis
  25652. = chordSerieSample.itemStyle.emphasis.chordStyle.lineStyle;
  25653. for (var i = 0; i < len; i++) {
  25654. for (var j = 0; j < len; j++) {
  25655. for (var k = 0; k < len2; k++) {
  25656. if (chordShapes[j][i][k]) {
  25657. continue;
  25658. }
  25659. var angleIJ0 = angles[i][j][k][0];
  25660. var angleJI0 = angles[j][i][k][0];
  25661. var angleIJ1 = angles[i][j][k][1];
  25662. var angleJI1 = angles[j][i][k][1];
  25663. if (angleIJ0 - angleJI1 === 0 ||
  25664. angleJI0 - angleJI1 === 0) {
  25665. chordShapes[i][j][k] = null;
  25666. continue;
  25667. }
  25668. var color;
  25669. if (len2 === 1) {
  25670. if (angleIJ1 - angleIJ0 <= angleJI1 - angleJI0) {
  25671. color = getColor(groups[i].name);
  25672. } else {
  25673. color = getColor(groups[j].name);
  25674. }
  25675. } else {
  25676. color = getColor(chordSeries[k].name);
  25677. }
  25678. var s0 = !clockWise ? (360 - angleIJ1) : angleIJ0;
  25679. var s1 = !clockWise ? (360 - angleIJ0) : angleIJ1;
  25680. var t0 = !clockWise ? (360 - angleJI1) : angleJI0;
  25681. var t1 = !clockWise ? (360 - angleJI0) : angleJI1;
  25682. var chord = {
  25683. id : zr.newShapeId(self.type),
  25684. shape : 'chord',
  25685. zlevel : _zlevelBase,
  25686. style : {
  25687. center : center,
  25688. r : innerRadius,
  25689. source0 : s0 - startAngle,
  25690. source1 : s1 - startAngle,
  25691. target0 : t0 - startAngle,
  25692. target1 : t1 - startAngle,
  25693. brushType : 'both',
  25694. opacity : 0.5,
  25695. color : color,
  25696. lineWidth : chordLineStyle.width,
  25697. strokeColor : chordLineStyle.color
  25698. },
  25699. highlightStyle : {
  25700. brushType : 'both',
  25701. lineWidth : chordLineStyleEmphsis.width,
  25702. strokeColor : chordLineStyleEmphsis.color
  25703. }
  25704. };
  25705. ecData.pack(
  25706. chord,
  25707. chordSeries[k],
  25708. k,
  25709. dataArr[i][j][k], 0,
  25710. groups[i].name,
  25711. groups[j].name,
  25712. dataArr[j][i][k]
  25713. );
  25714. chordShapes[i][j][k] = chord;
  25715. self.shapeList.push(chord);
  25716. zr.addShape(chord);
  25717. }
  25718. }
  25719. }
  25720. }
  25721. function _buildScales(
  25722. values,
  25723. unitPostfix,
  25724. angles,
  25725. unitValue
  25726. ) {
  25727. for (var i = 0; i < angles.length; i++) {
  25728. var subStartAngle = angles[i][0];
  25729. var subEndAngle = angles[i][1];
  25730. var scaleAngle = subStartAngle;
  25731. while (scaleAngle < subEndAngle) {
  25732. var thelta = ((clockWise ? (360 - scaleAngle) : scaleAngle)
  25733. + startAngle) / 180 * Math.PI;
  25734. var v = [
  25735. Math.cos(thelta),
  25736. -Math.sin(thelta)
  25737. ];
  25738. var start = vec2.scale([], v, outerRadius + 1);
  25739. vec2.add(start, start, center);
  25740. var end = vec2.scale([], v, outerRadius + scaleLineLength);
  25741. vec2.add(end, end, center);
  25742. var scaleShape = {
  25743. shape : 'line',
  25744. id : zr.newShapeId(self.type),
  25745. zlevel : _zlevelBase - 1,
  25746. hoverable : false,
  25747. style : {
  25748. xStart : start[0],
  25749. yStart : start[1],
  25750. xEnd : end[0],
  25751. yEnd : end[1],
  25752. lineCap : 'round',
  25753. brushType : 'stroke',
  25754. strokeColor : '#666'
  25755. }
  25756. };
  25757. self.shapeList.push(scaleShape);
  25758. zr.addShape(scaleShape);
  25759. scaleAngle += scaleUnitAngle;
  25760. }
  25761. if (!showScaleText) {
  25762. continue;
  25763. }
  25764. var scaleTextAngle = subStartAngle;
  25765. var step = unitValue * 5 * scaleUnitAngle;
  25766. var scaleValues = NDArray.range(0, values[i], step).toArray();
  25767. while (scaleTextAngle < subEndAngle) {
  25768. var thelta = clockWise
  25769. ? (360 - scaleTextAngle) : scaleTextAngle;
  25770. thelta = (thelta + startAngle) % 360;
  25771. var isRightSide = thelta <= 90
  25772. || thelta >= 270;
  25773. var textShape = {
  25774. shape : 'text',
  25775. id : zr.newShapeId(self.type),
  25776. zlevel : _zlevelBase - 1,
  25777. hoverable : false,
  25778. style : {
  25779. x : isRightSide
  25780. ? outerRadius + scaleLineLength + 4
  25781. : -outerRadius - scaleLineLength - 4,
  25782. y : 0,
  25783. text : Math.round(scaleValues.shift()*10)/10
  25784. + unitPostfix,
  25785. textAlign : isRightSide ? 'left' : 'right'
  25786. },
  25787. position : center.slice(),
  25788. rotation : isRightSide
  25789. ? [thelta / 180 * Math.PI, 0, 0]
  25790. : [
  25791. (thelta + 180) / 180 * Math.PI,
  25792. 0, 0
  25793. ]
  25794. };
  25795. self.shapeList.push(textShape);
  25796. zr.addShape(textShape);
  25797. scaleTextAngle += scaleUnitAngle * 5;
  25798. }
  25799. }
  25800. }
  25801. function normalizeValue(values) {
  25802. var result = [];
  25803. var max = new NDArray(values).max();
  25804. var unitPostfix, unitScale;
  25805. if (max > 10000) {
  25806. unitPostfix = 'k';
  25807. unitScale = 1 / 1000;
  25808. } else if (max > 10000000) {
  25809. unitPostfix = 'm';
  25810. unitScale = 1 / 1000000;
  25811. } else if (max > 10000000000) {
  25812. unitPostfix = 'b';
  25813. unitScale = 1 / 1000000000;
  25814. } else {
  25815. unitPostfix = '';
  25816. unitScale = 1;
  25817. }
  25818. for (var i = 0; i < values.length; i++) {
  25819. result[i] = values[i] * unitScale;
  25820. }
  25821. return [result, unitPostfix];
  25822. }
  25823. function init(newOption, newComponent) {
  25824. component = newComponent;
  25825. refresh(newOption);
  25826. }
  25827. function refresh(newOption) {
  25828. if (newOption) {
  25829. option = newOption;
  25830. series = option.series;
  25831. }
  25832. self.clear();
  25833. legend = component.legend;
  25834. if (legend) {
  25835. getColor = legend.getColor;
  25836. isSelected = legend.isSelected;
  25837. } else {
  25838. var colorIndices = {};
  25839. var colorMap = {};
  25840. var count = 0;
  25841. getColor = function(key) {
  25842. if (colorMap[key]) {
  25843. return colorMap[key];
  25844. }
  25845. if (colorIndices[key] === undefined) {
  25846. colorIndices[key] = count++;
  25847. }
  25848. // key is serie name
  25849. for (var i = 0; i < chordSeries.length; i++) {
  25850. if (chordSeries[i].name === key) {
  25851. colorMap[key] = self.deepQuery(
  25852. [chordSeries[i]],
  25853. 'itemStyle.normal.color'
  25854. );
  25855. break;
  25856. }
  25857. }
  25858. if (!colorMap[key]) {
  25859. var len = groups.length;
  25860. // key is group name
  25861. for (var i = 0; i < len; i++) {
  25862. if (groups[i].name === key) {
  25863. colorMap[key] = self.deepQuery(
  25864. [groups[i]],
  25865. 'itemStyle.normal.color'
  25866. );
  25867. break;
  25868. }
  25869. }
  25870. }
  25871. if (!colorMap[key]) {
  25872. colorMap[key] = zr.getColor(colorIndices[key]);
  25873. }
  25874. return colorMap[key];
  25875. };
  25876. isSelected = function() {
  25877. return true;
  25878. };
  25879. }
  25880. _buildShape();
  25881. }
  25882. function reformOption(opt) {
  25883. var _merge = zrUtil.merge;
  25884. opt = _merge(
  25885. opt || {},
  25886. ecConfig.chord,
  25887. {
  25888. 'overwrite' : false,
  25889. 'recursive' : true
  25890. }
  25891. );
  25892. opt.itemStyle.normal.label.textStyle = _merge(
  25893. opt.itemStyle.normal.label.textStyle || {},
  25894. ecConfig.textStyle,
  25895. {
  25896. 'overwrite' : false,
  25897. 'recursive' : true
  25898. }
  25899. );
  25900. }
  25901. self.init = init;
  25902. self.refresh = refresh;
  25903. self.reformOption = reformOption;
  25904. init(option, component);
  25905. }
  25906. require('../chart').define('chord', Chord);
  25907. return Chord;
  25908. });
  25909. /**
  25910. * echarts图表类:力导向图
  25911. *
  25912. * @author pissang (https://github.com/pissang/)
  25913. *
  25914. */
  25915. define('echarts/chart/force',['require','../component/base','./calculableBase','../config','../util/ecData','zrender/config','zrender/tool/event','zrender/tool/util','zrender/tool/vector','../util/ndarray','../chart'],function(require) {
  25916. /**
  25917. * 构造函数
  25918. * @param {Object} messageCenter echart消息中心
  25919. * @param {ZRender} zr zrender实例
  25920. * @param {Object} series 数据
  25921. * @param {Object} component 组件
  25922. */
  25923. function Force(messageCenter, zr, option, component) {
  25924. // 基类装饰
  25925. var ComponentBase = require('../component/base');
  25926. ComponentBase.call(this, zr);
  25927. // 可计算特性装饰
  25928. var CalculableBase = require('./calculableBase');
  25929. CalculableBase.call(this, zr, option);
  25930. var ecConfig = require('../config');
  25931. var ecData = require('../util/ecData');
  25932. var zrConfig = require('zrender/config');
  25933. var zrEvent = require('zrender/tool/event');
  25934. // var zrColor = require('zrender/tool/color');
  25935. var zrUtil = require('zrender/tool/util');
  25936. var vec2 = require('zrender/tool/vector');
  25937. var NDArray = require('../util/ndarray');
  25938. var self = this;
  25939. self.type = ecConfig.CHART_TYPE_FORCE;
  25940. var series;
  25941. var forceSerie;
  25942. var nodeShapes = [];
  25943. var linkShapes = [];
  25944. // 节点分类
  25945. var categories = [];
  25946. // 默认节点样式
  25947. var nodeStyle;
  25948. var nodeEmphasisStyle;
  25949. // 默认边样式
  25950. var linkStyle;
  25951. var linkEmphasisStyle;
  25952. // nodes和links的原始数据
  25953. var nodesRawData = [];
  25954. var linksRawData = [];
  25955. // nodes和links的权重, 用来计算引力和斥力
  25956. var nodeWeights = [];
  25957. var linkWeights = [];
  25958. // 节点的受力
  25959. var nodeForces = [];
  25960. // 节点的加速度
  25961. var nodeAccelerations = [];
  25962. // 节点的位置
  25963. var nodePositions = [];
  25964. var nodePrePositions = [];
  25965. // 节点的质量
  25966. var nodeMasses = [];
  25967. var temperature;
  25968. var k;
  25969. //- ----------外部参数
  25970. var density;
  25971. var initSize;
  25972. var coolDown;
  25973. var centripetal;
  25974. // var initializeSize; // defined but never used
  25975. var attractiveness;
  25976. //- ----------
  25977. var stepTime = 1/60;
  25978. var viewportWidth;
  25979. var viewportHeight;
  25980. var centroid = [];
  25981. var mouseX, mouseY;
  25982. function _buildShape() {
  25983. var legend = component.legend;
  25984. temperature = 1.0;
  25985. viewportWidth = zr.getWidth();
  25986. viewportHeight = zr.getHeight();
  25987. centroid = [viewportWidth/2, viewportHeight/2];
  25988. for (var i = 0, l = series.length; i < l; i++) {
  25989. var serie = series[i];
  25990. if (serie.type === ecConfig.CHART_TYPE_FORCE) {
  25991. series[i] = self.reformOption(series[i]);
  25992. forceSerie = serie;
  25993. var minRadius = self.deepQuery([serie], 'minRadius');
  25994. var maxRadius = self.deepQuery([serie], 'maxRadius');
  25995. // ----------获取外部参数
  25996. attractiveness = self.deepQuery(
  25997. [serie], 'attractiveness'
  25998. );
  25999. density = self.deepQuery([serie], 'density');
  26000. initSize = self.deepQuery([serie], 'initSize');
  26001. centripetal = self.deepQuery([serie], 'centripetal');
  26002. coolDown = self.deepQuery([serie], 'coolDown');
  26003. // ----------
  26004. categories = self.deepQuery([serie], 'categories');
  26005. // 同步selected状态
  26006. for (var j = 0, len = categories.length; j < len; j++) {
  26007. if (categories[j].name) {
  26008. if (legend){
  26009. self.selectedMap[j] =
  26010. legend.isSelected(categories[j].name);
  26011. } else {
  26012. self.selectedMap[j] = true;
  26013. }
  26014. }
  26015. }
  26016. linkStyle = self.deepQuery(
  26017. [serie], 'itemStyle.normal.linkStyle'
  26018. );
  26019. linkEmphasisStyle = self.deepQuery(
  26020. [serie], 'itemStyle.emphasis.linkStyle'
  26021. );
  26022. nodeStyle = self.deepQuery(
  26023. [serie], 'itemStyle.normal.nodeStyle'
  26024. );
  26025. nodeEmphasisStyle = self.deepQuery(
  26026. [serie], 'itemStyle.emphasis.nodeStyle'
  26027. );
  26028. _filterData(
  26029. zrUtil.clone(self.deepQuery([serie], 'nodes')),
  26030. zrUtil.clone(self.deepQuery([serie], 'links'))
  26031. );
  26032. // Reset data
  26033. nodePositions = [];
  26034. nodePrePositions = [];
  26035. nodeMasses = [];
  26036. nodeWeights = [];
  26037. linkWeights = [];
  26038. nodeMasses = [];
  26039. nodeShapes = [];
  26040. linkShapes = [];
  26041. var area = viewportWidth * viewportHeight;
  26042. // Formula in 'Graph Drawing by Force-directed Placement'
  26043. k = 0.5 / attractiveness
  26044. * Math.sqrt( area / nodesRawData.length );
  26045. // 这两方法里需要加上读取self.selectedMap判断当前系列是否显示的逻辑
  26046. _buildLinkShapes(nodesRawData, linksRawData);
  26047. _buildNodeShapes(nodesRawData, minRadius, maxRadius);
  26048. }
  26049. }
  26050. }
  26051. function _filterData(nodes, links) {
  26052. var filteredNodeMap = [];
  26053. var cursor = 0;
  26054. nodesRawData = _filter(nodes, function(node, idx) {
  26055. if(!node){
  26056. return;
  26057. }
  26058. if (self.selectedMap[node.category]) {
  26059. filteredNodeMap[idx] = cursor++;
  26060. return true;
  26061. }else{
  26062. filteredNodeMap[idx] = -1;
  26063. }
  26064. });
  26065. var source;
  26066. var target;
  26067. var ret;
  26068. linksRawData = _filter(links, function(link/*, idx*/){
  26069. source = link.source;
  26070. target = link.target;
  26071. ret = true;
  26072. if (filteredNodeMap[source] >= 0) {
  26073. link.source = filteredNodeMap[source];
  26074. } else {
  26075. ret = false;
  26076. }
  26077. if (filteredNodeMap[target] >= 0) {
  26078. link.target = filteredNodeMap[target];
  26079. } else {
  26080. ret = false;
  26081. }
  26082. return ret;
  26083. });
  26084. }
  26085. function _buildNodeShapes(nodes, minRadius, maxRadius) {
  26086. // 将值映射到minRadius-maxRadius的范围上
  26087. var radius = [];
  26088. var l = nodes.length;
  26089. for (var i = 0; i < l; i++) {
  26090. var node = nodes[i];
  26091. radius.push(node.value);
  26092. }
  26093. var narr = new NDArray(radius);
  26094. radius = narr.map(minRadius, maxRadius)
  26095. .toArray();
  26096. var max = narr.max();
  26097. if (max !== 0) {
  26098. nodeWeights = narr.mul(1/max, narr).toArray();
  26099. }
  26100. for (var i = 0; i < l; i++) {
  26101. var node = nodes[i];
  26102. var x, y;
  26103. var r = radius[i];
  26104. var random = _randomInSquare(
  26105. viewportWidth/2, viewportHeight/2, initSize
  26106. );
  26107. x = typeof(node.initial) === 'undefined'
  26108. ? random.x
  26109. : node.initial.x;
  26110. y = typeof(node.initial) === 'undefined'
  26111. ? random.y
  26112. : node.initial.y;
  26113. // 初始化位置
  26114. nodePositions[i] = [x, y];
  26115. nodePrePositions[i] = [x, y];
  26116. // 初始化受力
  26117. nodeForces[i] = [0, 0];
  26118. // 初始化加速度
  26119. nodeAccelerations[i] = [0, 0];
  26120. // 初始化质量
  26121. nodeMasses[i] = r * r * density * 0.035;
  26122. var shape = {
  26123. id : zr.newShapeId(self.type),
  26124. shape : 'circle',
  26125. style : {
  26126. r : r,
  26127. x : 0,
  26128. y : 0
  26129. },
  26130. highlightStyle : {},
  26131. position : [x, y],
  26132. __forceIndex : i
  26133. };
  26134. // Label
  26135. var labelStyle;
  26136. if (self.deepQuery([forceSerie], 'itemStyle.normal.label.show')
  26137. ) {
  26138. shape.style.text = node.name;
  26139. shape.style.textPosition = 'inside';
  26140. labelStyle = self.deepQuery(
  26141. [forceSerie], 'itemStyle.normal.label.textStyle'
  26142. ) || {};
  26143. shape.style.textColor = labelStyle.color || '#fff';
  26144. shape.style.textAlign = labelStyle.align || 'center';
  26145. shape.style.textBaseLine = labelStyle.baseline || 'middle';
  26146. shape.style.textFont = self.getFont(labelStyle);
  26147. }
  26148. if (self.deepQuery(
  26149. [forceSerie], 'itemStyle.emphasis.label.show'
  26150. )
  26151. ) {
  26152. shape.highlightStyle.text = node.name;
  26153. shape.highlightStyle.textPosition = 'inside';
  26154. labelStyle = self.deepQuery(
  26155. [forceSerie], 'itemStyle.emphasis.label.textStyle'
  26156. ) || {};
  26157. shape.highlightStyle.textColor = labelStyle.color || '#fff';
  26158. shape.highlightStyle.textAlign = labelStyle.align
  26159. || 'center';
  26160. shape.highlightStyle.textBaseLine = labelStyle.baseline
  26161. || 'middle';
  26162. shape.highlightStyle.textFont = self.getFont(labelStyle);
  26163. }
  26164. // 优先级 node.style > category.style > defaultStyle
  26165. zrUtil.merge(shape.style, nodeStyle);
  26166. zrUtil.merge(shape.highlightStyle, nodeEmphasisStyle);
  26167. if (typeof(node.category) !== 'undefined') {
  26168. var category = categories[node.category];
  26169. if (category) {
  26170. var style = category.itemStyle;
  26171. if (style) {
  26172. if (style.normal) {
  26173. zrUtil.merge(shape.style, style.normal, {
  26174. overwrite : true
  26175. });
  26176. }
  26177. if (style.emphasis) {
  26178. zrUtil.merge(
  26179. shape.highlightStyle,
  26180. style.emphasis,
  26181. { overwrite : true }
  26182. );
  26183. }
  26184. }
  26185. }
  26186. }
  26187. if (typeof(node.itemStyle) !== 'undefined') {
  26188. var style = node.itemStyle;
  26189. if( style.normal ){
  26190. zrUtil.merge(shape.style, style.normal, {
  26191. overwrite : true
  26192. });
  26193. }
  26194. if( style.normal ){
  26195. zrUtil.merge(shape.highlightStyle, style.emphasis, {
  26196. overwrite : true
  26197. });
  26198. }
  26199. }
  26200. // 拖拽特性
  26201. self.setCalculable(shape);
  26202. shape.ondragstart = self.shapeHandler.ondragstart;
  26203. shape.draggable = true;
  26204. nodeShapes.push(shape);
  26205. self.shapeList.push(shape);
  26206. zr.addShape(shape);
  26207. var categoryName = '';
  26208. if (typeof(node.category) !== 'undefined') {
  26209. var category = categories[node.category];
  26210. categoryName = (category && category.name) || '';
  26211. }
  26212. ecData.pack(
  26213. shape,
  26214. {
  26215. name : categoryName
  26216. },
  26217. 0,
  26218. node, 0,
  26219. node.name || ''
  26220. );
  26221. }
  26222. // _normalize(nodeMasses, nodeMasses);
  26223. }
  26224. function _buildLinkShapes(nodes, links) {
  26225. var l = links.length;
  26226. for (var i = 0; i < l; i++) {
  26227. var link = links[i];
  26228. //var source = nodes[link.source];
  26229. // var target = nodes[link.target];
  26230. var weight = link.weight || 1;
  26231. linkWeights.push(weight);
  26232. var shape = {
  26233. id : zr.newShapeId(self.type),
  26234. shape : 'line',
  26235. style : {
  26236. xStart : 0,
  26237. yStart : 0,
  26238. xEnd : 0,
  26239. yEnd : 0
  26240. },
  26241. highlightStyle : {}
  26242. };
  26243. zrUtil.merge(shape.style, linkStyle);
  26244. zrUtil.merge(shape.highlightStyle, linkEmphasisStyle);
  26245. if (typeof(link.itemStyle) !== 'undefined') {
  26246. if(link.itemStyle.normal){
  26247. zrUtil.merge(shape.style, link.itemStyle.normal, {
  26248. overwrite : true
  26249. });
  26250. }
  26251. if(link.itemStyle.emphasis){
  26252. zrUtil.merge(
  26253. shape.highlightStyle,
  26254. link.itemStyle.emphasis,
  26255. { overwrite : true }
  26256. );
  26257. }
  26258. }
  26259. linkShapes.push(shape);
  26260. self.shapeList.push(shape);
  26261. zr.addShape(shape);
  26262. }
  26263. var narr = new NDArray(linkWeights);
  26264. var max = narr.max();
  26265. if (max !== 0) {
  26266. linkWeights = narr.mul(1/max, narr).toArray();
  26267. }
  26268. }
  26269. function _updateLinkShapes(){
  26270. for (var i = 0, l = linksRawData.length; i < l; i++) {
  26271. var link = linksRawData[i];
  26272. var linkShape = linkShapes[i];
  26273. var sourceShape = nodeShapes[link.source];
  26274. var targetShape = nodeShapes[link.target];
  26275. linkShape.style.xStart = sourceShape.position[0];
  26276. linkShape.style.yStart = sourceShape.position[1];
  26277. linkShape.style.xEnd = targetShape.position[0];
  26278. linkShape.style.yEnd = targetShape.position[1];
  26279. }
  26280. }
  26281. function _update(stepTime) {
  26282. var len = nodePositions.length;
  26283. var v12 = [];
  26284. // 计算节点之间斥力
  26285. var k2 = k*k;
  26286. // Reset force
  26287. for (var i = 0; i < len; i++) {
  26288. nodeForces[i][0] = 0;
  26289. nodeForces[i][1] = 0;
  26290. }
  26291. for (var i = 0; i < len; i++) {
  26292. for (var j = i+1; j < len; j++){
  26293. var w1 = nodeWeights[i];
  26294. var w2 = nodeWeights[j];
  26295. var p1 = nodePositions[i];
  26296. var p2 = nodePositions[j];
  26297. // 节点1到2的向量
  26298. vec2.sub(v12, p2, p1);
  26299. var d = vec2.length(v12);
  26300. // 距离大于500忽略斥力
  26301. if(d > 500){
  26302. continue;
  26303. }
  26304. if(d < 5){
  26305. d = 5;
  26306. }
  26307. vec2.scale(v12, v12, 1/d);
  26308. var forceFactor = 1 * (w1 + w2) * k2 / d;
  26309. vec2.scale(v12, v12, forceFactor);
  26310. //节点1受到的力
  26311. vec2.sub(nodeForces[i], nodeForces[i], v12);
  26312. //节点2受到的力
  26313. vec2.add(nodeForces[j], nodeForces[j], v12);
  26314. }
  26315. }
  26316. // 计算节点之间引力
  26317. for (var i = 0, l = linksRawData.length; i < l; i++) {
  26318. var link = linksRawData[i];
  26319. var w = linkWeights[i];
  26320. var s = link.source;
  26321. var t = link.target;
  26322. var p1 = nodePositions[s];
  26323. var p2 = nodePositions[t];
  26324. vec2.sub(v12, p2, p1);
  26325. var d2 = vec2.lengthSquare(v12);
  26326. vec2.normalize(v12, v12);
  26327. var forceFactor = w * d2 / k;
  26328. // 节点1受到的力
  26329. vec2.scale(v12, v12, forceFactor);
  26330. vec2.add(nodeForces[s], nodeForces[s], v12);
  26331. // 节点2受到的力
  26332. vec2.sub(nodeForces[t], nodeForces[t], v12);
  26333. }
  26334. // 到质心的向心力
  26335. for (var i = 0, l = nodesRawData.length; i < l; i++){
  26336. var p = nodePositions[i];
  26337. vec2.sub(v12, centroid, p);
  26338. var d2 = vec2.lengthSquare(v12);
  26339. vec2.normalize(v12, v12);
  26340. // 100是可调参数
  26341. var forceFactor = d2 / 100 * centripetal;
  26342. vec2.scale(v12, v12, forceFactor);
  26343. vec2.add(nodeForces[i], nodeForces[i], v12);
  26344. }
  26345. // 计算加速度
  26346. for (var i = 0, l = nodeAccelerations.length; i < l; i++) {
  26347. vec2.scale(
  26348. nodeAccelerations[i], nodeForces[i], 1 / nodeMasses[i]
  26349. );
  26350. }
  26351. var velocity = [];
  26352. var tmp = [];
  26353. // 计算位置(verlet积分)
  26354. for (var i = 0, l = nodePositions.length; i < l; i++) {
  26355. if (nodesRawData[i].fixed) {
  26356. // 拖拽同步
  26357. nodePositions[i][0] = mouseX;
  26358. nodePositions[i][1] = mouseY;
  26359. nodePrePositions[i][0] = mouseX;
  26360. nodePrePositions[i][1] = mouseY;
  26361. nodeShapes[i].position[0] = mouseX;
  26362. nodeShapes[i].position[1] = mouseY;
  26363. continue;
  26364. }
  26365. var p = nodePositions[i];
  26366. var __P = nodePrePositions[i];
  26367. vec2.sub(velocity, p, __P);
  26368. __P[0] = p[0];
  26369. __P[1] = p[1];
  26370. vec2.add(
  26371. velocity,
  26372. velocity,
  26373. vec2.scale(tmp, nodeAccelerations[i], stepTime)
  26374. );
  26375. // Damping
  26376. vec2.scale(velocity, velocity, temperature);
  26377. // 防止速度太大
  26378. velocity[0] = Math.max(Math.min(velocity[0], 100), -100);
  26379. velocity[1] = Math.max(Math.min(velocity[1], 100), -100);
  26380. vec2.add(p, p, velocity);
  26381. nodeShapes[i].position[0] = p[0];
  26382. nodeShapes[i].position[1] = p[1];
  26383. if(isNaN(p[0]) || isNaN(p[1])){
  26384. throw new Error('NaN');
  26385. }
  26386. }
  26387. }
  26388. function _step(){
  26389. if (temperature < 0.01) {
  26390. return;
  26391. }
  26392. _update(stepTime);
  26393. _updateLinkShapes();
  26394. for (var i = 0; i < nodeShapes.length; i++) {
  26395. var shape = nodeShapes[i];
  26396. zr.modShape(shape.id, shape);
  26397. }
  26398. for (var i = 0; i < linkShapes.length; i++) {
  26399. var shape = linkShapes[i];
  26400. zr.modShape(shape.id, shape);
  26401. }
  26402. zr.refresh();
  26403. // Cool Down
  26404. temperature *= coolDown;
  26405. }
  26406. var _updating;
  26407. function init(newOption, newComponent) {
  26408. option = newOption;
  26409. component = newComponent;
  26410. series = option.series;
  26411. self.clear();
  26412. _buildShape();
  26413. _updating = true;
  26414. function cb() {
  26415. if (_updating) {
  26416. _step();
  26417. setTimeout(cb, stepTime * 1000);
  26418. }
  26419. }
  26420. setTimeout(cb, stepTime * 1000);
  26421. }
  26422. function refresh(newOption) {
  26423. if (newOption) {
  26424. option = newOption;
  26425. series = option.series;
  26426. }
  26427. self.clear();
  26428. _buildShape();
  26429. temperature = 1.0;
  26430. }
  26431. function dispose(){
  26432. _updating = false;
  26433. }
  26434. /**
  26435. * 输出动态视觉引导线
  26436. */
  26437. self.shapeHandler.ondragstart = function() {
  26438. self.isDragstart = true;
  26439. };
  26440. /**
  26441. * 拖拽开始
  26442. */
  26443. function ondragstart(param) {
  26444. if (!self.isDragstart || !param.target) {
  26445. // 没有在当前实例上发生拖拽行为则直接返回
  26446. return;
  26447. }
  26448. var shape = param.target;
  26449. var idx = shape.__forceIndex;
  26450. var node = nodesRawData[idx];
  26451. node.fixed = true;
  26452. // 处理完拖拽事件后复位
  26453. self.isDragstart = false;
  26454. zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
  26455. }
  26456. /**
  26457. * 数据项被拖拽出去,重载基类方法
  26458. */
  26459. function ondragend(param, status) {
  26460. if (!self.isDragend || !param.target) {
  26461. // 没有在当前实例上发生拖拽行为则直接返回
  26462. return;
  26463. }
  26464. var shape = param.target;
  26465. var idx = shape.__forceIndex;
  26466. var node = nodesRawData[idx];
  26467. node.fixed = false;
  26468. // 别status = {}赋值啊!!
  26469. status.dragIn = true;
  26470. //你自己refresh的话把他设为false,设true就会重新调refresh接口
  26471. status.needRefresh = false;
  26472. // 处理完拖拽事件后复位
  26473. self.isDragend = false;
  26474. zr.un(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
  26475. }
  26476. // 拖拽中位移信息
  26477. function _onmousemove(param) {
  26478. temperature = 0.8;
  26479. mouseX = zrEvent.getX(param.event);
  26480. mouseY = zrEvent.getY(param.event);
  26481. }
  26482. self.init = init;
  26483. self.refresh = refresh;
  26484. self.ondragstart = ondragstart;
  26485. self.ondragend = ondragend;
  26486. self.dispose = dispose;
  26487. init(option, component);
  26488. }
  26489. /*
  26490. function _randomInCircle(x, y, radius) {
  26491. var theta = Math.random() * Math.PI * 2;
  26492. var r = radius * Math.random();
  26493. return {
  26494. x : Math.cos(theta) * r + x,
  26495. y : Math.sin(theta) * r + y
  26496. };
  26497. }
  26498. */
  26499. function _randomInSquare(x, y, size) {
  26500. return {
  26501. x : (Math.random() - 0.5) * size + x,
  26502. y : (Math.random() - 0.5) * size + y
  26503. };
  26504. }
  26505. function _filter(array, callback){
  26506. var len = array.length;
  26507. var result = [];
  26508. for(var i = 0; i < len; i++){
  26509. if(callback(array[i], i)){
  26510. result.push(array[i]);
  26511. }
  26512. }
  26513. return result;
  26514. }
  26515. // 图表注册
  26516. require('../chart').define('force', Force);
  26517. return Force;
  26518. });
  26519. /**
  26520. * zrender
  26521. *
  26522. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  26523. *
  26524. * shape类:支持半平滑的polygon,折线面积图使用
  26525. * 可配图形属性:
  26526. {
  26527. // 基础属性
  26528. shape : 'halfSmoothPolygon', // 必须,shape类标识,需要显式指定
  26529. id : {string}, // 必须,图形唯一标识,可通过zrender实例方法newShapeId生成
  26530. zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中
  26531. invisible : {boolean}, // 默认为false,是否可见
  26532. // 样式属性,默认状态样式样式属性
  26533. style : {
  26534. pointList : {Array}, // 必须,多边形各个顶角坐标
  26535. brushType : {string}, // 默认为fill,绘画方式
  26536. // fill(填充) | stroke(描边) | both(填充+描边)
  26537. color : {color}, // 默认为'#000',填充颜色,支持rgba
  26538. strokeColor : {color}, // 默认为'#000',描边颜色(轮廓),支持rgba
  26539. lineWidth : {number}, // 默认为1,线条宽度,描边下有效
  26540. opacity : {number}, // 默认为1,透明度设置,如果color为rgba,则最终透明度效果叠加
  26541. shadowBlur : {number}, // 默认为0,阴影模糊度,大于0有效
  26542. shadowColor : {color}, // 默认为'#000',阴影色彩,支持rgba
  26543. shadowOffsetX : {number}, // 默认为0,阴影横向偏移,正值往右,负值往左
  26544. shadowOffsetY : {number}, // 默认为0,阴影纵向偏移,正值往下,负值往上
  26545. text : {string}, // 默认为null,附加文本
  26546. textFont : {string}, // 默认为null,附加文本样式,eg:'bold 18px verdana'
  26547. textPosition : {string}, // 默认为top,附加文本位置。
  26548. // inside | left | right | top | bottom
  26549. textAlign : {string}, // 默认根据textPosition自动设置,附加文本水平对齐。
  26550. // start | end | left | right | center
  26551. textBaseline : {string}, // 默认根据textPosition自动设置,附加文本垂直对齐。
  26552. // top | bottom | middle |
  26553. // alphabetic | hanging | ideographic
  26554. textColor : {color}, // 默认根据textPosition自动设置,默认策略如下,附加文本颜色
  26555. // 'inside' ? '#fff' : color
  26556. },
  26557. // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示
  26558. highlightStyle : {
  26559. // 同style
  26560. }
  26561. // 交互属性,详见shape.Base
  26562. // 事件属性,详见shape.Base
  26563. }
  26564. 例子:
  26565. {
  26566. shape : 'halfSmoothPolygon',
  26567. id : '123456',
  26568. zlevel : 1,
  26569. style : {
  26570. pointList : [[10, 10], [300, 20], [298, 400], [50, 450]]
  26571. color : '#eee',
  26572. text : 'Baidu'
  26573. },
  26574. myName : 'kener', // 可自带任何有效自定义属性
  26575. clickable : true,
  26576. onClick : function(eventPacket) {
  26577. alert(eventPacket.target.myName);
  26578. }
  26579. }
  26580. */
  26581. define(
  26582. 'echarts/util/shape/halfSmoothPolygon',['require','zrender/shape','zrender/shape/base','zrender/shape'],function(require) {
  26583. function HalfSmoothPolygon() {
  26584. this.type = 'halfSmoothPolygon';
  26585. }
  26586. HalfSmoothPolygon.prototype = {
  26587. /**
  26588. * 创建多边形路径
  26589. * @param {Context2D} ctx Canvas 2D上下文
  26590. * @param {Object} style 样式
  26591. */
  26592. buildPath : function(ctx, style) {
  26593. var pointList = style.pointList;
  26594. if (pointList.length < 2) {
  26595. // 少于2个点就不画了~
  26596. return;
  26597. }
  26598. if (style.smooth) {
  26599. var controlPoints = this.smoothBezier(
  26600. pointList.slice(0, -2), style.smooth
  26601. );
  26602. ctx.moveTo(pointList[0][0], pointList[0][1]);
  26603. var cp1;
  26604. var cp2;
  26605. var p;
  26606. var l = pointList.length;
  26607. for (var i = 0; i < l - 3; i++) {
  26608. cp1 = controlPoints[i * 2];
  26609. cp2 = controlPoints[i * 2 + 1];
  26610. p = pointList[i + 1];
  26611. ctx.bezierCurveTo(
  26612. cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]
  26613. );
  26614. }
  26615. ctx.lineTo(pointList[l - 2][0], pointList[l - 2][1]);
  26616. ctx.lineTo(pointList[l - 1][0], pointList[l - 1][1]);
  26617. ctx.lineTo(pointList[0][0], pointList[0][1]);
  26618. }
  26619. else {
  26620. require('zrender/shape').get('polygon').buildPath(
  26621. ctx, style
  26622. );
  26623. }
  26624. return;
  26625. }
  26626. };
  26627. require('zrender/shape/base').derive(HalfSmoothPolygon);
  26628. require('zrender/shape').define(
  26629. 'halfSmoothPolygon', new HalfSmoothPolygon()
  26630. );
  26631. return HalfSmoothPolygon;
  26632. }
  26633. );
  26634. /**
  26635. * echarts图表类:折线图
  26636. *
  26637. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  26638. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  26639. *
  26640. */
  26641. define('echarts/chart/line',['require','../component/base','./calculableBase','../config','../util/ecData','zrender/tool/color','zrender/shape','zrender/shape','../util/shape/halfSmoothPolygon','../chart'],function(require) {
  26642. /**
  26643. * 构造函数
  26644. * @param {Object} messageCenter echart消息中心
  26645. * @param {ZRender} zr zrender实例
  26646. * @param {Object} series 数据
  26647. * @param {Object} component 组件
  26648. */
  26649. function Line(messageCenter, zr, option, component){
  26650. // 基类装饰
  26651. var ComponentBase = require('../component/base');
  26652. ComponentBase.call(this, zr);
  26653. // 可计算特性装饰
  26654. var CalculableBase = require('./calculableBase');
  26655. CalculableBase.call(this, zr, option);
  26656. var ecConfig = require('../config');
  26657. var ecData = require('../util/ecData');
  26658. var zrColor = require('zrender/tool/color');
  26659. var self = this;
  26660. self.type = ecConfig.CHART_TYPE_LINE;
  26661. var series; // 共享数据源,不要修改跟自己无关的项
  26662. var _zlevelBase = self.getZlevelBase();
  26663. var finalPLMap = {}; // 完成的point list(PL)
  26664. var _sIndex2ColorMap = {}; // series默认颜色索引,seriesIndex索引到color
  26665. var _symbol = [
  26666. 'circle', 'rectangle', 'triangle', 'diamond',
  26667. 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
  26668. ];
  26669. var _sIndex2ShapeMap = {}; // series拐点图形类型,seriesIndex索引到shape type
  26670. require('zrender/shape').get('icon').define(
  26671. 'legendLineIcon', legendLineIcon
  26672. );
  26673. function _buildShape() {
  26674. finalPLMap = {};
  26675. self.selectedMap = {};
  26676. // 水平垂直双向series索引 ,position索引到seriesIndex
  26677. var _position2sIndexMap = {
  26678. top : [],
  26679. bottom : [],
  26680. left : [],
  26681. right : []
  26682. };
  26683. var xAxisIndex;
  26684. var yAxisIndex;
  26685. var xAxis;
  26686. var yAxis;
  26687. for (var i = 0, l = series.length; i < l; i++) {
  26688. if (series[i].type == self.type) {
  26689. series[i] = self.reformOption(series[i]);
  26690. xAxisIndex = series[i].xAxisIndex;
  26691. yAxisIndex = series[i].yAxisIndex;
  26692. xAxis = component.xAxis.getAxis(xAxisIndex);
  26693. yAxis = component.yAxis.getAxis(yAxisIndex);
  26694. if (xAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
  26695. ) {
  26696. _position2sIndexMap[xAxis.getPosition()].push(i);
  26697. }
  26698. else if (yAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
  26699. ) {
  26700. _position2sIndexMap[yAxis.getPosition()].push(i);
  26701. }
  26702. }
  26703. }
  26704. //console.log(_position2sIndexMap)
  26705. for (var position in _position2sIndexMap) {
  26706. if (_position2sIndexMap[position].length > 0) {
  26707. _buildSinglePosition(
  26708. position, _position2sIndexMap[position]
  26709. );
  26710. }
  26711. }
  26712. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  26713. self.shapeList[i].id = zr.newShapeId(self.type);
  26714. zr.addShape(self.shapeList[i]);
  26715. }
  26716. }
  26717. /**
  26718. * 构建单个方向上的折线图
  26719. *
  26720. * @param {number} seriesIndex 系列索引
  26721. */
  26722. function _buildSinglePosition(position, seriesArray) {
  26723. var mapData = _mapData(seriesArray);
  26724. var locationMap = mapData.locationMap;
  26725. var maxDataLength = mapData.maxDataLength;
  26726. if (maxDataLength === 0 || locationMap.length === 0) {
  26727. return;
  26728. }
  26729. switch (position) {
  26730. case 'bottom' :
  26731. case 'top' :
  26732. _buildHorizontal(maxDataLength, locationMap);
  26733. break;
  26734. case 'left' :
  26735. case 'right' :
  26736. _buildVertical(maxDataLength, locationMap);
  26737. break;
  26738. }
  26739. }
  26740. /**
  26741. * 数据整形
  26742. * 数组位置映射到系列索引
  26743. */
  26744. function _mapData(seriesArray) {
  26745. var serie; // 临时映射变量
  26746. var dataIndex = 0; // 堆叠数据所在位置映射
  26747. var stackMap = {}; // 堆叠数据位置映射,堆叠组在二维中的第几项
  26748. var magicStackKey = '__kener__stack__'; // 堆叠命名,非堆叠数据安单一堆叠处理
  26749. var stackKey; // 临时映射变量
  26750. var serieName; // 临时映射变量
  26751. var legend = component.legend;
  26752. var locationMap = []; // 需要返回的东西:数组位置映射到系列索引
  26753. var maxDataLength = 0; // 需要返回的东西:最大数据长度
  26754. var iconShape;
  26755. // 计算需要显示的个数和分配位置并记在下面这个结构里
  26756. for (var i = 0, l = seriesArray.length; i < l; i++) {
  26757. serie = series[seriesArray[i]];
  26758. serieName = serie.name;
  26759. _sIndex2ShapeMap[seriesArray[i]]
  26760. = _sIndex2ShapeMap[seriesArray[i]]
  26761. || self.deepQuery([serie],'symbol')
  26762. || _symbol[i % _symbol.length];
  26763. if (legend){
  26764. self.selectedMap[serieName] = legend.isSelected(serieName);
  26765. _sIndex2ColorMap[seriesArray[i]]
  26766. = legend.getColor(serieName);
  26767. iconShape = legend.getItemShape(serieName);
  26768. if (iconShape) {
  26769. // 回调legend,换一个更形象的icon
  26770. iconShape.shape = 'icon';
  26771. iconShape.style.iconType = 'legendLineIcon';
  26772. iconShape.style.symbol =
  26773. _sIndex2ShapeMap[seriesArray[i]];
  26774. legend.setItemShape(serieName, iconShape);
  26775. }
  26776. } else {
  26777. self.selectedMap[serieName] = true;
  26778. _sIndex2ColorMap[seriesArray[i]]
  26779. = zr.getColor(seriesArray[i]);
  26780. }
  26781. if (self.selectedMap[serieName]) {
  26782. stackKey = serie.stack || (magicStackKey + seriesArray[i]);
  26783. if (typeof stackMap[stackKey] == 'undefined') {
  26784. stackMap[stackKey] = dataIndex;
  26785. locationMap[dataIndex] = [seriesArray[i]];
  26786. dataIndex++;
  26787. }
  26788. else {
  26789. // 已经分配了位置就推进去就行
  26790. locationMap[stackMap[stackKey]].push(seriesArray[i]);
  26791. }
  26792. }
  26793. // 兼职帮算一下最大长度
  26794. maxDataLength = Math.max(maxDataLength, serie.data.length);
  26795. }
  26796. /* 调试输出
  26797. var s = '';
  26798. for (var i = 0, l = maxDataLength; i < l; i++) {
  26799. s = '[';
  26800. for (var j = 0, k = locationMap.length; j < k; j++) {
  26801. s +='['
  26802. for (var m = 0, n = locationMap[j].length - 1; m < n; m++) {
  26803. s += series[locationMap[j][m]].data[i] + ','
  26804. }
  26805. s += series[locationMap[j][locationMap[j].length - 1]]
  26806. .data[i];
  26807. s += ']'
  26808. }
  26809. s += ']';
  26810. console.log(s);
  26811. }
  26812. console.log(locationMap)
  26813. */
  26814. return {
  26815. locationMap : locationMap,
  26816. maxDataLength : maxDataLength
  26817. };
  26818. }
  26819. /**
  26820. * 构建类目轴为水平方向的折线图系列
  26821. */
  26822. function _buildHorizontal(maxDataLength, locationMap) {
  26823. // 确定类目轴和数值轴,同一方向随便找一个即可
  26824. var seriesIndex = locationMap[0][0];
  26825. var serie = series[seriesIndex];
  26826. var xAxisIndex = serie.xAxisIndex;
  26827. var categoryAxis = component.xAxis.getAxis(xAxisIndex);
  26828. var yAxisIndex; // 数值轴各异
  26829. var valueAxis; // 数值轴各异
  26830. var x;
  26831. var y;
  26832. var lastYP; // 正向堆叠处理
  26833. var baseYP;
  26834. var lastYN; // 负向堆叠处理
  26835. var baseYN;
  26836. //var finalPLMap = {}; // 完成的point list(PL)
  26837. var curPLMap = {}; // 正在记录的point list(PL)
  26838. var data;
  26839. var value;
  26840. for (var i = 0, l = maxDataLength; i < l; i++) {
  26841. if (typeof categoryAxis.getNameByIndex(i) == 'undefined') {
  26842. // 系列数据超出类目轴长度
  26843. break;
  26844. }
  26845. x = categoryAxis.getCoordByIndex(i);
  26846. for (var j = 0, k = locationMap.length; j < k; j++) {
  26847. // 堆叠数据用第一条valueAxis
  26848. yAxisIndex = series[locationMap[j][0]].yAxisIndex || 0;
  26849. valueAxis = component.yAxis.getAxis(yAxisIndex);
  26850. baseYP = lastYP = baseYN = lastYN = valueAxis.getCoord(0);
  26851. for (var m = 0, n = locationMap[j].length; m < n; m++) {
  26852. seriesIndex = locationMap[j][m];
  26853. serie = series[seriesIndex];
  26854. data = serie.data[i];
  26855. value = typeof data != 'undefined'
  26856. ? (typeof data.value != 'undefined'
  26857. ? data.value
  26858. : data)
  26859. : '-';
  26860. curPLMap[seriesIndex] = curPLMap[seriesIndex] || [];
  26861. if (value == '-') {
  26862. // 空数据则把正在记录的curPLMap添加到finalPLMap中
  26863. if (curPLMap[seriesIndex].length > 0) {
  26864. finalPLMap[seriesIndex] =
  26865. finalPLMap[seriesIndex] || [];
  26866. finalPLMap[seriesIndex].push(
  26867. curPLMap[seriesIndex]
  26868. );
  26869. curPLMap[seriesIndex] = [];
  26870. }
  26871. continue;
  26872. }
  26873. y = valueAxis.getCoord(value);
  26874. if (value >= 0) {
  26875. // 正向堆叠
  26876. lastYP -= (baseYP - y);
  26877. y = lastYP;
  26878. }
  26879. else if (value < 0){
  26880. // 负向堆叠
  26881. lastYN += y - baseYN;
  26882. y = lastYN;
  26883. }
  26884. curPLMap[seriesIndex].push(
  26885. [x, y, i, categoryAxis.getNameByIndex(i), x, baseYP]
  26886. );
  26887. }
  26888. }
  26889. // 补充空数据的拖拽提示
  26890. lastYP = component.grid.getY();
  26891. var symbolSize;
  26892. for (var j = 0, k = locationMap.length; j < k; j++) {
  26893. for (var m = 0, n = locationMap[j].length; m < n; m++) {
  26894. seriesIndex = locationMap[j][m];
  26895. serie = series[seriesIndex];
  26896. data = serie.data[i];
  26897. value = typeof data != 'undefined'
  26898. ? (typeof data.value != 'undefined'
  26899. ? data.value
  26900. : data)
  26901. : '-';
  26902. if (value != '-') {
  26903. // 只关心空数据
  26904. continue;
  26905. }
  26906. if (self.deepQuery(
  26907. [data, serie, option], 'calculable'
  26908. )
  26909. ) {
  26910. symbolSize = self.deepQuery(
  26911. [data, serie],
  26912. 'symbolSize'
  26913. );
  26914. lastYP += symbolSize * 2 + 5;
  26915. y = lastYP;
  26916. self.shapeList.push(_getCalculableItem(
  26917. seriesIndex, i, categoryAxis.getNameByIndex(i),
  26918. x, y, 'horizontal'
  26919. ));
  26920. }
  26921. }
  26922. }
  26923. }
  26924. // 把剩余未完成的curPLMap全部添加到finalPLMap中
  26925. for (var sId in curPLMap) {
  26926. if (curPLMap[sId].length > 0) {
  26927. finalPLMap[sId] = finalPLMap[sId] || [];
  26928. finalPLMap[sId].push(curPLMap[sId]);
  26929. curPLMap[sId] = [];
  26930. }
  26931. }
  26932. _buildBorkenLine(finalPLMap, categoryAxis, 'horizontal');
  26933. }
  26934. /**
  26935. * 构建类目轴为垂直方向的折线图系列
  26936. */
  26937. function _buildVertical(maxDataLength, locationMap) {
  26938. // 确定类目轴和数值轴,同一方向随便找一个即可
  26939. var seriesIndex = locationMap[0][0];
  26940. var serie = series[seriesIndex];
  26941. var yAxisIndex = serie.yAxisIndex;
  26942. var categoryAxis = component.yAxis.getAxis(yAxisIndex);
  26943. var xAxisIndex; // 数值轴各异
  26944. var valueAxis; // 数值轴各异
  26945. var x;
  26946. var y;
  26947. var lastXP; // 正向堆叠处理
  26948. var baseXP;
  26949. var lastXN; // 负向堆叠处理
  26950. var baseXN;
  26951. //var finalPLMap = {}; // 完成的point list(PL)
  26952. var curPLMap = {}; // 正在记录的point list(PL)
  26953. var data;
  26954. var value;
  26955. for (var i = 0, l = maxDataLength; i < l; i++) {
  26956. if (typeof categoryAxis.getNameByIndex(i) == 'undefined') {
  26957. // 系列数据超出类目轴长度
  26958. break;
  26959. }
  26960. y = categoryAxis.getCoordByIndex(i);
  26961. for (var j = 0, k = locationMap.length; j < k; j++) {
  26962. // 堆叠数据用第一条valueAxis
  26963. xAxisIndex = series[locationMap[j][0]].xAxisIndex || 0;
  26964. valueAxis = component.xAxis.getAxis(xAxisIndex);
  26965. baseXP = lastXP = baseXN = lastXN = valueAxis.getCoord(0);
  26966. for (var m = 0, n = locationMap[j].length; m < n; m++) {
  26967. seriesIndex = locationMap[j][m];
  26968. serie = series[seriesIndex];
  26969. data = serie.data[i];
  26970. value = typeof data != 'undefined'
  26971. ? (typeof data.value != 'undefined'
  26972. ? data.value
  26973. : data)
  26974. : '-';
  26975. curPLMap[seriesIndex] = curPLMap[seriesIndex] || [];
  26976. if (value == '-') {
  26977. // 空数据则把正在记录的curPLMap添加到finalPLMap中
  26978. if (curPLMap[seriesIndex].length > 0) {
  26979. finalPLMap[seriesIndex] =
  26980. finalPLMap[seriesIndex] || [];
  26981. finalPLMap[seriesIndex].push(
  26982. curPLMap[seriesIndex]
  26983. );
  26984. curPLMap[seriesIndex] = [];
  26985. }
  26986. continue;
  26987. }
  26988. x = valueAxis.getCoord(value);
  26989. if (value >= 0) {
  26990. // 正向堆叠
  26991. lastXP += x - baseXP;
  26992. x = lastXP;
  26993. }
  26994. else if (value < 0){
  26995. // 负向堆叠
  26996. lastXN -= baseXN - x;
  26997. x = lastXN;
  26998. }
  26999. curPLMap[seriesIndex].push(
  27000. [x, y, i, categoryAxis.getNameByIndex(i), baseXP, y]
  27001. );
  27002. }
  27003. }
  27004. // 补充空数据的拖拽提示
  27005. lastXP = component.grid.getXend();
  27006. var symbolSize;
  27007. for (var j = 0, k = locationMap.length; j < k; j++) {
  27008. for (var m = 0, n = locationMap[j].length; m < n; m++) {
  27009. seriesIndex = locationMap[j][m];
  27010. serie = series[seriesIndex];
  27011. data = serie.data[i];
  27012. value = typeof data != 'undefined'
  27013. ? (typeof data.value != 'undefined'
  27014. ? data.value
  27015. : data)
  27016. : '-';
  27017. if (value != '-') {
  27018. // 只关心空数据
  27019. continue;
  27020. }
  27021. if (self.deepQuery(
  27022. [data, serie, option], 'calculable'
  27023. )
  27024. ) {
  27025. symbolSize = self.deepQuery(
  27026. [data, serie],
  27027. 'symbolSize'
  27028. );
  27029. lastXP -= symbolSize * 2 + 5;
  27030. x = lastXP;
  27031. self.shapeList.push(_getCalculableItem(
  27032. seriesIndex, i, categoryAxis.getNameByIndex(i),
  27033. x, y, 'vertical'
  27034. ));
  27035. }
  27036. }
  27037. }
  27038. }
  27039. // 把剩余未完成的curPLMap全部添加到finalPLMap中
  27040. for (var sId in curPLMap) {
  27041. if (curPLMap[sId].length > 0) {
  27042. finalPLMap[sId] = finalPLMap[sId] || [];
  27043. finalPLMap[sId].push(curPLMap[sId]);
  27044. curPLMap[sId] = [];
  27045. }
  27046. }
  27047. _buildBorkenLine(finalPLMap, categoryAxis, 'vertical');
  27048. }
  27049. /**
  27050. * 生成折线和折线上的拐点
  27051. */
  27052. function _buildBorkenLine(pointList, categoryAxis, orient) {
  27053. var defaultColor;
  27054. // 折线相关
  27055. var lineWidth;
  27056. var lineType;
  27057. var lineColor;
  27058. var normalColor;
  27059. var emphasisColor;
  27060. // 填充相关
  27061. var isFill;
  27062. var fillNormalColor;
  27063. var serie;
  27064. var data;
  27065. var seriesPL;
  27066. var singlePL;
  27067. // 堆叠层叠需求,反顺序构建
  27068. for (var seriesIndex = series.length - 1;
  27069. seriesIndex >= 0;
  27070. seriesIndex--
  27071. ) {
  27072. serie = series[seriesIndex];
  27073. seriesPL = pointList[seriesIndex];
  27074. if (serie.type == self.type && typeof seriesPL != 'undefined') {
  27075. defaultColor = _sIndex2ColorMap[seriesIndex];
  27076. // 多级控制
  27077. lineWidth = self.deepQuery(
  27078. [serie], 'itemStyle.normal.lineStyle.width'
  27079. );
  27080. lineType = self.deepQuery(
  27081. [serie], 'itemStyle.normal.lineStyle.type'
  27082. );
  27083. lineColor = self.deepQuery(
  27084. [serie], 'itemStyle.normal.lineStyle.color'
  27085. );
  27086. normalColor = self.deepQuery(
  27087. [serie], 'itemStyle.normal.color'
  27088. );
  27089. emphasisColor = self.deepQuery(
  27090. [serie], 'itemStyle.emphasis.color'
  27091. );
  27092. isFill = typeof self.deepQuery(
  27093. [serie], 'itemStyle.normal.areaStyle'
  27094. ) != 'undefined';
  27095. fillNormalColor = self.deepQuery(
  27096. [serie], 'itemStyle.normal.areaStyle.color'
  27097. );
  27098. for (var i = 0, l = seriesPL.length; i < l; i++) {
  27099. singlePL = seriesPL[i];
  27100. for (var j = 0, k = singlePL.length; j < k; j++) {
  27101. data = serie.data[singlePL[j][2]];
  27102. if (self.deepQuery(
  27103. [data, serie], 'showAllSymbol'
  27104. ) // 全显示
  27105. || (categoryAxis.isMainAxis(singlePL[j][2])
  27106. && self.deepQuery(
  27107. [data, serie], 'symbol'
  27108. ) != 'none'
  27109. ) // 主轴非空
  27110. || self.deepQuery(
  27111. [data, serie, option],
  27112. 'calculable'
  27113. ) // 可计算
  27114. ) {
  27115. self.shapeList.push(_getSymbol(
  27116. seriesIndex,
  27117. singlePL[j][2], // dataIndex
  27118. singlePL[j][3], // name
  27119. singlePL[j][0], // x
  27120. singlePL[j][1], // y
  27121. self.deepQuery(
  27122. [data], 'itemStyle.normal.color'
  27123. ) || normalColor
  27124. || defaultColor,
  27125. self.deepQuery(
  27126. [data], 'itemStyle.emphasis.color'
  27127. ) || emphasisColor
  27128. || normalColor
  27129. || defaultColor,
  27130. lineWidth,
  27131. self.deepQuery(
  27132. [data, serie], 'symbolRotate'
  27133. ),
  27134. orient
  27135. ));
  27136. }
  27137. }
  27138. // 折线图
  27139. self.shapeList.push({
  27140. shape : 'brokenLine',
  27141. zlevel : _zlevelBase,
  27142. style : {
  27143. pointList : singlePL,
  27144. strokeColor : lineColor
  27145. || normalColor
  27146. || defaultColor,
  27147. lineWidth : lineWidth,
  27148. lineType : lineType,
  27149. smooth : _getSmooth(serie.smooth),
  27150. shadowColor : self.deepQuery(
  27151. [serie],
  27152. 'itemStyle.normal.lineStyle.shadowColor'
  27153. ),
  27154. shadowBlur: self.deepQuery(
  27155. [serie],
  27156. 'itemStyle.normal.lineStyle.shadowBlur'
  27157. ),
  27158. shadowOffsetX: self.deepQuery(
  27159. [serie],
  27160. 'itemStyle.normal.lineStyle.shadowOffsetX'
  27161. ),
  27162. shadowOffsetY: self.deepQuery(
  27163. [serie],
  27164. 'itemStyle.normal.lineStyle.shadowOffsetY'
  27165. )
  27166. },
  27167. hoverable : false,
  27168. _main : true,
  27169. _seriesIndex : seriesIndex,
  27170. _orient : orient
  27171. });
  27172. if (isFill) {
  27173. self.shapeList.push({
  27174. shape : 'halfSmoothPolygon',
  27175. zlevel : _zlevelBase,
  27176. style : {
  27177. pointList : singlePL.concat([
  27178. [
  27179. singlePL[singlePL.length - 1][4],
  27180. singlePL[singlePL.length - 1][5] - 2
  27181. ],
  27182. [
  27183. singlePL[0][4],
  27184. singlePL[0][5] - 2
  27185. ]
  27186. ]),
  27187. brushType : 'fill',
  27188. smooth : _getSmooth(serie.smooth),
  27189. color : fillNormalColor
  27190. ? fillNormalColor
  27191. : zrColor.alpha(defaultColor,0.5)
  27192. },
  27193. hoverable : false,
  27194. _main : true,
  27195. _seriesIndex : seriesIndex,
  27196. _orient : orient
  27197. });
  27198. }
  27199. }
  27200. }
  27201. }
  27202. }
  27203. function _getSmooth(isSmooth/*, pointList, orient*/) {
  27204. if (isSmooth) {
  27205. /* 不科学啊,发现0.3通用了
  27206. var delta;
  27207. if (orient == 'horizontal') {
  27208. delta = Math.abs(pointList[0][0] - pointList[1][0]);
  27209. }
  27210. else {
  27211. delta = Math.abs(pointList[0][1] - pointList[1][1]);
  27212. }
  27213. */
  27214. return 0.3;
  27215. }
  27216. else {
  27217. return 0;
  27218. }
  27219. }
  27220. /**
  27221. * 生成空数据所需的可计算提示图形
  27222. */
  27223. function _getCalculableItem(
  27224. seriesIndex, dataIndex, name, x, y, orient
  27225. ) {
  27226. var color = series[seriesIndex].calculableHolderColor
  27227. || ecConfig.calculableHolderColor;
  27228. var itemShape = _getSymbol(
  27229. seriesIndex, dataIndex, name,
  27230. x, y,
  27231. color,
  27232. _sIndex2ColorMap[seriesIndex],
  27233. 2,
  27234. 0,
  27235. orient
  27236. );
  27237. itemShape.hoverable = false;
  27238. itemShape.draggable = false;
  27239. itemShape.style.text = undefined;
  27240. //itemShape.highlightStyle.lineWidth = 20;
  27241. return itemShape;
  27242. }
  27243. /**
  27244. * 生成折线图上的拐点图形
  27245. */
  27246. function _getSymbol(
  27247. seriesIndex, dataIndex, name, x, y,
  27248. normalColor, emphasisColor, lineWidth, rotate, orient
  27249. ) {
  27250. var serie = series[seriesIndex];
  27251. var data = serie.data[dataIndex];
  27252. var symbol = self.deepQuery([data], 'symbol')
  27253. || _sIndex2ShapeMap[seriesIndex]
  27254. || 'cricle';
  27255. var symbolSize = self.deepQuery([data, serie],'symbolSize');
  27256. var itemShape = {
  27257. shape : 'icon',
  27258. zlevel : _zlevelBase + 1,
  27259. style : {
  27260. iconType : symbol.replace('empty', '').toLowerCase(),
  27261. x : x - symbolSize,
  27262. y : y - symbolSize,
  27263. width : symbolSize * 2,
  27264. height : symbolSize * 2,
  27265. brushType : 'both',
  27266. color : symbol.match('empty') ? '#fff' : normalColor,
  27267. strokeColor : normalColor,
  27268. lineWidth: lineWidth * 2
  27269. },
  27270. highlightStyle : {
  27271. color : symbol.match('empty') ? '#fff' : emphasisColor,
  27272. strokeColor : emphasisColor,
  27273. lineWidth: lineWidth * 2 + 2
  27274. },
  27275. clickable : true
  27276. };
  27277. if (typeof rotate != 'undefined') {
  27278. itemShape.rotation = [
  27279. rotate * Math.PI / 180, x, y
  27280. ];
  27281. }
  27282. if (symbol.match('star')) {
  27283. itemShape.style.iconType = 'star';
  27284. itemShape.style.n =
  27285. (symbol.replace('empty', '').replace('star','') - 0) || 5;
  27286. }
  27287. if (symbol == 'none') {
  27288. itemShape.invisible = true;
  27289. itemShape.hoverable = false;
  27290. }
  27291. if (self.deepQuery([data, serie, option], 'calculable')) {
  27292. self.setCalculable(itemShape);
  27293. itemShape.draggable = true;
  27294. }
  27295. itemShape = self.addLabel(
  27296. itemShape,
  27297. series[seriesIndex],
  27298. series[seriesIndex].data[dataIndex],
  27299. name,
  27300. orient == 'vertical' ? 'horizontal' : 'vertical'
  27301. );
  27302. if (symbol.match('empty')) {
  27303. if (typeof itemShape.style.textColor == 'undefined') {
  27304. itemShape.style.textColor = itemShape.style.strokeColor;
  27305. }
  27306. if (typeof itemShape.highlightStyle.textColor == 'undefined') {
  27307. itemShape.highlightStyle.textColor =
  27308. itemShape.highlightStyle.strokeColor;
  27309. }
  27310. }
  27311. ecData.pack(
  27312. itemShape,
  27313. series[seriesIndex], seriesIndex,
  27314. series[seriesIndex].data[dataIndex], dataIndex,
  27315. name
  27316. );
  27317. itemShape._x = x;
  27318. itemShape._y = y;
  27319. itemShape._dataIndex = dataIndex;
  27320. itemShape._seriesIndex = seriesIndex;
  27321. return itemShape;
  27322. }
  27323. /**
  27324. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  27325. * @param {Object} newSeries
  27326. * @param {Object} newComponent
  27327. */
  27328. function init(newOption, newComponent) {
  27329. component = newComponent;
  27330. refresh(newOption);
  27331. }
  27332. /**
  27333. * 刷新
  27334. */
  27335. function refresh(newOption) {
  27336. if (newOption) {
  27337. option = newOption;
  27338. series = option.series;
  27339. }
  27340. self.clear();
  27341. _buildShape();
  27342. }
  27343. function ontooltipHover(param, tipShape) {
  27344. var seriesIndex = param.seriesIndex;
  27345. var dataIndex = param.dataIndex;
  27346. var seriesPL;
  27347. var serie;
  27348. var queryTarget;
  27349. var len = seriesIndex.length;
  27350. while (len--) {
  27351. seriesPL = finalPLMap[seriesIndex[len]];
  27352. if (seriesPL) {
  27353. serie = series[seriesIndex[len]];
  27354. queryTarget = [serie];
  27355. defaultColor = _sIndex2ColorMap[seriesIndex[len]];
  27356. // 多级控制
  27357. lineWidth = self.deepQuery(
  27358. [serie], 'itemStyle.normal.lineStyle.width'
  27359. );
  27360. lineType = self.deepQuery(
  27361. [serie], 'itemStyle.normal.lineStyle.type'
  27362. );
  27363. lineColor = self.deepQuery(
  27364. [serie], 'itemStyle.normal.lineStyle.color'
  27365. );
  27366. normalColor = self.deepQuery(
  27367. [serie], 'itemStyle.normal.color'
  27368. );
  27369. emphasisColor = self.deepQuery(
  27370. [serie], 'itemStyle.emphasis.color'
  27371. );
  27372. var shape;
  27373. for (var i = 0, l = seriesPL.length; i < l; i++) {
  27374. singlePL = seriesPL[i];
  27375. for (var j = 0, k = singlePL.length; j < k; j++) {
  27376. if (dataIndex == singlePL[j][2]) {
  27377. data = serie.data[singlePL[j][2]];
  27378. shape = _getSymbol(
  27379. seriesIndex[len],
  27380. singlePL[j][2], // dataIndex
  27381. singlePL[j][3], // name
  27382. singlePL[j][0], // x
  27383. singlePL[j][1], // y
  27384. self.deepQuery(
  27385. [data], 'itemStyle.normal.color'
  27386. ) || normalColor
  27387. || defaultColor,
  27388. self.deepQuery(
  27389. [data], 'itemStyle.emphasis.color'
  27390. ) || emphasisColor
  27391. || normalColor
  27392. || defaultColor,
  27393. lineWidth,
  27394. self.deepQuery(
  27395. [data, serie], 'symbolRotate'
  27396. ),
  27397. 'horizontal'
  27398. );
  27399. //console.log(shape)
  27400. //zr.addHoverShape(shape);
  27401. tipShape.push(shape);
  27402. }
  27403. }
  27404. }
  27405. }
  27406. }
  27407. }
  27408. /**
  27409. * 动态数据增加动画
  27410. */
  27411. function addDataAnimation(params) {
  27412. var aniMap = {}; // seriesIndex索引参数
  27413. for (var i = 0, l = params.length; i < l; i++) {
  27414. aniMap[params[i][0]] = params[i];
  27415. }
  27416. var x;
  27417. var dx;
  27418. var y;
  27419. var dy;
  27420. var seriesIndex;
  27421. var pointList;
  27422. var isHorizontal; // 是否横向布局, isHorizontal;
  27423. for (var i = self.shapeList.length - 1; i >= 0; i--) {
  27424. seriesIndex = self.shapeList[i]._seriesIndex;
  27425. if (aniMap[seriesIndex] && !aniMap[seriesIndex][3]) {
  27426. // 有数据删除才有移动的动画
  27427. if (self.shapeList[i]._main) {
  27428. pointList = self.shapeList[i].style.pointList;
  27429. // 主线动画
  27430. dx = Math.abs(pointList[0][0] - pointList[1][0]);
  27431. dy = Math.abs(pointList[0][1] - pointList[1][1]);
  27432. isHorizontal =
  27433. self.shapeList[i]._orient == 'horizontal';
  27434. if (aniMap[seriesIndex][2]) {
  27435. // 队头加入删除末尾
  27436. if (self.shapeList[i].shape == 'polygon') {
  27437. //区域图
  27438. var len = pointList.length;
  27439. self.shapeList[i].style.pointList[len - 3]
  27440. = pointList[len - 2];
  27441. isHorizontal
  27442. ? (self.shapeList[i].style.pointList[len - 3][0]
  27443. = pointList[len - 4][0]
  27444. )
  27445. : (self.shapeList[i].style.pointList[len - 3][1]
  27446. = pointList[len - 4][1]
  27447. );
  27448. self.shapeList[i].style.pointList[len - 2]
  27449. = pointList[len - 1];
  27450. }
  27451. self.shapeList[i].style.pointList.pop();
  27452. isHorizontal ? (x = dx, y = 0) : (x = 0, y = -dy);
  27453. }
  27454. else {
  27455. // 队尾加入删除头部
  27456. self.shapeList[i].style.pointList.shift();
  27457. if (self.shapeList[i].shape == 'polygon') {
  27458. //区域图
  27459. var targetPoint =
  27460. self.shapeList[i].style.pointList.pop();
  27461. isHorizontal
  27462. ? (targetPoint[0] = pointList[0][0])
  27463. : (targetPoint[1] = pointList[0][1]);
  27464. self.shapeList[i].style.pointList.push(
  27465. targetPoint
  27466. );
  27467. }
  27468. isHorizontal ? (x = -dx, y = 0) : (x = 0, y = dy);
  27469. }
  27470. zr.modShape(self.shapeList[i].id, {
  27471. style : {
  27472. pointList : self.shapeList[i].style.pointList
  27473. }
  27474. });
  27475. }
  27476. else {
  27477. // 拐点动画
  27478. if (aniMap[seriesIndex][2]
  27479. && self.shapeList[i]._dataIndex
  27480. == series[seriesIndex].data.length - 1
  27481. ) {
  27482. // 队头加入删除末尾
  27483. zr.delShape(self.shapeList[i].id);
  27484. continue;
  27485. }
  27486. else if (!aniMap[seriesIndex][2]
  27487. && self.shapeList[i]._dataIndex === 0
  27488. ) {
  27489. // 队尾加入删除头部
  27490. zr.delShape(self.shapeList[i].id);
  27491. continue;
  27492. }
  27493. }
  27494. zr.animate(self.shapeList[i].id, '')
  27495. .when(
  27496. 500,
  27497. {position : [x, y]}
  27498. )
  27499. .start();
  27500. }
  27501. }
  27502. }
  27503. /**
  27504. * 动画设定
  27505. */
  27506. function animation() {
  27507. var duration = self.deepQuery([option], 'animationDuration');
  27508. var easing = self.deepQuery([option], 'animationEasing');
  27509. var x;
  27510. var y;
  27511. var serie;
  27512. var dataIndex = 0;
  27513. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  27514. if (self.shapeList[i]._main) {
  27515. serie = series[self.shapeList[i]._seriesIndex];
  27516. dataIndex += 1;
  27517. x = self.shapeList[i].style.pointList[0][0];
  27518. y = self.shapeList[i].style.pointList[0][1];
  27519. if (self.shapeList[i]._orient == 'horizontal') {
  27520. zr.modShape(self.shapeList[i].id, {
  27521. scale : [0, 1, x, y]
  27522. });
  27523. }
  27524. else {
  27525. zr.modShape(self.shapeList[i].id, {
  27526. scale : [1, 0, x, y]
  27527. });
  27528. }
  27529. zr.animate(self.shapeList[i].id, '')
  27530. .when(
  27531. (self.deepQuery([serie],'animationDuration')
  27532. || duration)
  27533. + dataIndex * 100,
  27534. {scale : [1, 1, x, y]}
  27535. )
  27536. .start(
  27537. self.deepQuery([serie], 'animationEasing') || easing
  27538. );
  27539. }
  27540. else {
  27541. x = self.shapeList[i]._x || 0;
  27542. y = self.shapeList[i]._y || 0;
  27543. zr.modShape(self.shapeList[i].id, {
  27544. scale : [0, 0, x, y]
  27545. });
  27546. zr.animate(self.shapeList[i].id, '')
  27547. .when(
  27548. duration,
  27549. {scale : [1, 1, x, y]}
  27550. )
  27551. .start('QuinticOut');
  27552. }
  27553. }
  27554. }
  27555. self.init = init;
  27556. self.refresh = refresh;
  27557. self.ontooltipHover = ontooltipHover;
  27558. self.addDataAnimation = addDataAnimation;
  27559. self.animation = animation;
  27560. init(option, component);
  27561. }
  27562. function legendLineIcon(ctx, style) {
  27563. var x = style.x;
  27564. var y = style.y;
  27565. var width = style.width;
  27566. var height = style.height;
  27567. var dy = height / 2;
  27568. ctx.moveTo(x, y + dy);
  27569. ctx.lineTo(x + width, y + dy);
  27570. if (style.symbol.match('empty')) {
  27571. ctx.fillStyle = '#fff';
  27572. }
  27573. style.brushType = 'both';
  27574. var symbol = style.symbol.replace('empty', '').toLowerCase();
  27575. if (symbol.match('star')) {
  27576. dy = (symbol.replace('star','') - 0) || 5;
  27577. y -= 1;
  27578. symbol = 'star';
  27579. }
  27580. else if (symbol == 'rectangle' || symbol == 'arrow') {
  27581. x += (width - height) / 2;
  27582. width = height;
  27583. }
  27584. symbol = require('zrender/shape').get('icon').get(symbol);
  27585. if (symbol) {
  27586. symbol(ctx, {
  27587. x : x + 3,
  27588. y : y + 3,
  27589. width : width - 6,
  27590. height : height - 6,
  27591. n : dy
  27592. });
  27593. }
  27594. }
  27595. // 动态扩展zrender shape:halfSmoothPolygon
  27596. require('../util/shape/halfSmoothPolygon');
  27597. // 图表注册
  27598. require('../chart').define('line', Line);
  27599. return Line;
  27600. });
  27601. /**
  27602. * echarts图表类:柱形图
  27603. *
  27604. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  27605. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  27606. *
  27607. */
  27608. define('echarts/chart/bar',['require','../component/base','./calculableBase','../config','../util/ecData','zrender/tool/color','../chart'],function(require) {
  27609. /**
  27610. * 构造函数
  27611. * @param {Object} messageCenter echart消息中心
  27612. * @param {ZRender} zr zrender实例
  27613. * @param {Object} series 数据
  27614. * @param {Object} component 组件
  27615. */
  27616. function Bar(messageCenter, zr, option, component){
  27617. // 基类装饰
  27618. var ComponentBase = require('../component/base');
  27619. ComponentBase.call(this, zr);
  27620. // 可计算特性装饰
  27621. var CalculableBase = require('./calculableBase');
  27622. CalculableBase.call(this, zr, option);
  27623. var ecConfig = require('../config');
  27624. var ecData = require('../util/ecData');
  27625. var zrColor = require('zrender/tool/color');
  27626. var self = this;
  27627. self.type = ecConfig.CHART_TYPE_BAR;
  27628. var series; // 共享数据源,不要修改跟自己无关的项
  27629. var _zlevelBase = self.getZlevelBase();
  27630. var _sIndex2colorMap = {}; // series默认颜色索引,seriesIndex索引到color
  27631. function _buildShape() {
  27632. self.selectedMap = {};
  27633. // 水平垂直双向series索引 ,position索引到seriesIndex
  27634. var _position2sIndexMap = {
  27635. top : [],
  27636. bottom : [],
  27637. left : [],
  27638. right : []
  27639. };
  27640. var xAxisIndex;
  27641. var yAxisIndex;
  27642. var xAxis;
  27643. var yAxis;
  27644. for (var i = 0, l = series.length; i < l; i++) {
  27645. if (series[i].type == ecConfig.CHART_TYPE_BAR) {
  27646. series[i] = self.reformOption(series[i]);
  27647. xAxisIndex = series[i].xAxisIndex;
  27648. yAxisIndex = series[i].yAxisIndex;
  27649. xAxis = component.xAxis.getAxis(xAxisIndex);
  27650. yAxis = component.yAxis.getAxis(yAxisIndex);
  27651. if (xAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
  27652. ) {
  27653. _position2sIndexMap[xAxis.getPosition()].push(i);
  27654. }
  27655. else if (yAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
  27656. ) {
  27657. _position2sIndexMap[yAxis.getPosition()].push(i);
  27658. }
  27659. }
  27660. }
  27661. // console.log(_position2sIndexMap)
  27662. for (var position in _position2sIndexMap) {
  27663. if (_position2sIndexMap[position].length > 0) {
  27664. _buildSinglePosition(
  27665. position, _position2sIndexMap[position]
  27666. );
  27667. }
  27668. }
  27669. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  27670. self.shapeList[i].id = zr.newShapeId(self.type);
  27671. zr.addShape(self.shapeList[i]);
  27672. }
  27673. }
  27674. /**
  27675. * 构建单个方向上的柱形图
  27676. *
  27677. * @param {number} seriesIndex 系列索引
  27678. */
  27679. function _buildSinglePosition(position, seriesArray) {
  27680. var mapData = _mapData(seriesArray);
  27681. var locationMap = mapData.locationMap;
  27682. var maxDataLength = mapData.maxDataLength;
  27683. if (maxDataLength === 0 || locationMap.length === 0) {
  27684. return;
  27685. }
  27686. switch (position) {
  27687. case 'bottom' :
  27688. case 'top' :
  27689. _buildHorizontal(maxDataLength, locationMap);
  27690. break;
  27691. case 'left' :
  27692. case 'right' :
  27693. _buildVertical(maxDataLength, locationMap);
  27694. break;
  27695. }
  27696. }
  27697. /**
  27698. * 数据整形
  27699. * 数组位置映射到系列索引
  27700. */
  27701. function _mapData(seriesArray) {
  27702. var serie; // 临时映射变量
  27703. var dataIndex = 0; // 堆叠数据所在位置映射
  27704. var stackMap = {}; // 堆叠数据位置映射,堆叠组在二维中的第几项
  27705. var magicStackKey = '__kener__stack__'; // 堆叠命名,非堆叠数据安单一堆叠处理
  27706. var stackKey; // 临时映射变量
  27707. var serieName; // 临时映射变量
  27708. var legend = component.legend;
  27709. var locationMap = []; // 需要返回的东西:数组位置映射到系列索引
  27710. var maxDataLength = 0; // 需要返回的东西:最大数据长度
  27711. // 计算需要显示的个数和分配位置并记在下面这个结构里
  27712. for (var i = 0, l = seriesArray.length; i < l; i++) {
  27713. serie = series[seriesArray[i]];
  27714. serieName = serie.name;
  27715. if (legend){
  27716. self.selectedMap[serieName] = legend.isSelected(serieName);
  27717. _sIndex2colorMap[seriesArray[i]] =
  27718. legend.getColor(serieName);
  27719. } else {
  27720. self.selectedMap[serieName] = true;
  27721. _sIndex2colorMap[seriesArray[i]] =
  27722. zr.getColor(seriesArray[i]);
  27723. }
  27724. if (self.selectedMap[serieName]) {
  27725. stackKey = serie.stack || (magicStackKey + seriesArray[i]);
  27726. if (typeof stackMap[stackKey] == 'undefined') {
  27727. stackMap[stackKey] = dataIndex;
  27728. locationMap[dataIndex] = [seriesArray[i]];
  27729. dataIndex++;
  27730. }
  27731. else {
  27732. // 已经分配了位置就推进去就行
  27733. locationMap[stackMap[stackKey]].push(seriesArray[i]);
  27734. }
  27735. }
  27736. // 兼职帮算一下最大长度
  27737. maxDataLength = Math.max(maxDataLength, serie.data.length);
  27738. }
  27739. /* 调试输出
  27740. var s = '';
  27741. for (var i = 0, l = maxDataLength; i < l; i++) {
  27742. s = '[';
  27743. for (var j = 0, k = locationMap.length; j < k; j++) {
  27744. s +='['
  27745. for (var m = 0, n = locationMap[j].length - 1; m < n; m++) {
  27746. s += series[locationMap[j][m]].data[i] + ','
  27747. }
  27748. s += series[locationMap[j][locationMap[j].length - 1]]
  27749. .data[i];
  27750. s += ']'
  27751. }
  27752. s += ']';
  27753. console.log(s);
  27754. }
  27755. console.log(locationMap)
  27756. */
  27757. return {
  27758. locationMap : locationMap,
  27759. maxDataLength : maxDataLength
  27760. };
  27761. }
  27762. /**
  27763. * 构建类目轴为水平方向的柱形图系列
  27764. */
  27765. function _buildHorizontal(maxDataLength, locationMap) {
  27766. // 确定类目轴和数值轴,同一方向随便找一个即可
  27767. var seriesIndex = locationMap[0][0];
  27768. var serie = series[seriesIndex];
  27769. var xAxisIndex = serie.xAxisIndex;
  27770. var categoryAxis = component.xAxis.getAxis(xAxisIndex);
  27771. var yAxisIndex; // 数值轴各异
  27772. var valueAxis; // 数值轴各异
  27773. var size = _mapSize(categoryAxis, locationMap);
  27774. var gap = size.gap;
  27775. var barGap = size.barGap;
  27776. var barWidthMap = size.barWidthMap;
  27777. var barWidth = size.barWidth; // 自适应宽度
  27778. var barMinHeightMap = size.barMinHeightMap;
  27779. var barHeight;
  27780. var x;
  27781. var y;
  27782. var lastYP; // 正向堆叠处理
  27783. var baseYP;
  27784. var lastYN; // 负向堆叠处理
  27785. var baseYN;
  27786. var barShape;
  27787. var data;
  27788. var value;
  27789. for (var i = 0, l = maxDataLength; i < l; i++) {
  27790. if (typeof categoryAxis.getNameByIndex(i) == 'undefined') {
  27791. // 系列数据超出类目轴长度
  27792. break;
  27793. }
  27794. x = categoryAxis.getCoordByIndex(i) - gap / 2;
  27795. for (var j = 0, k = locationMap.length; j < k; j++) {
  27796. // 堆叠数据用第一条valueAxis
  27797. yAxisIndex = series[locationMap[j][0]].yAxisIndex || 0;
  27798. valueAxis = component.yAxis.getAxis(yAxisIndex);
  27799. baseYP = lastYP = valueAxis.getCoord(0) - 1;
  27800. baseYN = lastYN = lastYP + 2;
  27801. for (var m = 0, n = locationMap[j].length; m < n; m++) {
  27802. seriesIndex = locationMap[j][m];
  27803. serie = series[seriesIndex];
  27804. data = serie.data[i];
  27805. value = typeof data != 'undefined'
  27806. ? (typeof data.value != 'undefined'
  27807. ? data.value
  27808. : data)
  27809. : '-';
  27810. if (value == '-') {
  27811. // 空数据在做完后补充拖拽提示框
  27812. continue;
  27813. }
  27814. y = valueAxis.getCoord(value);
  27815. if (value > 0) {
  27816. // 正向堆叠
  27817. barHeight = baseYP - y;
  27818. // 非堆叠数据最小高度有效
  27819. if (n == 1
  27820. && barMinHeightMap[seriesIndex] > barHeight
  27821. ) {
  27822. barHeight = barMinHeightMap[seriesIndex];
  27823. }
  27824. lastYP -= barHeight;
  27825. y = lastYP;
  27826. lastYP -= 0.5; //白色视觉分隔线宽修正
  27827. }
  27828. else if (value < 0){
  27829. // 负向堆叠
  27830. barHeight = y - baseYN;
  27831. // 非堆叠数据最小高度有效
  27832. if (n == 1
  27833. && barMinHeightMap[seriesIndex] > barHeight
  27834. ) {
  27835. barHeight = barMinHeightMap[seriesIndex];
  27836. }
  27837. y = lastYN;
  27838. lastYN += barHeight;
  27839. lastYN += 0.5; //白色视觉分隔线宽修正
  27840. }
  27841. else {
  27842. // 0值
  27843. barHeight = baseYP - y;
  27844. // 最小高度无效
  27845. lastYP -= barHeight;
  27846. y = lastYP;
  27847. lastYP -= 0.5; //白色视觉分隔线宽修正
  27848. }
  27849. barShape = _getBarItem(
  27850. seriesIndex, i,
  27851. categoryAxis.getNameByIndex(i),
  27852. x, y,
  27853. barWidthMap[seriesIndex] || barWidth,
  27854. barHeight,
  27855. 'vertical'
  27856. );
  27857. self.shapeList.push(barShape);
  27858. }
  27859. // 补充空数据的拖拽提示框
  27860. for (var m = 0, n = locationMap[j].length; m < n; m++) {
  27861. seriesIndex = locationMap[j][m];
  27862. serie = series[seriesIndex];
  27863. data = serie.data[i];
  27864. value = typeof data != 'undefined'
  27865. ? (typeof data.value != 'undefined'
  27866. ? data.value
  27867. : data)
  27868. : '-';
  27869. if (value != '-') {
  27870. // 只关心空数据
  27871. continue;
  27872. }
  27873. if (self.deepQuery(
  27874. [data, serie, option], 'calculable'
  27875. )
  27876. ) {
  27877. lastYP -= barMinHeightMap[seriesIndex];
  27878. y = lastYP;
  27879. barShape = _getBarItem(
  27880. seriesIndex, i,
  27881. categoryAxis.getNameByIndex(i),
  27882. x + 1, y,
  27883. (barWidthMap[seriesIndex] || barWidth) - 2,
  27884. barMinHeightMap[seriesIndex],
  27885. 'vertical'
  27886. );
  27887. barShape.hoverable = false;
  27888. barShape.draggable = false;
  27889. barShape.style.brushType = 'stroke';
  27890. barShape.style.strokeColor =
  27891. serie.calculableHolderColor
  27892. || ecConfig.calculableHolderColor;
  27893. self.shapeList.push(barShape);
  27894. }
  27895. }
  27896. x += ((barWidthMap[seriesIndex] || barWidth) + barGap);
  27897. }
  27898. }
  27899. }
  27900. /**
  27901. * 构建类目轴为垂直方向的柱形图系列
  27902. */
  27903. function _buildVertical(maxDataLength, locationMap) {
  27904. // 确定类目轴和数值轴,同一方向随便找一个即可
  27905. var seriesIndex = locationMap[0][0];
  27906. var serie = series[seriesIndex];
  27907. var yAxisIndex = serie.yAxisIndex;
  27908. var categoryAxis = component.yAxis.getAxis(yAxisIndex);
  27909. var xAxisIndex; // 数值轴各异
  27910. var valueAxis; // 数值轴各异
  27911. var size = _mapSize(categoryAxis, locationMap);
  27912. var gap = size.gap;
  27913. var barGap = size.barGap;
  27914. var barWidthMap = size.barWidthMap;
  27915. var barWidth = size.barWidth; // 自适应宽度
  27916. var barMinHeightMap = size.barMinHeightMap;
  27917. var barHeight;
  27918. var x;
  27919. var y;
  27920. var lastXP; // 正向堆叠处理
  27921. var baseXP;
  27922. var lastXN; // 负向堆叠处理
  27923. var baseXN;
  27924. var barShape;
  27925. var data;
  27926. var value;
  27927. for (var i = 0, l = maxDataLength; i < l; i++) {
  27928. if (typeof categoryAxis.getNameByIndex(i) == 'undefined') {
  27929. // 系列数据超出类目轴长度
  27930. break;
  27931. }
  27932. y = categoryAxis.getCoordByIndex(i) + gap / 2;
  27933. for (var j = 0, k = locationMap.length; j < k; j++) {
  27934. // 堆叠数据用第一条valueAxis
  27935. xAxisIndex = series[locationMap[j][0]].xAxisIndex || 0;
  27936. valueAxis = component.xAxis.getAxis(xAxisIndex);
  27937. baseXP = lastXP = valueAxis.getCoord(0) + 1;
  27938. baseXN = lastXN = lastXP - 2;
  27939. for (var m = 0, n = locationMap[j].length; m < n; m++) {
  27940. seriesIndex = locationMap[j][m];
  27941. serie = series[seriesIndex];
  27942. data = serie.data[i];
  27943. value = typeof data != 'undefined'
  27944. ? (typeof data.value != 'undefined'
  27945. ? data.value
  27946. : data)
  27947. : '-';
  27948. if (value == '-') {
  27949. // 空数据在做完后补充拖拽提示框
  27950. continue;
  27951. }
  27952. x = valueAxis.getCoord(value);
  27953. if (value > 0) {
  27954. // 正向堆叠
  27955. barHeight = x - baseXP;
  27956. // 非堆叠数据最小高度有效
  27957. if (n == 1
  27958. && barMinHeightMap[seriesIndex] > barHeight
  27959. ) {
  27960. barHeight = barMinHeightMap[seriesIndex];
  27961. }
  27962. x = lastXP;
  27963. lastXP += barHeight;
  27964. lastXP += 0.5; //白色视觉分隔线宽修正
  27965. }
  27966. else if (value < 0){
  27967. // 负向堆叠
  27968. barHeight = baseXN - x;
  27969. // 非堆叠数据最小高度有效
  27970. if (n == 1
  27971. && barMinHeightMap[seriesIndex] > barHeight
  27972. ) {
  27973. barHeight = barMinHeightMap[seriesIndex];
  27974. }
  27975. lastXN -= barHeight;
  27976. x = lastXN;
  27977. lastXN -= 0.5; //白色视觉分隔线宽修正
  27978. }
  27979. else {
  27980. // 0值
  27981. barHeight = x - baseXP;
  27982. // 最小高度无效
  27983. x = lastXP;
  27984. lastXP += barHeight;
  27985. lastXP += 0.5; //白色视觉分隔线宽修正
  27986. }
  27987. barShape = _getBarItem(
  27988. seriesIndex, i,
  27989. categoryAxis.getNameByIndex(i),
  27990. x, y - (barWidthMap[seriesIndex] || barWidth),
  27991. barHeight,
  27992. barWidthMap[seriesIndex] || barWidth,
  27993. 'horizontal'
  27994. );
  27995. self.shapeList.push(barShape);
  27996. }
  27997. // 补充空数据的拖拽提示框
  27998. for (var m = 0, n = locationMap[j].length; m < n; m++) {
  27999. seriesIndex = locationMap[j][m];
  28000. serie = series[seriesIndex];
  28001. data = serie.data[i];
  28002. value = typeof data != 'undefined'
  28003. ? (typeof data.value != 'undefined'
  28004. ? data.value
  28005. : data)
  28006. : '-';
  28007. if (value != '-') {
  28008. // 只关心空数据
  28009. continue;
  28010. }
  28011. if (self.deepQuery(
  28012. [data, serie, option], 'calculable'
  28013. )
  28014. ) {
  28015. x = lastXP;
  28016. lastXP += barMinHeightMap[seriesIndex];
  28017. barShape = _getBarItem(
  28018. seriesIndex,
  28019. i,
  28020. categoryAxis.getNameByIndex(i),
  28021. x,
  28022. y + 1 - (barWidthMap[seriesIndex] || barWidth),
  28023. barMinHeightMap[seriesIndex],
  28024. (barWidthMap[seriesIndex] || barWidth) - 2,
  28025. 'horizontal'
  28026. );
  28027. barShape.hoverable = false;
  28028. barShape.draggable = false;
  28029. barShape.style.brushType = 'stroke';
  28030. barShape.style.strokeColor =
  28031. serie.calculableHolderColor
  28032. || ecConfig.calculableHolderColor;
  28033. self.shapeList.push(barShape);
  28034. }
  28035. }
  28036. y -= ((barWidthMap[seriesIndex] || barWidth) + barGap);
  28037. }
  28038. }
  28039. }
  28040. /**
  28041. * 我真是自找麻烦啊,为啥要允许系列级个性化最小宽度和高度啊!!!
  28042. * @param {CategoryAxis} categoryAxis 类目坐标轴,需要知道类目间隔大小
  28043. * @param {Array} locationMap 整形数据的系列索引
  28044. */
  28045. function _mapSize(categoryAxis, locationMap, ignoreUserDefined) {
  28046. var barWidthMap = {};
  28047. var barMinHeightMap = {};
  28048. var sBarWidth;
  28049. var sBarWidthCounter = 0;
  28050. var sBarWidthTotal = 0;
  28051. var sBarMinHeight;
  28052. var hasFound;
  28053. for (var j = 0, k = locationMap.length; j < k; j++) {
  28054. hasFound = false; // 同一堆叠第一个barWidth生效
  28055. for (var m = 0, n = locationMap[j].length; m < n; m++) {
  28056. seriesIndex = locationMap[j][m];
  28057. if (!ignoreUserDefined) {
  28058. if (!hasFound) {
  28059. sBarWidth = self.deepQuery(
  28060. [series[seriesIndex]],
  28061. 'barWidth'
  28062. );
  28063. if (typeof sBarWidth != 'undefined') {
  28064. barWidthMap[seriesIndex] = sBarWidth;
  28065. sBarWidthTotal += sBarWidth;
  28066. sBarWidthCounter++;
  28067. hasFound = true;
  28068. }
  28069. } else {
  28070. barWidthMap[seriesIndex] = sBarWidth; // 用找到的一个
  28071. }
  28072. }
  28073. sBarMinHeight = self.deepQuery(
  28074. [series[seriesIndex]],
  28075. 'barMinHeight'
  28076. );
  28077. if (typeof sBarMinHeight != 'undefined') {
  28078. barMinHeightMap[seriesIndex] = sBarMinHeight;
  28079. }
  28080. }
  28081. }
  28082. var gap;
  28083. var barWidth;
  28084. var barGap;
  28085. if (locationMap.length != sBarWidthCounter) {
  28086. // 至少存在一个自适应宽度的柱形图
  28087. gap = Math.round(categoryAxis.getGap() * 4 / 5);
  28088. barWidth = Math.round(
  28089. ((gap - sBarWidthTotal) * 3)
  28090. / (4 * (locationMap.length) - 3 * sBarWidthCounter - 1)
  28091. );
  28092. barGap = Math.round(barWidth / 3);
  28093. if (barWidth < 0) {
  28094. // 无法满足用户定义的宽度设计,忽略用户宽度,打回重做
  28095. return _mapSize(categoryAxis, locationMap, true);
  28096. }
  28097. }
  28098. else {
  28099. // 全是自定义宽度
  28100. barWidth = 0;
  28101. barGap = Math.round((sBarWidthTotal / sBarWidthCounter) / 3);
  28102. gap = sBarWidthTotal + barGap * (sBarWidthCounter - 1);
  28103. if (Math.round(categoryAxis.getGap() * 4 / 5) < gap) {
  28104. // 无法满足用户定义的宽度设计,忽略用户宽度,打回重做
  28105. return _mapSize(categoryAxis, locationMap, true);
  28106. }
  28107. }
  28108. return {
  28109. barWidthMap : barWidthMap,
  28110. barMinHeightMap : barMinHeightMap ,
  28111. gap : gap,
  28112. barWidth : barWidth,
  28113. barGap : barGap
  28114. };
  28115. }
  28116. /**
  28117. * 生成最终图形数据
  28118. */
  28119. function _getBarItem(
  28120. seriesIndex, dataIndex, name, x, y, width, height, orient
  28121. ) {
  28122. var barShape;
  28123. var serie = series[seriesIndex];
  28124. var data = serie.data[dataIndex];
  28125. // 多级控制
  28126. var defaultColor = _sIndex2colorMap[seriesIndex];
  28127. var normalColor = self.deepQuery(
  28128. [data, serie],
  28129. 'itemStyle.normal.color'
  28130. ) || defaultColor;
  28131. var emphasisColor = self.deepQuery(
  28132. [data, serie],
  28133. 'itemStyle.emphasis.color'
  28134. );
  28135. barShape = {
  28136. shape : 'rectangle',
  28137. zlevel : _zlevelBase,
  28138. clickable: true,
  28139. style : {
  28140. x : x,
  28141. y : y,
  28142. width : width,
  28143. height : height,
  28144. brushType : 'both',
  28145. color : normalColor,
  28146. strokeColor : '#fff'
  28147. },
  28148. highlightStyle : {
  28149. color : emphasisColor
  28150. || (typeof normalColor == 'string'
  28151. ? zrColor.lift(normalColor, -0.2)
  28152. : normalColor
  28153. ),
  28154. strokeColor : 'rgba(0,0,0,0)'
  28155. },
  28156. _orient : orient
  28157. };
  28158. barShape.highlightStyle.textColor = barShape.highlightStyle.color;
  28159. barShape = self.addLabel(barShape, serie, data, name, orient);
  28160. if (self.deepQuery(
  28161. [data, serie, option],
  28162. 'calculable'
  28163. )
  28164. ) {
  28165. self.setCalculable(barShape);
  28166. barShape.draggable = true;
  28167. }
  28168. ecData.pack(
  28169. barShape,
  28170. series[seriesIndex], seriesIndex,
  28171. series[seriesIndex].data[dataIndex], dataIndex,
  28172. name
  28173. );
  28174. return barShape;
  28175. }
  28176. /**
  28177. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  28178. * @param {Object} newSeries
  28179. * @param {Object} newComponent
  28180. */
  28181. function init(newOption, newComponent) {
  28182. component = newComponent;
  28183. refresh(newOption);
  28184. }
  28185. /**
  28186. * 刷新
  28187. */
  28188. function refresh(newOption) {
  28189. if (newOption) {
  28190. option = newOption;
  28191. series = option.series;
  28192. }
  28193. self.clear();
  28194. _buildShape();
  28195. }
  28196. /**
  28197. * 动态数据增加动画
  28198. */
  28199. function addDataAnimation(params) {
  28200. var aniMap = {}; // seriesIndex索引参数
  28201. for (var i = 0, l = params.length; i < l; i++) {
  28202. aniMap[params[i][0]] = params[i];
  28203. }
  28204. var x;
  28205. var dx;
  28206. var y;
  28207. var dy;
  28208. var serie;
  28209. var seriesIndex;
  28210. var dataIndex;
  28211. for (var i = self.shapeList.length - 1; i >= 0; i--) {
  28212. seriesIndex = ecData.get(self.shapeList[i], 'seriesIndex');
  28213. if (aniMap[seriesIndex] && !aniMap[seriesIndex][3]) {
  28214. // 有数据删除才有移动的动画
  28215. if (self.shapeList[i].shape == 'rectangle') {
  28216. // 主动画
  28217. dataIndex = ecData.get(self.shapeList[i], 'dataIndex');
  28218. serie = series[seriesIndex];
  28219. if (aniMap[seriesIndex][2]
  28220. && dataIndex == serie.data.length - 1
  28221. ) {
  28222. // 队头加入删除末尾
  28223. zr.delShape(self.shapeList[i].id);
  28224. continue;
  28225. }
  28226. else if (!aniMap[seriesIndex][2] && dataIndex === 0) {
  28227. // 队尾加入删除头部
  28228. zr.delShape(self.shapeList[i].id);
  28229. continue;
  28230. }
  28231. if (self.shapeList[i]._orient == 'horizontal') {
  28232. // 条形图
  28233. dy = component.yAxis.getAxis(
  28234. serie.yAxisIndex || 0
  28235. ).getGap();
  28236. y = aniMap[seriesIndex][2] ? -dy : dy;
  28237. x = 0;
  28238. }
  28239. else {
  28240. // 柱形图
  28241. dx = component.xAxis.getAxis(
  28242. serie.xAxisIndex || 0
  28243. ).getGap();
  28244. x = aniMap[seriesIndex][2] ? dx : -dx;
  28245. y = 0;
  28246. }
  28247. zr.animate(self.shapeList[i].id, '')
  28248. .when(
  28249. 500,
  28250. {position : [x, y]}
  28251. )
  28252. .start();
  28253. }
  28254. }
  28255. }
  28256. }
  28257. /**
  28258. * 动画设定
  28259. */
  28260. function animation() {
  28261. var duration;
  28262. var easing;
  28263. var width;
  28264. var height;
  28265. var x;
  28266. var y;
  28267. var serie;
  28268. var dataIndex;
  28269. var value;
  28270. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  28271. if (self.shapeList[i].shape == 'rectangle') {
  28272. serie = ecData.get(self.shapeList[i], 'series');
  28273. dataIndex = ecData.get(self.shapeList[i], 'dataIndex');
  28274. value = ecData.get(self.shapeList[i], 'value');
  28275. duration = self.deepQuery(
  28276. [serie, option], 'animationDuration'
  28277. );
  28278. easing = self.deepQuery(
  28279. [serie, option], 'animationEasing'
  28280. );
  28281. if (self.shapeList[i]._orient == 'horizontal') {
  28282. // 条形图
  28283. width = self.shapeList[i].style.width;
  28284. x = self.shapeList[i].style.x;
  28285. if (value < 0) {
  28286. zr.modShape(
  28287. self.shapeList[i].id,
  28288. {
  28289. style: {
  28290. x : x + width,
  28291. width: 0
  28292. }
  28293. }
  28294. );
  28295. zr.animate(self.shapeList[i].id, 'style')
  28296. .when(
  28297. duration + dataIndex * 100,
  28298. {
  28299. x : x,
  28300. width : width
  28301. }
  28302. )
  28303. .start(easing);
  28304. }
  28305. else {
  28306. zr.modShape(
  28307. self.shapeList[i].id,
  28308. {
  28309. style: {
  28310. width: 0
  28311. }
  28312. }
  28313. );
  28314. zr.animate(self.shapeList[i].id, 'style')
  28315. .when(
  28316. duration + dataIndex * 100,
  28317. {
  28318. width : width
  28319. }
  28320. )
  28321. .start(easing);
  28322. }
  28323. }
  28324. else {
  28325. // 柱形图
  28326. height = self.shapeList[i].style.height;
  28327. y = self.shapeList[i].style.y;
  28328. if (value < 0) {
  28329. zr.modShape(
  28330. self.shapeList[i].id,
  28331. {
  28332. style: {
  28333. height: 0
  28334. }
  28335. }
  28336. );
  28337. zr.animate(self.shapeList[i].id, 'style')
  28338. .when(
  28339. duration + dataIndex * 100,
  28340. {
  28341. height : height
  28342. }
  28343. )
  28344. .start(easing);
  28345. }
  28346. else {
  28347. zr.modShape(
  28348. self.shapeList[i].id,
  28349. {
  28350. style: {
  28351. y: y + height,
  28352. height: 0
  28353. }
  28354. }
  28355. );
  28356. zr.animate(self.shapeList[i].id, 'style')
  28357. .when(
  28358. duration + dataIndex * 100,
  28359. {
  28360. y : y,
  28361. height : height
  28362. }
  28363. )
  28364. .start(easing);
  28365. }
  28366. }
  28367. }
  28368. }
  28369. }
  28370. self.init = init;
  28371. self.refresh = refresh;
  28372. self.addDataAnimation = addDataAnimation;
  28373. self.animation = animation;
  28374. init(option, component);
  28375. }
  28376. // 图表注册
  28377. require('../chart').define('bar', Bar);
  28378. return Bar;
  28379. });
  28380. /**
  28381. * echarts图表类:饼图
  28382. *
  28383. * @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
  28384. * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
  28385. *
  28386. */
  28387. define('echarts/chart/pie',['require','../component/base','./calculableBase','../config','../util/ecData','zrender/tool/math','zrender/tool/util','zrender/tool/color','../chart'],function(require) {
  28388. /**
  28389. * 构造函数
  28390. * @param {Object} messageCenter echart消息中心
  28391. * @param {ZRender} zr zrender实例
  28392. * @param {Object} series 数据
  28393. * @param {Object} component 组件
  28394. */
  28395. function Pie(messageCenter, zr, option, component){
  28396. // 基类装饰
  28397. var ComponentBase = require('../component/base');
  28398. ComponentBase.call(this, zr);
  28399. // 可计算特性装饰
  28400. var CalculableBase = require('./calculableBase');
  28401. CalculableBase.call(this, zr, option);
  28402. var ecConfig = require('../config');
  28403. var ecData = require('../util/ecData');
  28404. var zrMath = require('zrender/tool/math');
  28405. var zrUtil = require('zrender/tool/util');
  28406. var zrColor = require('zrender/tool/color');
  28407. var self = this;
  28408. self.type = ecConfig.CHART_TYPE_PIE;
  28409. var series; // 共享数据源,不要修改跟自己无关的项
  28410. var _zlevelBase = self.getZlevelBase();
  28411. var _selectedMode;
  28412. var _selected = {};
  28413. function _buildShape() {
  28414. self.selectedMap = {};
  28415. _selected = {};
  28416. var pieCase; // 饼图箱子
  28417. _selectedMode = false;
  28418. for (var i = 0, l = series.length; i < l; i++) {
  28419. if (series[i].type == ecConfig.CHART_TYPE_PIE) {
  28420. series[i] = self.reformOption(series[i]);
  28421. _selectedMode = _selectedMode || series[i].selectedMode;
  28422. _selected[i] = [];
  28423. if (self.deepQuery([series[i], option], 'calculable')) {
  28424. pieCase = {
  28425. shape : series[i].radius[0] <= 10
  28426. ? 'circle' : 'ring',
  28427. zlevel : _zlevelBase,
  28428. hoverable : false,
  28429. style : {
  28430. x : series[i].center[0], // 圆心横坐标
  28431. y : series[i].center[1], // 圆心纵坐标
  28432. r0 : series[i].radius[0] <= 10 // 圆环内半径
  28433. ? 0 : series[i].radius[0] - 10,
  28434. r : series[i].radius[1] + 10, // 圆环外半径
  28435. brushType : 'stroke',
  28436. strokeColor : series[i].calculableHolderColor
  28437. || ecConfig.calculableHolderColor
  28438. }
  28439. };
  28440. ecData.pack(pieCase, series[i], i, undefined, -1);
  28441. self.setCalculable(pieCase);
  28442. self.shapeList.push(pieCase);
  28443. }
  28444. _buildSinglePie(i);
  28445. }
  28446. }
  28447. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  28448. self.shapeList[i].id = zr.newShapeId(self.type);
  28449. zr.addShape(self.shapeList[i]);
  28450. }
  28451. }
  28452. /**
  28453. * 构建单个饼图
  28454. *
  28455. * @param {number} seriesIndex 系列索引
  28456. */
  28457. function _buildSinglePie(seriesIndex) {
  28458. var serie = series[seriesIndex];
  28459. var data = serie.data;
  28460. var legend = component.legend;
  28461. var itemName;
  28462. var totalSelected = 0; // 迭代累计
  28463. var totalValue = 0; // 迭代累计
  28464. var maxValue = Number.NEGATIVE_INFINITY;
  28465. // 计算需要显示的个数和总值
  28466. for (var i = 0, l = data.length; i < l; i++) {
  28467. itemName = data[i].name;
  28468. if (legend){
  28469. self.selectedMap[itemName] = legend.isSelected(itemName);
  28470. } else {
  28471. self.selectedMap[itemName] = true;
  28472. }
  28473. if (self.selectedMap[itemName]) {
  28474. totalSelected++;
  28475. totalValue += +data[i].value;
  28476. maxValue = Math.max(maxValue, +data[i].value);
  28477. }
  28478. }
  28479. var percent;
  28480. var startAngle = serie.startAngle.toFixed(2) - 0;
  28481. var endAngle;
  28482. var minAngle = serie.minAngle;
  28483. var totalAngle = 360 - (minAngle * totalSelected);
  28484. var defaultColor;
  28485. var roseType = serie.roseType;
  28486. var r0; // 扇形内半径
  28487. var r1; // 扇形外半径
  28488. for (var i = 0, l = data.length; i < l; i++){
  28489. itemName = data[i].name;
  28490. if (!self.selectedMap[itemName]) {
  28491. continue;
  28492. }
  28493. // 默认颜色策略
  28494. if (legend) {
  28495. // 有图例则从图例中获取颜色定义
  28496. defaultColor = legend.getColor(itemName);
  28497. }
  28498. else {
  28499. // 全局颜色定义
  28500. defaultColor = zr.getColor(i);
  28501. }
  28502. percent = data[i].value / totalValue;
  28503. if (roseType != 'area') {
  28504. endAngle = (percent * totalAngle + startAngle + minAngle)
  28505. .toFixed(2) - 0;
  28506. }
  28507. else {
  28508. endAngle = (totalAngle / l + startAngle + minAngle)
  28509. .toFixed(2) - 0;
  28510. }
  28511. percent = (percent * 100).toFixed(2);
  28512. r0 = +serie.radius[0];
  28513. r1 = +serie.radius[1];
  28514. if (roseType == 'radius') {
  28515. r1 = data[i].value / maxValue * (r1 - r0) * 0.8
  28516. + (r1 - r0) * 0.2
  28517. + r0;
  28518. }
  28519. else if (roseType == 'area') {
  28520. r1 = Math.sqrt(data[i].value / maxValue) * (r1 - r0) + r0;
  28521. }
  28522. _buildItem(
  28523. seriesIndex, i, percent, data[i].selected,
  28524. r0, r1,
  28525. startAngle, endAngle, defaultColor
  28526. );
  28527. startAngle = endAngle;
  28528. }
  28529. }
  28530. /**
  28531. * 构建单个扇形及指标
  28532. */
  28533. function _buildItem(
  28534. seriesIndex, dataIndex, percent, isSelected,
  28535. r0, r1,
  28536. startAngle, endAngle, defaultColor
  28537. ) {
  28538. // 扇形
  28539. var sector = _getSector(
  28540. seriesIndex, dataIndex, percent, isSelected,
  28541. r0, r1,
  28542. startAngle, endAngle, defaultColor
  28543. );
  28544. // 图形需要附加的私有数据
  28545. ecData.pack(
  28546. sector,
  28547. series[seriesIndex], seriesIndex,
  28548. series[seriesIndex].data[dataIndex], dataIndex,
  28549. series[seriesIndex].data[dataIndex].name,
  28550. percent
  28551. );
  28552. self.shapeList.push(sector);
  28553. // 文本标签,需要显示则会有返回
  28554. var label = _getLabel(
  28555. seriesIndex, dataIndex, percent,
  28556. startAngle, endAngle, defaultColor,
  28557. false
  28558. );
  28559. if (label) {
  28560. label._dataIndex = dataIndex;
  28561. self.shapeList.push(label);
  28562. }
  28563. // 文本标签视觉引导线,需要显示则会有返回
  28564. var labelLine = _getLabelLine(
  28565. seriesIndex, dataIndex,
  28566. r0, r1,
  28567. startAngle, endAngle, defaultColor,
  28568. false
  28569. );
  28570. if (labelLine) {
  28571. labelLine._dataIndex = dataIndex;
  28572. self.shapeList.push(labelLine);
  28573. }
  28574. }
  28575. /**
  28576. * 构建扇形
  28577. */
  28578. function _getSector(
  28579. seriesIndex, dataIndex, percent, isSelected,
  28580. r0, r1,
  28581. startAngle, endAngle, defaultColor
  28582. ) {
  28583. var serie = series[seriesIndex];
  28584. var data = serie.data[dataIndex];
  28585. // 多级控制
  28586. var normalColor = self.deepQuery(
  28587. [data, serie],
  28588. 'itemStyle.normal.color'
  28589. ) || defaultColor;
  28590. var emphasisColor = self.deepQuery(
  28591. [data, serie],
  28592. 'itemStyle.emphasis.color'
  28593. );
  28594. var sector = {
  28595. shape : 'sector', // 扇形
  28596. zlevel : _zlevelBase,
  28597. clickable : true,
  28598. style : {
  28599. x : serie.center[0], // 圆心横坐标
  28600. y : serie.center[1], // 圆心纵坐标
  28601. r0 : r0, // 圆环内半径
  28602. r : r1, // 圆环外半径
  28603. startAngle : startAngle,
  28604. endAngle : endAngle,
  28605. brushType : 'both',
  28606. color : normalColor,
  28607. strokeColor : '#fff',
  28608. lineWidth: 1
  28609. },
  28610. highlightStyle : {
  28611. //color : emphasisColor || normalColor
  28612. color : emphasisColor
  28613. || (typeof normalColor == 'string'
  28614. ? zrColor.lift(normalColor, -0.2)
  28615. : normalColor
  28616. ),
  28617. strokeColor : 'rgba(0,0,0,0)'
  28618. },
  28619. _seriesIndex : seriesIndex,
  28620. _dataIndex : dataIndex
  28621. };
  28622. if (isSelected) {
  28623. var midAngle =
  28624. ((sector.style.startAngle + sector.style.endAngle) / 2)
  28625. .toFixed(2) - 0;
  28626. sector.style._hasSelected = true;
  28627. sector.style._x = sector.style.x;
  28628. sector.style._y = sector.style.y;
  28629. var offset = self.deepQuery([serie], 'selectedOffset');
  28630. sector.style.x += zrMath.cos(midAngle, true) * offset;
  28631. sector.style.y -= zrMath.sin(midAngle, true) * offset;
  28632. _selected[seriesIndex][dataIndex] = true;
  28633. }
  28634. else {
  28635. _selected[seriesIndex][dataIndex] = false;
  28636. }
  28637. if (_selectedMode) {
  28638. sector.onclick = self.shapeHandler.onclick;
  28639. }
  28640. if (self.deepQuery([data, serie, option], 'calculable')) {
  28641. self.setCalculable(sector);
  28642. sector.draggable = true;
  28643. }
  28644. if (_needLabel(serie, data, false)
  28645. && self.deepQuery(
  28646. [data, serie],
  28647. 'itemStyle.normal.label.position'
  28648. ) == 'inner'
  28649. ) {
  28650. sector.style.text = _getLabelText(
  28651. seriesIndex, dataIndex, percent, 'normal'
  28652. );
  28653. sector.style.textPosition = 'specific';
  28654. sector.style.textColor = self.deepQuery(
  28655. [data, serie],
  28656. 'itemStyle.normal.label.textStyle.color'
  28657. ) || '#fff';
  28658. sector.style.textAlign = self.deepQuery(
  28659. [data, serie],
  28660. 'itemStyle.normal.label.textStyle.align'
  28661. ) || 'center';
  28662. sector.style.textBaseLine = self.deepQuery(
  28663. [data, serie],
  28664. 'itemStyle.normal.label.textStyle.baseline'
  28665. ) || 'middle';
  28666. sector.style.textX = Math.round(
  28667. serie.center[0]
  28668. + (r1 + r0) / 2
  28669. * zrMath.cos((startAngle + endAngle) / 2, true)
  28670. );
  28671. sector.style.textY = Math.round(
  28672. serie.center[1]
  28673. - (r1 + r0) / 2
  28674. * zrMath.sin((startAngle + endAngle) / 2, true)
  28675. );
  28676. sector.style.textFont = self.getFont(self.deepQuery(
  28677. [data, serie],
  28678. 'itemStyle.normal.label.textStyle'
  28679. ));
  28680. }
  28681. if (_needLabel(serie, data, true)
  28682. && self.deepQuery(
  28683. [data, serie],
  28684. 'itemStyle.emphasis.label.position'
  28685. ) == 'inner'
  28686. ) {
  28687. sector.highlightStyle.text = _getLabelText(
  28688. seriesIndex, dataIndex, percent, 'emphasis'
  28689. );
  28690. sector.highlightStyle.textPosition = 'specific';
  28691. sector.highlightStyle.textColor = self.deepQuery(
  28692. [data, serie],
  28693. 'itemStyle.emphasis.label.textStyle.color'
  28694. ) || '#fff';
  28695. sector.highlightStyle.textAlign = self.deepQuery(
  28696. [data, serie],
  28697. 'itemStyle.emphasis.label.textStyle.align'
  28698. ) || 'center';
  28699. sector.highlightStyle.textBaseLine = self.deepQuery(
  28700. [data, serie],
  28701. 'itemStyle.normal.label.textStyle.baseline'
  28702. ) || 'middle';
  28703. sector.highlightStyle.textX = Math.round(
  28704. serie.center[0]
  28705. + (r1 + r0) / 2
  28706. * zrMath.cos((startAngle + endAngle) / 2, true)
  28707. );
  28708. sector.highlightStyle.textY = Math.round(
  28709. serie.center[1]
  28710. - (r1 + r0) / 2
  28711. * zrMath.sin((startAngle + endAngle) / 2, true)
  28712. );
  28713. sector.highlightStyle.textFont = self.getFont(self.deepQuery(
  28714. [data, serie],
  28715. 'itemStyle.emphasis.label.textStyle'
  28716. ));
  28717. }
  28718. // “normal下不显示,emphasis显示”添加事件响应
  28719. if (_needLabel(serie, data, true) // emphasis下显示文本
  28720. || _needLabelLine(serie, data, true) // emphasis下显示引导线
  28721. ) {
  28722. sector.onmouseover = self.shapeHandler.onmouserover;
  28723. }
  28724. return sector;
  28725. }
  28726. /**
  28727. * 需要显示则会有返回构建好的shape,否则返回undefined
  28728. */
  28729. function _getLabel(
  28730. seriesIndex, dataIndex, percent,
  28731. startAngle, endAngle, defaultColor,
  28732. isEmphasis
  28733. ) {
  28734. var serie = series[seriesIndex];
  28735. var data = serie.data[dataIndex];
  28736. // 特定状态下是否需要显示文本标签
  28737. if (_needLabel(serie, data, isEmphasis)) {
  28738. var status = isEmphasis ? 'emphasis' : 'normal';
  28739. // serie里有默认配置,放心大胆的用!
  28740. var itemStyle = zrUtil.merge(
  28741. zrUtil.clone(data.itemStyle) || {},
  28742. serie.itemStyle,
  28743. {
  28744. 'overwrite' : false,
  28745. 'recursive' : true
  28746. }
  28747. );
  28748. // label配置
  28749. var labelControl = itemStyle[status].label;
  28750. var textStyle = labelControl.textStyle || {};
  28751. var centerX = serie.center[0]; // 圆心横坐标
  28752. var centerY = serie.center[1]; // 圆心纵坐标
  28753. var midAngle = ((endAngle + startAngle) / 2) % 360; // 角度中值
  28754. var radius; // 标签位置半径
  28755. var textAlign;
  28756. if (labelControl.position == 'outer') {
  28757. // 外部显示,默认
  28758. radius = serie.radius[1]
  28759. - (-itemStyle[status].labelLine.length)
  28760. - (-textStyle.fontSize);
  28761. textAlign = (midAngle >= 150 && midAngle <= 210)
  28762. ? 'right'
  28763. : ((midAngle <= 30 || midAngle >= 330)
  28764. ? 'left'
  28765. : 'center'
  28766. );
  28767. return {
  28768. shape : 'text',
  28769. zlevel : _zlevelBase + 1,
  28770. hoverable : false,
  28771. style : {
  28772. x : centerX + radius * zrMath.cos(midAngle, true),
  28773. y : centerY - radius * zrMath.sin(midAngle, true),
  28774. color : textStyle.color || defaultColor,
  28775. text : _getLabelText(
  28776. seriesIndex, dataIndex, percent, status
  28777. ),
  28778. textAlign : textStyle.align
  28779. || textAlign,
  28780. textBaseline : textStyle.baseline || 'middle',
  28781. textFont : self.getFont(textStyle)
  28782. },
  28783. highlightStyle : {
  28784. brushType : 'fill'
  28785. },
  28786. _seriesIndex : seriesIndex,
  28787. _dataIndex : dataIndex
  28788. };
  28789. }
  28790. else if (labelControl.position == 'center') {
  28791. return {
  28792. shape : 'text',
  28793. zlevel : _zlevelBase + 1,
  28794. hoverable : false,
  28795. style : {
  28796. x : centerX,
  28797. y : centerY,
  28798. color : textStyle.color || defaultColor,
  28799. text : _getLabelText(
  28800. seriesIndex, dataIndex, percent, status
  28801. ),
  28802. textAlign : textStyle.align
  28803. || 'center',
  28804. textBaseline : textStyle.baseline || 'middle',
  28805. textFont : self.getFont(textStyle)
  28806. },
  28807. highlightStyle : {
  28808. brushType : 'fill'
  28809. },
  28810. _seriesIndex : seriesIndex,
  28811. _dataIndex : dataIndex
  28812. };
  28813. }
  28814. else {
  28815. // 内部显示由sector自带,不返回即可
  28816. return;
  28817. /*
  28818. radius = (serie.radius[0] + serie.radius[1]) / 2;
  28819. textAlign = 'center';
  28820. defaultColor = '#fff';
  28821. */
  28822. }
  28823. }
  28824. else {
  28825. return;
  28826. }
  28827. }
  28828. /**
  28829. * 根据lable.format计算label text
  28830. */
  28831. function _getLabelText(seriesIndex, dataIndex, percent, status) {
  28832. var serie = series[seriesIndex];
  28833. var data = serie.data[dataIndex];
  28834. var formatter = self.deepQuery(
  28835. [data, serie],
  28836. 'itemStyle.' + status + '.label.formatter'
  28837. );
  28838. if (formatter) {
  28839. if (typeof formatter == 'function') {
  28840. return formatter(
  28841. serie.name,
  28842. data.name,
  28843. data.value,
  28844. percent
  28845. );
  28846. }
  28847. else if (typeof formatter == 'string') {
  28848. formatter = formatter.replace('{a}','{a0}')
  28849. .replace('{b}','{b0}')
  28850. .replace('{c}','{c0}')
  28851. .replace('{d}','{d0}');
  28852. formatter = formatter.replace('{a0}', serie.name)
  28853. .replace('{b0}', data.name)
  28854. .replace('{c0}', data.value)
  28855. .replace('{d0}', percent);
  28856. return formatter;
  28857. }
  28858. }
  28859. else {
  28860. return data.name;
  28861. }
  28862. }
  28863. /**
  28864. * 需要显示则会有返回构建好的shape,否则返回undefined
  28865. */
  28866. function _getLabelLine(
  28867. seriesIndex, dataIndex,
  28868. r0, r1,
  28869. startAngle, endAngle, defaultColor,
  28870. isEmphasis
  28871. ) {
  28872. var serie = series[seriesIndex];
  28873. var data = serie.data[dataIndex];
  28874. // 特定状态下是否需要显示文本标签
  28875. if (_needLabelLine(serie, data, isEmphasis)) {
  28876. var status = isEmphasis ? 'emphasis' : 'normal';
  28877. // serie里有默认配置,放心大胆的用!
  28878. var itemStyle = zrUtil.merge(
  28879. zrUtil.clone(data.itemStyle) || {},
  28880. serie.itemStyle,
  28881. {
  28882. 'overwrite' : false,
  28883. 'recursive' : true
  28884. }
  28885. );
  28886. // labelLine配置
  28887. var labelLineControl = itemStyle[status].labelLine;
  28888. var lineStyle = labelLineControl.lineStyle || {};
  28889. var centerX = serie.center[0]; // 圆心横坐标
  28890. var centerY = serie.center[1]; // 圆心纵坐标
  28891. // 视觉引导线起点半径
  28892. var midRadius = r1;
  28893. // 视觉引导线终点半径
  28894. var maxRadius = serie.radius[1] - (-labelLineControl.length);
  28895. var midAngle = ((endAngle + startAngle) / 2) % 360; // 角度中值
  28896. var cosValue = zrMath.cos(midAngle, true);
  28897. var sinValue = zrMath.sin(midAngle, true);
  28898. // 三角函数缓存已在zrender/tool/math中做了
  28899. return {
  28900. shape : 'line',
  28901. zlevel : _zlevelBase + 1,
  28902. hoverable : false,
  28903. style : {
  28904. xStart : centerX + midRadius * cosValue,
  28905. yStart : centerY - midRadius * sinValue,
  28906. xEnd : centerX + maxRadius * cosValue,
  28907. yEnd : centerY - maxRadius * sinValue,
  28908. strokeColor : lineStyle.color || defaultColor,
  28909. lineType : lineStyle.type,
  28910. lineWidth : lineStyle.width
  28911. },
  28912. _seriesIndex : seriesIndex,
  28913. _dataIndex : dataIndex
  28914. };
  28915. }
  28916. else {
  28917. return;
  28918. }
  28919. }
  28920. /**
  28921. * 返回特定状态(normal or emphasis)下是否需要显示label标签文本
  28922. * @param {Object} serie
  28923. * @param {Object} data
  28924. * @param {boolean} isEmphasis true is 'emphasis' and false is 'normal'
  28925. */
  28926. function _needLabel(serie, data, isEmphasis) {
  28927. return self.deepQuery(
  28928. [data, serie],
  28929. 'itemStyle.'
  28930. + (isEmphasis ? 'emphasis' : 'normal')
  28931. + '.label.show'
  28932. );
  28933. }
  28934. /**
  28935. * 返回特定状态(normal or emphasis)下是否需要显示labelLine标签视觉引导线
  28936. * @param {Object} serie
  28937. * @param {Object} data
  28938. * @param {boolean} isEmphasis true is 'emphasis' and false is 'normal'
  28939. */
  28940. function _needLabelLine(serie, data, isEmphasis) {
  28941. return self.deepQuery(
  28942. [data, serie],
  28943. 'itemStyle.'
  28944. + (isEmphasis ? 'emphasis' : 'normal')
  28945. +'.labelLine.show'
  28946. );
  28947. }
  28948. /**
  28949. * 参数修正&默认值赋值,重载基类方法
  28950. * @param {Object} opt 参数
  28951. */
  28952. function reformOption(opt) {
  28953. // 常用方法快捷方式
  28954. var _merge = zrUtil.merge;
  28955. opt = _merge(
  28956. opt || {},
  28957. ecConfig.pie,
  28958. {
  28959. 'overwrite' : false,
  28960. 'recursive' : true
  28961. }
  28962. );
  28963. opt.center = self.parseCenter(opt.center);
  28964. // 传数组实现环形图,[内半径,外半径],传单个则默认为外半径为
  28965. if (typeof opt.radius == 'undefined') {
  28966. opt.radius = [
  28967. 0,
  28968. Math.round(Math.min(zr.getWidth(), zr.getHeight()) / 2 - 50)
  28969. ];
  28970. } else if (!(opt.radius instanceof Array)) {
  28971. opt.radius = [0, opt.radius];
  28972. }
  28973. // 通用字体设置
  28974. opt.itemStyle.normal.label.textStyle = _merge(
  28975. opt.itemStyle.normal.label.textStyle || {},
  28976. ecConfig.textStyle,
  28977. {
  28978. 'overwrite' : false,
  28979. 'recursive' : true
  28980. }
  28981. );
  28982. opt.itemStyle.emphasis.label.textStyle = _merge(
  28983. opt.itemStyle.emphasis.label.textStyle || {},
  28984. ecConfig.textStyle,
  28985. {
  28986. 'overwrite' : false,
  28987. 'recursive' : true
  28988. }
  28989. );
  28990. return opt;
  28991. }
  28992. /**
  28993. * 构造函数默认执行的初始化方法,也用于创建实例后动态修改
  28994. * @param {Object} newSeries
  28995. * @param {Object} newComponent
  28996. */
  28997. function init(newOption, newComponent) {
  28998. component = newComponent;
  28999. refresh(newOption);
  29000. }
  29001. /**
  29002. * 刷新
  29003. */
  29004. function refresh(newOption) {
  29005. if (newOption) {
  29006. option = newOption;
  29007. series = option.series;
  29008. self.backupAdaptiveParams(series, ['center', 'radius']);
  29009. }
  29010. self.clear();
  29011. _buildShape();
  29012. }
  29013. function resize() {
  29014. // 复位录原始定义
  29015. self.restoreAdaptiveParams(series, ['center', 'radius']);
  29016. refresh();
  29017. }
  29018. /**
  29019. * 动态数据增加动画
  29020. * 心跳效果
  29021. function addDataAnimation(params) {
  29022. var aniMap = {}; // seriesIndex索引参数
  29023. for (var i = 0, l = params.length; i < l; i++) {
  29024. aniMap[params[i][0]] = params[i];
  29025. }
  29026. var x;
  29027. var y;
  29028. var r;
  29029. var seriesIndex;
  29030. for (var i = self.shapeList.length - 1; i >= 0; i--) {
  29031. seriesIndex = ecData.get(self.shapeList[i], 'seriesIndex');
  29032. if (aniMap[seriesIndex]) {
  29033. if (self.shapeList[i].shape == 'sector'
  29034. || self.shapeList[i].shape == 'circle'
  29035. || self.shapeList[i].shape == 'ring'
  29036. ) {
  29037. r = self.shapeList[i].style.r;
  29038. zr.animate(self.shapeList[i].id, 'style')
  29039. .when(
  29040. 300,
  29041. {r : r * 0.9}
  29042. )
  29043. .when(
  29044. 500,
  29045. {r : r}
  29046. )
  29047. .start();
  29048. }
  29049. }
  29050. }
  29051. }
  29052. */
  29053. /**
  29054. * 动态数据增加动画
  29055. */
  29056. function addDataAnimation(params) {
  29057. var aniMap = {}; // seriesIndex索引参数
  29058. for (var i = 0, l = params.length; i < l; i++) {
  29059. aniMap[params[i][0]] = params[i];
  29060. }
  29061. // 构建新的饼图匹配差异做动画
  29062. var sectorMap = {};
  29063. var textMap = {};
  29064. var lineMap = {};
  29065. var backupShapeList = zrUtil.clone(self.shapeList);
  29066. self.shapeList = [];
  29067. var seriesIndex;
  29068. var isHead;
  29069. var dataGrow;
  29070. var deltaIdxMap = {}; // 修正新增数据后会对dataIndex产生错位匹配
  29071. for (var i = 0, l = params.length; i < l; i++) {
  29072. seriesIndex = params[i][0];
  29073. isHead = params[i][2];
  29074. dataGrow = params[i][3];
  29075. if (series[seriesIndex]
  29076. && series[seriesIndex].type == ecConfig.CHART_TYPE_PIE
  29077. ) {
  29078. if (isHead) {
  29079. if (!dataGrow) {
  29080. sectorMap[
  29081. seriesIndex
  29082. + '_'
  29083. + series[seriesIndex].data.length
  29084. ] = 'delete';
  29085. }
  29086. deltaIdxMap[seriesIndex] = 1;
  29087. }
  29088. else {
  29089. if (!dataGrow) {
  29090. sectorMap[seriesIndex + '_-1'] = 'delete';
  29091. deltaIdxMap[seriesIndex] = -1;
  29092. }
  29093. else {
  29094. deltaIdxMap[seriesIndex] = 0;
  29095. }
  29096. }
  29097. _buildSinglePie(seriesIndex);
  29098. }
  29099. }
  29100. var dataIndex;
  29101. var key;
  29102. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  29103. seriesIndex = self.shapeList[i]._seriesIndex;
  29104. dataIndex = self.shapeList[i]._dataIndex;
  29105. key = seriesIndex + '_' + dataIndex;
  29106. // map映射让n*n变n
  29107. switch (self.shapeList[i].shape) {
  29108. case 'sector' :
  29109. sectorMap[key] = self.shapeList[i];
  29110. break;
  29111. case 'text' :
  29112. textMap[key] = self.shapeList[i];
  29113. break;
  29114. case 'line' :
  29115. lineMap[key] = self.shapeList[i];
  29116. break;
  29117. }
  29118. }
  29119. self.shapeList = [];
  29120. var targeSector;
  29121. for (var i = 0, l = backupShapeList.length; i < l; i++) {
  29122. seriesIndex = backupShapeList[i]._seriesIndex;
  29123. if (aniMap[seriesIndex]) {
  29124. dataIndex = backupShapeList[i]._dataIndex
  29125. + deltaIdxMap[seriesIndex];
  29126. key = seriesIndex + '_' + dataIndex;
  29127. targeSector = sectorMap[key];
  29128. if (!targeSector) {
  29129. continue;
  29130. }
  29131. if (backupShapeList[i].shape == 'sector') {
  29132. if (targeSector != 'delete') {
  29133. // 原有扇形
  29134. zr.animate(backupShapeList[i].id, 'style')
  29135. .when(
  29136. 400,
  29137. {
  29138. startAngle :
  29139. targeSector.style.startAngle,
  29140. endAngle :
  29141. targeSector.style.endAngle
  29142. }
  29143. )
  29144. .start();
  29145. }
  29146. else {
  29147. // 删除的扇形
  29148. zr.animate(backupShapeList[i].id, 'style')
  29149. .when(
  29150. 400,
  29151. deltaIdxMap[seriesIndex] < 0
  29152. ? {
  29153. endAngle :
  29154. backupShapeList[i].style.startAngle
  29155. }
  29156. : {
  29157. startAngle :
  29158. backupShapeList[i].style.endAngle
  29159. }
  29160. )
  29161. .start();
  29162. }
  29163. }
  29164. else if (backupShapeList[i].shape == 'text'
  29165. || backupShapeList[i].shape == 'line'
  29166. ) {
  29167. if (targeSector == 'delete') {
  29168. // 删除逻辑一样
  29169. zr.delShape(backupShapeList[i].id);
  29170. }
  29171. else {
  29172. // 懒得新建变量了,借用一下
  29173. switch (backupShapeList[i].shape) {
  29174. case 'text':
  29175. targeSector = textMap[key];
  29176. zr.animate(backupShapeList[i].id, 'style')
  29177. .when(
  29178. 400,
  29179. {
  29180. x :targeSector.style.x,
  29181. y :targeSector.style.y
  29182. }
  29183. )
  29184. .start();
  29185. break;
  29186. case 'line':
  29187. targeSector = lineMap[key];
  29188. zr.animate(backupShapeList[i].id, 'style')
  29189. .when(
  29190. 400,
  29191. {
  29192. xStart:targeSector.style.xStart,
  29193. yStart:targeSector.style.yStart,
  29194. xEnd : targeSector.style.xEnd,
  29195. yEnd : targeSector.style.yEnd
  29196. }
  29197. )
  29198. .start();
  29199. break;
  29200. }
  29201. }
  29202. }
  29203. }
  29204. }
  29205. self.shapeList = backupShapeList;
  29206. }
  29207. /**
  29208. * 动画设定
  29209. */
  29210. function animation() {
  29211. var duration = self.deepQuery([option], 'animationDuration');
  29212. var easing = self.deepQuery([option], 'animationEasing');
  29213. var x;
  29214. var y;
  29215. var r0;
  29216. var r;
  29217. var serie;
  29218. var dataIndex;
  29219. for (var i = 0, l = self.shapeList.length; i < l; i++) {
  29220. if (self.shapeList[i].shape == 'sector'
  29221. || self.shapeList[i].shape == 'circle'
  29222. || self.shapeList[i].shape == 'ring'
  29223. ) {
  29224. x = self.shapeList[i].style.x;
  29225. y = self.shapeList[i].style.y;
  29226. r0 = self.shapeList[i].style.r0;
  29227. r = self.shapeList[i].style.r;
  29228. zr.modShape(self.shapeList[i].id, {
  29229. rotation : [Math.PI*2, x, y],
  29230. style : {
  29231. r0 : 0,
  29232. r : 0
  29233. }
  29234. });
  29235. serie = ecData.get(self.shapeList[i], 'series');
  29236. dataIndex = ecData.get(self.shapeList[i], 'dataIndex');
  29237. zr.animate(self.shapeList[i].id, 'style')
  29238. .when(
  29239. (self.deepQuery([serie],'animationDuration')
  29240. || duration)
  29241. + dataIndex * 10,
  29242. {
  29243. r0 : r0,
  29244. r : r
  29245. }
  29246. )
  29247. .start('QuinticOut');
  29248. zr.animate(self.shapeList[i].id, '')
  29249. .when(
  29250. (self.deepQuery([serie],'animationDuration')
  29251. || duration)
  29252. + dataIndex * 100,
  29253. {rotation : [0, x, y]}
  29254. )
  29255. .start(
  29256. self.deepQuery([serie], 'animationEasing') || easing
  29257. );
  29258. }
  29259. else {
  29260. dataIndex = self.shapeList[i]._dataIndex;
  29261. zr.modShape(self.shapeList[i].id, {
  29262. scale : [0, 0, x, y]
  29263. });
  29264. zr.animate(self.shapeList[i].id, '')
  29265. .when(
  29266. duration + dataIndex * 100,
  29267. {scale : [1, 1, x, y]}
  29268. )
  29269. .start('QuinticOut');
  29270. }
  29271. }
  29272. }
  29273. function onclick(param) {
  29274. if (!self.isClick || !param.target) {
  29275. // 没有在当前实例上发生点击直接返回
  29276. return;
  29277. }
  29278. var offset; // 偏移
  29279. var target = param.target;
  29280. var style = target.style;
  29281. var seriesIndex = ecData.get(target, 'seriesIndex');
  29282. var dataIndex = ecData.get(target, 'dataIndex');
  29283. for (var i = 0, len = self.shapeList.length; i < len; i++) {
  29284. if (self.shapeList[i].id == target.id) {
  29285. seriesIndex = ecData.get(target, 'seriesIndex');
  29286. dataIndex = ecData.get(target, 'dataIndex');
  29287. // 当前点击的
  29288. if (!style._hasSelected) {
  29289. var midAngle =
  29290. ((style.startAngle + style.endAngle) / 2)
  29291. .toFixed(2) - 0;
  29292. target.style._hasSelected = true;
  29293. _selected[seriesIndex][dataIndex] = true;
  29294. target.style._x = target.style.x;
  29295. target.style._y = target.style.y;
  29296. offset = self.deepQuery(
  29297. [series[seriesIndex]],
  29298. 'selectedOffset'
  29299. );
  29300. target.style.x += zrMath.cos(midAngle, true)
  29301. * offset;
  29302. target.style.y -= zrMath.sin(midAngle, true)
  29303. * offset;
  29304. }
  29305. else {
  29306. // 复位
  29307. target.style.x = target.style._x;
  29308. target.style.y = target.style._y;
  29309. target.style._hasSelected = false;
  29310. _selected[seriesIndex][dataIndex] = false;
  29311. }
  29312. zr.modShape(target.id, target);
  29313. }
  29314. else if (self.shapeList[i].style._hasSelected
  29315. && _selectedMode == 'single'
  29316. ) {
  29317. seriesIndex = ecData.get(self.shapeList[i], 'seriesIndex');
  29318. dataIndex = ecData.get(self.shapeList[i], 'dataIndex');
  29319. // 单选模式下需要取消其他已经选中的
  29320. self.shapeList[i].style.x = self.shapeList[i].style._x;
  29321. self.shapeList[i].style.y = self.shapeList[i].style._y;
  29322. self.shapeList[i].style._hasSelected = false;
  29323. _selected[seriesIndex][dataIndex] = false;
  29324. zr.modShape(
  29325. self.shapeList[i].id, self.shapeList[i]
  29326. );
  29327. }
  29328. }
  29329. messageCenter.dispatch(
  29330. ecConfig.EVENT.PIE_SELECTED,
  29331. param.event,
  29332. {selected : _selected}
  29333. );
  29334. zr.refresh();
  29335. }
  29336. /**
  29337. * 数据项被拖拽进来, 重载基类方法
  29338. */
  29339. function ondrop(param, status) {
  29340. if (!self.isDrop || !param.target) {
  29341. // 没有在当前实例上发生拖拽行为则直接返回
  29342. return;
  29343. }
  29344. var target = param.target; // 拖拽安放目标
  29345. var dragged = param.dragged; // 当前被拖拽的图形对象
  29346. var seriesIndex = ecData.get(target, 'seriesIndex');
  29347. var dataIndex = ecData.get(target, 'dataIndex');
  29348. var data;
  29349. var legend = component.legend;
  29350. if (dataIndex == -1) {
  29351. // 落到pieCase上,数据被拖拽进某个饼图,增加数据
  29352. data = {
  29353. value : ecData.get(dragged, 'value'),
  29354. name : ecData.get(dragged, 'name')
  29355. };
  29356. // 修饼图数值不为负值
  29357. if (data.value < 0) {
  29358. data.value = 0;
  29359. }
  29360. series[seriesIndex].data.push(data);
  29361. legend.add(
  29362. data.name,
  29363. dragged.style.color || dragged.style.strokeColor
  29364. );
  29365. }
  29366. else {
  29367. // 落到sector上,数据被拖拽到某个数据项上,数据修改
  29368. data = series[seriesIndex].data[dataIndex];
  29369. legend.del(data.name);
  29370. data.name += option.nameConnector
  29371. + ecData.get(dragged, 'name');
  29372. data.value += ecData.get(dragged, 'value');
  29373. legend.add(
  29374. data.name,
  29375. dragged.style.color || dragged.style.strokeColor
  29376. );
  29377. }
  29378. // 别status = {}赋值啊!!
  29379. status.dragIn = status.dragIn || true;
  29380. // 处理完拖拽事件后复位
  29381. self.isDrop = false;
  29382. return;
  29383. }
  29384. /**
  29385. * 数据项被拖拽出去,重载基类方法
  29386. */
  29387. function ondragend(param, status) {
  29388. if (!self.isDragend || !param.target) {
  29389. // 没有在当前实例上发生拖拽行为则直接返回
  29390. return;
  29391. }
  29392. var target = param.target; // 被拖拽图形元素
  29393. var seriesIndex = ecData.get(target, 'seriesIndex');
  29394. var dataIndex = ecData.get(target, 'dataIndex');
  29395. // 被拖拽的图形是饼图sector,删除被拖拽走的数据
  29396. component.legend.del(
  29397. series[seriesIndex].data[dataIndex].name
  29398. );
  29399. series[seriesIndex].data.splice(dataIndex, 1);
  29400. // 别status = {}赋值啊!!
  29401. status.dragOut = true;
  29402. status.needRefresh = true;
  29403. // 处理完拖拽事件后复位
  29404. self.isDragend = false;
  29405. return;
  29406. }
  29407. /**
  29408. * 输出动态视觉引导线
  29409. */
  29410. self.shapeHandler.onmouserover = function(param) {
  29411. var shape = param.target;
  29412. var seriesIndex = ecData.get(shape, 'seriesIndex');
  29413. var dataIndex = ecData.get(shape, 'dataIndex');
  29414. var percent = ecData.get(shape, 'special');
  29415. var startAngle = shape.style.startAngle;
  29416. var endAngle = shape.style.endAngle;
  29417. var defaultColor = shape.highlightStyle.color;
  29418. // 文本标签,需要显示则会有返回
  29419. var label = _getLabel(
  29420. seriesIndex, dataIndex, percent,
  29421. startAngle, endAngle, defaultColor,
  29422. true
  29423. );
  29424. if (label) {
  29425. zr.addHoverShape(label);
  29426. }
  29427. // 文本标签视觉引导线,需要显示则会有返回
  29428. var labelLine = _getLabelLine(
  29429. seriesIndex, dataIndex,
  29430. shape.style.r0, shape.style.r,
  29431. startAngle, endAngle, defaultColor,
  29432. true
  29433. );
  29434. if (labelLine) {
  29435. zr.addHoverShape(labelLine);
  29436. }
  29437. };
  29438. self.reformOption = reformOption; // 重载基类方法
  29439. // 接口方法
  29440. self.init = init;
  29441. self.refresh = refresh;
  29442. self.resize = resize;
  29443. self.addDataAnimation = addDataAnimation;
  29444. self.animation = animation;
  29445. self.onclick = onclick;
  29446. self.ondrop = ondrop;
  29447. self.ondragend = ondragend;
  29448. init(option, component);
  29449. }
  29450. // 图表注册
  29451. require('../chart').define('pie', Pie);
  29452. return Pie;
  29453. });