u-charts.js 190 KB

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