From 6748764b08eb94c5dd9157d162e38106cb6d862d Mon Sep 17 00:00:00 2001 From: kener Date: Wed, 10 Sep 2014 14:30:38 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E9=81=B5=E7=BA=AA=E5=AE=88=E6=B3=95?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=E3=80=91=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/legend.js | 321 ++++++++++++++++++++-------------------- 1 file changed, 161 insertions(+), 160 deletions(-) diff --git a/src/component/legend.js b/src/component/legend.js index 224b9ad2a..f81aee67c 100644 --- a/src/component/legend.js +++ b/src/component/legend.js @@ -47,8 +47,8 @@ define(function (require) { } Legend.prototype = { - type : ecConfig.COMPONENT_TYPE_LEGEND, - _buildShape : function () { + type: ecConfig.COMPONENT_TYPE_LEGEND, + _buildShape: function () { // 图例元素组的位置参数，通过计算所得x, y, width, height this._itemGroupLocation = this._getItemGroupLocation(); @@ -63,7 +63,7 @@ define(function (require) { /** * 构建所有图例元素 */ - _buildItem : function () { + _buildItem: function () { var data = this.legendOption.data; var dataLength = data.length; var itemName; @@ -84,7 +84,7 @@ define(function (require) { var itemGap = this.legendOption.itemGap; var color; - if (this.legendOption.orient == 'vertical' && this.legendOption.x == 'right') { + if (this.legendOption.orient === 'vertical' && this.legendOption.x === 'right') { lastX = this._itemGroupLocation.x + this._itemGroupLocation.width - itemWidth; @@ -99,13 +99,13 @@ define(function (require) { itemName = this._getName(data[i]); formattedName = this._getFormatterName(itemName); - if (itemName === '') { - if (this.legendOption.orient == 'horizontal') { + if (itemName === '') { // 别帮我代码优化 + if (this.legendOption.orient === 'horizontal') { lastX = this._itemGroupLocation.x; lastY += itemHeight + itemGap; } else { - this.legendOption.x == 'right' + this.legendOption.x === 'right' ? lastX -= this._itemGroupLocation.maxWidth + itemGap : lastX += this._itemGroupLocation.maxWidth + itemGap; lastY = this._itemGroupLocation.y; @@ -116,11 +116,11 @@ define(function (require) { color = this.getColor(itemName); - if (this.legendOption.orient == 'horizontal') { + if (this.legendOption.orient === 'horizontal') { if (zrWidth - lastX < 200 // 最后200px做分行预判 && (itemWidth + 5 + zrArea.getTextWidth(formattedName, dataFont) // 分行的最后一个不用算itemGap - + (i == dataLength - 1 || data[i+1] === '' ? 0 : itemGap) + + (i === dataLength - 1 || data[i + 1] === '' ? 0 : itemGap) ) >= zrWidth - lastX ) { lastX = this._itemGroupLocation.x; @@ -131,10 +131,11 @@ define(function (require) { if (zrHeight - lastY < 200 // 最后200px做分行预判 && (itemHeight // 分行的最后一个不用算itemGap - + (i == dataLength - 1 || data[i+1] === '' ? 0 : itemGap) - ) >= zrHeight - lastY + + (i === dataLength - 1 || data[i + 1] === '' ? 0 : itemGap) + ) + >= zrHeight - lastY ) { - this.legendOption.x == 'right' + this.legendOption.x === 'right' ? lastX -= this._itemGroupLocation.maxWidth + itemGap : lastX += this._itemGroupLocation.maxWidth + itemGap; lastY = this._itemGroupLocation.y; @@ -154,28 +155,28 @@ define(function (require) { // 文字 textShape = { - // shape : 'text', - zlevel : this._zlevelBase, - style : { - x : lastX + itemWidth + 5, - y : lastY + itemHeight / 2, - color : this._selectedMap[itemName] + // shape: 'text', + zlevel: this._zlevelBase, + style: { + x: lastX + itemWidth + 5, + y: lastY + itemHeight / 2, + color: this._selectedMap[itemName] ? (dataTextStyle.color === 'auto' ? color : dataTextStyle.color) : '#ccc', text: formattedName, textFont: dataFont, textBaseline: 'middle' }, - highlightStyle : { - color : color, + highlightStyle: { + color: color, brushType: 'fill' }, - hoverable : !!this.legendOption.selectedMode, - clickable : !!this.legendOption.selectedMode + hoverable: !!this.legendOption.selectedMode, + clickable: !!this.legendOption.selectedMode }; - if (this.legendOption.orient == 'vertical' - && this.legendOption.x == 'right' + if (this.legendOption.orient === 'vertical' + && this.legendOption.x === 'right' ) { textShape.style.x -= (itemWidth + 10); textShape.style.textAlign = 'right'; @@ -193,7 +194,7 @@ define(function (require) { this.shapeList.push(itemShape); this.shapeList.push(textShape); - if (this.legendOption.orient == 'horizontal') { + if (this.legendOption.orient === 'horizontal') { lastX += itemWidth + 5 + zrArea.getTextWidth(formattedName, dataFont) + itemGap; @@ -203,8 +204,8 @@ define(function (require) { } } - if (this.legendOption.orient == 'horizontal' - && this.legendOption.x == 'center' + if (this.legendOption.orient === 'horizontal' + && this.legendOption.x === 'center' && lastY != this._itemGroupLocation.y ) { // 多行橫排居中优化 @@ -212,17 +213,17 @@ define(function (require) { } }, - _getName : function(data) { + _getName: function(data) { return typeof data.name != 'undefined' ? data.name : data; }, _getFormatterName: function(itemName) { var formatter = this.legendOption.formatter; var formattedName; - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { formattedName = formatter.call(this.myChart, itemName); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { formattedName = formatter.replace('{name}', itemName); } else { @@ -237,11 +238,11 @@ define(function (require) { }, // 多行橫排居中优化 - _mLineOptimize : function () { + _mLineOptimize: function () { var lineOffsetArray = []; // 每行宽度 var lastX = this._itemGroupLocation.x; for (var i = 2, l = this.shapeList.length; i < l; i++) { - if (this.shapeList[i].style.x == lastX) { + if (this.shapeList[i].style.x === lastX) { lineOffsetArray.push( ( this._itemGroupLocation.width @@ -256,7 +257,7 @@ define(function (require) { ) / 2 ); } - else if (i == l - 1) { + else if (i === l - 1) { lineOffsetArray.push( ( this._itemGroupLocation.width @@ -274,7 +275,7 @@ define(function (require) { } var curLineIndex = -1; for (var i = 1, l = this.shapeList.length; i < l; i++) { - if (this.shapeList[i].style.x == lastX) { + if (this.shapeList[i].style.x === lastX) { curLineIndex++; } if (lineOffsetArray[curLineIndex] === 0) { @@ -286,24 +287,24 @@ define(function (require) { } }, - _buildBackground : function () { + _buildBackground: function () { var pTop = this.legendOption.padding[0]; var pRight = this.legendOption.padding[1]; var pBottom = this.legendOption.padding[2]; var pLeft = this.legendOption.padding[3]; this.shapeList.push(new RectangleShape({ - zlevel : this._zlevelBase, + zlevel: this._zlevelBase, hoverable :false, - style : { - x : this._itemGroupLocation.x - pLeft, - y : this._itemGroupLocation.y - pTop, - width : this._itemGroupLocation.width + pLeft + pRight, - height : this._itemGroupLocation.height + pTop + pBottom, - brushType : this.legendOption.borderWidth === 0 ? 'fill' : 'both', - color : this.legendOption.backgroundColor, - strokeColor : this.legendOption.borderColor, - lineWidth : this.legendOption.borderWidth + style: { + x: this._itemGroupLocation.x - pLeft, + y: this._itemGroupLocation.y - pTop, + width: this._itemGroupLocation.width + pLeft + pRight, + height: this._itemGroupLocation.height + pTop + pBottom, + brushType: this.legendOption.borderWidth === 0 ? 'fill' : 'both', + color: this.legendOption.backgroundColor, + strokeColor: this.legendOption.borderColor, + lineWidth: this.legendOption.borderWidth } })); }, @@ -311,7 +312,7 @@ define(function (require) { /** * 根据选项计算图例实体的位置坐标 */ - _getItemGroupLocation : function () { + _getItemGroupLocation: function () { var data = this.legendOption.data; var dataLength = data.length; var itemGap = this.legendOption.itemGap; @@ -327,7 +328,7 @@ define(function (require) { var temp = 0; // 宽高计算，用于多行判断 var maxWidth = 0; // 垂直布局有用 - if (this.legendOption.orient == 'horizontal') { + if (this.legendOption.orient === 'horizontal') { // 水平布局，计算总宽度 totalHeight = itemHeight; for (var i = 0; i < dataLength; i++) { @@ -452,85 +453,85 @@ define(function (require) { } return { - x : x, - y : y, - width : totalWidth, - height : totalHeight, - maxWidth : maxWidth + x: x, + y: y, + width: totalWidth, + height: totalHeight, + maxWidth: maxWidth }; }, /** * 根据名称返回series数据或data */ - _getSomethingByName : function (name) { + _getSomethingByName: function (name) { var series = this.option.series; var data; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].name == name) { + if (series[i].name === name) { // 系列名称优先 return { - type : series[i].type, - series : series[i], - seriesIndex : i, - data : null, - dataIndex : -1 + type: series[i].type, + series: series[i], + seriesIndex: i, + data: null, + dataIndex: -1 }; } if ( - series[i].type == ecConfig.CHART_TYPE_PIE - || series[i].type == ecConfig.CHART_TYPE_RADAR - || series[i].type == ecConfig.CHART_TYPE_CHORD - || series[i].type == ecConfig.CHART_TYPE_FORCE - || series[i].type == ecConfig.CHART_TYPE_FUNNEL + series[i].type === ecConfig.CHART_TYPE_PIE + || series[i].type === ecConfig.CHART_TYPE_RADAR + || series[i].type === ecConfig.CHART_TYPE_CHORD + || series[i].type === ecConfig.CHART_TYPE_FORCE + || series[i].type === ecConfig.CHART_TYPE_FUNNEL ) { data = series[i].type != ecConfig.CHART_TYPE_FORCE ? series[i].data // 饼图、雷达图、和弦图得查找里面的数据名字 : series[i].categories; // 力导布局查找categories配置 for (var j = 0, k = data.length; j < k; j++) { - if (data[j].name == name) { + if (data[j].name === name) { return { - type : series[i].type, - series : series[i], - seriesIndex : i, - data : data[j], - dataIndex : j + type: series[i].type, + series: series[i], + seriesIndex: i, + data: data[j], + dataIndex: j }; } } } } return { - type : 'bar', - series : null, - seriesIndex : -1, - data : null, - dataIndex : -1 + type: 'bar', + series: null, + seriesIndex: -1, + data: null, + dataIndex: -1 }; }, - _getItemShapeByType : function (x, y, width, height, color, itemType, defaultColor) { + _getItemShapeByType: function (x, y, width, height, color, itemType, defaultColor) { var highlightColor = color === '#ccc' ? defaultColor : color; var itemShape = { - zlevel : this._zlevelBase, - style : { - iconType : 'legendicon' + itemType, - x : x, - y : y, - width : width, - height : height, - color : color, - strokeColor : color, - lineWidth : 2 + zlevel: this._zlevelBase, + style: { + iconType: 'legendicon' + itemType, + x: x, + y: y, + width: width, + height: height, + color: color, + strokeColor: color, + lineWidth: 2 }, highlightStyle: { - color : highlightColor, - strokeColor : highlightColor, - lineWidth : 1 + color: highlightColor, + strokeColor: highlightColor, + lineWidth: 1 }, - hoverable : this.legendOption.selectedMode, - clickable : this.legendOption.selectedMode + hoverable: this.legendOption.selectedMode, + clickable: this.legendOption.selectedMode }; var imageLocation; @@ -542,15 +543,15 @@ define(function (require) { } // 特殊设置 switch (itemType) { - case 'line' : + case 'line': itemShape.style.brushType = 'stroke'; itemShape.highlightStyle.lineWidth = 3; break; - case 'radar' : - case 'scatter' : + case 'radar': + case 'scatter': itemShape.highlightStyle.lineWidth = 3; break; - case 'k' : + case 'k': itemShape.style.brushType = 'both'; itemShape.highlightStyle.lineWidth = 3; itemShape.highlightStyle.color = @@ -561,7 +562,7 @@ define(function (require) { || '#ff3200') : color; break; - case 'image' : + case 'image': itemShape.style.iconType = 'image'; itemShape.style.image = imageLocation; if (color === '#ccc') { @@ -572,7 +573,7 @@ define(function (require) { return itemShape; }, - __legendSelected : function (param) { + __legendSelected: function (param) { var itemName = param.target._name; if (this.legendOption.selectedMode === 'single') { for (var k in this._selectedMap) { @@ -584,8 +585,8 @@ define(function (require) { ecConfig.EVENT.LEGEND_SELECTED, param.event, { - selected : this._selectedMap, - target : itemName + selected: this._selectedMap, + target: itemName }, this.myChart ); @@ -594,7 +595,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this.option = newOption || this.option; this.option.legend = this.reformOption(this.option.legend); @@ -627,9 +628,9 @@ define(function (require) { } else { if (something.data - && (something.type == ecConfig.CHART_TYPE_PIE - || something.type == ecConfig.CHART_TYPE_FORCE - || something.type == ecConfig.CHART_TYPE_FUNNEL) + && (something.type === ecConfig.CHART_TYPE_PIE + || something.type === ecConfig.CHART_TYPE_FORCE + || something.type === ecConfig.CHART_TYPE_FUNNEL) ) { queryTarget = [something.data, something.series]; } @@ -656,28 +657,28 @@ define(function (require) { this._buildShape(); }, - getRelatedAmount : function(name) { + getRelatedAmount: function(name) { var amount = 0; var series = this.option.series; var data; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].name == name) { + if (series[i].name === name) { // 系列名称优先 amount++; } if ( - series[i].type == ecConfig.CHART_TYPE_PIE - || series[i].type == ecConfig.CHART_TYPE_RADAR - || series[i].type == ecConfig.CHART_TYPE_CHORD - || series[i].type == ecConfig.CHART_TYPE_FORCE - || series[i].type == ecConfig.CHART_TYPE_FUNNEL + series[i].type === ecConfig.CHART_TYPE_PIE + || series[i].type === ecConfig.CHART_TYPE_RADAR + || series[i].type === ecConfig.CHART_TYPE_CHORD + || series[i].type === ecConfig.CHART_TYPE_FORCE + || series[i].type === ecConfig.CHART_TYPE_FUNNEL ) { data = series[i].type != ecConfig.CHART_TYPE_FORCE ? series[i].data // 饼图、雷达图、和弦图得查找里面的数据名字 : series[i].categories; // 力导布局查找categories配置 for (var j = 0, k = data.length; j < k; j++) { - if (data[j].name == name && data[j].value != '-') { + if (data[j].name === name && data[j].value != '-') { amount++; } } @@ -686,25 +687,25 @@ define(function (require) { return amount; }, - setColor : function (legendName, color) { + setColor: function (legendName, color) { this._colorMap[legendName] = color; }, - getColor : function (legendName) { + getColor: function (legendName) { if (!this._colorMap[legendName]) { this._colorMap[legendName] = this.zr.getColor(this._colorIndex++); } return this._colorMap[legendName]; }, - hasColor : function (legendName) { + hasColor: function (legendName) { return this._colorMap[legendName] ? this._colorMap[legendName] : false; }, - add : function (name, color){ + add: function (name, color){ var data = this.legendOption.data; for (var i = 0, dataLength = data.length; i < dataLength; i++) { - if (this._getName(data[i]) == name) { + if (this._getName(data[i]) === name) { // 已有就不重复加了 return; } @@ -714,10 +715,10 @@ define(function (require) { this._selectedMap[name] = true; }, - del : function (name){ + del: function (name){ var data = this.legendOption.data; for (var i = 0, dataLength = data.length; i < dataLength; i++) { - if (this._getName(data[i]) == name) { + if (this._getName(data[i]) === name) { return this.legendOption.data.splice(i, 1); } } @@ -728,14 +729,14 @@ define(function (require) { * @param {Object} name * @param {Object} itemShape */ - getItemShape : function (name) { - if (typeof name == 'undefined') { + getItemShape: function (name) { + if (name == null) { return; } var shape; for (var i = 0, l = this.shapeList.length; i < l; i++) { shape = this.shapeList[i]; - if (shape._name == name && shape.type != 'text') { + if (shape._name === name && shape.type != 'text') { return shape; } } @@ -746,11 +747,11 @@ define(function (require) { * @param {Object} name * @param {Object} itemShape */ - setItemShape : function (name, itemShape) { + setItemShape: function (name, itemShape) { var shape; for (var i = 0, l = this.shapeList.length; i < l; i++) { shape = this.shapeList[i]; - if (shape._name == name && shape.type != 'text') { + if (shape._name === name && shape.type != 'text') { if (!this._selectedMap[name]) { itemShape.style.color = '#ccc'; itemShape.style.strokeColor = '#ccc'; @@ -760,7 +761,7 @@ define(function (require) { } }, - isSelected : function (itemName) { + isSelected: function (itemName) { if (typeof this._selectedMap[itemName] != 'undefined') { return this._selectedMap[itemName]; } @@ -770,11 +771,11 @@ define(function (require) { } }, - getSelectedMap : function () { + getSelectedMap: function () { return this._selectedMap; }, - setSelected : function(itemName, selectStatus) { + setSelected: function(itemName, selectStatus) { if (this.legendOption.selectedMode === 'single') { for (var k in this._selectedMap) { this._selectedMap[k] = false; @@ -785,8 +786,8 @@ define(function (require) { ecConfig.EVENT.LEGEND_SELECTED, null, { - selected : this._selectedMap, - target : itemName + selected: this._selectedMap, + target: itemName }, this.myChart ); @@ -795,7 +796,7 @@ define(function (require) { /** * 图例选择 */ - onlegendSelected : function (param, status) { + onlegendSelected: function (param, status) { var legendSelected = param.selected; for (var itemName in legendSelected) { if (this._selectedMap[itemName] != legendSelected[itemName]) { @@ -809,70 +810,70 @@ define(function (require) { }; var legendIcon = { - line : function (ctx, style) { + line: function (ctx, style) { var dy = style.height / 2; ctx.moveTo(style.x, style.y + dy); ctx.lineTo(style.x + style.width,style.y + dy); }, - pie : function (ctx, style) { + pie: function (ctx, style) { var x = style.x; var y = style.y; var width = style.width; var height = style.height; SectorShape.prototype.buildPath(ctx, { - x : x + width / 2, - y : y + height + 2, - r : height + 2, - r0 : 6, - startAngle : 45, - endAngle : 135 + x: x + width / 2, + y: y + height + 2, + r: height + 2, + r0: 6, + startAngle: 45, + endAngle: 135 }); }, /* - chord : function (ctx, style) { + chord: function (ctx, style) { var x = style.x; var y = style.y; var width = style.width; var height = style.height; ctx.moveTo(x, y + height); BeziercurveShape.prototype.buildPath(ctx, { - xStart : x, - yStart : y + height, - cpX1 : x + width, - cpY1 : y + height, - cpX2 : x, - cpY2 : y + 4, - xEnd : x + width, - yEnd : y + 4 + xStart: x, + yStart: y + height, + cpX1: x + width, + cpY1: y + height, + cpX2: x, + cpY2: y + 4, + xEnd: x + width, + yEnd: y + 4 }); ctx.lineTo(x + width, y); BeziercurveShape.prototype.buildPath(ctx, { - xStart : x + width, - yStart : y, - cpX1 : x, - cpY1 : y, - cpX2 : x + width, - cpY2 : y + height - 4, - xEnd : x, - yEnd : y + height - 4 + xStart: x + width, + yStart: y, + cpX1: x, + cpY1: y, + cpX2: x + width, + cpY2: y + height - 4, + xEnd: x, + yEnd: y + height - 4 }); ctx.lineTo(x, y + height); }, */ - k : function (ctx, style) { + k: function (ctx, style) { var x = style.x; var y = style.y; var width = style.width; var height = style.height; CandleShape.prototype.buildPath(ctx, { - x : x + width / 2, - y : [y + 1, y + 1, y + height - 6, y + height], - width : width - 6 + x: x + width / 2, + y: [y + 1, y + 1, y + height - 6, y + height], + width: width - 6 }); }, - bar : function (ctx, style) { + bar: function (ctx, style) { var x = style.x; var y = style.y +1; var width = style.width; @@ -896,7 +897,7 @@ define(function (require) { ctx.quadraticCurveTo(x, y, x + r, y); }, - force : function (ctx, style) { + force: function (ctx, style) { IconShape.prototype.iconLibrary.circle(ctx, style); }, -- GitLab