您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

6304 行
228 KiB

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