From edf40d6e40435775ecaccf04032816d5d99eb58a Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期一, 18 十二月 2023 08:27:49 +0800
Subject: [PATCH] #
---
Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js | 1966 +++++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 1,434 insertions(+), 532 deletions(-)
diff --git a/Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js b/Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
index b3858c4..f78bde5 100644
--- a/Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
+++ b/Monitor-APP/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js
@@ -1,11 +1,11 @@
/*
- * uCharts庐
- * 楂樻�ц兘璺ㄥ钩鍙板浘琛ㄥ簱锛屾敮鎸丠5銆丄PP銆佸皬绋嬪簭锛堝井淇�/鏀粯瀹�/鐧惧害/澶存潯/QQ/360锛夈�乂ue銆乀aro绛夋敮鎸乧anvas鐨勬鏋跺钩鍙�
- * Copyright (c) 2021 QIUN庐绉嬩簯 https://www.ucharts.cn All rights reserved.
+ * uCharts (R)
+ * 楂樻�ц兘璺ㄥ钩鍙板浘琛ㄥ簱锛屾敮鎸丠5銆丄PP銆佸皬绋嬪簭锛堝井淇�/鏀粯瀹�/鐧惧害/澶存潯/QQ/360/蹇墜锛夈�乂ue銆乀aro绛夋敮鎸乧anvas鐨勬鏋跺钩鍙�
+ * Copyright (C) 2018-2022 QIUN (R) 绉嬩簯 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 澶嶅埗浣跨敤璇蜂繚鐣欐湰娈垫敞閲婏紝鎰熻阿鏀寔寮�婧愶紒
*
- * uCharts庐瀹樻柟缃戠珯
+ * uCharts (R) 瀹樻柟缃戠珯
* https://www.uCharts.cn
*
* 寮�婧愬湴鍧�:
@@ -19,17 +19,11 @@
'use strict';
var config = {
- version: 'v2.3.7-20220122',
+ version: 'v2.5.0-20230101',
yAxisWidth: 15,
- yAxisSplit: 5,
xAxisHeight: 22,
- xAxisLineHeight: 22,
- legendHeight: 15,
- yAxisTitleWidth: 15,
padding: [10, 10, 10, 10],
- pixelRatio: 1,
rotate: false,
- columePadding: 3,
fontSize: 13,
fontColor: '#666666',
dataPointShape: ['circle', 'circle', 'circle', 'circle'],
@@ -37,17 +31,9 @@
linearColor: ['#0EE2F8', '#2BDCA8', '#FA7D8D', '#EB88E2', '#2AE3A0', '#0EE2F8', '#EB88E2', '#6773E3', '#F78A85'],
pieChartLinePadding: 15,
pieChartTextPadding: 5,
- xAxisTextPadding: 3,
- titleColor: '#333333',
titleFontSize: 20,
- subtitleColor: '#999999',
subtitleFontSize: 15,
- toolTipPadding: 3,
- toolTipBackground: '#000000',
- toolTipOpacity: 0.7,
- toolTipLineHeight: 20,
radarLabelTextMargin: 13,
- gaugeLabelTextMargin: 13
};
var assign = function(target, ...varArgs) {
@@ -115,28 +101,6 @@
return e;
}
-// 缁忕含搴﹁浆澧ㄥ崱鎵�
-function lonlat2mercator(longitude, latitude) {
- var mercator = Array(2);
- var x = longitude * 20037508.34 / 180;
- var y = Math.log(Math.tan((90 + latitude) * Math.PI / 360)) / (Math.PI / 180);
- y = y * 20037508.34 / 180;
- mercator[0] = x;
- mercator[1] = y;
- return mercator;
-}
-
-// 澧ㄥ崱鎵樿浆缁忕含搴�
-function mercator2lonlat(longitude, latitude) {
- var lonlat = Array(2)
- var x = longitude / 20037508.34 * 180;
- var y = latitude / 20037508.34 * 180;
- y = 180 / Math.PI * (2 * Math.atan(Math.exp(y * Math.PI / 180)) - Math.PI / 2);
- lonlat[0] = x;
- lonlat[1] = y;
- return lonlat;
-}
-
// hex 杞� rgba
function hexToRgb(hexValue, opc) {
var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
@@ -168,6 +132,9 @@
}
while (num % limit !== 0) {
if (type === 'upper') {
+ if (num == num + 1) { //淇鏁版嵁鍊艰繃澶um++鏃犳晥鐨刡ug by 鍚戞棩钁� @xrk_jy
+ break;
+ }
num++;
} else {
num--;
@@ -203,6 +170,10 @@
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);
+ if(opts.type == 'mount' && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1){
+ if(opts.extra.mount.widthRatio>2) opts.extra.mount.widthRatio = 2
+ dataChartWidth += (opts.extra.mount.widthRatio - 1)*chartData.eachSpacing;
+ }
var validDistance = distance;
if (distance >= 0) {
validDistance = 0;
@@ -241,18 +212,6 @@
}
}
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) {
@@ -330,6 +289,7 @@
};
}
+
function convertCoordinateOrigin(x, y, center) {
return {
x: center.x + x,
@@ -406,13 +366,12 @@
item.legendShape = "line";
break;
case 'column':
+ case 'bar':
item.legendShape = "rect";
break;
case 'area':
+ case 'mount':
item.legendShape = "triangle";
- break;
- case 'bar':
- item.legendShape = "rect";
break;
default:
item.legendShape = "circle";
@@ -435,7 +394,7 @@
}
return newcolor;
}
-
+
function getDataRange(minData, maxData) {
var limit = 0;
var range = maxData - minData;
@@ -580,6 +539,7 @@
seriesItem.style = item.style;
seriesItem.pointShape = item.pointShape;
seriesItem.disableLegend = item.disableLegend;
+ seriesItem.legendShape = item.legendShape;
seriesItem.name = item.name;
seriesItem.show = item.show;
seriesItem.data = item.formatter ? item.formatter(item.data[tmpindex]) : item.data[tmpindex];
@@ -618,7 +578,12 @@
}
points = filterPoints[0][index[0]];
}else{
- points = calPoints[0][index];
+ for (let i = 0; i < calPoints.length; i++) {
+ if(calPoints[i][index]){
+ points = calPoints[i][index];
+ break;
+ }
+ }
};
var textList = seriesData.map(function(item) {
let titleText = null;
@@ -627,7 +592,8 @@
};
return {
text: option.formatter ? option.formatter(item, titleText, index, opts) : item.name + ': ' + item.data,
- color: item.color
+ color: item.color,
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
});
var offset = {
@@ -647,7 +613,8 @@
return {
text: option.formatter ? option.formatter(item, categories[index], index, opts) : item.name + ': ' + item.data,
color: item.color,
- disableLegend: item.disableLegend ? true : false
+ disableLegend: item.disableLegend ? true : false,
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
});
textList = textList.filter(function(item) {
@@ -696,19 +663,23 @@
}
let text1 = {
text: '寮�鐩橈細' + item.data[0],
- color: color[0]
+ color: color[0],
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
let text2 = {
text: '鏀剁洏锛�' + item.data[1],
- color: color[1]
+ color: color[1],
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
let text3 = {
text: '鏈�浣庯細' + item.data[2],
- color: color[2]
+ color: color[2],
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
let text4 = {
text: '鏈�楂橈細' + item.data[3],
- color: color[3]
+ color: color[3],
+ legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
textList.push(text1, text2, text3, text4);
});
@@ -959,6 +930,7 @@
return Math.pow(currentPoints.x - center.x, 2) + Math.pow(currentPoints.y - center.y, 2) <= Math.pow(radius, 2);
}
+
function splitPoints(points,eachSeries) {
var newPoints = [];
var items = [];
@@ -984,6 +956,7 @@
}
return newPoints;
}
+
function calLegendData(series, opts, config, chartData, context) {
let legendData = {
@@ -1022,7 +995,8 @@
let currentRow = [];
for (let i = 0; i < series.length; i++) {
let item = series[i];
- let itemWidth = shapeWidth + shapeRight + measureText(item.name || 'undefined', fontSize, context) + opts.legend.itemGap * opts.pix;
+ const legendText = item.legendText ? item.legendText : item.name;
+ let itemWidth = shapeWidth + shapeRight + measureText(legendText || 'undefined', fontSize, context) + opts.legend.itemGap * opts.pix;
if (widthCount + itemWidth > opts.width - opts.area[1] - opts.area[3]) {
legendList.push(currentRow);
widthCountArr.push(widthCount - opts.legend.itemGap * opts.pix);
@@ -1129,16 +1103,25 @@
function calCategoriesData(categories, opts, config, eachSpacing, context) {
var result = {
angle: 0,
- xAxisHeight: config.xAxisHeight
+ xAxisHeight: opts.xAxis.lineHeight * opts.pix + opts.xAxis.marginTop * opts.pix
};
- var categoriesTextLenth = categories.map(function(item) {
- return measureText(item, opts.xAxis.fontSize * opts.pix || config.fontSize, context);
+ var fontSize = opts.xAxis.fontSize * opts.pix;
+ var categoriesTextLenth = categories.map(function(item,index) {
+ var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item,index,opts) : item;
+ return measureText(String(xitem), fontSize, context);
});
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);
+ if (opts.xAxis.rotateLabel == true) {
+ result.angle = opts.xAxis.rotateAngle * Math.PI / 180;
+ let tempHeight = opts.xAxis.marginTop * opts.pix * 2 + Math.abs(maxTextLength * Math.sin(result.angle))
+ tempHeight = tempHeight < fontSize + opts.xAxis.marginTop * opts.pix * 2 ? tempHeight + opts.xAxis.marginTop * opts.pix * 2 : tempHeight;
+ result.xAxisHeight = tempHeight;
+ }
+ if (opts.enableScroll && opts.xAxis.scrollShow) {
+ result.xAxisHeight += 6 * opts.pix;
+ }
+ if (opts.xAxis.disabled){
+ result.xAxisHeight = 0;
}
return result;
}
@@ -1227,7 +1210,7 @@
}, opts.extra.bar);
var result = {
angle: 0,
- xAxisHeight: config.xAxisHeight
+ xAxisHeight: opts.xAxis.lineHeight * opts.pix + opts.xAxis.marginTop * opts.pix
};
result.ranges = getXAxisTextList(series, opts, config, columnstyle.type);
result.rangesFormat = result.ranges.map(function(item) {
@@ -1246,15 +1229,8 @@
// 璁＄畻X杞村埢搴︾殑灞炴�ц濡傛瘡涓埢搴︾殑闂撮殧,鍒诲害鐨勮捣濮嬬偣\缁撴潫鐐逛互鍙婃�婚暱
var eachSpacing = result.eachSpacing;
var textLength = xAxisScaleValues.map(function(item) {
- return measureText(item, opts.xAxis.fontSize * opts.pix || config.fontSize, context);
+ return measureText(item, opts.xAxis.fontSize * opts.pix, context);
});
- // 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;
}
@@ -1314,22 +1290,19 @@
return series;
}
-function getFunnelDataPoints(series, radius, type, eachSpacing) {
+function getFunnelDataPoints(series, radius, option, eachSpacing) {
var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
- series = series.sort(function(a, b) {
- return parseInt(b.data) - parseInt(a.data);
- });
for (let i = 0; i < series.length; i++) {
- if(type == 'funnel'){
+ if(option.type == 'funnel'){
series[i].radius = series[i].data / series[0].data * radius * process;
}else{
series[i].radius = (eachSpacing * (series.length - i)) / (eachSpacing * series.length) * radius * process;
}
series[i]._proportion_ = series[i].data / series[0].data;
}
- if(type !== 'pyramid'){
- series.reverse();
- }
+ // if(option.type !== 'pyramid'){
+ // series.reverse();
+ // }
return series;
}
@@ -1383,6 +1356,43 @@
if (arcbarOption.type == 'circle') {
totalAngle = 2;
} else {
+ if(arcbarOption.direction == 'ccw'){
+ if (arcbarOption.startAngle < arcbarOption.endAngle) {
+ totalAngle = 2 + arcbarOption.startAngle - arcbarOption.endAngle;
+ } else {
+ totalAngle = arcbarOption.startAngle - arcbarOption.endAngle;
+ }
+ }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(arcbarOption.direction == 'ccw'){
+ item._proportion_ = arcbarOption.startAngle - totalAngle * item.data * process ;
+ }
+ if (item._proportion_ >= 2) {
+ item._proportion_ = item._proportion_ % 2;
+ }
+ }
+ return series;
+}
+
+function getGaugeArcbarDataPoints(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 {
@@ -1398,7 +1408,12 @@
}
function getGaugeAxisPoints(categories, startAngle, endAngle) {
- let totalAngle = startAngle - endAngle + 1;
+ let totalAngle;
+ if (endAngle < startAngle) {
+ totalAngle = 2 + endAngle - startAngle;
+ } else {
+ totalAngle = startAngle - endAngle;
+ }
let tempStartAngle = startAngle;
for (let i = 0; i < categories.length; i++) {
categories[i].value = categories[i].value === null ? 0 : categories[i].value;
@@ -1427,7 +1442,12 @@
} else {
item.color = gaugeOption.pointer.color;
}
- let totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
+ let totalAngle;
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
+ }
item._endAngle_ = totalAngle * item.data + gaugeOption.startAngle;
item._oldAngle_ = gaugeOption.oldAngle;
if (gaugeOption.oldAngle < gaugeOption.endAngle) {
@@ -1516,12 +1536,12 @@
if (item === null) {
return null;
}
- item.width = Math.ceil(eachSpacing - 2 * categoryGap);
+ item.width = eachSpacing - 2 * categoryGap;
if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) {
item.width = Math.min(item.width, +opts.extra.column.width * opts.pix);
}
if (index > 0) {
- item.width -= 2 * border;
+ item.width -= border;
}
return item;
});
@@ -1567,16 +1587,22 @@
if ((opts.type == 'line' || opts.type == 'area' || opts.type == 'scatter' || opts.type == 'bubble' || opts.type == 'bar') && dataCount > 1 && opts.xAxis.boundaryGap == 'justify') {
dataCount -= 1;
}
+ var widthRatio = 0;
+ if(opts.type == 'mount' && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1){
+ if(opts.extra.mount.widthRatio>2) opts.extra.mount.widthRatio = 2
+ widthRatio = opts.extra.mount.widthRatio - 1;
+ dataCount += widthRatio;
+ }
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);
+ xAxisPoints.push(startX + widthRatio / 2 * eachSpacing + index * eachSpacing);
});
if (opts.xAxis.boundaryGap !== 'justify') {
if (opts.enableScroll === true) {
- xAxisPoints.push(startX + categories.length * eachSpacing);
+ xAxisPoints.push(startX + widthRatio * eachSpacing + categories.length * eachSpacing);
} else {
xAxisPoints.push(endX);
}
@@ -1658,6 +1684,114 @@
return points;
}
+function getLineDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, lineOption, process){
+ var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
+ var 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;
+ if(lineOption.animation == 'vertical'){
+ point.x = xAxisPoints[index];
+ var value = item;
+ if (typeof item === 'object' && item !== null) {
+ if (item.constructor.toString().indexOf('Array') > -1) {
+ 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 += eachSpacing / 2;
+ }
+ var height = validHeight * (value - minRange) / (maxRange - minRange);
+ height *= process;
+ point.y = opts.height - height - opts.area[2];
+ points.push(point);
+ }else{
+ point.x = xAxisPoints[0] + eachSpacing * index * process;
+ var value = item;
+ if (boundaryGap == 'center') {
+ point.x += eachSpacing / 2;
+ }
+ var height = validHeight * (value - minRange) / (maxRange - minRange);
+ point.y = opts.height - height - opts.area[2];
+ points.push(point);
+ }
+ }
+ });
+ return points;
+}
+
+function getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, zeroPoints, process){
+ var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
+ 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.toString().indexOf('Array') > -1) {
+ 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;
+ }
+ }
+ point.x += eachSpacing / 2;
+ var height = validHeight * (value * process - minRange) / (maxRange - minRange);
+ point.y = opts.height - height - opts.area[2];
+ points.push(point);
+ }
+ });
+ return points;
+}
+
+function getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints) {
+ var process = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
+ var points = [];
+ var validHeight = opts.height - opts.area[0] - opts.area[2];
+ var validWidth = opts.width - opts.area[1] - opts.area[3];
+ var mountWidth = eachSpacing * mountOption.widthRatio;
+ series.forEach(function(item, index) {
+ if (item === null) {
+ points.push(null);
+ } else {
+ var point = {};
+ point.color = item.color;
+ point.x = xAxisPoints[index];
+ point.x += eachSpacing / 2;
+ var value = item.data;
+ var height = validHeight * (value * process - minRange) / (maxRange - minRange);
+ point.y = opts.height - height - opts.area[2];
+ point.value = value;
+ point.width = mountWidth;
+ points.push(point);
+ }
+ });
+ return points;
+}
+
function getBarDataPoints(data, minRange, maxRange, yAxisPoints, eachSpacing, opts, config) {
var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1;
var points = [];
@@ -1707,6 +1841,9 @@
var height0 = validHeight * (value0 - minRange) / (maxRange - minRange);
} else {
var value = item;
+ if (typeof item === 'object' && item !== null) {
+ value = item.value;
+ }
var height = validHeight * (value - minRange) / (maxRange - minRange);
var height0 = 0;
}
@@ -1742,6 +1879,9 @@
var height0 = validHeight * (value0 - minRange) / (maxRange - minRange);
} else {
var value = item;
+ if (typeof item === 'object' && item !== null) {
+ value = item.value;
+ }
var height = validHeight * (value - minRange) / (maxRange - minRange);
var height0 = 0;
}
@@ -1802,31 +1942,18 @@
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;
+ if(maxData == 0){
+ maxData = 10;
+ }else{
+ minData = 0;
+ }
}
var dataRange = getDataRange(minData, maxData);
- var minRange = yData.min === undefined || yData.min === null ? dataRange.minRange : yData.min;
- var maxRange = yData.max === undefined || yData.min === null ? dataRange.maxRange : yData.max;
- var range = [];
+ var minRange = (yData.min === undefined || yData.min === null) ? dataRange.minRange : yData.min;
+ var maxRange = (yData.max === undefined || yData.max === null) ? dataRange.maxRange : yData.max;
var eachRange = (maxRange - minRange) / opts.yAxis.splitNumber;
+ var range = [];
for (var i = 0; i <= opts.yAxis.splitNumber; i++) {
range.push(minRange + eachRange * i);
}
@@ -1862,13 +1989,13 @@
}
if(yData.type === 'categories'){
if(!yData.formatter){
- yData.formatter = (val) => {return val + (yData.unit || '')};
+ yData.formatter = (val,index,opts) => {return val + (yData.unit || '')};
}
yData.categories = yData.categories || opts.categories;
rangesArr[i] = yData.categories;
}else{
if(!yData.formatter){
- yData.formatter = (val) => {return val.toFixed(yData.tofix) + (yData.unit || '')};
+ yData.formatter = (val,index,opts) => {return util.toFixed(val, yData.tofix || 0) + (yData.unit || '')};
}
rangesArr[i] = getYAxisTextList(newSeries[i], opts, config, columnstyle.type, yData, i);
}
@@ -1877,8 +2004,8 @@
position: yData.position ? yData.position : 'left',
width: 0
};
- rangesFormatArr[i] = rangesArr[i].map(function(items) {
- items = yData.formatter(items);
+ rangesFormatArr[i] = rangesArr[i].map(function(items,index) {
+ items = yData.formatter(items,index,opts);
yAxisWidthArr[i].width = Math.max(yAxisWidthArr[i].width, measureText(items, yAxisFontSizes, context) + 5);
return items;
});
@@ -1895,11 +2022,11 @@
if(opts.type === 'bar'){
rangesArr[0] = opts.categories;
if(!opts.yAxis.formatter){
- opts.yAxis.formatter = (val) => {return val + (opts.yAxis.unit || '')}
+ opts.yAxis.formatter = (val,index,opts) => {return val + (opts.yAxis.unit || '')}
}
}else{
if(!opts.yAxis.formatter){
- opts.yAxis.formatter = (val) => {return val.toFixed(opts.yAxis.tofix ) + (opts.yAxis.unit || '')}
+ opts.yAxis.formatter = (val,index,opts) => {return val.toFixed(opts.yAxis.tofix ) + (opts.yAxis.unit || '')}
}
rangesArr[0] = getYAxisTextList(series, opts, config, columnstyle.type, {});
}
@@ -1908,8 +2035,8 @@
width: 0
};
var yAxisFontSize = opts.yAxis.fontSize * opts.pix || config.fontSize;
- rangesFormatArr[0] = rangesArr[0].map(function(item) {
- item = opts.yAxis.formatter(item);
+ rangesFormatArr[0] = rangesArr[0].map(function(item,index) {
+ item = opts.yAxis.formatter(item,index,opts);
yAxisWidthArr[0].width = Math.max(yAxisWidthArr[0].width, measureText(item, yAxisFontSize, context) + 5);
return item;
});
@@ -1949,10 +2076,10 @@
let minAxis = opts.area[0];
let items = [];
for (let i = 0; i < ranges.length; i++) {
- let maxVal = ranges[i].shift();
- let minVal = ranges[i].pop();
+ let maxVal = Math.max.apply(this, ranges[i]);
+ let minVal = Math.min.apply(this, ranges[i]);
let item = maxVal - (maxVal - minVal) * (point - minAxis) / spacingValid;
- item = opts.yAxis.data[i].formatter ? opts.yAxis.data[i].formatter(item) : item.toFixed(0);
+ item = opts.yAxis.data && opts.yAxis.data[i].formatter ? opts.yAxis.data[i].formatter(item, i, opts) : item.toFixed(0);
items.push(String(item))
}
return items;
@@ -2027,7 +2154,66 @@
context.lineTo(item.x, item.y - 4.5);
}
});
+ } else if (shape === 'none') {
+ return;
+ }
+ context.closePath();
+ context.fill();
+ context.stroke();
+}
+
+function drawActivePoint(points, color, shape, context, opts, option, seriesIndex) {
+ if(!opts.tooltip){
+ return
+ }
+ if(opts.tooltip.group.length>0 && opts.tooltip.group.includes(seriesIndex) == false){
+ return
+ }
+ var pointIndex = typeof opts.tooltip.index === 'number' ? opts.tooltip.index : opts.tooltip.index[opts.tooltip.group.indexOf(seriesIndex)];
+ context.beginPath();
+ if (option.activeType == 'hollow') {
+ context.setStrokeStyle(color);
+ context.setFillStyle(opts.background);
+ context.setLineWidth(2 * opts.pix);
+ } else {
+ context.setStrokeStyle("#ffffff");
+ context.setFillStyle(color);
+ context.setLineWidth(1 * opts.pix);
+ }
+ if (shape === 'diamond') {
+ points.forEach(function(item, index) {
+ if (item !== null && pointIndex == index ) {
+ context.moveTo(item.x, item.y - 4.5);
+ context.lineTo(item.x - 4.5, item.y);
+ context.lineTo(item.x, item.y + 4.5);
+ context.lineTo(item.x + 4.5, item.y);
+ context.lineTo(item.x, item.y - 4.5);
+ }
+ });
+ } else if (shape === 'circle') {
+ points.forEach(function(item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x + 2.5 * opts.pix, item.y);
+ context.arc(item.x, item.y, 3 * opts.pix, 0, 2 * Math.PI, false);
+ }
+ });
+ } else if (shape === 'square') {
+ points.forEach(function(item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x - 3.5, item.y - 3.5);
+ context.rect(item.x - 3.5, item.y - 3.5, 7, 7);
+ }
+ });
} else if (shape === 'triangle') {
+ points.forEach(function(item, index) {
+ if (item !== null && pointIndex == index) {
+ context.moveTo(item.x, item.y - 4.5);
+ context.lineTo(item.x - 4.5, item.y + 4.5);
+ context.lineTo(item.x + 4.5, item.y + 4.5);
+ context.lineTo(item.x, item.y - 4.5);
+ }
+ });
+ } else if (shape === 'none') {
return;
}
context.closePath();
@@ -2093,9 +2279,98 @@
value = data[index].value
}
}
- var formatVal = series.formatter ? series.formatter(value,index) : value;
+ var formatVal = series.formatter ? series.formatter(value,index,series,opts) : value;
context.setTextAlign('center');
context.fillText(String(formatVal), item.x, item.y - 4 + textOffset * opts.pix);
+ context.closePath();
+ context.stroke();
+ context.setTextAlign('left');
+ }
+ });
+}
+
+function drawColumePointText(points, series, config, context, opts) {
+ // 缁樺埗鏁版嵁鏂囨
+ var data = series.data;
+ var textOffset = series.textOffset ? series.textOffset : 0;
+ var Position = opts.extra.column.labelPosition;
+ points.forEach(function(item, index) {
+ if (item !== null) {
+ context.beginPath();
+ var fontSize = series.textSize ? series.textSize * opts.pix : config.fontSize;
+ context.setFontSize(fontSize);
+ context.setFillStyle(series.textColor || opts.fontColor);
+ var value = data[index]
+ if (typeof data[index] === 'object' && data[index] !== null) {
+ if (data[index].constructor.toString().indexOf('Array')>-1) {
+ value = data[index][1];
+ } else {
+ value = data[index].value
+ }
+ }
+ var formatVal = series.formatter ? series.formatter(value,index,series,opts) : value;
+ context.setTextAlign('center');
+ var startY = item.y - 4 * opts.pix + textOffset * opts.pix;
+ if(item.y > series.zeroPoints){
+ startY = item.y + textOffset * opts.pix + fontSize;
+ }
+ if(Position == 'insideTop'){
+ startY = item.y + fontSize + textOffset * opts.pix;
+ if(item.y > series.zeroPoints){
+ startY = item.y - textOffset * opts.pix - 4 * opts.pix;
+ }
+ }
+ if(Position == 'center'){
+ startY = item.y + textOffset * opts.pix + (opts.height - opts.area[2] - item.y + fontSize)/2;
+ if(series.zeroPoints < opts.height - opts.area[2]){
+ startY = item.y + textOffset * opts.pix + (series.zeroPoints - item.y + fontSize)/2;
+ }
+ if(item.y > series.zeroPoints){
+ startY = item.y - textOffset * opts.pix - (item.y - series.zeroPoints - fontSize)/2;
+ }
+ if(opts.extra.column.type == 'stack'){
+ startY = item.y + textOffset * opts.pix + (item.y0 - item.y + fontSize)/2;
+ }
+ }
+ if(Position == 'bottom'){
+ startY = opts.height - opts.area[2] + textOffset * opts.pix - 4 * opts.pix;
+ if(series.zeroPoints < opts.height - opts.area[2]){
+ startY = series.zeroPoints + textOffset * opts.pix - 4 * opts.pix;
+ }
+ if(item.y > series.zeroPoints){
+ startY = series.zeroPoints - textOffset * opts.pix + fontSize + 2 * opts.pix;
+ }
+ if(opts.extra.column.type == 'stack'){
+ startY = item.y0 + textOffset * opts.pix - 4 * opts.pix;
+ }
+ }
+ context.fillText(String(formatVal), item.x, startY);
+ context.closePath();
+ context.stroke();
+ context.setTextAlign('left');
+ }
+ });
+}
+
+function drawMountPointText(points, series, config, context, opts, zeroPoints) {
+ // 缁樺埗鏁版嵁鏂囨
+ var data = series.data;
+ var textOffset = series.textOffset ? series.textOffset : 0;
+ var Position = opts.extra.mount.labelPosition;
+ points.forEach(function(item, index) {
+ if (item !== null) {
+ context.beginPath();
+ var fontSize = series[index].textSize ? series[index].textSize * opts.pix : config.fontSize;
+ context.setFontSize(fontSize);
+ context.setFillStyle(series[index].textColor || opts.fontColor);
+ var value = item.value
+ var formatVal = series[index].formatter ? series[index].formatter(value,index,series,opts) : value;
+ context.setTextAlign('center');
+ var startY = item.y - 4 * opts.pix + textOffset * opts.pix;
+ if(item.y > zeroPoints){
+ startY = item.y + textOffset * opts.pix + fontSize;
+ }
+ context.fillText(String(formatVal), item.x, startY);
context.closePath();
context.stroke();
context.setTextAlign('left');
@@ -2117,7 +2392,7 @@
if (typeof data[index] === 'object' && data[index] !== null) {
value = data[index].value ;
}
- var formatVal = series.formatter ? series.formatter(value,index) : value;
+ var formatVal = series.formatter ? series.formatter(value,index,series,opts) : value;
context.setTextAlign('left');
context.fillText(String(formatVal), item.x + 4 * opts.pix , item.y + fontSize / 2 - 3 );
context.closePath();
@@ -2128,7 +2403,13 @@
function drawGaugeLabel(gaugeOption, radius, centerPosition, opts, config, context) {
radius -= gaugeOption.width / 2 + gaugeOption.labelOffset * opts.pix;
- let totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
+ radius = radius < 10 ? 10 : radius;
+ let totalAngle;
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
+ }
let splitAngle = totalAngle / gaugeOption.splitLine.splitNumber;
let totalNumber = gaugeOption.endNumber - gaugeOption.startNumber;
let splitNumber = totalNumber / gaugeOption.splitLine.splitNumber;
@@ -2139,7 +2420,7 @@
x: radius * Math.cos(nowAngle * Math.PI),
y: radius * Math.sin(nowAngle * Math.PI)
};
- var labelText = gaugeOption.formatter ? gaugeOption.formatter(nowNumber) : nowNumber;
+ var labelText = gaugeOption.formatter ? gaugeOption.formatter(nowNumber,i,opts) : nowNumber;
pos.x += centerPosition.x - measureText(labelText, config.fontSize, context) / 2;
pos.y += centerPosition.y;
var startX = pos.x;
@@ -2156,31 +2437,43 @@
}
nowNumber += splitNumber;
}
-
}
function drawRadarLabel(angleList, radius, centerPosition, opts, config, context) {
var radarOption = opts.extra.radar || {};
- radius += config.radarLabelTextMargin * opts.pix;
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] || '', config.fontSize, context) / 2;
- } else if (pos.x < 0) {
- startX -= measureText(opts.categories[index] || '', config.fontSize, context);
+ if(radarOption.labelPointShow === true && opts.categories[index] !== ''){
+ var posPoint = {
+ x: radius * Math.cos(angle),
+ y: radius * Math.sin(angle)
+ };
+ var posPointAxis = convertCoordinateOrigin(posPoint.x, posPoint.y, centerPosition);
+ context.setFillStyle(radarOption.labelPointColor);
+ context.beginPath();
+ context.arc(posPointAxis.x, posPointAxis.y, radarOption.labelPointRadius * opts.pix, 0, 2 * Math.PI, false);
+ context.closePath();
+ context.fill();
}
- context.beginPath();
- context.setFontSize(config.fontSize);
- context.setFillStyle(radarOption.labelColor || opts.fontColor);
- context.fillText(opts.categories[index] || '', startX, startY + config.fontSize / 2);
- context.closePath();
- context.stroke();
+ if(radarOption.labelShow === true){
+ var pos = {
+ x: (radius + config.radarLabelTextMargin * opts.pix) * Math.cos(angle),
+ y: (radius + config.radarLabelTextMargin * opts.pix) * 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] || '', config.fontSize, context) / 2;
+ } else if (pos.x < 0) {
+ startX -= measureText(opts.categories[index] || '', config.fontSize, context);
+ }
+ context.beginPath();
+ context.setFontSize(config.fontSize);
+ context.setFillStyle(radarOption.labelColor || opts.fontColor);
+ context.fillText(opts.categories[index] || '', startX, startY + config.fontSize / 2);
+ context.closePath();
+ context.stroke();
+ }
});
}
@@ -2189,8 +2482,9 @@
var lineRadius = config.pieChartLinePadding;
var textObjectCollection = [];
var lastTextObject = null;
- var seriesConvert = series.map(function(item,index,series) {
- var text = item.formatter ? item.formatter(item,index,series) : util.toFixed(item._proportion_.toFixed(4) * 100) + '%';
+ var seriesConvert = series.map(function(item,index) {
+ var text = item.formatter ? item.formatter(item,index,series,opts) : util.toFixed(item._proportion_.toFixed(4) * 100) + '%';
+ text = item.labelText ? item.labelText : text;
var arc = 2 * Math.PI - (item._start_ + 2 * Math.PI * item._proportion_ / 2);
if (item._rose_proportion_) {
arc = 2 * Math.PI - (item._start_ + 2 * Math.PI * item._rose_proportion_ / 2);
@@ -2204,6 +2498,7 @@
radius: radius,
textColor: item.textColor,
textSize: item.textSize,
+ labelShow: item.labelShow
};
});
for (let i = 0; i < seriesConvert.length; i++) {
@@ -2261,6 +2556,9 @@
textObjectCollection.push(lastTextObject);
}
for (let i = 0; i < textObjectCollection.length; i++) {
+ if(seriesConvert[i].labelShow === false){
+ continue;
+ }
let item = textObjectCollection[i];
let lineStartPoistion = convertCoordinateOrigin(item.lineStart.x, item.lineStart.y, center);
let lineEndPoistion = convertCoordinateOrigin(item.lineEnd.x, item.lineEnd.y, center);
@@ -2279,7 +2577,7 @@
context.closePath();
context.beginPath();
context.moveTo(textPosition.x + item.width, textPosition.y);
- context.arc(curveStartX, textPosition.y, 2, 0, 2 * Math.PI);
+ context.arc(curveStartX, textPosition.y, 2 * opts.pix, 0, 2 * Math.PI);
context.closePath();
context.fill();
context.beginPath();
@@ -2313,19 +2611,19 @@
context.setFontSize(config.fontSize);
let textWidth = measureText(labelText, config.fontSize, context);
let textX = offsetX - 0.5 * textWidth;
- let textY = endY;
+ let textY = endY + 2 * opts.pix;
context.beginPath();
context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity));
context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
context.setLineWidth(1 * opts.pix);
- context.rect(textX - config.toolTipPadding, textY, textWidth + 2 * config.toolTipPadding, config.fontSize + 2 * config.toolTipPadding);
+ context.rect(textX - toolTipOption.boxPadding * opts.pix, textY, textWidth + 2 * toolTipOption.boxPadding * opts.pix, config.fontSize + 2 * toolTipOption.boxPadding * opts.pix);
context.closePath();
context.stroke();
context.fill();
context.beginPath();
context.setFontSize(config.fontSize);
context.setFillStyle(toolTipOption.labelFontColor || opts.fontColor);
- context.fillText(String(labelText), textX, textY + config.toolTipPadding + config.fontSize);
+ context.fillText(String(labelText), textX, textY + toolTipOption.boxPadding * opts.pix + config.fontSize);
context.closePath();
context.stroke();
}
@@ -2344,10 +2642,14 @@
let item = assign({}, {
lineColor: '#DE4A42',
showLabel: false,
+ labelFontSize: 13,
+ labelPadding: 6,
labelFontColor: '#666666',
labelBgColor: '#DFE8FF',
labelBgOpacity: 0.8,
- yAxisIndex: 0
+ labelAlign: 'left',
+ labelOffsetX: 0,
+ labelOffsetY: 0,
}, points[i]);
if (markLineOption.type == 'dash') {
context.setLineDash([markLineOption.dashLength, markLineOption.dashLength]);
@@ -2360,27 +2662,29 @@
context.stroke();
context.setLineDash([]);
if (item.showLabel) {
- let labelText = opts.yAxis.formatter ? opts.yAxis.formatter(item.value) : item.value;
- context.setFontSize(config.fontSize);
- let textWidth = measureText(labelText, config.fontSize, context);
- let yAxisWidth = opts.chartData.yAxisData.yAxisWidth[0].width;
- let bgStartX = opts.area[3] - textWidth - config.toolTipPadding * 2;
- let bgEndX = opts.area[3];
- let bgWidth = bgEndX - bgStartX;
- let textX = bgEndX - config.toolTipPadding;
+ let fontSize = item.labelFontSize * opts.pix;
+ let labelText = item.labelText ? item.labelText : item.value;
+ context.setFontSize(fontSize);
+ let textWidth = measureText(labelText, fontSize, context);
+ let bgWidth = textWidth + item.labelPadding * opts.pix * 2;
+ let bgStartX = item.labelAlign == 'left' ? opts.area[3] - bgWidth : opts.width - opts.area[1];
+ bgStartX += item.labelOffsetX;
+ let bgStartY = item.y - 0.5 * fontSize - item.labelPadding * opts.pix;
+ bgStartY += item.labelOffsetY;
+ let textX = bgStartX + item.labelPadding * opts.pix;
let textY = item.y;
context.setFillStyle(hexToRgb(item.labelBgColor, item.labelBgOpacity));
context.setStrokeStyle(item.labelBgColor);
context.setLineWidth(1 * opts.pix);
context.beginPath();
- context.rect(bgStartX, textY - 0.5 * config.fontSize - config.toolTipPadding, bgWidth, config.fontSize + 2 * config.toolTipPadding);
+ context.rect(bgStartX, bgStartY, bgWidth, fontSize + 2 * item.labelPadding * opts.pix);
context.closePath();
context.stroke();
context.fill();
- context.setFontSize(config.fontSize);
- context.setTextAlign('right');
+ context.setFontSize(fontSize);
+ context.setTextAlign('left');
context.setFillStyle(item.labelFontColor);
- context.fillText(String(labelText), textX, textY + 0.5 * config.fontSize);
+ context.fillText(String(labelText), textX, bgStartY + fontSize + item.labelPadding * opts.pix/2);
context.stroke();
context.setTextAlign('left');
}
@@ -2405,20 +2709,21 @@
context.stroke();
context.setLineDash([]);
if (toolTipOption.yAxisLabel) {
+ let boxPadding = toolTipOption.boxPadding * opts.pix;
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 < labelText.length; i++) {
- context.setFontSize(config.fontSize);
- let textWidth = measureText(labelText[i], config.fontSize, context);
+ context.setFontSize(toolTipOption.fontSize * opts.pix);
+ let textWidth = measureText(labelText[i], toolTipOption.fontSize * opts.pix, context);
let bgStartX, bgEndX, bgWidth;
if (widthArr[i].position == 'left') {
- bgStartX = tStartLeft - widthArr[i].width;
- bgEndX = Math.max(bgStartX, bgStartX + textWidth + config.toolTipPadding * 2);
+ bgStartX = tStartLeft - (textWidth + boxPadding * 2) - 2 * opts.pix;
+ bgEndX = Math.max(bgStartX, bgStartX + textWidth + boxPadding * 2);
} else {
- bgStartX = tStartRight;
- bgEndX = Math.max(bgStartX + widthArr[i].width, bgStartX + textWidth + config.toolTipPadding * 2);
+ bgStartX = tStartRight + 2 * opts.pix;
+ bgEndX = Math.max(bgStartX + widthArr[i].width, bgStartX + textWidth + boxPadding * 2);
}
bgWidth = bgEndX - bgStartX;
let textX = bgStartX + (bgWidth - textWidth) / 2;
@@ -2427,8 +2732,7 @@
context.setFillStyle(hexToRgb(toolTipOption.labelBgColor || config.toolTipBackground, toolTipOption.labelBgOpacity || config.toolTipOpacity));
context.setStrokeStyle(toolTipOption.labelBgColor || config.toolTipBackground);
context.setLineWidth(1 * opts.pix);
- context.rect(bgStartX, textY - 0.5 * config.fontSize - config.toolTipPadding, bgWidth, config.fontSize + 2 *
- config.toolTipPadding);
+ context.rect(bgStartX, textY - 0.5 * config.fontSize - boxPadding, bgWidth, config.fontSize + 2 * boxPadding);
context.closePath();
context.stroke();
context.fill();
@@ -2450,13 +2754,15 @@
function drawToolTipSplitArea(offsetX, opts, config, context, eachSpacing) {
var toolTipOption = assign({}, {
activeBgColor: '#000000',
- activeBgOpacity: 0.08
+ activeBgOpacity: 0.08,
+ activeWidth: eachSpacing
}, opts.extra.column);
+ toolTipOption.activeWidth = toolTipOption.activeWidth > eachSpacing ? eachSpacing : toolTipOption.activeWidth;
var startY = opts.area[0];
var endY = opts.height - opts.area[2];
context.beginPath();
context.setFillStyle(hexToRgb(toolTipOption.activeBgColor, toolTipOption.activeBgOpacity));
- context.rect(offsetX - eachSpacing / 2, startY, eachSpacing, endY - startY);
+ context.rect(offsetX - toolTipOption.activeWidth / 2, startY, toolTipOption.activeWidth, endY - startY);
context.closePath();
context.fill();
context.setFillStyle("#FFFFFF");
@@ -2477,6 +2783,7 @@
context.setFillStyle("#FFFFFF");
}
+
function drawToolTip(textList, offset, opts, config, context, eachSpacing, xAxisPoints) {
var toolTipOption = assign({}, {
showBox: true,
@@ -2488,17 +2795,29 @@
borderWidth: 0,
borderRadius: 0,
borderOpacity: 0.7,
+ boxPadding: 3,
fontColor: '#FFFFFF',
+ fontSize: 13,
+ lineHeight: 20,
+ legendShow: true,
+ legendShape: 'auto',
splitLine: true,
}, opts.extra.tooltip);
if(toolTipOption.showCategory==true && opts.categories){
textList.unshift({text:opts.categories[opts.tooltip.index],color:null})
}
- var legendWidth = 4 * opts.pix;
+ var fontSize = toolTipOption.fontSize * opts.pix;
+ var lineHeight = toolTipOption.lineHeight * opts.pix;
+ var boxPadding = toolTipOption.boxPadding * opts.pix;
+ var legendWidth = fontSize;
var legendMarginRight = 5 * opts.pix;
+ if(toolTipOption.legendShow == false){
+ legendWidth = 0;
+ legendMarginRight = 0;
+ }
var arrowWidth = toolTipOption.showArrow ? 8 * opts.pix : 0;
var isOverRightBorder = false;
- if (opts.type == 'line' || opts.type == 'area' || opts.type == 'candle' || opts.type == 'mix') {
+ if (opts.type == 'line' || opts.type == 'mount' || opts.type == 'area' || opts.type == 'candle' || opts.type == 'mix') {
if (toolTipOption.splitLine == true) {
drawToolTipSplitLine(opts.tooltip.offset.x, opts, config, context);
}
@@ -2509,10 +2828,10 @@
}, offset);
offset.y -= 8 * opts.pix;
var textWidth = textList.map(function(item) {
- return measureText(item.text, config.fontSize, context);
+ return measureText(item.text, fontSize, context);
});
- var toolTipWidth = legendWidth + legendMarginRight + 4 * config.toolTipPadding + Math.max.apply(null, textWidth);
- var toolTipHeight = 2 * config.toolTipPadding + textList.length * config.toolTipLineHeight;
+ var toolTipWidth = legendWidth + legendMarginRight + 4 * boxPadding + Math.max.apply(null, textWidth);
+ var toolTipHeight = 2 * boxPadding + textList.length * lineHeight;
if (toolTipOption.showBox == false) {
return
}
@@ -2525,11 +2844,18 @@
}
// draw background rect
context.beginPath();
- context.setFillStyle(hexToRgb(toolTipOption.bgColor || config.toolTipBackground, toolTipOption.bgOpacity || config.toolTipOpacity));
+ context.setFillStyle(hexToRgb(toolTipOption.bgColor, toolTipOption.bgOpacity));
context.setLineWidth(toolTipOption.borderWidth * opts.pix);
context.setStrokeStyle(hexToRgb(toolTipOption.borderColor, toolTipOption.borderOpacity));
var radius = toolTipOption.borderRadius;
if (isOverRightBorder) {
+ // 澧炲姞宸︿晶浠嶇劧瓒呭嚭鐨勫垽鏂�
+ if(toolTipWidth + arrowWidth > opts.width){
+ offset.x = opts.width + Math.abs(opts._scrollDistance_ || 0) + arrowWidth + (toolTipWidth - opts.width)
+ }
+ if(toolTipWidth > offset.x){
+ offset.x = opts.width + Math.abs(opts._scrollDistance_ || 0) + arrowWidth + (toolTipWidth - opts.width)
+ }
if (toolTipOption.showArrow) {
context.moveTo(offset.x, offset.y + 10 * opts.pix);
context.lineTo(offset.x - arrowWidth, offset.y + 10 * opts.pix + 5 * opts.pix);
@@ -2565,30 +2891,68 @@
context.stroke();
}
// 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;
+ if(toolTipOption.legendShow){
+ textList.forEach(function(item, index) {
+ if (item.color !== null) {
+ context.beginPath();
+ context.setFillStyle(item.color);
+ var startX = offset.x + arrowWidth + 2 * boxPadding;
+ var startY = offset.y + (lineHeight - fontSize) / 2 + lineHeight * index + boxPadding + 1;
+ if (isOverRightBorder) {
+ startX = offset.x - toolTipWidth - arrowWidth + 2 * boxPadding;
+ }
+ switch (item.legendShape) {
+ case 'line':
+ context.moveTo(startX, startY + 0.5 * legendWidth - 2 * opts.pix);
+ context.fillRect(startX, startY + 0.5 * legendWidth - 2 * opts.pix, legendWidth, 4 * opts.pix);
+ break;
+ case 'triangle':
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix);
+ context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix);
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ break;
+ case 'diamond':
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.lineTo(startX + 2.5 * opts.pix, startY + 0.5 * legendWidth);
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth + 5 * opts.pix);
+ context.lineTo(startX + 12.5 * opts.pix, startY + 0.5 * legendWidth);
+ context.lineTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ break;
+ case 'circle':
+ context.moveTo(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth);
+ context.arc(startX + 7.5 * opts.pix, startY + 0.5 * legendWidth, 5 * opts.pix, 0, 2 * Math.PI);
+ break;
+ case 'rect':
+ context.moveTo(startX, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.fillRect(startX, startY + 0.5 * legendWidth - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
+ break;
+ case 'square':
+ context.moveTo(startX + 2 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.fillRect(startX + 2 * opts.pix, startY + 0.5 * legendWidth - 5 * opts.pix, 10 * opts.pix, 10 * opts.pix);
+ break;
+ default:
+ context.moveTo(startX, startY + 0.5 * legendWidth - 5 * opts.pix);
+ context.fillRect(startX, startY + 0.5 * legendWidth - 5 * opts.pix, 15 * opts.pix, 10 * opts.pix);
+ }
+ context.closePath();
+ context.fill();
}
- 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;
+ var startX = offset.x + arrowWidth + 2 * boxPadding + legendWidth + legendMarginRight;
if (isOverRightBorder) {
- startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding + +legendWidth + legendMarginRight;
+ startX = offset.x - toolTipWidth - arrowWidth + 2 * boxPadding + legendWidth + legendMarginRight;
}
- var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding;
+ var startY = offset.y + lineHeight * index + (lineHeight - fontSize)/2 - 1 + boxPadding + fontSize;
context.beginPath();
- context.setFontSize(config.fontSize);
+ context.setFontSize(fontSize);
+ context.setTextBaseline('normal');
context.setFillStyle(toolTipOption.fontColor);
- context.fillText(item.text, startX, startY + config.fontSize);
+ context.fillText(item.text, startX, startY);
context.closePath();
context.stroke();
});
@@ -2611,6 +2975,7 @@
linearOpacity: 1,
customColor: [],
colorStop: 0,
+ labelPosition: 'outside'
}, opts.extra.column);
let calPoints = [];
context.save();
@@ -2630,10 +2995,16 @@
ranges = [].concat(opts.chartData.yAxisData.ranges[eachSeries.index]);
minRange = ranges.pop();
maxRange = ranges.shift();
+
+ // 璁＄畻0杞村潗鏍�
+ let spacingValid = opts.height - opts.area[0] - opts.area[2];
+ let zeroHeight = spacingValid * (0 - minRange) / (maxRange - minRange);
+ let zeroPoints = opts.height - Math.round(zeroHeight) - opts.area[2];
+ eachSeries.zeroPoints = zeroPoints;
var data = eachSeries.data;
switch (columnOption.type) {
case 'group':
- var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
+ var points = getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, zeroPoints, 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);
@@ -2647,7 +3018,7 @@
var fillColor = item.color || eachSeries.color
var strokeColor = item.color || eachSeries.color
if (columnOption.linearType !== 'none') {
- var grd = context.createLinearGradient(startX, item.y, startX, opts.height - opts.area[2]);
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
//閫忔槑娓愬彉
if (columnOption.linearType == 'opacity') {
grd.addColorStop(0, hexToRgb(fillColor, columnOption.linearOpacity));
@@ -2662,11 +3033,14 @@
// 鍦嗚杈规
if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle === true) {
const left = startX;
- const top = item.y;
+ const top = item.y > zeroPoints ? zeroPoints : item.y;
const width = item.width;
- const height = opts.height - opts.area[2] - item.y;
+ const height = Math.abs(zeroPoints - item.y);
if (columnOption.barBorderCircle) {
columnOption.barBorderRadius = [width / 2, width / 2, 0, 0];
+ }
+ if(item.y > zeroPoints){
+ columnOption.barBorderRadius = [0, 0,width / 2, width / 2];
}
let [r0, r1, r2, r3] = columnOption.barBorderRadius;
let minRadius = Math.min(width/2,height/2);
@@ -2684,9 +3058,9 @@
context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI);
} else {
context.moveTo(startX, item.y);
- context.lineTo(startX + item.width - 2, item.y);
- context.lineTo(startX + item.width - 2, opts.height - opts.area[2]);
- context.lineTo(startX, opts.height - opts.area[2]);
+ context.lineTo(startX + item.width, item.y);
+ context.lineTo(startX + item.width, zeroPoints);
+ context.lineTo(startX, zeroPoints);
context.lineTo(startX, item.y);
context.setLineWidth(1)
context.setStrokeStyle(strokeColor);
@@ -2716,7 +3090,7 @@
}
context.setFillStyle(fillColor);
context.moveTo(startX, item.y);
- context.fillRect(startX, item.y, item.width - 2, height);
+ context.fillRect(startX, item.y, item.width, height);
context.closePath();
context.fill();
}
@@ -2727,84 +3101,59 @@
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
calPoints.push(points);
points = fixColumeMeterData(points, eachSpacing, series.length, seriesIndex, config, opts, columnOption.meterBorder);
- if (seriesIndex == 0) {
for (let i = 0; i < points.length; i++) {
let item = points[i];
if (item !== null && i > leftNum && i < rightNum) {
//鐢昏儗鏅鑹�
context.beginPath();
- context.setFillStyle(columnOption.meterFillColor);
+ if (seriesIndex == 0 && columnOption.meterBorder > 0) {
+ context.setStrokeStyle(eachSeries.color);
+ context.setLineWidth(columnOption.meterBorder * opts.pix);
+ }
+ if(seriesIndex == 0){
+ context.setFillStyle(columnOption.meterFillColor);
+ }else{
+ context.setFillStyle(item.color || eachSeries.color);
+ }
var startX = item.x - item.width / 2;
var height = opts.height - item.y - opts.area[2];
- if (columnOption.barBorderCircle) {
- var barBorderRadius = (item.width - columnOption.meterBorder*2) / 2;
- if(barBorderRadius>height){
- barBorderRadius = height;
+ if ((columnOption.barBorderRadius && columnOption.barBorderRadius.length === 4) || columnOption.barBorderCircle === true) {
+ const left = startX;
+ const top = item.y;
+ const width = item.width;
+ const height = zeroPoints - item.y;
+ if (columnOption.barBorderCircle) {
+ columnOption.barBorderRadius = [width / 2, width / 2, 0, 0];
}
- context.moveTo(startX + columnOption.meterBorder, opts.height - opts.area[2]);
- context.lineTo(startX + columnOption.meterBorder, item.y + barBorderRadius);
- context.arc(startX + item.width/2, item.y + barBorderRadius, barBorderRadius, -Math.PI, 0);
- context.lineTo(startX + item.width - columnOption.meterBorder , opts.height - opts.area[2]);
- context.lineTo(startX, opts.height - opts.area[2]);
+ let [r0, r1, r2, r3] = columnOption.barBorderRadius;
+ let minRadius = Math.min(width/2,height/2);
+ r0 = r0 > minRadius ? minRadius : r0;
+ r1 = r1 > minRadius ? minRadius : r1;
+ r2 = r2 > minRadius ? minRadius : r2;
+ r3 = r3 > minRadius ? minRadius : r3;
+ r0 = r0 < 0 ? 0 : r0;
+ r1 = r1 < 0 ? 0 : r1;
+ r2 = r2 < 0 ? 0 : r2;
+ r3 = r3 < 0 ? 0 : r3;
+ context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2);
+ context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0);
+ context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2);
+ context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI);
context.fill();
}else{
context.moveTo(startX, item.y);
- context.fillRect(startX, item.y, item.width, height);
- context.closePath();
+ context.lineTo(startX + item.width, item.y);
+ context.lineTo(startX + item.width, zeroPoints);
+ context.lineTo(startX, zeroPoints);
+ context.lineTo(startX, item.y);
context.fill();
}
- //鐢昏竟妗嗙嚎
- if (columnOption.meterBorder > 0) {
- context.beginPath();
- context.setStrokeStyle(eachSeries.color);
- context.setLineWidth(columnOption.meterBorder * opts.pix);
- if (columnOption.barBorderCircle) {
- var barBorderRadius = (item.width - columnOption.meterBorder)/ 2;
- if(barBorderRadius>height){
- barBorderRadius = height;
- }
- context.moveTo(startX + columnOption.meterBorder * 0.5, opts.height - opts.area[2]);
- context.lineTo(startX + columnOption.meterBorder * 0.5, item.y + barBorderRadius);
- context.arc(startX + item.width/2, item.y + barBorderRadius - columnOption.meterBorder * 0.5, barBorderRadius, -Math.PI, 0);
- context.lineTo(startX + item.width - columnOption.meterBorder * 0.5, opts.height - opts.area[2]);
- }else{
- context.moveTo(startX + columnOption.meterBorder * 0.5, item.y + height);
- context.lineTo(startX + columnOption.meterBorder * 0.5, item.y + columnOption.meterBorder * 0.5);
- context.lineTo(startX + item.width - columnOption.meterBorder * 0.5, item.y + columnOption.meterBorder * 0.5);
- context.lineTo(startX + item.width - columnOption.meterBorder * 0.5, item.y + height);
- }
+ if (seriesIndex == 0 && columnOption.meterBorder > 0) {
+ context.closePath();
context.stroke();
}
}
- };
- } else {
- for (let i = 0; i < points.length; i++) {
- let item = points[i];
- if (item !== null && i > leftNum && i < rightNum) {
- context.beginPath();
- context.setFillStyle(item.color || eachSeries.color);
- var startX = item.x - item.width / 2;
- var height = opts.height - item.y - opts.area[2];
- if (columnOption.barBorderCircle) {
- var barBorderRadius = item.width / 2;
- if(barBorderRadius>height){
- barBorderRadius = height;
- }
- context.moveTo(startX, opts.height - opts.area[2]);
- context.arc(startX + barBorderRadius, item.y + barBorderRadius, barBorderRadius, -Math.PI, -Math.PI / 2);
- context.arc(startX + item.width - barBorderRadius, item.y + barBorderRadius, barBorderRadius, -Math.PI / 2, 0);
- context.lineTo(startX + item.width, opts.height - opts.area[2]);
- context.lineTo(startX, opts.height - opts.area[2]);
- context.fill();
- }else{
- context.moveTo(startX, item.y);
- context.fillRect(startX, item.y, item.width, height);
- context.closePath();
- context.fill();
- }
- }
- };
- }
+ }
break;
}
});
@@ -2818,17 +3167,17 @@
var data = eachSeries.data;
switch (columnOption.type) {
case 'group':
- var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
+ var points = getColumnDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
- drawPointText(points, eachSeries, config, context, opts);
+ drawColumePointText(points, eachSeries, config, context, opts);
break;
case 'stack':
var points = getStackDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, seriesIndex, series, process);
- drawPointText(points, eachSeries, config, context, opts);
+ drawColumePointText(points, eachSeries, config, context, opts);
break;
case 'meter':
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
- drawPointText(points, eachSeries, config, context, opts);
+ drawColumePointText(points, eachSeries, config, context, opts);
break;
}
});
@@ -2837,6 +3186,235 @@
return {
xAxisPoints: xAxisPoints,
calPoints: calPoints,
+ eachSpacing: eachSpacing
+ };
+}
+
+function drawMountDataPoints(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 mountOption = assign({}, {
+ type: 'mount',
+ widthRatio: 1,
+ borderWidth: 1,
+ barBorderCircle: false,
+ barBorderRadius: [],
+ linearType: 'none',
+ linearOpacity: 1,
+ customColor: [],
+ colorStop: 0,
+ }, opts.extra.mount);
+ mountOption.widthRatio = mountOption.widthRatio <= 0 ? 0 : mountOption.widthRatio;
+ mountOption.widthRatio = mountOption.widthRatio >= 2 ? 2 : mountOption.widthRatio;
+ 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;
+ }
+ mountOption.customColor = fillCustomColor(mountOption.linearType, mountOption.customColor, series, config);
+ let ranges, minRange, maxRange;
+ ranges = [].concat(opts.chartData.yAxisData.ranges[0]);
+ minRange = ranges.pop();
+ maxRange = ranges.shift();
+
+ // 璁＄畻0杞村潗鏍�
+ let spacingValid = opts.height - opts.area[0] - opts.area[2];
+ let zeroHeight = spacingValid * (0 - minRange) / (maxRange - minRange);
+ let zeroPoints = opts.height - Math.round(zeroHeight) - opts.area[2];
+
+ var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints, process);
+ switch (mountOption.type) {
+ case 'bar':
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i];
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - eachSpacing*mountOption.widthRatio/2;
+ var height = opts.height - item.y - opts.area[2];
+ context.beginPath();
+ var fillColor = item.color || series[i].color
+ var strokeColor = item.color || series[i].color
+ if (mountOption.linearType !== 'none') {
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
+ //閫忔槑娓愬彉
+ if (mountOption.linearType == 'opacity') {
+ grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
+ grd.addColorStop(1, hexToRgb(fillColor, 1));
+ } else {
+ grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity));
+ grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex],mountOption.linearOpacity));
+ grd.addColorStop(1, hexToRgb(fillColor, 1));
+ }
+ fillColor = grd
+ }
+ // 鍦嗚杈规
+ if ((mountOption.barBorderRadius && mountOption.barBorderRadius.length === 4) || mountOption.barBorderCircle === true) {
+ const left = startX;
+ const top = item.y > zeroPoints ? zeroPoints : item.y;
+ const width = item.width;
+ const height = Math.abs(zeroPoints - item.y);
+ if (mountOption.barBorderCircle) {
+ mountOption.barBorderRadius = [width / 2, width / 2, 0, 0];
+ }
+ if(item.y > zeroPoints){
+ mountOption.barBorderRadius = [0, 0,width / 2, width / 2];
+ }
+ let [r0, r1, r2, r3] = mountOption.barBorderRadius;
+ let minRadius = Math.min(width/2,height/2);
+ r0 = r0 > minRadius ? minRadius : r0;
+ r1 = r1 > minRadius ? minRadius : r1;
+ r2 = r2 > minRadius ? minRadius : r2;
+ r3 = r3 > minRadius ? minRadius : r3;
+ r0 = r0 < 0 ? 0 : r0;
+ r1 = r1 < 0 ? 0 : r1;
+ r2 = r2 < 0 ? 0 : r2;
+ r3 = r3 < 0 ? 0 : r3;
+ context.arc(left + r0, top + r0, r0, -Math.PI, -Math.PI / 2);
+ context.arc(left + width - r1, top + r1, r1, -Math.PI / 2, 0);
+ context.arc(left + width - r2, top + height - r2, r2, 0, Math.PI / 2);
+ context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI);
+ } else {
+ context.moveTo(startX, item.y);
+ context.lineTo(startX + item.width, item.y);
+ context.lineTo(startX + item.width, zeroPoints);
+ context.lineTo(startX, zeroPoints);
+ context.lineTo(startX, item.y);
+ }
+ context.setStrokeStyle(strokeColor);
+ context.setFillStyle(fillColor);
+ if(mountOption.borderWidth > 0){
+ context.setLineWidth(mountOption.borderWidth * opts.pix);
+ context.closePath();
+ context.stroke();
+ }
+ context.fill();
+ }
+ };
+ break;
+ case 'triangle':
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i];
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - eachSpacing*mountOption.widthRatio/2;
+ var height = opts.height - item.y - opts.area[2];
+ context.beginPath();
+ var fillColor = item.color || series[i].color
+ var strokeColor = item.color || series[i].color
+ if (mountOption.linearType !== 'none') {
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
+ //閫忔槑娓愬彉
+ if (mountOption.linearType == 'opacity') {
+ grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
+ grd.addColorStop(1, hexToRgb(fillColor, 1));
+ } else {
+ grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity));
+ grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex],mountOption.linearOpacity));
+ grd.addColorStop(1, hexToRgb(fillColor, 1));
+ }
+ fillColor = grd
+ }
+ context.moveTo(startX, zeroPoints);
+ context.lineTo(item.x, item.y);
+ context.lineTo(startX + item.width, zeroPoints);
+ context.setStrokeStyle(strokeColor);
+ context.setFillStyle(fillColor);
+ if(mountOption.borderWidth > 0){
+ context.setLineWidth(mountOption.borderWidth * opts.pix);
+ context.stroke();
+ }
+ context.fill();
+ }
+ };
+ break;
+ case 'mount':
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i];
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - eachSpacing*mountOption.widthRatio/2;
+ var height = opts.height - item.y - opts.area[2];
+ context.beginPath();
+ var fillColor = item.color || series[i].color
+ var strokeColor = item.color || series[i].color
+ if (mountOption.linearType !== 'none') {
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
+ //閫忔槑娓愬彉
+ if (mountOption.linearType == 'opacity') {
+ grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
+ grd.addColorStop(1, hexToRgb(fillColor, 1));
+ } else {
+ grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity));
+ grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex],mountOption.linearOpacity));
+ grd.addColorStop(1, hexToRgb(fillColor, 1));
+ }
+ fillColor = grd
+ }
+ context.moveTo(startX, zeroPoints);
+ context.bezierCurveTo(item.x - item.width/4, zeroPoints, item.x - item.width/4, item.y, item.x, item.y);
+ context.bezierCurveTo(item.x + item.width/4, item.y, item.x + item.width/4, zeroPoints, startX + item.width, zeroPoints);
+ context.setStrokeStyle(strokeColor);
+ context.setFillStyle(fillColor);
+ if(mountOption.borderWidth > 0){
+ context.setLineWidth(mountOption.borderWidth * opts.pix);
+ context.stroke();
+ }
+ context.fill();
+ }
+ };
+ break;
+ case 'sharp':
+ for (let i = 0; i < points.length; i++) {
+ let item = points[i];
+ if (item !== null && i > leftNum && i < rightNum) {
+ var startX = item.x - eachSpacing*mountOption.widthRatio/2;
+ var height = opts.height - item.y - opts.area[2];
+ context.beginPath();
+ var fillColor = item.color || series[i].color
+ var strokeColor = item.color || series[i].color
+ if (mountOption.linearType !== 'none') {
+ var grd = context.createLinearGradient(startX, item.y, startX, zeroPoints);
+ //閫忔槑娓愬彉
+ if (mountOption.linearType == 'opacity') {
+ grd.addColorStop(0, hexToRgb(fillColor, mountOption.linearOpacity));
+ grd.addColorStop(1, hexToRgb(fillColor, 1));
+ } else {
+ grd.addColorStop(0, hexToRgb(mountOption.customColor[series[i].linearIndex], mountOption.linearOpacity));
+ grd.addColorStop(mountOption.colorStop, hexToRgb(mountOption.customColor[series[i].linearIndex],mountOption.linearOpacity));
+ grd.addColorStop(1, hexToRgb(fillColor, 1));
+ }
+ fillColor = grd
+ }
+ context.moveTo(startX, zeroPoints);
+ context.quadraticCurveTo(item.x - 0, zeroPoints - height/4, item.x, item.y);
+ context.quadraticCurveTo(item.x + 0, zeroPoints - height/4, startX + item.width, zeroPoints)
+ context.setStrokeStyle(strokeColor);
+ context.setFillStyle(fillColor);
+ if(mountOption.borderWidth > 0){
+ context.setLineWidth(mountOption.borderWidth * opts.pix);
+ context.stroke();
+ }
+ context.fill();
+ }
+ };
+ break;
+ }
+
+ if (opts.dataLabel !== false && process === 1) {
+ let ranges, minRange, maxRange;
+ ranges = [].concat(opts.chartData.yAxisData.ranges[0]);
+ minRange = ranges.pop();
+ maxRange = ranges.shift();
+ var points = getMountDataPoints(series, minRange, maxRange, xAxisPoints, eachSpacing, opts, mountOption, zeroPoints, process);
+ drawMountPointText(points, series, config, context, opts, zeroPoints);
+ }
+ context.restore();
+ return {
+ xAxisPoints: xAxisPoints,
+ calPoints: points,
eachSpacing: eachSpacing
};
}
@@ -2910,7 +3488,7 @@
const left = startX;
const width = item.width;
const top = item.y - item.width / 2;
- const height = item.heigh;
+ const height = item.height;
if (columnOption.barBorderCircle) {
columnOption.barBorderRadius = [width / 2, width / 2, 0, 0];
}
@@ -2932,8 +3510,8 @@
} else {
context.moveTo(startX, startY);
context.lineTo(item.x, startY);
- context.lineTo(item.x, startY + item.width - 2);
- context.lineTo(startX, startY + item.width - 2);
+ context.lineTo(item.x, startY + item.width);
+ context.lineTo(startX, startY + item.width);
context.lineTo(startX, startY);
context.setLineWidth(1)
context.setStrokeStyle(strokeColor);
@@ -2958,7 +3536,7 @@
var startX = item.x0;
context.setFillStyle(fillColor);
context.moveTo(startX, item.y - item.width/2);
- context.fillRect(startX, item.y - item.width/2, item.height , item.width - 2);
+ context.fillRect(startX, item.y - item.width/2, item.height , item.width);
context.closePath();
context.fill();
}
@@ -3136,7 +3714,8 @@
opacity: 0.2,
addLine: false,
width: 2,
- gradient: false
+ gradient: false,
+ activeType: 'none'
}, opts.extra.area);
let xAxisData = opts.chartData.xAxisData,
xAxisPoints = xAxisData.xAxisPoints,
@@ -3223,10 +3802,10 @@
} 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.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();
@@ -3242,7 +3821,7 @@
context.setLineWidth(areaOption.width * opts.pix);
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);
+ // 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;
@@ -3294,6 +3873,7 @@
if (opts.dataPointShape !== false) {
drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
}
+ drawActivePoint(points, eachSeries.color, eachSeries.pointShape, context, opts, areaOption,seriesIndex);
});
if (opts.dataLabel !== false && process === 1) {
@@ -3443,9 +4023,9 @@
if (opts.dataLabel !== false && process === 1) {
points.forEach(function(item, index) {
context.beginPath();
- var fontSize = series.textSize * opts.pix || config.fontSize;
+ var fontSize = eachSeries.textSize * opts.pix || config.fontSize;
context.setFontSize(fontSize);
- context.setFillStyle(series.textColor || "#FFFFFF");
+ context.setFillStyle(eachSeries.textColor || "#FFFFFF");
context.setTextAlign('center');
context.fillText(String(item.t), item.x, item.y + fontSize/2);
context.closePath();
@@ -3462,12 +4042,15 @@
};
}
-
function drawLineDataPoints(series, opts, config, context) {
var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var lineOption = assign({}, {
type: 'straight',
- width: 2
+ width: 2,
+ activeType: 'none',
+ linearType: 'none',
+ onShadow: false,
+ animation: 'vertical',
}, opts.extra.line);
lineOption.width *= opts.pix;
let xAxisData = opts.chartData.xAxisData,
@@ -3483,12 +4066,18 @@
rightSpace = leftSpace + (opts.xAxis.itemCount + 4) * eachSpacing;
}
series.forEach(function(eachSeries, seriesIndex) {
+ // 杩欐寰堢濂囩殑浠ｇ爜鐢ㄤ簬瑙ｅ喅ios16鐨剆etStrokeStyle澶辨晥鐨刡ug
+ context.beginPath();
+ context.setStrokeStyle(eachSeries.color);
+ context.moveTo(-10000, -10000);
+ context.lineTo(-10001, -10001);
+ context.stroke();
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 points = getLineDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, lineOption, process);
calPoints.push(points);
var splitPointList = splitPoints(points,eachSeries);
if (eachSeries.lineType == 'dash') {
@@ -3497,12 +4086,25 @@
context.setLineDash([dashLength, dashLength]);
}
context.beginPath();
- context.setStrokeStyle(eachSeries.color);
+ var strokeColor = eachSeries.color;
+ if (lineOption.linearType !== 'none' && eachSeries.linearColor && eachSeries.linearColor.length > 0) {
+ var grd = context.createLinearGradient(opts.chartData.xAxisData.startX, opts.height/2, opts.chartData.xAxisData.endX, opts.height/2);
+ for (var i = 0; i < eachSeries.linearColor.length; i++) {
+ grd.addColorStop(eachSeries.linearColor[i][0], hexToRgb(eachSeries.linearColor[i][1], 1));
+ }
+ strokeColor = grd
+ }
+ context.setStrokeStyle(strokeColor);
+ if (lineOption.onShadow == true && eachSeries.setShadow && eachSeries.setShadow.length > 0) {
+ context.setShadow(eachSeries.setShadow[0], eachSeries.setShadow[1], eachSeries.setShadow[2], eachSeries.setShadow[3]);
+ }else{
+ context.setShadow(0, 0, 0, 'rgba(0,0,0,0)');
+ }
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);
+ // 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;
@@ -3552,6 +4154,7 @@
if (opts.dataPointShape !== false) {
drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
}
+ drawActivePoint(points, eachSeries.color, eachSeries.pointShape, context, opts, lineOption);
});
if (opts.dataLabel !== false && process === 1) {
series.forEach(function(eachSeries, seriesIndex) {
@@ -3574,6 +4177,9 @@
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 columnOption = assign({}, {
width: eachSpacing / 2,
barBorderCircle: false,
@@ -3584,9 +4190,13 @@
customColor: [],
colorStop: 0,
}, opts.extra.mix.column);
- let xAxisData = opts.chartData.xAxisData,
- xAxisPoints = xAxisData.xAxisPoints,
- eachSpacing = xAxisData.eachSpacing;
+ let areaOption = assign({}, {
+ opacity: 0.2,
+ gradient: false
+ }, opts.extra.mix.area);
+ let lineOption = assign({}, {
+ width: 2
+ }, opts.extra.mix.line);
let endY = opts.height - opts.area[2];
let calPoints = [];
var columnIndex = 0;
@@ -3666,8 +4276,8 @@
context.arc(left + r3, top + height - r3, r3, Math.PI / 2, Math.PI);
} else {
context.moveTo(startX, item.y);
- context.lineTo(startX + item.width - 2, item.y);
- context.lineTo(startX + item.width - 2, opts.height - opts.area[2]);
+ context.lineTo(startX + item.width, item.y);
+ context.lineTo(startX + item.width, opts.height - opts.area[2]);
context.lineTo(startX, opts.height - opts.area[2]);
context.lineTo(startX, item.y);
context.setLineWidth(1)
@@ -3688,7 +4298,15 @@
// 缁樺埗鍖哄煙鏁版嵁
context.beginPath();
context.setStrokeStyle(eachSeries.color);
- context.setFillStyle(hexToRgb(eachSeries.color, 0.2));
+ 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(2 * opts.pix);
if (points.length > 1) {
var firstPoint = points[0];
@@ -3725,10 +4343,10 @@
} 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.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();
@@ -3745,10 +4363,10 @@
}
context.beginPath();
context.setStrokeStyle(eachSeries.color);
- context.setLineWidth(2 * opts.pix);
+ context.setLineWidth(lineOption.width * opts.pix);
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);
+ // 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;
@@ -3817,9 +4435,10 @@
}
}
+
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')) {
+ if (toolTipOption.horizentalLine && opts.tooltip && process === 1 && (opts.type == 'line' || opts.type == 'area' || opts.type == 'column' || opts.type == 'mount' || opts.type == 'candle' || opts.type == 'mix')) {
drawToolTipHorizentalLine(opts, config, context, eachSpacing, xAxisPoints)
}
context.save();
@@ -3852,6 +4471,10 @@
var scrollY = opts.height - opts.area[2] + config.xAxisHeight;
var scrollScreenWidth = endX - startX;
var scrollTotalWidth = eachSpacing * (xAxisPoints.length - 1);
+ if(opts.type == 'mount' && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1){
+ if(opts.extra.mount.widthRatio>2) opts.extra.mount.widthRatio = 2
+ scrollTotalWidth += (opts.extra.mount.widthRatio - 1)*eachSpacing;
+ }
var scrollWidth = scrollScreenWidth * scrollScreenWidth / scrollTotalWidth;
var scrollLeft = 0;
if (opts._scrollDistance_) {
@@ -3944,7 +4567,7 @@
var xAxisFontSize = opts.xAxis.fontSize * opts.pix || config.fontSize;
if (config._xAxisTextAngle_ === 0) {
newCategories.forEach(function(item, index) {
- var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item) : item;
+ var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item,index,opts) : item;
var offset = -measureText(String(xitem), xAxisFontSize, context) / 2;
if (boundaryGap == 'center') {
offset += eachSpacing / 2;
@@ -3953,39 +4576,68 @@
if (opts.xAxis.scrollShow) {
scrollHeight = 6 * opts.pix;
}
- context.beginPath();
- context.setFontSize(xAxisFontSize);
- context.setFillStyle(opts.xAxis.fontColor || opts.fontColor);
- context.fillText(String(xitem), xAxisPoints[index] + offset, startY + xAxisFontSize + (config.xAxisHeight - scrollHeight - xAxisFontSize) / 2);
- context.closePath();
- context.stroke();
+ // 濡傛灉鍦ㄤ富瑙嗗浘鍖哄煙鍐�
+ var _scrollDistance_ = opts._scrollDistance_ || 0;
+ var truePoints = boundaryGap == 'center' ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index];
+ if((truePoints - Math.abs(_scrollDistance_)) >= (opts.area[3] - 1) && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1] + 1)){
+ context.beginPath();
+ context.setFontSize(xAxisFontSize);
+ context.setFillStyle(opts.xAxis.fontColor || opts.fontColor);
+ context.fillText(String(xitem), xAxisPoints[index] + offset, startY + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.fontSize) * opts.pix / 2 + opts.xAxis.fontSize * opts.pix);
+ context.closePath();
+ context.stroke();
+ }
});
} else {
newCategories.forEach(function(item, index) {
var xitem = opts.xAxis.formatter ? opts.xAxis.formatter(item) : item;
- context.save();
- context.beginPath();
- context.setFontSize(xAxisFontSize);
- context.setFillStyle(opts.xAxis.fontColor || opts.fontColor);
- var textWidth = measureText(String(xitem), xAxisFontSize, context);
- var offset = -textWidth;
- if (boundaryGap == 'center') {
- offset += eachSpacing / 2;
+ // 濡傛灉鍦ㄤ富瑙嗗浘鍖哄煙鍐�
+ var _scrollDistance_ = opts._scrollDistance_ || 0;
+ var truePoints = boundaryGap == 'center' ? xAxisPoints[index] + eachSpacing / 2 : xAxisPoints[index];
+ if((truePoints - Math.abs(_scrollDistance_)) >= (opts.area[3] - 1) && (truePoints - Math.abs(_scrollDistance_)) <= (opts.width - opts.area[1] + 1)){
+ context.save();
+ context.beginPath();
+ context.setFontSize(xAxisFontSize);
+ context.setFillStyle(opts.xAxis.fontColor || opts.fontColor);
+ var textWidth = measureText(String(xitem), xAxisFontSize, context);
+ var offsetX = xAxisPoints[index];
+ if (boundaryGap == 'center') {
+ offsetX = xAxisPoints[index] + eachSpacing / 2;
+ }
+ var scrollHeight = 0;
+ if (opts.xAxis.scrollShow) {
+ scrollHeight = 6 * opts.pix;
+ }
+ var offsetY = startY + opts.xAxis.marginTop * opts.pix + xAxisFontSize - xAxisFontSize * Math.abs(Math.sin(config._xAxisTextAngle_));
+ if(opts.xAxis.rotateAngle < 0){
+ offsetX -= xAxisFontSize / 2;
+ textWidth = 0;
+ }else{
+ offsetX += xAxisFontSize / 2;
+ textWidth = -textWidth;
+ }
+ context.translate(offsetX, offsetY);
+ context.rotate(-1 * config._xAxisTextAngle_);
+ context.fillText(String(xitem), textWidth , 0 );
+ context.closePath();
+ context.stroke();
+ context.restore();
}
- 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(xitem), xAxisPoints[index] + offset, startY + xAxisFontSize + 5);
- context.closePath();
- context.stroke();
- context.restore();
});
}
}
context.restore();
+
+ //鐢籜杞存爣棰�
+ if (opts.xAxis.title) {
+ context.beginPath();
+ context.setFontSize(opts.xAxis.titleFontSize * opts.pix);
+ context.setFillStyle(opts.xAxis.titleFontColor);
+ context.fillText(String(opts.xAxis.title), opts.width - opts.area[1] + opts.xAxis.titleOffsetX * opts.pix,opts.height - opts.area[2] + opts.xAxis.marginTop * opts.pix + (opts.xAxis.lineHeight - opts.xAxis.titleFontSize) * opts.pix / 2 + (opts.xAxis.titleFontSize + opts.xAxis.titleOffsetY) * opts.pix);
+ context.closePath();
+ context.stroke();
+ }
+
//缁樺埗X杞磋酱绾�
if (opts.xAxis.axisLine) {
context.beginPath();
@@ -4007,6 +4659,10 @@
let xAxisPoints = opts.chartData.xAxisData.xAxisPoints,
xAxiseachSpacing = opts.chartData.xAxisData.eachSpacing;
let TotalWidth = xAxiseachSpacing * (xAxisPoints.length - 1);
+ if(opts.type == 'mount' && opts.extra && opts.extra.mount && opts.extra.mount.widthRatio && opts.extra.mount.widthRatio > 1 ){
+ if(opts.extra.mount.widthRatio>2) opts.extra.mount.widthRatio = 2
+ TotalWidth += (opts.extra.mount.widthRatio - 1) * xAxiseachSpacing;
+ }
let endX = startX + TotalWidth;
let points = [];
let startY = 1
@@ -4044,21 +4700,14 @@
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.pix;
- }
- if (opts.xAxis.rotateLabel) {
- fillEndY = opts.height - opts.area[2] + opts.fontSize * opts.pix / 2;
- }
// set YAxis background
context.beginPath();
context.setFillStyle(opts.background);
if (opts.enableScroll == true && opts.xAxis.scrollPosition && opts.xAxis.scrollPosition !== 'left') {
- context.fillRect(0, 0, startX, fillEndY);
+ context.fillRect(0, 0, startX, endY + 2 * opts.pix);
}
if (opts.enableScroll == true && opts.xAxis.scrollPosition && opts.xAxis.scrollPosition !== 'right') {
- context.fillRect(endX, 0, opts.width, fillEndY);
+ context.fillRect(endX, 0, opts.width, endY + 2 * opts.pix);
}
context.closePath();
context.stroke();
@@ -4086,7 +4735,7 @@
let textAlign = yData.textAlign || "right";
//鐢籝杞村埢搴﹀強鏂囨
rangesFormat.forEach(function(item, index) {
- var pos = points[index] ? points[index] : endY;
+ var pos = points[index];
context.beginPath();
context.setFontSize(yAxisFontSize);
context.setLineWidth(1 * opts.pix);
@@ -4313,17 +4962,18 @@
context.stroke();
startX += shapeWidth + shapeRight;
let fontTrans = 0.5 * lineHeight + 0.5 * fontSize - 2;
+ const legendText = item.legendText ? item.legendText : item.name;
context.beginPath();
context.setFontSize(fontSize);
context.setFillStyle(item.show ? opts.legend.fontColor : opts.legend.hiddenColor);
- context.fillText(item.name, startX, startY + fontTrans);
+ context.fillText(legendText, startX, startY + fontTrans);
context.closePath();
context.stroke();
if (opts.legend.position == 'top' || opts.legend.position == 'bottom') {
- startX += measureText(item.name, fontSize, context) + itemGap;
+ startX += measureText(legendText, fontSize, context) + itemGap;
item.area[2] = startX;
} else {
- item.area[2] = startX + measureText(item.name, fontSize, context) + itemGap;;
+ item.area[2] = startX + measureText(legendText, fontSize, context) + itemGap;;
startX -= shapeWidth + shapeRight;
startY += lineHeight;
}
@@ -4356,6 +5006,7 @@
}
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);
+ radius = radius < 10 ? 10 : radius;
if (pieOption.customRadius > 0) {
radius = pieOption.customRadius * opts.pix;
}
@@ -4415,16 +5066,7 @@
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);
- }
+ drawPieText(series, opts, config, context, radius, centerPosition);
}
if (process === 1 && opts.type === 'ring') {
drawRingTitle(opts, config, context, centerPosition);
@@ -4458,7 +5100,11 @@
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);
+ radius = radius < 10 ? 10 : radius;
var minRadius = roseOption.minRadius || radius * 0.5;
+ if(radius < minRadius){
+ radius = minRadius + 10;
+ }
series = getRoseDataPoints(series, roseOption.type, minRadius, radius, process);
var activeRadius = roseOption.activeRadius * opts.pix;
roseOption.customColor = fillCustomColor(roseOption.linearType, roseOption.customColor, series, config);
@@ -4504,16 +5150,7 @@
});
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);
- }
+ drawPieText(series, opts, config, context, radius, centerPosition);
}
return {
center: centerPosition,
@@ -4528,6 +5165,8 @@
startAngle: 0.75,
endAngle: 0.25,
type: 'default',
+ direction: 'cw',
+ lineCap: 'round',
width: 12 ,
gap: 2 ,
linearType: 'none',
@@ -4554,6 +5193,7 @@
radius -= 5 * opts.pix;
radius -= arcbarOption.width / 2;
}
+ radius = radius < 10 ? 10 : radius;
arcbarOption.customColor = fillCustomColor(arcbarOption.linearType, arcbarOption.customColor, series, config);
for (let i = 0; i < series.length; i++) {
@@ -4561,12 +5201,12 @@
//鑳屾櫙棰滆壊
context.setLineWidth(arcbarOption.width * opts.pix);
context.setStrokeStyle(arcbarOption.backgroundColor || '#E9E9E9');
- context.setLineCap('round');
+ context.setLineCap(arcbarOption.lineCap);
context.beginPath();
if (arcbarOption.type == 'default') {
- context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i, arcbarOption.startAngle * Math.PI, arcbarOption.endAngle * Math.PI, false);
+ context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i, arcbarOption.startAngle * Math.PI, arcbarOption.endAngle * Math.PI, arcbarOption.direction == 'ccw');
} else {
- context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i, 0, 2 * Math.PI, false);
+ context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i, 0, 2 * Math.PI, arcbarOption.direction == 'ccw');
}
context.stroke();
//杩涘害鏉�
@@ -4579,9 +5219,9 @@
}
context.setLineWidth(arcbarOption.width * opts.pix);
context.setStrokeStyle(fillColor);
- context.setLineCap('round');
+ context.setLineCap(arcbarOption.lineCap);
context.beginPath();
- context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i, arcbarOption.startAngle * Math.PI, eachSeries._proportion_ * Math.PI, false);
+ context.arc(centerPosition.x, centerPosition.y, radius - (arcbarOption.width * opts.pix + arcbarOption.gap * opts.pix) * i, arcbarOption.startAngle * Math.PI, eachSeries._proportion_ * Math.PI, arcbarOption.direction == 'ccw');
context.stroke();
}
drawRingTitle(opts, config, context, centerPosition);
@@ -4627,6 +5267,7 @@
var radius = Math.min(centerPosition.x, centerPosition.y);
radius -= 5 * opts.pix;
radius -= gaugeOption.width / 2;
+ radius = radius < 10 ? 10 : radius;
var innerRadius = radius - gaugeOption.width;
var totalAngle = 0;
//鍒ゆ柇浠〃鐩樼殑鏍峰紡锛歞efault鐧惧害鏍峰紡锛宲rogress鏂版牱寮�
@@ -4650,7 +5291,11 @@
context.arc(centerPosition.x, centerPosition.y, innerRadius, gaugeOption.startAngle * Math.PI, gaugeOption.endAngle * Math.PI, false);
context.stroke();
//## 绗簩姝ョ敾鍒诲害绾�
- totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
+ }
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;
@@ -4676,7 +5321,7 @@
}
context.restore();
//## 绗笁姝ョ敾杩涘害鏉�
- series = getArcbarDataPoints(series, gaugeOption, process);
+ series = getGaugeArcbarDataPoints(series, gaugeOption, process);
context.setLineWidth(gaugeOption.width);
context.setStrokeStyle(series[0].color);
context.setLineCap('round');
@@ -4722,7 +5367,11 @@
}
context.save();
//鐢诲埢搴︾嚎
- totalAngle = gaugeOption.startAngle - gaugeOption.endAngle + 1;
+ if (gaugeOption.endAngle < gaugeOption.startAngle) {
+ totalAngle = 2 + gaugeOption.endAngle - gaugeOption.startAngle;
+ } else {
+ totalAngle = gaugeOption.startAngle - gaugeOption.endAngle;
+ }
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;
@@ -4799,10 +5448,20 @@
var radarOption = assign({}, {
gridColor: '#cccccc',
gridType: 'radar',
+ gridEval:1,
+ axisLabel:false,
+ axisLabelTofix:0,
+ labelShow:true,
+ labelColor:'#666666',
+ labelPointShow:false,
+ labelPointRadius:3,
+ labelPointColor:'#cccccc',
opacity: 0.2,
gridCount: 3,
border:false,
- borderWidth:2
+ borderWidth:2,
+ linearType: 'none',
+ customColor: [],
}, opts.extra.radar);
var coordinateAngle = getRadarCoordinateSeries(opts.categories.length);
var centerPosition = {
@@ -4813,14 +5472,18 @@
var yr = (opts.height - opts.area[0] - opts.area[2]) / 2
var radius = Math.min(xr - (getMaxTextListLength(opts.categories, config.fontSize, context) + config.radarLabelTextMargin), yr - config.radarLabelTextMargin);
radius -= config.radarLabelTextMargin * opts.pix;
+ radius = radius < 10 ? 10 : radius;
+ radius = radarOption.radius ? radarOption.radius : radius;
// 鐢诲垎鍓茬嚎
context.beginPath();
context.setLineWidth(1 * opts.pix);
context.setStrokeStyle(radarOption.gridColor);
- coordinateAngle.forEach(function(angle) {
+ coordinateAngle.forEach(function(angle,index) {
var pos = convertCoordinateOrigin(radius * Math.cos(angle), radius * Math.sin(angle), centerPosition);
context.moveTo(centerPosition.x, centerPosition.y);
- context.lineTo(pos.x, pos.y);
+ if (index % radarOption.gridEval == 0) {
+ context.lineTo(pos.x, pos.y);
+ }
});
context.stroke();
context.closePath();
@@ -4853,13 +5516,28 @@
for (var i = 1; i <= radarOption.gridCount; i++) {
_loop(i);
}
+ radarOption.customColor = fillCustomColor(radarOption.linearType, radarOption.customColor, series, config);
var radarDataPoints = getRadarDataPoints(coordinateAngle, centerPosition, radius, series, opts, process);
radarDataPoints.forEach(function(eachSeries, seriesIndex) {
// 缁樺埗鍖哄煙鏁版嵁
context.beginPath();
context.setLineWidth(radarOption.borderWidth * opts.pix);
context.setStrokeStyle(eachSeries.color);
- context.setFillStyle(hexToRgb(eachSeries.color, radarOption.opacity));
+
+ var fillcolor = hexToRgb(eachSeries.color, radarOption.opacity);
+ if (radarOption.linearType == 'custom') {
+ var grd;
+ if(context.createCircularGradient){
+ grd = context.createCircularGradient(centerPosition.x, centerPosition.y, radius)
+ }else{
+ grd = context.createRadialGradient(centerPosition.x, centerPosition.y, 0,centerPosition.x, centerPosition.y, radius)
+ }
+ grd.addColorStop(0, hexToRgb(radarOption.customColor[series[seriesIndex].linearIndex], radarOption.opacity))
+ grd.addColorStop(1, hexToRgb(eachSeries.color, radarOption.opacity))
+ fillcolor = grd
+ }
+
+ context.setFillStyle(fillcolor);
eachSeries.data.forEach(function(item, index) {
if (index === 0) {
context.moveTo(item.position.x, item.position.y);
@@ -4880,6 +5558,21 @@
drawPointShape(points, eachSeries.color, eachSeries.pointShape, context, opts);
}
});
+ // 鐢诲埢搴﹀��
+ if(radarOption.axisLabel === true){
+ const maxData = Math.max(radarOption.max, Math.max.apply(null, dataCombine(series)));
+ const stepLength = radius / radarOption.gridCount;
+ const fontSize = opts.fontSize * opts.pix;
+ context.setFontSize(fontSize);
+ context.setFillStyle(opts.fontColor);
+ context.setTextAlign('left');
+ for (var i = 0; i < radarOption.gridCount + 1; i++) {
+ let label = i * maxData / radarOption.gridCount;
+ label = label.toFixed(radarOption.axisLabelTofix);
+ context.fillText(String(label), centerPosition.x + 3 * opts.pix, centerPosition.y - i * stepLength + fontSize / 2);
+ }
+ }
+
// draw label text
drawRadarLabel(coordinateAngle, radius, centerPosition, opts, config, context);
@@ -4925,36 +5618,27 @@
};
}
-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 lonlat2mercator(longitude, latitude) {
+ var mercator = Array(2);
+ var x = longitude * 20037508.34 / 180;
+ var y = Math.log(Math.tan((90 + latitude) * Math.PI / 360)) / (Math.PI / 180);
+ y = y * 20037508.34 / 180;
+ mercator[0] = x;
+ mercator[1] = y;
+ return mercator;
+}
-function collisionNew(area, points, width, height) {
- var isIn = false;
- for (let i = 0; i < points.length; i++) {
- if (points[i].area) {
- if (area[3] < points[i].area[1] || area[0] > points[i].area[2] || area[1] > points[i].area[3] || area[2] < points[i].area[0]) {
- if (area[0] < 0 || area[1] < 0 || area[2] > width || area[3] > height) {
- isIn = true;
- break;
- } else {
- isIn = false;
- }
- } else {
- isIn = true;
- break;
- }
- }
- }
- return isIn;
-};
+// 澧ㄥ崱鎵樿浆缁忕含搴�
+function mercator2lonlat(longitude, latitude) {
+ var lonlat = Array(2)
+ var x = longitude / 20037508.34 * 180;
+ var y = latitude / 20037508.34 * 180;
+ y = 180 / Math.PI * (2 * Math.atan(Math.exp(y * Math.PI / 180)) - Math.PI / 2);
+ lonlat[0] = x;
+ lonlat[1] = y;
+ return lonlat;
+}
function getBoundingBox(data) {
var bounds = {},coords;
@@ -5053,12 +5737,12 @@
}
}
-
function drawMapDataPoints(series, opts, config, context) {
var mapOption = assign({}, {
border: true,
mercator: false,
borderWidth: 1,
+ active:true,
borderColor: '#666666',
fillOpacity: 0.6,
activeBorderColor: '#f04864',
@@ -5085,8 +5769,8 @@
context.beginPath();
context.setLineWidth(mapOption.borderWidth * opts.pix);
context.setStrokeStyle(mapOption.borderColor);
- context.setFillStyle(hexToRgb(series[i].color, mapOption.fillOpacity));
- if (opts.tooltip) {
+ context.setFillStyle(hexToRgb(series[i].color, series[i].fillOpacity||mapOption.fillOpacity));
+ if (mapOption.active == true && opts.tooltip) {
if (opts.tooltip.index == i) {
context.setStrokeStyle(mapOption.activeBorderColor);
context.setFillStyle(hexToRgb(mapOption.activeFillColor, mapOption.activeFillOpacity));
@@ -5118,7 +5802,9 @@
context.stroke();
}
}
- if (opts.dataLabel == true) {
+ }
+ if (opts.dataLabel == true) {
+ for (var i = 0; i < data.length; i++) {
var centerPoint = data[i].properties.centroid;
if (centerPoint) {
if (mapOption.mercator) {
@@ -5126,10 +5812,14 @@
}
point = coordinateToPoint(centerPoint[1], centerPoint[0], bounds, scale, xoffset, yoffset);
let fontSize = data[i].textSize * opts.pix || config.fontSize;
+ let fontColor = data[i].textColor || opts.fontColor;
+ if(mapOption.active && mapOption.activeTextColor && opts.tooltip && opts.tooltip.index == i){
+ fontColor = mapOption.activeTextColor;
+ }
let text = data[i].properties.name;
context.beginPath();
context.setFontSize(fontSize)
- context.setFillStyle(data[i].textColor || opts.fontColor)
+ context.setFillStyle(fontColor)
context.fillText(text, point.x - measureText(text, fontSize, context) / 2, point.y + fontSize / 2);
context.closePath();
context.stroke();
@@ -5146,6 +5836,37 @@
drawToolTipBridge(opts, config, context, 1);
context.draw();
}
+
+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; i < points.length; i++) {
+ if (points[i].area) {
+ if (area[3] < points[i].area[1] || area[0] > points[i].area[2] || area[1] > points[i].area[3] || area[2] < points[i].area[0]) {
+ if (area[0] < 0 || area[1] < 0 || area[2] > width || area[3] > height) {
+ isIn = true;
+ break;
+ } else {
+ isIn = false;
+ }
+ } else {
+ isIn = true;
+ break;
+ }
+ }
+ }
+ return isIn;
+};
function getWordCloudPoint(opts, type, context) {
let points = opts.series;
@@ -5225,7 +5946,6 @@
return points;
}
-
function drawWordCloudDataPoints(series, opts, config, context) {
let process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
let wordOption = assign({}, {
@@ -5295,6 +6015,7 @@
borderWidth: 2,
borderColor: '#FFFFFF',
fillOpacity: 1,
+ minSize: 0,
labelAlign: 'right',
linearType: 'none',
customColor: [],
@@ -5306,42 +6027,42 @@
};
let activeWidth = funnelOption.activeWidth * opts.pix;
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, funnelOption.type, eachSpacing, process);
+ let seriesNew = getFunnelDataPoints(series, radius, funnelOption, eachSpacing, process);
context.save();
context.translate(centerPosition.x, centerPosition.y);
funnelOption.customColor = fillCustomColor(funnelOption.linearType, funnelOption.customColor, series, config);
if(funnelOption.type == 'pyramid'){
- for (let i = 0; i < series.length; i++) {
- if (i == series.length -1) {
+ for (let i = 0; i < seriesNew.length; i++) {
+ if (i == seriesNew.length -1) {
if (opts.tooltip) {
if (opts.tooltip.index == i) {
context.beginPath();
- context.setFillStyle(hexToRgb(series[i].color, funnelOption.activeOpacity));
+ context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity));
context.moveTo(-activeWidth, -eachSpacing);
- context.lineTo(-series[i].radius - activeWidth, 0);
- context.lineTo(series[i].radius + activeWidth, 0);
+ context.lineTo(-seriesNew[i].radius - activeWidth, 0);
+ context.lineTo(seriesNew[i].radius + activeWidth, 0);
context.lineTo(activeWidth, -eachSpacing);
context.lineTo(-activeWidth, -eachSpacing);
context.closePath();
context.fill();
}
}
- series[i].funnelArea = [centerPosition.x - series[i].radius, centerPosition.y - eachSpacing * (i + 1), centerPosition.x + series[i].radius, centerPosition.y - eachSpacing * i];
+ seriesNew[i].funnelArea = [centerPosition.x - seriesNew[i].radius, centerPosition.y - eachSpacing * (i + 1), centerPosition.x + seriesNew[i].radius, centerPosition.y - eachSpacing * i];
context.beginPath();
context.setLineWidth(funnelOption.borderWidth * opts.pix);
context.setStrokeStyle(funnelOption.borderColor);
- var fillColor = hexToRgb(series[i].color, funnelOption.fillOpacity);
+ var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity);
if (funnelOption.linearType == 'custom') {
- var grd = context.createLinearGradient(series[i].radius, -eachSpacing, -series[i].radius, -eachSpacing);
- grd.addColorStop(0, hexToRgb(series[i].color, funnelOption.fillOpacity));
- grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[series[i].linearIndex], funnelOption.fillOpacity));
- grd.addColorStop(1, hexToRgb(series[i].color, funnelOption.fillOpacity));
+ var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing);
+ grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
+ grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity));
+ grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
fillColor = grd
}
context.setFillStyle(fillColor);
context.moveTo(0, -eachSpacing);
- context.lineTo(-series[i].radius, 0);
- context.lineTo(series[i].radius, 0);
+ context.lineTo(-seriesNew[i].radius, 0);
+ context.lineTo(seriesNew[i].radius, 0);
context.lineTo(0, -eachSpacing);
context.closePath();
context.fill();
@@ -5352,35 +6073,35 @@
if (opts.tooltip) {
if (opts.tooltip.index == i) {
context.beginPath();
- context.setFillStyle(hexToRgb(series[i].color, funnelOption.activeOpacity));
+ context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity));
context.moveTo(0, 0);
- context.lineTo(-series[i].radius - activeWidth, 0);
- context.lineTo(-series[i + 1].radius - activeWidth, -eachSpacing);
- context.lineTo(series[i + 1].radius + activeWidth, -eachSpacing);
- context.lineTo(series[i].radius + activeWidth, 0);
+ context.lineTo(-seriesNew[i].radius - activeWidth, 0);
+ context.lineTo(-seriesNew[i + 1].radius - activeWidth, -eachSpacing);
+ context.lineTo(seriesNew[i + 1].radius + activeWidth, -eachSpacing);
+ context.lineTo(seriesNew[i].radius + activeWidth, 0);
context.lineTo(0, 0);
context.closePath();
context.fill();
}
}
- series[i].funnelArea = [centerPosition.x - series[i].radius, centerPosition.y - eachSpacing * (i + 1), centerPosition.x + series[i].radius, centerPosition.y - eachSpacing * i];
+ seriesNew[i].funnelArea = [centerPosition.x - seriesNew[i].radius, centerPosition.y - eachSpacing * (i + 1), centerPosition.x + seriesNew[i].radius, centerPosition.y - eachSpacing * i];
context.beginPath();
context.setLineWidth(funnelOption.borderWidth * opts.pix);
context.setStrokeStyle(funnelOption.borderColor);
- var fillColor = hexToRgb(series[i].color, funnelOption.fillOpacity);
+ var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity);
if (funnelOption.linearType == 'custom') {
- var grd = context.createLinearGradient(series[i].radius, -eachSpacing, -series[i].radius, -eachSpacing);
- grd.addColorStop(0, hexToRgb(series[i].color, funnelOption.fillOpacity));
- grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[series[i].linearIndex], funnelOption.fillOpacity));
- grd.addColorStop(1, hexToRgb(series[i].color, funnelOption.fillOpacity));
+ var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing);
+ grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
+ grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity));
+ grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
fillColor = grd
}
context.setFillStyle(fillColor);
context.moveTo(0, 0);
- context.lineTo(-series[i].radius, 0);
- context.lineTo(-series[i + 1].radius, -eachSpacing);
- context.lineTo(series[i + 1].radius, -eachSpacing);
- context.lineTo(series[i].radius, 0);
+ context.lineTo(-seriesNew[i].radius, 0);
+ context.lineTo(-seriesNew[i + 1].radius, -eachSpacing);
+ context.lineTo(seriesNew[i + 1].radius, -eachSpacing);
+ context.lineTo(seriesNew[i].radius, 0);
context.lineTo(0, 0);
context.closePath();
context.fill();
@@ -5391,37 +6112,40 @@
context.translate(0, -eachSpacing)
}
}else{
- for (let i = 0; i < series.length; i++) {
- if (i == 0) {
+ context.translate(0, - (seriesNew.length - 1) * eachSpacing);
+ for (let i = 0; i < seriesNew.length; i++) {
+ if (i == seriesNew.length - 1) {
if (opts.tooltip) {
if (opts.tooltip.index == i) {
context.beginPath();
- context.setFillStyle(hexToRgb(series[i].color, funnelOption.activeOpacity));
- context.moveTo(-activeWidth, 0);
- context.lineTo(-series[i].radius - activeWidth, -eachSpacing);
- context.lineTo(series[i].radius + activeWidth, -eachSpacing);
- context.lineTo(activeWidth, 0);
- context.lineTo(-activeWidth, 0);
+ context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity));
+ context.moveTo(-activeWidth - funnelOption.minSize/2, 0);
+ context.lineTo(-seriesNew[i].radius - activeWidth, -eachSpacing);
+ context.lineTo(seriesNew[i].radius + activeWidth, -eachSpacing);
+ context.lineTo(activeWidth + funnelOption.minSize/2, 0);
+ context.lineTo(-activeWidth - funnelOption.minSize/2, 0);
context.closePath();
context.fill();
}
}
- series[i].funnelArea = [centerPosition.x - series[i].radius, centerPosition.y - eachSpacing, centerPosition.x + series[i].radius, centerPosition.y];
+ seriesNew[i].funnelArea = [centerPosition.x - seriesNew[i].radius, centerPosition.y - eachSpacing, centerPosition.x + seriesNew[i].radius, centerPosition.y ];
context.beginPath();
context.setLineWidth(funnelOption.borderWidth * opts.pix);
context.setStrokeStyle(funnelOption.borderColor);
- var fillColor = hexToRgb(series[i].color, funnelOption.fillOpacity);
+ var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity);
if (funnelOption.linearType == 'custom') {
- var grd = context.createLinearGradient(series[i].radius, -eachSpacing, -series[i].radius, -eachSpacing);
- grd.addColorStop(0, hexToRgb(series[i].color, funnelOption.fillOpacity));
- grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[series[i].linearIndex], funnelOption.fillOpacity));
- grd.addColorStop(1, hexToRgb(series[i].color, funnelOption.fillOpacity));
+ var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing);
+ grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
+ grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity));
+ grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
fillColor = grd
}
context.setFillStyle(fillColor);
context.moveTo(0, 0);
- context.lineTo(-series[i].radius, -eachSpacing);
- context.lineTo(series[i].radius, -eachSpacing);
+ context.lineTo(-funnelOption.minSize/2, 0);
+ context.lineTo(-seriesNew[i].radius, -eachSpacing);
+ context.lineTo(seriesNew[i].radius, -eachSpacing);
+ context.lineTo(funnelOption.minSize/2, 0);
context.lineTo(0, 0);
context.closePath();
context.fill();
@@ -5432,35 +6156,35 @@
if (opts.tooltip) {
if (opts.tooltip.index == i) {
context.beginPath();
- context.setFillStyle(hexToRgb(series[i].color, funnelOption.activeOpacity));
+ context.setFillStyle(hexToRgb(seriesNew[i].color, funnelOption.activeOpacity));
context.moveTo(0, 0);
- context.lineTo(-series[i - 1].radius - activeWidth, 0);
- context.lineTo(-series[i].radius - activeWidth, -eachSpacing);
- context.lineTo(series[i].radius + activeWidth, -eachSpacing);
- context.lineTo(series[i - 1].radius + activeWidth, 0);
+ context.lineTo(-seriesNew[i + 1].radius - activeWidth, 0);
+ context.lineTo(-seriesNew[i].radius - activeWidth, -eachSpacing);
+ context.lineTo(seriesNew[i].radius + activeWidth, -eachSpacing);
+ context.lineTo(seriesNew[i + 1].radius + activeWidth, 0);
context.lineTo(0, 0);
context.closePath();
context.fill();
}
}
- series[i].funnelArea = [centerPosition.x - series[i].radius, centerPosition.y - eachSpacing * (i + 1), centerPosition.x + series[i].radius, centerPosition.y - eachSpacing * i];
+ seriesNew[i].funnelArea = [centerPosition.x - seriesNew[i].radius, centerPosition.y - eachSpacing * (seriesNew.length - i), centerPosition.x + seriesNew[i].radius, centerPosition.y - eachSpacing * (seriesNew.length - i - 1)];
context.beginPath();
context.setLineWidth(funnelOption.borderWidth * opts.pix);
context.setStrokeStyle(funnelOption.borderColor);
- var fillColor = hexToRgb(series[i].color, funnelOption.fillOpacity);
+ var fillColor = hexToRgb(seriesNew[i].color, funnelOption.fillOpacity);
if (funnelOption.linearType == 'custom') {
- var grd = context.createLinearGradient(series[i].radius, -eachSpacing, -series[i].radius, -eachSpacing);
- grd.addColorStop(0, hexToRgb(series[i].color, funnelOption.fillOpacity));
- grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[series[i].linearIndex], funnelOption.fillOpacity));
- grd.addColorStop(1, hexToRgb(series[i].color, funnelOption.fillOpacity));
+ var grd = context.createLinearGradient(seriesNew[i].radius, -eachSpacing, -seriesNew[i].radius, -eachSpacing);
+ grd.addColorStop(0, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
+ grd.addColorStop(0.5, hexToRgb(funnelOption.customColor[seriesNew[i].linearIndex], funnelOption.fillOpacity));
+ grd.addColorStop(1, hexToRgb(seriesNew[i].color, funnelOption.fillOpacity));
fillColor = grd
}
context.setFillStyle(fillColor);
context.moveTo(0, 0);
- context.lineTo(-series[i - 1].radius, 0);
- context.lineTo(-series[i].radius, -eachSpacing);
- context.lineTo(series[i].radius, -eachSpacing);
- context.lineTo(series[i - 1].radius, 0);
+ context.lineTo(-seriesNew[i + 1].radius, 0);
+ context.lineTo(-seriesNew[i].radius, -eachSpacing);
+ context.lineTo(seriesNew[i].radius, -eachSpacing);
+ context.lineTo(seriesNew[i + 1].radius, 0);
context.lineTo(0, 0);
context.closePath();
context.fill();
@@ -5468,39 +6192,38 @@
context.stroke();
}
}
- context.translate(0, -eachSpacing)
+ context.translate(0, eachSpacing)
}
}
context.restore();
if (opts.dataLabel !== false && process === 1) {
- drawFunnelText(series, opts, context, eachSpacing, funnelOption.labelAlign, activeWidth, centerPosition);
+ drawFunnelText(seriesNew, opts, context, eachSpacing, funnelOption.labelAlign, activeWidth, centerPosition);
+ }
+ if (process === 1) {
+ drawFunnelCenterText(seriesNew, opts, context, eachSpacing, funnelOption.labelAlign, activeWidth, centerPosition);
}
return {
center: centerPosition,
radius: radius,
- series: series
+ series: seriesNew
};
}
function drawFunnelText(series, opts, context, eachSpacing, labelAlign, activeWidth, centerPosition) {
for (let i = 0; i < series.length; i++) {
let item = series[i];
+ if(item.labelShow === false){
+ continue;
+ }
let startX, endX, startY, fontSize;
- let text = item.formatter ? item.formatter(item,i,series) : util.toFixed(item._proportion_ * 100) + '%';
+ let text = item.formatter ? item.formatter(item,i,series,opts) : util.toFixed(item._proportion_ * 100) + '%';
+ text = item.labelText ? item.labelText : text;
if (labelAlign == 'right') {
- if(opts.extra.funnel.type === 'pyramid'){
- if (i == series.length -1) {
- startX = (item.funnelArea[2] + centerPosition.x) / 2;
- } else {
- startX = (item.funnelArea[2] + series[i + 1].funnelArea[2]) / 2;
- }
- }else{
- if (i == 0) {
- startX = (item.funnelArea[2] + centerPosition.x) / 2;
- } else {
- startX = (item.funnelArea[2] + series[i - 1].funnelArea[2]) / 2;
- }
+ if (i == series.length -1) {
+ startX = (item.funnelArea[2] + centerPosition.x) / 2;
+ } else {
+ startX = (item.funnelArea[2] + series[i + 1].funnelArea[2]) / 2;
}
endX = startX + activeWidth * 2;
startY = item.funnelArea[1] + eachSpacing / 2;
@@ -5515,7 +6238,7 @@
context.closePath();
context.beginPath();
context.moveTo(endX, startY);
- context.arc(endX, startY, 2, 0, 2 * Math.PI);
+ context.arc(endX, startY, 2 * opts.pix, 0, 2 * Math.PI);
context.closePath();
context.fill();
context.beginPath();
@@ -5525,19 +6248,12 @@
context.closePath();
context.stroke();
context.closePath();
- } else {
- if(opts.extra.funnel.type === 'pyramid'){
- if (i == series.length -1) {
- startX = (item.funnelArea[0] + centerPosition.x) / 2;
- } else {
- startX = (item.funnelArea[0] + series[i + 1].funnelArea[0]) / 2;
- }
- }else{
- if (i == 0) {
- startX = (item.funnelArea[0] + centerPosition.x) / 2;
- } else {
- startX = (item.funnelArea[0] + series[i - 1].funnelArea[0]) / 2;
- }
+ }
+ if (labelAlign == 'left') {
+ if (i == series.length -1) {
+ startX = (item.funnelArea[0] + centerPosition.x) / 2;
+ } else {
+ startX = (item.funnelArea[0] + series[i + 1].funnelArea[0]) / 2;
}
endX = startX - activeWidth * 2;
startY = item.funnelArea[1] + eachSpacing / 2;
@@ -5563,11 +6279,32 @@
context.stroke();
context.closePath();
}
-
}
}
+function drawFunnelCenterText(series, opts, context, eachSpacing, labelAlign, activeWidth, centerPosition) {
+ for (let i = 0; i < series.length; i++) {
+ let item = series[i];
+ let startY, fontSize;
+ if (item.centerText) {
+ startY = item.funnelArea[1] + eachSpacing / 2;
+ fontSize = item.centerTextSize * opts.pix || opts.fontSize * opts.pix;
+ context.beginPath();
+ context.setFontSize(fontSize);
+ context.setFillStyle(item.centerTextColor || "#FFFFFF");
+ context.fillText(item.centerText, centerPosition.x - measureText(item.centerText, fontSize, context) / 2, startY + fontSize / 2 - 2);
+ context.closePath();
+ context.stroke();
+ context.closePath();
+ }
+ }
+}
+
+
function drawCanvas(opts, context) {
+ context.save();
+ context.translate(0, 0.5);
+ context.restore();
context.draw();
}
@@ -5645,10 +6382,17 @@
var _this = this;
var series = opts.series;
//鍏煎ECharts楗煎浘绫绘暟鎹牸寮�
- if (type === 'pie' || type === 'ring' || type === 'rose' || type === 'funnel') {
+ if (type === 'pie' || type === 'ring' || type === 'mount' || type === 'rose' || type === 'funnel') {
series = fixPieSeries(series, opts, config);
}
var categories = opts.categories;
+ if (type === 'mount') {
+ categories = [];
+ for (let j = 0; j < series.length; j++) {
+ if(series[j].show !== false) categories.push(series[j].name)
+ }
+ opts.categories = categories;
+ }
series = fillSeries(series, opts, config);
var duration = opts.animation ? opts.duration : 0;
_this.animationInstance && _this.animationInstance.stop();
@@ -5697,7 +6441,7 @@
let _calYAxisData = {},
yAxisWidth = 0;
- if (opts.type === 'line' || opts.type === 'column' || opts.type === 'area' || opts.type === 'mix' || opts.type === 'candle' || opts.type === 'scatter' || opts.type === 'bubble' || opts.type === 'bar') {
+ if (opts.type === 'line' || opts.type === 'column'|| opts.type === 'mount' || opts.type === 'area' || opts.type === 'mix' || opts.type === 'candle' || opts.type === 'scatter' || opts.type === 'bubble' || opts.type === 'bar') {
_calYAxisData = calYAxisData(series, opts, config, context);
yAxisWidth = _calYAxisData.yAxisWidth;
//濡傛灉鏄剧ずY杞存爣棰�
@@ -5759,6 +6503,7 @@
};
}
}
+
//璁＄畻鍙冲榻愬亸绉昏窛绂�
if (opts.enableScroll && opts.xAxis.scrollAlign == 'right' && opts._scrollDistance_ === undefined) {
let offsetLeft = 0,
@@ -5769,18 +6514,17 @@
let totalWidth = eachSpacing * (xAxisPoints.length - 1);
let screenWidth = endX - startX;
offsetLeft = screenWidth - totalWidth;
- _this.scrollOption = {
- currentOffset: offsetLeft,
- startTouchX: offsetLeft,
- distance: 0,
- lastMoveTime: 0
- };
+ _this.scrollOption.currentOffset = offsetLeft;
+ _this.scrollOption.startTouchX = offsetLeft;
+ _this.scrollOption.distance = 0;
+ _this.scrollOption.lastMoveTime = 0;
opts._scrollDistance_ = offsetLeft;
}
if (type === 'pie' || type === 'ring' || type === 'rose') {
config._pieTextMaxLength_ = opts.dataLabel === false ? 0 : getPieTextMaxLength(seriesMA, config, context, opts);
}
+
switch (type) {
case 'word':
this.animationInstance = new Animation({
@@ -5802,6 +6546,9 @@
case 'map':
context.clearRect(0, 0, opts.width, opts.height);
drawMapDataPoints(series, opts, config, context);
+ setTimeout(()=>{
+ this.uevent.trigger('renderComplete');
+ },50)
break;
case 'funnel':
this.animationInstance = new Animation({
@@ -5977,6 +6724,37 @@
}
});
break;
+ case 'mount':
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ 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 _drawMountDataPoints = drawMountDataPoints(series, opts, config, context, process),
+ xAxisPoints = _drawMountDataPoints.xAxisPoints,
+ calPoints = _drawMountDataPoints.calPoints,
+ eachSpacing = _drawMountDataPoints.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.uevent.trigger('renderComplete');
+ }
+ });
+ break;
case 'bar':
this.animationInstance = new Animation({
timing: opts.timing,
@@ -6040,6 +6818,24 @@
});
break;
case 'ring':
+ this.animationInstance = new Animation({
+ timing: opts.timing,
+ 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.uevent.trigger('renderComplete');
+ }
+ });
+ break;
case 'pie':
this.animationInstance = new Animation({
timing: opts.timing,
@@ -6214,6 +7010,7 @@
showTitle: false,
disabled: false,
disableGrid: false,
+ gridSet: 'number',
splitNumber: 5,
gridType: 'solid',
dashLength: 4 * opts.pix,
@@ -6223,16 +7020,25 @@
}, opts.yAxis);
opts.xAxis = assign({}, {
rotateLabel: false,
+ rotateAngle:45,
disabled: false,
disableGrid: false,
splitNumber: 5,
calibration:false,
+ fontColor: '#666666',
+ fontSize: 13,
+ lineHeight: 20,
+ marginTop: 0,
gridType: 'solid',
dashLength: 4,
scrollAlign: 'left',
boundaryGap: 'center',
axisLine: true,
- axisLineColor: '#cccccc'
+ axisLineColor: '#cccccc',
+ titleFontSize: 13,
+ titleOffsetY: 0,
+ titleOffsetX: 0,
+ titleFontColor: '#666666'
}, opts.xAxis);
opts.xAxis.scrollPosition = opts.xAxis.scrollAlign;
opts.legend = assign({}, {
@@ -6251,15 +7057,18 @@
formatter: {},
hiddenColor: '#CECECE'
}, opts.legend);
- opts.extra = assign({}, opts.extra);
+ opts.extra = assign({
+ tooltip:{
+ legendShape: 'auto'
+ }
+ }, opts.extra);
opts.rotate = opts.rotate ? true : false;
opts.animation = opts.animation ? true : false;
opts.rotate = opts.rotate ? true : false;
opts.canvas2d = opts.canvas2d ? true : false;
- let config$$1 = JSON.parse(JSON.stringify(config));
+ let config$$1 = assign({}, config);
config$$1.color = opts.color ? opts.color : config$$1.color;
- config$$1.yAxisTitleWidth = opts.yAxis.disabled !== true && opts.yAxis.title ? config$$1.yAxisTitleWidth : 0;
if (opts.type == 'pie') {
config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.pie.labelWidth * opts.pix || config$$1.pieChartLinePadding * opts.pix;
}
@@ -6270,7 +7079,6 @@
config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : opts.extra.rose.labelWidth * opts.pix || config$$1.pieChartLinePadding * opts.pix;
}
config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding * opts.pix;
- config$$1.yAxisSplit = opts.yAxis.splitNumber ? opts.yAxis.splitNumber : config.yAxisSplit;
//灞忓箷鏃嬭浆
config$$1.rotate = opts.rotate;
@@ -6284,19 +7092,9 @@
//閫傞厤楂樺垎灞�
opts.padding = opts.padding ? opts.padding : config$$1.padding;
config$$1.yAxisWidth = config.yAxisWidth * opts.pix;
- config$$1.xAxisHeight = config.xAxisHeight * opts.pix;
- if (opts.enableScroll && opts.xAxis.scrollShow) {
- config$$1.xAxisHeight += 6 * opts.pix;
- }
- config$$1.xAxisLineHeight = config.xAxisLineHeight * opts.pix;
config$$1.fontSize = opts.fontSize * opts.pix;
config$$1.titleFontSize = config.titleFontSize * opts.pix;
config$$1.subtitleFontSize = config.subtitleFontSize * opts.pix;
- config$$1.toolTipPadding = config.toolTipPadding * opts.pix;
- config$$1.toolTipLineHeight = config.toolTipLineHeight * opts.pix;
- config$$1.columePadding = config.columePadding * opts.pix;
- //this.context = opts.context ? opts.context : uni.createCanvasContext(opts.canvasId, opts.$this);
- //v2.0鐗堟湰鍚庨渶瑕佽嚜琛岃幏鍙朿ontext骞朵紶鍏pts杩涜鍒濆鍖栵紝杩欎箞鍋氭槸涓轰簡纭繚uCharts鍙互璺ㄦ洿澶氱浣跨敤锛屽苟淇濊瘉浜嗚嚜瀹氫箟缁勪欢this瀹炰緥涓嶈寰幆宓屽銆傚鏋滄偍瑙夊緱涓嶄究璇峰彇娑堜笂闈㈡敞閲婏紝閲囩敤v1.0鐗堟湰鐨勬柟寮忎娇鐢紝瀵规缁欐偍甯︽潵鐨勪笉渚挎暚璇疯皡瑙ｏ紒
if(!opts.context){
throw new Error('[uCharts] 鏈幏鍙栧埌context锛佹敞鎰忥細v2.0鐗堟湰鍚庯紝闇�瑕佽嚜琛岃幏鍙朿anvas鐨勭粯鍥句笂涓嬫枃骞朵紶鍏pts.context锛�');
}
@@ -6319,6 +7117,15 @@
}
this.context.setTextAlign = function(e) {
return this.textAlign = e;
+ }
+ this.context.setTextBaseline = function(e) {
+ return this.textBaseline = e;
+ }
+ this.context.setShadow = function(offsetX,offsetY,blur,color) {
+ this.shadowColor = color;
+ this.shadowOffsetX = offsetX;
+ this.shadowOffsetY = offsetY;
+ this.shadowBlur = blur;
}
this.context.draw = function() {}
}
@@ -6346,7 +7153,7 @@
let scrollPosition = data.scrollPosition || 'current';
switch (scrollPosition) {
case 'current':
- //this.opts._scrollDistance_ = this.scrollOption.currentOffset;
+ this.opts._scrollDistance_ = this.scrollOption.currentOffset;
break;
case 'left':
this.opts._scrollDistance_ = 0;
@@ -6412,13 +7219,77 @@
}
this.scrollOption = {
currentOffset: offsetLeft,
- startTouchX: offsetLeft,
+ startTouchX: 0,
distance: 0,
lastMoveTime: 0
};
+ calValidDistance(this, offsetLeft, this.opts.chartData, this.config, this.opts);
this.opts._scrollDistance_ = offsetLeft;
drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
};
+
+uCharts.prototype.dobuleZoom = function(e) {
+ if (this.opts.enableScroll !== true) {
+ console.log('[uCharts] 璇峰惎鐢ㄦ粴鍔ㄦ潯鍚庝娇鐢�')
+ return;
+ }
+ const tcs = e.changedTouches;
+ if (tcs.length < 2) {
+ return;
+ }
+ for (var i = 0; i < tcs.length; i++) {
+ tcs[i].x = tcs[i].x ? tcs[i].x : tcs[i].clientX;
+ tcs[i].y = tcs[i].y ? tcs[i].y : tcs[i].clientY;
+ }
+ const ntcs = [getTouches(tcs[0], this.opts, e),getTouches(tcs[1], this.opts, e)];
+ const xlength = Math.abs(ntcs[0].x - ntcs[1].x);
+ // 璁板綍鍒濆鐨勪袱鎸囦箣闂寸殑鏁版嵁
+ if(!this.scrollOption.moveCount){
+ let cts0 = {changedTouches:[{x:tcs[0].x,y:this.opts.area[0] / this.opts.pix + 2}]};
+ let cts1 = {changedTouches:[{x:tcs[1].x,y:this.opts.area[0] / this.opts.pix + 2}]};
+ if(this.opts.rotate){
+ cts0 = {changedTouches:[{x:this.opts.height / this.opts.pix - this.opts.area[0] / this.opts.pix - 2,y:tcs[0].y}]};
+ cts1 = {changedTouches:[{x:this.opts.height / this.opts.pix - this.opts.area[0] / this.opts.pix - 2,y:tcs[1].y}]};
+ }
+ const moveCurrent1 = this.getCurrentDataIndex(cts0).index;
+ const moveCurrent2 = this.getCurrentDataIndex(cts1).index;
+ const moveCount = Math.abs(moveCurrent1 - moveCurrent2);
+ this.scrollOption.moveCount = moveCount;
+ this.scrollOption.moveCurrent1 = Math.min(moveCurrent1, moveCurrent2);
+ this.scrollOption.moveCurrent2 = Math.max(moveCurrent1, moveCurrent2);
+ return;
+ }
+
+ let currentEachSpacing = xlength / this.scrollOption.moveCount;
+ let itemCount = (this.opts.width - this.opts.area[1] - this.opts.area[3]) / currentEachSpacing;
+ itemCount = itemCount <= 2 ? 2 : itemCount;
+ itemCount = itemCount >= this.opts.categories.length ? this.opts.categories.length : itemCount;
+ this.opts.animation = false;
+ this.opts.xAxis.itemCount = itemCount;
+ // 閲嶆柊璁＄畻婊氬姩鏉″亸绉昏窛绂�
+ 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 currentLeft = eachSpacing * this.scrollOption.moveCurrent1;
+ let screenWidth = endX - startX;
+ let MaxLeft = screenWidth - eachSpacing * (xAxisPoints.length - 1);
+ offsetLeft = -currentLeft+Math.min(ntcs[0].x,ntcs[1].x)-this.opts.area[3]-eachSpacing;
+ if (offsetLeft > 0) {
+ offsetLeft = 0;
+ }
+ if (offsetLeft < MaxLeft) {
+ offsetLeft = MaxLeft;
+ }
+ this.scrollOption.currentOffset= offsetLeft;
+ this.scrollOption.startTouchX= 0;
+ this.scrollOption.distance=0;
+ calValidDistance(this, offsetLeft, this.opts.chartData, this.config, this.opts);
+ this.opts._scrollDistance_ = offsetLeft;
+ drawCharts.call(this, this.opts.type, this.opts, this.config, this.context);
+}
uCharts.prototype.stopAnimation = function() {
this.animationInstance && this.animationInstance.stop();
@@ -6559,10 +7430,35 @@
textList: option.textList !== undefined ? option.textList : textList,
offset: option.offset !== undefined ? option.offset : offset,
option: option,
- index: index
+ index: index,
+ group: current.group
};
}
}
+ drawCharts.call(this, opts.type, opts, this.config, this.context);
+ }
+ if (this.opts.type === 'mount') {
+ var index = option.index == undefined ? this.getCurrentDataIndex(e).index : option.index;
+ if (index > -1) {
+ var opts = assign({}, this.opts, {animation: false});
+ var seriesData = assign({}, opts._series_[index]);
+ var textList = [{
+ text: option.formatter ? option.formatter(seriesData, undefined, index, opts) : seriesData.name + ': ' + seriesData.data,
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
+ }];
+ var offset = {
+ x: opts.chartData.calPoints[index].x,
+ y: _touches$.y
+ };
+ opts.tooltip = {
+ textList: option.textList ? option.textList : textList,
+ offset: option.offset !== undefined ? option.offset : offset,
+ option: option,
+ index: index
+ };
+ }
+
drawCharts.call(this, opts.type, opts, this.config, this.context);
}
if (this.opts.type === 'bar') {
@@ -6642,7 +7538,8 @@
var seriesData = assign({}, opts._series_[index]);
var textList = [{
text: option.formatter ? option.formatter(seriesData, undefined, index, opts) : seriesData.name + ': ' + seriesData.data,
- color: seriesData.color
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
}];
var offset = {
x: _touches$.x,
@@ -6665,7 +7562,8 @@
seriesData.name = seriesData.properties.name
var textList = [{
text: option.formatter ? option.formatter(seriesData, undefined, index, this.opts) : seriesData.name,
- color: seriesData.color
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
}];
var offset = {
x: _touches$.x,
@@ -6688,7 +7586,8 @@
var seriesData = assign({}, this.opts.series[index]);
var textList = [{
text: option.formatter ? option.formatter(seriesData, undefined, index, this.opts) : seriesData.name,
- color: seriesData.color
+ color: seriesData.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? seriesData.legendShape : this.opts.extra.tooltip.legendShape
}];
var offset = {
x: _touches$.x,
@@ -6713,7 +7612,8 @@
var textList = seriesData.map((item) => {
return {
text: option.formatter ? option.formatter(item, this.opts.categories[index], index, this.opts) : item.name + ': ' + item.data,
- color: item.color
+ color: item.color,
+ legendShape: this.opts.extra.tooltip.legendShape == 'auto' ? item.legendShape : this.opts.extra.tooltip.legendShape
};
});
var offset = {
@@ -6767,6 +7667,7 @@
let currMoveTime = Date.now();
let duration = currMoveTime - this.scrollOption.lastMoveTime;
if (duration < Math.floor(1000 / Limit)) return;
+ if (this.scrollOption.startTouchX == 0) return;
this.scrollOption.lastMoveTime = currMoveTime;
var touches = null;
if (e.changedTouches) {
@@ -6798,6 +7699,7 @@
distance = _scrollOption.distance;
this.scrollOption.currentOffset = currentOffset + distance;
this.scrollOption.distance = 0;
+ this.scrollOption.moveCount = 0;
}
};
--
Gitblit v1.9.1