u-charts.js 122 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512
  1. /*
  2. * uCharts v1.7.0.4
  3. * uni-app平台高性能跨全端图表
  4. * 支持H5、APP、小程序(微信/支付宝/百度/头条)
  5. * Designed by QIUN秋云
  6. *
  7. * uCharts官方网站
  8. * https://www.uCharts.cn
  9. *
  10. * 开源地址:
  11. * https://github.com/16cheng/uCharts(停更)
  12. * 开源地址即将变更为:
  13. * https://gitee.com/qiuyunkeji/uCharts(尚未上传)
  14. * 开源协议变更为Apache-2.0
  15. *
  16. * uni-app插件市场地址:
  17. * http://ext.dcloud.net.cn/plugin?id=271
  18. *
  19. * 主要更新记录
  20. * 2019-04-01
  21. * 改造为兼容uni-app的uCharts
  22. * 2019-04-14
  23. * 支持支付宝/百度/头条小程序实现跨全端
  24. * 2019-04-15
  25. * 支持横屏模式,新增rotate参数,默认flase
  26. * 2019-04-16
  27. * 新增圆弧进度图,图表类型arcbar
  28. * 2019-04-22
  29. * 修改图表拖拽功能跨端支持,增加拖拽时显示滚动条
  30. * 2019-04-28
  31. * 新增柱状图自定义颜色
  32. * 2019-05-01
  33. * 新增仪表盘图
  34. * 2019-05-14
  35. * 新增K线图
  36. * 2019-05-20
  37. * 新增混合图、堆叠图、温度计图、柱状图类ToolTip效果
  38. *
  39. *
  40. */
  41. 'use strict';
  42. var config = {
  43. yAxisWidth: 15,
  44. yAxisSplit: 5,//Y轴多少个数值
  45. xAxisHeight: 15,
  46. xAxisLineHeight: 15,
  47. legendHeight: 15,
  48. yAxisTitleWidth: 15,
  49. padding: 12,
  50. pixelRatio:1,//适配H5高分屏
  51. rotate:false,//横屏模式
  52. columePadding: 3,
  53. fontSize: 13,
  54. //dataPointShape: ['diamond', 'circle', 'triangle', 'rect'],
  55. dataPointShape: ['circle', 'circle', 'circle', 'circle'],//仿F2图例样式改为圆点
  56. colors: ['#0B80E3', '#FC9F32', '#facc14', '#f04864', '#8543e0', '#90ed7d'],
  57. pieChartLinePadding: 15,
  58. pieChartTextPadding: 5,
  59. xAxisTextPadding: 3,
  60. titleColor: '#333333',
  61. titleFontSize: 20,
  62. subtitleColor: '#999999',
  63. subtitleFontSize: 15,
  64. toolTipPadding: 3,
  65. toolTipBackground: '#000000',
  66. toolTipOpacity: 0.7,
  67. toolTipLineHeight: 20,
  68. radarGridCount: 3,
  69. radarLabelTextMargin: 15,
  70. gaugeLabelTextMargin:15
  71. };
  72. // Object.assign polyfill
  73. // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
  74. function assign(target, varArgs) {
  75. if (target == null) {
  76. // TypeError if undefined or null
  77. throw new TypeError('Cannot convert undefined or null to object');
  78. }
  79. var to = Object(target);
  80. for (var index = 1; index < arguments.length; index++) {
  81. var nextSource = arguments[index];
  82. if (nextSource != null) {
  83. // Skip over if undefined or null
  84. for (var nextKey in nextSource) {
  85. // Avoid bugs when hasOwnProperty is shadowed
  86. if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
  87. to[nextKey] = nextSource[nextKey];
  88. }
  89. }
  90. }
  91. }
  92. return to;
  93. }
  94. var util = {
  95. toFixed: function toFixed(num, limit) {
  96. limit = limit || 2;
  97. if (this.isFloat(num)) {
  98. num = num.toFixed(limit);
  99. }
  100. return num;
  101. },
  102. isFloat: function isFloat(num) {
  103. return num % 1 !== 0;
  104. },
  105. approximatelyEqual: function approximatelyEqual(num1, num2) {
  106. return Math.abs(num1 - num2) < 1e-10;
  107. },
  108. isSameSign: function isSameSign(num1, num2) {
  109. return Math.abs(num1) === num1 && Math.abs(num2) === num2 || Math.abs(num1) !== num1 && Math.abs(num2) !== num2;
  110. },
  111. isSameXCoordinateArea: function isSameXCoordinateArea(p1, p2) {
  112. return this.isSameSign(p1.x, p2.x);
  113. },
  114. isCollision: function isCollision(obj1, obj2) {
  115. obj1.end = {};
  116. obj1.end.x = obj1.start.x + obj1.width;
  117. obj1.end.y = obj1.start.y - obj1.height;
  118. obj2.end = {};
  119. obj2.end.x = obj2.start.x + obj2.width;
  120. obj2.end.y = obj2.start.y - obj2.height;
  121. 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;
  122. return !flag;
  123. }
  124. };
  125. // hex 转 rgba
  126. function hexToRgb(hexValue, opc) {
  127. var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  128. var hex = hexValue.replace(rgx, function (m, r, g, b) {
  129. return r + r + g + g + b + b;
  130. });
  131. var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  132. var r = parseInt(rgb[1], 16);
  133. var g = parseInt(rgb[2], 16);
  134. var b = parseInt(rgb[3], 16);
  135. return 'rgba(' + r + ',' + g + ',' + b + ',' + opc + ')';
  136. }
  137. function findRange(num, type, limit) {
  138. if (isNaN(num)) {
  139. throw new Error('[wxCharts] unvalid series data!');
  140. }
  141. limit = limit || 10;
  142. type = type ? type : 'upper';
  143. var multiple = 1;
  144. while (limit < 1) {
  145. limit *= 10;
  146. multiple *= 10;
  147. }
  148. if (type === 'upper') {
  149. num = Math.ceil(num * multiple);
  150. } else {
  151. num = Math.floor(num * multiple);
  152. }
  153. while (num % limit !== 0) {
  154. if (type === 'upper') {
  155. num++;
  156. } else {
  157. num--;
  158. }
  159. }
  160. return num / multiple;
  161. }
  162. function calValidDistance(distance, chartData, config, opts) {
  163. var dataChartAreaWidth = opts.width - config.padding - chartData.xAxisPoints[0];
  164. var dataChartWidth = chartData.eachSpacing * opts.categories.length;
  165. var validDistance = distance;
  166. if (distance >= 0) {
  167. validDistance = 0;
  168. } else if (Math.abs(distance) >= dataChartWidth - dataChartAreaWidth) {
  169. validDistance = dataChartAreaWidth - dataChartWidth;
  170. }
  171. return validDistance;
  172. }
  173. function isInAngleRange(angle, startAngle, endAngle) {
  174. function adjust(angle) {
  175. while (angle < 0) {
  176. angle += 2 * Math.PI;
  177. }
  178. while (angle > 2 * Math.PI) {
  179. angle -= 2 * Math.PI;
  180. }
  181. return angle;
  182. }
  183. angle = adjust(angle);
  184. startAngle = adjust(startAngle);
  185. endAngle = adjust(endAngle);
  186. if (startAngle > endAngle) {
  187. endAngle += 2 * Math.PI;
  188. if (angle < startAngle) {
  189. angle += 2 * Math.PI;
  190. }
  191. }
  192. return angle >= startAngle && angle <= endAngle;
  193. }
  194. function calRotateTranslate(x, y, h) {
  195. var xv = x;
  196. var yv = h - y;
  197. var transX = xv + (h - yv - xv) / Math.sqrt(2);
  198. transX *= -1;
  199. var transY = (h - yv) * (Math.sqrt(2) - 1) - (h - yv - xv) / Math.sqrt(2);
  200. return {
  201. transX: transX,
  202. transY: transY
  203. };
  204. }
  205. function createCurveControlPoints(points, i) {
  206. function isNotMiddlePoint(points, i) {
  207. if (points[i - 1] && points[i + 1]) {
  208. 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);
  209. } else {
  210. return false;
  211. }
  212. }
  213. var a = 0.2;
  214. var b = 0.2;
  215. var pAx = null;
  216. var pAy = null;
  217. var pBx = null;
  218. var pBy = null;
  219. if (i < 1) {
  220. pAx = points[0].x + (points[1].x - points[0].x) * a;
  221. pAy = points[0].y + (points[1].y - points[0].y) * a;
  222. } else {
  223. pAx = points[i].x + (points[i + 1].x - points[i - 1].x) * a;
  224. pAy = points[i].y + (points[i + 1].y - points[i - 1].y) * a;
  225. }
  226. if (i > points.length - 3) {
  227. var last = points.length - 1;
  228. pBx = points[last].x - (points[last].x - points[last - 1].x) * b;
  229. pBy = points[last].y - (points[last].y - points[last - 1].y) * b;
  230. } else {
  231. pBx = points[i + 1].x - (points[i + 2].x - points[i].x) * b;
  232. pBy = points[i + 1].y - (points[i + 2].y - points[i].y) * b;
  233. }
  234. // fix issue https://github.com/xiaolin3303/wx-charts/issues/79
  235. if (isNotMiddlePoint(points, i + 1)) {
  236. pBy = points[i + 1].y;
  237. }
  238. if (isNotMiddlePoint(points, i)) {
  239. pAy = points[i].y;
  240. }
  241. return {
  242. ctrA: { x: pAx, y: pAy },
  243. ctrB: { x: pBx, y: pBy }
  244. };
  245. }
  246. function convertCoordinateOrigin(x, y, center) {
  247. return {
  248. x: center.x + x,
  249. y: center.y - y
  250. };
  251. }
  252. function avoidCollision(obj, target) {
  253. if (target) {
  254. // is collision test
  255. while (util.isCollision(obj, target)) {
  256. if (obj.start.x > 0) {
  257. obj.start.y--;
  258. } else if (obj.start.x < 0) {
  259. obj.start.y++;
  260. } else {
  261. if (obj.start.y > 0) {
  262. obj.start.y++;
  263. } else {
  264. obj.start.y--;
  265. }
  266. }
  267. }
  268. }
  269. return obj;
  270. }
  271. function fillSeriesColor(series, config) {
  272. var index = 0;
  273. return series.map(function (item) {
  274. if (!item.color) {
  275. item.color = config.colors[index];
  276. index = (index + 1) % config.colors.length;
  277. }
  278. return item;
  279. });
  280. }
  281. function fillSeriesType(series, opts) {
  282. return series.map(function (item) {
  283. if (!item.type) {
  284. item.type = opts.type;
  285. }
  286. return item;
  287. });
  288. }
  289. function getDataRange(minData, maxData) {
  290. var limit = 0;
  291. var range = maxData - minData;
  292. if (range >= 10000) {
  293. limit = 1000;
  294. } else if (range >= 1000) {
  295. limit = 100;
  296. } else if (range >= 100) {
  297. limit = 10;
  298. } else if (range >= 10) {
  299. limit = 5;
  300. } else if (range >= 1) {
  301. limit = 1;
  302. } else if (range >= 0.1) {
  303. limit = 0.1;
  304. } else {
  305. limit = 0.01;
  306. }
  307. return {
  308. minRange: findRange(minData, 'lower', limit),
  309. maxRange: findRange(maxData, 'upper', limit)
  310. };
  311. }
  312. function measureText(text) {
  313. var fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : config.fontSize;
  314. // wx canvas 未实现measureText方法, 此处自行实现
  315. // 适配修改初始字体10px为其他大小的方法
  316. text = String(text);
  317. var text = text.split('');
  318. var width = 0;
  319. text.forEach(function (item) {
  320. if (/[a-zA-Z]/.test(item)) {
  321. width += 7;
  322. } else if (/[0-9]/.test(item)) {
  323. width += 5.5;
  324. } else if (/\./.test(item)) {
  325. width += 2.7;
  326. } else if (/-/.test(item)) {
  327. width += 3.25;
  328. } else if (/[\u4e00-\u9fa5]/.test(item)) {
  329. width += 10;
  330. } else if (/\(|\)/.test(item)) {
  331. width += 3.73;
  332. } else if (/\s/.test(item)) {
  333. width += 2.5;
  334. } else if (/%/.test(item)) {
  335. width += 8;
  336. } else {
  337. width += 10;
  338. }
  339. });
  340. return width * fontSize / 10 ;
  341. }
  342. function dataCombine(series) {
  343. return series.reduce(function (a, b) {
  344. return (a.data ? a.data : a).concat(b.data);
  345. }, []);
  346. }
  347. function dataCombineStack(series) {
  348. var sum = new Array(series[0].data.length);
  349. for(var j = 0; j < sum.length; j++) {
  350. sum[j] =0;
  351. }
  352. for(var i = 0; i < series.length; i++) {
  353. for(var j = 0; j < sum.length; j++) {
  354. sum[j] += series[i].data[j];
  355. }
  356. }
  357. return series.reduce(function (a, b) {
  358. return (a.data ? a.data : a).concat(b.data).concat(sum);
  359. }, []);
  360. }
  361. function getTouches(touches, opts, e){
  362. let x,y;
  363. if(touches.clientX){
  364. if(opts.rotate){//适配横屏
  365. y = opts.height-touches.clientX*opts.pixelRatio;
  366. x = (touches.pageY-e.mp.currentTarget.offsetTop-(opts.height/opts.pixelRatio/2)*(opts.pixelRatio-1))*opts.pixelRatio;
  367. }else{
  368. x = touches.clientX*opts.pixelRatio;
  369. y = (touches.pageY-e.mp.currentTarget.offsetTop-(opts.height/opts.pixelRatio/2)*(opts.pixelRatio-1))*opts.pixelRatio;
  370. }
  371. }else{
  372. if(opts.rotate){//适配横屏
  373. y = opts.height-touches.x*opts.pixelRatio;
  374. x = touches.y*opts.pixelRatio;
  375. }else{
  376. x = touches.x*opts.pixelRatio;
  377. y = touches.y*opts.pixelRatio;
  378. }
  379. }
  380. return{x:x,y:y}
  381. }
  382. function getSeriesDataItem(series, index) {
  383. var data = [];
  384. series.forEach(function (item) {
  385. if (item.data[index] !== null && typeof item.data[index] !== 'undefined') {
  386. var seriesItem = {};
  387. seriesItem.color = item.color;
  388. seriesItem.name = item.name;
  389. seriesItem.data = item.format ? item.format(item.data[index]) : item.data[index];
  390. data.push(seriesItem);
  391. }
  392. });
  393. return data;
  394. }
  395. function getMaxTextListLength(list) {
  396. var lengthList = list.map(function (item) {
  397. return measureText(item);
  398. });
  399. return Math.max.apply(null, lengthList);
  400. }
  401. function getRadarCoordinateSeries(length) {
  402. var eachAngle = 2 * Math.PI / length;
  403. var CoordinateSeries = [];
  404. for (var i = 0; i < length; i++) {
  405. CoordinateSeries.push(eachAngle * i);
  406. }
  407. return CoordinateSeries.map(function (item) {
  408. return -1 * item + Math.PI / 2;
  409. });
  410. }
  411. function getToolTipData(seriesData, calPoints, index, categories) {
  412. var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
  413. var textList = seriesData.map(function (item) {
  414. return {
  415. text: option.format ? option.format(item, categories[index]) : item.name + ': ' + item.data,
  416. color: item.color
  417. };
  418. });
  419. var validCalPoints = [];
  420. var offset = {
  421. x: 0,
  422. y: 0
  423. };
  424. calPoints.forEach(function (points) {
  425. if (typeof points[index] !== 'undefined' && points[index] !== null) {
  426. validCalPoints.push(points[index]);
  427. }
  428. });
  429. validCalPoints.forEach(function (item) {
  430. offset.x = Math.round(item.x);
  431. offset.y += item.y;
  432. });
  433. offset.y /= validCalPoints.length;
  434. return { textList: textList, offset: offset };
  435. }
  436. function getCandleToolTipData(series,seriesData, calPoints, index, categories,extra) {
  437. var option = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {};
  438. let upColor = extra.color.upFill;
  439. let downColor = extra.color.downFill;
  440. //颜色顺序为开盘,收盘,最低,最高
  441. let color=[upColor,upColor,downColor,upColor];
  442. var textList = [];
  443. let text0={
  444. text: categories[index],
  445. color: null
  446. };
  447. textList.push(text0);
  448. seriesData.map(function (item) {
  449. //console.log(color)
  450. if(index==0 && item.data[1]-item.data[0]<0){
  451. color[1]=downColor;
  452. }else{
  453. if(item.data[0]<series[index-1][1]){
  454. color[0]=downColor;
  455. }
  456. if(item.data[1]<item.data[0]){
  457. color[1]=downColor;
  458. }
  459. if(item.data[2]>series[index-1][1]){
  460. color[2]=upColor;
  461. }
  462. if(item.data[3]<series[index-1][1]){
  463. color[3]=downColor;
  464. }
  465. }
  466. let text1={
  467. text: '开盘:'+item.data[0],
  468. color: color[0]
  469. };
  470. let text2={
  471. text: '收盘:'+item.data[1],
  472. color: color[1]
  473. };
  474. let text3={
  475. text: '最低:'+item.data[2],
  476. color: color[2]
  477. };
  478. let text4={
  479. text: '最高:'+item.data[3],
  480. color: color[3]
  481. };
  482. textList.push(text1,text2,text3,text4);
  483. });
  484. var validCalPoints = [];
  485. var offset = {
  486. x: 0,
  487. y: 0
  488. };
  489. calPoints.forEach(function (points) {
  490. if (typeof points[index] !== 'undefined' && points[index] !== null) {
  491. validCalPoints.push(points[index]);
  492. }
  493. });
  494. offset.x=Math.round(validCalPoints[0][0].x);
  495. return { textList: textList, offset: offset };
  496. }
  497. function findCurrentIndex(currentPoints, xAxisPoints, opts, config) {
  498. var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
  499. var currentIndex = -1;
  500. if (isInExactChartArea(currentPoints, opts, config)) {
  501. xAxisPoints.forEach(function (item, index) {
  502. if (currentPoints.x + offset > item) {
  503. currentIndex = index;
  504. }
  505. });
  506. }
  507. return currentIndex;
  508. }
  509. function isInExactChartArea(currentPoints, opts, config) {
  510. return currentPoints.x < opts.width - config.padding && currentPoints.x > config.padding + config.yAxisWidth + config.yAxisTitleWidth && currentPoints.y > config.padding && currentPoints.y < opts.height - config.legendHeight - config.xAxisHeight - config.padding;
  511. }
  512. function findRadarChartCurrentIndex(currentPoints, radarData, count) {
  513. var eachAngleArea = 2 * Math.PI / count;
  514. var currentIndex = -1;
  515. if (isInExactPieChartArea(currentPoints, radarData.center, radarData.radius)) {
  516. var fixAngle = function fixAngle(angle) {
  517. if (angle < 0) {
  518. angle += 2 * Math.PI;
  519. }
  520. if (angle > 2 * Math.PI) {
  521. angle -= 2 * Math.PI;
  522. }
  523. return angle;
  524. };
  525. var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x);
  526. angle = -1 * angle;
  527. if (angle < 0) {
  528. angle += 2 * Math.PI;
  529. }
  530. var angleList = radarData.angleList.map(function (item) {
  531. item = fixAngle(-1 * item);
  532. return item;
  533. });
  534. angleList.forEach(function (item, index) {
  535. var rangeStart = fixAngle(item - eachAngleArea / 2);
  536. var rangeEnd = fixAngle(item + eachAngleArea / 2);
  537. if (rangeEnd < rangeStart) {
  538. rangeEnd += 2 * Math.PI;
  539. }
  540. if (angle >= rangeStart && angle <= rangeEnd || angle + 2 * Math.PI >= rangeStart && angle + 2 * Math.PI <= rangeEnd) {
  541. currentIndex = index;
  542. }
  543. });
  544. }
  545. return currentIndex;
  546. }
  547. function findPieChartCurrentIndex(currentPoints, pieData) {
  548. var currentIndex = -1;
  549. if (isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) {
  550. var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x);
  551. angle = -angle;
  552. for (var i = 0, len = pieData.series.length; i < len; i++) {
  553. var item = pieData.series[i];
  554. if (isInAngleRange(angle, item._start_, item._start_ + item._proportion_ * 2 * Math.PI)) {
  555. currentIndex = i;
  556. break;
  557. }
  558. }
  559. }
  560. return currentIndex;
  561. }
  562. function isInExactPieChartArea(currentPoints, center, radius) {
  563. return Math.pow(currentPoints.x - center.x, 2) + Math.pow(currentPoints.y - center.y, 2) <= Math.pow(radius, 2);
  564. }
  565. function splitPoints(points) {
  566. var newPoints = [];
  567. var items = [];
  568. points.forEach(function (item, index) {
  569. if (item !== null) {
  570. items.push(item);
  571. } else {
  572. if (items.length) {
  573. newPoints.push(items);
  574. }
  575. items = [];
  576. }
  577. });
  578. if (items.length) {
  579. newPoints.push(items);
  580. }
  581. return newPoints;
  582. }
  583. function calLegendData(series, opts, config) {
  584. if (opts.legend === false) {
  585. return {
  586. legendList: [],
  587. legendHeight: 0
  588. };
  589. }
  590. //适配H5高分屏
  591. var padding = 5*opts.pixelRatio;
  592. var marginTop = 8*opts.pixelRatio;
  593. var shapeWidth = 15*opts.pixelRatio;
  594. var legendList = [];
  595. var widthCount = 0;
  596. var currentRow = [];
  597. series.forEach(function (item) {
  598. var itemWidth = 3 * padding + shapeWidth + measureText(item.name || 'undefined');
  599. if (widthCount + itemWidth > opts.width) {
  600. legendList.push(currentRow);
  601. widthCount = itemWidth;
  602. currentRow = [item];
  603. } else {
  604. widthCount += itemWidth;
  605. currentRow.push(item);
  606. }
  607. });
  608. if (currentRow.length) {
  609. legendList.push(currentRow);
  610. }
  611. return {
  612. legendList: legendList,
  613. legendHeight: legendList.length * (config.fontSize + marginTop) + padding
  614. };
  615. }
  616. function calCategoriesData(categories, opts, config) {
  617. var result = {
  618. angle: 0,
  619. xAxisHeight: config.xAxisHeight
  620. };
  621. var _getXAxisPoints = getXAxisPoints(categories, opts, config),
  622. eachSpacing = _getXAxisPoints.eachSpacing;
  623. // get max length of categories text
  624. var categoriesTextLenth = categories.map(function (item) {
  625. return measureText(item);
  626. });
  627. var maxTextLength = Math.max.apply(this, categoriesTextLenth);
  628. if (opts.xAxis.rotateLabel==true && maxTextLength + 2 * config.xAxisTextPadding > eachSpacing) {
  629. result.angle = 45 * Math.PI / 180;
  630. result.xAxisHeight = 2 * config.xAxisTextPadding + maxTextLength * Math.sin(result.angle);
  631. }
  632. return result;
  633. }
  634. function getRadarDataPoints(angleList, center, radius, series, opts) {
  635. var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
  636. var radarOption = opts.extra.radar || {};
  637. radarOption.max = radarOption.max || 0;
  638. var maxData = Math.max(radarOption.max, Math.max.apply(null, dataCombine(series)));
  639. var data = [];
  640. series.forEach(function (each) {
  641. var listItem = {};
  642. listItem.color = each.color;
  643. listItem.data = [];
  644. each.data.forEach(function (item, index) {
  645. var tmp = {};
  646. tmp.angle = angleList[index];
  647. tmp.proportion = item / maxData;
  648. tmp.position = convertCoordinateOrigin(radius * tmp.proportion * process * Math.cos(tmp.angle), radius * tmp.proportion * process * Math.sin(tmp.angle), center);
  649. listItem.data.push(tmp);
  650. });
  651. data.push(listItem);
  652. });
  653. return data;
  654. }
  655. function getPieDataPoints(series) {
  656. var process = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
  657. var count = 0;
  658. var _start_ = 0;
  659. series.forEach(function (item) {
  660. item.data = item.data === null ? 0 : item.data;
  661. count += item.data;
  662. });
  663. series.forEach(function (item) {
  664. item.data = item.data === null ? 0 : item.data;
  665. item._proportion_ = item.data / count * process;
  666. });
  667. series.forEach(function (item) {
  668. item._start_ = _start_;
  669. _start_ += 2 * item._proportion_ * Math.PI;
  670. });
  671. return series;
  672. }
  673. function getArcbarDataPoints(series,arcbarOption) {
  674. var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
  675. if(process==1){
  676. process=0.999999;
  677. }
  678. series.forEach(function (item) {
  679. item.data = item.data === null ? 0 : item.data;
  680. let totalAngle;
  681. if(arcbarOption.type=='default'){
  682. totalAngle=arcbarOption.startAngle-arcbarOption.endAngle+1;
  683. }else{
  684. totalAngle=2;
  685. }
  686. item._proportion_ = totalAngle * item.data* process + arcbarOption.startAngle;
  687. if (item._proportion_ >= 2) {
  688. item._proportion_ = item._proportion_ % 2;
  689. }
  690. });
  691. return series;
  692. }
  693. function getGaugeAxisPoints(categories,startAngle,endAngle) {
  694. let totalAngle=startAngle-endAngle+1;
  695. let tempStartAngle=startAngle;
  696. for(let i=0 ; i<categories.length; i++){
  697. categories[i].value = categories[i].value === null ? 0 : categories[i].value;
  698. categories[i]._startAngle_=tempStartAngle;
  699. categories[i]._endAngle_=totalAngle* categories[i].value + startAngle;
  700. if (categories[i]._endAngle_ >= 2) {
  701. categories[i]._endAngle_ = categories[i]._endAngle_ % 2;
  702. }
  703. tempStartAngle=categories[i]._endAngle_;
  704. }
  705. return categories;
  706. }
  707. function getGaugeDataPoints(series,categories,gaugeOption) {
  708. var process = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
  709. series.forEach(function (item) {
  710. item.data = item.data === null ? 0 : item.data;
  711. if(gaugeOption.pointer.color=='auto'){
  712. for(let i=0 ;i<categories.length;i++){
  713. if(item.data<=categories[i].value){
  714. item.color=categories[i].color;
  715. break;
  716. }
  717. }
  718. }else{
  719. item.color=gaugeOption.pointer.color;
  720. }
  721. let totalAngle=gaugeOption.startAngle-gaugeOption.endAngle+1;
  722. item._endAngle_=totalAngle * item.data + gaugeOption.startAngle;
  723. item._oldAngle_=gaugeOption.oldAngle;
  724. if(gaugeOption.oldAngle<gaugeOption.endAngle){
  725. item._oldAngle_+=2;
  726. }
  727. if(item.data>=gaugeOption.oldData){
  728. item._proportion_ = (item._endAngle_-item._oldAngle_)* process+gaugeOption.oldAngle;
  729. }else{
  730. item._proportion_ =item._oldAngle_- (item._oldAngle_-item._endAngle_)* process;
  731. }
  732. if (item._proportion_ >= 2) {
  733. item._proportion_ = item._proportion_ % 2;
  734. }
  735. });
  736. return series;
  737. }
  738. function getPieTextMaxLength(series) {
  739. series = getPieDataPoints(series);
  740. var maxLength = 0;
  741. series.forEach(function (item) {
  742. var text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) + '%';
  743. maxLength = Math.max(maxLength, measureText(text));
  744. });
  745. return maxLength;
  746. }
  747. function fixColumeData(points, eachSpacing, columnLen, index, config, opts) {
  748. return points.map(function (item) {
  749. if (item === null) {
  750. return null;
  751. }
  752. item.width = (eachSpacing - 2 * config.columePadding) / columnLen;
  753. if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
  754. // customer column width
  755. item.width = Math.min(item.width, +opts.extra.column.width);
  756. } else {
  757. // default width should less tran 25px
  758. // don't ask me why, I don't know
  759. item.width = Math.min(item.width, 25);
  760. }
  761. item.x += (index + 0.5 - columnLen / 2) * item.width;
  762. return item;
  763. });
  764. }
  765. function fixColumeMeterData(points, eachSpacing, columnLen, index, config, opts, border) {
  766. return points.map(function (item) {
  767. if (item === null) {
  768. return null;
  769. }
  770. item.width = eachSpacing - 2 * config.columePadding;
  771. if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
  772. item.width = Math.min(item.width, +opts.extra.column.width);
  773. } else {
  774. item.width = Math.min(item.width, 25);
  775. }
  776. if(index>0){
  777. item.width -= 2*border;
  778. }
  779. return item;
  780. });
  781. }
  782. function fixColumeStackData(points, eachSpacing, columnLen, index, config, opts,series) {
  783. return points.map(function (item,indexn) {
  784. if (item === null) {
  785. return null;
  786. }
  787. item.width = eachSpacing - 2 * config.columePadding;
  788. if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
  789. item.width = Math.min(item.width, +opts.extra.column.width);
  790. } else {
  791. item.width = Math.min(item.width, 25);
  792. }
  793. return item;
  794. });
  795. }
  796. function getXAxisPoints(categories, opts, config) {
  797. var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth;
  798. var spacingValid = opts.width - 2 * config.padding - yAxisTotalWidth;
  799. var dataCount = opts.enableScroll ? Math.min(opts.xAxis.itemCount, categories.length) : categories.length;
  800. var eachSpacing = spacingValid / dataCount;
  801. var xAxisPoints = [];
  802. var startX = config.padding + yAxisTotalWidth;
  803. var endX = opts.width - config.padding;
  804. categories.forEach(function (item, index) {
  805. xAxisPoints.push(startX + index * eachSpacing);
  806. });
  807. if (opts.enableScroll === true) {
  808. xAxisPoints.push(startX + categories.length * eachSpacing);
  809. } else {
  810. xAxisPoints.push(endX);
  811. }
  812. return { xAxisPoints: xAxisPoints, startX: startX, endX: endX, eachSpacing: eachSpacing };
  813. }
  814. function getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) {
  815. var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
  816. var points = [];
  817. var validHeight = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
  818. data.forEach(function (item, index) {
  819. if (item === null) {
  820. points.push(null);
  821. } else {
  822. var cPoints = [];
  823. item.forEach(function (items, indexs) {
  824. var point = {};
  825. point.x = xAxisPoints[index] + Math.round(eachSpacing / 2);
  826. var value = items.value || items;
  827. var height = validHeight * (value - minRange) / (maxRange - minRange);
  828. height *= process;
  829. point.y = opts.height - config.xAxisHeight - config.legendHeight - Math.round(height) - config.padding;
  830. cPoints.push(point);
  831. });
  832. points.push(cPoints);
  833. }
  834. });
  835. return points;
  836. }
  837. function getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) {
  838. var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
  839. var points = [];
  840. var validHeight = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
  841. data.forEach(function (item, index) {
  842. if (item === null) {
  843. points.push(null);
  844. } else {
  845. var point = {};
  846. point.color = item.color;
  847. point.x = xAxisPoints[index] + Math.round(eachSpacing / 2);
  848. var value = item.value || item;
  849. var height = validHeight * (value - minRange) / (maxRange - minRange);
  850. height *= process;
  851. point.y = opts.height - config.xAxisHeight - config.legendHeight - Math.round(height) - config.padding;
  852. points.push(point);
  853. }
  854. });
  855. return points;
  856. }
  857. function getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config,seriesIndex, stackSeries) {
  858. var process = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 1;
  859. var points = [];
  860. var validHeight = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
  861. data.forEach(function (item, index) {
  862. if (item === null) {
  863. points.push(null);
  864. } else {
  865. var point = {};
  866. point.color = item.color;
  867. point.x = xAxisPoints[index] + Math.round(eachSpacing / 2);
  868. if(seriesIndex>0){
  869. var value=0;
  870. for(let i=0;i<=seriesIndex;i++){
  871. value+=stackSeries[i].data[index];
  872. }
  873. var value0 = value-item;
  874. var height = validHeight * (value - minRange) / (maxRange - minRange);
  875. var height0 = validHeight * (value0 - minRange) / (maxRange - minRange);
  876. }else{
  877. var value = item;
  878. var height = validHeight * (value - minRange) / (maxRange - minRange);
  879. var height0 = 0;
  880. }
  881. var heightc=height0;
  882. height *= process;
  883. heightc *= process;
  884. point.y = opts.height - config.xAxisHeight - config.legendHeight - Math.round(height) - config.padding;
  885. point.y0 = opts.height - config.xAxisHeight - config.legendHeight - Math.round(heightc) - config.padding;
  886. points.push(point);
  887. }
  888. });
  889. return points;
  890. }
  891. function getYAxisTextList(series, opts, config ,stack) {
  892. var data;
  893. if(stack=='stack'){
  894. //data = dataCombine(series);
  895. data = dataCombineStack(series);
  896. }else{
  897. data = dataCombine(series);
  898. }
  899. var sorted = [];
  900. // remove null from data
  901. data = data.filter(function (item) {
  902. //return item !== null;
  903. if(typeof item === 'object' && item !== null) {
  904. //判断是否为数组
  905. if(item.constructor == Array){
  906. return item !== null;
  907. }else{
  908. return item.value !== null;
  909. }
  910. } else {
  911. return item !== null;
  912. }
  913. });
  914. //var minData = Math.min.apply(this, data);
  915. //var maxData = Math.max.apply(this, data);
  916. data.map((item)=>{
  917. if(typeof item === 'object') {
  918. if(item.constructor == Array){
  919. item.map((subitem)=>{
  920. sorted.push(subitem);
  921. })
  922. }else{
  923. sorted.push(item.value);
  924. }
  925. } else {
  926. sorted.push(item);
  927. }
  928. //typeof item === 'object' ? sorted.push(item.value) : sorted.push(item)
  929. })
  930. var minData = 0;
  931. var maxData = 0;
  932. if(sorted.length>0){
  933. minData = Math.min.apply(this, sorted);
  934. maxData = Math.max.apply(this, sorted);
  935. }
  936. if (typeof opts.yAxis.min === 'number') {
  937. minData = Math.min(opts.yAxis.min, minData);
  938. }
  939. if (typeof opts.yAxis.max === 'number') {
  940. maxData = Math.max(opts.yAxis.max, maxData);
  941. }
  942. // fix issue https://github.com/xiaolin3303/wx-charts/issues/9
  943. if (minData === maxData) {
  944. var rangeSpan = maxData || 10;
  945. //minData -= rangeSpan;
  946. maxData += rangeSpan;
  947. }
  948. var dataRange = getDataRange(minData, maxData);
  949. var minRange = dataRange.minRange;
  950. var maxRange = dataRange.maxRange;
  951. var range = [];
  952. var eachRange = (maxRange - minRange) / config.yAxisSplit;
  953. for (var i = 0; i <= config.yAxisSplit; i++) {
  954. range.push(minRange + eachRange * i);
  955. }
  956. return range.reverse();
  957. }
  958. function calYAxisData(series, opts, config) {
  959. //堆叠图重算Y轴
  960. var columnstyle=assign({},opts.extra.column||{"type":""});
  961. var ranges = getYAxisTextList(series, opts, config, columnstyle.type);
  962. var yAxisWidth = config.yAxisWidth;
  963. var rangesFormat = ranges.map(function (item) {
  964. item = util.toFixed(item, 2);
  965. item = opts.yAxis.format ? opts.yAxis.format(Number(item)) : item;
  966. yAxisWidth = Math.max(yAxisWidth, measureText(item) + 5);
  967. return item;
  968. });
  969. if (opts.yAxis.disabled === true) {
  970. yAxisWidth = 0;
  971. }
  972. return { rangesFormat: rangesFormat, ranges: ranges, yAxisWidth: yAxisWidth };
  973. }
  974. function calTooltipYAxisData(point,series, opts, config, eachSpacing) {
  975. var ranges = getYAxisTextList(series, opts, config);
  976. var spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
  977. let maxVal=ranges[0];
  978. let minVal=ranges[ranges.length-1];
  979. let minAxis=config.padding;
  980. let maxAxis=config.padding+spacingValid;
  981. let item=maxVal-(maxVal-minVal)*(point-minAxis)/(maxAxis-minAxis);
  982. item = opts.yAxis.format ? opts.yAxis.format(Number(item)) : item;
  983. return item;
  984. }
  985. function contextRotate(context,opts) {
  986. if(opts.rotateLock!==true){
  987. context.translate(opts.height, 0);
  988. context.rotate(90 * Math.PI / 180);
  989. }else if(opts._rotate_!==true){
  990. context.translate(opts.height, 0);
  991. context.rotate(90 * Math.PI / 180);
  992. opts._rotate_=true;
  993. }
  994. }
  995. function drawPointShape(points, color, shape, context,opts) {
  996. context.beginPath();
  997. context.setStrokeStyle("#ffffff");
  998. context.setLineWidth(1*opts.pixelRatio);
  999. context.setFillStyle(color);
  1000. if (shape === 'diamond') {
  1001. points.forEach(function (item, index) {
  1002. if (item !== null) {
  1003. context.moveTo(item.x, item.y - 4.5);
  1004. context.lineTo(item.x - 4.5, item.y);
  1005. context.lineTo(item.x, item.y + 4.5);
  1006. context.lineTo(item.x + 4.5, item.y);
  1007. context.lineTo(item.x, item.y - 4.5);
  1008. }
  1009. });
  1010. } else if (shape === 'circle') {
  1011. points.forEach(function (item, index) {
  1012. if (item !== null) {
  1013. context.moveTo(item.x + 3.5*opts.pixelRatio, item.y);
  1014. context.arc(item.x, item.y, 4*opts.pixelRatio, 0, 2 * Math.PI, false);
  1015. }
  1016. });
  1017. } else if (shape === 'rect') {
  1018. points.forEach(function (item, index) {
  1019. if (item !== null) {
  1020. context.moveTo(item.x - 3.5, item.y - 3.5);
  1021. context.rect(item.x - 3.5, item.y - 3.5, 7, 7);
  1022. }
  1023. });
  1024. } else if (shape === 'triangle') {
  1025. points.forEach(function (item, index) {
  1026. if (item !== null) {
  1027. context.moveTo(item.x, item.y - 4.5);
  1028. context.lineTo(item.x - 4.5, item.y + 4.5);
  1029. context.lineTo(item.x + 4.5, item.y + 4.5);
  1030. context.lineTo(item.x, item.y - 4.5);
  1031. }
  1032. });
  1033. }
  1034. context.closePath();
  1035. context.fill();
  1036. context.stroke();
  1037. }
  1038. function drawRingTitle(opts, config, context) {
  1039. var titlefontSize = opts.title.fontSize || config.titleFontSize;
  1040. var subtitlefontSize = opts.subtitle.fontSize || config.subtitleFontSize;
  1041. var title = opts.title.name || '';
  1042. var subtitle = opts.subtitle.name || '';
  1043. var titleFontColor = opts.title.color || config.titleColor;
  1044. var subtitleFontColor = opts.subtitle.color || config.subtitleColor;
  1045. var titleHeight = title ? titlefontSize : 0;
  1046. var subtitleHeight = subtitle ? subtitlefontSize : 0;
  1047. var margin = 5;
  1048. if (subtitle) {
  1049. var textWidth = measureText(subtitle, subtitlefontSize);
  1050. var startX = (opts.width - textWidth) / 2 + (opts.subtitle.offsetX || 0);
  1051. var startY = ((opts.height - config.legendHeight + subtitlefontSize) / 2 )+ (opts.subtitle.offsetY || 0);
  1052. if (title) {
  1053. startY -= (titleHeight + margin) / 2 ;
  1054. }
  1055. context.beginPath();
  1056. context.setFontSize(subtitlefontSize);
  1057. context.setFillStyle(subtitleFontColor);
  1058. context.fillText(subtitle, startX, startY);
  1059. context.closePath();
  1060. context.stroke();
  1061. }
  1062. if (title) {
  1063. var _textWidth = measureText(title, titlefontSize);
  1064. var _startX = (opts.width - _textWidth) / 2 + (opts.title.offsetX || 0);
  1065. var _startY = ((opts.height - config.legendHeight + titlefontSize) / 2 ) + (opts.title.offsetY || 0);
  1066. if (subtitle) {
  1067. _startY += (subtitleHeight + margin) / 2;
  1068. }
  1069. context.beginPath();
  1070. context.setFontSize(titlefontSize);
  1071. context.setFillStyle(titleFontColor);
  1072. context.fillText(title, _startX, _startY);
  1073. context.closePath();
  1074. context.stroke();
  1075. }
  1076. }
  1077. function drawPointText(points, series, config, context) {
  1078. // 绘制数据文案
  1079. var data = series.data;
  1080. points.forEach(function (item, index) {
  1081. if (item !== null) {
  1082. //var formatVal = series.format ? series.format(data[index]) : data[index];
  1083. context.beginPath();
  1084. context.setFontSize(config.fontSize);
  1085. context.setFillStyle('#666666');
  1086. var value = data[index].value || data[index]
  1087. var formatVal = series.format ? series.format(value) : value;
  1088. context.fillText(formatVal, item.x - measureText(formatVal) / 2, item.y - 2);
  1089. context.closePath();
  1090. context.stroke();
  1091. }
  1092. });
  1093. }
  1094. function drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context) {
  1095. radius -= gaugeOption.width/2+config.gaugeLabelTextMargin;
  1096. let totalAngle=gaugeOption.startAngle-gaugeOption.endAngle+1;
  1097. let splitAngle=totalAngle/gaugeOption.splitLine.splitNumber;
  1098. let totalNumber=gaugeOption.endNumber-gaugeOption.startNumber;
  1099. let splitNumber=totalNumber/gaugeOption.splitLine.splitNumber;
  1100. let nowAngle=gaugeOption.startAngle;
  1101. let nowNumber=gaugeOption.startNumber;
  1102. for(let i=0;i<gaugeOption.splitLine.splitNumber+1;i++){
  1103. var pos = {
  1104. x: radius * Math.cos(nowAngle*Math.PI),
  1105. y: radius * Math.sin(nowAngle*Math.PI)
  1106. };
  1107. pos.x+=centerPosition.x-measureText(nowNumber)/2;
  1108. pos.y+=centerPosition.y;
  1109. var startX = pos.x;
  1110. var startY = pos.y;
  1111. context.beginPath();
  1112. context.setFontSize(config.fontSize);
  1113. context.setFillStyle(gaugeOption.labelColor || '#666666');
  1114. context.fillText(nowNumber, startX, startY + config.fontSize / 2);
  1115. context.closePath();
  1116. context.stroke();
  1117. nowAngle+=splitAngle;
  1118. if(nowAngle>=2){
  1119. nowAngle=nowAngle % 2;
  1120. }
  1121. nowNumber+=splitNumber;
  1122. }
  1123. }
  1124. function drawRadarLabel(angleList, radius, centerPosition, opts, config, context) {
  1125. var radarOption = opts.extra.radar || {};
  1126. radius += config.radarLabelTextMargin;
  1127. angleList.forEach(function (angle, index) {
  1128. var pos = {
  1129. x: radius * Math.cos(angle),
  1130. y: radius * Math.sin(angle)
  1131. };
  1132. var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition);
  1133. var startX = posRelativeCanvas.x;
  1134. var startY = posRelativeCanvas.y;
  1135. if (util.approximatelyEqual(pos.x, 0)) {
  1136. startX -= measureText(opts.categories[index] || '') / 2;
  1137. } else if (pos.x < 0) {
  1138. startX -= measureText(opts.categories[index] || '');
  1139. }
  1140. context.beginPath();
  1141. context.setFontSize(config.fontSize);
  1142. context.setFillStyle(radarOption.labelColor || '#666666');
  1143. context.fillText(opts.categories[index] || '', startX, startY + config.fontSize / 2);
  1144. context.closePath();
  1145. context.stroke();
  1146. });
  1147. }
  1148. function drawPieText(series, opts, config, context, radius, center) {
  1149. var lineRadius = radius + config.pieChartLinePadding;
  1150. var textObjectCollection = [];
  1151. var lastTextObject = null;
  1152. var seriesConvert = series.map(function (item) {
  1153. var arc = 2 * Math.PI - (item._start_ + 2 * Math.PI * item._proportion_ / 2);
  1154. var text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) + '%';
  1155. var color = item.color;
  1156. return { arc: arc, text: text, color: color };
  1157. });
  1158. seriesConvert.forEach(function (item) {
  1159. // line end
  1160. var orginX1 = Math.cos(item.arc) * lineRadius;
  1161. var orginY1 = Math.sin(item.arc) * lineRadius;
  1162. // line start
  1163. var orginX2 = Math.cos(item.arc) * radius;
  1164. var orginY2 = Math.sin(item.arc) * radius;
  1165. // text start
  1166. var orginX3 = orginX1 >= 0 ? orginX1 + config.pieChartTextPadding : orginX1 - config.pieChartTextPadding;
  1167. var orginY3 = orginY1;
  1168. var textWidth = measureText(item.text);
  1169. var startY = orginY3;
  1170. if (lastTextObject && util.isSameXCoordinateArea(lastTextObject.start, { x: orginX3 })) {
  1171. if (orginX3 > 0) {
  1172. startY = Math.min(orginY3, lastTextObject.start.y);
  1173. } else if (orginX1 < 0) {
  1174. startY = Math.max(orginY3, lastTextObject.start.y);
  1175. } else {
  1176. if (orginY3 > 0) {
  1177. startY = Math.max(orginY3, lastTextObject.start.y);
  1178. } else {
  1179. startY = Math.min(orginY3, lastTextObject.start.y);
  1180. }
  1181. }
  1182. }
  1183. if (orginX3 < 0) {
  1184. orginX3 -= textWidth;
  1185. }
  1186. var textObject = {
  1187. lineStart: {
  1188. x: orginX2,
  1189. y: orginY2
  1190. },
  1191. lineEnd: {
  1192. x: orginX1,
  1193. y: orginY1
  1194. },
  1195. start: {
  1196. x: orginX3,
  1197. y: startY
  1198. },
  1199. width: textWidth,
  1200. height: config.fontSize,
  1201. text: item.text,
  1202. color: item.color
  1203. };
  1204. lastTextObject = avoidCollision(textObject, lastTextObject);
  1205. textObjectCollection.push(lastTextObject);
  1206. });
  1207. textObjectCollection.forEach(function (item) {
  1208. var lineStartPoistion = convertCoordinateOrigin(item.lineStart.x, item.lineStart.y, center);
  1209. var lineEndPoistion = convertCoordinateOrigin(item.lineEnd.x, item.lineEnd.y, center);
  1210. var textPosition = convertCoordinateOrigin(item.start.x, item.start.y, center);
  1211. context.setLineWidth(1*opts.pixelRatio);
  1212. context.setFontSize(config.fontSize);
  1213. context.beginPath();
  1214. context.setStrokeStyle(item.color);
  1215. context.setFillStyle(item.color);
  1216. context.moveTo(lineStartPoistion.x, lineStartPoistion.y);
  1217. var curveStartX = item.start.x < 0 ? textPosition.x + item.width : textPosition.x;
  1218. var textStartX = item.start.x < 0 ? textPosition.x - 5 : textPosition.x + 5;
  1219. context.quadraticCurveTo(lineEndPoistion.x, lineEndPoistion.y, curveStartX, textPosition.y);
  1220. context.moveTo(lineStartPoistion.x, lineStartPoistion.y);
  1221. context.stroke();
  1222. context.closePath();
  1223. context.beginPath();
  1224. context.moveTo(textPosition.x + item.width, textPosition.y);
  1225. context.arc(curveStartX, textPosition.y, 2, 0, 2 * Math.PI);
  1226. context.closePath();
  1227. context.fill();
  1228. context.beginPath();
  1229. context.setFontSize(config.fontSize);
  1230. context.setFillStyle('#666666');
  1231. context.fillText(item.text, textStartX, textPosition.y + 3);
  1232. context.closePath();
  1233. context.stroke();
  1234. context.closePath();
  1235. });
  1236. }
  1237. function drawToolTipSplitLine(offsetX, opts, config, context) {
  1238. var toolTipOption = opts.extra.tooltip || {};
  1239. toolTipOption.gridType=toolTipOption.gridType==undefined? 'solid':toolTipOption.gridType;
  1240. toolTipOption.dashLength=toolTipOption.dashLength==undefined? 4:toolTipOption.dashLength;
  1241. var startY = config.padding;
  1242. var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
  1243. if(toolTipOption.gridType=='dash'){
  1244. context.setLineDash([toolTipOption.dashLength,toolTipOption.dashLength]);
  1245. }
  1246. context.beginPath();
  1247. context.setStrokeStyle(toolTipOption.gridColor || '#cccccc');
  1248. context.setLineWidth(1*opts.pixelRatio);
  1249. context.moveTo(offsetX, startY);
  1250. context.lineTo(offsetX, endY);
  1251. context.closePath();
  1252. context.stroke();
  1253. context.setLineDash([]);
  1254. if(toolTipOption.xAxisLabel){
  1255. let lableText = opts.categories[opts.tooltip.index];
  1256. context.setFontSize(config.fontSize);
  1257. let textWidth = context.measureText(lableText).width;
  1258. let textX = offsetX - config.toolTipPadding - 0.5 * textWidth ;
  1259. let textY = endY;
  1260. context.beginPath();
  1261. context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity));
  1262. context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
  1263. context.setLineWidth(1*opts.pixelRatio);
  1264. context.rect(textX, textY, textWidth + 2 * config.toolTipPadding , config.fontSize + 2 * config.toolTipPadding);
  1265. context.closePath();
  1266. context.stroke();
  1267. context.fill();
  1268. context.beginPath();
  1269. context.setFontSize(config.fontSize);
  1270. context.setFillStyle(toolTipOption.labelFontColor || config.fontColor);
  1271. context.fillText(lableText, textX+2*config.toolTipPadding, textY+config.toolTipPadding+config.fontSize);
  1272. context.closePath();
  1273. context.stroke();
  1274. }
  1275. }
  1276. function drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints) {
  1277. var toolTipOption = opts.extra.tooltip || {};
  1278. toolTipOption.gridType=toolTipOption.gridType==undefined? 'solid':toolTipOption.gridType;
  1279. toolTipOption.dashLength=toolTipOption.dashLength==undefined? 4:toolTipOption.dashLength;
  1280. var startX = config.padding + config.yAxisWidth + config.yAxisTitleWidth;
  1281. var endX = opts.width-config.padding;
  1282. if(toolTipOption.gridType=='dash'){
  1283. context.setLineDash([toolTipOption.dashLength,toolTipOption.dashLength]);
  1284. }
  1285. context.beginPath();
  1286. context.setStrokeStyle(toolTipOption.gridColor || '#cccccc');
  1287. context.setLineWidth(1*opts.pixelRatio);
  1288. context.moveTo(startX, opts.tooltip.offset.y);
  1289. context.lineTo(endX, opts.tooltip.offset.y);
  1290. context.closePath();
  1291. context.stroke();
  1292. context.setLineDash([]);
  1293. if(toolTipOption.yAxisLabel){
  1294. let lableText = calTooltipYAxisData(opts.tooltip.offset.y,opts.series, opts, config,eachSpacing);
  1295. context.setFontSize(config.fontSize);
  1296. let textWidth = context.measureText(lableText).width;
  1297. let textX = startX - 2*config.toolTipPadding - textWidth ;
  1298. let textY = opts.tooltip.offset.y;
  1299. context.beginPath();
  1300. context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity));
  1301. context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
  1302. context.setLineWidth(1*opts.pixelRatio);
  1303. context.rect(textX, textY-0.5*config.fontSize-config.toolTipPadding, textWidth + 2 * config.toolTipPadding , config.fontSize + 2 * config.toolTipPadding);
  1304. context.closePath();
  1305. context.stroke();
  1306. context.fill();
  1307. context.beginPath();
  1308. context.setFontSize(config.fontSize);
  1309. context.setFillStyle(toolTipOption.labelFontColor || config.fontColor);
  1310. context.fillText(lableText, textX+config.toolTipPadding, textY+0.5*config.fontSize);
  1311. context.closePath();
  1312. context.stroke();
  1313. }
  1314. }
  1315. function drawToolTipSplitArea(offsetX, opts, config, context, eachSpacing) {
  1316. var startY = config.padding;
  1317. var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
  1318. context.beginPath();
  1319. context.setFillStyle(hexToRgb('#000000', 0.08));
  1320. context.rect(offsetX-eachSpacing/2, startY, eachSpacing, endY-startY);
  1321. context.closePath();
  1322. context.fill();
  1323. }
  1324. function drawToolTip(textList, offset, opts, config, context, eachSpacing, xAxisPoints) {
  1325. var toolTipOption = opts.extra.tooltip || {};
  1326. var legendWidth = 4*opts.pixelRatio;
  1327. var legendMarginRight = 5*opts.pixelRatio;
  1328. var arrowWidth = 8*opts.pixelRatio;
  1329. var isOverRightBorder = false;
  1330. if(opts.type=='line' || opts.type=='area' ||opts.type=='candle' || opts.type=='mix'){
  1331. drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context);
  1332. }
  1333. offset = assign({
  1334. x: 0,
  1335. y: 0
  1336. }, offset);
  1337. offset.y -= 8*opts.pixelRatio;
  1338. var textWidth = textList.map(function (item) {
  1339. return measureText(item.text);
  1340. });
  1341. var toolTipWidth = legendWidth + legendMarginRight + 4 * config.toolTipPadding + Math.max.apply(null, textWidth);
  1342. var toolTipHeight = 2 * config.toolTipPadding + textList.length * config.toolTipLineHeight;
  1343. // if beyond the right border
  1344. if (offset.x - Math.abs(opts._scrollDistance_) + arrowWidth + toolTipWidth > opts.width) {
  1345. isOverRightBorder = true;
  1346. }
  1347. // draw background rect
  1348. context.beginPath();
  1349. context.setFillStyle(hexToRgb(opts.tooltip.option.background || config.toolTipBackground, config.toolTipOpacity));
  1350. if (isOverRightBorder) {
  1351. context.moveTo(offset.x, offset.y + 10*opts.pixelRatio);
  1352. context.lineTo(offset.x - arrowWidth, offset.y + 10*opts.pixelRatio - 5*opts.pixelRatio);
  1353. context.lineTo(offset.x - arrowWidth, offset.y);
  1354. context.lineTo(offset.x - arrowWidth - Math.round(toolTipWidth), offset.y);
  1355. context.lineTo(offset.x - arrowWidth - Math.round(toolTipWidth), offset.y+toolTipHeight);
  1356. context.lineTo(offset.x - arrowWidth, offset.y+toolTipHeight);
  1357. context.lineTo(offset.x - arrowWidth, offset.y + 10*opts.pixelRatio + 5*opts.pixelRatio);
  1358. context.lineTo(offset.x, offset.y + 10*opts.pixelRatio);
  1359. } else {
  1360. context.moveTo(offset.x, offset.y + 10*opts.pixelRatio);
  1361. context.lineTo(offset.x + arrowWidth, offset.y + 10*opts.pixelRatio - 5*opts.pixelRatio);
  1362. context.lineTo(offset.x + arrowWidth, offset.y);
  1363. context.lineTo(offset.x + arrowWidth + Math.round(toolTipWidth), offset.y);
  1364. context.lineTo(offset.x + arrowWidth + Math.round(toolTipWidth), offset.y+toolTipHeight);
  1365. context.lineTo(offset.x + arrowWidth, offset.y+toolTipHeight);
  1366. context.lineTo(offset.x + arrowWidth, offset.y + 10*opts.pixelRatio + 5*opts.pixelRatio);
  1367. context.lineTo(offset.x, offset.y + 10*opts.pixelRatio);
  1368. }
  1369. context.closePath();
  1370. context.fill();
  1371. // draw legend
  1372. textList.forEach(function (item, index) {
  1373. if(item.color !== null){
  1374. context.beginPath();
  1375. context.setFillStyle(item.color);
  1376. var startX = offset.x + arrowWidth + 2 * config.toolTipPadding;
  1377. var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding + 1;
  1378. if (isOverRightBorder) {
  1379. startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding;
  1380. }
  1381. context.fillRect(startX, startY, legendWidth, config.fontSize);
  1382. context.closePath();
  1383. }
  1384. });
  1385. // draw text list
  1386. textList.forEach(function (item, index) {
  1387. var startX = offset.x + arrowWidth + 2 * config.toolTipPadding + legendWidth + legendMarginRight;
  1388. if (isOverRightBorder) {
  1389. startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding + +legendWidth + legendMarginRight;
  1390. }
  1391. var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding;
  1392. context.beginPath();
  1393. context.setFontSize(config.fontSize);
  1394. context.setFillStyle('#ffffff');
  1395. context.fillText(item.text, startX, startY + config.fontSize);
  1396. context.closePath();
  1397. context.stroke();
  1398. });
  1399. }
  1400. function drawYAxisTitle(title, opts, config, context) {
  1401. var startX = config.xAxisHeight + (opts.height - config.xAxisHeight - measureText(title)) / 2;
  1402. context.save();
  1403. context.beginPath();
  1404. context.setFontSize(config.fontSize);
  1405. context.setFillStyle(opts.yAxis.titleFontColor || '#333333');
  1406. context.translate(0, opts.height);
  1407. context.rotate(-90 * Math.PI / 180);
  1408. context.fillText(title, startX, config.padding + 0.5 * config.fontSize);
  1409. context.closePath();
  1410. context.stroke();
  1411. context.restore();
  1412. }
  1413. function drawColumnDataPoints(series, opts, config, context) {
  1414. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  1415. var columnOption = opts.extra.column || {type:{},meter:{}};
  1416. columnOption.type=columnOption.type==undefined? 'group':columnOption.type;
  1417. columnOption.meter=columnOption.meter||{}
  1418. columnOption.meter.border=columnOption.meter.border==undefined? 4:columnOption.meter.border;
  1419. columnOption.meter.fillColor=columnOption.meter.fillColor==undefined? '#FFFFFF':columnOption.meter.fillColor;
  1420. var _calYAxisData = calYAxisData(series, opts, config),
  1421. ranges = _calYAxisData.ranges;
  1422. var _getXAxisPoints = getXAxisPoints(opts.categories, opts, config),
  1423. xAxisPoints = _getXAxisPoints.xAxisPoints,
  1424. eachSpacing = _getXAxisPoints.eachSpacing;
  1425. var minRange = ranges.pop();
  1426. var maxRange = ranges.shift();
  1427. var calPoints = [];
  1428. context.save();
  1429. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  1430. context.translate(opts._scrollDistance_, 0);
  1431. }
  1432. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  1433. drawToolTipSplitArea(opts.tooltip.offset.x, opts, config, context, eachSpacing);
  1434. }
  1435. series.forEach(function (eachSeries, seriesIndex) {
  1436. var data = eachSeries.data;
  1437. switch (columnOption.type){
  1438. case 'group':
  1439. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1440. var tooltipPoints = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series,process);
  1441. calPoints.push(tooltipPoints);
  1442. points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
  1443. points.forEach(function (item, index) {
  1444. if (item !== null) {
  1445. context.beginPath();
  1446. context.setFillStyle(item.color || eachSeries.color);
  1447. var startX = item.x - item.width / 2 + 1;
  1448. var height = opts.height - item.y - config.padding - config.xAxisHeight - config.legendHeight;
  1449. context.moveTo(startX, item.y);
  1450. context.fillRect(startX, item.y, item.width - 2, height);
  1451. context.closePath();
  1452. context.fill();
  1453. }
  1454. });
  1455. break;
  1456. case 'stack':
  1457. // 绘制堆叠数据图
  1458. var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series,process);
  1459. calPoints.push(points);
  1460. points = fixColumeStackData(points, eachSpacing, series.length, seriesIndex, config, opts,series);
  1461. points.forEach(function (item, index) {
  1462. if (item !== null) {
  1463. context.beginPath();
  1464. context.setFillStyle(item.color || eachSeries.color);
  1465. var startX = item.x - item.width / 2 + 1;
  1466. var height = opts.height - item.y - config.padding - config.xAxisHeight - config.legendHeight;
  1467. var height0 = opts.height - item.y0 - config.padding - config.xAxisHeight - config.legendHeight;
  1468. if(seriesIndex>0){
  1469. height -= height0;
  1470. }
  1471. context.moveTo(startX, item.y);
  1472. context.fillRect(startX, item.y, item.width - 2, height);
  1473. context.closePath();
  1474. context.fill();
  1475. }
  1476. });
  1477. break;
  1478. case 'meter':
  1479. // 绘制温度计数据图
  1480. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1481. calPoints.push(points);
  1482. points = fixColumeMeterData(points, eachSpacing, series.length, seriesIndex, config, opts, columnOption.meter.border);
  1483. if(seriesIndex==0){
  1484. points.forEach(function (item, index) {
  1485. if (item !== null) {
  1486. //画背景颜色
  1487. context.beginPath();
  1488. context.setFillStyle(columnOption.meter.fillColor);
  1489. var startX = item.x - item.width / 2 + 1;
  1490. var height = opts.height - item.y - config.padding - config.xAxisHeight - config.legendHeight;
  1491. context.moveTo(startX, item.y);
  1492. context.fillRect(startX, item.y, item.width - 2, height);
  1493. context.closePath();
  1494. context.fill();
  1495. //画边框线
  1496. context.beginPath();
  1497. context.setStrokeStyle(eachSeries.color);
  1498. context.setLineWidth(columnOption.meter.border*opts.pixelRatio);
  1499. context.moveTo(startX+columnOption.meter.border*0.5, item.y+height);
  1500. context.lineTo(startX+columnOption.meter.border*0.5, item.y+columnOption.meter.border*0.5);
  1501. context.lineTo(startX+item.width-columnOption.meter.border, item.y+columnOption.meter.border*0.5);
  1502. context.lineTo(startX+item.width-columnOption.meter.border, item.y+height);
  1503. context.stroke();
  1504. }
  1505. });
  1506. }else{
  1507. points.forEach(function (item, index) {
  1508. if (item !== null) {
  1509. context.beginPath();
  1510. context.setFillStyle(item.color || eachSeries.color);
  1511. var startX = item.x - item.width / 2 + 1;
  1512. var height = opts.height - item.y - config.padding - config.xAxisHeight - config.legendHeight;
  1513. context.moveTo(startX, item.y);
  1514. context.rect(startX, item.y, item.width - 2, height);
  1515. context.closePath();
  1516. context.fill();
  1517. }
  1518. });
  1519. }
  1520. break;
  1521. }
  1522. });
  1523. if (opts.dataLabel !== false && process === 1) {
  1524. series.forEach(function (eachSeries, seriesIndex) {
  1525. var data = eachSeries.data;
  1526. switch (columnOption.type){
  1527. case 'group':
  1528. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1529. points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
  1530. drawPointText(points, eachSeries, config, context);
  1531. break;
  1532. case 'stack':
  1533. var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series,process);
  1534. drawPointText(points, eachSeries, config, context);
  1535. break;
  1536. case 'meter':
  1537. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1538. drawPointText(points, eachSeries, config, context);
  1539. break;
  1540. }
  1541. });
  1542. }
  1543. context.restore();
  1544. return {
  1545. xAxisPoints: xAxisPoints,
  1546. calPoints: calPoints,
  1547. eachSpacing: eachSpacing
  1548. };
  1549. }
  1550. function drawCandleDataPoints(series, opts, config, context) {
  1551. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  1552. var candleOption = opts.extra.candle || {color:{},average:{}};
  1553. candleOption.color.upLine=candleOption.color.upLine? candleOption.color.upLine: '#f04864';
  1554. candleOption.color.upFill=candleOption.color.upFill? candleOption.color.upFill: '#f04864';
  1555. candleOption.color.downLine=candleOption.color.downLine? candleOption.color.downLine: '#2fc25b';
  1556. candleOption.color.downFill=candleOption.color.downFill? candleOption.color.downFill: '#2fc25b';
  1557. candleOption.average.show = candleOption.average.show===true? true : false;
  1558. candleOption.average.name = candleOption.average.name? candleOption.average.name : [];
  1559. candleOption.average.day = candleOption.average.day? candleOption.average.day : [];
  1560. candleOption.average.color = candleOption.average.color? candleOption.average.color : ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d'];
  1561. opts.extra.candle=candleOption;
  1562. var _calYAxisData5 = calYAxisData(series, opts, config),
  1563. ranges = _calYAxisData5.ranges;
  1564. var _getXAxisPoints5 = getXAxisPoints(opts.categories, opts, config),
  1565. xAxisPoints = _getXAxisPoints5.xAxisPoints,
  1566. eachSpacing = _getXAxisPoints5.eachSpacing;
  1567. var minRange = ranges.pop();
  1568. var maxRange = ranges.shift();
  1569. var calPoints = [];
  1570. context.save();
  1571. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  1572. context.translate(opts._scrollDistance_, 0);
  1573. }
  1574. series.forEach(function (eachSeries, seriesIndex) {
  1575. var data = eachSeries.data;
  1576. var points = getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1577. calPoints.push(points);
  1578. var splitPointList = splitPoints(points);
  1579. splitPointList=splitPointList[0];
  1580. splitPointList.forEach(function (points, index) {
  1581. context.beginPath();
  1582. //如果上涨
  1583. if(data[index][1]-data[index][0]>0){
  1584. context.setStrokeStyle(candleOption.color.upLine);
  1585. context.setFillStyle(candleOption.color.upFill);
  1586. context.setLineWidth(1*opts.pixelRatio);
  1587. context.moveTo(points[3].x, points[3].y);//顶点
  1588. context.lineTo(points[1].x, points[1].y);//收盘中间点
  1589. context.lineTo(points[1].x-eachSpacing/4, points[1].y);//收盘左侧点
  1590. context.lineTo(points[0].x-eachSpacing/4, points[0].y);//开盘左侧点
  1591. context.lineTo(points[0].x, points[0].y);//开盘中间点
  1592. context.lineTo(points[2].x, points[2].y);//底点
  1593. context.lineTo(points[0].x, points[0].y);//开盘中间点
  1594. context.lineTo(points[0].x+eachSpacing/4, points[0].y);//开盘右侧点
  1595. context.lineTo(points[1].x+eachSpacing/4, points[1].y);//收盘右侧点
  1596. context.lineTo(points[1].x, points[1].y);//收盘中间点
  1597. context.moveTo(points[3].x, points[3].y);//顶点
  1598. }else{
  1599. context.setStrokeStyle(candleOption.color.downLine);
  1600. context.setFillStyle(candleOption.color.downFill);
  1601. context.setLineWidth(1*opts.pixelRatio);
  1602. context.moveTo(points[3].x, points[3].y);//顶点
  1603. context.lineTo(points[0].x, points[0].y);//开盘中间点
  1604. context.lineTo(points[0].x-eachSpacing/4, points[0].y);//开盘左侧点
  1605. context.lineTo(points[1].x-eachSpacing/4, points[1].y);//收盘左侧点
  1606. context.lineTo(points[1].x, points[1].y);//收盘中间点
  1607. context.lineTo(points[2].x, points[2].y);//底点
  1608. context.lineTo(points[1].x, points[1].y);//收盘中间点
  1609. context.lineTo(points[1].x+eachSpacing/4, points[1].y);//收盘右侧点
  1610. context.lineTo(points[0].x+eachSpacing/4, points[0].y);//开盘右侧点
  1611. context.lineTo(points[0].x, points[0].y);//开盘中间点
  1612. context.moveTo(points[3].x, points[3].y);//顶点
  1613. }
  1614. context.closePath();
  1615. context.fill();
  1616. context.stroke();
  1617. });
  1618. });
  1619. context.restore();
  1620. //画均线
  1621. if(candleOption.average.show){
  1622. }
  1623. return {
  1624. xAxisPoints: xAxisPoints,
  1625. calPoints: calPoints,
  1626. eachSpacing: eachSpacing
  1627. };
  1628. }
  1629. function drawAreaDataPoints(series, opts, config, context) {
  1630. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  1631. var _calYAxisData2 = calYAxisData(series, opts, config),
  1632. ranges = _calYAxisData2.ranges;
  1633. var _getXAxisPoints2 = getXAxisPoints(opts.categories, opts, config),
  1634. xAxisPoints = _getXAxisPoints2.xAxisPoints,
  1635. eachSpacing = _getXAxisPoints2.eachSpacing;
  1636. var minRange = ranges.pop();
  1637. var maxRange = ranges.shift();
  1638. var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
  1639. var calPoints = [];
  1640. context.save();
  1641. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  1642. context.translate(opts._scrollDistance_, 0);
  1643. }
  1644. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  1645. drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context);
  1646. }
  1647. series.forEach(function (eachSeries, seriesIndex) {
  1648. var data = eachSeries.data;
  1649. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1650. calPoints.push(points);
  1651. var splitPointList = splitPoints(points);
  1652. splitPointList.forEach(function (points) {
  1653. // 绘制区域数据
  1654. context.beginPath();
  1655. context.setStrokeStyle(eachSeries.color);
  1656. context.setFillStyle(eachSeries.color);
  1657. context.setGlobalAlpha(0.2);
  1658. context.setLineWidth(2*opts.pixelRatio);
  1659. if (points.length > 1) {
  1660. var firstPoint = points[0];
  1661. var lastPoint = points[points.length - 1];
  1662. context.moveTo(firstPoint.x, firstPoint.y);
  1663. if (opts.extra.lineStyle === 'curve') {
  1664. points.forEach(function (item, index) {
  1665. if (index > 0) {
  1666. var ctrlPoint = createCurveControlPoints(points, index - 1);
  1667. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
  1668. }
  1669. });
  1670. } else {
  1671. points.forEach(function (item, index) {
  1672. if (index > 0) {
  1673. context.lineTo(item.x, item.y);
  1674. }
  1675. });
  1676. }
  1677. context.lineTo(lastPoint.x, endY);
  1678. context.lineTo(firstPoint.x, endY);
  1679. context.lineTo(firstPoint.x, firstPoint.y);
  1680. } else {
  1681. var item = points[0];
  1682. context.moveTo(item.x - eachSpacing / 2, item.y);
  1683. context.lineTo(item.x + eachSpacing / 2, item.y);
  1684. context.lineTo(item.x + eachSpacing / 2, endY);
  1685. context.lineTo(item.x - eachSpacing / 2, endY);
  1686. context.moveTo(item.x - eachSpacing / 2, item.y);
  1687. }
  1688. context.closePath();
  1689. context.fill();
  1690. context.setGlobalAlpha(1);
  1691. //画连线
  1692. context.beginPath();
  1693. context.setStrokeStyle(eachSeries.color);
  1694. context.setLineWidth(2*opts.pixelRatio);
  1695. if (points.length === 1) {
  1696. context.moveTo(points[0].x, points[0].y);
  1697. context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  1698. } else {
  1699. context.moveTo(points[0].x, points[0].y);
  1700. if (opts.extra.lineStyle === 'curve') {
  1701. points.forEach(function (item, index) {
  1702. if (index > 0) {
  1703. var ctrlPoint = createCurveControlPoints(points, index - 1);
  1704. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
  1705. }
  1706. });
  1707. } else {
  1708. points.forEach(function (item, index) {
  1709. if (index > 0) {
  1710. context.lineTo(item.x, item.y);
  1711. }
  1712. });
  1713. }
  1714. context.moveTo(points[0].x, points[0].y);
  1715. }
  1716. context.closePath();
  1717. context.stroke();
  1718. });
  1719. //画点
  1720. if (opts.dataPointShape !== false) {
  1721. var shape = config.dataPointShape[seriesIndex % config.dataPointShape.length];
  1722. drawPointShape(points, eachSeries.color, shape, context,opts);
  1723. }
  1724. });
  1725. if (opts.dataLabel !== false && process === 1) {
  1726. series.forEach(function (eachSeries, seriesIndex) {
  1727. var data = eachSeries.data;
  1728. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1729. drawPointText(points, eachSeries, config, context);
  1730. });
  1731. }
  1732. context.restore();
  1733. return {
  1734. xAxisPoints: xAxisPoints,
  1735. calPoints: calPoints,
  1736. eachSpacing: eachSpacing
  1737. };
  1738. }
  1739. function drawLineDataPoints(series, opts, config, context) {
  1740. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  1741. var _calYAxisData3 = calYAxisData(series, opts, config),
  1742. ranges = _calYAxisData3.ranges;
  1743. var _getXAxisPoints3 = getXAxisPoints(opts.categories, opts, config),
  1744. xAxisPoints = _getXAxisPoints3.xAxisPoints,
  1745. eachSpacing = _getXAxisPoints3.eachSpacing;
  1746. var minRange = ranges.pop();
  1747. var maxRange = ranges.shift();
  1748. var calPoints = [];
  1749. context.save();
  1750. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  1751. context.translate(opts._scrollDistance_, 0);
  1752. }
  1753. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  1754. drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context);
  1755. }
  1756. series.forEach(function (eachSeries, seriesIndex) {
  1757. var data = eachSeries.data;
  1758. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1759. calPoints.push(points);
  1760. var splitPointList = splitPoints(points);
  1761. splitPointList.forEach(function (points, index) {
  1762. context.beginPath();
  1763. context.setStrokeStyle(eachSeries.color);
  1764. context.setLineWidth(2*opts.pixelRatio);
  1765. if (points.length === 1) {
  1766. context.moveTo(points[0].x, points[0].y);
  1767. context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  1768. } else {
  1769. context.moveTo(points[0].x, points[0].y);
  1770. if (opts.extra.lineStyle === 'curve') {
  1771. points.forEach(function (item, index) {
  1772. if (index > 0) {
  1773. var ctrlPoint = createCurveControlPoints(points, index - 1);
  1774. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
  1775. }
  1776. });
  1777. } else {
  1778. points.forEach(function (item, index) {
  1779. if (index > 0) {
  1780. context.lineTo(item.x, item.y);
  1781. }
  1782. });
  1783. }
  1784. context.moveTo(points[0].x, points[0].y);
  1785. }
  1786. context.closePath();
  1787. context.stroke();
  1788. });
  1789. if (opts.dataPointShape !== false) {
  1790. var shape = config.dataPointShape[seriesIndex % config.dataPointShape.length];
  1791. drawPointShape(points, eachSeries.color, shape, context,opts);
  1792. }
  1793. });
  1794. if (opts.dataLabel !== false && process === 1) {
  1795. series.forEach(function (eachSeries, seriesIndex) {
  1796. var data = eachSeries.data;
  1797. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1798. drawPointText(points, eachSeries, config, context);
  1799. });
  1800. }
  1801. context.restore();
  1802. return {
  1803. xAxisPoints: xAxisPoints,
  1804. calPoints: calPoints,
  1805. eachSpacing: eachSpacing
  1806. };
  1807. }
  1808. function drawMixDataPoints(series, opts, config, context) {
  1809. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  1810. var _calYAxisData6 = calYAxisData(series, opts, config),
  1811. ranges = _calYAxisData6.ranges;
  1812. var _getXAxisPoints6 = getXAxisPoints(opts.categories, opts, config),
  1813. xAxisPoints = _getXAxisPoints6.xAxisPoints,
  1814. eachSpacing = _getXAxisPoints6.eachSpacing;
  1815. var minRange = ranges.pop();
  1816. var maxRange = ranges.shift();
  1817. var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
  1818. var calPoints = [];
  1819. var columnIndex=0;
  1820. var columnLength=0;
  1821. series.forEach(function (eachSeries, seriesIndex) {
  1822. if(eachSeries.type=='column'){
  1823. columnLength+=1;
  1824. }
  1825. });
  1826. context.save();
  1827. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  1828. context.translate(opts._scrollDistance_, 0);
  1829. }
  1830. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  1831. drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context);
  1832. }
  1833. series.forEach(function (eachSeries, seriesIndex) {
  1834. var data = eachSeries.data;
  1835. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1836. calPoints.push(points);
  1837. // 绘制柱状数据图
  1838. if(eachSeries.type=='column'){
  1839. points = fixColumeData(points, eachSpacing, columnLength , columnIndex, config, opts);
  1840. points.forEach(function (item, index) {
  1841. if (item !== null) {
  1842. context.beginPath();
  1843. context.setFillStyle(item.color || eachSeries.color);
  1844. var startX = item.x - item.width / 2 + 1;
  1845. var height = opts.height - item.y - config.padding - config.xAxisHeight - config.legendHeight;
  1846. context.moveTo(startX, item.y);
  1847. context.rect(startX, item.y, item.width - 2, height);
  1848. context.closePath();
  1849. context.fill();
  1850. }
  1851. });
  1852. columnIndex+=1;
  1853. }
  1854. //绘制区域图数据
  1855. if(eachSeries.type=='area'){
  1856. var splitPointList = splitPoints(points);
  1857. splitPointList.forEach(function (points) {
  1858. // 绘制区域数据
  1859. context.beginPath();
  1860. context.setStrokeStyle(eachSeries.color);
  1861. context.setFillStyle(eachSeries.color);
  1862. context.setGlobalAlpha(0.2);
  1863. context.setLineWidth(2*opts.pixelRatio);
  1864. if (points.length > 1) {
  1865. var firstPoint = points[0];
  1866. var lastPoint = points[points.length - 1];
  1867. context.moveTo(firstPoint.x, firstPoint.y);
  1868. if (eachSeries.style === 'curve') {
  1869. points.forEach(function (item, index) {
  1870. if (index > 0) {
  1871. var ctrlPoint = createCurveControlPoints(points, index - 1);
  1872. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
  1873. }
  1874. });
  1875. } else {
  1876. points.forEach(function (item, index) {
  1877. if (index > 0) {
  1878. context.lineTo(item.x, item.y);
  1879. }
  1880. });
  1881. }
  1882. context.lineTo(lastPoint.x, endY);
  1883. context.lineTo(firstPoint.x, endY);
  1884. context.lineTo(firstPoint.x, firstPoint.y);
  1885. } else {
  1886. var item = points[0];
  1887. context.moveTo(item.x - eachSpacing / 2, item.y);
  1888. context.lineTo(item.x + eachSpacing / 2, item.y);
  1889. context.lineTo(item.x + eachSpacing / 2, endY);
  1890. context.lineTo(item.x - eachSpacing / 2, endY);
  1891. context.moveTo(item.x - eachSpacing / 2, item.y);
  1892. }
  1893. context.closePath();
  1894. context.fill();
  1895. context.setGlobalAlpha(1);
  1896. });
  1897. }
  1898. // 绘制折线数据图
  1899. if(eachSeries.type=='line'){
  1900. var splitPointList = splitPoints(points);
  1901. splitPointList.forEach(function (points, index) {
  1902. context.beginPath();
  1903. context.setStrokeStyle(eachSeries.color);
  1904. context.setLineWidth(2*opts.pixelRatio);
  1905. if (points.length === 1) {
  1906. context.moveTo(points[0].x, points[0].y);
  1907. context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  1908. } else {
  1909. context.moveTo(points[0].x, points[0].y);
  1910. if (eachSeries.style=='curve') {
  1911. points.forEach(function (item, index) {
  1912. if (index > 0) {
  1913. var ctrlPoint = createCurveControlPoints(points, index - 1);
  1914. context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y);
  1915. }
  1916. });
  1917. } else {
  1918. points.forEach(function (item, index) {
  1919. if (index > 0) {
  1920. context.lineTo(item.x, item.y);
  1921. }
  1922. });
  1923. }
  1924. context.moveTo(points[0].x, points[0].y);
  1925. }
  1926. context.closePath();
  1927. context.stroke();
  1928. });
  1929. }
  1930. // 绘制点数据图
  1931. if(eachSeries.type=='point'){
  1932. var splitPointList = splitPoints(points);
  1933. splitPointList.forEach(function (points, index) {
  1934. context.beginPath();
  1935. context.setStrokeStyle(eachSeries.color);
  1936. context.setLineWidth(2*opts.pixelRatio);
  1937. context.moveTo(points[0].x, points[0].y);
  1938. context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI);
  1939. context.closePath();
  1940. context.stroke();
  1941. });
  1942. }
  1943. if (opts.dataPointShape !== false && eachSeries.type!=='column') {
  1944. var shape = config.dataPointShape[seriesIndex % config.dataPointShape.length];
  1945. drawPointShape(points, eachSeries.color, shape, context,opts);
  1946. }
  1947. });
  1948. if (opts.dataLabel !== false && process === 1) {
  1949. var columnIndex=0;
  1950. series.forEach(function (eachSeries, seriesIndex) {
  1951. var data = eachSeries.data;
  1952. var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
  1953. if(eachSeries.type!=='column'){
  1954. drawPointText(points, eachSeries, config, context);
  1955. }else{
  1956. points = fixColumeData(points, eachSpacing, columnLength, columnIndex, config, opts);
  1957. drawPointText(points, eachSeries, config, context);
  1958. columnIndex+=1;
  1959. }
  1960. });
  1961. }
  1962. context.restore();
  1963. return {
  1964. xAxisPoints: xAxisPoints,
  1965. calPoints: calPoints,
  1966. eachSpacing: eachSpacing
  1967. };
  1968. }
  1969. function drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints) {
  1970. var toolTipOption = opts.extra.tooltip || {};
  1971. if(toolTipOption.horizentalLine && opts.tooltip && process === 1 && (opts.type=='line' || opts.type=='area' || opts.type=='column' || opts.type=='candle' || opts.type=='mix')){
  1972. drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints)
  1973. }
  1974. context.save();
  1975. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) {
  1976. context.translate(opts._scrollDistance_, 0);
  1977. }
  1978. if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
  1979. drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context, eachSpacing, xAxisPoints);
  1980. }
  1981. context.restore();
  1982. }
  1983. function drawXAxis(categories, opts, config, context) {
  1984. var _getXAxisPoints4 = getXAxisPoints(categories, opts, config),
  1985. xAxisPoints = _getXAxisPoints4.xAxisPoints,
  1986. startX = _getXAxisPoints4.startX,
  1987. endX = _getXAxisPoints4.endX,
  1988. eachSpacing = _getXAxisPoints4.eachSpacing;
  1989. var startY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
  1990. var endY = config.padding;
  1991. //绘制滚动条
  1992. if(opts.enableScroll && opts.xAxis.scrollShow){
  1993. var scrollY=opts.height - config.padding - config.legendHeight + 4*opts.pixelRatio;
  1994. var scrollScreenWidth=endX-startX;
  1995. var scrollTotalWidth=eachSpacing*(xAxisPoints.length-1);
  1996. var scrollWidth=scrollScreenWidth*scrollScreenWidth/scrollTotalWidth;
  1997. var scrollLeft=0;
  1998. if (opts._scrollDistance_){
  1999. scrollLeft=-opts._scrollDistance_*(scrollScreenWidth)/scrollTotalWidth;
  2000. }
  2001. context.beginPath();
  2002. context.setLineCap('round');
  2003. context.setLineWidth(6*opts.pixelRatio);
  2004. context.setStrokeStyle(opts.xAxis.scrollBackgroundColor || "#EFEBEF");
  2005. context.moveTo(startX, scrollY);
  2006. context.lineTo(endX, scrollY);
  2007. context.stroke();
  2008. context.closePath();
  2009. context.beginPath();
  2010. context.setLineCap('round');
  2011. context.setLineWidth(6*opts.pixelRatio);
  2012. context.setStrokeStyle(opts.xAxis.scrollColor ||"#A6A6A6");
  2013. context.moveTo(startX+scrollLeft, scrollY);
  2014. context.lineTo(startX+scrollLeft+scrollWidth, scrollY);
  2015. context.stroke();
  2016. context.closePath();
  2017. }
  2018. context.save();
  2019. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
  2020. context.translate(opts._scrollDistance_, 0);
  2021. }
  2022. context.beginPath();
  2023. context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc");
  2024. context.setLineCap('butt');
  2025. context.setLineWidth(1*opts.pixelRatio);
  2026. if(opts.xAxis.gridType=='dash'){
  2027. context.setLineDash([opts.xAxis.dashLength,opts.xAxis.dashLength]);
  2028. }
  2029. if (opts.xAxis.disableGrid !== true) {
  2030. if (opts.xAxis.type === 'calibration') {
  2031. xAxisPoints.forEach(function (item, index) {
  2032. if (index > 0) {
  2033. context.moveTo(item - eachSpacing / 2, startY);
  2034. context.lineTo(item - eachSpacing / 2, startY + 4*opts.pixelRatio);
  2035. }
  2036. });
  2037. } else {
  2038. xAxisPoints.forEach(function (item, index) {
  2039. context.moveTo(item, startY);
  2040. context.lineTo(item, endY);
  2041. });
  2042. }
  2043. }
  2044. context.closePath();
  2045. context.stroke();
  2046. context.setLineDash([]);
  2047. //不绘制X轴
  2048. if (opts.xAxis.disabled !== true) {
  2049. // 对X轴列表做抽稀处理
  2050. var validWidth = opts.width - 2 * config.padding - config.yAxisWidth - config.yAxisTitleWidth;
  2051. var maxXAxisListLength = Math.min(categories.length, Math.ceil(validWidth / config.fontSize / 1.5));
  2052. var ratio = Math.ceil(categories.length / maxXAxisListLength);
  2053. categories = categories.map(function (item, index) {
  2054. return index % ratio !== 0 ? '' : item;
  2055. });
  2056. if (config._xAxisTextAngle_ === 0) {
  2057. categories.forEach(function (item, index) {
  2058. var offset = eachSpacing / 2 - measureText(item) / 2;
  2059. context.beginPath();
  2060. context.setFontSize(config.fontSize);
  2061. context.setFillStyle(opts.xAxis.fontColor || '#666666');
  2062. context.fillText(item, xAxisPoints[index] + offset, startY + config.fontSize + 5);
  2063. context.closePath();
  2064. context.stroke();
  2065. });
  2066. } else {
  2067. categories.forEach(function (item, index) {
  2068. context.save();
  2069. context.beginPath();
  2070. context.setFontSize(config.fontSize);
  2071. context.setFillStyle(opts.xAxis.fontColor || '#666666');
  2072. var textWidth = measureText(item);
  2073. var offset = eachSpacing / 2 - textWidth;
  2074. var _calRotateTranslate = calRotateTranslate(xAxisPoints[index] + eachSpacing / 2, startY + config.fontSize / 2 + 5, opts.height),
  2075. transX = _calRotateTranslate.transX,
  2076. transY = _calRotateTranslate.transY;
  2077. context.rotate(-1 * config._xAxisTextAngle_);
  2078. context.translate(transX, transY);
  2079. context.fillText(item, xAxisPoints[index] + offset, startY + config.fontSize + 5);
  2080. context.closePath();
  2081. context.stroke();
  2082. context.restore();
  2083. });
  2084. }
  2085. }
  2086. context.restore();
  2087. }
  2088. function drawYAxisGrid(categories,opts, config, context) {
  2089. if (opts.yAxis.disableGrid === true) {
  2090. return;
  2091. }
  2092. var spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
  2093. var eachSpacing = Math.floor(spacingValid / config.yAxisSplit);
  2094. var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth;
  2095. var startX = config.padding + yAxisTotalWidth;
  2096. var _getXAxisPoints4 = getXAxisPoints(categories, opts, config),
  2097. xAxisPoints = _getXAxisPoints4.xAxisPoints,
  2098. xAxiseachSpacing = _getXAxisPoints4.eachSpacing;
  2099. var TotalWidth=xAxiseachSpacing*(xAxisPoints.length-1);
  2100. var endX = startX+TotalWidth;
  2101. var points = [];
  2102. for (var i = 0; i < config.yAxisSplit; i++) {
  2103. points.push(config.padding + eachSpacing * i);
  2104. }
  2105. points.push(config.padding + eachSpacing * config.yAxisSplit + 2);
  2106. context.save();
  2107. if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) {
  2108. context.translate(opts._scrollDistance_, 0);
  2109. }
  2110. if(opts.yAxis.gridType=='dash'){
  2111. context.setLineDash([opts.yAxis.dashLength,opts.yAxis.dashLength]);
  2112. }
  2113. context.beginPath();
  2114. context.setStrokeStyle(opts.yAxis.gridColor || "#cccccc");
  2115. context.setLineWidth(1*opts.pixelRatio);
  2116. points.forEach(function (item, index) {
  2117. context.moveTo(startX, item);
  2118. context.lineTo(endX, item);
  2119. });
  2120. context.closePath();
  2121. context.stroke();
  2122. context.setLineDash([]);
  2123. context.restore();
  2124. }
  2125. function drawYAxis(series, opts, config, context) {
  2126. if (opts.yAxis.disabled === true) {
  2127. return;
  2128. }
  2129. var _calYAxisData4 = calYAxisData(series, opts, config),
  2130. rangesFormat = _calYAxisData4.rangesFormat;
  2131. var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth;
  2132. var spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight;
  2133. var eachSpacing = Math.floor(spacingValid / config.yAxisSplit);
  2134. var startX = config.padding + yAxisTotalWidth;
  2135. var endX = opts.width - config.padding;
  2136. var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
  2137. // set YAxis background
  2138. context.beginPath();
  2139. context.setFillStyle(opts.background || '#ffffff');
  2140. if (opts._scrollDistance_ < 0) {
  2141. context.fillRect(0, 0, startX, endY + config.xAxisHeight );
  2142. }
  2143. context.fillRect(endX, 0, opts.width, endY + config.xAxisHeight );
  2144. context.closePath();
  2145. context.stroke();
  2146. var points = [];
  2147. for (var i = 0; i <= config.yAxisSplit; i++) {
  2148. points.push(config.padding + eachSpacing * i);
  2149. }
  2150. rangesFormat.forEach(function (item, index) {
  2151. var pos = points[index] ? points[index] : endY;
  2152. context.beginPath();
  2153. context.setFontSize(config.fontSize);
  2154. context.setFillStyle(opts.yAxis.fontColor || '#666666');
  2155. context.fillText(item, config.padding + config.yAxisTitleWidth, pos + config.fontSize / 2);
  2156. context.closePath();
  2157. context.stroke();
  2158. });
  2159. if (opts.yAxis.title) {
  2160. drawYAxisTitle(opts.yAxis.title, opts, config, context);
  2161. }
  2162. }
  2163. function drawLegend(series, opts, config, context) {
  2164. if (opts.legend===false) {
  2165. return;
  2166. }
  2167. // each legend shape width 15px
  2168. // the spacing between shape and text in each legend is the `padding`
  2169. // each legend spacing is the `padding`
  2170. // legend margin top `config.padding`
  2171. var _calLegendData = calLegendData(series, opts, config),
  2172. legendList = _calLegendData.legendList;
  2173. var padding = 5*opts.pixelRatio;
  2174. var marginTop = 10*opts.pixelRatio;
  2175. var shapeWidth = 15*opts.pixelRatio;
  2176. legendList.forEach(function (itemList, listIndex) {
  2177. var width = 0;
  2178. itemList.forEach(function (item) {
  2179. item.name = item.name || 'undefined';
  2180. width += 3 * padding + measureText(item.name) + shapeWidth;
  2181. });
  2182. var startX = (opts.width - width) / 2 + padding;
  2183. var startY = opts.height - config.padding - config.legendHeight + listIndex * (config.fontSize + marginTop) + padding + marginTop;
  2184. context.setFontSize(config.fontSize);
  2185. itemList.forEach(function (item) {
  2186. switch (opts.type) {
  2187. case 'line':
  2188. context.beginPath();
  2189. context.setLineWidth(1*opts.pixelRatio);
  2190. context.setStrokeStyle(item.color);
  2191. context.setFillStyle(item.color);
  2192. context.moveTo(startX + 7.5*opts.pixelRatio, startY + 5*opts.pixelRatio);
  2193. context.arc(startX + 7.5*opts.pixelRatio, startY + 5*opts.pixelRatio, 6*opts.pixelRatio, 0, 2 * Math.PI);
  2194. context.closePath();
  2195. context.fill();
  2196. context.stroke();
  2197. break;
  2198. case 'pie':
  2199. context.beginPath();
  2200. context.setLineWidth(1*opts.pixelRatio);
  2201. context.setStrokeStyle(item.color);
  2202. context.setFillStyle(item.color);
  2203. context.moveTo(startX + 7.5*opts.pixelRatio, startY + 5*opts.pixelRatio);
  2204. context.arc(startX + 7.5*opts.pixelRatio, startY + 5*opts.pixelRatio, 6*opts.pixelRatio, 0, 2 * Math.PI);
  2205. context.closePath();
  2206. context.fill();
  2207. context.stroke();
  2208. break;
  2209. case 'ring':
  2210. context.beginPath();
  2211. context.setLineWidth(1*opts.pixelRatio);
  2212. context.setStrokeStyle(item.color);
  2213. context.setFillStyle(item.color);
  2214. context.moveTo(startX + 7.5*opts.pixelRatio, startY + 5*opts.pixelRatio);
  2215. context.arc(startX + 7.5*opts.pixelRatio, startY + 5*opts.pixelRatio, 6*opts.pixelRatio, 0, 2 * Math.PI);
  2216. context.closePath();
  2217. context.fill();
  2218. context.stroke();
  2219. break;
  2220. //圆弧进度图不显示图例
  2221. case 'gauge':
  2222. break;
  2223. case 'arcbar':
  2224. break;
  2225. default:
  2226. context.beginPath();
  2227. context.setFillStyle(item.color);
  2228. context.moveTo(startX, startY);
  2229. context.fillRect(startX, startY, 15*opts.pixelRatio, 10*opts.pixelRatio);
  2230. context.closePath();
  2231. context.fill();
  2232. context.stroke();
  2233. }
  2234. startX += padding + shapeWidth;
  2235. context.beginPath();
  2236. context.setFontSize(config.fontSize);
  2237. context.setFillStyle(opts.extra.legendTextColor || '#333333');
  2238. context.fillText(item.name, startX, startY + 6*opts.pixelRatio+3*opts.pixelRatio);
  2239. context.closePath();
  2240. context.stroke();
  2241. startX += measureText(item.name) + 2 * padding;
  2242. });
  2243. });
  2244. }
  2245. function drawPieDataPoints(series, opts, config, context) {
  2246. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  2247. var pieOption = opts.extra.pie || {};
  2248. series = getPieDataPoints(series, process);
  2249. var centerPosition = {
  2250. x: opts.width / 2,
  2251. y: (opts.height - config.legendHeight) / 2
  2252. };
  2253. var radius = Math.min(centerPosition.x - config.pieChartLinePadding - config.pieChartTextPadding - config._pieTextMaxLength_, centerPosition.y - config.pieChartLinePadding - config.pieChartTextPadding);
  2254. if (opts.dataLabel) {
  2255. radius -= 10;
  2256. } else {
  2257. radius -= 2 * config.padding;
  2258. }
  2259. var activeRadius=radius+config.pieChartLinePadding/2;
  2260. series = series.map(function (eachSeries) {
  2261. eachSeries._start_ += (pieOption.offsetAngle || 0) * Math.PI / 180;
  2262. return eachSeries;
  2263. });
  2264. series.forEach(function (eachSeries,seriesIndex) {
  2265. if(opts.tooltip){
  2266. if(opts.tooltip.index==seriesIndex){
  2267. context.beginPath();
  2268. context.setFillStyle(hexToRgb(eachSeries.color, opts.extra.pie.activeOpacity || 0.5));
  2269. context.moveTo(centerPosition.x, centerPosition.y);
  2270. context.arc(centerPosition.x, centerPosition.y, activeRadius, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI);
  2271. context.closePath();
  2272. context.fill();
  2273. }
  2274. }
  2275. context.beginPath();
  2276. context.setLineWidth(2*opts.pixelRatio);
  2277. context.setStrokeStyle('#ffffff');
  2278. context.setFillStyle(eachSeries.color);
  2279. context.moveTo(centerPosition.x, centerPosition.y);
  2280. context.arc(centerPosition.x, centerPosition.y, radius, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI);
  2281. context.closePath();
  2282. context.fill();
  2283. if (opts.disablePieStroke !== true) {
  2284. context.stroke();
  2285. }
  2286. });
  2287. if (opts.type === 'ring') {
  2288. var innerPieWidth = radius * 0.6;
  2289. if (typeof opts.extra.pie.ringWidth === 'number' && opts.extra.pie.ringWidth > 0) {
  2290. innerPieWidth = Math.max(0, radius - opts.extra.pie.ringWidth);
  2291. }
  2292. context.beginPath();
  2293. context.setFillStyle(opts.background || '#ffffff');
  2294. context.moveTo(centerPosition.x, centerPosition.y);
  2295. context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI);
  2296. context.closePath();
  2297. context.fill();
  2298. }
  2299. if (opts.dataLabel !== false && process === 1) {
  2300. // fix https://github.com/xiaolin3303/wx-charts/issues/132
  2301. var valid = false;
  2302. for (var i = 0, len = series.length; i < len; i++) {
  2303. if (series[i].data > 0) {
  2304. valid = true;
  2305. break;
  2306. }
  2307. }
  2308. if (valid) {
  2309. drawPieText(series, opts, config, context, radius, centerPosition);
  2310. }
  2311. }
  2312. if (process === 1 && opts.type === 'ring') {
  2313. drawRingTitle(opts, config, context);
  2314. }
  2315. return {
  2316. center: centerPosition,
  2317. radius: radius,
  2318. series: series
  2319. };
  2320. }
  2321. function drawArcbarDataPoints(series, opts, config, context) {
  2322. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  2323. var arcbarOption = opts.extra.arcbar || {};
  2324. arcbarOption.startAngle=arcbarOption.startAngle? arcbarOption.startAngle: 0.75;
  2325. arcbarOption.endAngle=arcbarOption.endAngle? arcbarOption.endAngle : 0.25;
  2326. arcbarOption.type=arcbarOption.type? arcbarOption.type : 'default';
  2327. series = getArcbarDataPoints(series, arcbarOption, process);
  2328. var centerPosition = {
  2329. x: opts.width / 2,
  2330. y: (opts.height) / 2
  2331. };
  2332. var radius = Math.min(centerPosition.x , centerPosition.y);
  2333. if (typeof arcbarOption.width === 'number' && arcbarOption.width > 0) {
  2334. arcbarOption.width=arcbarOption.width;
  2335. }else{
  2336. arcbarOption.width=12*opts.pixelRatio;
  2337. }
  2338. radius -= config.padding+arcbarOption.width/2;
  2339. //背景颜色
  2340. context.setLineWidth(arcbarOption.width); // 设置圆环的宽度
  2341. context.setStrokeStyle(arcbarOption.backgroundColor || '#E9E9E9'); // 设置圆环的颜色
  2342. context.setLineCap('round'); // 设置圆环端点的形状
  2343. context.beginPath(); //开始一个新的路径
  2344. if(arcbarOption.type=='default'){
  2345. context.arc(centerPosition.x, centerPosition.y, radius, arcbarOption.startAngle * Math.PI, arcbarOption.endAngle * Math.PI, false);
  2346. }else{
  2347. context.arc(centerPosition.x, centerPosition.y, radius, 0, 2 * Math.PI, false);
  2348. }
  2349. context.stroke(); //对当前路径进行描边
  2350. series.forEach(function (eachSeries) {
  2351. context.setLineWidth(arcbarOption.width);
  2352. context.setStrokeStyle(eachSeries.color);
  2353. context.setLineCap('round');
  2354. context.beginPath();
  2355. context.arc(centerPosition.x, centerPosition.y, radius, arcbarOption.startAngle * Math.PI, eachSeries._proportion_ * Math.PI, false);
  2356. context.stroke();
  2357. });
  2358. drawRingTitle(opts, config, context);
  2359. return {
  2360. center: centerPosition,
  2361. radius: radius,
  2362. series: series
  2363. };
  2364. }
  2365. function drawGaugeDataPoints(categories,series, opts, config, context) {
  2366. var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
  2367. var gaugeOption = opts.extra.gauge || {};
  2368. gaugeOption.startAngle=gaugeOption.startAngle? gaugeOption.startAngle: 0.75;
  2369. if(gaugeOption.oldAngle==undefined){
  2370. gaugeOption.oldAngle=gaugeOption.startAngle;
  2371. }
  2372. if(gaugeOption.oldData==undefined){
  2373. gaugeOption.oldData=0;
  2374. }
  2375. gaugeOption.endAngle=gaugeOption.endAngle? gaugeOption.endAngle : 0.25;
  2376. categories = getGaugeAxisPoints(categories,gaugeOption.startAngle,gaugeOption.endAngle);
  2377. var centerPosition = {
  2378. x: opts.width / 2,
  2379. y: (opts.height) / 2
  2380. };
  2381. var radius = Math.min(centerPosition.x , centerPosition.y);
  2382. if (typeof gaugeOption.width === 'number' && gaugeOption.width > 0) {
  2383. gaugeOption.width=gaugeOption.width;
  2384. }else{
  2385. gaugeOption.width=15*opts.pixelRatio;
  2386. }
  2387. radius -= config.padding+gaugeOption.width/2;
  2388. var innerRadius = radius-gaugeOption.width;
  2389. //画背景
  2390. context.setLineWidth(gaugeOption.width);
  2391. context.setLineCap('butt');
  2392. categories.forEach(function (eachCategories) {
  2393. context.beginPath();
  2394. context.setStrokeStyle(eachCategories.color);
  2395. context.arc(centerPosition.x, centerPosition.y, radius, eachCategories._startAngle_ * Math.PI, eachCategories._endAngle_ * Math.PI, false);
  2396. context.stroke();
  2397. });
  2398. context.save();
  2399. //画刻度线
  2400. let totalAngle=gaugeOption.startAngle-gaugeOption.endAngle+1;
  2401. gaugeOption.splitLine.fixRadius=gaugeOption.splitLine.fixRadius? gaugeOption.splitLine.fixRadius : 0;
  2402. gaugeOption.splitLine.splitNumber=gaugeOption.splitLine.splitNumber? gaugeOption.splitLine.splitNumber : 10;
  2403. gaugeOption.splitLine.width=gaugeOption.splitLine.width? gaugeOption.splitLine.width : 15*opts.pixelRatio ;
  2404. gaugeOption.splitLine.color=gaugeOption.splitLine.color? gaugeOption.splitLine.color : '#FFFFFF';
  2405. gaugeOption.splitLine.childNumber=gaugeOption.splitLine.childNumber? gaugeOption.splitLine.childNumber : 5;
  2406. gaugeOption.splitLine.childWidth=gaugeOption.splitLine.childWidth? gaugeOption.splitLine.childWidth : 5*opts.pixelRatio;
  2407. let splitAngle=totalAngle/gaugeOption.splitLine.splitNumber;
  2408. let childAngle=totalAngle/gaugeOption.splitLine.splitNumber/gaugeOption.splitLine.childNumber;
  2409. let startX=-radius-gaugeOption.width*0.5-gaugeOption.splitLine.fixRadius;
  2410. let endX=-radius-gaugeOption.width*0.5-gaugeOption.splitLine.fixRadius+gaugeOption.splitLine.width;
  2411. let childendX=-radius-gaugeOption.width*0.5-gaugeOption.splitLine.fixRadius+gaugeOption.splitLine.childWidth;
  2412. context.translate(centerPosition.x, centerPosition.y);
  2413. context.rotate((gaugeOption.startAngle-1)* Math.PI);
  2414. for(let i=0 ; i< gaugeOption.splitLine.splitNumber+1; i++){
  2415. context.beginPath();
  2416. context.setStrokeStyle(gaugeOption.splitLine.color);
  2417. context.setLineWidth(2*opts.pixelRatio);
  2418. context.moveTo(startX, 0);
  2419. context.lineTo(endX, 0);
  2420. context.stroke();
  2421. context.rotate(splitAngle* Math.PI);
  2422. }
  2423. context.restore();
  2424. context.save();
  2425. context.translate(centerPosition.x, centerPosition.y);
  2426. context.rotate((gaugeOption.startAngle-1)* Math.PI);
  2427. for(let i=0 ; i< gaugeOption.splitLine.splitNumber*gaugeOption.splitLine.childNumber+1; i++){
  2428. context.beginPath();
  2429. context.setStrokeStyle(gaugeOption.splitLine.color);
  2430. context.setLineWidth(1*opts.pixelRatio);
  2431. context.moveTo(startX, 0);
  2432. context.lineTo(childendX, 0);
  2433. context.stroke();
  2434. context.rotate(childAngle* Math.PI);
  2435. }
  2436. context.restore();
  2437. //画指针
  2438. gaugeOption.pointer.width=gaugeOption.pointer.width? gaugeOption.pointer.width : 15*opts.pixelRatio;
  2439. if (gaugeOption.pointer.color == undefined || gaugeOption.pointer.color == 'auto') {
  2440. gaugeOption.pointer.color == 'auto';
  2441. }else{
  2442. gaugeOption.pointer.color == gaugeOption.pointer.color;
  2443. }
  2444. series = getGaugeDataPoints(series,categories,gaugeOption, process);
  2445. series.forEach(function (eachSeries) {
  2446. context.save();
  2447. context.translate(centerPosition.x, centerPosition.y);
  2448. context.rotate((eachSeries._proportion_-1)* Math.PI);
  2449. context.beginPath();
  2450. context.setFillStyle(eachSeries.color);
  2451. context.moveTo(gaugeOption.pointer.width, 0);
  2452. context.lineTo(0,-gaugeOption.pointer.width/2);
  2453. context.lineTo(-innerRadius,0);
  2454. context.lineTo(0,gaugeOption.pointer.width/2);
  2455. context.lineTo(gaugeOption.pointer.width,0);
  2456. context.closePath();
  2457. context.fill();
  2458. context.beginPath();
  2459. context.setFillStyle('#FFFFFF');
  2460. context.arc(0, 0, gaugeOption.pointer.width/6, 0,2* Math.PI, false);
  2461. context.fill();
  2462. context.restore();
  2463. });
  2464. if (opts.dataLabel !== false) {
  2465. drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context);
  2466. }
  2467. drawRingTitle(opts, config, context);
  2468. if (process === 1 && opts.type === 'gauge') {
  2469. gaugeOption.oldAngle=series[0]._proportion_;
  2470. gaugeOption.oldData=series[0].data;
  2471. }
  2472. return {
  2473. center: centerPosition,
  2474. radius: radius,
  2475. innerRadius:innerRadius,
  2476. categories: categories,
  2477. totalAngle:totalAngle
  2478. };
  2479. }
  2480. function drawRadarDataPoints(series, opts, config, context) {
  2481. var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
  2482. var radarOption = opts.extra.radar || {};
  2483. var coordinateAngle = getRadarCoordinateSeries(opts.categories.length);
  2484. var centerPosition = {
  2485. x: opts.width / 2,
  2486. y: (opts.height - config.legendHeight) / 2
  2487. };
  2488. var radius = Math.min(centerPosition.x - (getMaxTextListLength(opts.categories) + config.radarLabelTextMargin), centerPosition.y - config.radarLabelTextMargin);
  2489. radius -= config.padding;
  2490. // draw grid
  2491. context.beginPath();
  2492. context.setLineWidth(1*opts.pixelRatio);
  2493. context.setStrokeStyle(radarOption.gridColor || "#cccccc");
  2494. coordinateAngle.forEach(function (angle) {
  2495. var pos = convertCoordinateOrigin(radius * Math.cos(angle), radius * Math.sin(angle), centerPosition);
  2496. context.moveTo(centerPosition.x, centerPosition.y);
  2497. context.lineTo(pos.x, pos.y);
  2498. });
  2499. context.stroke();
  2500. context.closePath();
  2501. // draw split line grid
  2502. var _loop = function _loop(i) {
  2503. var startPos = {};
  2504. context.beginPath();
  2505. context.setLineWidth(1*opts.pixelRatio);
  2506. context.setStrokeStyle(radarOption.gridColor || "#cccccc");
  2507. coordinateAngle.forEach(function (angle, index) {
  2508. var pos = convertCoordinateOrigin(radius / config.radarGridCount * i * Math.cos(angle), radius / config.radarGridCount * i * Math.sin(angle), centerPosition);
  2509. if (index === 0) {
  2510. startPos = pos;
  2511. context.moveTo(pos.x, pos.y);
  2512. } else {
  2513. context.lineTo(pos.x, pos.y);
  2514. }
  2515. });
  2516. context.lineTo(startPos.x, startPos.y);
  2517. context.stroke();
  2518. context.closePath();
  2519. };
  2520. for (var i = 1; i <= config.radarGridCount; i++) {
  2521. _loop(i);
  2522. }
  2523. var radarDataPoints = getRadarDataPoints(coordinateAngle, centerPosition, radius, series, opts, process);
  2524. radarDataPoints.forEach(function (eachSeries, seriesIndex) {
  2525. // 绘制区域数据
  2526. context.beginPath();
  2527. context.setFillStyle(eachSeries.color);
  2528. context.setGlobalAlpha(0.3);
  2529. eachSeries.data.forEach(function (item, index) {
  2530. if (index === 0) {
  2531. context.moveTo(item.position.x, item.position.y);
  2532. } else {
  2533. context.lineTo(item.position.x, item.position.y);
  2534. }
  2535. });
  2536. context.closePath();
  2537. context.fill();
  2538. context.setGlobalAlpha(1);
  2539. if (opts.dataPointShape !== false) {
  2540. var shape = config.dataPointShape[seriesIndex % config.dataPointShape.length];
  2541. var points = eachSeries.data.map(function (item) {
  2542. return item.position;
  2543. });
  2544. drawPointShape(points, eachSeries.color, shape, context,opts);
  2545. }
  2546. });
  2547. // draw label text
  2548. drawRadarLabel(coordinateAngle, radius, centerPosition, opts, config, context);
  2549. return {
  2550. center: centerPosition,
  2551. radius: radius,
  2552. angleList: coordinateAngle
  2553. };
  2554. }
  2555. function drawCanvas(opts, context) {
  2556. context.draw();
  2557. }
  2558. var Timing = {
  2559. easeIn: function easeIn(pos) {
  2560. return Math.pow(pos, 3);
  2561. },
  2562. easeOut: function easeOut(pos) {
  2563. return Math.pow(pos - 1, 3) + 1;
  2564. },
  2565. easeInOut: function easeInOut(pos) {
  2566. if ((pos /= 0.5) < 1) {
  2567. return 0.5 * Math.pow(pos, 3);
  2568. } else {
  2569. return 0.5 * (Math.pow(pos - 2, 3) + 2);
  2570. }
  2571. },
  2572. linear: function linear(pos) {
  2573. return pos;
  2574. }
  2575. };
  2576. function Animation(opts) {
  2577. this.isStop = false;
  2578. opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration;
  2579. opts.timing = opts.timing || 'linear';
  2580. var delay = 17;
  2581. var createAnimationFrame = function createAnimationFrame() {
  2582. if (typeof requestAnimationFrame !== 'undefined') {
  2583. return requestAnimationFrame;
  2584. } else if (typeof setTimeout !== 'undefined') {
  2585. return function (step, delay) {
  2586. setTimeout(function () {
  2587. var timeStamp = +new Date();
  2588. step(timeStamp);
  2589. }, delay);
  2590. };
  2591. } else {
  2592. return function (step) {
  2593. step(null);
  2594. };
  2595. }
  2596. };
  2597. var animationFrame = createAnimationFrame();
  2598. var startTimeStamp = null;
  2599. var _step = function step(timestamp) {
  2600. if (timestamp === null || this.isStop === true) {
  2601. opts.onProcess && opts.onProcess(1);
  2602. opts.onAnimationFinish && opts.onAnimationFinish();
  2603. return;
  2604. }
  2605. if (startTimeStamp === null) {
  2606. startTimeStamp = timestamp;
  2607. }
  2608. if (timestamp - startTimeStamp < opts.duration) {
  2609. var process = (timestamp - startTimeStamp) / opts.duration;
  2610. var timingFunction = Timing[opts.timing];
  2611. process = timingFunction(process);
  2612. opts.onProcess && opts.onProcess(process);
  2613. animationFrame(_step, delay);
  2614. } else {
  2615. opts.onProcess && opts.onProcess(1);
  2616. opts.onAnimationFinish && opts.onAnimationFinish();
  2617. }
  2618. };
  2619. _step = _step.bind(this);
  2620. animationFrame(_step, delay);
  2621. }
  2622. // stop animation immediately
  2623. // and tigger onAnimationFinish
  2624. Animation.prototype.stop = function () {
  2625. this.isStop = true;
  2626. };
  2627. function drawCharts(type, opts, config, context) {
  2628. var _this = this;
  2629. var series = opts.series;
  2630. var categories = opts.categories;
  2631. series = fillSeriesColor(series, config);
  2632. series = fillSeriesType(series, opts);
  2633. var _calLegendData = calLegendData(series, opts, config),
  2634. legendHeight = _calLegendData.legendHeight;
  2635. config.legendHeight = legendHeight;
  2636. var _calYAxisData = calYAxisData(series, opts, config),
  2637. yAxisWidth = _calYAxisData.yAxisWidth;
  2638. config.yAxisWidth = yAxisWidth;
  2639. if (categories && categories.length) {
  2640. var _calCategoriesData = calCategoriesData(categories, opts, config),
  2641. xAxisHeight = _calCategoriesData.xAxisHeight,
  2642. angle = _calCategoriesData.angle;
  2643. config.xAxisHeight = xAxisHeight;
  2644. config._xAxisTextAngle_ = angle;
  2645. }
  2646. if (type === 'pie' || type === 'ring') {
  2647. config._pieTextMaxLength_ = opts.dataLabel === false ? 0 : getPieTextMaxLength(series);
  2648. }
  2649. var duration = opts.animation ? 1000 : 0;
  2650. this.animationInstance && this.animationInstance.stop();
  2651. //先清空画布,不然百度和支付宝ToolTip有重影
  2652. context.clearRect(0, 0, opts.width, opts.height);
  2653. switch (type) {
  2654. case 'line':
  2655. this.animationInstance = new Animation({
  2656. timing: 'easeIn',
  2657. duration: duration,
  2658. onProcess: function onProcess(process) {
  2659. if(opts.rotate){
  2660. contextRotate(context,opts);
  2661. }
  2662. drawYAxisGrid(categories,opts, config, context);
  2663. drawXAxis(categories, opts, config, context);
  2664. var _drawLineDataPoints = drawLineDataPoints(series, opts, config, context, process),
  2665. xAxisPoints = _drawLineDataPoints.xAxisPoints,
  2666. calPoints = _drawLineDataPoints.calPoints,
  2667. eachSpacing = _drawLineDataPoints.eachSpacing;
  2668. _this.chartData.xAxisPoints = xAxisPoints;
  2669. _this.chartData.calPoints = calPoints;
  2670. _this.chartData.eachSpacing = eachSpacing;
  2671. drawLegend(opts.series, opts, config, context);
  2672. drawYAxis(series, opts, config, context);
  2673. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  2674. drawCanvas(opts, context);
  2675. },
  2676. onAnimationFinish: function onAnimationFinish() {
  2677. _this.event.trigger('renderComplete');
  2678. }
  2679. });
  2680. break;
  2681. case 'mix':
  2682. this.animationInstance = new Animation({
  2683. timing: 'easeIn',
  2684. duration: duration,
  2685. onProcess: function onProcess(process) {
  2686. if(opts.rotate){
  2687. contextRotate(context,opts);
  2688. }
  2689. drawYAxisGrid(categories,opts, config, context);
  2690. drawXAxis(categories, opts, config, context);
  2691. var _drawMixDataPoints = drawMixDataPoints(series, opts, config, context, process),
  2692. xAxisPoints = _drawMixDataPoints.xAxisPoints,
  2693. calPoints = _drawMixDataPoints.calPoints,
  2694. eachSpacing = _drawMixDataPoints.eachSpacing;
  2695. _this.chartData.xAxisPoints = xAxisPoints;
  2696. _this.chartData.calPoints = calPoints;
  2697. _this.chartData.eachSpacing = eachSpacing;
  2698. drawLegend(opts.series, opts, config, context);
  2699. drawYAxis(series, opts, config, context);
  2700. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  2701. drawCanvas(opts, context);
  2702. },
  2703. onAnimationFinish: function onAnimationFinish() {
  2704. _this.event.trigger('renderComplete');
  2705. }
  2706. });
  2707. break;
  2708. case 'column':
  2709. this.animationInstance = new Animation({
  2710. timing: 'easeIn',
  2711. duration: duration,
  2712. onProcess: function onProcess(process) {
  2713. if(opts.rotate){
  2714. contextRotate(context,opts);
  2715. }
  2716. drawYAxisGrid(categories,opts, config, context);
  2717. drawXAxis(categories, opts, config, context);
  2718. var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context, process),
  2719. xAxisPoints = _drawColumnDataPoints.xAxisPoints,
  2720. calPoints = _drawColumnDataPoints.calPoints,
  2721. eachSpacing = _drawColumnDataPoints.eachSpacing;
  2722. _this.chartData.xAxisPoints = xAxisPoints;
  2723. _this.chartData.calPoints = calPoints;
  2724. _this.chartData.eachSpacing = eachSpacing;
  2725. drawLegend(opts.series, opts, config, context);
  2726. drawYAxis(series, opts, config, context);
  2727. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  2728. drawCanvas(opts, context);
  2729. },
  2730. onAnimationFinish: function onAnimationFinish() {
  2731. _this.event.trigger('renderComplete');
  2732. }
  2733. });
  2734. break;
  2735. case 'area':
  2736. this.animationInstance = new Animation({
  2737. timing: 'easeIn',
  2738. duration: duration,
  2739. onProcess: function onProcess(process) {
  2740. if(opts.rotate){
  2741. contextRotate(context,opts);
  2742. }
  2743. drawYAxisGrid(categories,opts, config, context);
  2744. drawXAxis(categories, opts, config, context);
  2745. var _drawAreaDataPoints = drawAreaDataPoints(series, opts, config, context, process),
  2746. xAxisPoints = _drawAreaDataPoints.xAxisPoints,
  2747. calPoints = _drawAreaDataPoints.calPoints,
  2748. eachSpacing = _drawAreaDataPoints.eachSpacing;
  2749. _this.chartData.xAxisPoints = xAxisPoints;
  2750. _this.chartData.calPoints = calPoints;
  2751. _this.chartData.eachSpacing = eachSpacing;
  2752. drawLegend(opts.series, opts, config, context);
  2753. drawYAxis(series, opts, config, context);
  2754. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  2755. drawCanvas(opts, context);
  2756. },
  2757. onAnimationFinish: function onAnimationFinish() {
  2758. _this.event.trigger('renderComplete');
  2759. }
  2760. });
  2761. break;
  2762. case 'ring':
  2763. case 'pie':
  2764. this.animationInstance = new Animation({
  2765. timing: 'easeInOut',
  2766. duration: duration,
  2767. onProcess: function onProcess(process) {
  2768. if(opts.rotate){
  2769. contextRotate(context,opts);
  2770. }
  2771. _this.chartData.pieData = drawPieDataPoints(series, opts, config, context, process);
  2772. drawLegend(opts.series, opts, config, context);
  2773. drawToolTipBridge(opts, config, context, process);
  2774. drawCanvas(opts, context);
  2775. },
  2776. onAnimationFinish: function onAnimationFinish() {
  2777. _this.event.trigger('renderComplete');
  2778. }
  2779. });
  2780. break;
  2781. case 'radar':
  2782. this.animationInstance = new Animation({
  2783. timing: 'easeInOut',
  2784. duration: duration,
  2785. onProcess: function onProcess(process) {
  2786. if(opts.rotate){
  2787. contextRotate(context,opts);
  2788. }
  2789. _this.chartData.radarData = drawRadarDataPoints(series, opts, config, context, process);
  2790. drawLegend(opts.series, opts, config, context);
  2791. drawCanvas(opts, context);
  2792. },
  2793. onAnimationFinish: function onAnimationFinish() {
  2794. _this.event.trigger('renderComplete');
  2795. }
  2796. });
  2797. break;
  2798. case 'arcbar':
  2799. this.animationInstance = new Animation({
  2800. timing: 'easeInOut',
  2801. duration: duration,
  2802. onProcess: function onProcess(process) {
  2803. if(opts.rotate){
  2804. contextRotate(context,opts);
  2805. }
  2806. _this.chartData.arcbarData = drawArcbarDataPoints(series, opts, config, context, process);
  2807. drawCanvas(opts, context);
  2808. },
  2809. onAnimationFinish: function onAnimationFinish() {
  2810. _this.event.trigger('renderComplete');
  2811. }
  2812. });
  2813. break;
  2814. case 'gauge':
  2815. this.animationInstance = new Animation({
  2816. timing: 'easeInOut',
  2817. duration: duration,
  2818. onProcess: function onProcess(process) {
  2819. if(opts.rotate){
  2820. contextRotate(context,opts);
  2821. }
  2822. _this.chartData.gaugeData = drawGaugeDataPoints(categories, series,opts, config, context, process);
  2823. drawCanvas(opts, context);
  2824. },
  2825. onAnimationFinish: function onAnimationFinish() {
  2826. _this.event.trigger('renderComplete');
  2827. }
  2828. });
  2829. break;
  2830. case 'candle':
  2831. this.animationInstance = new Animation({
  2832. timing: 'easeIn',
  2833. duration: duration,
  2834. onProcess: function onProcess(process) {
  2835. if(opts.rotate){
  2836. contextRotate(context,opts);
  2837. }
  2838. drawYAxisGrid(categories,opts, config, context);
  2839. drawXAxis(categories, opts, config, context);
  2840. var _drawCandleDataPoints = drawCandleDataPoints(series, opts, config, context, process),
  2841. xAxisPoints = _drawCandleDataPoints.xAxisPoints,
  2842. calPoints = _drawCandleDataPoints.calPoints,
  2843. eachSpacing = _drawCandleDataPoints.eachSpacing;
  2844. _this.chartData.xAxisPoints = xAxisPoints;
  2845. _this.chartData.calPoints = calPoints;
  2846. _this.chartData.eachSpacing = eachSpacing;
  2847. drawLegend(opts.series, opts, config, context);
  2848. drawYAxis(series, opts, config, context);
  2849. drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints);
  2850. drawCanvas(opts, context);
  2851. },
  2852. onAnimationFinish: function onAnimationFinish() {
  2853. _this.event.trigger('renderComplete');
  2854. }
  2855. });
  2856. break;
  2857. }
  2858. }
  2859. // simple event implement
  2860. function Event() {
  2861. this.events = {};
  2862. }
  2863. Event.prototype.addEventListener = function (type, listener) {
  2864. this.events[type] = this.events[type] || [];
  2865. this.events[type].push(listener);
  2866. };
  2867. Event.prototype.trigger = function () {
  2868. for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
  2869. args[_key] = arguments[_key];
  2870. }
  2871. var type = args[0];
  2872. var params = args.slice(1);
  2873. if (!!this.events[type]) {
  2874. this.events[type].forEach(function (listener) {
  2875. try {
  2876. listener.apply(null, params);
  2877. } catch (e) {
  2878. console.error(e);
  2879. }
  2880. });
  2881. }
  2882. };
  2883. var Charts = function Charts(opts) {
  2884. opts.fontSize=opts.fontSize ? opts.fontSize*opts.pixelRatio : 13*opts.pixelRatio;
  2885. opts.title = opts.title || {};
  2886. opts.subtitle = opts.subtitle || {};
  2887. opts.yAxis = opts.yAxis || {};
  2888. opts.yAxis.gridType=opts.yAxis.gridType? opts.yAxis.gridType : 'solid';
  2889. opts.yAxis.dashLength=opts.yAxis.dashLength? opts.yAxis.dashLength : 4*opts.pixelRatio;
  2890. opts.xAxis = opts.xAxis || {};
  2891. opts.xAxis.rotateLabel = opts.xAxis.rotateLabel ? true : false;
  2892. opts.xAxis.type=opts.xAxis.type? opts.xAxis.type : 'calibration';
  2893. opts.xAxis.gridType=opts.xAxis.gridType? opts.xAxis.gridType : 'solid';
  2894. opts.xAxis.dashLength=opts.xAxis.dashLength? opts.xAxis.dashLength : 4*opts.pixelRatio;
  2895. opts.xAxis.itemCount = opts.xAxis.itemCount ? opts.xAxis.itemCount : 5;
  2896. opts.xAxis.scrollAlign = opts.xAxis.scrollAlign ? opts.xAxis.scrollAlign : 'left';
  2897. opts.extra = opts.extra || {};
  2898. opts.legend = opts.legend === false ? false : true;
  2899. opts.rotate = opts.rotate ? true : false;
  2900. opts.animation = opts.animation === false ? false : true;
  2901. var config$$1 = assign({}, config);
  2902. config$$1.yAxisTitleWidth = opts.yAxis.disabled !== true && opts.yAxis.title ? config$$1.yAxisTitleWidth : 0;
  2903. if(opts.type == 'pie' || opts.type == 'ring' ){
  2904. config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.pie.lableWidth || config$$1.pieChartLinePadding*opts.pixelRatio;
  2905. }
  2906. config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding*opts.pixelRatio;
  2907. config$$1.yAxisSplit = opts.yAxis.splitNumber? opts.yAxis.splitNumber : config.yAxisSplit;
  2908. //屏幕旋转
  2909. config$$1.rotate=opts.rotate;
  2910. if(opts.rotate){
  2911. let tempWidth=opts.width;
  2912. let tempHeight=opts.height;
  2913. opts.width=tempHeight;
  2914. opts.height=tempWidth;
  2915. }
  2916. //适配H5高分屏
  2917. config$$1.yAxisWidth=config.yAxisWidth*opts.pixelRatio;
  2918. config$$1.xAxisHeight=config.xAxisHeight*opts.pixelRatio;
  2919. if(opts.enableScroll && opts.xAxis.scrollShow){
  2920. config$$1.xAxisHeight+=4*opts.pixelRatio;
  2921. }
  2922. config$$1.xAxisLineHeight=config.xAxisLineHeight*opts.pixelRatio;
  2923. config$$1.legendHeight=config.legendHeight*opts.pixelRatio;
  2924. //config$$1.yAxisTitleWidth=config.yAxisTitleWidth*opts.pixelRatio;
  2925. config$$1.padding=config.padding*opts.pixelRatio;
  2926. config$$1.fontSize=opts.fontSize;
  2927. config$$1.titleFontSize=config.titleFontSize*opts.pixelRatio;
  2928. config$$1.subtitleFontSize=config.subtitleFontSize*opts.pixelRatio;
  2929. config$$1.toolTipPadding=config.toolTipPadding*opts.pixelRatio;
  2930. config$$1.toolTipLineHeight=config.toolTipLineHeight*opts.pixelRatio;
  2931. config$$1.columePadding=config.columePadding*opts.pixelRatio;
  2932. //config$$1.xAxisTextPadding=config.xAxisTextPadding*opts.pixelRatio;
  2933. //向配置中传入当前pixelRatio及字体大小
  2934. config.pixelRatio=opts.pixelRatio;
  2935. config.fontSize=opts.fontSize;
  2936. config.rotate=opts.rotate;
  2937. this.opts = opts;
  2938. this.config = config$$1;
  2939. opts.$this = opts.$this? opts.$this : this;
  2940. this.context = uni.createCanvasContext(opts.canvasId, opts.$this);
  2941. // store calcuated chart data
  2942. // such as chart point coordinate
  2943. this.chartData = {};
  2944. this.event = new Event();
  2945. this.scrollOption = {
  2946. currentOffset: 0,
  2947. startTouchX: 0,
  2948. distance: 0
  2949. };
  2950. //计算右对齐偏移距离
  2951. if(opts.enableScroll && opts.xAxis.scrollAlign=='right'){
  2952. let _calYAxisData = calYAxisData(opts.series, opts, config$$1),
  2953. yAxisWidth = _calYAxisData.yAxisWidth;
  2954. config$$1.yAxisWidth = yAxisWidth;
  2955. let offsetLeft=0;
  2956. let _getXAxisPoints0 = getXAxisPoints(opts.categories, opts, config$$1),
  2957. xAxisPoints = _getXAxisPoints0.xAxisPoints,
  2958. startX = _getXAxisPoints0.startX,
  2959. endX = _getXAxisPoints0.endX,
  2960. eachSpacing = _getXAxisPoints0.eachSpacing;
  2961. let totalWidth=eachSpacing*(xAxisPoints.length-1);
  2962. let screenWidth=endX-startX;
  2963. offsetLeft=screenWidth-totalWidth;
  2964. this.scrollOption = {
  2965. currentOffset: offsetLeft,
  2966. startTouchX: offsetLeft,
  2967. distance: 0
  2968. };
  2969. opts._scrollDistance_= offsetLeft;
  2970. }
  2971. drawCharts.call(this, opts.type, opts, config$$1, this.context);
  2972. };
  2973. Charts.prototype.updateData = function () {
  2974. var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  2975. this.opts.series = data.series || this.opts.series;
  2976. this.opts.categories = data.categories || this.opts.categories;
  2977. this.opts.title = assign({}, this.opts.title, data.title || {});
  2978. this.opts.subtitle = assign({}, this.opts.subtitle, data.subtitle || {});
  2979. drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
  2980. };
  2981. Charts.prototype.zoom = function () {
  2982. var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.opts.xAxis.itemCount;
  2983. if(this.opts.enableScroll!==true){
  2984. console.log('请启用滚动条后使用!')
  2985. return;
  2986. }
  2987. this.opts.animation=false;
  2988. this.opts.xAxis.itemCount = val.itemCount;
  2989. drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
  2990. };
  2991. Charts.prototype.stopAnimation = function () {
  2992. this.animationInstance && this.animationInstance.stop();
  2993. };
  2994. Charts.prototype.addEventListener = function (type, listener) {
  2995. this.event.addEventListener(type, listener);
  2996. };
  2997. Charts.prototype.getCurrentDataIndex = function (e) {
  2998. var touches= e.mp.changedTouches[0];
  2999. if (touches) {
  3000. var _touches$= getTouches(touches, this.opts, e);
  3001. if (this.opts.type === 'pie' || this.opts.type === 'ring') {
  3002. return findPieChartCurrentIndex({ x: _touches$.x, y: _touches$.y }, this.chartData.pieData);
  3003. } else if (this.opts.type === 'radar') {
  3004. return findRadarChartCurrentIndex({ x: _touches$.x, y: _touches$.y }, this.chartData.radarData, this.opts.categories.length);
  3005. } else {
  3006. return findCurrentIndex({ x: _touches$.x, y: _touches$.y }, this.chartData.xAxisPoints, this.opts, this.config, Math.abs(this.scrollOption.currentOffset));
  3007. }
  3008. }
  3009. return -1;
  3010. };
  3011. Charts.prototype.showToolTip = function (e) {
  3012. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  3013. var touches= e.mp.changedTouches[0];
  3014. var _touches$= getTouches(touches, this.opts, e);
  3015. if (this.opts.type === 'line' || this.opts.type === 'area' || this.opts.type === 'mix' || this.opts.type === 'column') {
  3016. var index = this.getCurrentDataIndex(e);
  3017. var currentOffset = this.scrollOption.currentOffset;
  3018. var opts = assign({}, this.opts, {
  3019. _scrollDistance_: currentOffset,
  3020. animation: false
  3021. });
  3022. if (index > -1) {
  3023. var seriesData = getSeriesDataItem(this.opts.series, index);
  3024. if (seriesData.length !== 0) {
  3025. var _getToolTipData = getToolTipData(seriesData, this.chartData.calPoints, index, this.opts.categories, option),
  3026. textList = _getToolTipData.textList,
  3027. offset = _getToolTipData.offset;
  3028. offset.y=_touches$.y;
  3029. opts.tooltip = {
  3030. textList: textList,
  3031. offset: offset,
  3032. option: option,
  3033. index: index
  3034. };
  3035. }
  3036. }
  3037. drawCharts.call(this, opts.type, opts, this.config, this.context);
  3038. }
  3039. if (this.opts.type === 'candle') {
  3040. var index = this.getCurrentDataIndex(e);
  3041. var currentOffset = this.scrollOption.currentOffset;
  3042. var opts = assign({}, this.opts, {
  3043. _scrollDistance_: currentOffset,
  3044. animation: false
  3045. });
  3046. if (index > -1) {
  3047. var seriesData = getSeriesDataItem(this.opts.series, index);
  3048. if (seriesData.length !== 0) {
  3049. var _getToolTipData = getCandleToolTipData(this.opts.series[0].data,seriesData, this.chartData.calPoints, index, this.opts.categories, this.opts.extra.candle, option),
  3050. textList = _getToolTipData.textList,
  3051. offset = _getToolTipData.offset;
  3052. offset.y=_touches$.y;
  3053. opts.tooltip = {
  3054. textList: textList,
  3055. offset: offset,
  3056. option: option,
  3057. index: index
  3058. };
  3059. }
  3060. }
  3061. drawCharts.call(this, opts.type, opts, this.config, this.context);
  3062. }
  3063. if (this.opts.type === 'pie' || this.opts.type === 'ring') {
  3064. var index = this.getCurrentDataIndex(e);
  3065. var currentOffset = this.scrollOption.currentOffset;
  3066. var opts = assign({}, this.opts, {
  3067. _scrollDistance_: currentOffset,
  3068. animation: false
  3069. });
  3070. if (index > -1) {
  3071. var seriesData = this.opts.series[index];
  3072. var textList =[{
  3073. text: option.format ? option.format(seriesData) : seriesData.name + ': ' + seriesData.data,
  3074. color: seriesData.color
  3075. }];
  3076. var offset = {x:_touches$.x,y:_touches$.y};
  3077. opts.tooltip = {
  3078. textList: textList,
  3079. offset: offset,
  3080. option: option,
  3081. index: index
  3082. };
  3083. }
  3084. drawCharts.call(this, opts.type, opts, this.config, this.context);
  3085. }
  3086. };
  3087. Charts.prototype.scrollStart = function (e) {
  3088. var touches= e.mp.changedTouches[0];
  3089. var _touches$= getTouches(touches, this.opts, e);
  3090. if (touches && this.opts.enableScroll === true) {
  3091. if(touches.x){
  3092. this.scrollOption.startTouchX = _touches$.x;
  3093. }else{
  3094. this.scrollOption.startTouchX = _touches$.clientX;
  3095. }
  3096. }
  3097. };
  3098. Charts.prototype.scroll = function (e) {
  3099. // TODO throtting...
  3100. var touches= e.mp.changedTouches[0];
  3101. var _touches$= getTouches(touches, this.opts, e);
  3102. if (touches && this.opts.enableScroll === true) {
  3103. var _distance;
  3104. if(touches.x){
  3105. _distance = _touches$.x - this.scrollOption.startTouchX;
  3106. }else{
  3107. _distance = _touches$.clientX - this.scrollOption.startTouchX;
  3108. }
  3109. var currentOffset = this.scrollOption.currentOffset;
  3110. var validDistance = calValidDistance(currentOffset + _distance, this.chartData, this.config, this.opts);
  3111. this.scrollOption.distance = _distance = validDistance - currentOffset;
  3112. var opts = assign({}, this.opts, {
  3113. _scrollDistance_: currentOffset + _distance,
  3114. animation: false
  3115. });
  3116. drawCharts.call(this, opts.type, opts, this.config, this.context);
  3117. }
  3118. };
  3119. Charts.prototype.scrollEnd = function (e) {
  3120. if (this.opts.enableScroll === true) {
  3121. var _scrollOption = this.scrollOption,
  3122. currentOffset = _scrollOption.currentOffset,
  3123. distance = _scrollOption.distance;
  3124. this.scrollOption.currentOffset = currentOffset + distance;
  3125. this.scrollOption.distance = 0;
  3126. }
  3127. };
  3128. module.exports = Charts;