/* * uCharts v1.9.4.20200331 * uni-app平台高性能跨全端图表,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360) * Copyright (c) 2019 QIUN秋云 https://www.ucharts.cn All rights reserved. * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) * * uCharts官方网站 * https://www.uCharts.cn * * 开源地址: * https://gitee.com/uCharts/uCharts * * uni-app插件市场地址: * http://ext.dcloud.net.cn/plugin?id=271 * */ 'use strict'; var config = { yAxisWidth: 15, yAxisSplit: 5, xAxisHeight: 15, xAxisLineHeight: 15, legendHeight: 15, yAxisTitleWidth: 15, padding: [10, 10, 10, 10], pixelRatio: 1, rotate: false, columePadding: 3, fontSize: 13, //dataPointShape: ['diamond', 'circle', 'triangle', 'rect'], dataPointShape: ['circle', 'circle', 'circle', 'circle'], colors: ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d'], pieChartLinePadding: 15, pieChartTextPadding: 5, xAxisTextPadding: 3, titleColor: '#333333', titleFontSize: 20, subtitleColor: '#999999', subtitleFontSize: 15, toolTipPadding: 3, toolTipBackground: '#000000', toolTipOpacity: 0.7, toolTipLineHeight: 20, radarLabelTextMargin: 15, gaugeLabelTextMargin: 15 }; let assign = function (target, ...varArgs) { if (target == null) { throw new TypeError('Cannot convert undefined or null to object'); } if (!varArgs || varArgs.length <= 0) { return target; } // 深度合并对象 function deepAssign(obj1, obj2) { for (let key in obj2) { obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" ? deepAssign(obj1[key], obj2[key]) : obj1[key] = obj2[key]; } return obj1; } varArgs.forEach(val => { target = deepAssign(target, val); }); return target; }; var util = { toFixed: function toFixed(num, limit) { limit = limit || 2; if (this.isFloat(num)) { num = num.toFixed(limit); } return num; }, isFloat: function isFloat(num) { return num % 1 !== 0; }, approximatelyEqual: function approximatelyEqual(num1, num2) { return Math.abs(num1 - num2) < 1e-10; }, isSameSign: function isSameSign(num1, num2) { return Math.abs(num1) === num1 && Math.abs(num2) === num2 || Math.abs(num1) !== num1 && Math.abs(num2) !== num2; }, isSameXCoordinateArea: function isSameXCoordinateArea(p1, p2) { return this.isSameSign(p1.x, p2.x); }, isCollision: function isCollision(obj1, obj2) { obj1.end = {}; obj1.end.x = obj1.start.x + obj1.width; obj1.end.y = obj1.start.y - obj1.height; obj2.end = {}; obj2.end.x = obj2.start.x + obj2.width; obj2.end.y = obj2.start.y - obj2.height; 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; return !flag; } }; //兼容H5点击事件 function getH5Offset(e) { e.mp = { changedTouches: [] }; e.mp.changedTouches.push({ x: e.offsetX, y: e.offsetY }); return e; } // hex 转 rgba function hexToRgb(hexValue, opc) { var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; var hex = hexValue.replace(rgx, function(m, r, g, b) { return r + r + g + g + b + b; }); var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); var r = parseInt(rgb[1], 16); var g = parseInt(rgb[2], 16); var b = parseInt(rgb[3], 16); return 'rgba(' + r + ',' + g + ',' + b + ',' + opc + ')'; } function findRange(num, type, limit) { if (isNaN(num)) { throw new Error('[uCharts] unvalid series data!'); } limit = limit || 10; type = type ? type : 'upper'; var multiple = 1; while (limit < 1) { limit *= 10; multiple *= 10; } if (type === 'upper') { num = Math.ceil(num * multiple); } else { num = Math.floor(num * multiple); } while (num % limit !== 0) { if (type === 'upper') { num++; } else { num--; } } return num / multiple; } function calCandleMA(dayArr, nameArr, colorArr, kdata) { let seriesTemp = []; for (let k = 0; k < dayArr.length; k++) { let seriesItem = { data: [], name: nameArr[k], color: colorArr[k] }; for (let i = 0, len = kdata.length; i < len; i++) { if (i < dayArr[k]) { seriesItem.data.push(null); continue; } let sum = 0; for (let j = 0; j < dayArr[k]; j++) { sum += kdata[i - j][1]; } seriesItem.data.push(+(sum / dayArr[k]).toFixed(3)); } seriesTemp.push(seriesItem); } return seriesTemp; } function calValidDistance(self,distance, chartData, config, opts) { var dataChartAreaWidth = opts.width - opts.area[1] - opts.area[3]; var dataChartWidth = chartData.eachSpacing * (opts.chartData.xAxisData.xAxisPoints.length-1); var validDistance = distance; if (distance >= 0) { validDistance = 0; self.event.trigger('scrollLeft'); } else if (Math.abs(distance) >= dataChartWidth - dataChartAreaWidth) { validDistance = dataChartAreaWidth - dataChartWidth; self.event.trigger('scrollRight'); } return validDistance; } function isInAngleRange(angle, startAngle, endAngle) { function adjust(angle) { while (angle < 0) { angle += 2 * Math.PI; } while (angle > 2 * Math.PI) { angle -= 2 * Math.PI; } return angle; } angle = adjust(angle); startAngle = adjust(startAngle); endAngle = adjust(endAngle); if (startAngle > endAngle) { endAngle += 2 * Math.PI; if (angle < startAngle) { angle += 2 * Math.PI; } } return angle >= startAngle && angle <= endAngle; } function calRotateTranslate(x, y, h) { var xv = x; var yv = h - y; var transX = xv + (h - yv - xv) / Math.sqrt(2); transX *= -1; var transY = (h - yv) * (Math.sqrt(2) - 1) - (h - yv - xv) / Math.sqrt(2); return { transX: transX, transY: transY }; } function createCurveControlPoints(points, i) { function isNotMiddlePoint(points, i) { if (points[i - 1] && points[i + 1]) { return points[i].y >= Math.max(points[i - 1].y, points[i + 1].y) || points[i].y <= Math.min(points[i - 1].y,points[i + 1].y); } else { return false; } } function isNotMiddlePointX(points, i) { if (points[i - 1] && points[i + 1]) { return points[i].x >= Math.max(points[i - 1].x, points[i + 1].x) || points[i].x <= Math.min(points[i - 1].x,points[i + 1].x); } else { return false; } } var a = 0.2; var b = 0.2; var pAx = null; var pAy = null; var pBx = null; var pBy = null; if (i < 1) { pAx = points[0].x + (points[1].x - points[0].x) * a; pAy = points[0].y + (points[1].y - points[0].y) * a; } else { pAx = points[i].x + (points[i + 1].x - points[i - 1].x) * a; pAy = points[i].y + (points[i + 1].y - points[i - 1].y) * a; } if (i > points.length - 3) { var last = points.length - 1; pBx = points[last].x - (points[last].x - points[last - 1].x) * b; pBy = points[last].y - (points[last].y - points[last - 1].y) * b; } else { pBx = points[i + 1].x - (points[i + 2].x - points[i].x) * b; pBy = points[i + 1].y - (points[i + 2].y - points[i].y) * b; } if (isNotMiddlePoint(points, i + 1)) { pBy = points[i + 1].y; } if (isNotMiddlePoint(points, i)) { pAy = points[i].y; } if (isNotMiddlePointX(points, i + 1)) { pBx = points[i + 1].x; } if (isNotMiddlePointX(points, i)) { pAx = points[i].x; } if (pAy >= Math.max(points[i].y, points[i + 1].y) || pAy <= Math.min(points[i].y, points[i + 1].y)) { pAy = points[i].y; } if (pBy >= Math.max(points[i].y, points[i + 1].y) || pBy <= Math.min(points[i].y, points[i + 1].y)) { pBy = points[i + 1].y; } if (pAx >= Math.max(points[i].x, points[i + 1].x) || pAx <= Math.min(points[i].x, points[i + 1].x)) { pAx = points[i].x; } if (pBx >= Math.max(points[i].x, points[i + 1].x) || pBx <= Math.min(points[i].x, points[i + 1].x)) { pBx = points[i + 1].x; } return { ctrA: { x: pAx, y: pAy }, ctrB: { x: pBx, y: pBy } }; } function convertCoordinateOrigin(x, y, center) { return { x: center.x + x, y: center.y - y }; } function avoidCollision(obj, target) { if (target) { // is collision test while (util.isCollision(obj, target)) { if (obj.start.x > 0) { obj.start.y--; } else if (obj.start.x < 0) { obj.start.y++; } else { if (obj.start.y > 0) { obj.start.y++; } else { obj.start.y--; } } } } return obj; } function fillSeries(series, opts, config) { var index = 0; return series.map(function(item) { if (!item.color) { item.color = config.colors[index]; index = (index + 1) % config.colors.length; } if (!item.index) { item.index = 0; } if (!item.type) { item.type = opts.type; } if (typeof item.show == "undefined") { item.show = true; } if (!item.type) { item.type = opts.type; } if (!item.pointShape) { item.pointShape = "circle"; } if (!item.legendShape) { switch (item.type) { case 'line': item.legendShape = "line"; break; case 'column': item.legendShape = "rect"; break; case 'area': item.legendShape = "triangle"; break; default: item.legendShape = "circle"; } } return item; }); } function getDataRange(minData, maxData) { var limit = 0; var range = maxData - minData; if (range >= 10000) { limit = 1000; } else if (range >= 1000) { limit = 100; } else if (range >= 100) { limit = 10; } else if (range >= 10) { limit = 5; } else if (range >= 1) { limit = 1; } else if (range >= 0.1) { limit = 0.1; } else if (range >= 0.01) { limit = 0.01; } else if (range >= 0.001) { limit = 0.001; } else if (range >= 0.0001) { limit = 0.0001; } else if (range >= 0.00001) { limit = 0.00001; } else { limit = 0.000001; } return { minRange: findRange(minData, 'lower', limit), maxRange: findRange(maxData, 'upper', limit) }; } function measureText(text) { var fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : config.fontSize; text = String(text); var text = text.split(''); var width = 0; for (let i = 0; i < text.length; i++) { let item = text[i]; if (/[a-zA-Z]/.test(item)) { width += 7; } else if (/[0-9]/.test(item)) { width += 5.5; } else if (/\./.test(item)) { width += 2.7; } else if (/-/.test(item)) { width += 3.25; } else if (/[\u4e00-\u9fa5]/.test(item)) { width += 10; } else if (/\(|\)/.test(item)) { width += 3.73; } else if (/\s/.test(item)) { width += 2.5; } else if (/%/.test(item)) { width += 8; } else { width += 10; } } return width * fontSize / 10; } function dataCombine(series) { return series.reduce(function(a, b) { return (a.data ? a.data : a).concat(b.data); }, []); } function dataCombineStack(series, len) { var sum = new Array(len); for (var j = 0; j < sum.length; j++) { sum[j] = 0; } for (var i = 0; i < series.length; i++) { for (var j = 0; j < sum.length; j++) { sum[j] += series[i].data[j]; } } return series.reduce(function(a, b) { return (a.data ? a.data : a).concat(b.data).concat(sum); }, []); } function getTouches(touches, opts, e) { let x, y; if (touches.clientX) { if (opts.rotate) { y = opts.height - touches.clientX * opts.pixelRatio; x = (touches.pageY - e.currentTarget.offsetTop - (opts.height / opts.pixelRatio / 2) * (opts.pixelRatio - 1)) * opts.pixelRatio; } else { x = touches.clientX * opts.pixelRatio; y = (touches.pageY - e.currentTarget.offsetTop - (opts.height / opts.pixelRatio / 2) * (opts.pixelRatio - 1)) * opts.pixelRatio; } } else { if (opts.rotate) { y = opts.height - touches.x * opts.pixelRatio; x = touches.y * opts.pixelRatio; } else { x = touches.x * opts.pixelRatio; y = touches.y * opts.pixelRatio; } } return { x: x, y: y } } function getSeriesDataItem(series, index) { var data = []; for (let i = 0; i < series.length; i++) { let item = series[i]; if (item.data[index] !== null && typeof item.data[index] !== 'undefined' && item.show) { let seriesItem = {}; seriesItem.color = item.color; seriesItem.type = item.type; seriesItem.style = item.style; seriesItem.pointShape = item.pointShape; seriesItem.disableLegend = item.disableLegend; seriesItem.name = item.name; seriesItem.show = item.show; seriesItem.data = item.format ? item.format(item.data[index]) : item.data[index]; data.push(seriesItem); } } return data; } function getMaxTextListLength(list) { var lengthList = list.map(function(item) { return measureText(item); }); return Math.max.apply(null, lengthList); } function getRadarCoordinateSeries(length) { var eachAngle = 2 * Math.PI / length; var CoordinateSeries = []; for (var i = 0; i < length; i++) { CoordinateSeries.push(eachAngle * i); } return CoordinateSeries.map(function(item) { return -1 * item + Math.PI / 2; }); } function getToolTipData(seriesData, calPoints, index, categories) { var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {}; var textList = seriesData.map(function(item) { let titleText=[]; if(categories){ titleText=categories; }else{ titleText=item.data; } return { text: option.format ? option.format(item, titleText[index]) : item.name + ': ' + item.data, color: item.color }; }); var validCalPoints = []; var offset = { x: 0, y: 0 }; for (let i = 0; i < calPoints.length; i++) { let points = calPoints[i]; if (typeof points[index] !== 'undefined' && points[index] !== null) { validCalPoints.push(points[index]); } } for (let i = 0; i < validCalPoints.length; i++) { let item = validCalPoints[i]; offset.x = Math.round(item.x); offset.y += item.y; } offset.y /= validCalPoints.length; return { textList: textList, offset: offset }; } function getMixToolTipData(seriesData, calPoints, index, categories) { var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {}; var textList = seriesData.map(function(item) { return { text: option.format ? option.format(item, categories[index]) : item.name + ': ' + item.data, color: item.color, disableLegend: item.disableLegend ? true : false }; }); textList = textList.filter(function(item) { if (item.disableLegend !== true) { return item; } }); var validCalPoints = []; var offset = { x: 0, y: 0 }; for (let i = 0; i < calPoints.length; i++) { let points = calPoints[i]; if (typeof points[index] !== 'undefined' && points[index] !== null) { validCalPoints.push(points[index]); } } for (let i = 0; i < validCalPoints.length; i++) { let item = validCalPoints[i]; offset.x = Math.round(item.x); offset.y += item.y; } offset.y /= validCalPoints.length; return { textList: textList, offset: offset }; } function getCandleToolTipData(series, seriesData, calPoints, index, categories, extra) { var option = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : {}; let upColor = extra.color.upFill; let downColor = extra.color.downFill; //颜色顺序为开盘,收盘,最低,最高 let color = [upColor, upColor, downColor, upColor]; var textList = []; let text0 = { text: categories[index], color: null }; textList.push(text0); seriesData.map(function(item) { if (index == 0 && item.data[1] - item.data[0] < 0) { color[1] = downColor; } else { if (item.data[0] < series[index - 1][1]) { color[0] = downColor; } if (item.data[1] < item.data[0]) { color[1] = downColor; } if (item.data[2] > series[index - 1][1]) { color[2] = upColor; } if (item.data[3] < series[index - 1][1]) { color[3] = downColor; } } let text1 = { text: '开盘:' + item.data[0], color: color[0] }; let text2 = { text: '收盘:' + item.data[1], color: color[1] }; let text3 = { text: '最低:' + item.data[2], color: color[2] }; let text4 = { text: '最高:' + item.data[3], color: color[3] }; textList.push(text1, text2, text3, text4); }); var validCalPoints = []; var offset = { x: 0, y: 0 }; for (let i = 0; i < calPoints.length; i++) { let points = calPoints[i]; if (typeof points[index] !== 'undefined' && points[index] !== null) { validCalPoints.push(points[index]); } } offset.x = Math.round(validCalPoints[0][0].x); return { textList: textList, offset: offset }; } function filterSeries(series) { let tempSeries = []; for (let i = 0; i < series.length; i++) { if (series[i].show == true) { tempSeries.push(series[i]) } } return tempSeries; } function findCurrentIndex(currentPoints, calPoints, opts, config) { var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0; var currentIndex = -1; var spacing = opts.chartData.eachSpacing/2; let xAxisPoints=[]; if(calPoints.length>0){ if(opts.type=='candle'){ for(let i=0;i item) { currentIndex = index; } }); } } return currentIndex; } function findLegendIndex(currentPoints, legendData, opts) { let currentIndex = -1; if (isInExactLegendArea(currentPoints, legendData.area)) { let points = legendData.points; let index = -1; for (let i = 0, len = points.length; i < len; i++) { let item = points[i]; for (let j = 0; j < item.length; j++) { index += 1; let area = item[j]['area']; if (currentPoints.x > area[0] && currentPoints.x < area[2] && currentPoints.y > area[1] && currentPoints.y < area[3]) { currentIndex = index; break; } } } return currentIndex; } return currentIndex; } function isInExactLegendArea(currentPoints, area) { return currentPoints.x > area.start.x && currentPoints.x < area.end.x && currentPoints.y > area.start.y && currentPoints.y < area.end.y; } function isInExactChartArea(currentPoints, opts, config) { 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]; } function findRadarChartCurrentIndex(currentPoints, radarData, count) { var eachAngleArea = 2 * Math.PI / count; var currentIndex = -1; if (isInExactPieChartArea(currentPoints, radarData.center, radarData.radius)) { var fixAngle = function fixAngle(angle) { if (angle < 0) { angle += 2 * Math.PI; } if (angle > 2 * Math.PI) { angle -= 2 * Math.PI; } return angle; }; var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x); angle = -1 * angle; if (angle < 0) { angle += 2 * Math.PI; } var angleList = radarData.angleList.map(function(item) { item = fixAngle(-1 * item); return item; }); angleList.forEach(function(item, index) { var rangeStart = fixAngle(item - eachAngleArea / 2); var rangeEnd = fixAngle(item + eachAngleArea / 2); if (rangeEnd < rangeStart) { rangeEnd += 2 * Math.PI; } if (angle >= rangeStart && angle <= rangeEnd || angle + 2 * Math.PI >= rangeStart && angle + 2 * Math.PI <= rangeEnd) { currentIndex = index; } }); } return currentIndex; } function findFunnelChartCurrentIndex(currentPoints, funnelData) { var currentIndex = -1; for (var i = 0, len = funnelData.series.length; i < len; i++) { var item = funnelData.series[i]; if (currentPoints.x > item.funnelArea[0] && currentPoints.x < item.funnelArea[2] && currentPoints.y > item.funnelArea[1] && currentPoints.y < item.funnelArea[3]) { currentIndex = i; break; } } return currentIndex; } function findWordChartCurrentIndex(currentPoints, wordData) { var currentIndex = -1; for (var i = 0, len = wordData.length; i < len; i++) { var item = wordData[i]; if (currentPoints.x > item.area[0] && currentPoints.x < item.area[2] && currentPoints.y > item.area[1] && currentPoints.y < item.area[3]) { currentIndex = i; break; } } return currentIndex; } function findMapChartCurrentIndex(currentPoints, opts) { var currentIndex = -1; var cData=opts.chartData.mapData; var data=opts.series; var tmp=pointToCoordinate(currentPoints.y, currentPoints.x,cData.bounds,cData.scale,cData.xoffset,cData.yoffset); var poi=[tmp.x, tmp.y]; for (var i = 0, len = data.length; i < len; i++) { var item = data[i].geometry.coordinates; if(isPoiWithinPoly(poi,item)){ currentIndex = i; break; } } return currentIndex; } function findPieChartCurrentIndex(currentPoints, pieData) { var currentIndex = -1; if (isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) { var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x); angle = -angle; for (var i = 0, len = pieData.series.length; i < len; i++) { var item = pieData.series[i]; if (isInAngleRange(angle, item._start_, item._start_ + item._proportion_ * 2 * Math.PI)) { currentIndex = i; break; } } } return currentIndex; } function isInExactPieChartArea(currentPoints, center, radius) { return Math.pow(currentPoints.x - center.x, 2) + Math.pow(currentPoints.y - center.y, 2) <= Math.pow(radius, 2); } function splitPoints(points) { var newPoints = []; var items = []; points.forEach(function(item, index) { if (item !== null) { items.push(item); } else { if (items.length) { newPoints.push(items); } items = []; } }); if (items.length) { newPoints.push(items); } return newPoints; } function calLegendData(series, opts, config, chartData) { let legendData = { area: { start: { x: 0, y: 0 }, end: { x: 0, y: 0 }, width: 0, height: 0, wholeWidth: 0, wholeHeight: 0 }, points: [], widthArr: [], heightArr: [] }; if (opts.legend.show === false) { chartData.legendData = legendData; return legendData; } let padding = opts.legend.padding; let margin = opts.legend.margin; let fontSize = opts.legend.fontSize; let shapeWidth = 15 * opts.pixelRatio; let shapeRight = 5 * opts.pixelRatio; let lineHeight = Math.max(opts.legend.lineHeight * opts.pixelRatio, fontSize); if (opts.legend.position == 'top' || opts.legend.position == 'bottom') { let legendList = []; let widthCount = 0; let widthCountArr = []; let currentRow = []; for (let i = 0; i < series.length; i++) { let item = series[i]; let itemWidth = shapeWidth + shapeRight + measureText(item.name || 'undefined', fontSize) + opts.legend.itemGap; if (widthCount + itemWidth > opts.width - opts.padding[1] - opts.padding[3]) { legendList.push(currentRow); widthCountArr.push(widthCount - opts.legend.itemGap); widthCount = itemWidth; currentRow = [item]; } else { widthCount += itemWidth; currentRow.push(item); } } if (currentRow.length) { legendList.push(currentRow); widthCountArr.push(widthCount - opts.legend.itemGap); legendData.widthArr = widthCountArr; let legendWidth = Math.max.apply(null, widthCountArr); switch (opts.legend.float) { case 'left': legendData.area.start.x = opts.padding[3]; legendData.area.end.x = opts.padding[3] + 2 * padding; break; case 'right': legendData.area.start.x = opts.width - opts.padding[1] - legendWidth - 2 * padding; legendData.area.end.x = opts.width - opts.padding[1]; break; default: legendData.area.start.x = (opts.width - legendWidth) / 2 - padding; legendData.area.end.x = (opts.width + legendWidth) / 2 + padding; } legendData.area.width = legendWidth + 2 * padding; legendData.area.wholeWidth = legendWidth + 2 * padding; legendData.area.height = legendList.length * lineHeight + 2 * padding; legendData.area.wholeHeight = legendList.length * lineHeight + 2 * padding + 2 * margin; legendData.points = legendList; } } else { let len = series.length; let maxHeight = opts.height - opts.padding[0] - opts.padding[2] - 2 * margin - 2 * padding; let maxLength = Math.min(Math.floor(maxHeight / lineHeight), len); legendData.area.height = maxLength * lineHeight + padding * 2; legendData.area.wholeHeight = maxLength * lineHeight + padding * 2; switch (opts.legend.float) { case 'top': legendData.area.start.y = opts.padding[0] + margin; legendData.area.end.y = opts.padding[0] + margin + legendData.area.height; break; case 'bottom': legendData.area.start.y = opts.height - opts.padding[2] - margin - legendData.area.height; legendData.area.end.y = opts.height - opts.padding[2] - margin; break; default: legendData.area.start.y = (opts.height - legendData.area.height) / 2; legendData.area.end.y = (opts.height + legendData.area.height) / 2; } let lineNum = len % maxLength === 0 ? len / maxLength : Math.floor((len / maxLength) + 1); let currentRow = []; for (let i = 0; i < lineNum; i++) { let temp = series.slice(i * maxLength, i * maxLength + maxLength); currentRow.push(temp); } legendData.points = currentRow; if (currentRow.length) { for (let i = 0; i < currentRow.length; i++) { let item = currentRow[i]; let maxWidth = 0; for (let j = 0; j < item.length; j++) { let itemWidth = shapeWidth + shapeRight + measureText(item[j].name || 'undefined', fontSize) + opts.legend.itemGap; if (itemWidth > maxWidth) { maxWidth = itemWidth; } } legendData.widthArr.push(maxWidth); legendData.heightArr.push(item.length * lineHeight + padding * 2); } let legendWidth = 0 for (let i = 0; i < legendData.widthArr.length; i++) { legendWidth += legendData.widthArr[i]; } legendData.area.width = legendWidth - opts.legend.itemGap + 2 * padding; legendData.area.wholeWidth = legendData.area.width + padding; } } switch (opts.legend.position) { case 'top': legendData.area.start.y = opts.padding[0] + margin; legendData.area.end.y = opts.padding[0] + margin + legendData.area.height; break; case 'bottom': legendData.area.start.y = opts.height - opts.padding[2] - legendData.area.height - margin; legendData.area.end.y = opts.height - opts.padding[2] - margin; break; case 'left': legendData.area.start.x = opts.padding[3]; legendData.area.end.x = opts.padding[3] + legendData.area.width; break; case 'right': legendData.area.start.x = opts.width - opts.padding[1] - legendData.area.width; legendData.area.end.x = opts.width - opts.padding[1]; break; } chartData.legendData = legendData; return legendData; } function calCategoriesData(categories, opts, config, eachSpacing) { var result = { angle: 0, xAxisHeight: config.xAxisHeight }; var categoriesTextLenth = categories.map(function(item) { return measureText(item,opts.xAxis.fontSize||config.fontSize); }); var maxTextLength = Math.max.apply(this, categoriesTextLenth); if (opts.xAxis.rotateLabel == true && maxTextLength + 2 * config.xAxisTextPadding > eachSpacing) { result.angle = 45 * Math.PI / 180; result.xAxisHeight = 2 * config.xAxisTextPadding + maxTextLength * Math.sin(result.angle); } return result; } function getXAxisTextList(series, opts, config) { var index = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1; var data = dataCombine(series); var sorted = []; // remove null from data data = data.filter(function(item) { //return item !== null; if (typeof item === 'object' && item !== null) { if (item.constructor == Array) { return item !== null; } else { return item.value !== null; } } else { return item !== null; } }); data.map(function(item) { if (typeof item === 'object') { if (item.constructor == Array) { if(opts.type=='candle'){ item.map(function(subitem) { sorted.push(subitem); }) }else{ sorted.push(item[0]); } } else { sorted.push(item.value); } } else { sorted.push(item); } }) var minData = 0; var maxData = 0; if (sorted.length > 0) { minData = Math.min.apply(this, sorted); maxData = Math.max.apply(this, sorted); } //为了兼容v1.9.0之前的项目 if(index>-1){ if (typeof opts.xAxis.data[index].min === 'number') { minData = Math.min(opts.xAxis.data[index].min, minData); } if (typeof opts.xAxis.data[index].max === 'number') { maxData = Math.max(opts.xAxis.data[index].max, maxData); } }else{ if (typeof opts.xAxis.min === 'number') { minData = Math.min(opts.xAxis.min, minData); } if (typeof opts.xAxis.max === 'number') { maxData = Math.max(opts.xAxis.max, maxData); } } if (minData === maxData) { var rangeSpan = maxData || 10; maxData += rangeSpan; } //var dataRange = getDataRange(minData, maxData); var minRange = minData; var maxRange = maxData; var range = []; var eachRange = (maxRange - minRange) / opts.xAxis.splitNumber; for (var i = 0; i <= opts.xAxis.splitNumber; i++) { range.push(minRange + eachRange * i); } return range; } function calXAxisData(series, opts, config){ var result = { angle: 0, xAxisHeight: config.xAxisHeight }; result.ranges = getXAxisTextList(series, opts, config); result.rangesFormat = result.ranges.map(function(item){ item = opts.xAxis.format? opts.xAxis.format(item):util.toFixed(item, 2); return item; }); var xAxisScaleValues = result.ranges.map(function (item) { // 如果刻度值是浮点数,则保留两位小数 item = util.toFixed(item, 2); // 若有自定义格式则调用自定义的格式化函数 item = opts.xAxis.format ? opts.xAxis.format(Number(item)) : item; return item; }); result = Object.assign(result,getXAxisPoints(xAxisScaleValues, opts, config)); // 计算X轴刻度的属性譬如每个刻度的间隔,刻度的起始点\结束点以及总长 var eachSpacing = result.eachSpacing; var textLength = xAxisScaleValues.map(function (item) { return measureText(item); }); // get max length of categories text var maxTextLength = Math.max.apply(this, textLength); // 如果刻度值文本内容过长,则将其逆时针旋转45° if (maxTextLength + 2 * config.xAxisTextPadding > eachSpacing) { result.angle = 45 * Math.PI / 180; result.xAxisHeight = 2 * config.xAxisTextPadding + maxTextLength * Math.sin(result.angle); } if (opts.xAxis.disabled === true) { result.xAxisHeight = 0; } return result; } function getRadarDataPoints(angleList, center, radius, series, opts) { var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1; var radarOption = opts.extra.radar || {}; radarOption.max = radarOption.max || 0; var maxData = Math.max(radarOption.max, Math.max.apply(null, dataCombine(series))); var data = []; for (let i = 0; i < series.length; i++) { let each = series[i]; let listItem = {}; listItem.color = each.color; listItem.legendShape = each.legendShape; listItem.pointShape = each.pointShape; listItem.data = []; each.data.forEach(function(item, index) { let tmp = {}; tmp.angle = angleList[index]; tmp.proportion = item / maxData; tmp.position = convertCoordinateOrigin(radius * tmp.proportion * process * Math.cos(tmp.angle), radius * tmp.proportion * process * Math.sin(tmp.angle), center); listItem.data.push(tmp); }); data.push(listItem); } return data; } function getPieDataPoints(series, radius) { var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; var count = 0; var _start_ = 0; for (let i = 0; i < series.length; i++) { let item = series[i]; item.data = item.data === null ? 0 : item.data; count += item.data; } for (let i = 0; i < series.length; i++) { let item = series[i]; item.data = item.data === null ? 0 : item.data; if (count === 0) { item._proportion_ = 1 / series.length * process; } else { item._proportion_ = item.data / count * process; } item._radius_ = radius; } for (let i = 0; i < series.length; i++) { let item = series[i]; item._start_ = _start_; _start_ += 2 * item._proportion_ * Math.PI; } return series; } function getFunnelDataPoints(series, radius) { var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; series = series.sort(function(a,b){return parseInt(b.data)-parseInt(a.data);}); for (let i = 0; i < series.length; i++) { series[i].radius = series[i].data/series[0].data*radius*process; series[i]._proportion_ = series[i].data/series[0].data; } return series.reverse(); } function getRoseDataPoints(series, type, minRadius, radius) { var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; var count = 0; var _start_ = 0; var dataArr = []; for (let i = 0; i < series.length; i++) { let item = series[i]; item.data = item.data === null ? 0 : item.data; count += item.data; dataArr.push(item.data); } var minData = Math.min.apply(null, dataArr); var maxData = Math.max.apply(null, dataArr); var radiusLength = radius - minRadius; for (let i = 0; i < series.length; i++) { let item = series[i]; item.data = item.data === null ? 0 : item.data; if (count === 0 || type == 'area') { item._proportion_ = item.data / count * process; item._rose_proportion_ = 1 / series.length * process; } else { item._proportion_ = item.data / count * process; item._rose_proportion_ = item.data / count * process; } item._radius_ = minRadius + radiusLength * ((item.data - minData) / (maxData - minData)); } for (let i = 0; i < series.length; i++) { let item = series[i]; item._start_ = _start_; _start_ += 2 * item._rose_proportion_ * Math.PI; } return series; } function getArcbarDataPoints(series, arcbarOption) { var process = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1; if (process == 1) { process = 0.999999; } for (let i = 0; i < series.length; i++) { let item = series[i]; item.data = item.data === null ? 0 : item.data; let totalAngle; if (arcbarOption.type == 'circle') { totalAngle = 2; } else { if (arcbarOption.endAngle < arcbarOption.startAngle) { totalAngle = 2 + arcbarOption.endAngle - arcbarOption.startAngle; } else{ totalAngle = arcbarOption.startAngle - arcbarOption.endAngle; } } item._proportion_ = totalAngle * item.data * process + arcbarOption.startAngle; if (item._proportion_ >= 2) { item._proportion_ = item._proportion_ % 2; } } return series; } function getGaugeAxisPoints(categories, startAngle, endAngle) { let totalAngle = startAngle - endAngle + 1; let tempStartAngle = startAngle; for (let i = 0; i < categories.length; i++) { categories[i].value = categories[i].value === null ? 0 : categories[i].value; categories[i]._startAngle_ = tempStartAngle; categories[i]._endAngle_ = totalAngle * categories[i].value + startAngle; if (categories[i]._endAngle_ >= 2) { categories[i]._endAngle_ = categories[i]._endAngle_ % 2; } tempStartAngle = categories[i]._endAngle_; } return categories; } function getGaugeDataPoints(series, categories, gaugeOption) { let process = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1; for (let i = 0; i < series.length; i++) { let item = series[i]; item.data = item.data === null ? 0 : item.data; if (gaugeOption.pointer.color == 'auto') { for (let i = 0; i < categories.length; i++) { if (item.data <= categories[i].value) { item.color = categories[i].color; break; } } } else { item.color = gaugeOption.pointer.color; } let totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1; item._endAngle_ = totalAngle * item.data + gaugeOption.startAngle; item._oldAngle_ = gaugeOption.oldAngle; if (gaugeOption.oldAngle < gaugeOption.endAngle) { item._oldAngle_ += 2; } if (item.data >= gaugeOption.oldData) { item._proportion_ = (item._endAngle_ - item._oldAngle_) * process + gaugeOption.oldAngle; } else { item._proportion_ = item._oldAngle_ - (item._oldAngle_ - item._endAngle_) * process; } if (item._proportion_ >= 2) { item._proportion_ = item._proportion_ % 2; } } return series; } function getPieTextMaxLength(series) { series = getPieDataPoints(series); let maxLength = 0; for (let i = 0; i < series.length; i++) { let item = series[i]; let text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) + '%'; maxLength = Math.max(maxLength, measureText(text)); } return maxLength; } function fixColumeData(points, eachSpacing, columnLen, index, config, opts) { return points.map(function(item) { if (item === null) { return null; } item.width = Math.ceil((eachSpacing - 2 * config.columePadding) / columnLen); if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) { item.width = Math.min(item.width, +opts.extra.column.width); } if (item.width <= 0) { item.width = 1; } item.x += (index + 0.5 - columnLen / 2) * item.width; return item; }); } function fixColumeMeterData(points, eachSpacing, columnLen, index, config, opts, border) { return points.map(function(item) { if (item === null) { return null; } item.width = Math.ceil((eachSpacing - 2 * config.columePadding) / 2); if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) { item.width = Math.min(item.width, +opts.extra.column.width); } if (index > 0) { item.width -= 2 * border; } return item; }); } function fixColumeStackData(points, eachSpacing, columnLen, index, config, opts, series) { return points.map(function(item, indexn) { if (item === null) { return null; } item.width = Math.ceil((eachSpacing - 2 * config.columePadding) / 2); if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) { item.width = Math.min(item.width, +opts.extra.column.width); } return item; }); } function getXAxisPoints(categories, opts, config) { var spacingValid = opts.width - opts.area[1] - opts.area[3]; var dataCount = opts.enableScroll ? Math.min(opts.xAxis.itemCount, categories.length) : categories.length; if((opts.type=='line' || opts.type=='area') && dataCount>1 && opts.xAxis.boundaryGap=='justify'){ dataCount -=1; } var eachSpacing = spacingValid / dataCount; var xAxisPoints = []; var startX = opts.area[3]; var endX = opts.width - opts.area[1]; categories.forEach(function(item, index) { xAxisPoints.push(startX + index * eachSpacing); }); if(opts.xAxis.boundaryGap !=='justify'){ if (opts.enableScroll === true) { xAxisPoints.push(startX + categories.length * eachSpacing); } else { xAxisPoints.push(endX); } } return { xAxisPoints: xAxisPoints, startX: startX, endX: endX, eachSpacing: eachSpacing }; } function getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) { var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1; var points = []; var validHeight = opts.height - opts.area[0] - opts.area[2]; data.forEach(function(item, index) { if (item === null) { points.push(null); } else { var cPoints = []; item.forEach(function(items, indexs) { var point = {}; point.x = xAxisPoints[index] + Math.round(eachSpacing / 2); var value = items.value || items; var height = validHeight * (value - minRange) / (maxRange - minRange); height *= process; point.y = opts.height - Math.round(height) - opts.area[2]; cPoints.push(point); }); points.push(cPoints); } }); return points; } function getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) { var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1; var boundaryGap='center'; if (opts.type == 'line'||opts.type == 'area'){ boundaryGap=opts.xAxis.boundaryGap; } var points = []; var validHeight = opts.height - opts.area[0] - opts.area[2]; var validWidth = opts.width - opts.area[1] - opts.area[3]; data.forEach(function(item, index) { if (item === null) { points.push(null); } else { var point = {}; point.color = item.color; point.x = xAxisPoints[index]; var value = item; if (typeof item === 'object' && item !== null) { if (item.constructor == Array) { let xranges,xminRange,xmaxRange; xranges = [].concat(opts.chartData.xAxisData.ranges); xminRange = xranges.shift(); xmaxRange = xranges.pop(); value = item[1]; point.x = opts.area[3]+ validWidth * (item[0] - xminRange) / (xmaxRange - xminRange); } else { value = item.value; } } if(boundaryGap=='center'){ point.x += Math.round(eachSpacing / 2); } var height = validHeight * (value - minRange) / (maxRange - minRange); height *= process; point.y = opts.height - Math.round(height) - opts.area[2]; points.push(point); } }); return points; } function getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, stackSeries) { var process = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : 1; var points = []; var validHeight = opts.height - opts.area[0] - opts.area[2]; data.forEach(function(item, index) { if (item === null) { points.push(null); } else { var point = {}; point.color = item.color; point.x = xAxisPoints[index] + Math.round(eachSpacing / 2); if (seriesIndex > 0) { var value = 0; for (let i = 0; i <= seriesIndex; i++) { value += stackSeries[i].data[index]; } var value0 = value - item; var height = validHeight * (value - minRange) / (maxRange - minRange); var height0 = validHeight * (value0 - minRange) / (maxRange - minRange); } else { var value = item; var height = validHeight * (value - minRange) / (maxRange - minRange); var height0 = 0; } var heightc = height0; height *= process; heightc *= process; point.y = opts.height - Math.round(height) - opts.area[2]; point.y0 = opts.height - Math.round(heightc) - opts.area[2]; points.push(point); } }); return points; } function getYAxisTextList(series, opts, config, stack) { var index = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : -1; var data; if (stack == 'stack') { data = dataCombineStack(series, opts.categories.length); } else { data = dataCombine(series); } var sorted = []; // remove null from data data = data.filter(function(item) { //return item !== null; if (typeof item === 'object' && item !== null) { if (item.constructor == Array) { return item !== null; } else { return item.value !== null; } } else { return item !== null; } }); data.map(function(item) { if (typeof item === 'object') { if (item.constructor == Array) { if(opts.type=='candle'){ item.map(function(subitem) { sorted.push(subitem); }) }else{ sorted.push(item[1]); } } else { sorted.push(item.value); } } else { sorted.push(item); } }) var minData = 0; var maxData = 0; if (sorted.length > 0) { minData = Math.min.apply(this, sorted); maxData = Math.max.apply(this, sorted); } //为了兼容v1.9.0之前的项目 if(index>-1){ if (typeof opts.yAxis.data[index].min === 'number') { minData = Math.min(opts.yAxis.data[index].min, minData); } if (typeof opts.yAxis.data[index].max === 'number') { maxData = Math.max(opts.yAxis.data[index].max, maxData); } }else{ if (typeof opts.yAxis.min === 'number') { minData = Math.min(opts.yAxis.min, minData); } if (typeof opts.yAxis.max === 'number') { maxData = Math.max(opts.yAxis.max, maxData); } } if (minData === maxData) { var rangeSpan = maxData || 10; maxData += rangeSpan; } var dataRange = getDataRange(minData, maxData); var minRange = dataRange.minRange; var maxRange = dataRange.maxRange; var range = []; var eachRange = (maxRange - minRange) / opts.yAxis.splitNumber; for (var i = 0; i <= opts.yAxis.splitNumber; i++) { range.push(minRange + eachRange * i); } return range.reverse(); } function calYAxisData(series, opts, config) { //堆叠图重算Y轴 var columnstyle = assign({}, { type: "" }, opts.extra.column); //如果是多Y轴,重新计算 var YLength = opts.yAxis.data.length; var newSeries=new Array(YLength); if(YLength>0){ for(let i=0;i= 2) { nowAngle = nowAngle % 2; } nowNumber += splitNumber; } } function drawRadarLabel(angleList, radius, centerPosition, opts, config, context) { var radarOption = opts.extra.radar || {}; radius += config.radarLabelTextMargin; angleList.forEach(function(angle, index) { var pos = { x: radius * Math.cos(angle), y: radius * Math.sin(angle) }; var posRelativeCanvas = convertCoordinateOrigin(pos.x, pos.y, centerPosition); var startX = posRelativeCanvas.x; var startY = posRelativeCanvas.y; if (util.approximatelyEqual(pos.x, 0)) { startX -= measureText(opts.categories[index] || '') / 2; } else if (pos.x < 0) { startX -= measureText(opts.categories[index] || ''); } context.beginPath(); context.setFontSize(config.fontSize); context.setFillStyle(radarOption.labelColor || '#666666'); context.fillText(opts.categories[index] || '', startX, startY + config.fontSize / 2); context.closePath(); context.stroke(); }); } function drawPieText(series, opts, config, context, radius, center) { var lineRadius = config.pieChartLinePadding; var textObjectCollection = []; var lastTextObject = null; var seriesConvert = series.map(function(item) { var text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_.toFixed(4) * 100) +'%'; if(item._rose_proportion_) item._proportion_=item._rose_proportion_; var arc = 2 * Math.PI - (item._start_ + 2 * Math.PI * item._proportion_ / 2); var color = item.color; var radius = item._radius_; return { arc: arc, text: text, color: color, radius: radius, textColor: item.textColor, textSize: item.textSize, }; }); for (let i = 0; i < seriesConvert.length; i++) { let item = seriesConvert[i]; // line end let orginX1 = Math.cos(item.arc) * (item.radius + lineRadius); let orginY1 = Math.sin(item.arc) * (item.radius + lineRadius); // line start let orginX2 = Math.cos(item.arc) * item.radius; let orginY2 = Math.sin(item.arc) * item.radius; // text start let orginX3 = orginX1 >= 0 ? orginX1 + config.pieChartTextPadding : orginX1 - config.pieChartTextPadding; let orginY3 = orginY1; let textWidth = measureText(item.text,item.textSize||config.fontSize); let startY = orginY3; if (lastTextObject && util.isSameXCoordinateArea(lastTextObject.start, { x: orginX3 })) { if (orginX3 > 0) { startY = Math.min(orginY3, lastTextObject.start.y); } else if (orginX1 < 0) { startY = Math.max(orginY3, lastTextObject.start.y); } else { if (orginY3 > 0) { startY = Math.max(orginY3, lastTextObject.start.y); } else { startY = Math.min(orginY3, lastTextObject.start.y); } } } if (orginX3 < 0) { orginX3 -= textWidth; } let textObject = { lineStart: { x: orginX2, y: orginY2 }, lineEnd: { x: orginX1, y: orginY1 }, start: { x: orginX3, y: startY }, width: textWidth, height: config.fontSize, text: item.text, color: item.color, textColor: item.textColor, textSize: item.textSize }; lastTextObject = avoidCollision(textObject, lastTextObject); textObjectCollection.push(lastTextObject); } for (let i = 0; i < textObjectCollection.length; i++) { let item = textObjectCollection[i]; let lineStartPoistion = convertCoordinateOrigin(item.lineStart.x, item.lineStart.y, center); let lineEndPoistion = convertCoordinateOrigin(item.lineEnd.x, item.lineEnd.y, center); let textPosition = convertCoordinateOrigin(item.start.x, item.start.y, center); context.setLineWidth(1 * opts.pixelRatio); context.setFontSize(config.fontSize); context.beginPath(); context.setStrokeStyle(item.color); context.setFillStyle(item.color); context.moveTo(lineStartPoistion.x, lineStartPoistion.y); let curveStartX = item.start.x < 0 ? textPosition.x + item.width : textPosition.x; let textStartX = item.start.x < 0 ? textPosition.x - 5 : textPosition.x + 5; context.quadraticCurveTo(lineEndPoistion.x, lineEndPoistion.y, curveStartX, textPosition.y); context.moveTo(lineStartPoistion.x, lineStartPoistion.y); context.stroke(); context.closePath(); context.beginPath(); context.moveTo(textPosition.x + item.width, textPosition.y); context.arc(curveStartX, textPosition.y, 2, 0, 2 * Math.PI); context.closePath(); context.fill(); context.beginPath(); context.setFontSize(item.textSize || config.fontSize); context.setFillStyle(item.textColor || '#666666'); context.fillText(item.text, textStartX, textPosition.y + 3); context.closePath(); context.stroke(); context.closePath(); } } function drawToolTipSplitLine(offsetX, opts, config, context) { var toolTipOption = opts.extra.tooltip || {}; toolTipOption.gridType = toolTipOption.gridType == undefined ? 'solid' : toolTipOption.gridType; toolTipOption.dashLength = toolTipOption.dashLength == undefined ? 4 : toolTipOption.dashLength; var startY = opts.area[0]; var endY = opts.height - opts.area[2]; if (toolTipOption.gridType == 'dash') { context.setLineDash([toolTipOption.dashLength, toolTipOption.dashLength]); } context.setStrokeStyle(toolTipOption.gridColor || '#cccccc'); context.setLineWidth(1 * opts.pixelRatio); context.beginPath(); context.moveTo(offsetX, startY); context.lineTo(offsetX, endY); context.stroke(); context.setLineDash([]); if (toolTipOption.xAxisLabel) { let labelText = opts.categories[opts.tooltip.index]; context.setFontSize(config.fontSize); let textWidth = measureText(labelText, config.fontSize); let textX = offsetX - 0.5 * textWidth; let textY = endY; context.beginPath(); context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity)); context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground); context.setLineWidth(1 * opts.pixelRatio); context.rect(textX - config.toolTipPadding, textY, textWidth + 2 * config.toolTipPadding, config.fontSize + 2 * config.toolTipPadding); context.closePath(); context.stroke(); context.fill(); context.beginPath(); context.setFontSize(config.fontSize); context.setFillStyle(toolTipOption.labelFontColor || config.fontColor); context.fillText(String(labelText), textX, textY + config.toolTipPadding + config.fontSize); context.closePath(); context.stroke(); } } function drawMarkLine(opts, config, context) { let markLineOption = assign({}, { type: 'solid', dashLength: 4, data: [] }, opts.extra.markLine); let startX = opts.area[3]; let endX = opts.width - opts.area[1]; let points = calMarkLineData(markLineOption.data, opts); for (let i = 0; i < points.length; i++) { let item = assign({}, { lineColor: '#DE4A42', showLabel: false, labelFontColor: '#666666', labelBgColor: '#DFE8FF', labelBgOpacity: 0.8, yAxisIndex: 0 }, points[i]); if (markLineOption.type == 'dash') { context.setLineDash([markLineOption.dashLength, markLineOption.dashLength]); } context.setStrokeStyle(item.lineColor); context.setLineWidth(1 * opts.pixelRatio); context.beginPath(); context.moveTo(startX, item.y); context.lineTo(endX, item.y); context.stroke(); context.setLineDash([]); if (item.showLabel) { let labelText = opts.yAxis.format ? opts.yAxis.format(Number(item.value)) : item.value; context.setFontSize(config.fontSize); let textWidth = measureText(labelText, config.fontSize); let bgStartX = opts.padding[3] + config.yAxisTitleWidth - config.toolTipPadding; let bgEndX = Math.max(opts.area[3], textWidth + config.toolTipPadding * 2); let bgWidth = bgEndX - bgStartX; let textX = bgStartX + (bgWidth - textWidth) / 2; let textY = item.y; context.setFillStyle(hexToRgb(item.labelBgColor, item.labelBgOpacity)); context.setStrokeStyle(item.labelBgColor); context.setLineWidth(1 * opts.pixelRatio); context.beginPath(); context.rect(bgStartX, textY - 0.5 * config.fontSize - config.toolTipPadding, bgWidth, config.fontSize + 2 * config.toolTipPadding); context.closePath(); context.stroke(); context.fill(); context.beginPath(); context.setFontSize(config.fontSize); context.setFillStyle(item.labelFontColor); context.fillText(String(labelText), textX, textY + 0.5 * config.fontSize); context.stroke(); } } } function drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints) { var toolTipOption = assign({}, { gridType: 'solid', dashLength: 4 }, opts.extra.tooltip); var startX = opts.area[3]; var endX = opts.width - opts.area[1]; if (toolTipOption.gridType == 'dash') { context.setLineDash([toolTipOption.dashLength, toolTipOption.dashLength]); } context.setStrokeStyle(toolTipOption.gridColor || '#cccccc'); context.setLineWidth(1 * opts.pixelRatio); context.beginPath(); context.moveTo(startX, opts.tooltip.offset.y); context.lineTo(endX, opts.tooltip.offset.y); context.stroke(); context.setLineDash([]); if (toolTipOption.yAxisLabel) { let labelText = calTooltipYAxisData(opts.tooltip.offset.y, opts.series, opts, config, eachSpacing); let widthArr = opts.chartData.yAxisData.yAxisWidth; let tStartLeft=opts.area[3]; let tStartRight=opts.width-opts.area[1]; for(let i=0;i opts.width) { isOverRightBorder = true; } if (toolTipHeight + offset.y > opts.height) { offset.y = opts.height - toolTipHeight; } // draw background rect context.beginPath(); context.setFillStyle(hexToRgb(toolTipOption.bgColor || config.toolTipBackground, toolTipOption.bgOpacity || config.toolTipOpacity)); if (isOverRightBorder) { context.moveTo(offset.x, offset.y + 10 * opts.pixelRatio); context.lineTo(offset.x - arrowWidth, offset.y + 10 * opts.pixelRatio - 5 * opts.pixelRatio); context.lineTo(offset.x - arrowWidth, offset.y); context.lineTo(offset.x - arrowWidth - Math.round(toolTipWidth), offset.y); context.lineTo(offset.x - arrowWidth - Math.round(toolTipWidth), offset.y + toolTipHeight); context.lineTo(offset.x - arrowWidth, offset.y + toolTipHeight); context.lineTo(offset.x - arrowWidth, offset.y + 10 * opts.pixelRatio + 5 * opts.pixelRatio); context.lineTo(offset.x, offset.y + 10 * opts.pixelRatio); } else { context.moveTo(offset.x, offset.y + 10 * opts.pixelRatio); context.lineTo(offset.x + arrowWidth, offset.y + 10 * opts.pixelRatio - 5 * opts.pixelRatio); context.lineTo(offset.x + arrowWidth, offset.y); context.lineTo(offset.x + arrowWidth + Math.round(toolTipWidth), offset.y); context.lineTo(offset.x + arrowWidth + Math.round(toolTipWidth), offset.y + toolTipHeight); context.lineTo(offset.x + arrowWidth, offset.y + toolTipHeight); context.lineTo(offset.x + arrowWidth, offset.y + 10 * opts.pixelRatio + 5 * opts.pixelRatio); context.lineTo(offset.x, offset.y + 10 * opts.pixelRatio); } context.closePath(); context.fill(); // draw legend textList.forEach(function(item, index) { if (item.color !== null) { context.beginPath(); context.setFillStyle(item.color); var startX = offset.x + arrowWidth + 2 * config.toolTipPadding; var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding + 1; if (isOverRightBorder) { startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding; } context.fillRect(startX, startY, legendWidth, config.fontSize); context.closePath(); } }); // draw text list textList.forEach(function(item, index) { var startX = offset.x + arrowWidth + 2 * config.toolTipPadding + legendWidth + legendMarginRight; if (isOverRightBorder) { startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding + +legendWidth + legendMarginRight; } var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding; context.beginPath(); context.setFontSize(config.fontSize); context.setFillStyle(toolTipOption.fontColor); context.fillText(item.text, startX, startY + config.fontSize); context.closePath(); context.stroke(); }); } function drawYAxisTitle(title, opts, config, context) { var startX = config.xAxisHeight + (opts.height - config.xAxisHeight - measureText(title)) / 2; context.save(); context.beginPath(); context.setFontSize(config.fontSize); context.setFillStyle(opts.yAxis.titleFontColor || '#333333'); context.translate(0, opts.height); context.rotate(-90 * Math.PI / 180); context.fillText(title, startX, opts.padding[3] + 0.5 * config.fontSize); context.closePath(); context.stroke(); context.restore(); } function drawColumnDataPoints(series, opts, config, context) { let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; let xAxisData = opts.chartData.xAxisData, xAxisPoints = xAxisData.xAxisPoints, eachSpacing = xAxisData.eachSpacing; let columnOption = assign({}, { type: 'group', width: eachSpacing / 2, meter: { border: 4, fillColor: '#FFFFFF' } }, opts.extra.column); let calPoints = []; context.save(); let leftNum=-2; let rightNum=xAxisPoints.length+2; if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) { context.translate(opts._scrollDistance_, 0); leftNum=Math.floor(-opts._scrollDistance_/eachSpacing)-2; rightNum=leftNum+opts.xAxis.itemCount+4; } if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) { drawToolTipSplitArea(opts.tooltip.offset.x, opts, config, context, eachSpacing); } series.forEach(function(eachSeries, seriesIndex) { let ranges,minRange,maxRange; ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]); minRange = ranges.pop(); maxRange = ranges.shift(); var data = eachSeries.data; switch (columnOption.type) { case 'group': var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); var tooltipPoints = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series, process); calPoints.push(tooltipPoints); points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts); for(let i=0;ileftNum && ileftNum && i 0) { height -= height0; } context.moveTo(startX, item.y); context.fillRect(startX, item.y, item.width - 2, height); context.closePath(); context.fill(); } }; break; case 'meter': // 绘制温度计数据图 var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); calPoints.push(points); points = fixColumeMeterData(points, eachSpacing, series.length, seriesIndex, config, opts, columnOption.meter.border); if (seriesIndex == 0) { for(let i=0;ileftNum && i 0) { context.beginPath(); context.setStrokeStyle(eachSeries.color); context.setLineWidth(columnOption.meter.border * opts.pixelRatio); context.moveTo(startX + columnOption.meter.border * 0.5, item.y + height); context.lineTo(startX + columnOption.meter.border * 0.5, item.y + columnOption.meter.border * 0.5); context.lineTo(startX + item.width - columnOption.meter.border * 0.5, item.y + columnOption.meter.border * 0.5); context.lineTo(startX + item.width - columnOption.meter.border * 0.5, item.y + height); context.stroke(); } } }; } else { for(let i=0;ileftNum && i 5 && arguments[5] !== undefined ? arguments[5] : 1; var candleOption = assign({}, { color: {}, average: {} }, opts.extra.candle); candleOption.color = assign({}, { upLine: '#f04864', upFill: '#f04864', downLine: '#2fc25b', downFill: '#2fc25b' }, candleOption.color); candleOption.average = assign({}, { show: false, name: [], day: [], color: config.colors }, candleOption.average); opts.extra.candle = candleOption; let xAxisData = opts.chartData.xAxisData, xAxisPoints = xAxisData.xAxisPoints, eachSpacing = xAxisData.eachSpacing; let calPoints = []; context.save(); let leftNum=-2; let rightNum=xAxisPoints.length+2; let leftSpace=0; let rightSpace=opts.width+eachSpacing; if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) { context.translate(opts._scrollDistance_, 0); leftNum=Math.floor(-opts._scrollDistance_/eachSpacing)-2; rightNum=leftNum+opts.xAxis.itemCount+4; leftSpace=-opts._scrollDistance_-eachSpacing+opts.area[3]; rightSpace=leftSpace+(opts.xAxis.itemCount+4)*eachSpacing; } //画均线 if (candleOption.average.show) { seriesMA.forEach(function(eachSeries, seriesIndex) { let ranges,minRange,maxRange; ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]); minRange = ranges.pop(); maxRange = ranges.shift(); var data = eachSeries.data; var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); var splitPointList = splitPoints(points); for(let i=0;i leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { var ctrlPoint = createCurveControlPoints(points, j - 1); context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y,item.x, item.y); } } context.moveTo(points[0].x, points[0].y); } context.closePath(); context.stroke(); } }); } //画K线 series.forEach(function(eachSeries, seriesIndex) { let ranges,minRange,maxRange; ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]); minRange = ranges.pop(); maxRange = ranges.shift(); var data = eachSeries.data; var points = getCandleDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); calPoints.push(points); var splitPointList = splitPoints(points); for(let i=0;ileftNum && i 0) { context.setStrokeStyle(candleOption.color.upLine); context.setFillStyle(candleOption.color.upFill); context.setLineWidth(1 * opts.pixelRatio); context.moveTo(item[3].x, item[3].y); //顶点 context.lineTo(item[1].x, item[1].y); //收盘中间点 context.lineTo(item[1].x - eachSpacing / 4, item[1].y); //收盘左侧点 context.lineTo(item[0].x - eachSpacing / 4, item[0].y); //开盘左侧点 context.lineTo(item[0].x, item[0].y); //开盘中间点 context.lineTo(item[2].x, item[2].y); //底点 context.lineTo(item[0].x, item[0].y); //开盘中间点 context.lineTo(item[0].x + eachSpacing / 4, item[0].y); //开盘右侧点 context.lineTo(item[1].x + eachSpacing / 4, item[1].y); //收盘右侧点 context.lineTo(item[1].x, item[1].y); //收盘中间点 context.moveTo(item[3].x, item[3].y); //顶点 } else { context.setStrokeStyle(candleOption.color.downLine); context.setFillStyle(candleOption.color.downFill); context.setLineWidth(1 * opts.pixelRatio); context.moveTo(item[3].x, item[3].y); //顶点 context.lineTo(item[0].x, item[0].y); //开盘中间点 context.lineTo(item[0].x - eachSpacing / 4, item[0].y); //开盘左侧点 context.lineTo(item[1].x - eachSpacing / 4, item[1].y); //收盘左侧点 context.lineTo(item[1].x, item[1].y); //收盘中间点 context.lineTo(item[2].x, item[2].y); //底点 context.lineTo(item[1].x, item[1].y); //收盘中间点 context.lineTo(item[1].x + eachSpacing / 4, item[1].y); //收盘右侧点 context.lineTo(item[0].x + eachSpacing / 4, item[0].y); //开盘右侧点 context.lineTo(item[0].x, item[0].y); //开盘中间点 context.moveTo(item[3].x, item[3].y); //顶点 } context.closePath(); context.fill(); context.stroke(); } } }); context.restore(); return { xAxisPoints: xAxisPoints, calPoints: calPoints, eachSpacing: eachSpacing }; } function drawAreaDataPoints(series, opts, config, context) { var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; var areaOption = assign({},{ type: 'straight', opacity: 0.2, addLine: false, width: 2, gradient:false },opts.extra.area); let xAxisData = opts.chartData.xAxisData, xAxisPoints = xAxisData.xAxisPoints, eachSpacing = xAxisData.eachSpacing; let endY = opts.height - opts.area[2]; let calPoints = []; context.save(); let leftSpace=0; let rightSpace=opts.width+eachSpacing; if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) { context.translate(opts._scrollDistance_, 0); leftSpace=-opts._scrollDistance_-eachSpacing+opts.area[3]; rightSpace=leftSpace+(opts.xAxis.itemCount+4)*eachSpacing; } series.forEach(function(eachSeries, seriesIndex) { let ranges,minRange,maxRange; ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]); minRange = ranges.pop(); maxRange = ranges.shift(); let data = eachSeries.data; let points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); calPoints.push(points); let splitPointList = splitPoints(points); for (let i = 0; i < splitPointList.length; i++) { let points = splitPointList[i]; // 绘制区域数 context.beginPath(); context.setStrokeStyle(hexToRgb(eachSeries.color, areaOption.opacity)); if(areaOption.gradient){ let gradient = context.createLinearGradient(0, opts.area[0], 0, opts.height-opts.area[2]); gradient.addColorStop('0', hexToRgb(eachSeries.color, areaOption.opacity)); gradient.addColorStop('1.0',hexToRgb("#FFFFFF", 0.1)); context.setFillStyle(gradient); }else{ context.setFillStyle(hexToRgb(eachSeries.color, areaOption.opacity)); } context.setLineWidth(areaOption.width * opts.pixelRatio); if (points.length > 1) { let firstPoint = points[0]; let lastPoint = points[points.length - 1]; context.moveTo(firstPoint.x, firstPoint.y); let startPoint=0; if (areaOption.type === 'curve') { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { let ctrlPoint = createCurveControlPoints(points, j - 1); context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y,item.x, item.y); } }; } else { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { context.lineTo(item.x, item.y); } }; } context.lineTo(lastPoint.x, endY); context.lineTo(firstPoint.x, endY); context.lineTo(firstPoint.x, firstPoint.y); } else { let item = points[0]; context.moveTo(item.x - eachSpacing / 2, item.y); context.lineTo(item.x + eachSpacing / 2, item.y); context.lineTo(item.x + eachSpacing / 2, endY); context.lineTo(item.x - eachSpacing / 2, endY); context.moveTo(item.x - eachSpacing / 2, item.y); } context.closePath(); context.fill(); //画连线 if (areaOption.addLine) { if (eachSeries.lineType == 'dash') { let dashLength = eachSeries.dashLength?eachSeries.dashLength:8; dashLength *= opts.pixelRatio; context.setLineDash([dashLength, dashLength]); } context.beginPath(); context.setStrokeStyle(eachSeries.color); context.setLineWidth(areaOption.width * opts.pixelRatio); if (points.length === 1) { context.moveTo(points[0].x, points[0].y); context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI); } else { context.moveTo(points[0].x, points[0].y); let startPoint=0; if (areaOption.type === 'curve') { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { let ctrlPoint = createCurveControlPoints(points, j - 1); context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y,item.x,item.y); } }; } else { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { context.lineTo(item.x, item.y); } }; } context.moveTo(points[0].x, points[0].y); } context.stroke(); context.setLineDash([]); } } //画点 if (opts.dataPointShape !== false) { drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts); } }); if (opts.dataLabel !== false && process === 1) { series.forEach(function(eachSeries, seriesIndex) { let ranges,minRange,maxRange; ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]); minRange = ranges.pop(); maxRange = ranges.shift(); var data = eachSeries.data; var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); drawPointText(points, eachSeries, config, context); }); } context.restore(); return { xAxisPoints: xAxisPoints, calPoints: calPoints, eachSpacing: eachSpacing }; } function drawLineDataPoints(series, opts, config, context) { var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; var lineOption = assign({},{ type: 'straight', width: 2 },opts.extra.line); lineOption.width *=opts.pixelRatio; let xAxisData = opts.chartData.xAxisData, xAxisPoints = xAxisData.xAxisPoints, eachSpacing = xAxisData.eachSpacing; var calPoints = []; context.save(); let leftSpace=0; let rightSpace=opts.width+eachSpacing; if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) { context.translate(opts._scrollDistance_, 0); leftSpace=-opts._scrollDistance_-eachSpacing+opts.area[3]; rightSpace=leftSpace+(opts.xAxis.itemCount+4)*eachSpacing; } series.forEach(function(eachSeries, seriesIndex) { let ranges,minRange,maxRange; ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]); minRange = ranges.pop(); maxRange = ranges.shift(); var data = eachSeries.data; var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); calPoints.push(points); var splitPointList = splitPoints(points); if (eachSeries.lineType == 'dash') { let dashLength = eachSeries.dashLength?eachSeries.dashLength:8; dashLength *= opts.pixelRatio; context.setLineDash([dashLength, dashLength]); } context.beginPath(); context.setStrokeStyle(eachSeries.color); context.setLineWidth(lineOption.width); splitPointList.forEach(function(points, index) { if (points.length === 1) { context.moveTo(points[0].x, points[0].y); context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI); } else { context.moveTo(points[0].x, points[0].y); let startPoint=0; if (lineOption.type === 'curve') { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { var ctrlPoint = createCurveControlPoints(points, j - 1); context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y,item.x, item.y); } }; } else { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { context.lineTo(item.x, item.y); } }; } context.moveTo(points[0].x, points[0].y); } }); context.stroke(); context.setLineDash([]); if (opts.dataPointShape !== false) { drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts); } }); if (opts.dataLabel !== false && process === 1) { series.forEach(function(eachSeries, seriesIndex) { let ranges,minRange,maxRange; ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]); minRange = ranges.pop(); maxRange = ranges.shift(); var data = eachSeries.data; var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); drawPointText(points, eachSeries, config, context); }); } context.restore(); return { xAxisPoints: xAxisPoints, calPoints: calPoints, eachSpacing: eachSpacing }; } function drawMixDataPoints(series, opts, config, context) { let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; let xAxisData = opts.chartData.xAxisData, xAxisPoints = xAxisData.xAxisPoints, eachSpacing = xAxisData.eachSpacing; let endY = opts.height - opts.area[2]; let calPoints = []; var columnIndex = 0; var columnLength = 0; series.forEach(function(eachSeries, seriesIndex) { if (eachSeries.type == 'column') { columnLength += 1; } }); context.save(); let leftNum=-2; let rightNum=xAxisPoints.length+2; let leftSpace=0; let rightSpace=opts.width+eachSpacing; if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) { context.translate(opts._scrollDistance_, 0); leftNum=Math.floor(-opts._scrollDistance_/eachSpacing)-2; rightNum=leftNum+opts.xAxis.itemCount+4; leftSpace=-opts._scrollDistance_-eachSpacing+opts.area[3]; rightSpace=leftSpace+(opts.xAxis.itemCount+4)*eachSpacing; } series.forEach(function(eachSeries, seriesIndex) { let ranges,minRange,maxRange; ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]); minRange = ranges.pop(); maxRange = ranges.shift(); var data = eachSeries.data; var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); calPoints.push(points); // 绘制柱状数据图 if (eachSeries.type == 'column') { points = fixColumeData(points, eachSpacing, columnLength, columnIndex, config, opts); for(let i=0;ileftNum && i 1) { var firstPoint = points[0]; let lastPoint = points[points.length - 1]; context.moveTo(firstPoint.x, firstPoint.y); let startPoint=0; if (eachSeries.style === 'curve') { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { var ctrlPoint = createCurveControlPoints(points, j - 1); context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y, item.x, item.y); } }; } else { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { context.lineTo(item.x, item.y); } }; } context.lineTo(lastPoint.x, endY); context.lineTo(firstPoint.x, endY); context.lineTo(firstPoint.x, firstPoint.y); } else { let item = points[0]; context.moveTo(item.x - eachSpacing / 2, item.y); context.lineTo(item.x + eachSpacing / 2, item.y); context.lineTo(item.x + eachSpacing / 2, endY); context.lineTo(item.x - eachSpacing / 2, endY); context.moveTo(item.x - eachSpacing / 2, item.y); } context.closePath(); context.fill(); } } // 绘制折线数据图 if (eachSeries.type == 'line') { var splitPointList = splitPoints(points); splitPointList.forEach(function(points, index) { if (eachSeries.lineType == 'dash') { let dashLength = eachSeries.dashLength?eachSeries.dashLength:8; dashLength *= opts.pixelRatio; context.setLineDash([dashLength, dashLength]); } context.beginPath(); context.setStrokeStyle(eachSeries.color); context.setLineWidth(2 * opts.pixelRatio); if (points.length === 1) { context.moveTo(points[0].x, points[0].y); context.arc(points[0].x, points[0].y, 1, 0, 2 * Math.PI); } else { context.moveTo(points[0].x, points[0].y); let startPoint=0; if (eachSeries.style == 'curve') { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { var ctrlPoint = createCurveControlPoints(points, j - 1); context.bezierCurveTo(ctrlPoint.ctrA.x, ctrlPoint.ctrA.y, ctrlPoint.ctrB.x, ctrlPoint.ctrB.y,item.x,item.y); } } } else { for(let j=0;j leftSpace){ context.moveTo(item.x, item.y); startPoint=1; } if (j > 0 && item.x > leftSpace && item.x < rightSpace) { context.lineTo(item.x, item.y); } } } context.moveTo(points[0].x, points[0].y); } context.stroke(); context.setLineDash([]); }); } // 绘制点数据图 if (eachSeries.type == 'point') { eachSeries.addPoint = true; } if (eachSeries.addPoint == true && eachSeries.type !== 'column' ) { drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts); } }); if (opts.dataLabel !== false && process === 1) { var columnIndex = 0; series.forEach(function(eachSeries, seriesIndex) { let ranges,minRange,maxRange; ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]); minRange = ranges.pop(); maxRange = ranges.shift(); var data = eachSeries.data; var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process); if (eachSeries.type !== 'column') { drawPointText(points, eachSeries, config, context); } else { points = fixColumeData(points, eachSpacing, columnLength, columnIndex, config, opts); drawPointText(points, eachSeries, config, context); columnIndex += 1; } }); } context.restore(); return { xAxisPoints: xAxisPoints, calPoints: calPoints, eachSpacing: eachSpacing, } } function drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints) { var toolTipOption = opts.extra.tooltip || {}; if (toolTipOption.horizentalLine && opts.tooltip && process === 1 && (opts.type == 'line' || opts.type == 'area' || opts.type == 'column' || opts.type == 'candle' || opts.type == 'mix')) { drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints) } context.save(); if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) { context.translate(opts._scrollDistance_, 0); } if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) { drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context, eachSpacing, xAxisPoints); } context.restore(); } function drawXAxis(categories, opts, config, context) { let xAxisData = opts.chartData.xAxisData, xAxisPoints = xAxisData.xAxisPoints, startX = xAxisData.startX, endX = xAxisData.endX, eachSpacing = xAxisData.eachSpacing; var boundaryGap='center'; if (opts.type == 'line'||opts.type == 'area'){ boundaryGap=opts.xAxis.boundaryGap; } var startY = opts.height - opts.area[2]; var endY = opts.area[0]; //绘制滚动条 if (opts.enableScroll && opts.xAxis.scrollShow) { var scrollY = opts.height - opts.area[2] + config.xAxisHeight; var scrollScreenWidth = endX - startX; var scrollTotalWidth = eachSpacing * (xAxisPoints.length - 1); var scrollWidth = scrollScreenWidth * scrollScreenWidth / scrollTotalWidth; var scrollLeft = 0; if (opts._scrollDistance_) { scrollLeft = -opts._scrollDistance_ * (scrollScreenWidth) / scrollTotalWidth; } context.beginPath(); context.setLineCap('round'); context.setLineWidth(6 * opts.pixelRatio); context.setStrokeStyle(opts.xAxis.scrollBackgroundColor || "#EFEBEF"); context.moveTo(startX, scrollY); context.lineTo(endX, scrollY); context.stroke(); context.closePath(); context.beginPath(); context.setLineCap('round'); context.setLineWidth(6 * opts.pixelRatio); context.setStrokeStyle(opts.xAxis.scrollColor || "#A6A6A6"); context.moveTo(startX + scrollLeft, scrollY); context.lineTo(startX + scrollLeft + scrollWidth, scrollY); context.stroke(); context.closePath(); context.setLineCap('butt'); } context.save(); if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) { context.translate(opts._scrollDistance_, 0); } //绘制X轴刻度线 if (opts.xAxis.calibration === true) { context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc"); context.setLineCap('butt'); context.setLineWidth(1 * opts.pixelRatio); xAxisPoints.forEach(function(item, index) { if (index > 0) { context.beginPath(); context.moveTo(item - eachSpacing / 2, startY); context.lineTo(item - eachSpacing / 2, startY + 3 * opts.pixelRatio); context.closePath(); context.stroke(); } }); } //绘制X轴网格 if (opts.xAxis.disableGrid !== true) { context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc"); context.setLineCap('butt'); context.setLineWidth(1 * opts.pixelRatio); if (opts.xAxis.gridType == 'dash') { context.setLineDash([opts.xAxis.dashLength, opts.xAxis.dashLength]); } opts.xAxis.gridEval = opts.xAxis.gridEval || 1; xAxisPoints.forEach(function(item, index) { if (index % opts.xAxis.gridEval == 0) { context.beginPath(); context.moveTo(item, startY); context.lineTo(item, endY); context.stroke(); } }); context.setLineDash([]); } //绘制X轴文案 if (opts.xAxis.disabled !== true) { // 对X轴列表做抽稀处理 //默认全部显示X轴标签 let maxXAxisListLength = categories.length; //如果设置了X轴单屏数量 if (opts.xAxis.labelCount) { //如果设置X轴密度 if (opts.xAxis.itemCount) { maxXAxisListLength = Math.ceil(categories.length / opts.xAxis.itemCount * opts.xAxis.labelCount); } else { maxXAxisListLength = opts.xAxis.labelCount; } maxXAxisListLength -= 1; } let ratio = Math.ceil(categories.length / maxXAxisListLength); let newCategories = []; let cgLength = categories.length; for (let i = 0; i < cgLength; i++) { if (i % ratio !== 0) { newCategories.push(""); } else { newCategories.push(categories[i]); } } newCategories[cgLength - 1] = categories[cgLength - 1]; var xAxisFontSize = opts.xAxis.fontSize || config.fontSize; if (config._xAxisTextAngle_ === 0) { newCategories.forEach(function(item, index) { var offset = - measureText(String(item), xAxisFontSize) / 2; if(boundaryGap == 'center'){ offset+=eachSpacing / 2; } var scrollHeight=0; if(opts.xAxis.scrollShow){ scrollHeight=6*opts.pixelRatio; } context.beginPath(); context.setFontSize(xAxisFontSize); context.setFillStyle(opts.xAxis.fontColor || '#666666'); context.fillText(String(item), xAxisPoints[index] + offset, startY + xAxisFontSize + (config.xAxisHeight - scrollHeight - xAxisFontSize) / 2); context.closePath(); context.stroke(); }); } else { newCategories.forEach(function(item, index) { context.save(); context.beginPath(); context.setFontSize(xAxisFontSize); context.setFillStyle(opts.xAxis.fontColor || '#666666'); var textWidth = measureText(String(item),xAxisFontSize); var offset = - textWidth; if(boundaryGap == 'center'){ offset+=eachSpacing / 2; } var _calRotateTranslate = calRotateTranslate(xAxisPoints[index] + eachSpacing / 2, startY + xAxisFontSize / 2 + 5, opts.height), transX = _calRotateTranslate.transX, transY = _calRotateTranslate.transY; context.rotate(-1 * config._xAxisTextAngle_); context.translate(transX, transY); context.fillText(String(item), xAxisPoints[index] + offset, startY + xAxisFontSize + 5); context.closePath(); context.stroke(); context.restore(); }); } } context.restore(); //绘制X轴轴线 if(opts.xAxis.axisLine){ context.beginPath(); context.setStrokeStyle(opts.xAxis.axisLineColor); context.setLineWidth(1 * opts.pixelRatio); context.moveTo(startX,opts.height-opts.area[2]); context.lineTo(endX,opts.height-opts.area[2]); context.stroke(); } } function drawYAxisGrid(categories, opts, config, context) { if (opts.yAxis.disableGrid === true) { return; } let spacingValid = opts.height - opts.area[0] - opts.area[2]; let eachSpacing = spacingValid / opts.yAxis.splitNumber; let startX = opts.area[3]; let xAxisPoints = opts.chartData.xAxisData.xAxisPoints, xAxiseachSpacing = opts.chartData.xAxisData.eachSpacing; let TotalWidth = xAxiseachSpacing * (xAxisPoints.length - 1); let endX = startX + TotalWidth; let points = []; for (let i = 0; i < opts.yAxis.splitNumber + 1; i++) { points.push(opts.height - opts.area[2] - eachSpacing * i); } context.save(); if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) { context.translate(opts._scrollDistance_, 0); } if (opts.yAxis.gridType == 'dash') { context.setLineDash([opts.yAxis.dashLength, opts.yAxis.dashLength]); } context.setStrokeStyle(opts.yAxis.gridColor); context.setLineWidth(1 * opts.pixelRatio); points.forEach(function(item, index) { context.beginPath(); context.moveTo(startX, item); context.lineTo(endX, item); context.stroke(); }); context.setLineDash([]); context.restore(); } function drawYAxis(series, opts, config, context) { if (opts.yAxis.disabled === true) { return; } var spacingValid = opts.height - opts.area[0] - opts.area[2]; var eachSpacing = spacingValid / opts.yAxis.splitNumber; var startX = opts.area[3]; var endX = opts.width - opts.area[1]; var endY = opts.height - opts.area[2]; var fillEndY = endY + config.xAxisHeight; if (opts.xAxis.scrollShow) { fillEndY -= 3 * opts.pixelRatio; } if (opts.xAxis.rotateLabel){ fillEndY = opts.height - opts.area[2]+3; } // set YAxis background context.beginPath(); context.setFillStyle(opts.background || '#ffffff'); if (opts._scrollDistance_ < 0) { context.fillRect(0, 0, startX, fillEndY); } if(opts.enableScroll == true){ context.fillRect(endX, 0, opts.width, fillEndY); } context.closePath(); context.stroke(); var points = []; for (let i = 0; i <= opts.yAxis.splitNumber; i++) { points.push(opts.area[0] + eachSpacing * i); } let tStartLeft=opts.area[3]; let tStartRight=opts.width-opts.area[1]; for (let i = 0; i < opts.yAxis.data.length; i++) { let yData = opts.yAxis.data[i]; if(yData.disabled !== true){ let rangesFormat = opts.chartData.yAxisData.rangesFormat[i]; let yAxisFontSize = yData.fontSize || config.fontSize; let yAxisWidth = opts.chartData.yAxisData.yAxisWidth[i]; //画Y轴刻度及文案 rangesFormat.forEach(function(item, index) { var pos = points[index] ? points[index] : endY; context.beginPath(); context.setFontSize(yAxisFontSize); context.setLineWidth(1*opts.pixelRatio); context.setStrokeStyle(yData.axisLineColor||'#cccccc'); context.setFillStyle(yData.fontColor|| '#666666'); if(yAxisWidth.position=='left'){ context.fillText(String(item), tStartLeft - yAxisWidth.width , pos + yAxisFontSize / 2); //画刻度线 if(yData.calibration==true){ context.moveTo(tStartLeft,pos); context.lineTo(tStartLeft - 3*opts.pixelRatio,pos); } }else{ context.fillText(String(item), tStartRight + 4*opts.pixelRatio, pos + yAxisFontSize / 2); //画刻度线 if(yData.calibration==true){ context.moveTo(tStartRight,pos); context.lineTo(tStartRight + 3*opts.pixelRatio,pos); } } context.closePath(); context.stroke(); }); //画Y轴轴线 if (yData.axisLine!==false) { context.beginPath(); context.setStrokeStyle(yData.axisLineColor||'#cccccc'); context.setLineWidth(1 * opts.pixelRatio); if(yAxisWidth.position=='left'){ context.moveTo(tStartLeft,opts.height-opts.area[2]); context.lineTo(tStartLeft,opts.area[0]); }else{ context.moveTo(tStartRight,opts.height-opts.area[2]); context.lineTo(tStartRight,opts.area[0]); } context.stroke(); } //画Y轴标题 if (opts.yAxis.showTitle) { let titleFontSize = yData.titleFontSize || config.fontSize; let title = yData.title; context.beginPath(); context.setFontSize(titleFontSize); context.setFillStyle(yData.titleFontColor || '#666666'); if(yAxisWidth.position=='left'){ context.fillText(title, tStartLeft - measureText(title,titleFontSize)/2, opts.area[0]-10*opts.pixelRatio); }else{ context.fillText(title,tStartRight - measureText(title,titleFontSize)/2, opts.area[0]-10*opts.pixelRatio); } context.closePath(); context.stroke(); } if(yAxisWidth.position=='left'){ tStartLeft -=(yAxisWidth.width + opts.yAxis.padding); }else{ tStartRight +=yAxisWidth.width+ opts.yAxis.padding; } } } } function drawLegend(series, opts, config, context, chartData) { if (opts.legend.show === false) { return; } let legendData = chartData.legendData; let legendList = legendData.points; let legendArea = legendData.area; let padding = opts.legend.padding; let fontSize = opts.legend.fontSize; let shapeWidth = 15 * opts.pixelRatio; let shapeRight = 5 * opts.pixelRatio; let itemGap = opts.legend.itemGap; let lineHeight = Math.max(opts.legend.lineHeight * opts.pixelRatio, fontSize); //画背景及边框 context.beginPath(); context.setLineWidth(opts.legend.borderWidth); context.setStrokeStyle(opts.legend.borderColor); context.setFillStyle(opts.legend.backgroundColor); context.moveTo(legendArea.start.x, legendArea.start.y); context.rect(legendArea.start.x, legendArea.start.y, legendArea.width, legendArea.height); context.closePath(); context.fill(); context.stroke(); legendList.forEach(function(itemList, listIndex) { let width = 0; let height = 0; width = legendData.widthArr[listIndex]; height = legendData.heightArr[listIndex]; let startX = 0; let startY = 0; if (opts.legend.position == 'top' || opts.legend.position == 'bottom') { startX = legendArea.start.x + (legendArea.width - width) / 2; startY = legendArea.start.y + padding + listIndex * lineHeight; } else { if (listIndex == 0) { width = 0; } else { width = legendData.widthArr[listIndex - 1]; } startX = legendArea.start.x + padding + width; startY = legendArea.start.y + padding + (legendArea.height - height) / 2; } context.setFontSize(config.fontSize); for (let i = 0; i < itemList.length; i++) { let item = itemList[i]; item.area = [0, 0, 0, 0]; item.area[0] = startX; item.area[1] = startY; item.area[3] = startY + lineHeight; context.beginPath(); context.setLineWidth(1 * opts.pixelRatio); context.setStrokeStyle(item.show ? item.color : opts.legend.hiddenColor); context.setFillStyle(item.show ? item.color : opts.legend.hiddenColor); switch (item.legendShape) { case 'line': context.moveTo(startX, startY + 0.5 * lineHeight - 2 * opts.pixelRatio); context.fillRect(startX, startY + 0.5 * lineHeight - 2 * opts.pixelRatio, 15 * opts.pixelRatio, 4 * opts.pixelRatio); break; case 'triangle': context.moveTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight - 5 * opts.pixelRatio); context.lineTo(startX + 2.5 * opts.pixelRatio, startY + 0.5 * lineHeight + 5 * opts.pixelRatio); context.lineTo(startX + 12.5 * opts.pixelRatio, startY + 0.5 * lineHeight + 5 * opts.pixelRatio); context.lineTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight - 5 * opts.pixelRatio); break; case 'diamond': context.moveTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight - 5 * opts.pixelRatio); context.lineTo(startX + 2.5 * opts.pixelRatio, startY + 0.5 * lineHeight); context.lineTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight + 5 * opts.pixelRatio); context.lineTo(startX + 12.5 * opts.pixelRatio, startY + 0.5 * lineHeight); context.lineTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight - 5 * opts.pixelRatio); break; case 'circle': context.moveTo(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight); context.arc(startX + 7.5 * opts.pixelRatio, startY + 0.5 * lineHeight, 5 * opts.pixelRatio, 0, 2 * Math.PI); break; case 'rect': context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pixelRatio); context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pixelRatio, 15 * opts.pixelRatio, 10 * opts.pixelRatio); break; default: context.moveTo(startX, startY + 0.5 * lineHeight - 5 * opts.pixelRatio); context.fillRect(startX, startY + 0.5 * lineHeight - 5 * opts.pixelRatio, 15 * opts.pixelRatio, 10 * opts.pixelRatio); } context.closePath(); context.fill(); context.stroke(); startX += shapeWidth + shapeRight; let fontTrans = 0.5 * lineHeight + 0.5 * fontSize - 2; context.beginPath(); context.setFontSize(fontSize); context.setFillStyle(item.show ? opts.legend.fontColor : opts.legend.hiddenColor); context.fillText(item.name, startX, startY + fontTrans); context.closePath(); context.stroke(); if (opts.legend.position == 'top' || opts.legend.position == 'bottom') { startX += measureText(item.name, fontSize) + itemGap; item.area[2] = startX; } else { item.area[2] = startX + measureText(item.name, fontSize) + itemGap;; startX -= shapeWidth + shapeRight; startY += lineHeight; } } }); } function drawPieDataPoints(series, opts, config, context) { var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; var pieOption = assign({}, { activeOpacity: 0.5, activeRadius: 10 * opts.pixelRatio, offsetAngle: 0, labelWidth: 15 * opts.pixelRatio, ringWidth: 0, border:false, borderWidth:2, borderColor:'#FFFFFF' }, opts.extra.pie); var centerPosition = { x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2, y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2 }; if (config.pieChartLinePadding == 0) { config.pieChartLinePadding = pieOption.activeRadius; } 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); series = getPieDataPoints(series, radius, process); var activeRadius = pieOption.activeRadius; series = series.map(function(eachSeries) { eachSeries._start_ += (pieOption.offsetAngle) * Math.PI / 180; return eachSeries; }); series.forEach(function(eachSeries, seriesIndex) { if (opts.tooltip) { if (opts.tooltip.index == seriesIndex) { context.beginPath(); context.setFillStyle(hexToRgb(eachSeries.color, opts.extra.pie.activeOpacity || 0.5)); context.moveTo(centerPosition.x, centerPosition.y); context.arc(centerPosition.x, centerPosition.y, eachSeries._radius_ + activeRadius, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI); context.closePath(); context.fill(); } } context.beginPath(); context.setLineWidth(pieOption.borderWidth * opts.pixelRatio); context.lineJoin = "round"; context.setStrokeStyle(pieOption.borderColor); context.setFillStyle(eachSeries.color); context.moveTo(centerPosition.x, centerPosition.y); context.arc(centerPosition.x, centerPosition.y, eachSeries._radius_, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI); context.closePath(); context.fill(); if (pieOption.border == true) { context.stroke(); } }); if (opts.type === 'ring') { var innerPieWidth = radius * 0.6; if (typeof opts.extra.pie.ringWidth === 'number' && opts.extra.pie.ringWidth > 0) { innerPieWidth = Math.max(0, radius - opts.extra.pie.ringWidth); } context.beginPath(); context.setFillStyle(opts.background || '#ffffff'); context.moveTo(centerPosition.x, centerPosition.y); context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI); context.closePath(); context.fill(); } if (opts.dataLabel !== false && process === 1) { var valid = false; for (var i = 0, len = series.length; i < len; i++) { if (series[i].data > 0) { valid = true; break; } } if (valid) { drawPieText(series, opts, config, context, radius, centerPosition); } } if (process === 1 && opts.type === 'ring') { drawRingTitle(opts, config, context, centerPosition); } return { center: centerPosition, radius: radius, series: series }; } function drawRoseDataPoints(series, opts, config, context) { var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; var roseOption = assign({}, { type: 'area', activeOpacity: 0.5, activeRadius: 10 * opts.pixelRatio, offsetAngle: 0, labelWidth: 15 * opts.pixelRatio, border:false, borderWidth:2, borderColor:'#FFFFFF' }, opts.extra.rose); if (config.pieChartLinePadding == 0) { config.pieChartLinePadding = roseOption.activeRadius; } var centerPosition = { x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2, y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2 }; 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); var minRadius = roseOption.minRadius || radius * 0.5; series = getRoseDataPoints(series, roseOption.type, minRadius, radius, process); var activeRadius = roseOption.activeRadius; series = series.map(function(eachSeries) { eachSeries._start_ += (roseOption.offsetAngle || 0) * Math.PI / 180; return eachSeries; }); series.forEach(function(eachSeries, seriesIndex) { if (opts.tooltip) { if (opts.tooltip.index == seriesIndex) { context.beginPath(); context.setFillStyle(hexToRgb(eachSeries.color, roseOption.activeOpacity || 0.5)); context.moveTo(centerPosition.x, centerPosition.y); context.arc(centerPosition.x, centerPosition.y, activeRadius + eachSeries._radius_, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._rose_proportion_ * Math.PI); context.closePath(); context.fill(); } } context.beginPath(); context.setLineWidth(roseOption.borderWidth * opts.pixelRatio); context.lineJoin = "round"; context.setStrokeStyle(roseOption.borderColor); context.setFillStyle(eachSeries.color); context.moveTo(centerPosition.x, centerPosition.y); context.arc(centerPosition.x, centerPosition.y, eachSeries._radius_, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._rose_proportion_ * Math.PI); context.closePath(); context.fill(); if (roseOption.border == true) { context.stroke(); } }); if (opts.dataLabel !== false && process === 1) { var valid = false; for (var i = 0, len = series.length; i < len; i++) { if (series[i].data > 0) { valid = true; break; } } if (valid) { drawPieText(series, opts, config, context, radius, centerPosition); } } return { center: centerPosition, radius: radius, series: series }; } function drawArcbarDataPoints(series, opts, config, context) { var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; var arcbarOption = assign({}, { startAngle: 0.75, endAngle: 0.25, type: 'default', width: 12 * opts.pixelRatio, gap:2 * opts.pixelRatio }, opts.extra.arcbar); series = getArcbarDataPoints(series, arcbarOption, process); var centerPosition; if(arcbarOption.center){ centerPosition=arcbarOption.center; }else{ centerPosition= { x: opts.width / 2, y: opts.height / 2 }; } var radius; if(arcbarOption.radius){ radius=arcbarOption.radius; }else{ radius = Math.min(centerPosition.x, centerPosition.y); radius -= 5 * opts.pixelRatio; radius -= arcbarOption.width / 2; } for (let i = 0; i < series.length; i++) { let eachSeries = series[i]; //背景颜色 context.setLineWidth(arcbarOption.width); context.setStrokeStyle(arcbarOption.backgroundColor || '#E9E9E9'); context.setLineCap('round'); context.beginPath(); if (arcbarOption.type == 'default') { context.arc(centerPosition.x, centerPosition.y, radius-(arcbarOption.width+arcbarOption.gap)*i, arcbarOption.startAngle * Math.PI, arcbarOption.endAngle * Math.PI, false); } else { context.arc(centerPosition.x, centerPosition.y, radius-(arcbarOption.width+arcbarOption.gap)*i, 0, 2 * Math.PI, false); } context.stroke(); //进度条 context.setLineWidth(arcbarOption.width); context.setStrokeStyle(eachSeries.color); context.setLineCap('round'); context.beginPath(); context.arc(centerPosition.x, centerPosition.y, radius-(arcbarOption.width+arcbarOption.gap)*i, arcbarOption.startAngle * Math.PI, eachSeries._proportion_ * Math.PI, false); context.stroke(); } drawRingTitle(opts, config, context, centerPosition); return { center: centerPosition, radius: radius, series: series }; } function drawGaugeDataPoints(categories, series, opts, config, context) { var process = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1; var gaugeOption = assign({}, { type:'default', startAngle: 0.75, endAngle: 0.25, width: 15, splitLine: { fixRadius: 0, splitNumber: 10, width: 15, color: '#FFFFFF', childNumber: 5, childWidth: 5 }, pointer: { width: 15, color: 'auto' } }, opts.extra.gauge); if (gaugeOption.oldAngle == undefined) { gaugeOption.oldAngle = gaugeOption.startAngle; } if (gaugeOption.oldData == undefined) { gaugeOption.oldData = 0; } categories = getGaugeAxisPoints(categories, gaugeOption.startAngle, gaugeOption.endAngle); var centerPosition = { x: opts.width / 2, y: opts.height / 2 }; var radius = Math.min(centerPosition.x, centerPosition.y); radius -= 5 * opts.pixelRatio; radius -= gaugeOption.width / 2; var innerRadius = radius - gaugeOption.width; var totalAngle=0; //判断仪表盘的样式:default百度样式,progress新样式 if(gaugeOption.type == 'progress'){ //## 第一步画中心圆形背景和进度条背景 //中心圆形背景 var pieRadius = radius - gaugeOption.width*3; context.beginPath(); let gradient = context.createLinearGradient(centerPosition.x, centerPosition.y-pieRadius, centerPosition.x , centerPosition.y+pieRadius); //配置渐变填充(起点:中心点向上减半径;结束点中心点向下加半径) gradient.addColorStop('0', hexToRgb(series[0].color, 0.3)); gradient.addColorStop('1.0',hexToRgb("#FFFFFF", 0.1)); context.setFillStyle(gradient); context.arc(centerPosition.x, centerPosition.y, pieRadius, 0, 2*Math.PI, false); context.fill(); //画进度条背景 context.setLineWidth(gaugeOption.width); context.setStrokeStyle(hexToRgb(series[0].color, 0.3)); context.setLineCap('round'); context.beginPath(); context.arc(centerPosition.x, centerPosition.y, innerRadius , gaugeOption.startAngle * Math.PI, gaugeOption.endAngle *Math.PI, false); context.stroke(); //## 第二步画刻度线 totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1; let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber; let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber; let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius; let endX = -radius - gaugeOption.width - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.width; context.save(); context.translate(centerPosition.x, centerPosition.y); context.rotate((gaugeOption.startAngle - 1) * Math.PI); let len = gaugeOption.splitLine.splitNumber * gaugeOption.splitLine.childNumber + 1; let proc = series[0].data * process; for (let i = 0; i < len; i++) { context.beginPath(); //刻度线随进度变色 if(proc>(i/len)){ context.setStrokeStyle(hexToRgb(series[0].color, 1)); }else{ context.setStrokeStyle(hexToRgb(series[0].color, 0.3)); } context.setLineWidth(3 * opts.pixelRatio); context.moveTo(startX, 0); context.lineTo(endX, 0); context.stroke(); context.rotate(childAngle * Math.PI); } context.restore(); //## 第三步画进度条 series = getArcbarDataPoints(series, gaugeOption, process); context.setLineWidth(gaugeOption.width); context.setStrokeStyle(series[0].color); context.setLineCap('round'); context.beginPath(); context.arc(centerPosition.x, centerPosition.y, innerRadius , gaugeOption.startAngle * Math.PI, series[0]._proportion_ *Math.PI, false); context.stroke(); //## 第四步画指针 let pointerRadius = radius - gaugeOption.width*2.5; context.save(); context.translate(centerPosition.x, centerPosition.y); context.rotate((series[0]._proportion_ - 1) * Math.PI); context.beginPath(); context.setLineWidth(gaugeOption.width/3); let gradient3 = context.createLinearGradient(0, -pointerRadius*0.6, 0 , pointerRadius*0.6); gradient3.addColorStop('0', hexToRgb('#FFFFFF', 0)); gradient3.addColorStop('0.5', hexToRgb(series[0].color, 1)); gradient3.addColorStop('1.0', hexToRgb('#FFFFFF', 0)); context.setStrokeStyle(gradient3); context.arc(0, 0, pointerRadius , 0.85* Math.PI, 1.15 * Math.PI, false); context.stroke(); context.beginPath(); context.setLineWidth(1); context.setStrokeStyle(series[0].color); context.setFillStyle(series[0].color); context.moveTo(-pointerRadius-gaugeOption.width/3/2,-4); context.lineTo(-pointerRadius-gaugeOption.width/3/2-4,0); context.lineTo(-pointerRadius-gaugeOption.width/3/2,4); context.lineTo(-pointerRadius-gaugeOption.width/3/2,-4); context.stroke(); context.fill(); context.restore(); //default百度样式 }else{ //画背景 context.setLineWidth(gaugeOption.width); context.setLineCap('butt'); for (let i = 0; i < categories.length; i++) { let eachCategories = categories[i]; context.beginPath(); context.setStrokeStyle(eachCategories.color); context.arc(centerPosition.x, centerPosition.y, radius, eachCategories._startAngle_ * Math.PI, eachCategories._endAngle_ *Math.PI, false); context.stroke(); } context.save(); //画刻度线 totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1; let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber; let childAngle = totalAngle / gaugeOption.splitLine.splitNumber / gaugeOption.splitLine.childNumber; let startX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius; let endX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.width; let childendX = -radius - gaugeOption.width * 0.5 - gaugeOption.splitLine.fixRadius + gaugeOption.splitLine.childWidth; context.translate(centerPosition.x, centerPosition.y); context.rotate((gaugeOption.startAngle - 1) * Math.PI); for (let i = 0; i < gaugeOption.splitLine.splitNumber + 1; i++) { context.beginPath(); context.setStrokeStyle(gaugeOption.splitLine.color); context.setLineWidth(2 * opts.pixelRatio); context.moveTo(startX, 0); context.lineTo(endX, 0); context.stroke(); context.rotate(splitAngle * Math.PI); } context.restore(); context.save(); context.translate(centerPosition.x, centerPosition.y); context.rotate((gaugeOption.startAngle - 1) * Math.PI); for (let i = 0; i < gaugeOption.splitLine.splitNumber * gaugeOption.splitLine.childNumber + 1; i++) { context.beginPath(); context.setStrokeStyle(gaugeOption.splitLine.color); context.setLineWidth(1 * opts.pixelRatio); context.moveTo(startX, 0); context.lineTo(childendX, 0); context.stroke(); context.rotate(childAngle * Math.PI); } context.restore(); //画指针 series = getGaugeDataPoints(series, categories, gaugeOption, process); for (let i = 0; i < series.length; i++) { let eachSeries = series[i]; context.save(); context.translate(centerPosition.x, centerPosition.y); context.rotate((eachSeries._proportion_ - 1) * Math.PI); context.beginPath(); context.setFillStyle(eachSeries.color); context.moveTo(gaugeOption.pointer.width, 0); context.lineTo(0, -gaugeOption.pointer.width / 2); context.lineTo(-innerRadius, 0); context.lineTo(0, gaugeOption.pointer.width / 2); context.lineTo(gaugeOption.pointer.width, 0); context.closePath(); context.fill(); context.beginPath(); context.setFillStyle('#FFFFFF'); context.arc(0, 0, gaugeOption.pointer.width / 6, 0, 2 * Math.PI, false); context.fill(); context.restore(); } if (opts.dataLabel !== false) { drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context); } } //画仪表盘标题,副标题 drawRingTitle(opts, config, context, centerPosition); if (process === 1 && opts.type === 'gauge') { opts.extra.gauge.oldAngle = series[0]._proportion_; opts.extra.gauge.oldData = series[0].data; } return { center: centerPosition, radius: radius, innerRadius: innerRadius, categories: categories, totalAngle: totalAngle }; } function drawRadarDataPoints(series, opts, config, context) { var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; var radarOption = assign({},{ gridColor: '#cccccc', labelColor: '#666666', opacity: 0.2, gridCount:3 },opts.extra.radar); var coordinateAngle = getRadarCoordinateSeries(opts.categories.length); var centerPosition = { x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2, y: opts.area[0] + (opts.height - opts.area[0] - opts.area[2]) / 2 }; var radius = Math.min(centerPosition.x - (getMaxTextListLength(opts.categories) + config.radarLabelTextMargin), centerPosition.y - config.radarLabelTextMargin); //TODO逻辑不对 radius -= opts.padding[1]; // draw grid context.beginPath(); context.setLineWidth(1 * opts.pixelRatio); context.setStrokeStyle(radarOption.gridColor); coordinateAngle.forEach(function(angle) { var pos = convertCoordinateOrigin(radius * Math.cos(angle), radius * Math.sin(angle), centerPosition); context.moveTo(centerPosition.x, centerPosition.y); context.lineTo(pos.x, pos.y); }); context.stroke(); context.closePath(); // draw split line grid var _loop = function _loop(i) { var startPos = {}; context.beginPath(); context.setLineWidth(1 * opts.pixelRatio); context.setStrokeStyle(radarOption.gridColor); coordinateAngle.forEach(function(angle, index) { var pos = convertCoordinateOrigin(radius / radarOption.gridCount * i * Math.cos(angle), radius / radarOption.gridCount * i * Math.sin(angle), centerPosition); if (index === 0) { startPos = pos; context.moveTo(pos.x, pos.y); } else { context.lineTo(pos.x, pos.y); } }); context.lineTo(startPos.x, startPos.y); context.stroke(); context.closePath(); }; for (var i = 1; i <= radarOption.gridCount; i++) { _loop(i); } var radarDataPoints = getRadarDataPoints(coordinateAngle, centerPosition, radius, series, opts, process); radarDataPoints.forEach(function(eachSeries, seriesIndex) { // 绘制区域数据 context.beginPath(); context.setFillStyle(hexToRgb(eachSeries.color, radarOption.opacity)); eachSeries.data.forEach(function(item, index) { if (index === 0) { context.moveTo(item.position.x, item.position.y); } else { context.lineTo(item.position.x, item.position.y); } }); context.closePath(); context.fill(); if (opts.dataPointShape !== false) { var points = eachSeries.data.map(function(item) { return item.position; }); drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts); } }); // draw label text drawRadarLabel(coordinateAngle, radius, centerPosition, opts, config, context); return { center: centerPosition, radius: radius, angleList: coordinateAngle }; } function normalInt(min, max, iter) { iter = iter==0?1:iter; var arr = []; for (var i = 0; i < iter; i++) { arr[i] = Math.random(); }; return Math.floor(arr.reduce(function(i,j){return i+j})/iter*(max-min))+min; }; function collisionNew(area,points,width,height){ var isIn=false; for(let i=0;ipoints[i].area[2]||area[1]>points[i].area[3]||area[2]width || area[3]>height){ isIn=true; break; }else{ isIn=false; } }else{ isIn=true; break; } } } return isIn; }; function getBoundingBox(data) { var bounds = {}, coords; bounds.xMin = 180; bounds.xMax = 0; bounds.yMin = 90; bounds.yMax = 0 for (var i = 0; i < data.length; i++) { var coorda = data[i].geometry.coordinates for (var k = 0; k < coorda.length; k++) { coords = coorda[k]; if (coords.length == 1) { coords = coords[0] } for (var j = 0; j < coords.length; j++) { var longitude = coords[j][0]; var latitude = coords[j][1]; var point = { x: longitude, y: latitude } bounds.xMin = bounds.xMin < point.x ? bounds.xMin : point.x; bounds.xMax = bounds.xMax > point.x ? bounds.xMax : point.x; bounds.yMin = bounds.yMin < point.y ? bounds.yMin : point.y; bounds.yMax = bounds.yMax > point.y ? bounds.yMax : point.y; } } } return bounds; } function coordinateToPoint(latitude, longitude,bounds,scale,xoffset,yoffset) { return { x: (longitude - bounds.xMin) * scale+xoffset, y: (bounds.yMax - latitude) * scale+yoffset }; } function pointToCoordinate(pointY, pointX,bounds,scale,xoffset,yoffset) { return { x: (pointX-xoffset)/scale+bounds.xMin, y: bounds.yMax - (pointY-yoffset)/scale }; } function isRayIntersectsSegment(poi,s_poi,e_poi){ if (s_poi[1]==e_poi[1]){return false;} if (s_poi[1]>poi[1] && e_poi[1]>poi[1]){return false;} if (s_poi[1]poi[1]){return false;} if (e_poi[1]==poi[1] && s_poi[1]>poi[1]){return false;} if (s_poi[0]0.7) { return true; }else {return false}; }; for (let i = 0; i < points.length; i++) { let text = points[i].name; let tHeight = points[i].textSize; let tWidth = measureText(text,tHeight); let isSpin = Spin(); let x,y,area,areav; let breaknum=0; while(true) { breaknum++; let isCollision; if (isSpin) { x = normalInt(-opts.width/2, opts.width/2,5) - tWidth/2; y = normalInt(-opts.height/2, opts.height/2,5)+tHeight/2; area=[y-5-tWidth+opts.width/2,(-x-5+opts.height/2),y+5+opts.width/2,(-x+tHeight+5+opts.height/2)]; 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]; isCollision = collisionNew(areav,points,opts.height,opts.width); }else{ x = normalInt(-opts.width/2, opts.width/2,5) - tWidth/2; y = normalInt(-opts.height/2, opts.height/2,5)+tHeight/2; area=[x-5+opts.width/2,y-5-tHeight+opts.height/2,x+tWidth+5+opts.width/2,y+5+opts.height/2]; isCollision = collisionNew(area,points,opts.width,opts.height); } if (!isCollision) break; if (breaknum==1000){ area=[-1000,-1000,-1000,-1000]; break; } }; if (isSpin) { points[i].area=areav; points[i].areav=area; }else{ points[i].area=area; } points[i].rotate=isSpin; }; break; } return points; } function drawWordCloudDataPoints(series, opts, config, context) { let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; let wordOption = assign({},{ type: 'normal', autoColors: true },opts.extra.word); context.beginPath(); context.setFillStyle(opts.background||'#FFFFFF'); context.rect(0,0,opts.width,opts.height); context.fill(); context.save(); let points = opts.chartData.wordCloudData; context.translate(opts.width/2,opts.height/2); for(let i=0;i0){ if (opts.tooltip) { if (opts.tooltip.index == i) { 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); }else{ 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); } }else{ 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); } } }else{ if(points[i].area[0]>0){ if (opts.tooltip) { if (opts.tooltip.index == i) { 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); }else{ 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); } }else{ 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); } } } context.stroke(); context.restore(); } context.restore(); } function drawFunnelDataPoints(series, opts, config, context) { let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; let funnelOption = assign({},{ activeWidth:10, activeOpacity:0.3, border:false, borderWidth:2, borderColor:'#FFFFFF', fillOpacity:1, labelAlign:'right' },opts.extra.funnel); let eachSpacing = (opts.height - opts.area[0] - opts.area[2])/series.length; let centerPosition = { x: opts.area[3] + (opts.width - opts.area[1] - opts.area[3]) / 2, y: opts.height-opts.area[2] }; let activeWidth = funnelOption.activeWidth; let radius = Math.min((opts.width - opts.area[1] - opts.area[3]) / 2 - activeWidth, (opts.height - opts.area[0] - opts.area[2]) / 2 - activeWidth); series = getFunnelDataPoints(series, radius, process); context.save(); context.translate(centerPosition.x,centerPosition.y); for(let i=0;i0){ opts.area[3] += yAxisWidth[i].width + opts.yAxis.padding; }else{ opts.area[3] += yAxisWidth[i].width; } leftIndex +=1; }else{ if(rightIndex>0){ opts.area[1] += yAxisWidth[i].width + opts.yAxis.padding; }else{ opts.area[1] += yAxisWidth[i].width; } rightIndex +=1; } } }else{ config.yAxisWidth = yAxisWidth; } opts.chartData.yAxisData = _calYAxisData; if (opts.categories && opts.categories.length) { opts.chartData.xAxisData = getXAxisPoints(opts.categories, opts, config); let _calCategoriesData = calCategoriesData(opts.categories, opts, config, opts.chartData.xAxisData.eachSpacing), xAxisHeight = _calCategoriesData.xAxisHeight, angle = _calCategoriesData.angle; config.xAxisHeight = xAxisHeight; config._xAxisTextAngle_ = angle; opts.area[2] += xAxisHeight; opts.chartData.categoriesData = _calCategoriesData; }else{ if (opts.type === 'line' || opts.type === 'area' || opts.type === 'points') { opts.chartData.xAxisData = calXAxisData(series, opts, config); categories=opts.chartData.xAxisData.rangesFormat; let _calCategoriesData = calCategoriesData(categories, opts, config, opts.chartData.xAxisData.eachSpacing), xAxisHeight = _calCategoriesData.xAxisHeight, angle = _calCategoriesData.angle; config.xAxisHeight = xAxisHeight; config._xAxisTextAngle_ = angle; opts.area[2] += xAxisHeight; opts.chartData.categoriesData = _calCategoriesData; }else{ opts.chartData.xAxisData={ xAxisPoints: [] }; } } //计算右对齐偏移距离 if (opts.enableScroll && opts.xAxis.scrollAlign == 'right' && opts._scrollDistance_ === undefined) { let offsetLeft = 0, xAxisPoints = opts.chartData.xAxisData.xAxisPoints, startX = opts.chartData.xAxisData.startX, endX = opts.chartData.xAxisData.endX, eachSpacing = opts.chartData.xAxisData.eachSpacing; let totalWidth = eachSpacing * (xAxisPoints.length - 1); let screenWidth = endX - startX; offsetLeft = screenWidth - totalWidth; _this.scrollOption = { currentOffset: offsetLeft, startTouchX: offsetLeft, distance: 0, lastMoveTime: 0 }; opts._scrollDistance_ = offsetLeft; } if (type === 'pie' || type === 'ring' || type === 'rose') { config._pieTextMaxLength_ = opts.dataLabel === false ? 0 : getPieTextMaxLength(seriesMA); } switch (type) { case 'word': let wordOption = assign({},{ type: 'normal', autoColors: true },opts.extra.word); if(opts.updateData==true || opts.updateData==undefined){ opts.chartData.wordCloudData=getWordCloudPoint(opts,wordOption.type); } this.animationInstance = new Animation({ timing: 'easeInOut', duration: duration, onProcess: function(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } drawWordCloudDataPoints(series, opts, config, context,process); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'map': context.clearRect(0, 0, opts.width, opts.height); drawMapDataPoints(series, opts, config, context); break; case 'funnel': this.animationInstance = new Animation({ timing: 'easeInOut', duration: duration, onProcess: function(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } opts.chartData.funnelData = drawFunnelDataPoints(series, opts, config, context, process); drawLegend(opts.series, opts, config, context, opts.chartData); drawToolTipBridge(opts, config, context, process); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'line': this.animationInstance = new Animation({ timing: 'easeIn', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } drawYAxisGrid(categories, opts, config, context); drawXAxis(categories, opts, config, context); var _drawLineDataPoints = drawLineDataPoints(series, opts, config, context, process), xAxisPoints = _drawLineDataPoints.xAxisPoints, calPoints = _drawLineDataPoints.calPoints, eachSpacing = _drawLineDataPoints.eachSpacing; opts.chartData.xAxisPoints = xAxisPoints; opts.chartData.calPoints = calPoints; opts.chartData.eachSpacing = eachSpacing; drawYAxis(series, opts, config, context); if (opts.enableMarkLine !== false && process === 1) { drawMarkLine(opts, config, context); } drawLegend(opts.series, opts, config, context, opts.chartData); drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'mix': this.animationInstance = new Animation({ timing: 'easeIn', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } drawYAxisGrid(categories, opts, config, context); drawXAxis(categories, opts, config, context); var _drawMixDataPoints = drawMixDataPoints(series, opts, config, context, process), xAxisPoints = _drawMixDataPoints.xAxisPoints, calPoints = _drawMixDataPoints.calPoints, eachSpacing = _drawMixDataPoints.eachSpacing; opts.chartData.xAxisPoints = xAxisPoints; opts.chartData.calPoints = calPoints; opts.chartData.eachSpacing = eachSpacing; drawYAxis(series, opts, config, context); if (opts.enableMarkLine !== false && process === 1) { drawMarkLine(opts, config, context); } drawLegend(opts.series, opts, config, context, opts.chartData); drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'column': this.animationInstance = new Animation({ timing: 'easeIn', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } drawYAxisGrid(categories, opts, config, context); drawXAxis(categories, opts, config, context); var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context, process), xAxisPoints = _drawColumnDataPoints.xAxisPoints, calPoints = _drawColumnDataPoints.calPoints, eachSpacing = _drawColumnDataPoints.eachSpacing; opts.chartData.xAxisPoints = xAxisPoints; opts.chartData.calPoints = calPoints; opts.chartData.eachSpacing = eachSpacing; drawYAxis(series, opts, config, context); if (opts.enableMarkLine !== false && process === 1) { drawMarkLine(opts, config, context); } drawLegend(opts.series, opts, config, context, opts.chartData); drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'area': this.animationInstance = new Animation({ timing: 'easeIn', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } drawYAxisGrid(categories, opts, config, context); drawXAxis(categories, opts, config, context); var _drawAreaDataPoints = drawAreaDataPoints(series, opts, config, context, process), xAxisPoints = _drawAreaDataPoints.xAxisPoints, calPoints = _drawAreaDataPoints.calPoints, eachSpacing = _drawAreaDataPoints.eachSpacing; opts.chartData.xAxisPoints = xAxisPoints; opts.chartData.calPoints = calPoints; opts.chartData.eachSpacing = eachSpacing; drawYAxis(series, opts, config, context); if (opts.enableMarkLine !== false && process === 1) { drawMarkLine(opts, config, context); } drawLegend(opts.series, opts, config, context, opts.chartData); drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'ring': case 'pie': this.animationInstance = new Animation({ timing: 'easeInOut', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } opts.chartData.pieData = drawPieDataPoints(series, opts, config, context, process); drawLegend(opts.series, opts, config, context, opts.chartData); drawToolTipBridge(opts, config, context, process); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'rose': this.animationInstance = new Animation({ timing: 'easeInOut', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } opts.chartData.pieData = drawRoseDataPoints(series, opts, config, context, process); drawLegend(opts.series, opts, config, context, opts.chartData); drawToolTipBridge(opts, config, context, process); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'radar': this.animationInstance = new Animation({ timing: 'easeInOut', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } opts.chartData.radarData = drawRadarDataPoints(series, opts, config, context, process); drawLegend(opts.series, opts, config, context, opts.chartData); drawToolTipBridge(opts, config, context, process); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'arcbar': this.animationInstance = new Animation({ timing: 'easeInOut', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } opts.chartData.arcbarData = drawArcbarDataPoints(series, opts, config, context, process); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'gauge': this.animationInstance = new Animation({ timing: 'easeInOut', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } opts.chartData.gaugeData = drawGaugeDataPoints(categories, series, opts, config, context, process); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; case 'candle': this.animationInstance = new Animation({ timing: 'easeIn', duration: duration, onProcess: function onProcess(process) { context.clearRect(0, 0, opts.width, opts.height); if (opts.rotate) { contextRotate(context, opts); } drawYAxisGrid(categories, opts, config, context); drawXAxis(categories, opts, config, context); var _drawCandleDataPoints = drawCandleDataPoints(series, seriesMA, opts, config, context, process), xAxisPoints = _drawCandleDataPoints.xAxisPoints, calPoints = _drawCandleDataPoints.calPoints, eachSpacing = _drawCandleDataPoints.eachSpacing; opts.chartData.xAxisPoints = xAxisPoints; opts.chartData.calPoints = calPoints; opts.chartData.eachSpacing = eachSpacing; drawYAxis(series, opts, config, context); if (opts.enableMarkLine !== false && process === 1) { drawMarkLine(opts, config, context); } if (seriesMA) { drawLegend(seriesMA, opts, config, context, opts.chartData); } else { drawLegend(opts.series, opts, config, context, opts.chartData); } drawToolTipBridge(opts, config, context, process, eachSpacing, xAxisPoints); drawCanvas(opts, context); }, onAnimationFinish: function onAnimationFinish() { _this.event.trigger('renderComplete'); } }); break; } } // simple event implement function Event() { this.events = {}; } Event.prototype.addEventListener = function(type, listener) { this.events[type] = this.events[type] || []; this.events[type].push(listener); }; Event.prototype.trigger = function() { for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } var type = args[0]; var params = args.slice(1); if (!!this.events[type]) { this.events[type].forEach(function(listener) { try { listener.apply(null, params); } catch (e) { console.error(e); } }); } }; var Charts = function Charts(opts) { opts.pixelRatio = opts.pixelRatio ? opts.pixelRatio : 1; opts.fontSize = opts.fontSize ? opts.fontSize * opts.pixelRatio : 13 * opts.pixelRatio; opts.title = assign({}, opts.title); opts.subtitle = assign({}, opts.subtitle); opts.duration = opts.duration ? opts.duration : 1000; opts.yAxis = assign({}, { data:[], showTitle:false, disabled:false, disableGrid:false, splitNumber:5, gridType: 'solid', dashLength: 4 * opts.pixelRatio, gridColor:'#cccccc', padding:10, fontColor:'#666666' }, opts.yAxis); opts.yAxis.dashLength *= opts.pixelRatio; opts.yAxis.padding *= opts.pixelRatio; opts.xAxis = assign({}, { rotateLabel: false, type: 'calibration', gridType: 'solid', dashLength: 4, scrollAlign: 'left', boundaryGap:'center', axisLine:true, axisLineColor:'#cccccc' }, opts.xAxis); opts.xAxis.dashLength *= opts.pixelRatio; opts.legend = assign({}, { show: true, position: 'bottom', float: 'center', backgroundColor: 'rgba(0,0,0,0)', borderColor: 'rgba(0,0,0,0)', borderWidth: 0, padding: 5, margin: 5, itemGap: 10, fontSize: opts.fontSize, lineHeight: opts.fontSize, fontColor: '#333333', format: {}, hiddenColor: '#CECECE' }, opts.legend); opts.legend.borderWidth = opts.legend.borderWidth * opts.pixelRatio; opts.legend.itemGap = opts.legend.itemGap * opts.pixelRatio; opts.legend.padding = opts.legend.padding * opts.pixelRatio; opts.legend.margin = opts.legend.margin * opts.pixelRatio; opts.extra = assign({}, opts.extra); opts.rotate = opts.rotate ? true : false; opts.animation = opts.animation ? true : false; opts.rotate = opts.rotate ? true : false; let config$$1 = JSON.parse(JSON.stringify(config)); config$$1.colors = opts.colors ? opts.colors : config$$1.colors; config$$1.yAxisTitleWidth = opts.yAxis.disabled !== true && opts.yAxis.title ? config$$1.yAxisTitleWidth : 0; if (opts.type == 'pie' || opts.type == 'ring') { config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.pie.labelWidth * opts.pixelRatio || config$$1.pieChartLinePadding * opts.pixelRatio; } if (opts.type == 'rose') { config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.rose.labelWidth * opts.pixelRatio || config$$1.pieChartLinePadding * opts.pixelRatio; } config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding * opts.pixelRatio; config$$1.yAxisSplit = opts.yAxis.splitNumber ? opts.yAxis.splitNumber : config.yAxisSplit; //屏幕旋转 config$$1.rotate = opts.rotate; if (opts.rotate) { let tempWidth = opts.width; let tempHeight = opts.height; opts.width = tempHeight; opts.height = tempWidth; } //适配高分屏 opts.padding = opts.padding ? opts.padding : config$$1.padding; for (let i = 0; i < 4; i++) { opts.padding[i] *= opts.pixelRatio; } config$$1.yAxisWidth = config.yAxisWidth * opts.pixelRatio; config$$1.xAxisHeight = config.xAxisHeight * opts.pixelRatio; if (opts.enableScroll && opts.xAxis.scrollShow) { config$$1.xAxisHeight += 6 * opts.pixelRatio; } config$$1.xAxisLineHeight = config.xAxisLineHeight * opts.pixelRatio; config$$1.fontSize = opts.fontSize; config$$1.titleFontSize = config.titleFontSize * opts.pixelRatio; config$$1.subtitleFontSize = config.subtitleFontSize * opts.pixelRatio; config$$1.toolTipPadding = config.toolTipPadding * opts.pixelRatio; config$$1.toolTipLineHeight = config.toolTipLineHeight * opts.pixelRatio; config$$1.columePadding = config.columePadding * opts.pixelRatio; opts.$this = opts.$this ? opts.$this : this; this.context = wx.createCanvasContext(opts.canvasId, opts.$this); /* 兼容原生H5 this.context = document.getElementById(opts.canvasId).getContext("2d"); this.context.setStrokeStyle = function(e){ return this.strokeStyle=e; } this.context.setLineWidth = function(e){ return this.lineWidth=e; } this.context.setLineCap = function(e){ return this.lineCap=e; } this.context.setFontSize = function(e){ return this.font=e+"px sans-serif"; } this.context.setFillStyle = function(e){ return this.fillStyle=e; } this.context.draw = function(){ } */ opts.chartData = {}; this.event = new Event(); this.scrollOption = { currentOffset: 0, startTouchX: 0, distance: 0, lastMoveTime: 0 }; this.opts = opts; this.config = config$$1; drawCharts.call(this, opts.type, opts, config$$1, this.context); }; Charts.prototype.updateData = function() { let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; this.opts = assign({}, this.opts, data); this.opts.updateData = true; let scrollPosition = data.scrollPosition || 'current'; switch (scrollPosition) { case 'current': this.opts._scrollDistance_ = this.scrollOption.currentOffset; break; case 'left': this.opts._scrollDistance_ = 0; this.scrollOption = { currentOffset: 0, startTouchX: 0, distance: 0, lastMoveTime: 0 }; break; case 'right': let _calYAxisData = calYAxisData(this.opts.series, this.opts, this.config), yAxisWidth = _calYAxisData.yAxisWidth; this.config.yAxisWidth = yAxisWidth; let offsetLeft = 0; let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config), xAxisPoints = _getXAxisPoints0.xAxisPoints, startX = _getXAxisPoints0.startX, endX = _getXAxisPoints0.endX, eachSpacing = _getXAxisPoints0.eachSpacing; let totalWidth = eachSpacing * (xAxisPoints.length - 1); let screenWidth = endX - startX; offsetLeft = screenWidth - totalWidth; this.scrollOption = { currentOffset: offsetLeft, startTouchX: offsetLeft, distance: 0, lastMoveTime: 0 }; this.opts._scrollDistance_ = offsetLeft; break; } drawCharts.call(this, this.opts.type, this.opts, this.config, this.context); }; Charts.prototype.zoom = function() { var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.opts.xAxis.itemCount; if (this.opts.enableScroll !== true) { console.log('请启用滚动条后使用!') return; } //当前屏幕中间点 let centerPoint = Math.round(Math.abs(this.scrollOption.currentOffset) / this.opts.chartData.eachSpacing) + Math.round( this.opts.xAxis.itemCount / 2); this.opts.animation = false; this.opts.xAxis.itemCount = val.itemCount; //重新计算x轴偏移距离 let _calYAxisData = calYAxisData(this.opts.series, this.opts, this.config), yAxisWidth = _calYAxisData.yAxisWidth; this.config.yAxisWidth = yAxisWidth; let offsetLeft = 0; let _getXAxisPoints0 = getXAxisPoints(this.opts.categories, this.opts, this.config), xAxisPoints = _getXAxisPoints0.xAxisPoints, startX = _getXAxisPoints0.startX, endX = _getXAxisPoints0.endX, eachSpacing = _getXAxisPoints0.eachSpacing; let centerLeft = eachSpacing * centerPoint; let screenWidth = endX - startX; let MaxLeft = screenWidth - eachSpacing * (xAxisPoints.length - 1); offsetLeft = screenWidth / 2 - centerLeft; if (offsetLeft > 0) { offsetLeft = 0; } if (offsetLeft < MaxLeft) { offsetLeft = MaxLeft; } this.scrollOption = { currentOffset: offsetLeft, startTouchX: offsetLeft, distance: 0, lastMoveTime: 0 }; this.opts._scrollDistance_ = offsetLeft; drawCharts.call(this, this.opts.type, this.opts, this.config, this.context); }; Charts.prototype.stopAnimation = function() { this.animationInstance && this.animationInstance.stop(); }; Charts.prototype.addEventListener = function(type, listener) { this.event.addEventListener(type, listener); }; Charts.prototype.getCurrentDataIndex = function(e) { var touches = null; if (e.changedTouches) { touches = e.changedTouches[0]; } else { touches = e.mp.changedTouches[0]; } if (touches) { let _touches$ = getTouches(touches, this.opts, e); if (this.opts.type === 'pie' || this.opts.type === 'ring' || this.opts.type === 'rose') { return findPieChartCurrentIndex({ x: _touches$.x, y: _touches$.y }, this.opts.chartData.pieData); } else if (this.opts.type === 'radar') { return findRadarChartCurrentIndex({ x: _touches$.x, y: _touches$.y }, this.opts.chartData.radarData, this.opts.categories.length); } else if (this.opts.type === 'funnel') { return findFunnelChartCurrentIndex({ x: _touches$.x, y: _touches$.y }, this.opts.chartData.funnelData); } else if (this.opts.type === 'map') { return findMapChartCurrentIndex({ x: _touches$.x, y: _touches$.y }, this.opts); }else if (this.opts.type === 'word') { return findWordChartCurrentIndex({ x: _touches$.x, y: _touches$.y }, this.opts.chartData.wordCloudData); } else { return findCurrentIndex({ x: _touches$.x, y: _touches$.y }, this.opts.chartData.calPoints, this.opts, this.config, Math.abs(this.scrollOption.currentOffset)); } } return -1; }; Charts.prototype.getLegendDataIndex = function(e) { var touches = null; if (e.changedTouches) { touches = e.changedTouches[0]; } else { touches = e.mp.changedTouches[0]; } if (touches) { let _touches$ = getTouches(touches, this.opts, e); return findLegendIndex({ x: _touches$.x, y: _touches$.y }, this.opts.chartData.legendData); } return -1; }; Charts.prototype.touchLegend = function(e) { var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var touches = null; if (e.changedTouches) { touches = e.changedTouches[0]; } else { touches = e.mp.changedTouches[0]; } if (touches) { var _touches$ = getTouches(touches, this.opts, e); var index = this.getLegendDataIndex(e); if (index >= 0) { this.opts.series[index].show = !this.opts.series[index].show; this.opts.animation = option.animation ? true : false; this.opts._scrollDistance_= this.scrollOption.currentOffset; drawCharts.call(this, this.opts.type, this.opts, this.config, this.context); } } }; Charts.prototype.showToolTip = function(e) { var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var touches = null; if (e.changedTouches) { touches = e.changedTouches[0]; } else { touches = e.mp.changedTouches[0]; } if (!touches) { console.log("touchError"); } var _touches$ = getTouches(touches, this.opts, e); var currentOffset = this.scrollOption.currentOffset; var opts = assign({}, this.opts, { _scrollDistance_: currentOffset, animation: false }); if (this.opts.type === 'line' || this.opts.type === 'area' || this.opts.type === 'column') { var index = option.index==undefined? this.getCurrentDataIndex(e):option.index ; if (index > -1) { var seriesData = getSeriesDataItem(this.opts.series, index); if (seriesData.length !== 0) { var _getToolTipData = getToolTipData(seriesData, this.opts.chartData.calPoints, index, this.opts.categories,option), textList = _getToolTipData.textList, offset = _getToolTipData.offset; offset.y = _touches$.y; opts.tooltip = { textList: option.textList?option.textList:textList, offset: offset, option: option, index: index }; } } drawCharts.call(this, opts.type, opts, this.config, this.context); } if (this.opts.type === 'mix') { var index = option.index==undefined? this.getCurrentDataIndex(e):option.index ; if (index > -1) { var currentOffset = this.scrollOption.currentOffset; var opts = assign({}, this.opts, { _scrollDistance_: currentOffset, animation: false }); var seriesData = getSeriesDataItem(this.opts.series, index); if (seriesData.length !== 0) { var _getMixToolTipData = getMixToolTipData(seriesData, this.opts.chartData.calPoints, index, this.opts.categories,option), textList = _getMixToolTipData.textList, offset = _getMixToolTipData.offset; offset.y = _touches$.y; opts.tooltip = { textList: option.textList?option.textList:textList, offset: offset, option: option, index: index }; } } drawCharts.call(this, opts.type, opts, this.config, this.context); } if (this.opts.type === 'candle') { var index = option.index==undefined? this.getCurrentDataIndex(e):option.index ; if (index > -1) { var currentOffset = this.scrollOption.currentOffset; var opts = assign({}, this.opts, { _scrollDistance_: currentOffset, animation: false }); var seriesData = getSeriesDataItem(this.opts.series, index); if (seriesData.length !== 0) { var _getToolTipData = getCandleToolTipData(this.opts.series[0].data, seriesData, this.opts.chartData.calPoints, index, this.opts.categories, this.opts.extra.candle, option), textList = _getToolTipData.textList, offset = _getToolTipData.offset; offset.y = _touches$.y; opts.tooltip = { textList: option.textList?option.textList:textList, offset: offset, option: option, index: index }; } } drawCharts.call(this, opts.type, opts, this.config, this.context); } if (this.opts.type === 'pie' || this.opts.type === 'ring' || this.opts.type === 'rose'||this.opts.type === 'funnel' ) { var index = option.index==undefined? this.getCurrentDataIndex(e):option.index ; if (index > -1) { var currentOffset = this.scrollOption.currentOffset; var opts = assign({}, this.opts, { _scrollDistance_: currentOffset, animation: false }); var seriesData = this.opts._series_[index]; var textList = [{ text: option.format ? option.format(seriesData) : seriesData.name + ': ' + seriesData.data, color: seriesData.color }]; var offset = { x: _touches$.x, y: _touches$.y }; opts.tooltip = { textList: option.textList?option.textList:textList, offset: offset, option: option, index: index }; } drawCharts.call(this, opts.type, opts, this.config, this.context); } if (this.opts.type === 'map'||this.opts.type === 'word') { var index = option.index==undefined? this.getCurrentDataIndex(e):option.index ; if (index > -1) { var currentOffset = this.scrollOption.currentOffset; var opts = assign({}, this.opts, { _scrollDistance_: currentOffset, animation: false }); var seriesData = this.opts._series_[index]; var textList = [{ text: option.format ? option.format(seriesData) : seriesData.properties.name , color: seriesData.color }]; var offset = { x: _touches$.x, y: _touches$.y }; opts.tooltip = { textList: option.textList?option.textList:textList, offset: offset, option: option, index: index }; } opts.updateData = false; drawCharts.call(this, opts.type, opts, this.config, this.context); } if (this.opts.type === 'radar') { var index = option.index==undefined? this.getCurrentDataIndex(e):option.index ; if (index > -1) { var currentOffset = this.scrollOption.currentOffset; var opts = assign({}, this.opts, { _scrollDistance_: currentOffset, animation: false }); var seriesData = getSeriesDataItem(this.opts.series, index); if (seriesData.length !== 0) { var textList = seriesData.map(function(item) { return { text: option.format ? option.format(item) : item.name + ': ' + item.data, color: item.color }; }); var offset = { x: _touches$.x, y: _touches$.y }; opts.tooltip = { textList: option.textList?option.textList:textList, offset: offset, option: option, index: index }; } } drawCharts.call(this, opts.type, opts, this.config, this.context); } }; Charts.prototype.translate = function(distance) { this.scrollOption = { currentOffset: distance, startTouchX: distance, distance: 0, lastMoveTime: 0 }; let opts = assign({}, this.opts, { _scrollDistance_: distance, animation: false }); drawCharts.call(this, this.opts.type, opts, this.config, this.context); }; Charts.prototype.scrollStart = function(e) { var touches = null; if (e.changedTouches) { touches = e.changedTouches[0]; } else { touches = e.mp.changedTouches[0]; } var _touches$ = getTouches(touches, this.opts, e); if (touches && this.opts.enableScroll === true) { this.scrollOption.startTouchX = _touches$.x; } }; Charts.prototype.scroll = function(e) { if (this.scrollOption.lastMoveTime === 0) { this.scrollOption.lastMoveTime = Date.now(); } let Limit = this.opts.extra.touchMoveLimit || 20; let currMoveTime = Date.now(); let duration = currMoveTime - this.scrollOption.lastMoveTime; if (duration < Math.floor(1000 / Limit)) return; this.scrollOption.lastMoveTime = currMoveTime; var touches = null; if (e.changedTouches) { touches = e.changedTouches[0]; } else { touches = e.mp.changedTouches[0]; } if (touches && this.opts.enableScroll === true) { var _touches$ = getTouches(touches, this.opts, e); var _distance; _distance = _touches$.x - this.scrollOption.startTouchX; var currentOffset = this.scrollOption.currentOffset; var validDistance = calValidDistance(this,currentOffset + _distance, this.opts.chartData, this.config, this.opts); this.scrollOption.distance = _distance = validDistance - currentOffset; var opts = assign({}, this.opts, { _scrollDistance_: currentOffset + _distance, animation: false }); drawCharts.call(this, opts.type, opts, this.config, this.context); return currentOffset + _distance; } }; Charts.prototype.scrollEnd = function(e) { if (this.opts.enableScroll === true) { var _scrollOption = this.scrollOption, currentOffset = _scrollOption.currentOffset, distance = _scrollOption.distance; this.scrollOption.currentOffset = currentOffset + distance; this.scrollOption.distance = 0; } }; if (typeof module === "object" && typeof module.exports === "object") { module.exports = Charts; //export default Charts;//建议使用nodejs的module导出方式,如报错请使用export方式导出 }