diff --git a/doc/example/force.html b/doc/example/force.html index 24191199bfee499eda64141fb5df0d14a35b2309..6c638eb24716d172524a1c455f9c4f9a044ef4fc 100644 --- a/doc/example/force.html +++ b/doc/example/force.html @@ -102,7 +102,6 @@ option = { linkStyle : {} } }, - useWorker: false, minRadius : 15, maxRadius : 25, gravity: 1.1, @@ -114,15 +113,13 @@ option = { nodes:[ { category:0, name: '乔布斯', value : 10, - symbol: 'star', - symbolSize: 40, + symbol: 'image://http://www.cnii.com.cn/hg/zt/2012315zt/content/attachement/jpg/site2/20120217/00137274b1a410a8340f07.jpg', + symbolSize: 30, draggable: true, itemStyle: { normal: { label: { - textStyle: { - color: 'white' - } + show: false } } } @@ -149,7 +146,7 @@ option = { {source : '克拉拉-乔布斯', target : '乔布斯', weight : 1}, {source : '劳伦-鲍威尔', target : '乔布斯', weight : 2}, {source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3}, - {source : '奥巴马', target : '乔布斯', weight : 6}, + {source : '奥巴马', target : '乔布斯', weight : 3}, {source : '比尔-盖茨', target : '乔布斯', weight : 6}, {source : '乔纳森-艾夫', target : '乔布斯', weight : 1}, {source : '蒂姆-库克', target : '乔布斯', weight : 1}, diff --git a/src/chart/bar.js b/src/chart/bar.js index b5e706a85c5d56b2d2d59cd591748ebef7d7563d..c264dc43820a34221b5cf19628f0086879067569 100644 --- a/src/chart/bar.js +++ b/src/chart/bar.js @@ -38,11 +38,11 @@ define(function (require) { } Bar.prototype = { - type : ecConfig.CHART_TYPE_BAR, + type: ecConfig.CHART_TYPE_BAR, /** * 绘制图形 */ - _buildShape : function () { + _buildShape: function () { var series = this.series; this.selectedMap = {}; this.xMarkMap = {}; @@ -52,27 +52,27 @@ define(function (require) { // 水平垂直双向series索引 ,position索引到seriesIndex var _position2sIndexMap = { - top : [], - bottom : [], - left : [], - right : [] + top: [ ], + bottom: [ ], + left: [ ], + right: [ ] }; var xAxisIndex; var yAxisIndex; var xAxis; var yAxis; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].type == ecConfig.CHART_TYPE_BAR) { + if (series[i].type === ecConfig.CHART_TYPE_BAR) { series[i] = this.reformOption(series[i]); xAxisIndex = series[i].xAxisIndex; yAxisIndex = series[i].yAxisIndex; xAxis = this.component.xAxis.getAxis(xAxisIndex); yAxis = this.component.yAxis.getAxis(yAxisIndex); - if (xAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + if (xAxis.type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { _position2sIndexMap[xAxis.getPosition()].push(i); } - else if (yAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + else if (yAxis.type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { _position2sIndexMap[yAxis.getPosition()].push(i); } @@ -95,7 +95,7 @@ define(function (require) { * * @param {number} seriesIndex 系列索引 */ - _buildSinglePosition : function (position, seriesArray, xMarkMap) { + _buildSinglePosition: function (position, seriesArray, xMarkMap) { var mapData = this._mapData(seriesArray); var locationMap = mapData.locationMap; var maxDataLength = mapData.maxDataLength; @@ -120,7 +120,7 @@ define(function (require) { * 数据整形 * 数组位置映射到系列索引 */ - _mapData : function (seriesArray) { + _mapData: function (seriesArray) { var series = this.series; var serie; // 临时映射变量 var dataIndex = 0; // 堆积数据所在位置映射 @@ -129,7 +129,7 @@ define(function (require) { var stackKey; // 临时映射变量 var serieName; // 临时映射变量 var legend = this.component.legend; - var locationMap = []; // 需要返回的东西:数组位置映射到系列索引 + var locationMap = [ ]; // 需要返回的东西:数组位置映射到系列索引 var maxDataLength = 0; // 需要返回的东西:最大数据长度 var iconShape; // 计算需要显示的个数和分配位置并记在下面这个结构里 @@ -165,7 +165,7 @@ define(function (require) { if (this.selectedMap[serieName]) { stackKey = serie.stack || (magicStackKey + seriesArray[i]); - if (typeof stackMap[stackKey] == 'undefined') { + if (stackMap[stackKey] == null) { stackMap[stackKey] = dataIndex; locationMap[dataIndex] = [seriesArray[i]]; dataIndex++; @@ -199,15 +199,15 @@ define(function (require) { */ return { - locationMap : locationMap, - maxDataLength : maxDataLength + locationMap: locationMap, + maxDataLength: maxDataLength }; }, /** * 构建类目轴为水平方向的柱形图系列 */ - _buildHorizontal : function (maxDataLength, locationMap, seriesArray, xMarkMap) { + _buildHorizontal: function (maxDataLength, locationMap, seriesArray, xMarkMap) { var series = this.series; // 确定类目轴和数值轴,同一方向随便找一个即可 var seriesIndex = locationMap[0][0]; @@ -236,7 +236,7 @@ define(function (require) { var data; var value; for (var i = 0, l = maxDataLength; i < l; i++) { - if (typeof categoryAxis.getNameByIndex(i) == 'undefined') { + if (categoryAxis.getNameByIndex(i) == null) { // 系列数据超出类目轴长度 break; } @@ -250,20 +250,20 @@ define(function (require) { seriesIndex = locationMap[j][m]; serie = series[seriesIndex]; data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; xMarkMap[seriesIndex] = xMarkMap[seriesIndex] || { - min : Number.POSITIVE_INFINITY, - max : Number.NEGATIVE_INFINITY, - sum : 0, - counter : 0, - average : 0 + min: Number.POSITIVE_INFINITY, + max: Number.NEGATIVE_INFINITY, + sum: 0, + counter: 0, + average: 0 }; - if (value == '-') { + if (value === '-') { // 空数据在做完后补充拖拽提示框 continue; } @@ -275,7 +275,7 @@ define(function (require) { ? valueAxis.getCoordSize(value) : (baseYP - valueAxis.getCoord(value)); // 非堆积数据最小高度有效 - if (n == 1 + if (n === 1 && barMinHeightMap[seriesIndex] > barHeight ) { barHeight = barMinHeightMap[seriesIndex]; @@ -290,7 +290,7 @@ define(function (require) { ? valueAxis.getCoordSize(value) : (valueAxis.getCoord(value) - baseYN); // 非堆积数据最小高度有效 - if (n == 1 + if (n === 1 && barMinHeightMap[seriesIndex] > barHeight ) { barHeight = barMinHeightMap[seriesIndex]; @@ -338,8 +338,8 @@ define(function (require) { seriesIndex = locationMap[j][m]; serie = series[seriesIndex]; data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; @@ -413,7 +413,7 @@ define(function (require) { /** * 构建类目轴为垂直方向的柱形图系列 */ - _buildVertical : function (maxDataLength, locationMap, seriesArray, xMarkMap) { + _buildVertical: function (maxDataLength, locationMap, seriesArray, xMarkMap) { var series = this.series; // 确定类目轴和数值轴,同一方向随便找一个即可 var seriesIndex = locationMap[0][0]; @@ -442,7 +442,7 @@ define(function (require) { var data; var value; for (var i = 0, l = maxDataLength; i < l; i++) { - if (typeof categoryAxis.getNameByIndex(i) == 'undefined') { + if (categoryAxis.getNameByIndex(i) == null) { // 系列数据超出类目轴长度 break; } @@ -456,20 +456,20 @@ define(function (require) { seriesIndex = locationMap[j][m]; serie = series[seriesIndex]; data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; xMarkMap[seriesIndex] = xMarkMap[seriesIndex] || { - min : Number.POSITIVE_INFINITY, - max : Number.NEGATIVE_INFINITY, - sum : 0, - counter : 0, - average : 0 + min: Number.POSITIVE_INFINITY, + max: Number.NEGATIVE_INFINITY, + sum: 0, + counter: 0, + average: 0 }; - if (value == '-') { + if (value === '-') { // 空数据在做完后补充拖拽提示框 continue; } @@ -481,7 +481,7 @@ define(function (require) { ? valueAxis.getCoordSize(value) : (valueAxis.getCoord(value) - baseXP); // 非堆积数据最小高度有效 - if (n == 1 + if (n === 1 && barMinHeightMap[seriesIndex] > barHeight ) { barHeight = barMinHeightMap[seriesIndex]; @@ -496,7 +496,7 @@ define(function (require) { ? valueAxis.getCoordSize(value) : (baseXN - valueAxis.getCoord(value)); // 非堆积数据最小高度有效 - if (n == 1 + if (n === 1 && barMinHeightMap[seriesIndex] > barHeight ) { barHeight = barMinHeightMap[seriesIndex]; @@ -545,8 +545,8 @@ define(function (require) { seriesIndex = locationMap[j][m]; serie = series[seriesIndex]; data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; @@ -623,7 +623,7 @@ define(function (require) { * @param {CategoryAxis} categoryAxis 类目坐标轴,需要知道类目间隔大小 * @param {Array} locationMap 整形数据的系列索引 */ - _mapSize : function (categoryAxis, locationMap, ignoreUserDefined) { + _mapSize: function (categoryAxis, locationMap, ignoreUserDefined) { var series = this.series; var seriesIndex; var barWidthMap = {}; @@ -648,7 +648,7 @@ define(function (require) { queryTarget, 'barWidth' ); - if (typeof sBarWidth != 'undefined') { + if (sBarWidth != null) { // 同一堆积第一个生效barWidth barWidthMap[seriesIndex] = sBarWidth; sBarWidthTotal += sBarWidth; @@ -665,22 +665,10 @@ define(function (require) { } } - barMinHeightMap[seriesIndex] = this.query( - queryTarget, - 'barMinHeight' - ); - barGap = typeof barGap != 'undefined' - ? barGap - : this.query( - queryTarget, - 'barGap' - ); - barCategoryGap = typeof barCategoryGap != 'undefined' - ? barCategoryGap - : this.query( - queryTarget, - 'barCategoryGap' - ); + barMinHeightMap[seriesIndex] = this.query(queryTarget, 'barMinHeight'); + barGap = barGap != null ? barGap : this.query(queryTarget, 'barGap'); + barCategoryGap = barCategoryGap != null + ? barCategoryGap : this.query(queryTarget, 'barCategoryGap'); } } @@ -689,7 +677,7 @@ define(function (require) { if (locationMap.length != sBarWidthCounter) { // 至少存在一个自适应宽度的柱形图 if (!ignoreUserDefined) { - gap = typeof barCategoryGap == 'string' + gap = typeof barCategoryGap === 'string' && barCategoryGap.match(/%$/) // 百分比 ? Math.floor( @@ -699,7 +687,7 @@ define(function (require) { ) // 数值 : (categoryAxis.getGap() - barCategoryGap); - if (typeof barGap == 'string' && barGap.match(/%$/)) { + if (typeof barGap === 'string' && barGap.match(/%$/)) { barGap = parseFloat(barGap) / 100; barWidth = Math.floor( (gap - sBarWidthTotal) @@ -737,7 +725,7 @@ define(function (require) { else { // 全是自定义宽度,barGap无效,系列间隔决定barGap gap = sBarWidthCounter > 1 - ? (typeof barCategoryGap == 'string' + ? (typeof barCategoryGap === 'string' && barCategoryGap.match(/%$/) ) // 百分比 @@ -763,19 +751,19 @@ define(function (require) { } return { - barWidthMap : barWidthMap, - barMinHeightMap : barMinHeightMap , - gap : gap, - barWidth : barWidth, - barGap : barGap, - interval : interval + barWidthMap: barWidthMap, + barMinHeightMap: barMinHeightMap , + gap: gap, + barWidth: barWidth, + barGap: barGap, + interval: interval }; }, /** * 生成最终图形数据 */ - _getBarItem : function (seriesIndex, dataIndex, name, x, y, width, height, orient) { + _getBarItem: function (seriesIndex, dataIndex, name, x, y, width, height, orient) { var series = this.series; var barShape; var serie = series[seriesIndex]; @@ -801,29 +789,29 @@ define(function (require) { 'itemStyle.emphasis' ); barShape = { - zlevel : this._zlevelBase, + zlevel: this._zlevelBase, clickable: this.deepQuery(queryTarget, 'clickable'), - style : { - x : x, - y : y, - width : width, - height : height, - brushType : 'both', - color : this.getItemStyleColor(normalColor, seriesIndex, dataIndex, data), - radius : normal.barBorderRadius, - lineWidth : normalBorderWidth, - strokeColor : normal.barBorderColor + style: { + x: x, + y: y, + width: width, + height: height, + brushType: 'both', + color: this.getItemStyleColor(normalColor, seriesIndex, dataIndex, data), + radius: normal.barBorderRadius, + lineWidth: normalBorderWidth, + strokeColor: normal.barBorderColor }, - highlightStyle : { - color : this.getItemStyleColor(emphasisColor, seriesIndex, dataIndex, data), - radius : emphasis.barBorderRadius, - lineWidth : emphasis.barBorderWidth, - strokeColor : emphasis.barBorderColor + highlightStyle: { + color: this.getItemStyleColor(emphasisColor, seriesIndex, dataIndex, data), + radius: emphasis.barBorderRadius, + lineWidth: emphasis.barBorderWidth, + strokeColor: emphasis.barBorderColor }, - _orient : orient + _orient: orient }; barShape.highlightStyle.color = barShape.highlightStyle.color - || (typeof barShape.style.color == 'string' + || (typeof barShape.style.color === 'string' ? zrColor.lift(barShape.style.color, -0.3) : barShape.style.color ); @@ -845,32 +833,32 @@ define(function (require) { barShape.highlightStyle.textColor = barShape.highlightStyle.color; barShape = this.addLabel(barShape, serie, data, name, orient); - if (barShape.style.textPosition == 'insideLeft' - || barShape.style.textPosition == 'insideRight' - || barShape.style.textPosition == 'insideTop' - || barShape.style.textPosition == 'insideBottom' + if (barShape.style.textPosition === 'insideLeft' + || barShape.style.textPosition === 'insideRight' + || barShape.style.textPosition === 'insideTop' + || barShape.style.textPosition === 'insideBottom' ) { var gap = 5; switch (barShape.style.textPosition) { - case 'insideLeft' : + case 'insideLeft': barShape.style.textX = barShape.style.x + gap; barShape.style.textY = barShape.style.y + barShape.style.height / 2; barShape.style.textAlign = 'left'; barShape.style.textBaseline = 'middle'; break; - case 'insideRight' : + case 'insideRight': barShape.style.textX = barShape.style.x + barShape.style.width - gap; barShape.style.textY = barShape.style.y + barShape.style.height / 2; barShape.style.textAlign = 'right'; barShape.style.textBaseline = 'middle'; break; - case 'insideTop' : + case 'insideTop': barShape.style.textX = barShape.style.x + barShape.style.width / 2; barShape.style.textY = barShape.style.y + gap / 2; barShape.style.textAlign = 'center'; barShape.style.textBaseline = 'top'; break; - case 'insideBottom' : + case 'insideBottom': barShape.style.textX = barShape.style.x + barShape.style.width / 2; barShape.style.textY = barShape.style.y + barShape.style.height - gap / 2; barShape.style.textAlign = 'center'; @@ -899,7 +887,7 @@ define(function (require) { }, // 位置转换 - getMarkCoord : function (seriesIndex, mpData) { + getMarkCoord: function (seriesIndex, mpData) { var serie = this.series[seriesIndex]; var xMarkMap = this.xMarkMap[seriesIndex]; var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex); @@ -907,7 +895,7 @@ define(function (require) { var dataIndex; var pos; if (mpData.type - && (mpData.type == 'max' || mpData.type == 'min' || mpData.type == 'average') + && (mpData.type === 'max' || mpData.type === 'min' || mpData.type === 'average') ) { // 特殊值内置支持 pos = [ @@ -919,12 +907,12 @@ define(function (require) { } else if (xMarkMap.isHorizontal) { // 横向 - dataIndex = typeof mpData.xAxis == 'string' && xAxis.getIndexByName + dataIndex = typeof mpData.xAxis === 'string' && xAxis.getIndexByName ? xAxis.getIndexByName(mpData.xAxis) : (mpData.xAxis || 0); var x = xMarkMap[dataIndex]; - x = typeof x != 'undefined' + x = x != null ? x : typeof mpData.xAxis != 'string' && xAxis.getCoordByIndex ? xAxis.getCoordByIndex(mpData.xAxis || 0) @@ -934,12 +922,12 @@ define(function (require) { } else { // 纵向 - dataIndex = typeof mpData.yAxis == 'string' && yAxis.getIndexByName + dataIndex = typeof mpData.yAxis === 'string' && yAxis.getIndexByName ? yAxis.getIndexByName(mpData.yAxis) : (mpData.yAxis || 0); var y = xMarkMap[dataIndex]; - y = typeof y != 'undefined' + y = y != null ? y : typeof mpData.yAxis != 'string' && yAxis.getCoordByIndex ? yAxis.getCoordByIndex(mpData.yAxis || 0) @@ -954,7 +942,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; @@ -967,7 +955,7 @@ define(function (require) { /** * 动态数据增加动画 */ - addDataAnimation : function (params) { + addDataAnimation: function (params) { var series = this.series; var aniMap = {}; // seriesIndex索引参数 for (var i = 0, l = params.length; i < l; i++) { @@ -984,12 +972,12 @@ define(function (require) { seriesIndex = ecData.get(this.shapeList[i], 'seriesIndex'); if (aniMap[seriesIndex] && !aniMap[seriesIndex][3]) { // 有数据删除才有移动的动画 - if (this.shapeList[i].type == 'rectangle') { + if (this.shapeList[i].type === 'rectangle') { // 主动画 dataIndex = ecData.get(this.shapeList[i], 'dataIndex'); serie = series[seriesIndex]; if (aniMap[seriesIndex][2] - && dataIndex == serie.data.length - 1 + && dataIndex === serie.data.length - 1 ) { // 队头加入删除末尾 this.zr.delShape(this.shapeList[i].id); @@ -1000,7 +988,7 @@ define(function (require) { this.zr.delShape(this.shapeList[i].id); continue; } - if (this.shapeList[i]._orient == 'horizontal') { + if (this.shapeList[i]._orient === 'horizontal') { // 条形图 dy = this.component.yAxis.getAxis( serie.yAxisIndex || 0 @@ -1020,7 +1008,7 @@ define(function (require) { this.zr.animate(this.shapeList[i].id, '') .when( 500, - {position : [x, y]} + { position: [x, y] } ) .start(); } diff --git a/src/chart/base.js b/src/chart/base.js index e190192346a0da83ea721f8269beb82ecfd5613f..3bdafb9940c99d1001ebfa362468c7603ec01294 100644 --- a/src/chart/base.js +++ b/src/chart/base.js @@ -25,11 +25,11 @@ define(function (require) { this.selectedMap = {}; this.lastShapeList = []; this.shapeHandler = { - onclick : function () { + onclick: function () { self.isClick = true; }, - ondragover : function (param) { + ondragover: function (param) { // 返回触发可计算特性的图形提示 var calculableShape = param.target; calculableShape.highlightStyle = calculableShape.highlightStyle || {}; @@ -42,7 +42,7 @@ define(function (require) { highlightStyle.brushType = 'stroke'; highlightStyle.strokeColor = self.ecTheme.calculableColor; - highlightStyle.lineWidth = calculableShape.type == 'icon' ? 30 : 10; + highlightStyle.lineWidth = calculableShape.type === 'icon' ? 30 : 10; self.zr.addHoverShape(calculableShape); @@ -56,14 +56,14 @@ define(function (require) { },20); }, - ondrop : function (param) { + ondrop: function (param) { // 排除一些非数据的拖拽进入 - if (typeof ecData.get(param.dragged, 'data') != 'undefined') { + if (ecData.get(param.dragged, 'data') != null) { self.isDrop = true; } }, - ondragend : function () { + ondragend: function () { self.isDragend = true; } }; @@ -76,7 +76,7 @@ define(function (require) { /** * 图形拖拽特性 */ - setCalculable : function (shape) { + setCalculable: function (shape) { shape.dragEnableTime = this.ecTheme.DRAG_ENABLE_TIME; shape.ondragover = this.shapeHandler.ondragover; shape.ondragend = this.shapeHandler.ondragend; @@ -87,7 +87,7 @@ define(function (require) { /** * 数据项被拖拽进来 */ - ondrop : function (param, status) { + ondrop: function (param, status) { if (!this.isDrop || !param.target) { // 没有在当前实例上发生拖拽行为则直接返回 return; @@ -101,22 +101,22 @@ define(function (require) { var series = this.series; var data; var legend = this.component.legend; - if (dataIndex == -1) { + if (dataIndex === -1) { // 落到calculableCase上,数据被拖拽进某个饼图|雷达|漏斗,增加数据 data = { - value : ecData.get(dragged, 'value'), - name : ecData.get(dragged, 'name') + value: ecData.get(dragged, 'value'), + name: ecData.get(dragged, 'name') }; // 修饼图数值不为负值 - if (this.type == ecConfig.CHART_TYPE_PIE && data.value < 0) { + if (this.type === ecConfig.CHART_TYPE_PIE && data.value < 0) { data.value = 0; } var hasFind = false; var sData = series[seriesIndex].data; for (var i = 0, l = sData.length; i < l; i++) { - if (sData[i].name == data.name && sData[i].value == '-') { + if (sData[i].name === data.name && sData[i].value === '-') { series[seriesIndex].data[i].value = data.value; hasFind = true; } @@ -131,7 +131,7 @@ define(function (require) { else { // 落到数据item上,数据被拖拽到某个数据项上,数据修改 data = this.option.series[seriesIndex].data[dataIndex] || '-'; - if (typeof data.value != 'undefined') { + if (data.value != null) { if (data.value != '-') { this.option.series[seriesIndex].data[dataIndex].value = accMath.accAdd( @@ -144,10 +144,10 @@ define(function (require) { ecData.get(dragged, 'value'); } - if (this.type == ecConfig.CHART_TYPE_FUNNEL - || this.type == ecConfig.CHART_TYPE_PIE + if (this.type === ecConfig.CHART_TYPE_FUNNEL + || this.type === ecConfig.CHART_TYPE_PIE ) { - legend && legend.getRelatedAmount(data.name) == 1 + legend && legend.getRelatedAmount(data.name) === 1 && this.component.legend.del(data.name); data.name += this.option.nameConnector + ecData.get(dragged, 'name'); legend && legend.add( @@ -188,7 +188,7 @@ define(function (require) { /** * 数据项被拖拽出去 */ - ondragend : function (param, status) { + ondragend: function (param, status) { if (!this.isDragend || !param.target) { // 没有在当前实例上发生拖拽行为则直接返回 return; @@ -201,7 +201,7 @@ define(function (require) { var series = this.series; // 删除被拖拽走的数据 - if (typeof series[seriesIndex].data[dataIndex].value != 'undefined') { + if (series[seriesIndex].data[dataIndex].value != null) { series[seriesIndex].data[dataIndex].value = '-'; // 清理可能有且唯一的legend data var name = series[seriesIndex].data[dataIndex].name; @@ -228,7 +228,7 @@ define(function (require) { /** * 图例选择 */ - onlegendSelected : function (param, status) { + onlegendSelected: function (param, status) { var legendSelected = param.selected; for (var itemName in this.selectedMap) { if (this.selectedMap[itemName] != legendSelected[itemName]) { @@ -243,7 +243,7 @@ define(function (require) { /** * 添加文本 */ - addLabel : function (tarShape, serie, data, name, orient) { + addLabel: function (tarShape, serie, data, name, orient) { // 多级控制 var queryTarget = [data, serie]; var nLabel = this.deepMerge(queryTarget, 'itemStyle.normal.label'); @@ -256,8 +256,8 @@ define(function (require) { tarShape.style.text = this._getLabelText( serie, data, name, 'normal' ); - tarShape.style.textPosition = typeof nLabel.position == 'undefined' - ? (orient == 'horizontal' ? 'right' : 'top') + tarShape.style.textPosition = nLabel.position == null + ? (orient === 'horizontal' ? 'right' : 'top') : nLabel.position; tarShape.style.textColor = nTextStyle.color; tarShape.style.textFont = this.getFont(nTextStyle); @@ -268,8 +268,8 @@ define(function (require) { ); tarShape.highlightStyle.textPosition = nLabel.show ? tarShape.style.textPosition - : (typeof eLabel.position == 'undefined' - ? (orient == 'horizontal' ? 'right' : 'top') + : (eLabel.position == null + ? (orient === 'horizontal' ? 'right' : 'top') : eLabel.position); tarShape.highlightStyle.textColor = eTextStyle.color; tarShape.highlightStyle.textFont = this.getFont(eTextStyle); @@ -281,12 +281,12 @@ define(function (require) { /** * 根据lable.format计算label text */ - _getLabelText : function (serie, data, name, status) { + _getLabelText: function (serie, data, name, status) { var formatter = this.deepQuery( [data, serie], 'itemStyle.' + status + '.label.formatter' ); - if (!formatter && status == 'emphasis') { + if (!formatter && status === 'emphasis') { // emphasis时需要看看normal下是否有formatter formatter = this.deepQuery( [data, serie], @@ -294,14 +294,14 @@ define(function (require) { ); } - var value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + var value = data != null + ? (data.value != null ? data.value : data) : '-'; if (formatter) { - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { return formatter.call( this.myChart, serie.name, @@ -309,7 +309,7 @@ define(function (require) { value ); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { formatter = formatter.replace('{a}','{a0}') .replace('{b}','{b0}') .replace('{c}','{c0}'); @@ -328,7 +328,7 @@ define(function (require) { /** * 标线标注 */ - buildMark : function (seriesIndex) { + buildMark: function (seriesIndex) { var serie = this.series[seriesIndex]; if (this.selectedMap[serie.name]) { serie.markPoint && this._buildMarkPoint(seriesIndex); @@ -339,7 +339,7 @@ define(function (require) { /** * 标注逻辑 */ - _buildMarkPoint : function (seriesIndex) { + _buildMarkPoint: function (seriesIndex) { var attachStyle = (this.markAttachStyle || {})[seriesIndex]; var serie = this.series[seriesIndex]; var _zlevelBase = this.getZlevelBase(); @@ -349,12 +349,10 @@ define(function (require) { for (var i = 0, l = markPoint.data.length; i < l; i++) { mpData = markPoint.data[i]; pos = this.getMarkCoord(seriesIndex, mpData); - markPoint.data[i].x = typeof mpData.x != 'undefined' - ? mpData.x : pos[0]; - markPoint.data[i].y = typeof mpData.y != 'undefined' - ? mpData.y : pos[1]; + markPoint.data[i].x = mpData.x != null ? mpData.x : pos[0]; + markPoint.data[i].y = mpData.y != null ? mpData.y : pos[1]; if (mpData.type - && (mpData.type == 'max' || mpData.type == 'min') + && (mpData.type === 'max' || mpData.type === 'min') ) { // 特殊值内置支持 markPoint.data[i].value = pos[3]; @@ -374,8 +372,8 @@ define(function (require) { this.shapeList.push(shapeList[i]); } // 个别特殊图表需要自己addShape - if (this.type == ecConfig.CHART_TYPE_FORCE - || this.type == ecConfig.CHART_TYPE_CHORD + if (this.type === ecConfig.CHART_TYPE_FORCE + || this.type === ecConfig.CHART_TYPE_CHORD ) { for (var i = 0, l = shapeList.length; i < l; i++) { this.zr.addShape(shapeList[i]); @@ -386,7 +384,7 @@ define(function (require) { /** * 标线逻辑 */ - _buildMarkLine : function (seriesIndex) { + _buildMarkLine: function (seriesIndex) { var attachStyle = (this.markAttachStyle || {})[seriesIndex]; var serie = this.series[seriesIndex]; var _zlevelBase = this.getZlevelBase(); @@ -396,7 +394,7 @@ define(function (require) { for (var i = 0, l = markLine.data.length; i < l; i++) { mlData = markLine.data[i]; if (mlData.type - && (mlData.type == 'max' || mlData.type == 'min' || mlData.type == 'average') + && (mlData.type === 'max' || mlData.type === 'min' || mlData.type === 'average') ) { // 特殊值内置支持 pos = this.getMarkCoord(seriesIndex, mlData); @@ -413,14 +411,10 @@ define(function (require) { ]; } - markLine.data[i][0].x = typeof mlData[0].x != 'undefined' - ? mlData[0].x : pos[0][0]; - markLine.data[i][0].y = typeof mlData[0].y != 'undefined' - ? mlData[0].y : pos[0][1]; - markLine.data[i][1].x = typeof mlData[1].x != 'undefined' - ? mlData[1].x : pos[1][0]; - markLine.data[i][1].y = typeof mlData[1].y != 'undefined' - ? mlData[1].y : pos[1][1]; + markLine.data[i][0].x = mlData[0].x != null ? mlData[0].x : pos[0][0]; + markLine.data[i][0].y = mlData[0].y != null ? mlData[0].y : pos[0][1]; + markLine.data[i][1].x = mlData[1].x != null ? mlData[1].x : pos[1][0]; + markLine.data[i][1].y = mlData[1].y != null ? mlData[1].y : pos[1][1]; } var shapeList = this._markLine(seriesIndex, markLine); @@ -433,8 +427,8 @@ define(function (require) { this.shapeList.push(shapeList[i]); } // 个别特殊图表需要自己addShape - if (this.type == ecConfig.CHART_TYPE_FORCE - || this.type == ecConfig.CHART_TYPE_CHORD + if (this.type === ecConfig.CHART_TYPE_FORCE + || this.type === ecConfig.CHART_TYPE_CHORD ) { for (var i = 0, l = shapeList.length; i < l; i++) { this.zr.addShape(shapeList[i]); @@ -445,7 +439,7 @@ define(function (require) { /** * 标注多级控制构造 */ - _markPoint : function (seriesIndex, mpOption) { + _markPoint: function (seriesIndex, mpOption) { var serie = this.series[seriesIndex]; var component = this.component; zrUtil.merge( @@ -471,10 +465,10 @@ define(function (require) { if (!mpOption.large) { for (var i = 0, l = data.length; i < l; i++) { - if (typeof data[i].x == 'undefined' || typeof data[i].y == 'undefined') { + if (data[i].x == null || data[i].y == null) { continue; } - value = typeof data[i] != 'undefined' && typeof data[i].value != 'undefined' + value = data[i] != null && data[i].value != null ? data[i].value : ''; // 图例 @@ -501,8 +495,7 @@ define(function (require) { // 标准化一些参数 data[i].tooltip = data[i].tooltip || {trigger:'item'}; // tooltip.trigger指定为item - data[i].name = typeof data[i].name != 'undefined' - ? data[i].name : ''; + data[i].name = data[i].name != null ? data[i].name : ''; data[i].value = value; // 复用getSymbolShape @@ -525,7 +518,7 @@ define(function (require) { itemShape.effect = effect; } - if (serie.type == ecConfig.CHART_TYPE_MAP) { + if (serie.type === ecConfig.CHART_TYPE_MAP) { itemShape._geo = this.getMarkGeo(data[i]); } @@ -552,7 +545,7 @@ define(function (require) { /** * 标线多级控制构造 */ - _markLine : function (seriesIndex, mlOption) { + _markLine: function (seriesIndex, mlOption) { var serie = this.series[seriesIndex]; var component = this.component; zrUtil.merge( @@ -594,10 +587,10 @@ define(function (require) { var zrHeight = this.zr.getHeight(); var mergeData; for (var i = 0, l = data.length; i < l; i++) { - if (typeof data[i][0].x == 'undefined' - || typeof data[i][0].y == 'undefined' - || typeof data[i][1].x == 'undefined' - || typeof data[i][1].y == 'undefined' + if (data[i][0].x == null + || data[i][0].y == null + || data[i][1].x == null + || data[i][1].y == null ) { continue; } @@ -608,7 +601,7 @@ define(function (require) { } // 组装一个mergeData mergeData = this.deepMerge(data[i]); - value = typeof mergeData != 'undefined' && typeof mergeData.value != 'undefined' + value = mergeData != null && mergeData.value != null ? mergeData.value : ''; // 值域 @@ -631,12 +624,9 @@ define(function (require) { // 标准化一些参数 data[i][0].tooltip = mergeData.tooltip || {trigger:'item'}; // tooltip.trigger指定为item - data[i][0].name = typeof data[i][0].name != 'undefined' - ? data[i][0].name : ''; - data[i][1].name = typeof data[i][1].name != 'undefined' - ? data[i][1].name : ''; - data[i][0].value = typeof data[i][0].value != 'undefined' - ? data[i][0].value : ''; + data[i][0].name = data[i][0].name != null ? data[i][0].name : ''; + data[i][1].name = data[i][1].name != null ? data[i][1].name : ''; + data[i][0].value = data[i][0].value != null ? data[i][0].value : ''; itemShape = this.getLineMarkShape( mlOption, // markLine @@ -659,7 +649,7 @@ define(function (require) { itemShape.effect = effect; } - if (serie.type == ecConfig.CHART_TYPE_MAP) { + if (serie.type === ecConfig.CHART_TYPE_MAP) { itemShape._geo = [ this.getMarkGeo(data[i][0]), this.getMarkGeo(data[i][1]) @@ -671,7 +661,7 @@ define(function (require) { itemShape, serie, seriesIndex, data[i][0], i, - data[i][0].name + (data[i][1].name !== '' + data[i][0].name + (data[i][1].name !== '' // 不要帮我代码规范 ? (' > ' + data[i][1].name) : ''), value @@ -682,7 +672,7 @@ define(function (require) { return pList; }, - getMarkCoord : function () { + getMarkCoord: function () { // 无转换位置 return [0, 0]; }, @@ -690,7 +680,7 @@ define(function (require) { /** * symbol构造器 */ - getSymbolShape : function ( + getSymbolShape: function ( serie, seriesIndex, // 系列 data, dataIndex, name, // 数据 x, y, // 坐标 @@ -699,15 +689,15 @@ define(function (require) { orient // 走向,用于默认文字定位 ) { var queryTarget = [data, serie]; - var value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + var value = data != null + ? (data.value != null ? data.value : data) : '-'; symbol = this.deepQuery(queryTarget, 'symbol') || symbol; var symbolSize = this.deepQuery(queryTarget, 'symbolSize'); - symbolSize = typeof symbolSize == 'function' + symbolSize = typeof symbolSize === 'function' ? symbolSize(value) : symbolSize; var symbolRotate = this.deepQuery(queryTarget, 'symbolRotate'); @@ -720,41 +710,41 @@ define(function (require) { queryTarget, 'itemStyle.emphasis' ); - var nBorderWidth = typeof normal.borderWidth != 'undefined' + var nBorderWidth = normal.borderWidth != null ? normal.borderWidth : (normal.lineStyle && normal.lineStyle.width); - if (typeof nBorderWidth == 'undefined') { + if (nBorderWidth == null) { nBorderWidth = symbol.match('empty') ? 2 : 0; } - var eBorderWidth = typeof emphasis.borderWidth != 'undefined' + var eBorderWidth = emphasis.borderWidth != null ? emphasis.borderWidth : (emphasis.lineStyle && emphasis.lineStyle.width); - if (typeof eBorderWidth == 'undefined') { + if (eBorderWidth == null) { eBorderWidth = nBorderWidth + 2; } var itemShape = new IconShape({ - style : { - iconType : symbol.replace('empty', '').toLowerCase(), - x : x - symbolSize, - y : y - symbolSize, - width : symbolSize * 2, - height : symbolSize * 2, - brushType : 'both', - color : symbol.match('empty') + style: { + iconType: symbol.replace('empty', '').toLowerCase(), + x: x - symbolSize, + y: y - symbolSize, + width: symbolSize * 2, + height: symbolSize * 2, + brushType: 'both', + color: symbol.match('empty') ? emptyColor : (this.getItemStyleColor(normal.color, seriesIndex, dataIndex, data) || color), - strokeColor : normal.borderColor + strokeColor: normal.borderColor || this.getItemStyleColor(normal.color, seriesIndex, dataIndex, data) || color, lineWidth: nBorderWidth }, - highlightStyle : { - color : symbol.match('empty') + highlightStyle: { + color: symbol.match('empty') ? emptyColor : this.getItemStyleColor(emphasis.color, seriesIndex, dataIndex, data), - strokeColor : emphasis.borderColor + strokeColor: emphasis.borderColor || normal.borderColor || this.getItemStyleColor(normal.color, seriesIndex, dataIndex, data) || color, @@ -767,13 +757,13 @@ define(function (require) { itemShape.style.image = symbol.replace(new RegExp('^image:\\/\\/'), ''); itemShape = new ImageShape({ - style : itemShape.style, - highlightStyle : itemShape.highlightStyle, + style: itemShape.style, + highlightStyle: itemShape.highlightStyle, clickable: this.deepQuery(queryTarget, 'clickable') }); } - if (typeof symbolRotate != 'undefined') { + if (symbolRotate != null) { itemShape.rotation = [ symbolRotate * Math.PI / 180, x, y ]; @@ -785,7 +775,7 @@ define(function (require) { (symbol.replace('empty', '').replace('star','') - 0) || 5; } - if (symbol == 'none') { + if (symbol === 'none') { itemShape.invisible = true; itemShape.hoverable = false; } @@ -804,10 +794,10 @@ define(function (require) { ); if (symbol.match('empty')) { - if (typeof itemShape.style.textColor == 'undefined') { + if (itemShape.style.textColor == null) { itemShape.style.textColor = itemShape.style.strokeColor; } - if (typeof itemShape.highlightStyle.textColor == 'undefined') { + if (itemShape.highlightStyle.textColor == null) { itemShape.highlightStyle.textColor = itemShape.highlightStyle.strokeColor; } @@ -832,7 +822,7 @@ define(function (require) { /** * 标线构造器 */ - getLineMarkShape : function ( + getLineMarkShape: function ( mlOption, // 系列 seriesIndex, // 系列索引 data, // 数据 @@ -841,13 +831,13 @@ define(function (require) { xEnd, yEnd, // 坐标 color // 默认color,来自legend或dataRange全局分配 ) { - var value0 = typeof data[0] != 'undefined' - ? (typeof data[0].value != 'undefined' + var value0 = data[0] != null + ? (data[0].value != null ? data[0].value : data[0]) : '-'; - var value1 = typeof data[1] != 'undefined' - ? (typeof data[1].value != 'undefined' + var value1 = data[1] != null + ? (data[1].value != null ? data[1].value : data[1]) : '-'; @@ -859,10 +849,10 @@ define(function (require) { this.query(data[0], 'symbolSize') || mlOption.symbolSize[0], this.query(data[1], 'symbolSize') || mlOption.symbolSize[1] ]; - symbolSize[0] = typeof symbolSize[0] == 'function' + symbolSize[0] = typeof symbolSize[0] === 'function' ? symbolSize[0](value0) : symbolSize[0]; - symbolSize[1] = typeof symbolSize[1] == 'function' + symbolSize[1] = typeof symbolSize[1] === 'function' ? symbolSize[1](value1) : symbolSize[1]; var symbolRotate = [ @@ -887,71 +877,68 @@ define(function (require) { var elineStyle = emphasis.lineStyle; var nBorderWidth = nlineStyle.width; - if (typeof nBorderWidth == 'undefined') { + if (nBorderWidth == null) { nBorderWidth = normal.borderWidth; } var eBorderWidth = elineStyle.width; - if (typeof eBorderWidth == 'undefined') { - if (typeof emphasis.borderWidth != 'undefined') { - eBorderWidth = emphasis.borderWidth; - } - else { - eBorderWidth = nBorderWidth + 2; - } + if (eBorderWidth == null) { + eBorderWidth = emphasis.borderWidth != null + ? emphasis.borderWidth + : (nBorderWidth + 2); } var itemShape = new MarkLineShape({ - style : { - smooth : mlOption.smooth ? 'spline' : false, - symbol : symbol, - symbolSize : symbolSize, - symbolRotate : symbolRotate, - //data : [data[0].name,data[1].name], - xStart : xStart, - yStart : yStart, // 坐标 - xEnd : xEnd, - yEnd : yEnd, // 坐标 - brushType : 'both', - lineType : nlineStyle.type, - shadowColor : nlineStyle.shadowColor - || nlineStyle.color - || normal.borderColor - || normal.color - || color, + style: { + smooth: mlOption.smooth ? 'spline' : false, + symbol: symbol, + symbolSize: symbolSize, + symbolRotate: symbolRotate, + // data: [data[0].name,data[1].name], + xStart: xStart, + yStart: yStart, // 坐标 + xEnd: xEnd, + yEnd: yEnd, // 坐标 + brushType: 'both', + lineType: nlineStyle.type, + shadowColor: nlineStyle.shadowColor + || nlineStyle.color + || normal.borderColor + || normal.color + || color, shadowBlur: nlineStyle.shadowBlur, shadowOffsetX: nlineStyle.shadowOffsetX, shadowOffsetY: nlineStyle.shadowOffsetY, - color : normal.color || color, - strokeColor : nlineStyle.color - || normal.borderColor - || normal.color - || color, + color: normal.color || color, + strokeColor: nlineStyle.color + || normal.borderColor + || normal.color + || color, lineWidth: nBorderWidth, symbolBorderColor: normal.borderColor || normal.color || color, symbolBorder: normal.borderWidth }, - highlightStyle : { - shadowColor : elineStyle.shadowColor, + highlightStyle: { + shadowColor: elineStyle.shadowColor, shadowBlur: elineStyle.shadowBlur, shadowOffsetX: elineStyle.shadowOffsetX, shadowOffsetY: elineStyle.shadowOffsetY, - color : emphasis.color|| normal.color || color, - strokeColor : elineStyle.color - || nlineStyle.color - || emphasis.borderColor - || normal.borderColor - || emphasis.color - || normal.color - || color, + color: emphasis.color|| normal.color || color, + strokeColor: elineStyle.color + || nlineStyle.color + || emphasis.borderColor + || normal.borderColor + || emphasis.color + || normal.color + || color, lineWidth: eBorderWidth, symbolBorderColor: emphasis.borderColor || normal.borderColor || emphasis.color || normal.color || color, - symbolBorder: typeof emphasis.borderWidth == 'undefined' + symbolBorder: emphasis.borderWidth == null ? (normal.borderWidth + 2) : (emphasis.borderWidth) }, @@ -974,7 +961,7 @@ define(function (require) { /** * 大规模标注构造器 */ - getLargeMarkPoingShape : function(seriesIndex, mpOption) { + getLargeMarkPoingShape: function(seriesIndex, mpOption) { var serie = this.series[seriesIndex]; var component = this.component; var data = mpOption.data; @@ -995,8 +982,8 @@ define(function (require) { } // 值域 if (dataRange) { - value = typeof data[0] != 'undefined' - ? (typeof data[0].value != 'undefined' + value = data[0] != null + ? (data[0].value != null ? data[0].value : data[0]) : '-'; @@ -1028,20 +1015,20 @@ define(function (require) { //console.log(data) itemShape = new SymbolShape({ - style : { - pointList : data, - color : color, + style: { + pointList: data, + color: color, strokeColor: color, - shadowColor : effect.shadowColor || color, - shadowBlur : (typeof effect.shadowBlur != 'undefined' ? effect.shadowBlur : 8) + shadowColor: effect.shadowColor || color, + shadowBlur: (effect.shadowBlur != null ? effect.shadowBlur : 8) * devicePixelRatio, - size : this.deepQuery(queryTarget, 'symbolSize'), - iconType : symbol, + size: this.deepQuery(queryTarget, 'symbolSize'), + iconType: symbol, brushType: 'fill', lineWidth:1 }, - draggable : false, - hoverable : false + draggable: false, + hoverable: false }); if (effect.show) { @@ -1051,7 +1038,7 @@ define(function (require) { return itemShape; }, - backupShapeList : function () { + backupShapeList: function () { if (this.shapeList && this.shapeList.length > 0) { this.lastShapeList = this.shapeList; this.shapeList = []; @@ -1061,7 +1048,7 @@ define(function (require) { } }, - addShapeList : function () { + addShapeList: function () { var maxLenth = this.option.animationThreshold / (this.canvasSupported ? 2 : 4); var lastShapeList = this.lastShapeList; var shapeList = this.shapeList; @@ -1130,12 +1117,12 @@ define(function (require) { } }, - _getAnimationKey : function(shape) { + _getAnimationKey: function(shape) { if (this.type != ecConfig.CHART_TYPE_MAP) { return ecData.get(shape, 'seriesIndex') + '_' + ecData.get(shape, 'dataIndex') + (shape._mark ? shape._mark : '') - + (this.type == ecConfig.CHART_TYPE_RADAR + + (this.type === ecConfig.CHART_TYPE_RADAR ? ecData.get(shape, 'special') : ''); } else { @@ -1148,7 +1135,7 @@ define(function (require) { /** * 动画过渡 */ - _animateMod : function (oldShape, newShape, duration, easing) { + _animateMod: function (oldShape, newShape, duration, easing) { switch (newShape.type) { case 'broken-line' : case 'half-smooth-polygon' : @@ -1181,7 +1168,7 @@ define(function (require) { easing ); } - else if (newShape.type == 'sector') { + else if (newShape.type === 'sector') { ecAnimation.sector(this.zr, oldShape, newShape, duration, easing); } else { @@ -1223,7 +1210,7 @@ define(function (require) { * @param {string=} easing 缓动效果 * @param {Array=} addShapeList 指定特效对象,不知道默认使用this.shapeList */ - animationMark : function (duration , easing, addShapeList) { + animationMark: function (duration , easing, addShapeList) { var shapeList = addShapeList || this.shapeList; for (var i = 0, l = shapeList.length; i < l; i++) { if (!shapeList[i]._mark) { @@ -1238,7 +1225,7 @@ define(function (require) { * 特效动画 * @param {Array=} addShapeList 指定特效对象,不知道默认使用this.shapeList */ - animationEffect : function (addShapeList) { + animationEffect: function (addShapeList) { !addShapeList && this.clearEffectShape(); var shapeList = addShapeList || this.shapeList; var zlevel = ecConfig.EFFECT_ZLEVEL; @@ -1246,8 +1233,8 @@ define(function (require) { this.zr.modLayer( zlevel, { - motionBlur : true, - lastFrameAlpha : 0.95 + motionBlur: true, + lastFrameAlpha: 0.95 } ); } @@ -1263,11 +1250,11 @@ define(function (require) { } }, - clearEffectShape : function (clearMotionBlur) { + clearEffectShape: function (clearMotionBlur) { if (this.zr && this.effectList && this.effectList.length > 0) { clearMotionBlur && this.zr.modLayer( ecConfig.EFFECT_ZLEVEL, - { motionBlur : false} + { motionBlur: false } ); this.zr.delShape(this.effectList); } @@ -1280,7 +1267,7 @@ define(function (require) { * @param {Object} markData 标线标注对象,支持多个 * @param {string} markType 标线标注类型 */ - addMark : function (seriesIndex, markData, markType) { + addMark: function (seriesIndex, markData, markType) { var serie = this.series[seriesIndex]; if (this.selectedMap[serie.name]) { var duration = 500; @@ -1312,7 +1299,7 @@ define(function (require) { * @param {string} markName 标线标注名称 * @param {string} markType 标线标注类型 */ - delMark : function (seriesIndex, markName, markType) { + delMark: function (seriesIndex, markName, markType) { markType = markType.replace('mark', '').replace('large', '').toLowerCase(); var serie = this.series[seriesIndex]; if (this.selectedMap[serie.name]) { @@ -1321,9 +1308,9 @@ define(function (require) { var len = 2; while(len--) { for (var i = 0, l = shapeList[len].length; i < l; i++) { - if (shapeList[len][i]._mark == markType - && ecData.get(shapeList[len][i], 'seriesIndex') == seriesIndex - && ecData.get(shapeList[len][i], 'name') == markName + if (shapeList[len][i]._mark === markType + && ecData.get(shapeList[len][i], 'seriesIndex') === seriesIndex + && ecData.get(shapeList[len][i], 'name') === markName ) { this.zr.delShape(shapeList[len][i].id); shapeList[len].splice(i, 1); diff --git a/src/chart/chord.js b/src/chart/chord.js index e2429fbbdc57c2ce3d43fb27d6c6b623c7c03aaf..e981cb6b2fc79ed0b89ce605ec85b9ebf82799bb 100644 --- a/src/chart/chord.js +++ b/src/chart/chord.js @@ -15,7 +15,7 @@ define(function (require) { var TextShape = require('zrender/shape/Text'); var LineShape = require('zrender/shape/Line'); var SectorShape = require('zrender/shape/Sector'); - var ChordShape = require('../util/shape/Chord'); + var RibbonShape = require('../util/shape/Ribbon'); var ecConfig = require('../config'); var ecData = require('../util/ecData'); @@ -35,11 +35,11 @@ define(function (require) { } Chord.prototype = { - type : ecConfig.CHART_TYPE_CHORD, + type: ecConfig.CHART_TYPE_CHORD, /** * 绘制图形 */ - _buildShape : function () { + _buildShape: function () { var series = this.series; this.selectedMap = {}; this.chordSeries = []; @@ -233,7 +233,7 @@ define(function (require) { this.addShapeList(); }, - _filterData : function (dataMat, groups) { + _filterData: function (dataMat, groups) { var indices = []; var groupsFilted = []; // Filter by selected group @@ -275,7 +275,7 @@ define(function (require) { return [dataMat, groupsFilted2]; }, - _buildSectors : function (angles, data) { + _buildSectors: function (angles, data) { var len = this.groups.length; var len2 = this.chordSeries.length; @@ -355,21 +355,21 @@ define(function (require) { var _end = (this.clockWise ? (360 - angle[0]) : angle[1]) + this.startAngle; var sector = { - zlevel : this._zlevelBase, - style : { - x : this.center[0], - y : this.center[1], - r0 : this.innerRadius, - r : this.outerRadius, - startAngle : _start, - endAngle : _end, - brushType : 'fill', + zlevel: this._zlevelBase, + style: { + x: this.center[0], + y: this.center[1], + r0: this.innerRadius, + r: this.outerRadius, + startAngle: _start, + endAngle: _end, + brushType: 'fill', opacity: 1, - color : this.getColor(group.name) + color: this.getColor(group.name) }, clickable: this.chordSerieSample.clickable, - highlightStyle : { - brushType : 'fill' + highlightStyle: { + brushType: 'fill' } }; sector.style.lineWidth = this.deepQuery( @@ -414,12 +414,12 @@ define(function (require) { vec2.add(start, start, this.center); var labelShape = { - zlevel : this._zlevelBase - 1, - hoverable : false, - style : { - text : group.name, - textAlign : isRightSide ? 'left' : 'right', - color : labelColor + zlevel: this._zlevelBase - 1, + hoverable: false, + style: { + text: group.name, + textAlign: isRightSide ? 'left' : 'right', + color: labelColor } }; if (rotateLabel) { @@ -463,9 +463,9 @@ define(function (require) { } var len2 = angles[0][0].length; - var chordLineStyle + var ribbonLineStyle = this.chordSerieSample.itemStyle.normal.chordStyle.lineStyle; - var chordLineStyleEmphsis + var ribbonLineStyleEmphsis = this.chordSerieSample.itemStyle.emphasis.chordStyle.lineStyle; for (var i = 0; i < len; i++) { @@ -481,8 +481,10 @@ define(function (require) { var angleIJ1 = angles[i][j][k][1]; var angleJI1 = angles[j][i][k][1]; - if (angleIJ0 - angleJI1 === 0 || - angleJI0 - angleJI1 === 0) { + if ( + angleIJ0 - angleJI1 === 0 + || angleJI0 - angleJI1 === 0 + ) { this.chordShapes[i][j][k] = null; continue; } @@ -502,25 +504,26 @@ define(function (require) { var t0 = !this.clockWise ? (360 - angleJI1) : angleJI0; var t1 = !this.clockWise ? (360 - angleJI0) : angleJI1; var chord = { - zlevel : this._zlevelBase, - style : { - center : this.center, - r : this.innerRadius, - source0 : s0 - this.startAngle, - source1 : s1 - this.startAngle, - target0 : t0 - this.startAngle, - target1 : t1 - this.startAngle, - brushType : 'both', - opacity : 0.5, - color : color, - lineWidth : chordLineStyle.width, - strokeColor : chordLineStyle.color + zlevel: this._zlevelBase, + style: { + x: this.center[0], + y: this.center[1], + r: this.innerRadius, + source0: s0 - this.startAngle, + source1: s1 - this.startAngle, + target0: t0 - this.startAngle, + target1: t1 - this.startAngle, + brushType: 'both', + opacity: 0.5, + color: color, + lineWidth: ribbonLineStyle.width, + strokeColor: ribbonLineStyle.color }, clickable: this.chordSerieSample.clickable, - highlightStyle : { - brushType : 'both', - lineWidth : chordLineStyleEmphsis.width, - strokeColor : chordLineStyleEmphsis.color + highlightStyle: { + brushType: 'both', + lineWidth: ribbonLineStyleEmphsis.width, + strokeColor: ribbonLineStyleEmphsis.color } }; @@ -534,7 +537,7 @@ define(function (require) { dataArr[j][i][k] ); - chord = new ChordShape(chord); + chord = new RibbonShape(chord); this.chordShapes[i][j][k] = chord; this.shapeList.push(chord); } @@ -565,16 +568,16 @@ define(function (require) { var end = vec2.scale([], v, this.outerRadius + this.scaleLineLength); vec2.add(end, end, this.center); var scaleShape = { - zlevel : this._zlevelBase - 1, - hoverable : false, - style : { - xStart : start[0], - yStart : start[1], - xEnd : end[0], - yEnd : end[1], - lineCap : 'round', - brushType : 'stroke', - strokeColor : '#666', + zlevel: this._zlevelBase - 1, + hoverable: false, + style: { + xStart: start[0], + yStart: start[1], + xEnd: end[0], + yEnd: end[1], + lineCap: 'round', + brushType: 'stroke', + strokeColor: '#666', lineWidth: 1 } }; @@ -598,19 +601,19 @@ define(function (require) { var isRightSide = thelta <= 90 || thelta >= 270; var textShape = { - zlevel : this._zlevelBase - 1, - hoverable : false, - style : { - x : isRightSide + zlevel: this._zlevelBase - 1, + hoverable: false, + style: { + x: isRightSide ? this.outerRadius + this.scaleLineLength + 4 : -this.outerRadius - this.scaleLineLength - 4, - y : 0, - text : Math.round(scaleValues.shift()*10)/10 + y: 0, + text: Math.round(scaleValues.shift()*10)/10 + unitPostfix, - textAlign : isRightSide ? 'left' : 'right' + textAlign: isRightSide ? 'left' : 'right' }, - position : this.center.slice(), - rotation : isRightSide + position: this.center.slice(), + rotation: isRightSide ? [thelta / 180 * Math.PI, 0, 0] : [ (thelta + 180) / 180 * Math.PI, @@ -655,28 +658,9 @@ define(function (require) { this.series = newOption.series; } - /* - this.legend; - this.getColor; - this.isSelected; - this.chordSerieSample; - */ // Config this.chordSeries = []; - /* - this.groups; - this.startAngle; - this.clockWise; - this.innerRadius; - this.outerRadius; - this.padding; - this.sortGroups; - this.sortSubGroups; - this.center; - this.showScale; - this.showScaleText; - this.dataMat; - */ + this.strokeFix = 0; // Adjacency matrix this.sectorShapes = []; diff --git a/src/chart/force.js b/src/chart/force.js index 46942409503b4aea4b1aa7819b33e7b9de7872e1..217ceb0c13fb5a9c8b0774226f24268f0ee12d0f 100644 --- a/src/chart/force.js +++ b/src/chart/force.js @@ -15,6 +15,7 @@ define(function (require) { // 图形依赖 var LineShape = require('zrender/shape/Line'); + var ImageShape = require('zrender/shape/Image'); var IconShape = require('../util/shape/Icon'); var ecConfig = require('../config'); @@ -451,6 +452,17 @@ define(function (require) { shape.style.width = shape.style.height = (this.deepQuery(queryTarget, 'symbolSize') || 0) * 2; + if (shape.style.iconType.match('image')) { + shape.style.image = shape.style.iconType.replace( + new RegExp('^image:\\/\\/'), '' + ); + shape = new ImageShape({ + style: shape.style, + highlightStyle: shape.highlightStyle, + clickable: shape.clickable + }); + } + // 节点样式 for (var k = 0; k < shapeNormalStyle.length; k++) { if (shapeNormalStyle[k]) { @@ -462,7 +474,7 @@ define(function (require) { if (shapeEmphasisStyle[k]) { zrUtil.merge(shape.highlightStyle, shapeEmphasisStyle[k], true); } - } + } // 节点标签样式 if (this.deepQuery(queryTarget, 'itemStyle.normal.label.show')) { diff --git a/src/chart/funnel.js b/src/chart/funnel.js index 8b1996d22d7f03d5a8baffba083f18d3ed0c10d5..09e9c782de4e11736941984c339b96e6ad1c6cdc 100644 --- a/src/chart/funnel.js +++ b/src/chart/funnel.js @@ -37,11 +37,11 @@ define(function (require) { } Funnel.prototype = { - type : ecConfig.CHART_TYPE_FUNNEL, + type: ecConfig.CHART_TYPE_FUNNEL, /** * 绘制图形 */ - _buildShape : function () { + _buildShape: function () { var series = this.series; var legend = this.component.legend; // 复用参数索引 @@ -51,12 +51,11 @@ define(function (require) { var serieName; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].type == ecConfig.CHART_TYPE_FUNNEL) { + if (series[i].type === ecConfig.CHART_TYPE_FUNNEL) { series[i] = this.reformOption(series[i]); serieName = series[i].name || ''; // 系列图例开关 - this.selectedMap[serieName] = - legend ? legend.isSelected(serieName) : true; + this.selectedMap[serieName] = legend ? legend.isSelected(serieName) : true; if (!this.selectedMap[serieName]) { continue; } @@ -73,14 +72,14 @@ define(function (require) { * * @param {number} seriesIndex 系列索引 */ - _buildSingleFunnel : function (seriesIndex) { + _buildSingleFunnel: function (seriesIndex) { var legend = this.component.legend; var serie = this.series[seriesIndex]; var data = this._mapData(seriesIndex); var location = this._getLocation(seriesIndex); this._paramsMap[seriesIndex] = { - location : location, - data : data + location: location, + data: data }; var itemName; @@ -109,10 +108,10 @@ define(function (require) { ? (location.height - (total - 1) * gap) / total : location.height; var width; var lastY = location.y; - var lastWidth = serie.sort == 'descending' + var lastWidth = serie.sort === 'descending' ? this._getItemWidth(seriesIndex, selectedData[0].value) : number.parsePercent(serie.minSize, location.width); - var next = serie.sort == 'descending' ? 1 : 0; + var next = serie.sort === 'descending' ? 1 : 0; var centerX = location.centerX; var pointList = [ [ @@ -129,7 +128,7 @@ define(function (require) { if (this.selectedMap[itemName] && !isNaN(selectedData[i].value)) { width = i <= l - 2 ? this._getItemWidth(seriesIndex, selectedData[i + next].value) - : serie.sort == 'descending' + : serie.sort === 'descending' ? number.parsePercent(serie.minSize, location.width) : number.parsePercent(serie.maxSize, location.width); this._buildItem( @@ -159,24 +158,24 @@ define(function (require) { } }, - _buildFunnelCase : function(seriesIndex) { + _buildFunnelCase: function(seriesIndex) { var serie = this.series[seriesIndex]; if (this.deepQuery([serie, this.option], 'calculable')) { var location = this._paramsMap[seriesIndex].location; var gap = 10; var funnelCase = { - hoverable : false, - style : { - pointListd : [ + hoverable: false, + style: { + pointListd: [ [location.x - gap, location.y - gap], [location.x + location.width + gap, location.y - gap], [location.x + location.width + gap, location.y + location.height + gap], [location.x - gap, location.y + location.height + gap] ], - brushType : 'stroke', - lineWidth : 1, - strokeColor : serie.calculableHolderColor - || this.ecTheme.calculableHolderColor + brushType: 'stroke', + lineWidth: 1, + strokeColor: serie.calculableHolderColor + || this.ecTheme.calculableHolderColor } }; ecData.pack(funnelCase, serie, seriesIndex, undefined, -1); @@ -195,7 +194,7 @@ define(function (require) { var y = this.parsePercent(gridOption.y, zrHeight); var width; - if (typeof gridOption.width == 'undefined') { + if (gridOption.width == null) { width = zrWidth - x - this.parsePercent(gridOption.x2, zrWidth); } else { @@ -203,7 +202,7 @@ define(function (require) { } var height; - if (typeof gridOption.height == 'undefined') { + if (gridOption.height == null) { height = zrHeight - y - this.parsePercent(gridOption.y2, zrHeight); } else { @@ -211,25 +210,25 @@ define(function (require) { } return { - x : x, - y : y, - width : width, - height : height, - centerX : x + width / 2 + x: x, + y: y, + width: width, + height: height, + centerX: x + width / 2 }; }, - _mapData : function(seriesIndex) { + _mapData: function(seriesIndex) { var serie = this.series[seriesIndex]; var funnelData = zrUtil.clone(serie.data); for (var i = 0, l = funnelData.length; i < l; i++) { funnelData[i]._index = i; } function numDescending (a, b) { - if (a.value == '-') { + if (a.value === '-') { return 1; } - else if (b.value == '-') { + else if (b.value === '-') { return -1; } return b.value - a.value; @@ -238,7 +237,7 @@ define(function (require) { return -numDescending(a, b); } if (serie.sort != 'none') { - funnelData.sort(serie.sort == 'descending' ? numDescending : numAscending); + funnelData.sort(serie.sort === 'descending' ? numDescending : numAscending); } return funnelData; @@ -247,7 +246,7 @@ define(function (require) { /** * 构建单个扇形及指标 */ - _buildItem : function ( + _buildItem: function ( seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height ) { @@ -313,7 +312,7 @@ define(function (require) { /** * 根据值计算宽度 */ - _getItemWidth : function (seriesIndex, value) { + _getItemWidth: function (seriesIndex, value) { var serie = this.series[seriesIndex]; var location = this._paramsMap[seriesIndex].location; var min = serie.min; @@ -326,7 +325,7 @@ define(function (require) { /** * 构建扇形 */ - getPolygon : function ( + getPolygon: function ( seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height ) { @@ -347,30 +346,30 @@ define(function (require) { || defaultColor; var emphasisColor = this.getItemStyleColor(emphasis.color, seriesIndex, dataIndex, data) - || (typeof normalColor == 'string' + || (typeof normalColor === 'string' ? zrColor.lift(normalColor, -0.2) : normalColor ); var polygon = { - zlevel : this._zlevelBase, + zlevel: this._zlevelBase, clickable: this.deepQuery(queryTarget, 'clickable'), - style : { - pointList : [ + style: { + pointList: [ [x, y], [x + topWidth, y], [x + topWidth - (topWidth - bottomWidth) / 2, y + height], [x + (topWidth - bottomWidth) / 2, y + height] ], - brushType : 'both', - color : normalColor, - lineWidth : normal.borderWidth, - strokeColor : normal.borderColor + brushType: 'both', + color: normalColor, + lineWidth: normal.borderWidth, + strokeColor: normal.borderColor }, - highlightStyle : { - color : emphasisColor, - lineWidth : emphasis.borderWidth, - strokeColor : emphasis.borderColor + highlightStyle: { + color: emphasisColor, + lineWidth: emphasis.borderWidth, + strokeColor: emphasis.borderColor } }; @@ -385,7 +384,7 @@ define(function (require) { /** * 需要显示则会有返回构建好的shape,否则返回undefined */ - getLabel : function ( + getLabel: function ( seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height ) { @@ -410,7 +409,7 @@ define(function (require) { var textColor = defaultColor; labelControl.position = labelControl.position || itemStyle.normal.label.position; - if (labelControl.position == 'inner' || labelControl.position == 'inside') { + if (labelControl.position === 'inner' || labelControl.position === 'inside') { // 内部 textAlign = 'center'; textX = x + topWidth / 2; @@ -421,31 +420,31 @@ define(function (require) { textColor = zrColor.reverse(defaultColor); } } - else if (labelControl.position == 'left'){ + else if (labelControl.position === 'left'){ // 左侧显示 textAlign = 'right'; - textX = lineLength == 'auto' + textX = lineLength === 'auto' ? (location.x - 10) : (location.centerX - Math.max(topWidth, bottomWidth) / 2 - lineLength); } else { - // 右侧显示,默认 labelControl.position == 'outer' || 'right) + // 右侧显示,默认 labelControl.position === 'outer' || 'right) textAlign = 'left'; - textX = lineLength == 'auto' + textX = lineLength === 'auto' ? (location.x + location.width + 10) : (location.centerX + Math.max(topWidth, bottomWidth) / 2 + lineLength); } var textShape = { - zlevel : this._zlevelBase + 1, - style : { - x : textX, - y : y + height / 2, - color : textStyle.color || textColor, - text : text, - textAlign : textStyle.align || textAlign, - textBaseline : textStyle.baseline || 'middle', - textFont : textFont + zlevel: this._zlevelBase + 1, + style: { + x: textX, + y: y + height / 2, + color: textStyle.color || textColor, + text: text, + textAlign: textStyle.align || textAlign, + textBaseline: textStyle.baseline || 'middle', + textFont: textFont } }; @@ -459,7 +458,7 @@ define(function (require) { text = this.getLabelText(seriesIndex, dataIndex, status); textFont = this.getFont(textStyle); textColor = defaultColor; - if (labelControl.position == 'inner' || labelControl.position == 'inside') { + if (labelControl.position === 'inner' || labelControl.position === 'inside') { // 内部 textAlign = 'center'; textX = x + topWidth / 2; @@ -470,27 +469,27 @@ define(function (require) { textColor = zrColor.reverse(defaultColor); } } - else if (labelControl.position == 'left'){ + else if (labelControl.position === 'left'){ // 左侧显示 textAlign = 'right'; - textX = lineLength == 'auto' + textX = lineLength === 'auto' ? (location.x - 10) : (location.centerX - Math.max(topWidth, bottomWidth) / 2 - lineLength); } else { - // 右侧显示,默认 labelControl.position == 'outer' || 'right) + // 右侧显示,默认 labelControl.position === 'outer' || 'right) textAlign = 'left'; - textX = lineLength == 'auto' + textX = lineLength === 'auto' ? (location.x + location.width + 10) : (location.centerX + Math.max(topWidth, bottomWidth) / 2 + lineLength); } textShape.highlightStyle = { - x : textX, - color : textStyle.color || textColor, - text : text, - textAlign : textStyle.align || textAlign, - textFont : textFont, - brushType : 'fill' + x: textX, + color: textStyle.color || textColor, + text: text, + textAlign: textStyle.align || textAlign, + textFont: textFont, + brushType: 'fill' }; return new TextShape(textShape); @@ -499,7 +498,7 @@ define(function (require) { /** * 根据lable.format计算label text */ - getLabelText : function (seriesIndex, dataIndex, status) { + getLabelText: function (seriesIndex, dataIndex, status) { var series = this.series; var serie = series[seriesIndex]; var data = serie.data[dataIndex]; @@ -509,7 +508,7 @@ define(function (require) { ); if (formatter) { - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { return formatter.call( this.myChart, serie.name, @@ -517,7 +516,7 @@ define(function (require) { data.value ); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { formatter = formatter.replace('{a}','{a0}') .replace('{b}','{b0}') .replace('{c}','{c0}'); @@ -536,7 +535,7 @@ define(function (require) { /** * 需要显示则会有返回构建好的shape,否则返回undefined */ - getLabelLine : function ( + getLabelLine: function ( seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height ) { @@ -559,33 +558,33 @@ define(function (require) { labelControl.position = labelControl.position || itemStyle.normal.label.position; var xEnd; - if (labelControl.position == 'inner' || labelControl.position == 'inside') { + if (labelControl.position === 'inner' || labelControl.position === 'inside') { // 内部 xEnd = x + topWidth / 2; } - else if (labelControl.position == 'left'){ + else if (labelControl.position === 'left'){ // 左侧显示 - xEnd = lineLength == 'auto' + xEnd = lineLength === 'auto' ? (location.x - 10) : (location.centerX - Math.max(topWidth, bottomWidth) / 2 - lineLength); } else { - // 右侧显示,默认 labelControl.position == 'outer' || 'right) - xEnd = lineLength == 'auto' + // 右侧显示,默认 labelControl.position === 'outer' || 'right) + xEnd = lineLength === 'auto' ? (location.x + location.width + 10) : (location.centerX + Math.max(topWidth, bottomWidth) / 2 + lineLength); } var lineShape = { - zlevel : this._zlevelBase + 1, - hoverable : false, - style : { - xStart : location.centerX, - yStart : y + height / 2, - xEnd : xEnd, - yEnd : y + height / 2, - strokeColor : lineStyle.color || defaultColor, - lineType : lineStyle.type, - lineWidth : lineStyle.width + zlevel: this._zlevelBase + 1, + hoverable: false, + style: { + xStart: location.centerX, + yStart: y + height / 2, + xEnd: xEnd, + yEnd: y + height / 2, + strokeColor: lineStyle.color || defaultColor, + lineType: lineStyle.type, + lineWidth: lineStyle.width } }; @@ -597,27 +596,27 @@ define(function (require) { labelControl = itemStyle[status].label || labelControl; labelControl.position = labelControl.position; - if (labelControl.position == 'inner' || labelControl.position == 'inside') { + if (labelControl.position === 'inner' || labelControl.position === 'inside') { // 内部 xEnd = x + topWidth / 2; } - else if (labelControl.position == 'left'){ + else if (labelControl.position === 'left'){ // 左侧显示 - xEnd = lineLength == 'auto' + xEnd = lineLength === 'auto' ? (location.x - 10) : (location.centerX - Math.max(topWidth, bottomWidth) / 2 - lineLength); } else { - // 右侧显示,默认 labelControl.position == 'outer' || 'right) - xEnd = lineLength == 'auto' + // 右侧显示,默认 labelControl.position === 'outer' || 'right) + xEnd = lineLength === 'auto' ? (location.x + location.width + 10) : (location.centerX + Math.max(topWidth, bottomWidth) / 2 + lineLength); } lineShape.highlightStyle = { - xEnd : xEnd, - strokeColor : lineStyle.color || defaultColor, - lineType : lineStyle.type, - lineWidth : lineStyle.width + xEnd: xEnd, + strokeColor: lineStyle.color || defaultColor, + lineType: lineStyle.type, + lineWidth: lineStyle.width }; return new LineShape(lineShape); @@ -629,7 +628,7 @@ define(function (require) { * @param {Object} data * @param {boolean} isEmphasis true is 'emphasis' and false is 'normal' */ - _needLabel : function (serie, data, isEmphasis) { + _needLabel: function (serie, data, isEmphasis) { return this.deepQuery( [data, serie], 'itemStyle.' @@ -644,7 +643,7 @@ define(function (require) { * @param {Object} data * @param {boolean} isEmphasis true is 'emphasis' and false is 'normal' */ - _needLabelLine : function (serie, data, isEmphasis) { + _needLabelLine: function (serie, data, isEmphasis) { return this.deepQuery( [data, serie], 'itemStyle.' @@ -656,7 +655,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; diff --git a/src/chart/gauge.js b/src/chart/gauge.js index 6dc68f9732159d454ce02819ea2e1aa12455cc80..32947c12725aa1fe271356843276a80319bd5acd 100644 --- a/src/chart/gauge.js +++ b/src/chart/gauge.js @@ -38,16 +38,16 @@ define(function (require) { } Gauge.prototype = { - type : ecConfig.CHART_TYPE_GAUGE, + type: ecConfig.CHART_TYPE_GAUGE, /** * 绘制图形 */ - _buildShape : function () { + _buildShape: function () { var series = this.series; // 复用参数索引 this._paramsMap = {}; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].type == ecConfig.CHART_TYPE_GAUGE) { + if (series[i].type === ecConfig.CHART_TYPE_GAUGE) { series[i] = this.reformOption(series[i]); this._buildSingleGauge(i); this.buildMark(i); @@ -62,14 +62,14 @@ define(function (require) { * * @param {number} seriesIndex 系列索引 */ - _buildSingleGauge : function (seriesIndex) { + _buildSingleGauge: function (seriesIndex) { var serie = this.series[seriesIndex]; this._paramsMap[seriesIndex] = { - center : this.parseCenter(this.zr, serie.center), - radius : this.parseRadius(this.zr, serie.radius), - startAngle : serie.startAngle.toFixed(2) - 0, - endAngle : serie.endAngle.toFixed(2) - 0 + center: this.parseCenter(this.zr, serie.center), + radius: this.parseRadius(this.zr, serie.radius), + startAngle: serie.startAngle.toFixed(2) - 0, + endAngle: serie.endAngle.toFixed(2) - 0 }; this._paramsMap[seriesIndex].totalAngle = this._paramsMap[seriesIndex].startAngle - this._paramsMap[seriesIndex].endAngle; @@ -92,7 +92,7 @@ define(function (require) { }, // 轴线 - _buildAxisLine : function (seriesIndex) { + _buildAxisLine: function (seriesIndex) { var serie = this.series[seriesIndex]; if (!serie.axisLine.show) { return; @@ -130,7 +130,7 @@ define(function (require) { }, // 坐标轴分割线 - _buildSplitLine : function (seriesIndex) { + _buildSplitLine: function (seriesIndex) { var serie = this.series[seriesIndex]; if (!serie.splitLine.show) { return; @@ -160,19 +160,19 @@ define(function (require) { sinAngle = Math.sin(angle); cosAngle = Math.cos(angle); this.shapeList.push(new LineShape({ - zlevel : this._zlevelBase + 1, - hoverable : false, - style : { - xStart : center[0] + cosAngle * r, - yStart : center[1] - sinAngle * r, - xEnd : center[0] + cosAngle * r0, - yEnd : center[1] - sinAngle * r0, - strokeColor : color == 'auto' - ? this._getColor(seriesIndex, min + total / splitNumber * i) - : color, - lineType : lineStyle.type, - lineWidth : lineStyle.width, - shadowColor : lineStyle.shadowColor, + zlevel: this._zlevelBase + 1, + hoverable: false, + style: { + xStart: center[0] + cosAngle * r, + yStart: center[1] - sinAngle * r, + xEnd: center[0] + cosAngle * r0, + yEnd: center[1] - sinAngle * r0, + strokeColor: color === 'auto' + ? this._getColor(seriesIndex, min + total / splitNumber * i) + : color, + lineType: lineStyle.type, + lineWidth: lineStyle.width, + shadowColor: lineStyle.shadowColor, shadowBlur: lineStyle.shadowBlur, shadowOffsetX: lineStyle.shadowOffsetX, shadowOffsetY: lineStyle.shadowOffsetY @@ -182,7 +182,7 @@ define(function (require) { }, // 小标记 - _buildAxisTick : function (seriesIndex) { + _buildAxisTick: function (seriesIndex) { var serie = this.series[seriesIndex]; if (!serie.axisTick.show) { return; @@ -217,19 +217,19 @@ define(function (require) { sinAngle = Math.sin(angle); cosAngle = Math.cos(angle); this.shapeList.push(new LineShape({ - zlevel : this._zlevelBase + 1, - hoverable : false, - style : { - xStart : center[0] + cosAngle * r, - yStart : center[1] - sinAngle * r, - xEnd : center[0] + cosAngle * r0, - yEnd : center[1] - sinAngle * r0, - strokeColor : color == 'auto' - ? this._getColor(seriesIndex, min + total / l * i) - : color, - lineType : lineStyle.type, - lineWidth : lineStyle.width, - shadowColor : lineStyle.shadowColor, + zlevel: this._zlevelBase + 1, + hoverable: false, + style: { + xStart: center[0] + cosAngle * r, + yStart: center[1] - sinAngle * r, + xEnd: center[0] + cosAngle * r0, + yEnd: center[1] - sinAngle * r0, + strokeColor: color === 'auto' + ? this._getColor(seriesIndex, min + total / l * i) + : color, + lineType: lineStyle.type, + lineWidth: lineStyle.width, + shadowColor: lineStyle.shadowColor, shadowBlur: lineStyle.shadowBlur, shadowOffsetX: lineStyle.shadowOffsetX, shadowOffsetY: lineStyle.shadowOffsetY @@ -239,7 +239,7 @@ define(function (require) { }, // 坐标轴文本 - _buildAxisLabel : function (seriesIndex) { + _buildAxisLabel: function (seriesIndex) { var serie = this.series[seriesIndex]; if (!serie.axisLabel.show) { return; @@ -274,25 +274,25 @@ define(function (require) { cosAngle = Math.cos(angle * Math.PI / 180); angle = (angle + 360) % 360; this.shapeList.push(new TextShape({ - zlevel : this._zlevelBase + 1, - hoverable : false, - style : { - x : center[0] + cosAngle * r0, - y : center[1] - sinAngle * r0, - color : color == 'auto' ? this._getColor(seriesIndex, value) : color, - text : this._getLabelText(serie.axisLabel.formatter, value), - textAlign : (angle >= 110 && angle <= 250) - ? 'left' - : (angle <= 70 || angle >= 290) - ? 'right' - : 'center', - textBaseline : (angle >= 10 && angle <= 170) - ? 'top' - : (angle >= 190 && angle <= 350) - ? 'bottom' - : 'middle', - textFont : textFont, - shadowColor : textStyle.shadowColor, + zlevel: this._zlevelBase + 1, + hoverable: false, + style: { + x: center[0] + cosAngle * r0, + y: center[1] - sinAngle * r0, + color: color === 'auto' ? this._getColor(seriesIndex, value) : color, + text: this._getLabelText(serie.axisLabel.formatter, value), + textAlign: (angle >= 110 && angle <= 250) + ? 'left' + : (angle <= 70 || angle >= 290) + ? 'right' + : 'center', + textBaseline: (angle >= 10 && angle <= 170) + ? 'top' + : (angle >= 190 && angle <= 350) + ? 'bottom' + : 'middle', + textFont: textFont, + shadowColor: textStyle.shadowColor, shadowBlur: textStyle.shadowBlur, shadowOffsetX: textStyle.shadowOffsetX, shadowOffsetY: textStyle.shadowOffsetY @@ -301,13 +301,13 @@ define(function (require) { } }, - _buildPointer : function (seriesIndex) { - var serie = this.series[seriesIndex]; + _buildPointer: function (seriesIndex) { + var serie = this.series[seriesIndex]; if (!serie.pointer.show) { return; } - var total = serie.max - serie.min; - var pointer = serie.pointer; + var total = serie.max - serie.min; + var pointer = serie.pointer; var params = this._paramsMap[seriesIndex]; var length = this.parsePercent(pointer.length, params.radius[1]); @@ -317,28 +317,28 @@ define(function (require) { value = value < serie.max ? value : serie.max; var angle = (params.startAngle - params.totalAngle / total * (value - serie.min)) * Math.PI / 180; - var color = pointer.color == 'auto' + var color = pointer.color === 'auto' ? this._getColor(seriesIndex, value) : pointer.color; var pointShape = new GaugePointerShape({ - zlevel : this._zlevelBase + 1, - style : { - x : center[0], - y : center[1], - r : length, - startAngle : params.startAngle * Math.PI / 180, - angle : angle, - color : color, - width : width, - shadowColor : pointer.shadowColor, + zlevel: this._zlevelBase + 1, + style: { + x: center[0], + y: center[1], + r: length, + startAngle: params.startAngle * Math.PI / 180, + angle: angle, + color: color, + width: width, + shadowColor: pointer.shadowColor, shadowBlur: pointer.shadowBlur, shadowOffsetX: pointer.shadowOffsetX, shadowOffsetY: pointer.shadowOffsetY }, - highlightStyle : { - brushType : 'fill', - width : width > 2 ? 2 : (width / 2), - color : '#fff' + highlightStyle: { + brushType: 'fill', + width: width > 2 ? 2 : (width / 2), + color: '#fff' } }); ecData.pack( @@ -351,26 +351,26 @@ define(function (require) { this.shapeList.push(pointShape); this.shapeList.push(new CircleShape({ - zlevel : this._zlevelBase + 2, - hoverable : false, - style : { - x : center[0], - y : center[1], - r : pointer.width / 2.5, - color : '#fff' + zlevel: this._zlevelBase + 2, + hoverable: false, + style: { + x: center[0], + y: center[1], + r: pointer.width / 2.5, + color: '#fff' } })); }, - _buildTitle : function(seriesIndex) { + _buildTitle: function(seriesIndex) { var serie = this.series[seriesIndex]; if (!serie.title.show) { return; } var data = serie.data[0]; - var name = typeof data.name != 'undefined' ? data.name : ''; - if (name !== '') { + var name = data.name != null ? data.name : ''; + if (name !== '') { // 不要帮我代码规范 var title = serie.title; var offsetCenter = title.offsetCenter; var textStyle = title.textStyle; @@ -379,18 +379,18 @@ define(function (require) { var x = params.center[0] + this.parsePercent(offsetCenter[0], params.radius[1]); var y = params.center[1] + this.parsePercent(offsetCenter[1], params.radius[1]); this.shapeList.push(new TextShape({ - zlevel : this._zlevelBase + zlevel: this._zlevelBase + (Math.abs(x - params.center[0]) + Math.abs(y - params.center[1])) < textStyle.fontSize * 2 ? 2 : 1, - hoverable : false, - style : { - x : x, - y : y, - color: textColor == 'auto' ? this._getColor(seriesIndex) : textColor, + hoverable: false, + style: { + x: x, + y: y, + color: textColor === 'auto' ? this._getColor(seriesIndex) : textColor, text: name, textAlign: 'center', - textFont : this.getFont(textStyle), - shadowColor : textStyle.shadowColor, + textFont: this.getFont(textStyle), + shadowColor: textStyle.shadowColor, shadowBlur: textStyle.shadowBlur, shadowOffsetX: textStyle.shadowOffsetX, shadowOffsetY: textStyle.shadowOffsetY @@ -399,7 +399,7 @@ define(function (require) { } }, - _buildDetail : function(seriesIndex) { + _buildDetail: function(seriesIndex) { var serie = this.series[seriesIndex]; if (!serie.detail.show) { return; @@ -418,22 +418,22 @@ define(function (require) { var y = params.center[1] + this.parsePercent(offsetCenter[1], params.radius[1]); this.shapeList.push(new RectangleShape({ - zlevel : this._zlevelBase - + (Math.abs(x+detail.width/2 - params.center[0]) - + Math.abs(y+detail.height/2 - params.center[1])) - < textStyle.fontSize ? 2 : 1, - hoverable : false, - style : { - x : x, - y : y, - width : detail.width, - height : detail.height, + zlevel: this._zlevelBase + + (Math.abs(x+detail.width/2 - params.center[0]) + + Math.abs(y+detail.height/2 - params.center[1])) < textStyle.fontSize + ? 2 : 1, + hoverable: false, + style: { + x: x, + y: y, + width: detail.width, + height: detail.height, brushType: 'both', - color: color == 'auto' ? this._getColor(seriesIndex, value) : color, - lineWidth : detail.borderWidth, - strokeColor : detail.borderColor, + color: color === 'auto' ? this._getColor(seriesIndex, value) : color, + lineWidth: detail.borderWidth, + strokeColor: detail.borderColor, - shadowColor : detail.shadowColor, + shadowColor: detail.shadowColor, shadowBlur: detail.shadowBlur, shadowOffsetX: detail.shadowOffsetX, shadowOffsetY: detail.shadowOffsetY, @@ -441,20 +441,20 @@ define(function (require) { text: this._getLabelText(detail.formatter, value), textFont: this.getFont(textStyle), textPosition: 'inside', - textColor : textColor == 'auto' ? this._getColor(seriesIndex, value) : textColor + textColor: textColor === 'auto' ? this._getColor(seriesIndex, value) : textColor } })); }, - _getValue : function(seriesIndex) { + _getValue: function(seriesIndex) { var data = this.series[seriesIndex].data[0]; - return typeof data.value != 'undefined' ? data.value : data; + return data.value != null ? data.value : data; }, /** * 颜色索引 */ - _colorMap : function (seriesIndex) { + _colorMap: function (seriesIndex) { var serie = this.series[seriesIndex]; var min = serie.min; var total = serie.max - min; @@ -472,8 +472,8 @@ define(function (require) { /** * 自动颜色 */ - _getColor : function (seriesIndex, value) { - if (typeof value == 'undefined') { + _getColor: function (seriesIndex, value) { + if (value == null) { value = this._getValue(seriesIndex); } @@ -489,20 +489,20 @@ define(function (require) { /** * 构建扇形 */ - _getSector : function (center, r0, r, startAngle, endAngle, color, lineStyle) { + _getSector: function (center, r0, r, startAngle, endAngle, color, lineStyle) { return new SectorShape ({ - zlevel : this._zlevelBase, - hoverable : false, - style : { - x : center[0], // 圆心横坐标 - y : center[1], // 圆心纵坐标 - r0 : r0, // 圆环内半径 - r : r, // 圆环外半径 - startAngle : startAngle, - endAngle : endAngle, - brushType : 'fill', - color : color, - shadowColor : lineStyle.shadowColor, + zlevel: this._zlevelBase, + hoverable: false, + style: { + x: center[0], // 圆心横坐标 + y: center[1], // 圆心纵坐标 + r0: r0, // 圆环内半径 + r: r, // 圆环外半径 + startAngle: startAngle, + endAngle: endAngle, + brushType: 'fill', + color: color, + shadowColor: lineStyle.shadowColor, shadowBlur: lineStyle.shadowBlur, shadowOffsetX: lineStyle.shadowOffsetX, shadowOffsetY: lineStyle.shadowOffsetY @@ -513,12 +513,12 @@ define(function (require) { /** * 根据lable.format计算label text */ - _getLabelText : function (formatter, value) { + _getLabelText: function (formatter, value) { if (formatter) { - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { return formatter.call(this.myChart, value); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { return formatter.replace('{value}', value); } } @@ -528,7 +528,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; diff --git a/src/chart/island.js b/src/chart/island.js index b0b39fdb4f9ac0d1f282feede1f60aca8e5c3ce9..9a3e583d4e59af27937d325b185e26cf011b7b0c 100644 --- a/src/chart/island.js +++ b/src/chart/island.js @@ -69,14 +69,14 @@ define(function (require) { } Island.prototype = { - type : ecConfig.CHART_TYPE_ISLAND, + type: ecConfig.CHART_TYPE_ISLAND, /** * 孤岛合并 * * @param {string} tarShapeIndex 目标索引 * @param {Object} srcShape 源目标,合入目标后删除 */ - _combine : function (tarShape, srcShape) { + _combine: function (tarShape, srcShape) { var zrColor = require('zrender/tool/color'); var accMath = require('../util/accMath'); var value = accMath.accAdd( @@ -101,7 +101,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { newOption.island = this.reformOption(newOption.island); this.option = newOption; @@ -111,16 +111,16 @@ define(function (require) { } }, - getOption : function () { + getOption: function () { return this.option; }, - resize : function () { + resize: function () { var newWidth = this.zr.getWidth(); var newHieght = this.zr.getHeight(); var xScale = newWidth / (this._zrWidth || newWidth); var yScale = newHieght / (this._zrHeight || newHieght); - if (xScale == 1 && yScale == 1) { + if (xScale === 1 && yScale === 1) { return; } this._zrWidth = newWidth; @@ -138,29 +138,29 @@ define(function (require) { } }, - add : function (shape) { + add: function (shape) { var name = ecData.get(shape, 'name'); var value = ecData.get(shape, 'value'); - var seriesName = typeof ecData.get(shape, 'series') != 'undefined' + var seriesName = ecData.get(shape, 'series') != null ? ecData.get(shape, 'series').name : ''; var font = this.getFont(this.option.island.textStyle); var islandShape = { - zlevel : this._zlevelBase, - style : { - x : shape.style.x, - y : shape.style.y, - r : this.option.island.r, - color : shape.style.color || shape.style.strokeColor, - text : name + this._valueConnector + value, - textFont : font + zlevel: this._zlevelBase, + style: { + x: shape.style.x, + y: shape.style.y, + r: this.option.island.r, + color: shape.style.color || shape.style.strokeColor, + text: name + this._valueConnector + value, + textFont: font }, - draggable : true, - hoverable : true, - onmousewheel : this.shapeHandler.onmousewheel, - _type : 'island' + draggable: true, + hoverable: true, + onmousewheel: this.shapeHandler.onmousewheel, + _type: 'island' }; - if (islandShape.style.color == '#fff') { + if (islandShape.style.color === '#fff') { islandShape.style.color = shape.style.strokeColor; } this.setCalculable(islandShape); @@ -176,7 +176,7 @@ define(function (require) { this.zr.addShape(islandShape); }, - del : function (shape) { + del: function (shape) { this.zr.delShape(shape.id); var newShapeList = []; for (var i = 0, l = this.shapeList.length; i < l; i++) { @@ -190,7 +190,7 @@ define(function (require) { /** * 数据项被拖拽进来, 重载基类方法 */ - ondrop : function (param, status) { + ondrop: function (param, status) { if (!this.isDrop || !param.target) { // 没有在当前实例上发生拖拽行为则直接返回 return; @@ -213,7 +213,7 @@ define(function (require) { /** * 数据项被拖拽出去, 重载基类方法 */ - ondragend : function (param, status) { + ondragend: function (param, status) { var target = param.target; // 拖拽安放目标 if (!this.isDragend) { // 拖拽的不是孤岛数据,如果没有图表接受孤岛数据,需要新增孤岛数据 diff --git a/src/chart/k.js b/src/chart/k.js index fc71f54b85e245269dd1f2e0da38396dc4c5feb3..9a52d3bfc151cab7ee233cc2155a297677a292f7 100644 --- a/src/chart/k.js +++ b/src/chart/k.js @@ -37,25 +37,25 @@ define(function (require) { } K.prototype = { - type : ecConfig.CHART_TYPE_K, + type: ecConfig.CHART_TYPE_K, /** * 绘制图形 */ - _buildShape : function () { + _buildShape: function () { var series = this.series; this.selectedMap = {}; // 水平垂直双向series索引 ,position索引到seriesIndex var _position2sIndexMap = { - top : [], - bottom : [] + top: [ ], + bottom: [ ] }; var xAxis; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].type == ecConfig.CHART_TYPE_K) { + if (series[i].type === ecConfig.CHART_TYPE_K) { series[i] = this.reformOption(series[i]); xAxis = this.component.xAxis.getAxis(series[i].xAxisIndex); - if (xAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + if (xAxis.type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { _position2sIndexMap[xAxis.getPosition()].push(i); } @@ -78,7 +78,7 @@ define(function (require) { * * @param {number} seriesIndex 系列索引 */ - _buildSinglePosition : function (position, seriesArray) { + _buildSinglePosition: function (position, seriesArray) { var mapData = this._mapData(seriesArray); var locationMap = mapData.locationMap; var maxDataLength = mapData.maxDataLength; @@ -97,7 +97,7 @@ define(function (require) { * 数据整形 * 数组位置映射到系列索引 */ - _mapData : function (seriesArray) { + _mapData: function (seriesArray) { var series = this.series; var serie; // 临时映射变量 var serieName; // 临时映射变量 @@ -121,15 +121,15 @@ define(function (require) { maxDataLength = Math.max(maxDataLength, serie.data.length); } return { - locationMap : locationMap, - maxDataLength : maxDataLength + locationMap: locationMap, + maxDataLength: maxDataLength }; }, /** * 构建类目轴为水平方向的K线图系列 */ - _buildHorizontal : function (seriesArray, maxDataLength, locationMap) { + _buildHorizontal: function (seriesArray, maxDataLength, locationMap) { var series = this.series; // 确定类目轴和数值轴,同一方向随便找一个即可 var seriesIndex; @@ -161,18 +161,18 @@ define(function (require) { pointList[seriesIndex] = []; for (var i = 0, l = maxDataLength; i < l; i++) { - if (typeof categoryAxis.getNameByIndex(i) == 'undefined') { + if (categoryAxis.getNameByIndex(i) == null) { // 系列数据超出类目轴长度 break; } data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; - if (value == '-' || value.length != 4) { + if (value === '-' || value.length != 4) { // 数据格式不符 continue; } @@ -195,7 +195,7 @@ define(function (require) { /** * 生成K线 */ - _buildKLine : function (seriesArray, pointList) { + _buildKLine: function (seriesArray, pointList) { var series = this.series; // normal: var nLineWidth; @@ -228,9 +228,7 @@ define(function (require) { seriesPL = this._getLargePointList(seriesPL); } - if (serie.type == ecConfig.CHART_TYPE_K - && typeof seriesPL != 'undefined' - ) { + if (serie.type === ecConfig.CHART_TYPE_K && seriesPL != null) { // 多级控制 queryTarget = serie; nLineWidth = this.query( @@ -352,14 +350,14 @@ define(function (require) { // console.log(this.shapeList) }, - _isLarge : function(singlePL) { + _isLarge: function(singlePL) { return singlePL[0][1] < 0.5; }, /** * 大规模pointList优化 */ - _getLargePointList : function(singlePL) { + _getLargePointList: function(singlePL) { var total = this.component.grid.getWidth(); var len = singlePL.length; var newList = []; @@ -372,7 +370,7 @@ define(function (require) { /** * 生成K线图上的图形 */ - _getCandle : function ( + _getCandle: function ( seriesIndex, dataIndex, name, x, width, y0, y1, y2, y3, nColor, nLinewidth, nLineColor, @@ -380,23 +378,23 @@ define(function (require) { ) { var series = this.series; var itemShape = { - zlevel : this._zlevelBase, + zlevel: this._zlevelBase, clickable: this.deepQuery( [series[seriesIndex].data[dataIndex], series[seriesIndex]], 'clickable' ), - style : { - x : x, - y : [y0, y1, y2, y3], - width : width, - color : nColor, - strokeColor : nLineColor, - lineWidth : nLinewidth, - brushType : 'both' + style: { + x: x, + y: [y0, y1, y2, y3], + width: width, + color: nColor, + strokeColor: nLineColor, + lineWidth: nLinewidth, + brushType: 'both' }, - highlightStyle : { - color : eColor, - strokeColor : eLineColor, - lineWidth : eLinewidth + highlightStyle: { + color: eColor, + strokeColor: eLineColor, + lineWidth: eLinewidth }, _seriesIndex: seriesIndex }; @@ -412,7 +410,7 @@ define(function (require) { }, // 位置转换 - getMarkCoord : function (seriesIndex, mpData) { + getMarkCoord: function (seriesIndex, mpData) { var serie = this.series[seriesIndex]; var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex); var yAxis = this.component.yAxis.getAxis(serie.yAxisIndex); @@ -431,7 +429,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; @@ -444,7 +442,7 @@ define(function (require) { /** * 动画设定 */ - addDataAnimation : function (params) { + addDataAnimation: function (params) { var series = this.series; var aniMap = {}; // seriesIndex索引参数 for (var i = 0, l = params.length; i < l; i++) { @@ -460,11 +458,11 @@ define(function (require) { seriesIndex = this.shapeList[i]._seriesIndex; if (aniMap[seriesIndex] && !aniMap[seriesIndex][3]) { // 有数据删除才有移动的动画 - if (this.shapeList[i].type == 'candle') { + if (this.shapeList[i].type === 'candle') { dataIndex = ecData.get(this.shapeList[i], 'dataIndex'); serie = series[seriesIndex]; if (aniMap[seriesIndex][2] - && dataIndex == serie.data.length - 1 + && dataIndex === serie.data.length - 1 ) { // 队头加入删除末尾 this.zr.delShape(this.shapeList[i].id); @@ -483,7 +481,7 @@ define(function (require) { this.zr.animate(this.shapeList[i].id, '') .when( 500, - {position : [x, y]} + { position: [ x, y ] } ) .start(); } diff --git a/src/chart/line.js b/src/chart/line.js index 40e12852d3adddfc05ea13c40690099ccad08e3c..73c3703b0c1eaf96e16112b050bb4aeff5c9fb6c 100644 --- a/src/chart/line.js +++ b/src/chart/line.js @@ -40,11 +40,11 @@ define(function (require) { } Line.prototype = { - type : ecConfig.CHART_TYPE_LINE, + type: ecConfig.CHART_TYPE_LINE, /** * 绘制图形 */ - _buildShape : function () { + _buildShape: function () { var series = this.series; this.finalPLMap = {}; // 完成的point list(PL) this._sIndex2ColorMap = {}; // series默认颜色索引,seriesIndex索引到color @@ -56,27 +56,27 @@ define(function (require) { // 水平垂直双向series索引 ,position索引到seriesIndex var _position2sIndexMap = { - top : [], - bottom : [], - left : [], - right : [] + top: [ ], + bottom: [ ], + left: [ ], + right: [ ] }; var xAxisIndex; var yAxisIndex; var xAxis; var yAxis; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].type == this.type) { + if (series[i].type === this.type) { series[i] = this.reformOption(series[i]); xAxisIndex = series[i].xAxisIndex; yAxisIndex = series[i].yAxisIndex; xAxis = this.component.xAxis.getAxis(xAxisIndex); yAxis = this.component.yAxis.getAxis(yAxisIndex); - if (xAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + if (xAxis.type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { _position2sIndexMap[xAxis.getPosition()].push(i); } - else if (yAxis.type == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + else if (yAxis.type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { _position2sIndexMap[yAxis.getPosition()].push(i); } @@ -98,7 +98,7 @@ define(function (require) { * * @param {number} seriesIndex 系列索引 */ - _buildSinglePosition : function (position, seriesArray) { + _buildSinglePosition: function (position, seriesArray) { var mapData = this._mapData(seriesArray); var locationMap = mapData.locationMap; var maxDataLength = mapData.maxDataLength; @@ -126,7 +126,7 @@ define(function (require) { * 数据整形 * 数组位置映射到系列索引 */ - _mapData : function (seriesArray) { + _mapData: function (seriesArray) { var series = this.series; var serie; // 临时映射变量 var dataIndex = 0; // 堆积数据所在位置映射 @@ -171,7 +171,7 @@ define(function (require) { if (this.selectedMap[serieName]) { stackKey = serie.stack || (magicStackKey + seriesArray[i]); - if (typeof stackMap[stackKey] == 'undefined') { + if (stackMap[stackKey] == null) { stackMap[stackKey] = dataIndex; locationMap[dataIndex] = [seriesArray[i]]; dataIndex++; @@ -204,15 +204,15 @@ define(function (require) { */ return { - locationMap : locationMap, - maxDataLength : maxDataLength + locationMap: locationMap, + maxDataLength: maxDataLength }; }, /** * 构建类目轴为水平方向的折线图系列 */ - _buildHorizontal : function (seriesArray, maxDataLength, locationMap, xMarkMap) { + _buildHorizontal: function (seriesArray, maxDataLength, locationMap, xMarkMap) { var series = this.series; // 确定类目轴和数值轴,同一方向随便找一个即可 var seriesIndex = locationMap[0][0]; @@ -233,7 +233,7 @@ define(function (require) { var data; var value; for (var i = 0, l = maxDataLength; i < l; i++) { - if (typeof categoryAxis.getNameByIndex(i) == 'undefined') { + if (categoryAxis.getNameByIndex(i) == null) { // 系列数据超出类目轴长度 break; } @@ -247,21 +247,21 @@ define(function (require) { seriesIndex = locationMap[j][m]; serie = series[seriesIndex]; data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; curPLMap[seriesIndex] = curPLMap[seriesIndex] || []; xMarkMap[seriesIndex] = xMarkMap[seriesIndex] || { - min : Number.POSITIVE_INFINITY, - max : Number.NEGATIVE_INFINITY, - sum : 0, - counter : 0, - average : 0 + min: Number.POSITIVE_INFINITY, + max: Number.NEGATIVE_INFINITY, + sum: 0, + counter: 0, + average: 0 }; - if (value == '-') { + if (value === '-') { // 空数据则把正在记录的curPLMap添加到finalPLMap中 if (curPLMap[seriesIndex].length > 0) { this.finalPLMap[seriesIndex] = @@ -316,8 +316,8 @@ define(function (require) { seriesIndex = locationMap[j][m]; serie = series[seriesIndex]; data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; @@ -385,7 +385,7 @@ define(function (require) { /** * 构建类目轴为垂直方向的折线图系列 */ - _buildVertical : function (seriesArray, maxDataLength, locationMap, xMarkMap) { + _buildVertical: function (seriesArray, maxDataLength, locationMap, xMarkMap) { var series = this.series; // 确定类目轴和数值轴,同一方向随便找一个即可 var seriesIndex = locationMap[0][0]; @@ -406,7 +406,7 @@ define(function (require) { var data; var value; for (var i = 0, l = maxDataLength; i < l; i++) { - if (typeof categoryAxis.getNameByIndex(i) == 'undefined') { + if (categoryAxis.getNameByIndex(i) == null) { // 系列数据超出类目轴长度 break; } @@ -420,21 +420,21 @@ define(function (require) { seriesIndex = locationMap[j][m]; serie = series[seriesIndex]; data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; curPLMap[seriesIndex] = curPLMap[seriesIndex] || []; xMarkMap[seriesIndex] = xMarkMap[seriesIndex] || { - min : Number.POSITIVE_INFINITY, - max : Number.NEGATIVE_INFINITY, - sum : 0, - counter : 0, - average : 0 + min: Number.POSITIVE_INFINITY, + max: Number.NEGATIVE_INFINITY, + sum: 0, + counter: 0, + average: 0 }; - if (value == '-') { + if (value === '-') { // 空数据则把正在记录的curPLMap添加到finalPLMap中 if (curPLMap[seriesIndex].length > 0) { this.finalPLMap[seriesIndex] = @@ -489,8 +489,8 @@ define(function (require) { seriesIndex = locationMap[j][m]; serie = series[seriesIndex]; data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; @@ -559,62 +559,42 @@ define(function (require) { /** * 生成折线和折线上的拐点 */ - _buildBorkenLine : function (seriesArray, pointList, categoryAxis, orient) { + _buildBorkenLine: function (seriesArray, pointList, categoryAxis, orient) { var series = this.series; - var defaultColor; - // 折线相关 - var lineWidth; - var lineType; - var lineColor; - var normalColor; - - // 填充相关 - var isFill; - var fillNormalColor; - - var serie; var data; - var seriesPL; - var singlePL; - var brokenLineShape; - var halfSmoothPolygonShape; - - var isLarge; // 堆积层叠需求,反顺序构建 - var seriesIndex; for (var sIdx = seriesArray.length - 1; sIdx >= 0; sIdx--) { - seriesIndex = seriesArray[sIdx]; - serie = series[seriesIndex]; - seriesPL = pointList[seriesIndex]; - if (serie.type == this.type && typeof seriesPL != 'undefined') { - defaultColor = this._sIndex2ColorMap[seriesIndex]; - // 多级控制 - lineWidth = this.query( + var seriesIndex = seriesArray[sIdx]; + var serie = series[seriesIndex]; + var seriesPL = pointList[seriesIndex]; + if (serie.type === this.type && seriesPL != null) { + var bbox = this._getBbox(seriesIndex, orient); + var defaultColor = this._sIndex2ColorMap[seriesIndex]; + // 折线相关,多级控制 + var lineWidth = this.query( serie, 'itemStyle.normal.lineStyle.width' ); - lineType = this.query( + var lineType = this.query( serie, 'itemStyle.normal.lineStyle.type' ); - lineColor = this.query( + var lineColor = this.query( serie, 'itemStyle.normal.lineStyle.color' ); - normalColor = this.getItemStyleColor( + var normalColor = this.getItemStyleColor( this.query(serie, 'itemStyle.normal.color'), seriesIndex, -1 ); - isFill = typeof this.query( - serie, 'itemStyle.normal.areaStyle' - ) != 'undefined'; - - fillNormalColor = this.query( + // 填充相关 + var isFill = this.query(serie, 'itemStyle.normal.areaStyle') != null; + var fillNormalColor = this.query( serie, 'itemStyle.normal.areaStyle.color' ); for (var i = 0, l = seriesPL.length; i < l; i++) { - singlePL = seriesPL[i]; - isLarge = this._isLarge(orient, singlePL); + var singlePL = seriesPL[i]; + var isLarge = this._isLarge(orient, singlePL); if (!isLarge) { // 非大数据模式才显示拐点symbol for (var j = 0, k = singlePL.length; j < k; j++) { data = serie.data[singlePL[j][2]]; @@ -648,18 +628,19 @@ define(function (require) { } // 折线图 - brokenLineShape = new BrokenLineShape({ - zlevel : this._zlevelBase, - style : { + var brokenLineShape = new BrokenLineShape({ + zlevel: this._zlevelBase, + style: { miterLimit: lineWidth, - pointList : singlePL, - strokeColor : lineColor - || normalColor - || defaultColor, - lineWidth : lineWidth, - lineType : lineType, - smooth : this._getSmooth(serie.smooth), - shadowColor : this.query( + pointList: singlePL, + strokeColor: lineColor + || normalColor + || defaultColor, + lineWidth: lineWidth, + lineType: lineType, + smooth: this._getSmooth(serie.smooth), + smoothConstraint: bbox, + shadowColor: this.query( serie, 'itemStyle.normal.lineStyle.shadowColor' ), @@ -676,10 +657,10 @@ define(function (require) { 'itemStyle.normal.lineStyle.shadowOffsetY' ) }, - hoverable : false, - _main : true, - _seriesIndex : seriesIndex, - _orient : orient + hoverable: false, + _main: true, + _seriesIndex: seriesIndex, + _orient: orient }); ecData.pack( @@ -691,11 +672,11 @@ define(function (require) { this.shapeList.push(brokenLineShape); if (isFill) { - halfSmoothPolygonShape = new HalfSmoothPolygonShape({ - zlevel : this._zlevelBase, - style : { + var halfSmoothPolygonShape = new HalfSmoothPolygonShape({ + zlevel: this._zlevelBase, + style: { miterLimit: lineWidth, - pointList : zrUtil.clone(singlePL).concat([ + pointList: zrUtil.clone(singlePL).concat([ [ singlePL[singlePL.length - 1][4], singlePL[singlePL.length - 1][5] @@ -705,16 +686,17 @@ define(function (require) { singlePL[0][5] ] ]), - brushType : 'fill', - smooth : this._getSmooth(serie.smooth), - color : fillNormalColor - ? fillNormalColor - : zrColor.alpha(defaultColor,0.5) + brushType: 'fill', + smooth: this._getSmooth(serie.smooth), + smoothConstraint: bbox, + color: fillNormalColor + ? fillNormalColor + : zrColor.alpha(defaultColor,0.5) }, - hoverable : false, - _main : true, - _seriesIndex : seriesIndex, - _orient : orient + hoverable: false, + _main: true, + _seriesIndex: seriesIndex, + _orient: orient }); ecData.pack( halfSmoothPolygonShape, @@ -728,12 +710,26 @@ define(function (require) { } }, - _isLarge : function(orient, singlePL) { + _getBbox: function(seriesIndex, orient) { + var bbox = this.component.grid.getBbox(); + var xMarkMap = this.xMarkMap[seriesIndex]; + if (orient === 'horizontal') { + bbox[0][1] = Math.min(xMarkMap.minY, xMarkMap.maxY); + bbox[1][1] = Math.max(xMarkMap.minY, xMarkMap.maxY); + } + else { + bbox[0][0] = Math.min(xMarkMap.minX, xMarkMap.maxX); + bbox[1][0] = Math.max(xMarkMap.minX, xMarkMap.maxX); + } + return bbox; + }, + + _isLarge: function(orient, singlePL) { if (singlePL.length < 2) { return false; } else { - return orient == 'horizontal' + return orient === 'horizontal' ? (Math.abs(singlePL[0][0] - singlePL[1][0]) < 0.5) : (Math.abs(singlePL[0][1] - singlePL[1][1]) < 0.5); } @@ -742,9 +738,9 @@ define(function (require) { /** * 大规模pointList优化 */ - _getLargePointList : function(orient, singlePL) { + _getLargePointList: function(orient, singlePL) { var total; - if (orient == 'horizontal') { + if (orient === 'horizontal') { total = this.component.grid.getWidth(); } else { @@ -759,11 +755,11 @@ define(function (require) { return newList; }, - _getSmooth : function (isSmooth/*, pointList, orient*/) { + _getSmooth: function (isSmooth/*, pointList, orient*/) { if (isSmooth) { /* 不科学啊,发现0.3通用了 var delta; - if (orient == 'horizontal') { + if (orient === 'horizontal') { delta = Math.abs(pointList[0][0] - pointList[1][0]); } else { @@ -780,7 +776,7 @@ define(function (require) { /** * 生成空数据所需的可计算提示图形 */ - _getCalculableItem : function (seriesIndex, dataIndex, name, x, y, orient) { + _getCalculableItem: function (seriesIndex, dataIndex, name, x, y, orient) { var series = this.series; var color = series[seriesIndex].calculableHolderColor || this.ecTheme.calculableHolderColor; @@ -802,7 +798,7 @@ define(function (require) { /** * 生成折线图上的拐点图形 */ - _getSymbol : function (seriesIndex, dataIndex, name, x, y, orient) { + _getSymbol: function (seriesIndex, dataIndex, name, x, y, orient) { var series = this.series; var serie = series[seriesIndex]; var data = serie.data[dataIndex]; @@ -813,7 +809,7 @@ define(function (require) { this._sIndex2ShapeMap[seriesIndex], this._sIndex2ColorMap[seriesIndex], '#fff', - orient == 'vertical' ? 'horizontal' : 'vertical' // 翻转 + orient === 'vertical' ? 'horizontal' : 'vertical' // 翻转 ); itemShape.zlevel = this._zlevelBase + 1; @@ -826,14 +822,14 @@ define(function (require) { }, // 位置转换 - getMarkCoord : function (seriesIndex, mpData) { + getMarkCoord: function (seriesIndex, mpData) { var serie = this.series[seriesIndex]; var xMarkMap = this.xMarkMap[seriesIndex]; var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex); var yAxis = this.component.yAxis.getAxis(serie.yAxisIndex); if (mpData.type - && (mpData.type == 'max' || mpData.type == 'min' || mpData.type == 'average') + && (mpData.type === 'max' || mpData.type === 'min' || mpData.type === 'average') ) { // 特殊值内置支持 return [ @@ -858,7 +854,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; @@ -868,7 +864,7 @@ define(function (require) { this._buildShape(); }, - ontooltipHover : function (param, tipShape) { + ontooltipHover: function (param, tipShape) { var seriesIndex = param.seriesIndex; var dataIndex = param.dataIndex; var seriesPL; @@ -880,7 +876,7 @@ define(function (require) { for (var i = 0, l = seriesPL.length; i < l; i++) { singlePL = seriesPL[i]; for (var j = 0, k = singlePL.length; j < k; j++) { - if (dataIndex == singlePL[j][2]) { + if (dataIndex === singlePL[j][2]) { tipShape.push(this._getSymbol( seriesIndex[len], // seriesIndex singlePL[j][2], // dataIndex @@ -899,7 +895,7 @@ define(function (require) { /** * 动态数据增加动画 */ - addDataAnimation : function (params) { + addDataAnimation: function (params) { var series = this.series; var aniMap = {}; // seriesIndex索引参数 for (var i = 0, l = params.length; i < l; i++) { @@ -922,11 +918,11 @@ define(function (require) { dx = Math.abs(pointList[0][0] - pointList[1][0]); dy = Math.abs(pointList[0][1] - pointList[1][1]); isHorizontal = - this.shapeList[i]._orient == 'horizontal'; + this.shapeList[i]._orient === 'horizontal'; if (aniMap[seriesIndex][2]) { // 队头加入删除末尾 - if (this.shapeList[i].type == 'polygon') { + if (this.shapeList[i].type === 'polygon') { //区域图 var len = pointList.length; this.shapeList[i].style.pointList[len - 3] @@ -948,7 +944,7 @@ define(function (require) { else { // 队尾加入删除头部 this.shapeList[i].style.pointList.shift(); - if (this.shapeList[i].type == 'polygon') { + if (this.shapeList[i].type === 'polygon') { //区域图 var targetPoint = this.shapeList[i].style.pointList.pop(); @@ -965,7 +961,7 @@ define(function (require) { this.zr.modShape( this.shapeList[i].id, { - style : { + style: { pointList: this.shapeList[i].style.pointList } }, @@ -976,7 +972,7 @@ define(function (require) { // 拐点动画 if (aniMap[seriesIndex][2] && this.shapeList[i]._dataIndex - == series[seriesIndex].data.length - 1 + === series[seriesIndex].data.length - 1 ) { // 队头加入删除末尾 this.zr.delShape(this.shapeList[i].id); @@ -994,7 +990,7 @@ define(function (require) { this.zr.animate(this.shapeList[i].id, '') .when( 500, - {position : [x, y]} + { position: [ x, y ] } ) .start(); } @@ -1021,7 +1017,7 @@ define(function (require) { y -= 1; symbol = 'star'; } - else if (symbol == 'rectangle' || symbol == 'arrow') { + else if (symbol === 'rectangle' || symbol === 'arrow') { x += (width - height) / 2; width = height; } @@ -1046,12 +1042,12 @@ define(function (require) { ctx.lineTo(x2 + style.width, y2 + dy); symbol(ctx, { - x : x + 4, - y : y + 4, - width : width - 8, - height : height - 8, - n : dy, - image : imageLocation + x: x + 4, + y: y + 4, + width: width - 8, + height: height - 8, + n: dy, + image: imageLocation }); } diff --git a/src/chart/map.js b/src/chart/map.js index e799e1c8b66de53d61973ba2c36f40960a0db346..5cee304f8ce4e6d04381bcfef9a399751462b5f2 100644 --- a/src/chart/map.js +++ b/src/chart/map.js @@ -143,19 +143,18 @@ define(function (require) { this._selectedMode[mapType] = this._selectedMode[mapType] || series[i].selectedMode; - if (typeof this._hoverable[mapType] == 'undefined' - || this._hoverable[mapType] // false 1票否决 - ) { + if (this._hoverable[mapType] == null || this._hoverable[mapType]) { + // false 1票否决 this._hoverable[mapType] = series[i].hoverable; } - if (typeof this._clickable[mapType] == 'undefined' - || this._clickable[mapType] // false 1票否决 - ) { + if (this._clickable[mapType] == null || this._clickable[mapType]) { + // false 1票否决 this._clickable[mapType] = series[i].clickable; } - if (typeof this._showLegendSymbol[mapType] == 'undefined' - || this._showLegendSymbol[mapType] // false 1票否决 + if (this._showLegendSymbol[mapType] == null + || this._showLegendSymbol[mapType] ) { + // false 1票否决 this._showLegendSymbol[mapType] = series[i].showLegendSymbol; } @@ -179,12 +178,10 @@ define(function (require) { data[j][key]; } else if (!isNaN(data[j].value)) { - typeof valueData[mapType][name].value - == 'undefined' + valueData[mapType][name].value == null && (valueData[mapType][name].value = 0); - valueData[mapType][name].value += - data[j].value; + valueData[mapType][name].value += data[j].value; } } //索引有该区域的系列样式 @@ -561,19 +558,13 @@ define(function (require) { //y = isNaN(cusY) ? padding : cusY; y = this.parsePercent(cusY, zrHeight); y = isNaN(y) ? padding : y; - if (typeof width == 'undefined') { - width = zrWidth - x - 2 * padding; - } - else { - width = this.parsePercent(width, zrWidth); - } - - if (typeof height == 'undefined') { - height = zrHeight - y - 2 * padding; - } - else { - height = this.parsePercent(height, zrHeight); - } + + width = width == null + ? (zrWidth - x - 2 * padding) + : (this.parsePercent(width, zrWidth)); + height = height == null + ? (zrHeight - y - 2 * padding) + : (this.parsePercent(height, zrHeight)); var mapWidth = bbox.width; var mapHeight = bbox.height; @@ -816,7 +807,7 @@ define(function (require) { _style: zrUtil.clone(style), _mapType: mapType }; - if (typeof style.scale != 'undefined') { + if (style.scale != null) { shape.scale = zrUtil.clone(style.scale); } @@ -839,7 +830,7 @@ define(function (require) { break; default : shape = new PathShape(shape); - shape.pathArray = shape._parsePathData(shape.style.path); + shape.style.pathArray = shape.buildPathArray(shape.style.path); break; } @@ -853,22 +844,22 @@ define(function (require) { textShape.clickable = shape.clickable = this._clickable[mapType] - && (typeof data.clickable == 'undefined' || data.clickable); + && (data.clickable == null || data.clickable); if (this._selectedMode[mapType]) { - this._selected[name] = typeof this._selected[name] != 'undefined' + this._selected[name] = this._selected[name] != null ? this._selected[name] : data.selected; this._mapTypeMap[name] = mapType; - if (typeof data.selectable == 'undefined' || data.selectable) { + if (data.selectable == null || data.selectable) { shape.clickable = textShape.clickable = true; shape.onclick = textShape.onclick = this.shapeHandler.onclick; } } if (this._hoverable[mapType] - && (typeof data.hoverable == 'undefined' || data.hoverable) + && (data.hoverable == null || data.hoverable) ) { textShape.hoverable = shape.hoverable = true; shape.hoverConnect = textShape.id; @@ -1038,7 +1029,7 @@ define(function (require) { var geoAndPos = this.pos2geo(mapType, [mx - left, my - top]); if (delta > 0) { delta = 1.2; // 放大 - if (typeof this._scaleLimitMap[mapType].max != 'undefined' + if (this._scaleLimitMap[mapType].max != null && transform.baseScale >= this._scaleLimitMap[mapType].max ) { return; // 缩放限制 @@ -1046,7 +1037,7 @@ define(function (require) { } else { delta = 1 / 1.2; // 缩小 - if (typeof this._scaleLimitMap[mapType].min != 'undefined' + if (this._scaleLimitMap[mapType].min != null && transform.baseScale <= this._scaleLimitMap[mapType].min ) { return; // 缩放限制 diff --git a/src/chart/pie.js b/src/chart/pie.js index 7db9c2e670aeb93a61a244715ea9c179059af18a..6ec8afd86ff34ebd8aad280ba56a3d453fc2f358 100644 --- a/src/chart/pie.js +++ b/src/chart/pie.js @@ -76,11 +76,11 @@ define(function (require) { } Pie.prototype = { - type : ecConfig.CHART_TYPE_PIE, + type: ecConfig.CHART_TYPE_PIE, /** * 绘制图形 */ - _buildShape : function () { + _buildShape: function () { var series = this.series; var legend = this.component.legend; this.selectedMap = {}; @@ -92,7 +92,7 @@ define(function (require) { this._selectedMode = false; var serieName; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].type == ecConfig.CHART_TYPE_PIE) { + if (series[i].type === ecConfig.CHART_TYPE_PIE) { series[i] = this.reformOption(series[i]); serieName = series[i].name || ''; // 系列图例开关 @@ -108,18 +108,18 @@ define(function (require) { this._selected[i] = []; if (this.deepQuery([series[i], this.option], 'calculable')) { pieCase = { - zlevel : this._zlevelBase, - hoverable : false, - style : { - x : center[0], // 圆心横坐标 - y : center[1], // 圆心纵坐标 + zlevel: this._zlevelBase, + hoverable: false, + style: { + x: center[0], // 圆心横坐标 + y: center[1], // 圆心纵坐标 // 圆环内外半径 - r0 : radius[0] <= 10 ? 0 : radius[0] - 10, - r : radius[1] + 10, - brushType : 'stroke', + r0: radius[0] <= 10 ? 0 : radius[0] - 10, + r: radius[1] + 10, + brushType: 'stroke', lineWidth: 1, - strokeColor : series[i].calculableHolderColor - || this.ecTheme.calculableHolderColor + strokeColor: series[i].calculableHolderColor + || this.ecTheme.calculableHolderColor } }; ecData.pack(pieCase, series[i], i, undefined, -1); @@ -143,7 +143,7 @@ define(function (require) { * * @param {number} seriesIndex 系列索引 */ - _buildSinglePie : function (seriesIndex) { + _buildSinglePie: function (seriesIndex) { var series = this.series; var serie = series[seriesIndex]; var data = serie.data; @@ -173,6 +173,10 @@ define(function (require) { maxValue = Math.max(maxValue, +data[i].value); } } + + if (totalValue === 0) { + return; + } var percent = 100; var lastPercent; // 相邻细角度优化 @@ -223,12 +227,12 @@ define(function (require) { r0 = +radius[0]; r1 = +radius[1]; - if (roseType == 'radius') { + if (roseType === 'radius') { r1 = data[i].value / maxValue * (r1 - r0) * 0.8 + (r1 - r0) * 0.2 + r0; } - else if (roseType == 'area') { + else if (roseType === 'area') { r1 = Math.sqrt(data[i].value / maxValue) * (r1 - r0) + r0; } @@ -270,7 +274,7 @@ define(function (require) { /** * 构建单个扇形及指标 */ - _buildItem : function ( + _buildItem: function ( seriesIndex, dataIndex, percent, lastAddRadius, isSelected, r0, r1, @@ -335,7 +339,7 @@ define(function (require) { /** * 构建扇形 */ - getSector : function ( + getSector: function ( seriesIndex, dataIndex, percent, isSelected, r0, r1, startAngle, endAngle, defaultColor @@ -359,35 +363,35 @@ define(function (require) { || defaultColor; var emphasisColor = this.getItemStyleColor(emphasis.color, seriesIndex, dataIndex, data) - || (typeof normalColor == 'string' + || (typeof normalColor === 'string' ? zrColor.lift(normalColor, -0.2) : normalColor ); var sector = { - zlevel : this._zlevelBase, + zlevel: this._zlevelBase, clickable: this.deepQuery(queryTarget, 'clickable'), - style : { - x : center[0], // 圆心横坐标 - y : center[1], // 圆心纵坐标 - r0 : r0, // 圆环内半径 - r : r1, // 圆环外半径 - startAngle : startAngle, - endAngle : endAngle, - brushType : 'both', - color : normalColor, - lineWidth : normal.borderWidth, - strokeColor : normal.borderColor, + style: { + x: center[0], // 圆心横坐标 + y: center[1], // 圆心纵坐标 + r0: r0, // 圆环内半径 + r: r1, // 圆环外半径 + startAngle: startAngle, + endAngle: endAngle, + brushType: 'both', + color: normalColor, + lineWidth: normal.borderWidth, + strokeColor: normal.borderColor, lineJoin: 'round' }, - highlightStyle : { - color : emphasisColor, - lineWidth : emphasis.borderWidth, - strokeColor : emphasis.borderColor, + highlightStyle: { + color: emphasisColor, + lineWidth: emphasis.borderWidth, + strokeColor: emphasis.borderColor, lineJoin: 'round' }, - _seriesIndex : seriesIndex, - _dataIndex : dataIndex + _seriesIndex: seriesIndex, + _dataIndex: dataIndex }; if (isSelected) { @@ -431,7 +435,7 @@ define(function (require) { /** * 需要显示则会有返回构建好的shape,否则返回undefined */ - getLabel : function ( + getLabel: function ( seriesIndex, dataIndex, percent, lastAddRadius, startAngle, endAngle, defaultColor, isEmphasis @@ -467,14 +471,14 @@ define(function (require) { var textBaseline = 'middle'; labelControl.position = labelControl.position || itemStyle.normal.label.position; - if (labelControl.position == 'center') { + if (labelControl.position === 'center') { // center显示 radius = radius[1]; x = centerX; y = centerY; textAlign = 'center'; } - else if (labelControl.position == 'inner'){ + else if (labelControl.position === 'inner'){ // 内部显示 radius = (radius[0] + radius[1]) / 2 + lastAddRadius; x = Math.round( @@ -488,51 +492,48 @@ define(function (require) { } else { - // 外部显示,默认 labelControl.position == 'outer') + // 外部显示,默认 labelControl.position === 'outer') radius = radius[1] - (-itemStyle[status].labelLine.length) //- (-textStyle.fontSize) + lastAddRadius; x = centerX + radius * zrMath.cos(midAngle, true); y = centerY - radius * zrMath.sin(midAngle, true); - textAlign = (midAngle >= 90 && midAngle <= 270) - ? 'right' : 'left'; + textAlign = (midAngle >= 90 && midAngle <= 270) ? 'right' : 'left'; } if (labelControl.position != 'center' && labelControl.position != 'inner' ) { - x += textAlign == 'left' ? 20 : -20; + x += textAlign === 'left' ? 20 : -20; } - data.__labelX = x - (textAlign == 'left' ? 5 : -5); + data.__labelX = x - (textAlign === 'left' ? 5 : -5); data.__labelY = y; return new TextShape({ - zlevel : this._zlevelBase + 1, - hoverable : false, - style : { - x : x, - y : y, - color : textStyle.color || defaultColor, - text : this.getLabelText( - seriesIndex, dataIndex, percent, status - ), - textAlign : textStyle.align || textAlign, - textBaseline : textStyle.baseline || textBaseline, - textFont : this.getFont(textStyle) + zlevel: this._zlevelBase + 1, + hoverable: false, + style: { + x: x, + y: y, + color: textStyle.color || defaultColor, + text: this.getLabelText(seriesIndex, dataIndex, percent, status), + textAlign: textStyle.align || textAlign, + textBaseline: textStyle.baseline || textBaseline, + textFont: this.getFont(textStyle) }, - highlightStyle : { - brushType : 'fill' + highlightStyle: { + brushType: 'fill' }, - _seriesIndex : seriesIndex, - _dataIndex : dataIndex + _seriesIndex: seriesIndex, + _dataIndex: dataIndex }); }, /** * 根据lable.format计算label text */ - getLabelText : function (seriesIndex, dataIndex, percent, status) { + getLabelText: function (seriesIndex, dataIndex, percent, status) { var series = this.series; var serie = series[seriesIndex]; var data = serie.data[dataIndex]; @@ -542,7 +543,7 @@ define(function (require) { ); if (formatter) { - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { return formatter.call( this.myChart, serie.name, @@ -551,7 +552,7 @@ define(function (require) { percent ); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { formatter = formatter.replace('{a}','{a0}') .replace('{b}','{b0}') .replace('{c}','{c0}') @@ -572,7 +573,7 @@ define(function (require) { /** * 需要显示则会有返回构建好的shape,否则返回undefined */ - getLabelLine : function ( + getLabelLine: function ( seriesIndex, dataIndex, lastAddRadius, r0, r1, startAngle, endAngle, defaultColor, @@ -609,11 +610,11 @@ define(function (require) { var sinValue = zrMath.sin(midAngle, true); // 三角函数缓存已在zrender/tool/math中做了 return new BrokenLineShape({ - // shape : 'brokenLine', - zlevel : this._zlevelBase + 1, - hoverable : false, - style : { - pointList : [ + // shape: 'brokenLine', + zlevel: this._zlevelBase + 1, + hoverable: false, + style: { + pointList: [ [ centerX + midRadius * cosValue, centerY - midRadius * sinValue @@ -627,16 +628,16 @@ define(function (require) { data.__labelY ] ], - //xStart : centerX + midRadius * cosValue, - //yStart : centerY - midRadius * sinValue, - //xEnd : centerX + maxRadius * cosValue, - //yEnd : centerY - maxRadius * sinValue, - strokeColor : lineStyle.color || defaultColor, - lineType : lineStyle.type, - lineWidth : lineStyle.width + //xStart: centerX + midRadius * cosValue, + //yStart: centerY - midRadius * sinValue, + //xEnd: centerX + maxRadius * cosValue, + //yEnd: centerY - maxRadius * sinValue, + strokeColor: lineStyle.color || defaultColor, + lineType: lineStyle.type, + lineWidth: lineStyle.width }, - _seriesIndex : seriesIndex, - _dataIndex : dataIndex + _seriesIndex: seriesIndex, + _dataIndex: dataIndex }); } else { @@ -650,7 +651,7 @@ define(function (require) { * @param {Object} data * @param {boolean} isEmphasis true is 'emphasis' and false is 'normal' */ - _needLabel : function (serie, data, isEmphasis) { + _needLabel: function (serie, data, isEmphasis) { return this.deepQuery( [data, serie], 'itemStyle.' @@ -665,7 +666,7 @@ define(function (require) { * @param {Object} data * @param {boolean} isEmphasis true is 'emphasis' and false is 'normal' */ - _needLabelLine : function (serie, data, isEmphasis) { + _needLabelLine: function (serie, data, isEmphasis) { return this.deepQuery( [data, serie], 'itemStyle.' @@ -678,7 +679,7 @@ define(function (require) { * 参数修正&默认值赋值,重载基类方法 * @param {Object} opt 参数 */ - reformOption : function (opt) { + reformOption: function (opt) { // 常用方法快捷方式 var _merge = zrUtil.merge; opt = _merge( @@ -702,7 +703,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; @@ -715,7 +716,7 @@ define(function (require) { /** * 动态数据增加动画 */ - addDataAnimation : function (params) { + addDataAnimation: function (params) { var series = this.series; var aniMap = {}; // seriesIndex索引参数 for (var i = 0, l = params.length; i < l; i++) { @@ -738,7 +739,7 @@ define(function (require) { isHead = params[i][2]; dataGrow = params[i][3]; if (series[seriesIndex] - && series[seriesIndex].type == ecConfig.CHART_TYPE_PIE + && series[seriesIndex].type === ecConfig.CHART_TYPE_PIE ) { if (isHead) { if (!dataGrow) { @@ -793,17 +794,15 @@ define(function (require) { if (!targeSector) { continue; } - if (backupShapeList[i].type == 'sector') { + if (backupShapeList[i].type === 'sector') { if (targeSector != 'delete') { // 原有扇形 this.zr.animate(backupShapeList[i].id, 'style') .when( 400, { - startAngle : - targeSector.style.startAngle, - endAngle : - targeSector.style.endAngle + startAngle: targeSector.style.startAngle, + endAngle: targeSector.style.endAngle } ) .start(); @@ -814,22 +813,16 @@ define(function (require) { .when( 400, deltaIdxMap[seriesIndex] < 0 - ? { - startAngle : - backupShapeList[i].style.startAngle - } - : { - endAngle : - backupShapeList[i].style.endAngle - } + ? { startAngle: backupShapeList[i].style.startAngle } + : { endAngle: backupShapeList[i].style.endAngle } ) .start(); } } - else if (backupShapeList[i].type == 'text' - || backupShapeList[i].type == 'broken-line' + else if (backupShapeList[i].type === 'text' + || backupShapeList[i].type === 'broken-line' ) { - if (targeSector == 'delete') { + if (targeSector === 'delete') { // 删除逻辑一样 this.zr.delShape(backupShapeList[i].id); } @@ -868,7 +861,7 @@ define(function (require) { this.shapeList = backupShapeList; }, - onclick : function (param) { + onclick: function (param) { var series = this.series; if (!this.isClick || !param.target) { // 没有在当前实例上发生点击直接返回 @@ -882,7 +875,7 @@ define(function (require) { var dataIndex = ecData.get(target, 'dataIndex'); for (var i = 0, len = this.shapeList.length; i < len; i++) { - if (this.shapeList[i].id == target.id) { + if (this.shapeList[i].id === target.id) { seriesIndex = ecData.get(target, 'seriesIndex'); dataIndex = ecData.get(target, 'dataIndex'); // 当前点击的 @@ -914,7 +907,7 @@ define(function (require) { this.zr.modShape(target.id, target); } else if (this.shapeList[i].style._hasSelected - && this._selectedMode == 'single' + && this._selectedMode === 'single' ) { seriesIndex = ecData.get(this.shapeList[i], 'seriesIndex'); dataIndex = ecData.get(this.shapeList[i], 'dataIndex'); @@ -933,8 +926,8 @@ define(function (require) { ecConfig.EVENT.PIE_SELECTED, param.event, { - selected : this._selected, - target : ecData.get(target, 'name') + selected: this._selected, + target: ecData.get(target, 'name') }, this.myChart ); diff --git a/src/chart/scatter.js b/src/chart/scatter.js index 77a6554e4d460dd694c4d6bfdd7a329ab1fb99e5..68c53f5a93c874bd3fd3367b1621511e6ededfed 100644 --- a/src/chart/scatter.js +++ b/src/chart/scatter.js @@ -38,11 +38,11 @@ define(function (require) { } Scatter.prototype = { - type : ecConfig.CHART_TYPE_SCATTER, + type: ecConfig.CHART_TYPE_SCATTER, /** * 绘制图形 */ - _buildShape : function () { + _buildShape: function () { var series = this.series; this._sIndex2ColorMap = {}; // series默认颜色索引,seriesIndex索引到color this._symbol = this.option.symbolList; @@ -60,7 +60,7 @@ define(function (require) { for (var i = 0, l = series.length; i < l; i++) { serie = series[i]; serieName = serie.name; - if (serie.type == ecConfig.CHART_TYPE_SCATTER) { + if (serie.type === ecConfig.CHART_TYPE_SCATTER) { series[i] = this.reformOption(series[i]); this._sIndex2ShapeMap[i] = this.query(serie, 'symbol') || this._symbol[i % this._symbol.length]; @@ -122,7 +122,7 @@ define(function (require) { /** * 构建类目轴为水平方向的散点图系列 */ - _buildSeries : function (seriesArray) { + _buildSeries: function (seriesArray) { if (seriesArray.length === 0) { return; } @@ -150,12 +150,12 @@ define(function (require) { pointList[seriesIndex] = []; for (var i = 0, l = serie.data.length; i < l; i++) { data = serie.data[i]; - value = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + value = data != null + ? (data.value != null ? data.value : data) : '-'; - if (value == '-' || value.length < 2) { + if (value === '-' || value.length < 2) { // 数据格式不符 continue; } @@ -179,18 +179,18 @@ define(function (require) { this._buildPointList(pointList); }, - _markMap : function (xAxis, yAxis, data, pointList) { + _markMap: function (xAxis, yAxis, data, pointList) { var xMarkMap = { - min0 : Number.POSITIVE_INFINITY, - max0 : Number.NEGATIVE_INFINITY, - sum0 : 0, - counter0 : 0, - average0 : 0, - min1 : Number.POSITIVE_INFINITY, - max1 : Number.NEGATIVE_INFINITY, - sum1 : 0, - counter1 : 0, - average1 : 0 + min0: Number.POSITIVE_INFINITY, + max0: Number.NEGATIVE_INFINITY, + sum0: 0, + counter0: 0, + average0: 0, + min1: Number.POSITIVE_INFINITY, + max1: Number.NEGATIVE_INFINITY, + sum1: 0, + counter1: 0, + average1: 0 }; var value; for (var i = 0, l = pointList.length; i < l; i++) { @@ -273,7 +273,7 @@ define(function (require) { /** * 生成折线和折线上的拐点 */ - _buildPointList : function (pointList) { + _buildPointList: function (pointList) { var series = this.series; var serie; var seriesPL; @@ -323,7 +323,7 @@ define(function (require) { /** * 生成折线图上的拐点图形 */ - _getSymbol : function (seriesIndex, dataIndex, name, x, y) { + _getSymbol: function (seriesIndex, dataIndex, name, x, y) { var series = this.series; var serie = series[seriesIndex]; var data = serie.data[dataIndex]; @@ -355,24 +355,24 @@ define(function (require) { return itemShape; }, - _getLargeSymbol : function (pointList, nColor) { + _getLargeSymbol: function (pointList, nColor) { return new SymbolShape({ - zlevel : this._zlevelBase, - _main : true, + zlevel: this._zlevelBase, + _main: true, hoverable: false, - style : { - pointList : pointList, - color : nColor, - strokeColor : nColor + style: { + pointList: pointList, + color: nColor, + strokeColor: nColor }, - highlightStyle : { - pointList : [] + highlightStyle: { + pointList: [ ] } }); }, // 位置转换 - getMarkCoord : function (seriesIndex, mpData) { + getMarkCoord: function (seriesIndex, mpData) { var serie = this.series[seriesIndex]; var xMarkMap = this.xMarkMap[seriesIndex]; var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex); @@ -380,12 +380,11 @@ define(function (require) { var pos; if (mpData.type - && (mpData.type == 'max' || mpData.type == 'min' || mpData.type == 'average') + && (mpData.type === 'max' || mpData.type === 'min' || mpData.type === 'average') ) { // 特殊值内置支持 // 默认取纵值 - var valueIndex = typeof mpData.valueIndex != 'undefined' - ? mpData.valueIndex : 1; + var valueIndex = mpData.valueIndex != null ? mpData.valueIndex : 1; pos = [ xMarkMap[mpData.type + 'X' + valueIndex], xMarkMap[mpData.type + 'Y' + valueIndex], @@ -411,7 +410,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; @@ -426,7 +425,7 @@ define(function (require) { * @param {Object} param * @param {Object} status */ - ondataRange : function (param, status) { + ondataRange: function (param, status) { if (this.component.dataRange) { this.refresh(); status.needRefresh = true; diff --git a/src/component/axis.js b/src/component/axis.js index 1c69fca22cd8b74016bd92af51d40b01b6527846..99b54a00cdc6922c5259c43b8d88dad6dbd71251 100644 --- a/src/component/axis.js +++ b/src/component/axis.js @@ -43,56 +43,56 @@ define(function (require) { } Axis.prototype = { - type : ecConfig.COMPONENT_TYPE_AXIS, - axisBase : { + type: ecConfig.COMPONENT_TYPE_AXIS, + axisBase: { // 轴线 - _buildAxisLine : function () { + _buildAxisLine: function () { var lineWidth = this.option.axisLine.lineStyle.width; var halfLineWidth = lineWidth / 2; var axShape = { - _axisShape : 'axisLine', - zlevel : this._zlevelBase + 1, - hoverable : false + _axisShape: 'axisLine', + zlevel: this._zlevelBase + 1, + hoverable: false }; switch (this.option.position) { case 'left' : axShape.style = { - xStart : this.grid.getX() - halfLineWidth, - yStart : this.grid.getYend(), - xEnd : this.grid.getX() - halfLineWidth, - yEnd : this.grid.getY(), - lineCap : 'round' + xStart: this.grid.getX() - halfLineWidth, + yStart: this.grid.getYend(), + xEnd: this.grid.getX() - halfLineWidth, + yEnd: this.grid.getY(), + lineCap: 'round' }; break; case 'right' : axShape.style = { - xStart : this.grid.getXend() + halfLineWidth, - yStart : this.grid.getYend(), - xEnd : this.grid.getXend() + halfLineWidth, - yEnd : this.grid.getY(), - lineCap : 'round' + xStart: this.grid.getXend() + halfLineWidth, + yStart: this.grid.getYend(), + xEnd: this.grid.getXend() + halfLineWidth, + yEnd: this.grid.getY(), + lineCap: 'round' }; break; case 'bottom' : axShape.style = { - xStart : this.grid.getX(), - yStart : this.grid.getYend() + halfLineWidth, - xEnd : this.grid.getXend(), - yEnd : this.grid.getYend() + halfLineWidth, - lineCap : 'round' + xStart: this.grid.getX(), + yStart: this.grid.getYend() + halfLineWidth, + xEnd: this.grid.getXend(), + yEnd: this.grid.getYend() + halfLineWidth, + lineCap: 'round' }; break; case 'top' : axShape.style = { - xStart : this.grid.getX(), - yStart : this.grid.getY() - halfLineWidth, - xEnd : this.grid.getXend(), - yEnd : this.grid.getY() - halfLineWidth, - lineCap : 'round' + xStart: this.grid.getX(), + yStart: this.grid.getY() - halfLineWidth, + xEnd: this.grid.getXend(), + yEnd: this.grid.getY() - halfLineWidth, + lineCap: 'round' }; break; } - if (this.option.name !== '') { + if (this.option.name !== '') { // 别帮我代码规范 axShape.style.text = this.option.name; axShape.style.textPosition = this.option.nameLocation; axShape.style.textFont = this.getFont(this.option.nameTextStyle); @@ -129,7 +129,7 @@ define(function (require) { this.shapeList.push(axShape); }, - _axisLabelClickable : function(clickable, axShape) { + _axisLabelClickable: function(clickable, axShape) { if (clickable) { ecData.pack( axShape, undefined, -1, undefined, -1, axShape.style.text @@ -137,7 +137,7 @@ define(function (require) { axShape.hoverable = true; axShape.clickable = true; axShape.highlightStyle = { - color : zrColor.lift(axShape.style.color, 1), + color: zrColor.lift(axShape.style.color, 1), brushType: 'fill' }; return axShape; @@ -147,15 +147,15 @@ define(function (require) { } }, - refixAxisShape : function(zeroX, zeroY) { + refixAxisShape: function(zeroX, zeroY) { if (!this.option.axisLine.onZero) { return; } var tickLength; - if (this.isHorizontal() && typeof zeroY != 'undefined') { + if (this.isHorizontal() && zeroY != null) { // 横向布局调整纵向y for (var i = 0, l = this.shapeList.length; i < l; i++) { - if (this.shapeList[i]._axisShape == 'axisLine') { + if (this.shapeList[i]._axisShape === 'axisLine') { this.shapeList[i].style.yStart = this.shapeList[i].style.yEnd = this.subPixelOptimize( @@ -163,7 +163,7 @@ define(function (require) { ); this.zr.modShape(this.shapeList[i].id); } - else if (this.shapeList[i]._axisShape == 'axisTick') { + else if (this.shapeList[i]._axisShape === 'axisTick') { tickLength = this.shapeList[i].style.yEnd - this.shapeList[i].style.yStart; this.shapeList[i].style.yStart = zeroY - tickLength; @@ -172,10 +172,10 @@ define(function (require) { } } } - if (!this.isHorizontal() && typeof zeroX != 'undefined') { + if (!this.isHorizontal() && zeroX != null) { // 纵向布局调整横向x for (var i = 0, l = this.shapeList.length; i < l; i++) { - if (this.shapeList[i]._axisShape == 'axisLine') { + if (this.shapeList[i]._axisShape === 'axisLine') { this.shapeList[i].style.xStart = this.shapeList[i].style.xEnd = this.subPixelOptimize( @@ -183,7 +183,7 @@ define(function (require) { ); this.zr.modShape(this.shapeList[i].id); } - else if (this.shapeList[i]._axisShape == 'axisTick') { + else if (this.shapeList[i]._axisShape === 'axisTick') { tickLength = this.shapeList[i].style.xEnd - this.shapeList[i].style.xStart; this.shapeList[i].style.xStart = zeroX; @@ -194,22 +194,22 @@ define(function (require) { } }, - getPosition : function () { + getPosition: function () { return this.option.position; }, - isHorizontal : function() { - return this.option.position == 'bottom' || this.option.position == 'top'; + isHorizontal: function() { + return this.option.position === 'bottom' || this.option.position === 'top'; } }, /** * 参数修正&默认值赋值,重载基类方法 * @param {Object} opt 参数 */ - reformOption : function (opt) { + reformOption: function (opt) { // 不写或传了个空数值默认为数值轴 if (!opt || (opt instanceof Array && opt.length === 0)) { - opt = [{type : ecConfig.COMPONENT_TYPE_AXIS_VALUE}]; + opt = [ { type: ecConfig.COMPONENT_TYPE_AXIS_VALUE } ]; } else if (!(opt instanceof Array)){ opt = [opt]; @@ -220,7 +220,7 @@ define(function (require) { opt = [opt[0],opt[1]]; } - if (this.axisType == 'xAxis') { + if (this.axisType === 'xAxis') { // 横轴位置默认配置 if (!opt[0].position // 没配置或配置错 || (opt[0].position != 'bottom' @@ -229,8 +229,7 @@ define(function (require) { opt[0].position = 'bottom'; } if (opt.length > 1) { - opt[1].position = opt[0].position == 'bottom' - ? 'top' : 'bottom'; + opt[1].position = opt[0].position === 'bottom' ? 'top' : 'bottom'; } for (var i = 0, l = opt.length; i < l; i++) { @@ -251,8 +250,7 @@ define(function (require) { } if (opt.length > 1) { - opt[1].position = opt[0].position == 'left' - ? 'right' : 'left'; + opt[1].position = opt[0].position === 'left' ? 'right' : 'left'; } for (var i = 0, l = opt.length; i < l; i++) { @@ -270,11 +268,11 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { var axisOption; if (newOption) { this.option = newOption; - if (this.axisType == 'xAxis') { + if (this.axisType === 'xAxis') { this.option.xAxis = this.reformOption(newOption.xAxis); axisOption = this.option.xAxis; } @@ -304,7 +302,7 @@ define(function (require) { ); } else if (axisOption && axisOption[i]) { - this._axisList[i] = axisOption[i].type == 'category' + this._axisList[i] = axisOption[i].type === 'category' ? new CategoryAxis( this.ecTheme, this.messageCenter, this.zr, axisOption[i], this.myChart, this.axisBase @@ -323,11 +321,11 @@ define(function (require) { * 根据值换算位置 * @param {number} idx 坐标轴索引0~1 */ - getAxis : function (idx) { + getAxis: function (idx) { return this._axisList[idx]; }, - clear : function () { + clear: function () { for (var i = 0, l = this._axisList.length; i < l; i++) { this._axisList[i].dispose && this._axisList[i].dispose(); } diff --git a/src/component/base.js b/src/component/base.js index 1dc8fa091d16152c9ab5c3688c35385167a2ea68..e665d21d6bfcb58fd2fbfeadf5705d496c0089f5 100644 --- a/src/component/base.js +++ b/src/component/base.js @@ -55,12 +55,12 @@ define(function (require) { * 基类方法 */ Base.prototype = { - canvasSupported : require('zrender/tool/env').canvasSupported, + canvasSupported: require('zrender/tool/env').canvasSupported, /** * 获取zlevel基数配置 * @param {Object} contentType */ - getZlevelBase : function (contentType) { + getZlevelBase: function (contentType) { contentType = contentType || this.type + ''; switch (contentType) { @@ -112,7 +112,7 @@ define(function (require) { * * @return {Object} 修正后的参数 */ - reformOption : function (opt) { + reformOption: function (opt) { return zrUtil.merge( opt || {}, zrUtil.clone(this.ecTheme[this.type] || {}) @@ -122,7 +122,7 @@ define(function (require) { /** * css类属性数组补全,如padding,margin等~ */ - reformCssArray : function (p) { + reformCssArray: function (p) { if (p instanceof Array) { switch (p.length + '') { case '4': @@ -142,9 +142,9 @@ define(function (require) { } }, - getShapeById : function(id) { + getShapeById: function(id) { for (var i = 0, l = this.shapeList.length; i < l; i++) { - if (this.shapeList[i].id == id) { + if (this.shapeList[i].id === id) { return this.shapeList[i]; } } @@ -154,7 +154,7 @@ define(function (require) { /** * 获取自定义和默认配置合并后的字体设置 */ - getFont : function (textStyle) { + getFont: function (textStyle) { var finalTextStyle = zrUtil.merge( zrUtil.clone(textStyle) || {}, this.ecTheme.textStyle @@ -165,16 +165,16 @@ define(function (require) { + finalTextStyle.fontFamily; }, - getItemStyleColor : function (itemColor, seriesIndex, dataIndex, data) { - return typeof itemColor == 'function' + getItemStyleColor: function (itemColor, seriesIndex, dataIndex, data) { + return typeof itemColor === 'function' ? itemColor(seriesIndex, dataIndex, data) : itemColor; }, // 亚像素优化 - subPixelOptimize : function (position, lineWidth) { - if (lineWidth % 2 == 1) { - //position += position == Math.ceil(position) ? 0.5 : 0; + subPixelOptimize: function (position, lineWidth) { + if (lineWidth % 2 === 1) { + //position += position === Math.ceil(position) ? 0.5 : 0; position = Math.floor(position) + 0.5; } else { @@ -184,7 +184,7 @@ define(function (require) { }, - resize : function () { + resize: function () { this.refresh && this.refresh(); this.clearEffectShape && this.clearEffectShape(true); var self = this; @@ -205,20 +205,20 @@ define(function (require) { /** * 释放后实例不可用 */ - dispose : function () { + dispose: function () { this.clear(); this.shapeList = null; this.effectList = null; }, - query : ecQuery.query, - deepQuery : ecQuery.deepQuery, - deepMerge : ecQuery.deepMerge, + query: ecQuery.query, + deepQuery: ecQuery.deepQuery, + deepMerge: ecQuery.deepMerge, - parsePercent : number.parsePercent, - parseCenter : number.parseCenter, - parseRadius : number.parseRadius, - numAddCommas : number.addCommas + parsePercent: number.parsePercent, + parseCenter: number.parseCenter, + parseRadius: number.parseRadius, + numAddCommas: number.addCommas }; return Base; diff --git a/src/component/grid.js b/src/component/grid.js index decd20c335b48cbab7fb78ad934978f147c4e469..7af8b257a08c2d61678718de18b7432fae98ca1c 100644 --- a/src/component/grid.js +++ b/src/component/grid.js @@ -31,45 +31,52 @@ define(function (require) { } Grid.prototype = { - type : ecConfig.COMPONENT_TYPE_GRID, + type: ecConfig.COMPONENT_TYPE_GRID, - getX : function () { + getX: function () { return this._x; }, - getY : function () { + getY: function () { return this._y; }, - getWidth : function () { + getWidth: function () { return this._width; }, - getHeight : function () { + getHeight: function () { return this._height; }, - getXend : function () { + getXend: function () { return this._x + this._width; }, - getYend : function () { + getYend: function () { return this._y + this._height; }, - getArea : function () { + getArea: function () { return { - x : this._x, - y : this._y, - width : this._width, - height : this._height + x: this._x, + y: this._y, + width: this._width, + height: this._height }; }, + getBbox: function() { + return [ + [ this._x, this._y ], + [ this.getXend(), this.getYend() ] + ]; + }, + /** * 实在找不到合适的地方做了,各种粗暴的写法~ -_- */ - refixAxisShape : function(component) { + refixAxisShape: function(component) { var zeroX; var zeroY; var axisList = component.xAxis._axisList.concat(component.yAxis._axisList); @@ -94,7 +101,7 @@ define(function (require) { } }, - refresh : function (newOption) { + refresh: function (newOption) { if (newOption || this._zrWidth != this.zr.getWidth() || this._zrHeight != this.zr.getHeight() @@ -132,18 +139,18 @@ define(function (require) { this._y = this.subPixelOptimize(this._y, gridOption.borderWidth); this.shapeList.push(new RectangleShape({ - zlevel : this._zlevelBase, - hoverable : false, - style : { - x : this._x, - y : this._y, - width : this._width, - height : this._height, - brushType : gridOption.borderWidth > 0 ? 'both' : 'fill', - color : gridOption.backgroundColor, + zlevel: this._zlevelBase, + hoverable: false, + style: { + x: this._x, + y: this._y, + width: this._width, + height: this._height, + brushType: gridOption.borderWidth > 0 ? 'both' : 'fill', + color: gridOption.backgroundColor, strokeColor: gridOption.borderColor, - lineWidth : gridOption.borderWidth - // type : this.option.splitArea.areaStyle.type, + lineWidth: gridOption.borderWidth + // type: this.option.splitArea.areaStyle.type, } })); this.zr.addShape(this.shapeList[0]); diff --git a/src/component/legend.js b/src/component/legend.js index 224b9ad2a1661676c198caabb0d5294fdf5b2be0..f81aee67c36075429bf37e5b858aaee589268698 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); }, diff --git a/src/component/roamController.js b/src/component/roamController.js index ee67a5d0fc9afe5f382e97162b3cd690dd6fe8e5..54a71a55f62bcc329a6c64afb7b5c6f14ae0c7f8 100644 --- a/src/component/roamController.js +++ b/src/component/roamController.js @@ -140,7 +140,7 @@ define(function (require) { var r = Math.min(width / 2 - 5, height) / 2; var x = this._itemGroupLocation.x - + (text == 'scaleDown' ? (width - r) : r); + + (text === 'scaleDown' ? (width - r) : r); var y = this._itemGroupLocation.y + this._itemGroupLocation.height - r; var scaleShape = { @@ -150,7 +150,7 @@ define(function (require) { y: y, r: r, color: this.rcOption.handlerColor, - text: text == 'scaleDown' ? '-' : '+', + text: text === 'scaleDown' ? '-' : '+', textX: x, textY: y - 2, textAlign: 'center', @@ -291,7 +291,7 @@ define(function (require) { this._dispatchEvent(params.event, params.target._roamType); }, - _dispatchEvent : function(event, roamType){ + _dispatchEvent: function(event, roamType){ this.messageCenter.dispatch( ecConfig.EVENT.ROAMCONTROLLER, event, diff --git a/src/component/timeline.js b/src/component/timeline.js index d6b5e42c80abf3c893821ede2cc9204c14197c5e..6153fe17f531fccf989105cad8cf967864715d01 100644 --- a/src/component/timeline.js +++ b/src/component/timeline.js @@ -49,9 +49,9 @@ define(function (require) { null, { currentIndex: self.currentIndex, - data : typeof timelineOption.data[self.currentIndex].name != 'undefined' - ? timelineOption.data[self.currentIndex].name - : timelineOption.data[self.currentIndex] + data: timelineOption.data[self.currentIndex].name != null + ? timelineOption.data[self.currentIndex].name + : timelineOption.data[self.currentIndex] }, self.myChart ); @@ -114,8 +114,8 @@ define(function (require) { } Timeline.prototype = { - type : ecConfig.COMPONENT_TYPE_TIMELINE, - _buildShape : function () { + type: ecConfig.COMPONENT_TYPE_TIMELINE, + _buildShape: function () { // 位置参数,通过计算所得x, y, width, height this._location = this._getLocation(); this._buildBackground(); @@ -139,7 +139,7 @@ define(function (require) { /** * 根据选项计算实体的位置坐标 */ - _getLocation : function () { + _getLocation: function () { var timelineOption = this.timelineOption; var padding = timelineOption.padding; @@ -148,7 +148,7 @@ define(function (require) { var x = this.parsePercent(timelineOption.x, zrWidth); var x2 = this.parsePercent(timelineOption.x2, zrWidth); var width; - if (typeof timelineOption.width == 'undefined') { + if (timelineOption.width == null) { width = zrWidth - x - x2; x2 = zrWidth - x2; } @@ -161,7 +161,7 @@ define(function (require) { var height = this.parsePercent(timelineOption.height, zrHeight); var y; var y2; - if (typeof timelineOption.y != 'undefined') { + if (timelineOption.y != null) { y = this.parsePercent(timelineOption.y, zrHeight); y2 = y + height; } @@ -171,27 +171,27 @@ define(function (require) { } return { - x : x + padding[3], - y : y + padding[0], - x2 : x2 - padding[1], - y2 : y2 - padding[2], - width : width - padding[1] - padding[3], - height : height - padding[0] - padding[2] + x: x + padding[3], + y: y + padding[0], + x2: x2 - padding[1], + y2: y2 - padding[2], + width: width - padding[1] - padding[3], + height: height - padding[0] - padding[2] }; }, - _getReformedLabel : function (idx) { + _getReformedLabel: function (idx) { var timelineOption = this.timelineOption; - var data = typeof timelineOption.data[idx].name != 'undefined' + var data = timelineOption.data[idx].name != null ? timelineOption.data[idx].name : timelineOption.data[idx]; var formatter = timelineOption.data[idx].formatter || timelineOption.label.formatter; if (formatter) { - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { data = formatter.call(this.myChart, data); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { data = formatter.replace('{value}', data); } } @@ -201,11 +201,11 @@ define(function (require) { /** * 计算标签显示挑选间隔 */ - _getInterval : function () { + _getInterval: function () { var chainPoint = this._chainPoint; var timelineOption = this.timelineOption; var interval = timelineOption.label.interval; - if (interval == 'auto') { + if (interval === 'auto') { // 麻烦的自适应计算 var fontSize = timelineOption.label.textStyle.fontSize; var data = timelineOption.data; @@ -264,7 +264,7 @@ define(function (require) { /** * 根据选项计算时间链条上的坐标及symbolList */ - _getChainPoint : function() { + _getChainPoint: function() { var timelineOption = this.timelineOption; var symbol = timelineOption.symbol.toLowerCase(); var symbolSize = timelineOption.symbolSize; @@ -279,14 +279,14 @@ define(function (require) { var len = data.length; function _getName(i) { - return typeof data[i].name != 'undefined' ? data[i].name : data[i]; + return data[i].name != null ? data[i].name : data[i]; } var xList = []; if (len > 1) { var boundaryGap = width / len; boundaryGap = boundaryGap > 50 ? 50 : (boundaryGap < 20 ? 5 : boundaryGap); width -= boundaryGap * 2; - if (timelineOption.type == 'number') { + if (timelineOption.type === 'number') { // 平均分布 for (var i = 0; i < len; i++) { xList.push(x + boundaryGap + width / (len - 1) * i); @@ -345,30 +345,30 @@ define(function (require) { } list.push({ - x : x, - n : n, - isEmpty : isEmpty, - symbol : curSymbol, - symbolSize : data[i].symbolSize || symbolSize, - color : data[i].color, - borderColor : data[i].borderColor, - borderWidth : data[i].borderWidth, - name : this._getReformedLabel(i), - textColor : dataTextStyle.color, - textAlign : textAlign, - textBaseline : dataTextStyle.baseline || 'middle', - textX : x, - textY : y - (rotate ? 5 : 0), - textFont : data[i].textStyle ? this.getFont(dataTextStyle) : textFont, - rotation : rotation, - showLabel : false + x: x, + n: n, + isEmpty: isEmpty, + symbol: curSymbol, + symbolSize: data[i].symbolSize || symbolSize, + color: data[i].color, + borderColor: data[i].borderColor, + borderWidth: data[i].borderWidth, + name: this._getReformedLabel(i), + textColor: dataTextStyle.color, + textAlign: textAlign, + textBaseline: dataTextStyle.baseline || 'middle', + textX: x, + textY: y - (rotate ? 5 : 0), + textFont: data[i].textStyle ? this.getFont(dataTextStyle) : textFont, + rotation: rotation, + showLabel: false }); } return list; }, - _buildBackground : function () { + _buildBackground: function () { var timelineOption = this.timelineOption; var padding = timelineOption.padding; var width = this._location.width; @@ -379,35 +379,34 @@ define(function (require) { ) { // 背景 this.shapeList.push(new RectangleShape({ - zlevel : this._zlevelBase, + zlevel: this._zlevelBase, hoverable :false, - style : { - x : this._location.x - padding[3], - y : this._location.y - padding[0], - width : width + padding[1] + padding[3], - height : height + padding[0] + padding[2], - brushType : timelineOption.borderWidth === 0 - ? 'fill' : 'both', - color : timelineOption.backgroundColor, - strokeColor : timelineOption.borderColor, - lineWidth : timelineOption.borderWidth + style: { + x: this._location.x - padding[3], + y: this._location.y - padding[0], + width: width + padding[1] + padding[3], + height: height + padding[0] + padding[2], + brushType: timelineOption.borderWidth === 0 ? 'fill' : 'both', + color: timelineOption.backgroundColor, + strokeColor: timelineOption.borderColor, + lineWidth: timelineOption.borderWidth } })); } }, - _buildControl : function() { + _buildControl: function() { var self = this; var timelineOption = this.timelineOption; var lineStyle = timelineOption.lineStyle; var controlStyle = timelineOption.controlStyle; - if (timelineOption.controlPosition == 'none') { + if (timelineOption.controlPosition === 'none') { return; } var iconSize = 15; var iconGap = 5; var x; - if (timelineOption.controlPosition == 'left') { + if (timelineOption.controlPosition === 'left') { x = this._location.x; this._location.x += (iconSize + iconGap) * 3; } @@ -418,25 +417,25 @@ define(function (require) { var y = this._location.y; var iconStyle = { - zlevel : this._zlevelBase + 1, - style : { - iconType : 'timelineControl', - symbol : 'last', - x : x, - y : y, - width : iconSize, - height : iconSize, - brushType : 'stroke', + zlevel: this._zlevelBase + 1, + style: { + iconType: 'timelineControl', + symbol: 'last', + x: x, + y: y, + width: iconSize, + height: iconSize, + brushType: 'stroke', color: controlStyle.normal.color, - strokeColor : controlStyle.normal.color, - lineWidth : lineStyle.width + strokeColor: controlStyle.normal.color, + lineWidth: lineStyle.width }, - highlightStyle : { - color : controlStyle.emphasis.color, - strokeColor : controlStyle.emphasis.color, - lineWidth : lineStyle.width + 1 + highlightStyle: { + color: controlStyle.emphasis.color, + strokeColor: controlStyle.emphasis.color, + lineWidth: lineStyle.width + 1 }, - clickable : true + clickable: true }; this._ctrLastShape = new IconShape(iconStyle); @@ -452,7 +451,7 @@ define(function (require) { this._ctrPlayShape.style.status = this.timelineOption.autoPlay ? 'playing' : 'stop'; this._ctrPlayShape.style.x = x; this._ctrPlayShape.onclick = function() { - if (self._ctrPlayShape.style.status == 'stop') { + if (self._ctrPlayShape.style.status === 'stop') { self.play(); } else { @@ -474,25 +473,25 @@ define(function (require) { /** * 构建时间轴 */ - _buildChain : function () { + _buildChain: function () { var timelineOption = this.timelineOption; var lineStyle = timelineOption.lineStyle; this._timelineShae = { - zlevel : this._zlevelBase, - style : { - x : this._location.x, - y : this.subPixelOptimize(this._location.y, lineStyle.width), - width : this._location.x2 - this._location.x, - height : this._location.height, - chainPoint : this._chainPoint, + zlevel: this._zlevelBase, + style: { + x: this._location.x, + y: this.subPixelOptimize(this._location.y, lineStyle.width), + width: this._location.x2 - this._location.x, + height: this._location.height, + chainPoint: this._chainPoint, brushType:'both', - strokeColor : lineStyle.color, - lineWidth : lineStyle.width, - lineType : lineStyle.type + strokeColor: lineStyle.color, + lineWidth: lineStyle.width, + lineType: lineStyle.type }, - hoverable : false, - clickable : true, - onclick : this._onclick + hoverable: false, + clickable: true, + onclick: this._onclick }; this._timelineShae = new ChainShape(this._timelineShae); @@ -502,32 +501,32 @@ define(function (require) { /** * 构建拖拽手柄 */ - _buildHandle : function () { + _buildHandle: function () { var curPoint = this._chainPoint[this.currentIndex]; var symbolSize = curPoint.symbolSize + 1; symbolSize = symbolSize < 5 ? 5 : symbolSize; this._handleShape = { - zlevel : this._zlevelBase + 1, - hoverable : false, - draggable : true, - style : { - iconType : 'diamond', - n : curPoint.n, - x : curPoint.x - symbolSize, - y : this._location.y + this._location.height / 4 - symbolSize, - width : symbolSize * 2, - height : symbolSize * 2, + zlevel: this._zlevelBase + 1, + hoverable: false, + draggable: true, + style: { + iconType: 'diamond', + n: curPoint.n, + x: curPoint.x - symbolSize, + y: this._location.y + this._location.height / 4 - symbolSize, + width: symbolSize * 2, + height: symbolSize * 2, brushType:'both', - textPosition : 'specific', - textX : curPoint.x, - textY : this._location.y - this._location.height / 4, - textAlign : 'center', - textBaseline : 'middle' + textPosition: 'specific', + textX: curPoint.x, + textY: this._location.y - this._location.height / 4, + textAlign: 'center', + textBaseline: 'middle' }, - highlightStyle : {}, - ondrift : this._ondrift, - ondragend : this._ondragend + highlightStyle: {}, + ondrift: this._ondrift, + ondragend: this._ondragend }; this._handleShape = new IconShape(this._handleShape); @@ -537,7 +536,7 @@ define(function (require) { /** * 同步拖拽图形样式 */ - _syncHandleShape : function() { + _syncHandleShape: function() { if (!this.timelineOption.show) { return; } @@ -550,7 +549,7 @@ define(function (require) { this._handleShape.style.textFont = curPoint.textFont; this._handleShape.style.n = curPoint.n; - if (cpStyle.symbol == 'auto') { + if (cpStyle.symbol === 'auto') { this._handleShape.style.iconType = curPoint.symbol != 'none' ? curPoint.symbol : 'diamond'; } @@ -563,7 +562,7 @@ define(function (require) { } var symbolSize; - if (cpStyle.symbolSize == 'auto') { + if (cpStyle.symbolSize === 'auto') { symbolSize = curPoint.symbolSize + 2; symbolSize = symbolSize < 5 ? 5 : symbolSize; } @@ -571,20 +570,20 @@ define(function (require) { symbolSize = cpStyle.symbolSize - 0; } - this._handleShape.style.color = cpStyle.color == 'auto' + this._handleShape.style.color = cpStyle.color === 'auto' ? (curPoint.color ? curPoint.color : timelineOption.controlStyle.emphasis.color ) : cpStyle.color; - this._handleShape.style.textColor = cpStyle.label.textStyle.color == 'auto' + this._handleShape.style.textColor = cpStyle.label.textStyle.color === 'auto' ? this._handleShape.style.color : cpStyle.label.textStyle.color; this._handleShape.highlightStyle.strokeColor = - this._handleShape.style.strokeColor = cpStyle.borderColor == 'auto' + this._handleShape.style.strokeColor = cpStyle.borderColor === 'auto' ? (curPoint.borderColor ? curPoint.borderColor : '#fff') : cpStyle.borderColor; - this._handleShape.style.lineWidth = cpStyle.borderWidth == 'auto' + this._handleShape.style.lineWidth = cpStyle.borderWidth === 'auto' ? (curPoint.borderWidth ? curPoint.borderWidth : 0) : (cpStyle.borderWidth - 0); this._handleShape.highlightStyle.lineWidth = this._handleShape.style.lineWidth + 1; @@ -593,17 +592,17 @@ define(function (require) { .when( 500, { - x : curPoint.x - symbolSize, - textX : curPoint.x, - y : this._location.y + this._location.height / 4 - symbolSize, - width : symbolSize * 2, - height : symbolSize * 2 + x: curPoint.x - symbolSize, + textX: curPoint.x, + y: this._location.y + this._location.height / 4 - symbolSize, + width: symbolSize * 2, + height: symbolSize * 2 } ) .start('ExponentialOut'); }, - _findChainIndex : function(x) { + _findChainIndex: function(x) { var chainPoint = this._chainPoint; var len = chainPoint.length; if (x <= chainPoint[0].x) { @@ -621,10 +620,10 @@ define(function (require) { } }, - __onclick : function(param) { + __onclick: function(param) { var x = zrEvent.getX(param.event); var newIndex = this._findChainIndex(x); - if (newIndex == this.currentIndex) { + if (newIndex === this.currentIndex) { return true; // 啥事都没发生 } @@ -637,7 +636,7 @@ define(function (require) { /** * 拖拽范围控制 */ - __ondrift : function (shape, dx) { + __ondrift: function (shape, dx) { this.timelineOption.autoPlay && this.stop(); // 停止自动播放 var chainPoint = this._chainPoint; @@ -666,7 +665,7 @@ define(function (require) { shape.style.text = curPoint.name; //console.log(newIndex) - if (newIndex == this.currentIndex) { + if (newIndex === this.currentIndex) { return true; // 啥事都没发生 } @@ -682,14 +681,14 @@ define(function (require) { return true; }, - __ondragend : function () { + __ondragend: function () { this.isDragend = true; }, /** * 数据项被拖拽出去 */ - ondragend : function (param, status) { + ondragend: function (param, status) { if (!this.isDragend || !param.target) { // 没有在当前实例上发生拖拽行为则直接返回 return; @@ -706,7 +705,7 @@ define(function (require) { return; }, - last : function () { + last: function () { this.timelineOption.autoPlay && this.stop(); // 停止自动播放 this.currentIndex -= 1; @@ -718,7 +717,7 @@ define(function (require) { return this.currentIndex; }, - next : function () { + next: function () { this.timelineOption.autoPlay && this.stop(); // 停止自动播放 this.currentIndex += 1; @@ -730,7 +729,7 @@ define(function (require) { return this.currentIndex; }, - play : function (targetIndex, autoPlay) { + play: function (targetIndex, autoPlay) { if (this._ctrPlayShape && this._ctrPlayShape.style.status != 'playing') { this._ctrPlayShape.style.status = 'playing'; this.zr.modShape(this._ctrPlayShape.id); @@ -738,15 +737,13 @@ define(function (require) { } - this.timelineOption.autoPlay = typeof autoPlay != 'undefined' - ? autoPlay : true; + this.timelineOption.autoPlay = autoPlay != null ? autoPlay : true; if (!this.timelineOption.autoPlay) { clearTimeout(this.playTicket); } - this.currentIndex = typeof targetIndex != 'undefined' - ? targetIndex : (this.currentIndex + 1); + this.currentIndex = targetIndex != null ? targetIndex : (this.currentIndex + 1); if (this.currentIndex >= this.timelineOption.data.length) { this.currentIndex = 0; } @@ -755,7 +752,7 @@ define(function (require) { return this.currentIndex; }, - stop : function () { + stop: function () { if (this._ctrPlayShape && this._ctrPlayShape.style.status != 'stop') { this._ctrPlayShape.style.status = 'stop'; this.zr.modShape(this._ctrPlayShape.id); @@ -772,7 +769,7 @@ define(function (require) { /** * 避免dataZoom带来两次refresh,不设refresh接口,resize重复一下buildshape逻辑 */ - resize : function () { + resize: function () { if (this.timelineOption.show) { this.clear(); this._buildShape(); @@ -780,7 +777,7 @@ define(function (require) { } }, - setTheme : function(needRefresh) { + setTheme: function(needRefresh) { this.timelineOption = this.reformOption(zrUtil.clone(this.option.timeline)); // 补全padding属性 this.timelineOption.padding = this.reformCssArray( @@ -806,7 +803,7 @@ define(function (require) { /** * 释放后实例不可用,重载基类方法 */ - dispose : function () { + dispose: function () { this.clear(); this.shapeList = null; @@ -823,7 +820,7 @@ define(function (require) { var symbol = style.symbol; - if (symbol == 'last') { + if (symbol === 'last') { ctx.moveTo(x + width - 2, y + height / 3); ctx.lineTo(x + width - 2, y); ctx.lineTo(x + 2, y + height / 2); @@ -832,7 +829,7 @@ define(function (require) { ctx.moveTo(x, y); ctx.lineTo(x, y); } - else if (symbol == 'next') { + else if (symbol === 'next') { ctx.moveTo(x + 2, y + height / 3); ctx.lineTo(x + 2, y); ctx.lineTo(x + width - 2, y + height / 2); @@ -841,15 +838,15 @@ define(function (require) { ctx.moveTo(x, y); ctx.lineTo(x, y); } - else if (symbol == 'play') { - if (style.status == 'stop') { + else if (symbol === 'play') { + if (style.status === 'stop') { ctx.moveTo(x + 2, y); ctx.lineTo(x + width - 2, y + height / 2); ctx.lineTo(x + 2, y + height); ctx.lineTo(x + 2, y); } else { - var delta = style.brushType == 'both' ? 2 : 3; + var delta = style.brushType === 'both' ? 2 : 3; ctx.rect(x + 2, y, delta, height); ctx.rect(x + width - delta - 2, y, delta, height); } @@ -861,11 +858,11 @@ define(function (require) { ); symbol = IconShape.prototype.iconLibrary.image; symbol(ctx, { - x : x, - y : y, - width : width, - height : height, - image : imageLocation + x: x, + y: y, + width: width, + height: height, + image: imageLocation }); } } diff --git a/src/component/title.js b/src/component/title.js index e13e60704fe58eee4cc41ccf787c3c57054d05a7..7ba7d6784a9830973b2aff21b960a94e99953834 100644 --- a/src/component/title.js +++ b/src/component/title.js @@ -30,8 +30,8 @@ define(function (require) { } Title.prototype = { - type : ecConfig.COMPONENT_TYPE_TITLE, - _buildShape : function () { + type: ecConfig.COMPONENT_TYPE_TITLE, + _buildShape: function () { // 标题元素组的位置参数,通过计算所得x, y, width, height this._itemGroupLocation = this._getItemGroupLocation(); @@ -46,7 +46,7 @@ define(function (require) { /** * 构建所有标题元素 */ - _buildItem : function () { + _buildItem: function () { var text = this.titleOption.text; var link = this.titleOption.link; var target = this.titleOption.target; @@ -62,16 +62,16 @@ define(function (require) { var height = this._itemGroupLocation.height; var textShape = { - zlevel : this._zlevelBase, - style : { - y : y, - color : this.titleOption.textStyle.color, + zlevel: this._zlevelBase, + style: { + y: y, + color: this.titleOption.textStyle.color, text: text, textFont: font, textBaseline: 'top' }, highlightStyle: { - color : zrColor.lift(this.titleOption.textStyle.color, 1), + color: zrColor.lift(this.titleOption.textStyle.color, 1), brushType: 'fill' }, hoverable: false @@ -90,16 +90,16 @@ define(function (require) { } var subtextShape = { - zlevel : this._zlevelBase, - style : { - y : y + height, - color : this.titleOption.subtextStyle.color, + zlevel: this._zlevelBase, + style: { + y: y + height, + color: this.titleOption.subtextStyle.color, text: subtext, textFont: subfont, textBaseline: 'bottom' }, highlightStyle: { - color : zrColor.lift(this.titleOption.subtextStyle.color, 1), + color: zrColor.lift(this.titleOption.subtextStyle.color, 1), brushType: 'fill' }, hoverable: false @@ -149,25 +149,24 @@ define(function (require) { subtext !== '' && this.shapeList.push(new TextShape(subtextShape)); }, - _buildBackground : function () { + _buildBackground: function () { var pTop = this.titleOption.padding[0]; var pRight = this.titleOption.padding[1]; var pBottom = this.titleOption.padding[2]; var pLeft = this.titleOption.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.titleOption.borderWidth === 0 - ? 'fill' : 'both', - color : this.titleOption.backgroundColor, - strokeColor : this.titleOption.borderColor, - lineWidth : this.titleOption.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.titleOption.borderWidth === 0 ? 'fill' : 'both', + color: this.titleOption.backgroundColor, + strokeColor: this.titleOption.borderColor, + lineWidth: this.titleOption.borderWidth } })); }, @@ -175,7 +174,7 @@ define(function (require) { /** * 根据选项计算标题实体的位置坐标 */ - _getItemGroupLocation : function () { + _getItemGroupLocation: function () { var text = this.titleOption.text; var subtext = this.titleOption.subtext; var font = this.getFont(this.titleOption.textStyle); @@ -235,17 +234,17 @@ define(function (require) { } return { - x : x, - y : y, - width : totalWidth, - height : totalHeight + x: x, + y: y, + width: totalWidth, + height: totalHeight }; }, /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this.option = newOption; diff --git a/src/component/toolbox.js b/src/component/toolbox.js index 7b6c7d50aebbbd93e08e24722714c94665c462aa..2702f7571dab1c13b6fe4572b1f2833b5287c04c 100644 --- a/src/component/toolbox.js +++ b/src/component/toolbox.js @@ -104,8 +104,8 @@ define(function (require) { } Toolbox.prototype = { - type : ecConfig.COMPONENT_TYPE_TOOLBOX, - _buildShape : function () { + type: ecConfig.COMPONENT_TYPE_TOOLBOX, + _buildShape: function () { this._iconList = []; var toolboxOption = this.option.toolbox; this._enableColor = toolboxOption.effectiveColor; @@ -116,28 +116,28 @@ define(function (require) { if (feature[key].show) { switch (key) { case 'mark' : - iconName.push({key : key, name : 'mark'}); - iconName.push({key : key, name : 'markUndo'}); - iconName.push({key : key, name : 'markClear'}); + iconName.push({ key: key, name: 'mark' }); + iconName.push({ key: key, name: 'markUndo' }); + iconName.push({ key: key, name: 'markClear' }); break; case 'magicType' : for (var i = 0, l = feature[key].type.length; i < l; i++) { feature[key].title[feature[key].type[i] + 'Chart'] = feature[key].title[feature[key].type[i]]; - iconName.push({key : key, name : feature[key].type[i] + 'Chart'}); + iconName.push({ key: key, name: feature[key].type[i] + 'Chart' }); } break; case 'dataZoom' : - iconName.push({key : key, name : 'dataZoom'}); - iconName.push({key : key, name : 'dataZoomReset'}); + iconName.push({ key: key, name: 'dataZoom' }); + iconName.push({ key: key, name: 'dataZoomReset' }); break; case 'saveAsImage' : if (this.canvasSupported) { - iconName.push({key : key, name : 'saveAsImage'}); + iconName.push({ key: key, name: 'saveAsImage' }); } break; default : - iconName.push({key : key, name : key}); + iconName.push({ key: key, name: key }); break; } } @@ -178,7 +178,7 @@ define(function (require) { /** * 构建所有图例元素 */ - _buildItem : function () { + _buildItem: function () { var toolboxOption = this.option.toolbox; var iconLength = this._iconList.length; var lastX = this._itemGroupLocation.x; @@ -194,7 +194,7 @@ define(function (require) { var textPosition; var textAlign; var textBaseline; - if (toolboxOption.orient == 'horizontal') { + if (toolboxOption.orient === 'horizontal') { textPosition = this._itemGroupLocation.y / this.zr.getHeight() < 0.5 ? 'bottom' : 'top'; textAlign = this._itemGroupLocation.x / this.zr.getWidth() < 0.5 @@ -218,31 +218,31 @@ define(function (require) { for (var i = 0; i < iconLength; i++) { // 图形 itemShape = { - type : 'icon', - zlevel : this._zlevelBase, - style : { - x : lastX, - y : lastY, - width : itemSize, - height : itemSize, - iconType : this._iconList[i], - lineWidth : 1, - strokeColor : this._featureColor[this._iconList[i]] - || color[i % color.length], + type: 'icon', + zlevel: this._zlevelBase, + style: { + x: lastX, + y: lastY, + width: itemSize, + height: itemSize, + iconType: this._iconList[i], + lineWidth: 1, + strokeColor: this._featureColor[this._iconList[i]] + || color[i % color.length], brushType: 'stroke' }, - highlightStyle : { - lineWidth : 1, - text : toolboxOption.showTitle - ? this._featureTitle[this._iconList[i]] - : undefined, - textFont : textFont, - textPosition : textPosition, - strokeColor : this._featureColor[this._iconList[i]] - || color[i % color.length] + highlightStyle: { + lineWidth: 1, + text: toolboxOption.showTitle + ? this._featureTitle[this._iconList[i]] + : undefined, + textFont: textFont, + textPosition: textPosition, + strokeColor: this._featureColor[this._iconList[i]] + || color[i % color.length] }, - hoverable : true, - clickable : true + hoverable: true, + clickable: true }; if (this._featureIcon[this._iconList[i]]) { @@ -254,23 +254,23 @@ define(function (require) { itemShape.type = 'image'; } - if (toolboxOption.orient == 'horizontal') { + if (toolboxOption.orient === 'horizontal') { // 修正左对齐第一个或右对齐最后一个 - if (i === 0 && textAlign == 'left') { + if (i === 0 && textAlign === 'left') { itemShape.highlightStyle.textPosition = 'specific'; itemShape.highlightStyle.textAlign = textAlign; itemShape.highlightStyle.textBaseline = textBaseline; itemShape.highlightStyle.textX = lastX; - itemShape.highlightStyle.textY = textBaseline == 'top' + itemShape.highlightStyle.textY = textBaseline === 'top' ? lastY + itemSize + 10 : lastY - 10; } - if (i == iconLength - 1 && textAlign == 'right') { + if (i === iconLength - 1 && textAlign === 'right') { itemShape.highlightStyle.textPosition = 'specific'; itemShape.highlightStyle.textAlign = textAlign; itemShape.highlightStyle.textBaseline = textBaseline; itemShape.highlightStyle.textX = lastX + itemSize; - itemShape.highlightStyle.textY = textBaseline == 'top' + itemShape.highlightStyle.textY = textBaseline === 'top' ? lastY + itemSize + 10 : lastY - 10; } @@ -323,16 +323,16 @@ define(function (require) { break; } - if (itemShape.type == 'icon') { + if (itemShape.type === 'icon') { itemShape = new IconShape(itemShape); } - else if (itemShape.type == 'image') { + else if (itemShape.type === 'image') { itemShape = new ImageShape(itemShape); } this.shapeList.push(itemShape); this._iconShapeMap[this._iconList[i]] = itemShape; - if (toolboxOption.orient == 'horizontal') { + if (toolboxOption.orient === 'horizontal') { lastX += itemSize + itemGap; } else { @@ -341,7 +341,7 @@ define(function (require) { } }, - _buildBackground : function () { + _buildBackground: function () { var toolboxOption = this.option.toolbox; var pTop = toolboxOption.padding[0]; var pRight = toolboxOption.padding[1]; @@ -349,18 +349,17 @@ define(function (require) { var pLeft = toolboxOption.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 : toolboxOption.borderWidth === 0 - ? 'fill' : 'both', - color : toolboxOption.backgroundColor, - strokeColor : toolboxOption.borderColor, - lineWidth : toolboxOption.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: toolboxOption.borderWidth === 0 ? 'fill' : 'both', + color: toolboxOption.backgroundColor, + strokeColor: toolboxOption.borderColor, + lineWidth: toolboxOption.borderWidth } })); }, @@ -368,7 +367,7 @@ define(function (require) { /** * 根据选项计算图例实体的位置坐标 */ - _getItemGroupLocation : function () { + _getItemGroupLocation: function () { var toolboxOption = this.option.toolbox; var iconLength = this._iconList.length; var itemGap = toolboxOption.itemGap; @@ -376,7 +375,7 @@ define(function (require) { var totalWidth = 0; var totalHeight = 0; - if (toolboxOption.orient == 'horizontal') { + if (toolboxOption.orient === 'horizontal') { // 水平布局,计算总宽度,别忘减去最后一个的itemGap totalWidth = (itemSize + itemGap) * iconLength - itemGap; totalHeight = itemSize; @@ -430,14 +429,14 @@ define(function (require) { } return { - x : x, - y : y, - width : totalWidth, - height : totalHeight + x: x, + y: y, + width: totalWidth, + height: totalHeight }; }, - __onmousemove : function (param) { + __onmousemove: function (param) { if (this._marking) { this._markShape.style.xEnd = zrEvent.getX(param.event); this._markShape.style.yEnd = zrEvent.getY(param.event); @@ -458,7 +457,7 @@ define(function (require) { } }, - __onmousedown : function (param) { + __onmousedown: function (param) { if (param.target) { return; } @@ -467,19 +466,19 @@ define(function (require) { var y = zrEvent.getY(param.event); var zoomOption = this.option.dataZoom || {}; this._zoomShape = new RectangleShape({ - zlevel : this._zlevelBase, - style : { - x : x, - y : y, - width : 1, - height : 1, + zlevel: this._zlevelBase, + style: { + x: x, + y: y, + width: 1, + height: 1, brushType: 'both' }, - highlightStyle : { - lineWidth : 2, + highlightStyle: { + lineWidth: 2, color: zoomOption.fillerColor || ecConfig.dataZoom.fillerColor, - strokeColor : zoomOption.handleColor + strokeColor: zoomOption.handleColor || ecConfig.dataZoom.handleColor, brushType: 'both' } @@ -488,7 +487,7 @@ define(function (require) { return true; // 阻塞全局事件 }, - __onmouseup : function (/*param*/) { + __onmouseup: function (/*param*/) { if (!this._zoomShape || Math.abs(this._zoomShape.style.width) < 10 || Math.abs(this._zoomShape.style.height) < 10 @@ -502,10 +501,10 @@ define(function (require) { var zoom = this.component.dataZoom.rectZoom(this._zoomShape.style); if (zoom) { this._zoomQueue.push({ - start : zoom.start, - end : zoom.end, - start2 : zoom.start2, - end2 : zoom.end2 + start: zoom.start, + end: zoom.end, + start2: zoom.start2, + end2: zoom.end2 }); this._iconEnable(this._iconShapeMap['dataZoomReset']); this.zr.refresh(); @@ -514,7 +513,7 @@ define(function (require) { return true; // 阻塞全局事件 }, - __onclick : function (param) { + __onclick: function (param) { if (param.target) { return; } @@ -531,31 +530,31 @@ define(function (require) { var x = zrEvent.getX(param.event); var y = zrEvent.getY(param.event); this._markShape = new LineShape({ - zlevel : this._zlevelBase, - style : { - xStart : x, - yStart : y, - xEnd : x, - yEnd : y, - lineWidth : this.query( - this.option, - 'toolbox.feature.mark.lineStyle.width' - ), - strokeColor : this.query( - this.option, - 'toolbox.feature.mark.lineStyle.color' - ), - lineType : this.query( + zlevel: this._zlevelBase, + style: { + xStart: x, + yStart: y, + xEnd: x, + yEnd: y, + lineWidth: this.query( this.option, - 'toolbox.feature.mark.lineStyle.type' - ) + 'toolbox.feature.mark.lineStyle.width' + ), + strokeColor: this.query( + this.option, + 'toolbox.feature.mark.lineStyle.color' + ), + lineType: this.query( + this.option, + 'toolbox.feature.mark.lineStyle.type' + ) } }); this.zr.addHoverShape(this._markShape); } }, - __onMark : function (param) { + __onMark: function (param) { var target = param.target; if (this._marking || this._markStart) { // 取消 @@ -579,7 +578,7 @@ define(function (require) { return true; // 阻塞全局事件 }, - __onMarkUndo : function () { + __onMarkUndo: function () { if (this._marking) { this._marking = false; } else { @@ -589,7 +588,7 @@ define(function (require) { this.zr.delShape(target.id); this.zr.refresh(); this._markShapeList.pop(); - if (len == 1) { + if (len === 1) { this._iconDisable(this._iconShapeMap['markUndo']); this._iconDisable(this._iconShapeMap['markClear']); } @@ -598,7 +597,7 @@ define(function (require) { return true; }, - __onMarkClear : function () { + __onMarkClear: function () { if (this._marking) { this._marking = false; } @@ -614,7 +613,7 @@ define(function (require) { return true; }, - __onDataZoom : function (param) { + __onDataZoom: function (param) { var target = param.target; if (this._zooming || this._zoomStart) { // 取消 @@ -642,7 +641,7 @@ define(function (require) { return true; // 阻塞全局事件 }, - __onDataZoomReset : function () { + __onDataZoomReset: function () { if (this._zooming) { this._zooming = false; } @@ -662,7 +661,7 @@ define(function (require) { return true; }, - _resetMark : function () { + _resetMark: function () { this._marking = false; if (this._markStart) { this._markStart = false; @@ -685,7 +684,7 @@ define(function (require) { } }, - _resetZoom : function () { + _resetZoom: function () { this._zooming = false; if (this._zoomStart) { this._zoomStart = false; @@ -709,61 +708,61 @@ define(function (require) { } }, - _iconDisable : function (target) { + _iconDisable: function (target) { if (target.type != 'image') { this.zr.modShape(target.id, { - hoverable : false, - clickable : false, - style : { - strokeColor : this._disableColor + hoverable: false, + clickable: false, + style: { + strokeColor: this._disableColor } }); } else { this.zr.modShape(target.id, { - hoverable : false, - clickable : false, - style : { - opacity : 0.3 + hoverable: false, + clickable: false, + style: { + opacity: 0.3 } }); } }, - _iconEnable : function (target) { + _iconEnable: function (target) { if (target.type != 'image') { this.zr.modShape(target.id, { - hoverable : true, - clickable : true, - style : { - strokeColor : target.highlightStyle.strokeColor + hoverable: true, + clickable: true, + style: { + strokeColor: target.highlightStyle.strokeColor } }); } else { this.zr.modShape(target.id, { - hoverable : true, - clickable : true, - style : { - opacity : 0.8 + hoverable: true, + clickable: true, + style: { + opacity: 0.8 } }); } }, - __onDataView : function () { + __onDataView: function () { this._dataView.show(this.option); return true; }, - __onRestore : function (){ + __onRestore: function (){ this._resetMark(); this._resetZoom(); this.messageCenter.dispatch(ecConfig.EVENT.RESTORE, null, null, this.myChart); return true; }, - __onSaveAsImage : function () { + __onSaveAsImage: function () { var saveOption = this.option.toolbox.feature.saveAsImage; var imgType = saveOption.type || 'png'; if (imgType != 'png' && imgType != 'jpeg') { @@ -775,7 +774,7 @@ define(function (require) { image = this.zr.toDataURL( 'image/' + imgType, this.option.backgroundColor - && this.option.backgroundColor.replace(' ','') == 'rgba(0,0,0,0)' + && this.option.backgroundColor.replace(' ','') === 'rgba(0,0,0,0)' ? '#fff' : this.option.backgroundColor ); } @@ -847,30 +846,30 @@ define(function (require) { return; }, - __onMagicType : function (param) { + __onMagicType: function (param) { this._resetMark(); var itemName = param.target._name; if (!this._magicType[itemName]) { // 启用 this._magicType[itemName] = true; // 折柱互斥 - if (itemName == ecConfig.CHART_TYPE_LINE) { + if (itemName === ecConfig.CHART_TYPE_LINE) { this._magicType[ecConfig.CHART_TYPE_BAR] = false; } - else if (itemName == ecConfig.CHART_TYPE_BAR) { + else if (itemName === ecConfig.CHART_TYPE_BAR) { this._magicType[ecConfig.CHART_TYPE_LINE] = false; } // 堆积平铺互斥 - if (itemName == _MAGICTYPE_STACK) { + if (itemName === _MAGICTYPE_STACK) { this._magicType[_MAGICTYPE_TILED] = false; } - else if (itemName == _MAGICTYPE_TILED) { + else if (itemName === _MAGICTYPE_TILED) { this._magicType[_MAGICTYPE_STACK] = false; } this.messageCenter.dispatch( ecConfig.EVENT.MAGIC_TYPE_CHANGED, param.event, - {magicType : this._magicType}, + { magicType: this._magicType }, this.myChart ); } @@ -878,20 +877,20 @@ define(function (require) { return true; }, - setMagicType : function (magicType) { + setMagicType: function (magicType) { this._resetMark(); this._magicType = magicType; !this._isSilence && this.messageCenter.dispatch( ecConfig.EVENT.MAGIC_TYPE_CHANGED, null, - {magicType : this._magicType}, + { magicType: this._magicType }, this.myChart ); }, // 用户自定义扩展toolbox方法 - __onCustomHandler : function (param) { + __onCustomHandler: function (param) { var target = param.target.style.iconType; var featureHandler = this.option.toolbox.feature[target].onclick; if (typeof featureHandler === 'function') { @@ -900,7 +899,7 @@ define(function (require) { }, // 重置备份还原状态等 - reset : function (newOption, isRestore) { + reset: function (newOption, isRestore) { isRestore && this.clear(); if (this.query(newOption, 'toolbox.show') @@ -922,15 +921,15 @@ define(function (require) { axis = newOption.xAxis instanceof Array ? newOption.xAxis[newOption.series[len].xAxisIndex || 0] : newOption.xAxis; - if (axis && (axis.type || 'category') == 'category') { - axis.__boundaryGap = typeof axis.boundaryGap != 'undefined' + if (axis && (axis.type || 'category') === 'category') { + axis.__boundaryGap = axis.boundaryGap != null ? axis.boundaryGap : true; } axis = newOption.yAxis instanceof Array ? newOption.yAxis[newOption.series[len].yAxisIndex || 0] : newOption.yAxis; - if (axis && axis.type == 'category') { - axis.__boundaryGap = typeof axis.boundaryGap != 'undefined' + if (axis && axis.type === 'category') { + axis.__boundaryGap = axis.boundaryGap != null ? axis.boundaryGap : true; } newOption.series[len].__type = oriType; @@ -958,11 +957,11 @@ define(function (require) { // 框选缩放 var zoomOption = newOption.dataZoom; if (zoomOption && zoomOption.show) { - var start = typeof zoomOption.start != 'undefined' + var start = zoomOption.start != null && zoomOption.start >= 0 && zoomOption.start <= 100 ? zoomOption.start : 0; - var end = typeof zoomOption.end != 'undefined' + var end = zoomOption.end != null && zoomOption.end >= 0 && zoomOption.end <= 100 ? zoomOption.end : 100; @@ -973,10 +972,10 @@ define(function (require) { start = start - end; } this._zoomQueue = [{ - start : start, - end : end, - start2 : 0, - end2 : 100 + start: start, + end: end, + start2: 0, + end2: 100 }]; } else { @@ -984,7 +983,7 @@ define(function (require) { } }, - getMagicOption : function (){ + getMagicOption: function (){ var axis; if (this._magicType[ecConfig.CHART_TYPE_LINE] || this._magicType[ecConfig.CHART_TYPE_BAR] @@ -1004,13 +1003,13 @@ define(function (require) { axis = this.option.xAxis instanceof Array ? this.option.xAxis[this.option.series[i].xAxisIndex || 0] : this.option.xAxis; - if (axis && (axis.type || 'category') == 'category') { + if (axis && (axis.type || 'category') === 'category') { axis.boundaryGap = boundaryGap ? true : axis.__boundaryGap; } axis = this.option.yAxis instanceof Array ? this.option.yAxis[this.option.series[i].yAxisIndex || 0] : this.option.yAxis; - if (axis && axis.type == 'category') { + if (axis && axis.type === 'category') { axis.boundaryGap = boundaryGap ? true : axis.__boundaryGap; } } @@ -1034,11 +1033,11 @@ define(function (require) { return this.option; }, - silence : function (s) { + silence: function (s) { this._isSilence = s; }, - resize : function () { + resize: function () { this._resetMark(); this.clear(); if (this.option && this.option.toolbox && this.option.toolbox.show) { @@ -1049,13 +1048,13 @@ define(function (require) { } }, - hideDataView : function () { + hideDataView: function () { if (this._dataView) { this._dataView.hide(); } }, - clear : function(notMark) { + clear: function(notMark) { if (this.zr) { this.zr.delShape(this.shapeList); this.shapeList = []; @@ -1070,7 +1069,7 @@ define(function (require) { /** * 释放后实例不可用 */ - dispose : function () { + dispose: function () { if (this._dataView) { this._dataView.dispose(); this._dataView = null; @@ -1083,7 +1082,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { if (newOption) { this._resetMark(); this._resetZoom(); diff --git a/src/component/tooltip.js b/src/component/tooltip.js index 57f189eb038cea6b47e2e46af4e161b4a2fc544f..4e539ef7c082db211b55b9586d8f613ff57b96d4 100644 --- a/src/component/tooltip.js +++ b/src/component/tooltip.js @@ -72,7 +72,7 @@ define(function (require) { this._axisLineShape && this.zr.delShape(this._axisLineShape.id); this._axisLineShape = new LineShape({ zlevel: this._zlevelBase, - invisible : true, + invisible: true, hoverable: false }); this.shapeList.push(this._axisLineShape); @@ -81,7 +81,7 @@ define(function (require) { this._axisShadowShape && this.zr.delShape(this._axisShadowShape.id); this._axisShadowShape = new LineShape({ zlevel: 1, // grid上,chart下 - invisible : true, + invisible: true, hoverable: false }); this.shapeList.push(this._axisShadowShape); @@ -90,7 +90,7 @@ define(function (require) { this._axisCrossShape && this.zr.delShape(this._axisCrossShape.id); this._axisCrossShape = new CrossShape({ zlevel: this._zlevelBase, - invisible : true, + invisible: true, hoverable: false }); this.shapeList.push(this._axisCrossShape); @@ -101,16 +101,13 @@ define(function (require) { } Tooltip.prototype = { - type : ecConfig.COMPONENT_TYPE_TOOLTIP, + type: ecConfig.COMPONENT_TYPE_TOOLTIP, // 通用样式 - _gCssText : 'position:absolute;' - + 'display:block;' - + 'border-style:solid;' - + 'white-space:nowrap;', + _gCssText: 'position:absolute;display:block;border-style:solid;white-space:nowrap;', /** * 根据配置设置dom样式 */ - _style : function (opt) { + _style: function (opt) { if (!opt) { return ''; } @@ -143,15 +140,15 @@ define(function (require) { cssText.push('background-Color:' + opt.backgroundColor); } - if (typeof opt.borderWidth != 'undefined') { + if (opt.borderWidth != null) { cssText.push('border-width:' + opt.borderWidth + 'px'); } - if (typeof opt.borderColor != 'undefined') { + if (opt.borderColor != null) { cssText.push('border-color:' + opt.borderColor); } - if (typeof opt.borderRadius != 'undefined') { + if (opt.borderRadius != null) { cssText.push( 'border-radius:' + opt.borderRadius + 'px' ); @@ -194,7 +191,7 @@ define(function (require) { var padding = opt.padding; - if (typeof padding != 'undefined') { + if (padding != null) { padding = this.reformCssArray(padding); cssText.push( 'padding:' + padding[0] + 'px ' @@ -209,7 +206,7 @@ define(function (require) { return cssText; }, - __hide : function () { + __hide: function () { if (this._tDom) { this._tDom.style.display = 'none'; } @@ -238,11 +235,11 @@ define(function (require) { this.showing = false; }, - _show : function (position, x, y, specialCssText) { + _show: function (position, x, y, specialCssText) { var domHeight = this._tDom.offsetHeight; var domWidth = this._tDom.offsetWidth; if (position) { - if (typeof position == 'function') { + if (typeof position === 'function') { position = position([x, y]); } if (position instanceof Array) { @@ -275,7 +272,7 @@ define(function (require) { this.showing = true; }, - __refixed : function () { + __refixed: function () { if (this._tDom) { var cssText = ''; var domHeight = this._tDom.offsetHeight; @@ -292,7 +289,7 @@ define(function (require) { } }, - __tryShow : function () { + __tryShow: function () { var needShow; var trigger; if (!this._curTarget) { @@ -301,7 +298,7 @@ define(function (require) { } else { // 数据项事件 - if (this._curTarget._type == 'island' && this.option.tooltip.show) { + if (this._curTarget._type === 'island' && this.option.tooltip.show) { this._showItemTrigger(); return; } @@ -311,10 +308,7 @@ define(function (require) { [data, serie, this.option], 'tooltip.show' ); - if (typeof serie == 'undefined' - || typeof data == 'undefined' - || needShow === false - ) { + if (serie == null || data == null || !needShow) { // 不响应tooltip的数据对象延时隐藏 clearTimeout(this._hidingTicket); clearTimeout(this._showingTicket); @@ -326,7 +320,7 @@ define(function (require) { 'tooltip.trigger' ); - trigger == 'axis' + trigger === 'axis' ? this._showAxisTrigger( serie.xAxisIndex, serie.yAxisIndex, ecData.get(this._curTarget, 'dataIndex') @@ -339,7 +333,7 @@ define(function (require) { /** * 直角系 */ - _findAxisTrigger : function () { + _findAxisTrigger: function () { if (!this.component.xAxis || !this.component.yAxis) { this._hidingTicket = setTimeout(this._hide, this._hideDelay); return; @@ -349,15 +343,12 @@ define(function (require) { var yAxisIndex; for (var i = 0, l = series.length; i < l; i++) { // 找到第一个axis触发tooltip的系列 - if (this.deepQuery( - [series[i], this.option], 'tooltip.trigger' - ) == 'axis' - ) { + if (this.deepQuery([series[i], this.option], 'tooltip.trigger') === 'axis') { xAxisIndex = series[i].xAxisIndex || 0; yAxisIndex = series[i].yAxisIndex || 0; if (this.component.xAxis.getAxis(xAxisIndex) && this.component.xAxis.getAxis(xAxisIndex).type - == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { // 横轴为类目轴 this._showAxisTrigger(xAxisIndex, yAxisIndex, @@ -369,7 +360,7 @@ define(function (require) { } else if (this.component.yAxis.getAxis(yAxisIndex) && this.component.yAxis.getAxis(yAxisIndex).type - == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { // 纵轴为类目轴 this._showAxisTrigger(xAxisIndex, yAxisIndex, @@ -386,7 +377,7 @@ define(function (require) { } } } - if (this.option.tooltip.axisPointer.type == 'cross') { + if (this.option.tooltip.axisPointer.type === 'cross') { this._showAxisTrigger(-1, -1, -1); } }, @@ -394,7 +385,7 @@ define(function (require) { /** * 极坐标 */ - _findPolarTrigger : function () { + _findPolarTrigger: function () { if (!this.component.polar) { return false; } @@ -420,11 +411,11 @@ define(function (require) { /** * 根据坐标轴事件带的属性获取最近的axisDataIndex */ - _getNearestDataIndex : function (direction, categoryAxis) { + _getNearestDataIndex: function (direction, categoryAxis) { var dataIndex = -1; var x = zrEvent.getX(this._event); var y = zrEvent.getY(this._event); - if (direction == 'x') { + if (direction === 'x') { // 横轴为类目轴 var left; var right; @@ -448,9 +439,7 @@ define(function (require) { } else { // 离右边近,看是否为最后一个 - if (typeof categoryAxis.getNameByIndex(dataIndex) - == 'undefined' - ) { + if (categoryAxis.getNameByIndex(dataIndex) == null) { dataIndex -= 1; } } @@ -481,9 +470,7 @@ define(function (require) { } else { // 离上方边近,看是否为最后一个 - if (typeof categoryAxis.getNameByIndex(dataIndex) - == 'undefined' - ) { + if (categoryAxis.getNameByIndex(dataIndex) == null) { dataIndex -= 1; } } @@ -495,17 +482,17 @@ define(function (require) { /** * 直角系 */ - _showAxisTrigger : function (xAxisIndex, yAxisIndex, dataIndex) { + _showAxisTrigger: function (xAxisIndex, yAxisIndex, dataIndex) { !this._event.connectTrigger && this.messageCenter.dispatch( ecConfig.EVENT.TOOLTIP_IN_GRID, this._event, null, this.myChart ); - if (typeof this.component.xAxis == 'undefined' - || typeof this.component.yAxis == 'undefined' - || typeof xAxisIndex == 'undefined' - || typeof yAxisIndex == 'undefined' + if (this.component.xAxis == null + || this.component.yAxis == null + || xAxisIndex == null + || yAxisIndex == null // || dataIndex < 0 ) { // 不响应tooltip的数据对象延时隐藏 @@ -525,8 +512,8 @@ define(function (require) { var position; var showContent; var specialCssText = ''; - if (this.option.tooltip.trigger == 'axis') { - if (this.option.tooltip.show === false) { + if (this.option.tooltip.trigger === 'axis') { + if (!this.option.tooltip.show) { return; } formatter = this.option.tooltip.formatter; @@ -535,7 +522,7 @@ define(function (require) { if (xAxisIndex != -1 && this.component.xAxis.getAxis(xAxisIndex).type - == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { // 横轴为类目轴,找到所有用这条横轴并且axis触发的系列数据 categoryAxis = this.component.xAxis.getAxis(xAxisIndex); @@ -543,8 +530,8 @@ define(function (require) { if (!this._isSelected(series[i].name)) { continue; } - if (series[i].xAxisIndex == xAxisIndex - && this.deepQuery([series[i], this.option], 'tooltip.trigger') == 'axis' + if (series[i].xAxisIndex === xAxisIndex + && this.deepQuery([series[i], this.option], 'tooltip.trigger') === 'axis' ) { showContent = this.query(series[i], 'tooltip.showContent') || showContent; @@ -563,8 +550,8 @@ define(function (require) { ecConfig.EVENT.TOOLTIP_HOVER, this._event, { - seriesIndex : seriesIndex, - dataIndex : dataIndex + seriesIndex: seriesIndex, + dataIndex: dataIndex }, this.myChart ); @@ -582,7 +569,7 @@ define(function (require) { } else if (yAxisIndex != -1 && this.component.yAxis.getAxis(yAxisIndex).type - == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { // 纵轴为类目轴,找到所有用这条纵轴并且axis触发的系列数据 categoryAxis = this.component.yAxis.getAxis(yAxisIndex); @@ -590,8 +577,8 @@ define(function (require) { if (!this._isSelected(series[i].name)) { continue; } - if (series[i].yAxisIndex == yAxisIndex - && this.deepQuery([series[i], this.option], 'tooltip.trigger') == 'axis' + if (series[i].yAxisIndex === yAxisIndex + && this.deepQuery([series[i], this.option], 'tooltip.trigger') === 'axis' ) { showContent = this.query(series[i], 'tooltip.showContent') || showContent; @@ -609,8 +596,8 @@ define(function (require) { ecConfig.EVENT.TOOLTIP_HOVER, this._event, { - seriesIndex : seriesIndex, - dataIndex : dataIndex + seriesIndex: seriesIndex, + dataIndex: dataIndex }, this.myChart ); @@ -648,12 +635,12 @@ define(function (require) { if (seriesArray.length > 0) { var data; - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { var params = []; for (var i = 0, l = seriesArray.length; i < l; i++) { data = seriesArray[i].data[dataIndex]; - data = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + data = data != null + ? (data.value != null ? data.value : data) : '-'; @@ -669,7 +656,7 @@ define(function (require) { this.myChart, params, this._curTicket, this._setContent ); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { this._curTicket = NaN; formatter = formatter.replace('{a}','{a0}') .replace('{b}','{b0}') @@ -684,8 +671,8 @@ define(function (require) { this._encodeHTML(categoryAxis.getNameByIndex(dataIndex)) ); data = seriesArray[i].data[dataIndex]; - data = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + data = data != null + ? (data.value != null ? data.value : data) : '-'; @@ -708,8 +695,8 @@ define(function (require) { + this._encodeHTML(seriesArray[i].name || '') + ' : '; data = seriesArray[i].data[dataIndex]; - data = typeof data != 'undefined' - ? (typeof data.value != 'undefined' + data = data != null + ? (data.value != null ? data.value : data) : '-'; @@ -719,6 +706,7 @@ define(function (require) { this._tDom.innerHTML = formatter; } + // don't modify, just false, showContent == undefined == true if (showContent === false || !this.option.tooltip.showContent) { // 只用tooltip的行为,不显示主体 return; @@ -737,10 +725,10 @@ define(function (require) { /** * 极坐标 */ - _showPolarTrigger : function (polarIndex, dataIndex) { - if (typeof this.component.polar == 'undefined' - || typeof polarIndex == 'undefined' - || typeof dataIndex == 'undefined' + _showPolarTrigger: function (polarIndex, dataIndex) { + if (this.component.polar == null + || polarIndex == null + || dataIndex == null || dataIndex < 0 ) { return false; @@ -752,8 +740,8 @@ define(function (require) { var position; var showContent; var specialCssText = ''; - if (this.option.tooltip.trigger == 'axis') { - if (this.option.tooltip.show === false) { + if (this.option.tooltip.trigger === 'axis') { + if (!this.option.tooltip.show) { return false; } formatter = this.option.tooltip.formatter; @@ -766,8 +754,8 @@ define(function (require) { if (!this._isSelected(series[i].name)) { continue; } - if (series[i].polarIndex == polarIndex - && this.deepQuery([series[i], this.option], 'tooltip.trigger') == 'axis' + if (series[i].polarIndex === polarIndex + && this.deepQuery([series[i], this.option], 'tooltip.trigger') === 'axis' ) { showContent = this.query(series[i], 'tooltip.showContent') || showContent; @@ -791,14 +779,14 @@ define(function (require) { if (!this._isSelected(data.name)) { continue; } - data = typeof data != 'undefined' + data = data != null ? data : {name:'', value: {dataIndex:'-'}}; params.push([ seriesArray[i].name || '', data.name, - typeof data.value[dataIndex].value != 'undefined' + data.value[dataIndex].value != null ? data.value[dataIndex].value : data.value[dataIndex], indicatorName ]); @@ -807,13 +795,13 @@ define(function (require) { if (params.length <= 0) { return; } - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { this._curTicket = 'axis:' + dataIndex; this._tDom.innerHTML = formatter.call( this.myChart, params, this._curTicket, this._setContent ); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { formatter = formatter.replace('{a}','{a0}') .replace('{b}','{b0}') .replace('{c}','{c0}') @@ -851,6 +839,7 @@ define(function (require) { this._tDom.innerHTML = formatter; } + // don't modify, just false, showContent == undefined == true if (showContent === false || !this.option.tooltip.showContent) { // 只用tooltip的行为,不显示主体 return; @@ -872,7 +861,7 @@ define(function (require) { } }, - _showItemTrigger : function () { + _showItemTrigger: function () { if (!this._curTarget) { return; } @@ -891,12 +880,12 @@ define(function (require) { var html = ''; if (this._curTarget._type != 'island') { // 全局 - if (this.option.tooltip.trigger == 'item') { + if (this.option.tooltip.trigger === 'item') { formatter = this.option.tooltip.formatter; position = this.option.tooltip.position; } // 系列 - if (this.query(serie, 'tooltip.trigger') == 'item') { + if (this.query(serie, 'tooltip.trigger') === 'item') { showContent = this.query(serie, 'tooltip.showContent') || showContent; formatter = this.query(serie, 'tooltip.formatter') @@ -920,7 +909,7 @@ define(function (require) { position = this.deepQuery([data, serie, this.option], 'tooltip.islandPosition'); } - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { this._curTicket = (serie.name || '') + ':' + ecData.get(this._curTarget, 'dataIndex'); @@ -938,7 +927,7 @@ define(function (require) { this._setContent ); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { this._curTicket = NaN; formatter = formatter.replace('{a}','{a0}') .replace('{b}','{b0}') @@ -959,18 +948,14 @@ define(function (require) { } else { this._curTicket = NaN; - if (serie.type == ecConfig.CHART_TYPE_SCATTER) { - this._tDom.innerHTML = (typeof serie.name != 'undefined' - ? (this._encodeHTML(serie.name) + '
') - : '' - ) - + (name === '' ? '' : (this._encodeHTML(name) + ' : ')) - + value - + (typeof special == 'undefined' - ? '' : (' (' + special + ')') - ); + if (serie.type === ecConfig.CHART_TYPE_SCATTER) { + this._tDom.innerHTML = '' + + (serie.name != null ? (this._encodeHTML(serie.name) + '
') : '') + + (name === '' ? '' : (this._encodeHTML(name) + ' : ')) + + value + + (special == null ? '' : (' (' + special + ')')); } - else if (serie.type == ecConfig.CHART_TYPE_RADAR && special) { + else if (serie.type === ecConfig.CHART_TYPE_RADAR && special) { indicator = special; html += this._encodeHTML(name === '' ? (serie.name || '') : name); html += html === '' ? '' : '
'; @@ -980,8 +965,8 @@ define(function (require) { } this._tDom.innerHTML = html; } - else if (serie.type == ecConfig.CHART_TYPE_CHORD) { - if (typeof special2 == 'undefined') { + else if (serie.type === ecConfig.CHART_TYPE_CHORD) { + if (special2 == null) { // 外环上 this._tDom.innerHTML = this._encodeHTML(name) + ' (' + this.numAddCommas(value) + ')'; @@ -990,25 +975,21 @@ define(function (require) { var name1 = this._encodeHTML(name); var name2 = this._encodeHTML(special); // 内部弦上 - this._tDom.innerHTML = (typeof serie.name != 'undefined' - ? (this._encodeHTML(serie.name) + '
') : '' - ) - + name1 + ' -> ' + name2 - + ' (' + this.numAddCommas(value) + ')' - + '
' - + name2 + ' -> ' + name1 - + ' (' + this.numAddCommas(special2) + ')'; + this._tDom.innerHTML = '' + + (serie.name != null ? (this._encodeHTML(serie.name) + '
') : '') + + name1 + ' -> ' + name2 + + ' (' + this.numAddCommas(value) + ')' + + '
' + + name2 + ' -> ' + name1 + + ' (' + this.numAddCommas(special2) + ')'; } } else { - this._tDom.innerHTML = (typeof serie.name != 'undefined' - ? (this._encodeHTML(serie.name) + '
') : '' - ) - + this._encodeHTML(name) + ' : ' - + this.numAddCommas(value) + - (typeof special == 'undefined' - ? '' : (' ('+ this.numAddCommas(special) +')') - ); + this._tDom.innerHTML = '' + + (serie.name != null ? (this._encodeHTML(serie.name) + '
') : '') + + this._encodeHTML(name) + ' : ' + + this.numAddCommas(value) + + (special == null ? '' : (' ('+ this.numAddCommas(special) +')')); } } @@ -1022,6 +1003,7 @@ define(function (require) { this.zr.refresh(); } + // don't modify, just false, showContent == undefined == true if (showContent === false || !this.option.tooltip.showContent) { // 只用tooltip的行为,不显示主体 return; @@ -1045,16 +1027,16 @@ define(function (require) { /** * 设置坐标轴指示器样式 */ - _styleAxisPointer : function (seriesArray, xStart, yStart, xEnd, yEnd, gap, x, y) { + _styleAxisPointer: function (seriesArray, xStart, yStart, xEnd, yEnd, gap, x, y) { if (seriesArray.length > 0) { var queryTarget; var curType; var axisPointer = this.option.tooltip.axisPointer; var pointType = axisPointer.type; var style = { - line : {}, - cross : {}, - shadow : {} + line: { }, + cross: { }, + shadow: { } }; for (var pType in style) { style[pType].color = axisPointer[pType + 'Style'].color; @@ -1064,7 +1046,7 @@ define(function (require) { for (var i = 0, l = seriesArray.length; i < l; i++) { if (this.deepQuery( [seriesArray[i], this.option], 'tooltip.trigger' - ) == 'axis' + ) === 'axis' ) { queryTarget = seriesArray[i]; curType = this.query(queryTarget, 'tooltip.axisPointer.type'); @@ -1086,35 +1068,35 @@ define(function (require) { } } - if (pointType == 'line') { + if (pointType === 'line') { this._axisLineShape.style = { - xStart : xStart, - yStart : yStart, - xEnd : xEnd, - yEnd : yEnd, - strokeColor : style.line.color, - lineWidth : style.line.width, - lineType : style.line.type + xStart: xStart, + yStart: yStart, + xEnd: xEnd, + yEnd: yEnd, + strokeColor: style.line.color, + lineWidth: style.line.width, + lineType: style.line.type }; this._axisLineShape.invisible = false; this.zr.modShape(this._axisLineShape.id); } - else if (pointType == 'cross') { + else if (pointType === 'cross') { this._axisCrossShape.style = { brushType: 'stroke', - rect : this.component.grid.getArea(), - x : x, - y : y, - text : ('( ' + rect: this.component.grid.getArea(), + x: x, + y: y, + text: ('( ' + this.component.xAxis.getAxis(0).getValueFromCoord(x) + ' , ' + this.component.yAxis.getAxis(0).getValueFromCoord(y) + ' )' - ).replace(' , ', ' ').replace(' , ', ' '), - textPosition : 'specific', - strokeColor : style.cross.color, - lineWidth : style.cross.width, - lineType : style.cross.type + ).replace(' , ', ' ').replace(' , ', ' '), + textPosition: 'specific', + strokeColor: style.cross.color, + lineWidth: style.cross.width, + lineType: style.cross.type }; if (this.component.grid.getXend() - x > 100) { // 右侧有空间 this._axisCrossShape.style.textAlign = 'left'; @@ -1135,14 +1117,14 @@ define(function (require) { this._axisCrossShape.invisible = false; this.zr.modShape(this._axisCrossShape.id); } - else if (pointType == 'shadow') { - if (typeof style.shadow.width == 'undefined' - || style.shadow.width == 'auto' + else if (pointType === 'shadow') { + if (style.shadow.width == null + || style.shadow.width === 'auto' || isNaN(style.shadow.width) ) { style.shadow.width = gap; } - if (xStart == xEnd) { + if (xStart === xEnd) { // 纵向 if (Math.abs(this.component.grid.getX() - xStart) < 2) { // 最左边 @@ -1155,7 +1137,7 @@ define(function (require) { xStart = xEnd = xEnd - style.shadow.width / 2; } } - else if (yStart == yEnd) { + else if (yStart === yEnd) { // 横向 if (Math.abs(this.component.grid.getY() - yStart) < 2) { // 最上边 @@ -1169,12 +1151,12 @@ define(function (require) { } } this._axisShadowShape.style = { - xStart : xStart, - yStart : yStart, - xEnd : xEnd, - yEnd : yEnd, - strokeColor : style.shadow.color, - lineWidth : style.shadow.width + xStart: xStart, + yStart: yStart, + xEnd: xEnd, + yEnd: yEnd, + strokeColor: style.shadow.color, + lineWidth: style.shadow.width }; this._axisShadowShape.invisible = false; this.zr.modShape(this._axisShadowShape.id); @@ -1183,7 +1165,7 @@ define(function (require) { } }, - __onmousemove : function (param) { + __onmousemove: function (param) { clearTimeout(this._hidingTicket); clearTimeout(this._showingTicket); var target = param.target; @@ -1232,10 +1214,10 @@ define(function (require) { // 看用这个polar的系列数据是否是axis触发,如果是设置_curTarget为nul var series = this.option.series; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].polarIndex == polarIndex + if (series[i].polarIndex === polarIndex && this.deepQuery( [series[i], this.option], 'tooltip.trigger' - ) == 'axis' + ) === 'axis' ) { this._curTarget = null; break; @@ -1250,7 +1232,7 @@ define(function (require) { /** * zrender事件响应:鼠标离开绘图区域 */ - __onglobalout : function () { + __onglobalout: function () { clearTimeout(this._hidingTicket); clearTimeout(this._showingTicket); this._hidingTicket = setTimeout(this._hide, this._hideDelay); @@ -1259,18 +1241,18 @@ define(function (require) { /** * 异步回调填充内容 */ - __setContent : function (ticket, content) { + __setContent: function (ticket, content) { if (!this._tDom) { return; } - if (ticket == this._curTicket) { + if (ticket === this._curTicket) { this._tDom.innerHTML = content; } setTimeout(this._refixed, 20); }, - ontooltipHover : function (param, tipShape) { + ontooltipHover: function (param, tipShape) { if (!this._lastTipShape // 不存在或者存在但dataIndex发生变化才需要重绘 || (this._lastTipShape && this._lastTipShape.dataIndex != param.dataIndex) ) { @@ -1294,24 +1276,24 @@ define(function (require) { this.zr.addShape(tipShape[i]); } this._lastTipShape = { - dataIndex : param.dataIndex, - tipShape : tipShape + dataIndex: param.dataIndex, + tipShape: tipShape }; } }, - ondragend : function () { + ondragend: function () { this._hide(); }, /** * 图例选择 */ - onlegendSelected : function (param) { + onlegendSelected: function (param) { this._selectedMap = param.selected; }, - _setSelectedMap : function () { + _setSelectedMap: function () { if (this.component.legend) { this._selectedMap = zrUtil.clone(this.component.legend.getSelectedMap()); } @@ -1320,8 +1302,8 @@ define(function (require) { } }, - _isSelected : function (itemName) { - if (typeof this._selectedMap[itemName] != 'undefined') { + _isSelected: function (itemName) { + if (this._selectedMap[itemName] != null) { return this._selectedMap[itemName]; } else { @@ -1335,20 +1317,20 @@ define(function (require) { * {seriesIndex: 0, seriesName:'', dataInex:0} line、bar、scatter、k、radar * {seriesIndex: 0, seriesName:'', name:''} map、pie、chord */ - showTip : function (params) { + showTip: function (params) { if (!params) { return; } var seriesIndex; var series = this.option.series; - if (typeof params.seriesIndex != 'undefined') { + if (params.seriesIndex != null) { seriesIndex = params.seriesIndex; } else { var seriesName = params.seriesName; for (var i = 0, l = series.length; i < l; i++) { - if (series[i].name == seriesName) { + if (series[i].name === seriesName) { seriesIndex = i; break; } @@ -1356,13 +1338,13 @@ define(function (require) { } var serie = series[seriesIndex]; - if (typeof serie == 'undefined') { + if (serie == null) { return; } var chart = this.myChart.chart[serie.type]; var isAxisTrigger = this.deepQuery( [serie, this.option], 'tooltip.trigger' - ) == 'axis'; + ) === 'axis'; if (!chart) { return; @@ -1375,8 +1357,8 @@ define(function (require) { case ecConfig.CHART_TYPE_LINE : case ecConfig.CHART_TYPE_BAR : case ecConfig.CHART_TYPE_K : - if (typeof this.component.xAxis == 'undefined' - || typeof this.component.yAxis == 'undefined' + if (this.component.xAxis == null + || this.component.yAxis == null || serie.data.length <= dataIndex ) { return; @@ -1384,26 +1366,26 @@ define(function (require) { var xAxisIndex = serie.xAxisIndex || 0; var yAxisIndex = serie.yAxisIndex || 0; if (this.component.xAxis.getAxis(xAxisIndex).type - == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY + === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY ) { // 横轴是类目 this._event = { - zrenderX : this.component.xAxis.getAxis(xAxisIndex) - .getCoordByIndex(dataIndex), - zrenderY : this.component.grid.getY() - + (this.component.grid.getYend() - - this.component.grid.getY() - ) / 4 + zrenderX: this.component.xAxis.getAxis(xAxisIndex) + .getCoordByIndex(dataIndex), + zrenderY: this.component.grid.getY() + + (this.component.grid.getYend() + - this.component.grid.getY() + ) / 4 }; } else { // 纵轴是类目 this._event = { - zrenderX : this.component.grid.getX() - + (this.component.grid.getXend() + zrenderX: this.component.grid.getX() + + (this.component.grid.getXend() - this.component.grid.getX() - ) / 4, - zrenderY : this.component.yAxis.getAxis(yAxisIndex) + ) / 4, + zrenderY: this.component.yAxis.getAxis(yAxisIndex) .getCoordByIndex(dataIndex) }; } @@ -1414,7 +1396,7 @@ define(function (require) { ); break; case ecConfig.CHART_TYPE_RADAR : - if (typeof this.component.polar == 'undefined' + if (this.component.polar == null || serie.data[0].value.length <= dataIndex ) { return; @@ -1424,8 +1406,8 @@ define(function (require) { polarIndex, dataIndex, 'max' ); this._event = { - zrenderX : vector[0], - zrenderY : vector[1] + zrenderX: vector[0], + zrenderY: vector[1] }; this._showPolarTrigger( polarIndex, @@ -1446,8 +1428,8 @@ define(function (require) { case ecConfig.CHART_TYPE_SCATTER : var dataIndex = params.dataIndex; for (var i = 0, l = shapeList.length; i < l; i++) { - if (ecData.get(shapeList[i], 'seriesIndex') == seriesIndex - && ecData.get(shapeList[i], 'dataIndex') == dataIndex + if (ecData.get(shapeList[i], 'seriesIndex') === seriesIndex + && ecData.get(shapeList[i], 'dataIndex') === dataIndex ) { this._curTarget = shapeList[i]; x = shapeList[i].style.x; @@ -1460,9 +1442,9 @@ define(function (require) { case ecConfig.CHART_TYPE_RADAR : var dataIndex = params.dataIndex; for (var i = 0, l = shapeList.length; i < l; i++) { - if (shapeList[i].type == 'polygon' - && ecData.get(shapeList[i], 'seriesIndex') == seriesIndex - && ecData.get(shapeList[i], 'dataIndex') == dataIndex + if (shapeList[i].type === 'polygon' + && ecData.get(shapeList[i], 'seriesIndex') === seriesIndex + && ecData.get(shapeList[i], 'dataIndex') === dataIndex ) { this._curTarget = shapeList[i]; var vector = this.component.polar.getCenter( @@ -1477,9 +1459,9 @@ define(function (require) { case ecConfig.CHART_TYPE_PIE : var name = params.name; for (var i = 0, l = shapeList.length; i < l; i++) { - if (shapeList[i].type == 'sector' - && ecData.get(shapeList[i], 'seriesIndex') == seriesIndex - && ecData.get(shapeList[i], 'name') == name + if (shapeList[i].type === 'sector' + && ecData.get(shapeList[i], 'seriesIndex') === seriesIndex + && ecData.get(shapeList[i], 'name') === name ) { this._curTarget = shapeList[i]; var style = this._curTarget.style; @@ -1495,9 +1477,9 @@ define(function (require) { var name = params.name; var mapType = serie.mapType; for (var i = 0, l = shapeList.length; i < l; i++) { - if (shapeList[i].type == 'text' - && shapeList[i]._mapType == mapType - && shapeList[i].style._name == name + if (shapeList[i].type === 'text' + && shapeList[i]._mapType === mapType + && shapeList[i].style._name === name ) { this._curTarget = shapeList[i]; x = this._curTarget.style.x + this._curTarget.position[0]; @@ -1509,8 +1491,8 @@ define(function (require) { case ecConfig.CHART_TYPE_CHORD: var name = params.name; for (var i = 0, l = shapeList.length; i < l; i++) { - if (shapeList[i].type == 'sector' - && ecData.get(shapeList[i], 'name') == name + if (shapeList[i].type === 'sector' + && ecData.get(shapeList[i], 'name') === name ) { this._curTarget = shapeList[i]; var style = this._curTarget.style; @@ -1521,8 +1503,8 @@ define(function (require) { this.zr.trigger( zrConfig.EVENT.MOUSEMOVE, { - zrenderX : x, - zrenderY : y + zrenderX: x, + zrenderY: y } ); return; @@ -1532,8 +1514,8 @@ define(function (require) { case ecConfig.CHART_TYPE_FORCE: var name = params.name; for (var i = 0, l = shapeList.length; i < l; i++) { - if (shapeList[i].type == 'circle' - && ecData.get(shapeList[i], 'name') == name + if (shapeList[i].type === 'circle' + && ecData.get(shapeList[i], 'name') === name ) { this._curTarget = shapeList[i]; x = this._curTarget.position[0]; @@ -1543,10 +1525,10 @@ define(function (require) { } break; } - if (typeof x != 'undefined' && typeof y != 'undefined') { + if (x != null && y != null) { this._event = { - zrenderX : x, - zrenderY : y + zrenderX: x, + zrenderY: y }; this.zr.addHoverShape(this._curTarget); this.zr.refreshHover(); @@ -1558,14 +1540,14 @@ define(function (require) { /** * 关闭,公开接口 */ - hideTip : function () { + hideTip: function () { this._hide(); }, /** * 刷新 */ - refresh : function (newOption) { + refresh: function (newOption) { // this._selectedMap; // this._defaultCssText; // css样式缓存 // this._needAxisTrigger; // 坐标轴触发 @@ -1596,13 +1578,13 @@ define(function (require) { ); this._needAxisTrigger = false; - if (this.option.tooltip.trigger == 'axis') { + if (this.option.tooltip.trigger === 'axis') { this._needAxisTrigger = true; } var series = this.option.series; for (var i = 0, l = series.length; i < l; i++) { - if (this.query(series[i], 'tooltip.trigger') == 'axis') { + if (this.query(series[i], 'tooltip.trigger') === 'axis') { this._needAxisTrigger = true; break; } @@ -1627,7 +1609,7 @@ define(function (require) { /** * 释放后实例不可用,重载基类方法 */ - dispose : function () { + dispose: function () { if (this._lastTipShape && this._lastTipShape.tipShape.length > 0) { this.zr.delShape(this._lastTipShape.tipShape); } @@ -1648,7 +1630,7 @@ define(function (require) { /** * html转码的方法 */ - _encodeHTML : function (source) { + _encodeHTML: function (source) { return String(source) .replace(/&/g, '&') .replace(/ 0 - ? (this.option.position == 'bottom' + ? (this.option.position === 'bottom' ? 'right' : 'left') - : (this.option.position == 'bottom' + : (this.option.position === 'bottom' ? 'left' : 'right'); axShape.rotation = [ rotate * Math.PI / 180, @@ -187,7 +187,7 @@ define(function (require) { // 纵向 var xPosition; var align; - if (this.option.position == 'left') { + if (this.option.position === 'left') { xPosition = this.grid.getX() - margin; align = 'right'; } @@ -198,23 +198,23 @@ define(function (require) { for (var i = 0; i < dataLength; i++) { axShape = { - zlevel : this._zlevelBase, - hoverable : false, - style : { - x : xPosition, - y : this.getCoord(data[i]), - color : typeof textStyle.color == 'function' - ? textStyle.color(data[i]) : textStyle.color, - text : this._valueLabel[i], - textFont : this.getFont(textStyle), - textAlign : textStyle.align || align, - textBaseline : textStyle.baseline - || (i === 0 && this.option.name !== '') - ? 'bottom' - : (i == (dataLength - 1) - && this.option.name !== '') - ? 'top' - : 'middle' + zlevel: this._zlevelBase, + hoverable: false, + style: { + x: xPosition, + y: this.getCoord(data[i]), + color: typeof textStyle.color === 'function' + ? textStyle.color(data[i]) : textStyle.color, + text: this._valueLabel[i], + textFont: this.getFont(textStyle), + textAlign: textStyle.align || align, + textBaseline: textStyle.baseline + || (i === 0 && this.option.name !== '') + ? 'bottom' + : (i === (dataLength - 1) + && this.option.name !== '') + ? 'top' + : 'middle' } }; @@ -232,7 +232,7 @@ define(function (require) { } }, - _buildSplitLine : function () { + _buildSplitLine: function () { var axShape; var data = this._valueList; var dataLength = this._valueList.length; @@ -253,16 +253,16 @@ define(function (require) { // 亚像素优化 x = this.subPixelOptimize(this.getCoord(data[i]), lineWidth); axShape = { - zlevel : this._zlevelBase, - hoverable : false, - style : { - xStart : x, - yStart : sy, - xEnd : x, - yEnd : ey, - strokeColor : color[i % colorLength], - lineType : lineType, - lineWidth : lineWidth + zlevel: this._zlevelBase, + hoverable: false, + style: { + xStart: x, + yStart: sy, + xEnd: x, + yEnd: ey, + strokeColor: color[i % colorLength], + lineType: lineType, + lineWidth: lineWidth } }; this.shapeList.push(new LineShape(axShape)); @@ -279,16 +279,16 @@ define(function (require) { // 亚像素优化 y = this.subPixelOptimize(this.getCoord(data[i]), lineWidth); axShape = { - zlevel : this._zlevelBase, - hoverable : false, - style : { - xStart : sx, - yStart : y, - xEnd : ex, - yEnd : y, - strokeColor : color[i % colorLength], - lineType : lineType, - lineWidth : lineWidth + zlevel: this._zlevelBase, + hoverable: false, + style: { + xStart: sx, + yStart: y, + xEnd: ex, + yEnd: y, + strokeColor: color[i % colorLength], + lineType: lineType, + lineWidth: lineWidth } }; this.shapeList.push(new LineShape(axShape)); @@ -296,22 +296,22 @@ define(function (require) { } }, - _buildSplitArea : function () { + _buildSplitArea: function () { var axShape; var color = this.option.splitArea.areaStyle.color; if (!(color instanceof Array)) { // 非数组一律认为是单一颜色的字符串,单一颜色则用一个背景,颜色错误不负责啊!!! axShape = { - zlevel : this._zlevelBase, - hoverable : false, - style : { - x : this.grid.getX(), - y : this.grid.getY(), - width : this.grid.getWidth(), - height : this.grid.getHeight(), - color : color - // type : this.option.splitArea.areaStyle.type, + zlevel: this._zlevelBase, + hoverable: false, + style: { + x: this.grid.getX(), + y: this.grid.getY(), + width: this.grid.getWidth(), + height: this.grid.getHeight(), + color: color + // type: this.option.splitArea.areaStyle.type, } }; this.shapeList.push(new RectangleShape(axShape)); @@ -334,15 +334,15 @@ define(function (require) { ? this.getCoord(data[i]) : this.grid.getXend(); axShape = { - zlevel : this._zlevelBase, - hoverable : false, - style : { - x : lastX, - y : y, - width : curX - lastX, - height : height, - color : color[i % colorLength] - // type : this.option.splitArea.areaStyle.type, + zlevel: this._zlevelBase, + hoverable: false, + style: { + x: lastX, + y: y, + width: curX - lastX, + height: height, + color: color[i % colorLength] + // type: this.option.splitArea.areaStyle.type, } }; this.shapeList.push(new RectangleShape(axShape)); @@ -361,15 +361,15 @@ define(function (require) { ? this.getCoord(data[i]) : this.grid.getY(); axShape = { - zlevel : this._zlevelBase, - hoverable : false, - style : { - x : x, - y : curY, - width : width, - height : lastYend - curY, - color : color[i % colorLength] - // type : this.option.splitArea.areaStyle.type + zlevel: this._zlevelBase, + hoverable: false, + style: { + x: x, + y: curY, + width: width, + height: lastYend - curY, + color: color[i % colorLength] + // type: this.option.splitArea.areaStyle.type } }; this.shapeList.push(new RectangleShape(axShape)); @@ -382,7 +382,7 @@ define(function (require) { /** * 极值计算 */ - _calculateValue : function () { + _calculateValue: function () { if (isNaN(this.option.min - 0) || isNaN(this.option.max - 0)) { // 有一个没指定都得算 // 数据整形 @@ -421,10 +421,10 @@ define(function (require) { data[key] = data[key] || []; oriData = this.series[i].data; for (var j = 0, k = oriData.length; j < k; j++) { - value = typeof oriData[j].value != 'undefined' + value = oriData[j].value != null ? oriData[j].value : oriData[j]; - if (this.series[i].type == ecConfig.CHART_TYPE_SCATTER) { + if (this.series[i].type === ecConfig.CHART_TYPE_SCATTER) { if (this.option.xAxisIndex != -1) { data[key].push(value[0]); } @@ -432,7 +432,7 @@ define(function (require) { data[key].push(value[1]); } } - else if (this.series[i].type == ecConfig.CHART_TYPE_K) { + else if (this.series[i].type === ecConfig.CHART_TYPE_K) { data[key].push(value[0]); data[key].push(value[1]); data[key].push(value[2]); @@ -452,15 +452,15 @@ define(function (require) { data[key] = data[key] || []; // scale下还需要记录每一个量 oriData = this.series[i].data; for (var j = 0, k = oriData.length; j < k; j++) { - value = typeof oriData[j].value != 'undefined' + value = oriData[j].value != null ? oriData[j].value : oriData[j]; - if (value == '-') { + if (value === '-') { continue; } value = value - 0; if (value >= 0) { - if (typeof data[keyP][j] != 'undefined') { + if (data[keyP][j] != null) { data[keyP][j] += value; } else { @@ -468,7 +468,7 @@ define(function (require) { } } else { - if (typeof data[keyN][j] != 'undefined') { + if (data[keyN][j] != null) { data[keyN][j] += value; } else { @@ -515,7 +515,7 @@ define(function (require) { this._max = isNaN(this.option.max - 0) ? (this._max + Math.abs(gap * this.option.boundaryGap[1])) : (this.option.max - 0); // 指定max忽略boundaryGay[1] - if (this._min == this._max) { + if (this._min === this._max) { if (this._max === 0) { // 修复全0数据 this._max = this.option.power > 0 ? this.option.power : 1; @@ -614,7 +614,7 @@ define(function (require) { (this._min == -2.4 && this._max == 0.6) ? 'success' : 'failed'); * -------- */ - _reformValue : function (scale) { + _reformValue: function (scale) { var splitNumber = this.option.splitNumber; var precision = this.option.precision; var splitGap; @@ -692,7 +692,7 @@ define(function (require) { // 正数部分的分隔数 var partSplitNumber = Math.round(this._max / total * splitNumber); // 修正数据范围极度偏正向,留给负数一个 - partSplitNumber -= (partSplitNumber == splitNumber ? 1 : 0); + partSplitNumber -= (partSplitNumber === splitNumber ? 1 : 0); // 修正数据范围极度偏负向,留给正数一个 partSplitNumber += partSplitNumber === 0 ? 1 : 0; splitGap = (Math.ceil(Math.max( @@ -724,7 +724,7 @@ define(function (require) { this._reformLabelData(); }, - _customerValue : function () { + _customerValue: function () { var splitNumber = this.option.splitNumber; var precision = this.option.precision; var splitGap = (this._max - this._min) / splitNumber; @@ -736,15 +736,15 @@ define(function (require) { this._reformLabelData(); }, - _reformLabelData : function () { + _reformLabelData: function () { this._valueLabel = []; var formatter = this.option.axisLabel.formatter; if (formatter) { for (var i = 0, l = this._valueList.length; i < l; i++) { - if (typeof formatter == 'function') { + if (typeof formatter === 'function') { this._valueLabel.push(formatter.call(this.myChart, this._valueList[i])); } - else if (typeof formatter == 'string') { + else if (typeof formatter === 'string') { this._valueLabel.push( formatter.replace('{value}',this._valueList[i]) ); @@ -760,7 +760,7 @@ define(function (require) { }, - getExtremum : function () { + getExtremum: function () { this._calculateValue(); return { min: this._min, @@ -771,7 +771,7 @@ define(function (require) { /** * 刷新 */ - refresh : function (newOption, newSeries) { + refresh: function (newOption, newSeries) { if (newOption) { this.option = this.reformOption(newOption); // 通用字体设置 @@ -788,7 +788,7 @@ define(function (require) { }, // 根据值换算位置 - getCoord : function (value) { + getCoord: function (value) { value = value < this._min ? this._min : value; value = value > this._max ? this._max : value; @@ -811,14 +811,14 @@ define(function (require) { return result; // Math.floor可能引起一些偏差,但性能会更好 /* 准确更重要 - return (value == this._min || value == this._max) + return (value === this._min || value === this._max) ? result : Math.floor(result); */ }, // 根据值换算绝对大小 - getCoordSize : function (value) { + getCoordSize: function (value) { if (!this.isHorizontal()) { // 纵向 return Math.abs(value / (this._max - this._min) * this.grid.getHeight()); @@ -830,7 +830,7 @@ define(function (require) { }, // 根据位置换算值 - getValueFromCoord : function(coord) { + getValueFromCoord: function(coord) { var result; if (!this.isHorizontal()) { // 纵向 diff --git a/src/config.js b/src/config.js index a5813120037b47aaabb3b37509d43055b932c729..e15fedb16ed390608b6a453dd8ed5ff3cae64ce6 100644 --- a/src/config.js +++ b/src/config.js @@ -17,10 +17,10 @@ define(function() { CHART_TYPE_MAP: 'map', CHART_TYPE_K: 'k', CHART_TYPE_ISLAND: 'island', - CHART_TYPE_FORCE : 'force', - CHART_TYPE_CHORD : 'chord', - CHART_TYPE_GAUGE : 'gauge', - CHART_TYPE_FUNNEL : 'funnel', + CHART_TYPE_FORCE: 'force', + CHART_TYPE_CHORD: 'chord', + CHART_TYPE_GAUGE: 'gauge', + CHART_TYPE_FUNNEL: 'funnel', // 组件类型 COMPONENT_TYPE_TITLE: 'title', @@ -52,11 +52,11 @@ define(function() { // 图表标题 title: { text: '', - //link: null, // 超链接跳转 - //target: null, // 仅支持self | blank + // link: null, // 超链接跳转 + // target: null, // 仅支持self | blank subtext: '', - //sublink: null, // 超链接跳转 - //subtarget: null, // 仅支持self | blank + // sublink: null, // 超链接跳转 + // subtarget: null, // 仅支持self | blank x: 'left', // 水平安放位置,默认为左对齐,可选为: // 'center' ¦ 'left' ¦ 'right' // ¦ {number}(x坐标,单位px) @@ -69,7 +69,7 @@ define(function() { borderWidth: 0, // 标题边框线宽,单位px,默认为0(无边框) padding: 5, // 标题内边距,单位px,默认各方向内边距为5, // 接受数组分别设定上右下左边距,同css - itemGap: 5, // 主副标题纵向间隔,单位px,默认为10, + itemGap: 5, // 主副标题纵向间隔,单位px,默认为10, textStyle: { fontSize: 18, fontWeight: 'bolder', @@ -102,7 +102,7 @@ define(function() { textStyle: { color: '#333' // 图例文字颜色 }, - selectedMode: true // 选择模式,默认开启图例开关 + selectedMode: true // 选择模式,默认开启图例开关 // selected: null, // 配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入 // data: [], // 图例内容(详见legend.data,数组中每一项代表一个item }, @@ -133,15 +133,15 @@ define(function() { calculable: false, // 是否值域漫游,启用后无视splitNumber,线性渐变 realtime: true, color:['#006edd','#e0ffff'],//颜色 - //formatter: null, - //text:['高','低'], // 文本,默认为数值文本 + // formatter: null, + // text:['高','低'], // 文本,默认为数值文本 textStyle: { color: '#333' // 值域文字颜色 } }, toolbox: { - show : false, + show: false, orient: 'horizontal', // 布局方式,默认为水平布局,可选为: // 'horizontal' ¦ 'vertical' x: 'right', // 水平安放位置,默认为全图右对齐,可选为: @@ -150,9 +150,9 @@ define(function() { y: 'top', // 垂直安放位置,默认为全图顶端,可选为: // 'top' ¦ 'bottom' ¦ 'center' // ¦ {number}(y坐标,单位px) - color : ['#1e90ff','#22bb22','#4b0082','#d2691e'], - disableColor : '#ddd', - effectiveColor : 'red', + color: ['#1e90ff','#22bb22','#4b0082','#d2691e'], + disableColor: '#ddd', + effectiveColor: 'red', backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色 borderColor: '#ccc', // 工具箱边框颜色 borderWidth: 0, // 工具箱边框线宽,单位px,默认为0(无边框) @@ -160,55 +160,55 @@ define(function() { // 接受数组分别设定上右下左边距,同css itemGap: 10, // 各个item之间的间隔,单位px,默认为10, // 横向布局时为水平间隔,纵向布局时为纵向间隔 - itemSize: 16, // 工具箱图形宽度 - showTitle : true, - //textStyle : {}, - feature : { - mark : { - show : false, - title : { - mark : '辅助线开关', - markUndo : '删除辅助线', - markClear : '清空辅助线' + itemSize: 16, // 工具箱图形宽度 + showTitle: true, + // textStyle: { }, + feature: { + mark: { + show: false, + title: { + mark: '辅助线开关', + markUndo: '删除辅助线', + markClear: '清空辅助线' }, - lineStyle : { - width : 1, - color : '#1e90ff', - type : 'dashed' + lineStyle: { + width: 1, + color: '#1e90ff', + type: 'dashed' } }, - dataZoom : { - show : false, - title : { - dataZoom : '区域缩放', - dataZoomReset : '区域缩放后退' + dataZoom: { + show: false, + title: { + dataZoom: '区域缩放', + dataZoomReset: '区域缩放后退' } }, - dataView : { - show : false, - title : '数据视图', + dataView: { + show: false, + title: '数据视图', readOnly: false, - lang : ['Data View', 'close', 'refresh'] + lang: ['Data View', 'close', 'refresh'] }, magicType: { - show : false, - title : { - line : '折线图切换', - bar : '柱形图切换', - stack : '堆积', - tiled : '平铺' + show: false, + title: { + line: '折线图切换', + bar: '柱形图切换', + stack: '堆积', + tiled: '平铺' }, - type : [] // 'line', 'bar', 'stack', 'tiled' + type: [ ] // 'line', 'bar', 'stack', 'tiled' }, - restore : { - show : false, - title : '还原' + restore: { + show: false, + title: '还原' }, - saveAsImage : { - show : false, - title : '保存为图片', - type : 'png', - lang : ['点击保存'] + saveAsImage: { + show: false, + title: '保存为图片', + type: 'png', + lang: ['点击保存'] } } }, @@ -218,21 +218,21 @@ define(function() { show: true, showContent: true, // tooltip主体内容 trigger: 'item', // 触发类型,默认数据触发,见下图,可选为:'item' ¦ 'axis' - // position : null // 位置 {Array} | {Function} + // position: null // 位置 {Array} | {Function} // formatter: null // 内容格式器:{string}(Template) ¦ {Function} islandFormatter: '{a}
{b} : {c}', // 数据孤岛内容格式器 showDelay: 20, // 显示延迟,添加显示延迟可以避免频繁切换,单位ms hideDelay: 100, // 隐藏延迟,单位ms - transitionDuration : 0.4, // 动画变换时间,单位s + transitionDuration: 0.4, // 动画变换时间,单位s backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色,默认为透明度为0.7的黑色 borderColor: '#333', // 提示边框颜色 borderRadius: 4, // 提示边框圆角,单位px,默认为4 borderWidth: 0, // 提示边框线宽,单位px,默认为0(无边框) padding: 5, // 提示内边距,单位px,默认各方向内边距为5, // 接受数组分别设定上右下左边距,同css - axisPointer : { // 坐标轴指示器,坐标轴触发有效 - type : 'line', // 默认为直线,可选为:'line' | 'shadow' | 'cross' - lineStyle : { // 直线指示器样式设置 + axisPointer: { // 坐标轴指示器,坐标轴触发有效 + type: 'line', // 默认为直线,可选为:'line' | 'shadow' | 'cross' + lineStyle: { // 直线指示器样式设置 color: '#48b', width: 2, type: 'solid' @@ -242,7 +242,7 @@ define(function() { width: 1, type: 'dashed' }, - shadowStyle : { // 阴影指示器样式设置 + shadowStyle: { // 阴影指示器样式设置 color: 'rgba(150,150,150,0.3)', // 阴影颜色 width: 'auto', // 阴影大小 type: 'default' @@ -256,8 +256,8 @@ define(function() { // 区域缩放控制器 dataZoom: { show: false, - orient: 'horizontal', // 布局方式,默认为水平布局,可选为: - // 'horizontal' ¦ 'vertical' + orient: 'horizontal', // 布局方式,默认为水平布局,可选为: + // 'horizontal' ¦ 'vertical' // x: {number}, // 水平安放位置,默认为根据grid参数适配,可选为: // {number}(x坐标,单位px) // y: {number}, // 垂直安放位置,默认为根据grid参数适配,可选为: @@ -308,7 +308,7 @@ define(function() { axisTick: { // 坐标轴小标记 show: true, // 属性show控制显示与否,默认不显示 interval: 'auto', - inside : false, // 控制小标记是否在grid里 + inside: false, // 控制小标记是否在grid里 // onGap: null, length :5, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 @@ -369,7 +369,7 @@ define(function() { }, axisTick: { // 坐标轴小标记 show: false, // 属性show控制显示与否,默认不显示 - inside : false, // 控制小标记是否在grid里 + inside: false, // 控制小标记是否在grid里 length :5, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: '#333', @@ -402,12 +402,12 @@ define(function() { } }, - polar : { - center : ['50%', '50%'], // 默认全局居中 - radius : '75%', - startAngle : 90, - splitNumber : 5, - name : { + polar: { + center: ['50%', '50%'], // 默认全局居中 + radius: '75%', + startAngle: 90, + splitNumber: 5, + name: { show: true, // formatter: null, textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE @@ -429,28 +429,28 @@ define(function() { color: '#333' } }, - splitArea : { - show : true, - areaStyle : { + splitArea: { + show: true, + areaStyle: { color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'] } }, - splitLine : { - show : true, - lineStyle : { - width : 1, - color : '#ccc' + splitLine: { + show: true, + lineStyle: { + width: 1, + color: '#ccc' } }, type: 'polygon' - //indicator : [] + // indicator: [ ] }, - timeline : { + timeline: { show: true, - type : 'time', // 模式是时间类型,支持 number - notMerge : false, - realtime : true, + type: 'time', // 模式是时间类型,支持 number + notMerge: false, + realtime: true, x: 80, // y: {number}, x2: 80, @@ -458,17 +458,17 @@ define(function() { // width: {totalWidth} - x - x2, height: 50, backgroundColor: 'rgba(0,0,0,0)', // 时间轴背景颜色 - borderColor : '#ccc', // 时间轴边框颜色 - borderWidth : 0, // 时间轴边框线宽,单位px,默认为0(无边框) - padding : 5, // 时间轴内边距,单位px,默认各方向内边距为5, - controlPosition : 'left', // 'right' | 'none' - autoPlay : false, - loop : true, - playInterval : 2000, // 播放时间间隔,单位ms - lineStyle : { - width : 1, - color : '#666', - type : 'dashed' + borderColor: '#ccc', // 时间轴边框颜色 + borderWidth: 0, // 时间轴边框线宽,单位px,默认为0(无边框) + padding: 5, // 时间轴内边距,单位px,默认各方向内边距为5, + controlPosition: 'left', // 'right' | 'none' + autoPlay: false, + loop: true, + playInterval: 2000, // 播放时间间隔,单位ms + lineStyle: { + width: 1, + color: '#666', + type: 'dashed' }, label: { // 文本标签 show: true, @@ -479,12 +479,12 @@ define(function() { color: '#333' } }, - checkpointStyle : { - symbol : 'auto', - symbolSize : 'auto', - color : 'auto', - borderColor : 'auto', - borderWidth : 'auto', + checkpointStyle: { + symbol: 'auto', + symbolSize: 'auto', + color: 'auto', + borderColor: 'auto', + borderWidth: 'auto', label: { // 文本标签 show: false, textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE @@ -492,19 +492,19 @@ define(function() { } } }, - controlStyle : { - normal : { color : '#333'}, - emphasis : { color : '#1e90ff'} + controlStyle: { + normal: { color: '#333'}, + emphasis: { color: '#1e90ff'} }, - symbol : 'emptyDiamond', - symbolSize : 4, - currentIndex : 0 - // data : [] + symbol: 'emptyDiamond', + symbolSize: 4, + currentIndex: 0 + // data: [] }, roamController: { - show : false, - x: 'left', // 水平安放位置,默认为全图左对齐,可选为: + show: false, + x: 'left', // 水平安放位置,默认为全图左对齐,可选为: // 'center' ¦ 'left' ¦ 'right' // ¦ {number}(x坐标,单位px) y: 'top', // 垂直安放位置,默认为全图顶端,可选为: @@ -532,7 +532,7 @@ define(function() { barMinHeight: 0, // 最小高度改为0 // barWidth: null, // 默认自适应 barGap: '30%', // 柱间距离,默认为柱形宽度的30%,可设固定值 - barCategoryGap : '20%', // 类目间柱形距离,默认为类目间距的20%,可设固定值 + barCategoryGap: '20%', // 类目间柱形距离,默认为类目间距的20%,可设固定值 itemStyle: { normal: { // color: '各异', @@ -582,7 +582,7 @@ define(function() { lineStyle: { width: 2, type: 'solid', - shadowColor : 'rgba(0,0,0,0)', //默认透明 + shadowColor: 'rgba(0,0,0,0)', //默认透明 shadowBlur: 0, shadowOffsetX: 0, shadowOffsetY: 0 @@ -599,11 +599,11 @@ define(function() { } } }, - //smooth : false, - //symbol: null, // 拐点图形类型 - symbolSize: 2, // 拐点图形大小 - //symbolRotate : null, // 拐点图形旋转控制 - showAllSymbol: false // 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略) + // smooth: false, + // symbol: null, // 拐点图形类型 + symbolSize: 2, // 拐点图形大小 + // symbolRotate: null, // 拐点图形旋转控制 + showAllSymbol: false // 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略) }, // K线图默认参数 @@ -611,8 +611,8 @@ define(function() { clickable: true, xAxisIndex: 0, yAxisIndex: 0, - // barWidth : null // 默认自适应 - // barMaxWidth : null // 默认自适应 + // barWidth: null // 默认自适应 + // barMaxWidth: null // 默认自适应 itemStyle: { normal: { color: '#fff', // 阳线填充颜色 @@ -635,18 +635,18 @@ define(function() { clickable: true, xAxisIndex: 0, yAxisIndex: 0, - //symbol: null, // 图形类型 - symbolSize: 4, // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2 - //symbolRotate : null, // 图形旋转控制 - large: false, // 大规模散点图 - largeThreshold: 2000,// 大规模阀值,large为true且数据量>largeThreshold才启用大规模模式 + // symbol: null, // 图形类型 + symbolSize: 4, // 图形大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2 + // symbolRotate: null, // 图形旋转控制 + large: false, // 大规模散点图 + largeThreshold: 2000, // 大规模阀值,large为true且数据量>largeThreshold才启用大规模模式 itemStyle: { normal: { // color: 各异, label: { show: false, // 标签文本格式器,同Tooltip.formatter,不支持回调 - formatter : function (a, b, c) { + formatter: function (a, b, c) { if (typeof c[2] != 'undefined') { return c[2]; } @@ -664,7 +664,7 @@ define(function() { label: { show: false, // 标签文本格式器,同Tooltip.formatter,不支持回调 - formatter : function (a, b, c) { + formatter: function (a, b, c) { if (typeof c[2] != 'undefined') { return c[2]; } @@ -681,7 +681,7 @@ define(function() { }, // 雷达图默认参数 - radar : { + radar: { clickable: true, polarIndex: 0, itemStyle: { @@ -702,22 +702,22 @@ define(function() { } } }, - //symbol: null, // 拐点图形类型 - symbolSize: 2 // 可计算特性参数,空数据拖拽提示图形大小 - //symbolRotate : null, // 图形旋转控制 + // symbol: null, // 拐点图形类型 + symbolSize: 2 // 可计算特性参数,空数据拖拽提示图形大小 + // symbolRotate: null, // 图形旋转控制 }, // 饼图默认参数 pie: { clickable: true, - center : ['50%', '50%'], // 默认全局居中 - radius : [0, '75%'], - clockWise : true, // 默认顺时针 + center: ['50%', '50%'], // 默认全局居中 + radius: [0, '75%'], + clockWise: true, // 默认顺时针 startAngle: 90, minAngle: 0, // 最小角度改为0 selectedOffset: 10, // 选中是扇区偏移量 // selectedMode: false, // 选择模式,默认关闭,可选single,multiple - // roseType : null, // 南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积) + // roseType: null, // 南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积) itemStyle: { normal: { // color: 各异, @@ -765,20 +765,20 @@ define(function() { map: { mapType: 'china', // 各省的mapType暂时都用中文 //mapLocation: { - // x : 'center' | 'left' | 'right' | 'x%' | {number}, - // y : 'center' | 'top' | 'bottom' | 'x%' | {number} + // x: 'center' | 'left' | 'right' | 'x%' | {number}, + // y: 'center' | 'top' | 'bottom' | 'x%' | {number} // width // 自适应 // height // 自适应 //}, - // mapValueCalculation: 'sum', // 数值合并方式,默认加和,可选为: - // 'sum' | 'average' | 'max' | 'min' - mapValuePrecision : 0, // 地图数值计算结果小数精度 - showLegendSymbol : true, // 显示图例颜色标识(系列标识的小圆点),存在legend时生效 - // selectedMode: false, // 选择模式,默认关闭,可选single,multiple + // mapValueCalculation: 'sum', // 数值合并方式,默认加和,可选为: + // 'sum' | 'average' | 'max' | 'min' + mapValuePrecision: 0, // 地图数值计算结果小数精度 + showLegendSymbol: true, // 显示图例颜色标识(系列标识的小圆点),存在legend时生效 + // selectedMode: false, // 选择模式,默认关闭,可选single,multiple hoverable: true, clickable: true, - // roam : false, // 是否开启缩放及漫游模式 - // scaleLimit : null, + // roam: false, // 是否开启缩放及漫游模式 + // scaleLimit: null, itemStyle: { normal: { // color: 各异, @@ -811,7 +811,7 @@ define(function() { } }, - force : { + force: { // 布局中心 center: ['50%', '50%'], @@ -822,8 +822,8 @@ define(function() { coolDown: 0.99, // 数据映射到圆的半径的最小值和最大值 - minRadius : 10, - maxRadius : 20, + minRadius: 10, + maxRadius: 20, // 是否根据屏幕比例拉伸 ratioScaling: false, @@ -839,10 +839,10 @@ define(function() { steps: 1, // 布局缩放因子,并不完全精确, 效果跟布局大小类似 - scaling : 1.0, + scaling: 1.0, // 向心力因子,越大向心力越大( 所有顶点会往 center 的位置收拢 ) - gravity : 1, + gravity: 1, symbol: 'circle', // symbolSize 为 0 的话使用映射到minRadius-maxRadius后的值 @@ -854,7 +854,7 @@ define(function() { clickable: true, // 分类里如果有样式会覆盖节点默认样式 - categories : [{ + categories: [{ // itemStyle // symbol // symbolSize @@ -867,14 +867,14 @@ define(function() { show: false // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, - nodeStyle : { - brushType : 'both', - color : '#f08c2e', - strokeColor : '#5182ab', + nodeStyle: { + brushType: 'both', + color: '#f08c2e', + strokeColor: '#5182ab', lineWidth: 1 }, - linkStyle : { - strokeColor : '#5182ab' + linkStyle: { + strokeColor: '#5182ab' } }, emphasis: { @@ -883,8 +883,8 @@ define(function() { show: false // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, - nodeStyle : {}, - linkStyle : { + nodeStyle: {}, + linkStyle: { opacity: 0 } } @@ -911,45 +911,45 @@ define(function() { // }] }, - chord : { + chord: { clickable: true, - radius : ['65%', '75%'], - center : ['50%', '50%'], - padding : 2, - sort : 'none', // can be 'none', 'ascending', 'descending' - sortSub : 'none', // can be 'none', 'ascending', 'descending' - startAngle : 90, - clockWise : true, - showScale : false, - showScaleText : false, - itemStyle : { - normal : { - label : { - show : true, + radius: ['65%', '75%'], + center: ['50%', '50%'], + padding: 2, + sort: 'none', // can be 'none', 'ascending', 'descending' + sortSub: 'none', // can be 'none', 'ascending', 'descending' + startAngle: 90, + clockWise: true, + showScale: false, + showScaleText: false, + itemStyle: { + normal: { + label: { + show: true, rotate: false, distance: 10 // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, - lineStyle : { - width : 0, - color : '#000' + lineStyle: { + width: 0, + color: '#000' }, - chordStyle : { - lineStyle : { - width : 1, - color : '#999' + chordStyle: { + lineStyle: { + width: 1, + color: '#999' } } }, - emphasis : { - lineStyle : { - width : 0, - color : '#000' + emphasis: { + lineStyle: { + width: 0, + color: '#000' }, - chordStyle : { - lineStyle : { - width : 1, - color : '#666' + chordStyle: { + lineStyle: { + width: 1, + color: '#666' } } } @@ -969,14 +969,14 @@ define(function() { * * Row based */ - matrix : [] + matrix: [ ] }, - gauge : { - center : ['50%', '50%'], // 默认全局居中 - radius : '75%', + gauge: { + center: ['50%', '50%'], // 默认全局居中 + radius: '75%', startAngle: 225, - endAngle : -45, + endAngle: -45, min: 0, // 最小值 max: 100, // 最大值 precision: 0, // 小数精度,默认为0,无小数点 @@ -1014,37 +1014,37 @@ define(function() { type: 'solid' } }, - pointer : { - show : true, - length : '80%', - width : 8, - color : 'auto' + pointer: { + show: true, + length: '80%', + width: 8, + color: 'auto' }, - title : { - show : true, - offsetCenter: [0, '-40%'], // x, y,单位px - textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE + title: { + show: true, + offsetCenter: [0, '-40%'], // x, y,单位px + textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: '#333', - fontSize : 15 + fontSize: 15 } }, - detail : { - show : true, + detail: { + show: true, backgroundColor: 'rgba(0,0,0,0)', borderWidth: 0, borderColor: '#ccc', width: 100, height: 40, - offsetCenter: [0, '40%'], // x, y,单位px + offsetCenter: [0, '40%'], // x, y,单位px // formatter: null, - textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE + textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE color: 'auto', - fontSize : 30 + fontSize: 30 } } }, - funnel : { + funnel: { clickable: true, x: 80, y: 60, @@ -1056,8 +1056,8 @@ define(function() { max: 100, minSize: '0%', maxSize: '100%', - sort : 'descending', // 'ascending', 'descending' - gap : 0, + sort: 'descending', // 'ascending', 'descending' + gap: 0, itemStyle: { normal: { // color: 各异, @@ -1098,30 +1098,31 @@ define(function() { calculateStep: 0.1 // 滚轮可计算步长 0.1 = 10% }, - markPoint : { + markPoint: { + clickable: true, symbol: 'pin', // 标注类型 symbolSize: 10, // 标注大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2 - //symbolRotate : null, // 标注旋转控制 - large : false, - effect : { + // symbolRotate: null, // 标注旋转控制 + large: false, + effect: { show: false, loop: true, period: 15, // 运动周期,无单位,值越大越慢 - scaleSize : 2 // 放大倍数,以markPoint点size为基准 - // color : 'gold', - // shadowColor : 'rgba(255,215,0,0.8)', - // shadowBlur : 0 // 炫光模糊 + scaleSize: 2 // 放大倍数,以markPoint点size为基准 + // color: 'gold', + // shadowColor: 'rgba(255,215,0,0.8)', + // shadowBlur: 0 // 炫光模糊 }, itemStyle: { normal: { // color: 各异, - // borderColor: 各异, // 标注边线颜色,优先于color - borderWidth: 2, // 标注边线线宽,单位px,默认为1 + // borderColor: 各异, // 标注边线颜色,优先于color + borderWidth: 2, // 标注边线线宽,单位px,默认为1 label: { show: true, // 标签文本格式器,同Tooltip.formatter,不支持回调 - // formatter : null, - position: 'inside' // 可选为'left'|'right'|'top'|'bottom' + // formatter: null, + position: 'inside' // 可选为'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE } }, @@ -1130,7 +1131,7 @@ define(function() { label: { show: true // 标签文本格式器,同Tooltip.formatter,不支持回调 - // formatter : null, + // formatter: null, // position: 'inside' // 'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE } @@ -1138,33 +1139,34 @@ define(function() { } }, - markLine : { + markLine: { + clickable: true, // 标线起始和结束的symbol介绍类型,如果都一样,可以直接传string symbol: ['circle', 'arrow'], // 标线起始和结束的symbol大小,半宽(半径)参数,当图形为方向或菱形则总宽度为symbolSize * 2 symbolSize: [2, 4], // 标线起始和结束的symbol旋转控制 - //symbolRotate : null, - //smooth : false, - large : false, - effect : { + //symbolRotate: null, + //smooth: false, + large: false, + effect: { show: false, loop: true, - period: 15, // 运动周期,无单位,值越大越慢 - scaleSize : 2 // 放大倍数,以markLine线lineWidth为基准 - // color : 'gold', - // shadowColor : 'rgba(255,215,0,0.8)', - // shadowBlur : lineWidth * 2 // 炫光模糊,默认等于scaleSize计算所得 + period: 15, // 运动周期,无单位,值越大越慢 + scaleSize: 2 // 放大倍数,以markLine线lineWidth为基准 + // color: 'gold', + // shadowColor: 'rgba(255,215,0,0.8)', + // shadowBlur: lineWidth * 2 // 炫光模糊,默认等于scaleSize计算所得 }, itemStyle: { normal: { - // color: 各异, // 标线主色,线色,symbol主色 + // color: 各异, // 标线主色,线色,symbol主色 // borderColor: 随color, // 标线symbol边框颜色,优先于color - borderWidth: 1.5, // 标线symbol边框线宽,单位px,默认为2 + borderWidth: 1.5, // 标线symbol边框线宽,单位px,默认为2 label: { show: true, // 标签文本格式器,同Tooltip.formatter,不支持回调 - // formatter : null, + // formatter: null, // 可选为 'start'|'end'|'left'|'right'|'top'|'bottom' position: 'end' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE @@ -1173,7 +1175,7 @@ define(function() { // color: 随borderColor, // 主色,线色,优先级高于borderColor和color // width: 随borderWidth, // 优先于borderWidth type: 'dashed' - // shadowColor : 'rgba(0,0,0,0)', //默认透明 + // shadowColor: 'rgba(0,0,0,0)', //默认透明 // shadowBlur: 0, // shadowOffsetX: 0, // shadowOffsetY: 0 @@ -1184,11 +1186,11 @@ define(function() { label: { show: false // 标签文本格式器,同Tooltip.formatter,不支持回调 - // formatter : null, + // formatter: null, // position: 'inside' // 'left'|'right'|'top'|'bottom' // textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE }, - lineStyle : {} + lineStyle: {} } } }, @@ -1211,7 +1213,7 @@ define(function() { CLICK: 'click', DBLCLICK: 'dblclick', HOVER: 'hover', - MOUSEOUT : 'mouseout', + MOUSEOUT: 'mouseout', //MOUSEWHEEL: 'mousewheel', // -------业务交互逻辑 DATA_CHANGED: 'dataChanged', @@ -1223,28 +1225,28 @@ define(function() { MAGIC_TYPE_CHANGED: 'magicTypeChanged', DATA_VIEW_CHANGED: 'dataViewChanged', TIMELINE_CHANGED: 'timelineChanged', - MAP_ROAM : 'mapRoam', + MAP_ROAM: 'mapRoam', // -------内部通信 TOOLTIP_HOVER: 'tooltipHover', TOOLTIP_IN_GRID: 'tooltipInGrid', TOOLTIP_OUT_GRID: 'tooltipOutGrid', ROAMCONTROLLER: 'roamController' }, - DRAG_ENABLE_TIME : 120, // 降低图表内元素拖拽敏感度,单位ms,不建议外部干预 - EFFECT_ZLEVEL : 7, + DRAG_ENABLE_TIME: 120, // 降低图表内元素拖拽敏感度,单位ms,不建议外部干预 + EFFECT_ZLEVEL: 7, // 主题,默认标志图形类型列表 - symbolList : [ + symbolList: [ 'circle', 'rectangle', 'triangle', 'diamond', 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond' ], - loadingText : 'Loading...', + loadingText: 'Loading...', // 可计算特性配置,孤岛,提示颜色 - calculable: false, // 默认关闭可计算特性 - calculableColor: 'rgba(255,165,0,0.6)', // 拖拽提示边框颜色 - calculableHolderColor: '#ccc', // 可计算占位提示颜色 + calculable: false, // 默认关闭可计算特性 + calculableColor: 'rgba(255,165,0,0.6)', // 拖拽提示边框颜色 + calculableHolderColor: '#ccc', // 可计算占位提示颜色 nameConnector: ' & ', - valueConnector: ' : ', - animation: true, + valueConnector: ': ', + animation: true, // 过渡动画是否开启 addDataAnimation: true, // 动态数据接口是否开启动画效果 animationThreshold: 2000, // 动画元素阀值,产生的图形原素超过2000不出动画 animationDuration: 2000, diff --git a/src/data/Graph.js b/src/data/Graph.js new file mode 100644 index 0000000000000000000000000000000000000000..e09b3664e5a0a7a7351125627064d78056a2abcc --- /dev/null +++ b/src/data/Graph.js @@ -0,0 +1,325 @@ +/** + * 图数据结构 + * @module echarts/data/Graph + * @author pissang(http://www.github.com/pissang) + */ +define(function(require) { + + var util = require('zrender/tool/util'); + + 'use strict'; + + /** + * @alias module:echarts/data/Graph + * @constructor + * @param {boolean} directed + */ + var Graph = function(directed) { + /** + * 是否是有向图 + * @type {boolean} + * @private + */ + this._directed = directed || false; + + /** + * [nodes description] + * @type {Array} + */ + this.nodes = []; + this.edges = []; + + this._nodesMap = {}; + this._edgesMap = {}; + } + + /** + * 添加一个新的节点 + * @param {string} name 节点名称 + * @param {*} [data] 存储的数据 + */ + Graph.prototype.addNode = function(name, data) { + if (this._nodesMap[name]) { + return this._nodesMap[name]; + } + + var node = new Graph.Node(name, data); + + this.nodes.push(node); + + this._nodesMap[name] = node; + return node; + } + /** + * 获取节点 + * @param {string} name + * @return {module:echarts/data/Graph~Node} + */ + Graph.prototype.getNodeByName = function(name) { + return this._nodesMap[name]; + } + + /** + * 添加边 + * @param {string|module:echarts/data/Graph~Node} n1 + * @param {string|module:echarts/data/Graph~Node} n2 + * @param {*} data + * @return {module:echarts/data/Graph~Edge} + */ + Graph.prototype.addEdge = function(n1, n2, data) { + if (typeof(n1) == 'string') { + n1 = this._nodesMap[n1]; + } + if (typeof(n2) == 'string') { + n2 = this._nodesMap[n2]; + } + if (! n1 || !n2) { + return; + } + + var key = n1.name + '-' + n2.name; + if (this._edgesMap[key]) { + return this._edgesMap[key]; + } + + var edge = new Graph.Edge(n1, n2, data); + + if (this._directed) { + n1.outEdges.push(edge); + n2.inEdges.push(edge); + } + n1.edges.push(edge); + n2.edges.push(edge); + + this.edges.push(edge); + this._edgesMap[key] = edge; + + return edge; + } + + /** + * 移除边 + * @param {module:echarts/data/Graph~Edge} edge + */ + Graph.prototype.removeEdge = function(edge) { + var n1 = edge.node1; + var n2 = edge.node2; + var key = n1.name + '-' + n2.name; + if (this._directed) { + n1.outEdges.splice(util.indexOf(n1.outEdges, edge), 1); + n2.inEdges.splice(util.indexOf(n2.inEdges, edge), 1); + } + n1.edges.splice(util.indexOf(n1.edges, edge), 1); + n2.edges.splice(util.indexOf(n2.edges, edge), 1); + + delete this._edgesMap[key]; + this.edges.splice(util.indexOf(this.edges, edge), 1); + } + + /** + * 移除节点(及其邻接边) + * @param {module:echarts/data/Graph~Node} node + */ + Graph.prototype.removeNode = function(node) { + var name = node.name; + delete this._nodesMap[name]; + this.nodes.splice(util.indexOf(this.nodes, node), 1); + + for (var i = 0; i < this.edges.length;) { + var edge = this.edges[i]; + if (edge.node1 == node || edge.node2 == node) { + this.removeEdge(edge); + } else { + i++; + } + } + } + + /** + * 线性遍历所有节点 + * @param {Function} cb + * @param {*} context + */ + Graph.prototype.eachNode = function(cb, context) { + for (var i = 0; i < this.nodes.length; i++) { + cb.call(context, this.nodes[i]); + } + } + /** + * 线性遍历所有边 + * @param {Function} cb + * @param {*} context + */ + Graph.prototype.eachEdge = function(cb, context) { + for (var i = 0; i < this.edges.length; i++) { + cb.call(context, this.edges[i]); + } + } + + /** + * 图节点 + * @alias module:echarts/data/Graph~Node + * @param {string} name + * @param {*} [data] + */ + var Node = function(name, data) { + /** + * 节点名称 + * @type {string} + */ + this.name = name; + /** + * 节点存储的数据 + * @type {*} + */ + this.data = data || null; + /** + * 入边,只在有向图上有效 + * @type {Array.} + */ + this.inEdges = []; + /** + * 出边,只在有向图上有效 + * @type {Array.} + */ + this.outEdges = []; + /** + * 邻接边 + * @type {Array.} + */ + this.edges = []; + } + /** + * 度 + * @return {number} + */ + Node.prototype.degree = function() { + return this.edges.length; + } + /** + * 入度,只在有向图上有效 + * @return {number} + */ + Node.prototype.inDegree = function() { + return this.inEdges.length; + } + /** + * 出度,只在有向图上有效 + * @return {number} + */ + Node.prototype.outDegree = function() { + return this.outEdges.length; + } + + /** + * 图边 + * @alias module:echarts/data/Graph~Edge + * @param {module:echarts/data/Graph~Node} node1 + * @param {module:echarts/data/Graph~Node} node2 + * @param {extra} data + */ + var Edge = function(node1, node2, data) { + /** + * 节点1,如果是有向图则为源节点 + * @type {module:echarts/data/Graph~Node} + */ + this.node1 = node1; + /** + * 节点2,如果是有向图则为目标节点 + * @type {module:echarts/data/Graph~Node} + */ + this.node2 = node2; + + /** + * 边存储的数据 + * @type {*} + */ + this.data = data || null; + } + + Graph.Node = Node; + Graph.Edge = Edge; + + /** + * 从邻接矩阵生成 + * ``` + * TARGET + * -1--2--3--4--5- + * 1| x x x x x + * 2| x x x x x + * 3| x x x x x SOURCE + * 4| x x x x x + * 5| x x x x x + * ``` + * 节点的行列总和会被写到`node.data.value` + * 对于有向图会计算每一行的和写到`node.data.outValue`, + * 计算每一列的和写到`node.data.inValue`。 + * 边的权重会被然后写到`edge.data.weight`。 + * 如果是有向图被写到`edge.data.sourceWeight`和`edge.data.targetWeight` + * + * @method module:echarts/data/Graph.fromMatrix + * @param {Array.} nodesData 节点信息,必须有`name`属性 + * @param {Array} matrix 邻接矩阵 + * @param {boolean} directed 是否是有向图 + * @return {module:echarts/data/Graph} + */ + Graph.fromMatrix = function(nodesData, matrix, directed) { + if ( + !matrix || !matrix.length + || (matrix[0].length !== matrix.length) + || (nodesData.length !== matrix.length) + ) { + // Not a valid data + return; + } + + var size = matrix.length; + var graph = new Graph(directed); + + for (var i = 0; i < size; i++) { + var node = graph.addNode(nodesData[i].name, {}); + node.data.value = 0; + if (directed) { + node.data.outValue = node.data.inValue = 0; + } + } + for (var i = 0; i < size; i++) { + for (var j = 0; j < size; j++) { + var item = matrix[i][j]; + if (directed) { + graph.nodes[i].outValue += item; + graph.nodes[j].inValue += item; + } + graph.nodes[i].value += item; + graph.nodes[j].value += item; + } + } + + for (var i = 0; i < size; i++) { + for (var j = i; j < size; j++) { + var item = matrix[i][j]; + if (item === 0) { + continue; + } + var n1 = graph.nodes[i]; + var n2 = graph.nodes[j]; + var edge = graph.addEdge(n1, n2, {}); + if (directed) { + edge.data.sourceWeight = item; + edge.data.targetWeight = matrix[j][i]; + } + edge.data.weight = item; + if (i !== j) { + if (directed) { + var inEdge = graph.addEdge(n2, n1, {}); + inEdge.sourceWeight = matrix[j][i]; + inEdge.targetWeight = item; + } + edge.data.weight += matrix[j][i]; + } + } + } + } + + return Graph; +}); \ No newline at end of file diff --git a/src/echarts.js b/src/echarts.js index 1c3d8544564128870f115343ed147dc253a1ebdb..12909b9d5e3ad2d0167f3509c3bae7a4c45dd85e 100644 --- a/src/echarts.js +++ b/src/echarts.js @@ -20,16 +20,16 @@ define(function (require) { var zrUtil = require('zrender/tool/util'); var zrEvent = require('zrender/tool/event'); - var self = {}; + var self = { }; var _canvasSupported = require('zrender/tool/env').canvasSupported; var _idBase = new Date() - 0; - var _instances = {}; // ECharts实例map索引 + var _instances = { }; // ECharts实例map索引 var DOM_ATTRIBUTE_KEY = '_echarts_instance_'; self.version = '2.0.3'; self.dependencies = { - zrender : '2.0.3' + zrender: '2.0.3' }; /** * 入口方法 @@ -100,12 +100,12 @@ define(function (require) { this._connected = false; this._status = { // 用于图表间通信 - dragIn : false, - dragOut : false, - needRefresh : false + dragIn: false, + dragOut: false, + needRefresh: false }; this._curEventType = false; // 破循环信号灯 - this._chartList = []; // 图表实例 + this._chartList = [ ]; // 图表实例 this._messageCenter = new MessageCenter(); @@ -167,14 +167,14 @@ define(function (require) { /** * 初始化::构造函数 */ - _init : function () { + _init: function () { var self = this; var _zr = require('zrender').init(this.dom); this._zr = _zr; // wrap: n,e,d,t for name event data this this._messageCenter.dispatch = function(type, event, eventPackage, that) { - eventPackage = eventPackage || {}; + eventPackage = eventPackage || { }; eventPackage.type = type; eventPackage.event = event; @@ -205,7 +205,7 @@ define(function (require) { } - var eventBehaviors = {}; + var eventBehaviors = { }; this._onzrevent = function (param) { return self[eventBehaviors[ param.type ]](param); }; @@ -218,19 +218,19 @@ define(function (require) { _zr.on(eventValue, this._onzrevent); } - this.chart = {}; // 图表索引 - this.component = {}; // 组件索引 + this.chart = { }; // 图表索引 + this.component = { }; // 组件索引 // 内置图表 // 孤岛 var Island = require('./chart/island'); - this._island = new Island(this._themeConfig, this._messageCenter, _zr, {}, this); + this._island = new Island(this._themeConfig, this._messageCenter, _zr, { }, this); this.chart.island = this._island; // 内置通用组件 // 工具箱 var Toolbox = require('./component/toolbox'); - this._toolbox = new Toolbox(this._themeConfig, this._messageCenter, _zr, {}, this); + this._toolbox = new Toolbox(this._themeConfig, this._messageCenter, _zr, { }, this); this.component.toolbox = this._toolbox; var componentLibrary = require('./component'); @@ -246,11 +246,11 @@ define(function (require) { /** * ECharts事件处理中心 */ - __onevent : function (param){ + __onevent: function (param){ param.__echartsId = param.__echartsId || this.id; // 来自其他联动图表的事件 - var fromMyself = (param.__echartsId == this.id); + var fromMyself = (param.__echartsId === this.id); if (!this._curEventType) { this._curEventType = param.type; @@ -307,9 +307,9 @@ define(function (require) { this._zr.trigger( 'mousemove', { - connectTrigger : true, - zrenderX : grid.getX() + param.x * grid.getWidth(), - zrenderY : grid.getY() + param.y * grid.getHeight() + connectTrigger: true, + zrenderX: grid.getX() + param.x * grid.getWidth(), + zrenderY: grid.getY() + param.y * grid.getHeight() } ); } @@ -333,7 +333,7 @@ define(function (require) { } // 多图联动,只做自己的一级事件分发,避免级联事件循环 - if (this._connected && fromMyself && this._curEventType == param.type) { + if (this._connected && fromMyself && this._curEventType === param.type) { for (var c in this._connected) { this._connected[c].connectedEventHandler(param); } @@ -349,7 +349,7 @@ define(function (require) { /** * 点击事件,响应zrender事件,包装后分发到Echarts层 */ - _onclick : function (param) { + _onclick: function (param) { callChartListMethodReverse(this, 'onclick', param); if (param.target) { @@ -368,7 +368,7 @@ define(function (require) { /** * 双击事件,响应zrender事件,包装后分发到Echarts层 */ - _ondblclick : function (param) { + _ondblclick: function (param) { callChartListMethodReverse(this, 'ondblclick', param); if (param.target) { @@ -387,7 +387,7 @@ define(function (require) { /** * 鼠标移入事件,响应zrender事件,包装后分发到Echarts层 */ - _onmouseover : function (param) { + _onmouseover: function (param) { if (param.target) { var ecData = this._eventPackage(param.target); if (ecData && ecData.seriesIndex != null) { @@ -404,7 +404,7 @@ define(function (require) { /** * 鼠标移出事件,响应zrender事件,包装后分发到Echarts层 */ - _onmouseout : function (param) { + _onmouseout: function (param) { if (param.target) { var ecData = this._eventPackage(param.target); if (ecData && ecData.seriesIndex != null) { @@ -421,12 +421,12 @@ define(function (require) { /** * dragstart回调,可计算特性实现 */ - _ondragstart : function (param) { + _ondragstart: function (param) { // 复位用于图表间通信拖拽标识 this._status = { - dragIn : false, - dragOut : false, - needRefresh : false + dragIn: false, + dragOut: false, + needRefresh: false }; callChartListMethodReverse(this, 'ondragstart', param); @@ -435,28 +435,28 @@ define(function (require) { /** * dragging回调,可计算特性实现 */ - _ondragenter : function (param) { + _ondragenter: function (param) { callChartListMethodReverse(this, 'ondragenter', param); }, /** * dragstart回调,可计算特性实现 */ - _ondragover : function (param) { + _ondragover: function (param) { callChartListMethodReverse(this, 'ondragover', param); }, /** * dragstart回调,可计算特性实现 */ - _ondragleave : function (param) { + _ondragleave: function (param) { callChartListMethodReverse(this, 'ondragleave', param); }, /** * dragstart回调,可计算特性实现 */ - _ondrop : function (param) { + _ondrop: function (param) { callChartListMethodReverse(this, 'ondrop', param, this._status); this._island.ondrop(param, this._status); }, @@ -464,7 +464,7 @@ define(function (require) { /** * dragdone回调 ,可计算特性实现 */ - _ondragend : function (param) { + _ondragend: function (param) { callChartListMethodReverse(this, 'ondragend', param, this._status); this._timeline && this._timeline.ondragend(param, this._status); @@ -488,7 +488,7 @@ define(function (require) { /** * 图例选择响应 */ - _onlegendSelected : function (param) { + _onlegendSelected: function (param) { // 用于图表间通信 this._status.needRefresh = false; callChartListMethodReverse(this, 'onlegendSelected', param, this._status); @@ -501,7 +501,7 @@ define(function (require) { /** * 数据区域缩放响应 */ - _ondataZoom : function (param) { + _ondataZoom: function (param) { // 用于图表间通信 this._status.needRefresh = false; callChartListMethodReverse(this, 'ondataZoom', param, this._status); @@ -514,7 +514,7 @@ define(function (require) { /** * 值域漫游响应 */ - _ondataRange : function (param) { + _ondataRange: function (param) { this._clearEffect(); // 用于图表间通信 this._status.needRefresh = false; @@ -529,7 +529,7 @@ define(function (require) { /** * 动态类型切换响应 */ - _onmagicTypeChanged : function () { + _onmagicTypeChanged: function () { this._clearEffect(); this._render(this._toolbox.getMagicOption()); }, @@ -537,7 +537,7 @@ define(function (require) { /** * 数据视图修改响应 */ - _ondataViewChanged : function (param) { + _ondataViewChanged: function (param) { this._syncBackupData(param.option); this._messageCenter.dispatch( ecConfig.EVENT.DATA_CHANGED, @@ -551,22 +551,22 @@ define(function (require) { /** * tooltip与图表间通信 */ - _tooltipHover : function (param) { - var tipShape = []; + _tooltipHover: function (param) { + var tipShape = [ ]; callChartListMethodReverse(this, 'ontooltipHover', param, tipShape); }, /** * 还原 */ - _onrestore : function () { + _onrestore: function () { this.restore(); }, /** * 刷新 */ - _onrefresh : function (param) { + _onrefresh: function (param) { this._refreshInside = true; this.refresh(param); this._refreshInside = false; @@ -575,14 +575,14 @@ define(function (require) { /** * 数据修改后的反向同步dataZoom持有的备份数据 */ - _syncBackupData : function (curOption) { + _syncBackupData: function (curOption) { this.component.dataZoom && this.component.dataZoom.syncBackupData(curOption); }, /** * 打包Echarts层的事件附件 */ - _eventPackage : function (target) { + _eventPackage: function (target) { if (target) { var ecData = require('./util/ecData'); @@ -596,13 +596,13 @@ define(function (require) { ) : dataIndex; return { - seriesIndex : seriesIndex, - seriesName : (ecData.get(target, 'series') || {}).name, - dataIndex : dataIndex, - data : ecData.get(target, 'data'), - name : ecData.get(target, 'name'), - value : ecData.get(target, 'value'), - special : ecData.get(target, 'special') + seriesIndex: seriesIndex, + seriesName: (ecData.get(target, 'series') || { }).name, + dataIndex: dataIndex, + data: ecData.get(target, 'data'), + name: ecData.get(target, 'name'), + value: ecData.get(target, 'value'), + special: ecData.get(target, 'special') }; } return; @@ -611,7 +611,7 @@ define(function (require) { /** * 图表渲染 */ - _render : function (magicOption) { + _render: function (magicOption) { this._mergeGlobalConifg(magicOption); var bgColor = magicOption.backgroundColor; @@ -634,14 +634,14 @@ define(function (require) { } this._zr.clearAnimation(); - this._chartList = []; + this._chartList = [ ]; var chartLibrary = require('./chart'); var componentLibrary = require('./component'); if (magicOption.xAxis || magicOption.yAxis) { - magicOption.grid = magicOption.grid || {}; - magicOption.dataZoom = magicOption.dataZoom || {}; + magicOption.grid = magicOption.grid || { }; + magicOption.dataZoom = magicOption.dataZoom || { }; } var componentList = [ @@ -682,7 +682,7 @@ define(function (require) { var ChartClass; var chartType; var chart; - var chartMap = {}; // 记录已经初始化的图表 + var chartMap = { }; // 记录已经初始化的图表 for (var i = 0, l = magicOption.series.length; i < l; i++) { chartType = magicOption.series[i].type; if (!chartType) { @@ -765,7 +765,7 @@ define(function (require) { /** * 还原 */ - restore : function () { + restore: function () { this._clearEffect(); this._option = zrUtil.clone(this._optionRestore); this._disposeChartList(); @@ -778,9 +778,9 @@ define(function (require) { * 刷新 * @param {Object=} param,可选参数,用于附带option,内部同步用,外部不建议带入数据修改,无法同步 */ - refresh : function (param) { + refresh: function (param) { this._clearEffect(); - param = param || {}; + param = param || { }; var magicOption = param.option; // 外部调用的refresh且有option带入 @@ -810,7 +810,7 @@ define(function (require) { /** * 释放图表实例 */ - _disposeChartList : function () { + _disposeChartList: function () { this._clearEffect(); // 停止动画 @@ -828,13 +828,13 @@ define(function (require) { } } - this._chartList = []; + this._chartList = [ ]; }, /** * 非图表全局属性merge~~ */ - _mergeGlobalConifg : function (magicOption) { + _mergeGlobalConifg: function (magicOption) { var mergeList = [ // 背景颜色 'backgroundColor', @@ -882,7 +882,7 @@ define(function (require) { * @param {boolean=} notMerge 多次调用时option选项是默认是合并(merge)的, * 如果不需求,可以通过notMerger参数为true阻止与上次option的合并 */ - setOption : function (option, notMerge) { + setOption: function (option, notMerge) { if (!option.timeline) { return this._setOption(option, notMerge); } @@ -897,7 +897,7 @@ define(function (require) { * @param {boolean=} notMerge 多次调用时option选项是默认是合并(merge)的, * 如果不需求,可以通过notMerger参数为true阻止与上次option的合并 */ - _setOption : function (option, notMerge) { + _setOption: function (option, notMerge) { if (!notMerge && this._option) { this._option = zrUtil.merge( this.getOption(), @@ -936,7 +936,7 @@ define(function (require) { /** * 返回内部持有的当前显示option克隆 */ - getOption : function () { + getOption: function () { var magicOption = zrUtil.clone(this._option); var self = this; @@ -976,7 +976,7 @@ define(function (require) { * @param {boolean=} notMerge 多次调用时option选项是默认是合并(merge)的, * 如果不需求,可以通过notMerger参数为true阻止与上次option的合并。 */ - setSeries : function (series, notMerge) { + setSeries: function (series, notMerge) { if (!notMerge) { this.setOption({series: series}); } @@ -990,7 +990,7 @@ define(function (require) { /** * 返回内部持有的当前显示series克隆 */ - getSeries : function () { + getSeries: function () { return this.getOption().series; }, @@ -998,7 +998,7 @@ define(function (require) { * timelineOption接口,配置图表实例任何可配置选项 * @param {Object} option */ - _setTimelineOption : function(option) { + _setTimelineOption: function(option) { this._timeline && this._timeline.dispose(); var Timeline = require('./component/timeline'); var timeline = new Timeline( @@ -1019,7 +1019,7 @@ define(function (require) { * @param {boolean=} dataGrow 是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据 * @param {string=} additionData 是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow */ - addData : function (seriesIdx, data, isHead, dataGrow, additionData) { + addData: function (seriesIdx, data, isHead, dataGrow, additionData) { var params = seriesIdx instanceof Array ? seriesIdx : [[seriesIdx, data, isHead, dataGrow, additionData]]; @@ -1054,7 +1054,7 @@ define(function (require) { var legend; var legendData; - if (seriesItem.type == ecConfig.CHART_TYPE_PIE + if (seriesItem.type === ecConfig.CHART_TYPE_PIE && (legend = optionRestore.legend) && (legendData = legend.data) ) { @@ -1076,8 +1076,8 @@ define(function (require) { var mAxisData; var axisIdx = seriesItem.xAxisIndex || 0; - if (typeof optionRestore.xAxis[axisIdx].type == 'undefined' - || optionRestore.xAxis[axisIdx].type == 'category' + if (optionRestore.xAxis[axisIdx].type == null + || optionRestore.xAxis[axisIdx].type === 'category' ) { axisData = optionRestore.xAxis[axisIdx].data; mAxisData = magicOption.xAxis[axisIdx].data; @@ -1092,7 +1092,7 @@ define(function (require) { // y轴类目 axisIdx = seriesItem.yAxisIndex || 0; - if (optionRestore.yAxis[axisIdx].type == 'category') { + if (optionRestore.yAxis[axisIdx].type === 'category') { axisData = optionRestore.yAxis[axisIdx].data; mAxisData = magicOption.yAxis[axisIdx].data; @@ -1149,15 +1149,15 @@ define(function (require) { * @param {number} seriesIdx 系列索引 * @param {Object} markData [标注 | 标线]对象,支持多个 */ - addMarkPoint : function (seriesIdx, markData) { + addMarkPoint: function (seriesIdx, markData) { return this._addMark(seriesIdx, markData, 'markPoint'); }, - addMarkLine : function (seriesIdx, markData) { + addMarkLine: function (seriesIdx, markData) { return this._addMark(seriesIdx, markData, 'markLine'); }, - _addMark : function (seriesIdx, markData, markType) { + _addMark: function (seriesIdx, markData, markType) { var series = this._option.series; var seriesItem; @@ -1167,18 +1167,16 @@ define(function (require) { var markOpt = seriesItem[markType]; var markOptR = seriesRItem[markType]; - markOpt = seriesItem[markType] = markOpt || {data: []}; - markOptR = seriesRItem[markType] = markOptR || {data: []}; + markOpt = seriesItem[markType] = markOpt || {data: [ ]}; + markOptR = seriesRItem[markType] = markOptR || {data: [ ]}; for (var key in markData) { - if (key == 'data') { + if (key === 'data') { // 数据concat markOpt.data = markOpt.data.concat(markData.data); markOptR.data = markOptR.data.concat(markData.data); } - else if (typeof markData[key] != 'object' - || typeof markOpt[key] == 'undefined' - ) { + else if (typeof markData[key] != 'object' || markOpt[key] == null) { // 简单类型或新值直接赋值 markOpt[key] = markOptR[key] = markData[key]; } @@ -1201,15 +1199,15 @@ define(function (require) { * @param {number} seriesIdx 系列索引 * @param {string} markName [标注 | 标线]名称 */ - delMarkPoint : function (seriesIdx, markName) { + delMarkPoint: function (seriesIdx, markName) { return this._delMark(seriesIdx, markName, 'markPoint'); }, - delMarkLine : function (seriesIdx, markName) { + delMarkLine: function (seriesIdx, markName) { return this._delMark(seriesIdx, markName, 'markLine'); }, - _delMark : function (seriesIdx, markName, markType) { + _delMark: function (seriesIdx, markName, markType) { var series = this._option.series; var seriesItem; var mark; @@ -1231,14 +1229,14 @@ define(function (require) { for (var i = 0, l = dataArray.length; i < l; i++) { var dataItem = dataArray[i]; if (dataItem instanceof Array) { - if (dataItem[0].name == markName[0] - && dataItem[1].name == markName[1] + if (dataItem[0].name === markName[0] + && dataItem[1].name === markName[1] ) { targetIndex = i; break; } } - else if (dataItem.name == markName[0]) { + else if (dataItem.name === markName[0]) { targetIndex = i; break; } @@ -1258,14 +1256,14 @@ define(function (require) { /** * 获取当前dom */ - getDom : function () { + getDom: function () { return this.dom; }, /** * 获取当前zrender实例,可用于添加额为的shape和深度控制 */ - getZrender : function () { + getZrender: function () { return this._zr; }, @@ -1274,7 +1272,7 @@ define(function (require) { * @param {string} imgType 图片类型,支持png|jpeg,默认为png * @return imgDataURL */ - getDataURL : function (imgType) { + getDataURL: function (imgType) { if (!_canvasSupported) { return ''; } @@ -1300,7 +1298,7 @@ define(function (require) { } var bgColor = this._option.backgroundColor; - if (bgColor && bgColor.replace(' ','') == 'rgba(0,0,0,0)') { + if (bgColor && bgColor.replace(' ','') === 'rgba(0,0,0,0)') { bgColor = '#fff'; } @@ -1312,7 +1310,7 @@ define(function (require) { * @param {string} imgType 图片类型,支持png|jpeg,默认为png * @return img dom */ - getImage : function (imgType) { + getImage: function (imgType) { var title = this._optionRestore.title; var imgDom = document.createElement('img'); imgDom.src = this.getDataURL(imgType); @@ -1325,19 +1323,19 @@ define(function (require) { * @param {string} imgType 图片类型,支持png|jpeg,默认为png * @return imgDataURL */ - getConnectedDataURL : function (imgType) { + getConnectedDataURL: function (imgType) { if (!this.isConnected()) { return this.getDataURL(imgType); } var tempDom = this.dom; var imgList = { - 'self' : { - img : this.getDataURL(imgType), - left : tempDom.offsetLeft, - top : tempDom.offsetTop, - right : tempDom.offsetLeft + tempDom.offsetWidth, - bottom : tempDom.offsetTop + tempDom.offsetHeight + 'self': { + img: this.getDataURL(imgType), + left: tempDom.offsetLeft, + top: tempDom.offsetTop, + right: tempDom.offsetLeft + tempDom.offsetWidth, + bottom: tempDom.offsetTop + tempDom.offsetHeight } }; @@ -1349,11 +1347,11 @@ define(function (require) { for (var c in this._connected) { tempDom = this._connected[c].getDom(); imgList[c] = { - img : this._connected[c].getDataURL(imgType), - left : tempDom.offsetLeft, - top : tempDom.offsetTop, - right : tempDom.offsetLeft + tempDom.offsetWidth, - bottom : tempDom.offsetTop + tempDom.offsetHeight + img: this._connected[c].getDataURL(imgType), + left: tempDom.offsetLeft, + top: tempDom.offsetTop, + right: tempDom.offsetLeft + tempDom.offsetWidth, + bottom: tempDom.offsetTop + tempDom.offsetHeight }; minLeft = Math.min(minLeft, imgList[c].left); @@ -1374,17 +1372,17 @@ define(function (require) { var ImageShape = require('zrender/shape/Image'); for (var c in imgList) { zrImg.addShape(new ImageShape({ - style : { - x : imgList[c].left - minLeft, - y : imgList[c].top - minTop, - image : imgList[c].img + style: { + x: imgList[c].left - minLeft, + y: imgList[c].top - minTop, + image: imgList[c].img } })); } zrImg.render(); var bgColor = this._option.backgroundColor; - if (bgColor && bgColor.replace(/ /g, '') == 'rgba(0,0,0,0)') { + if (bgColor && bgColor.replace(/ /g, '') === 'rgba(0,0,0,0)') { bgColor = '#fff'; } @@ -1404,7 +1402,7 @@ define(function (require) { * @param {string} imgType 图片类型,支持png|jpeg,默认为png * @return img dom */ - getConnectedImage : function (imgType) { + getConnectedImage: function (imgType) { var title = this._optionRestore.title; var imgDom = document.createElement('img'); imgDom.src = this.getConnectedDataURL(imgType); @@ -1417,7 +1415,7 @@ define(function (require) { * @param {Object} eventName 事件名称 * @param {Object} eventListener 事件响应函数 */ - on : function (eventName, eventListener) { + on: function (eventName, eventListener) { this._messageCenterOutSide.bind(eventName, eventListener, this); return this; }, @@ -1427,7 +1425,7 @@ define(function (require) { * @param {Object} eventName 事件名称 * @param {Object} eventListener 事件响应函数 */ - un : function (eventName, eventListener) { + un: function (eventName, eventListener) { this._messageCenterOutSide.unbind(eventName, eventListener); return this; }, @@ -1436,13 +1434,13 @@ define(function (require) { * 多图联动 * @param connectTarget{ECharts | Array } connectTarget 联动目标 */ - connect : function (connectTarget) { + connect: function (connectTarget) { if (!connectTarget) { return this; } if (!this._connected) { - this._connected = {}; + this._connected = { }; } if (connectTarget instanceof Array) { @@ -1461,7 +1459,7 @@ define(function (require) { * 解除多图联动 * @param connectTarget{ECharts | Array } connectTarget 解除联动目标 */ - disConnect : function (connectTarget) { + disConnect: function (connectTarget) { if (!connectTarget || !this._connected) { return this; } @@ -1487,7 +1485,7 @@ define(function (require) { /** * 联动事件响应 */ - connectedEventHandler : function (param) { + connectedEventHandler: function (param) { if (param.__echartsId != this.id) { // 来自其他联动图表的事件 this._onevent(param); @@ -1497,7 +1495,7 @@ define(function (require) { /** * 是否存在多图联动 */ - isConnected : function () { + isConnected: function () { return !!this._connected; }, @@ -1505,20 +1503,20 @@ define(function (require) { * 显示loading过渡 * @param {Object} loadingOption */ - showLoading : function (loadingOption) { + showLoading: function (loadingOption) { var effectList = { - bar : require('zrender/loadingEffect/Bar'), - bubble : require('zrender/loadingEffect/Bubble'), - dynamicLine : require('zrender/loadingEffect/DynamicLine'), - ring : require('zrender/loadingEffect/Ring'), - spin : require('zrender/loadingEffect/Spin'), - whirling : require('zrender/loadingEffect/Whirling') + bar: require('zrender/loadingEffect/Bar'), + bubble: require('zrender/loadingEffect/Bubble'), + dynamicLine: require('zrender/loadingEffect/DynamicLine'), + ring: require('zrender/loadingEffect/Ring'), + spin: require('zrender/loadingEffect/Spin'), + whirling: require('zrender/loadingEffect/Whirling') }; this._toolbox.hideDataView(); - loadingOption = loadingOption || {}; + loadingOption = loadingOption || { }; - var textStyle = loadingOption.textStyle || {}; + var textStyle = loadingOption.textStyle || { }; loadingOption.textStyle = textStyle; var finalTextStyle = zrUtil.merge( @@ -1539,11 +1537,11 @@ define(function (require) { textStyle.y = loadingOption.y; } - loadingOption.effectOption = loadingOption.effectOption || {}; + loadingOption.effectOption = loadingOption.effectOption || { }; loadingOption.effectOption.textStyle = textStyle; var Effect = loadingOption.effect; - if (typeof Effect == 'string' || Effect == null) { + if (typeof Effect === 'string' || Effect == null) { Effect = effectList[loadingOption.effect || 'spin']; } this._zr.showLoading(new Effect(loadingOption.effectOption)); @@ -1553,7 +1551,7 @@ define(function (require) { /** * 隐藏loading过渡 */ - hideLoading : function () { + hideLoading: function () { this._zr.hideLoading(); return this; }, @@ -1561,7 +1559,7 @@ define(function (require) { /** * 主题设置 */ - setTheme : function (theme) { + setTheme: function (theme) { if (theme) { if (typeof theme === 'string') { // 默认主题 @@ -1573,12 +1571,12 @@ define(function (require) { } } else { - theme = theme || {}; + theme = theme || { }; } // 复位默认配置 // this._themeConfig会被别的对象引用持有 - // 所以不能改成this._themeConfig = {}; + // 所以不能改成this._themeConfig = { }; for (var key in this._themeConfig) { delete this._themeConfig[key]; } @@ -1587,10 +1585,10 @@ define(function (require) { } // 颜色数组随theme,不merge - theme.color && (this._themeConfig.color = []); + theme.color && (this._themeConfig.color = [ ]); // 默认标志图形类型列表,不merge - theme.symbolList && (this._themeConfig.symbolList = []); + theme.symbolList && (this._themeConfig.symbolList = [ ]); // 应用新主题 zrUtil.merge(this._themeConfig, zrUtil.clone(theme), true); @@ -1607,7 +1605,7 @@ define(function (require) { /** * 视图区域大小变化更新,不默认绑定,供使用方按需调用 */ - resize : function () { + resize: function () { var self = this; return function(){ self._clearEffect(); @@ -1634,26 +1632,26 @@ define(function (require) { }; }, - _clearEffect : function() { - this._zr.modLayer(ecConfig.EFFECT_ZLEVEL, {motionBlur : false}); + _clearEffect: function() { + this._zr.modLayer(ecConfig.EFFECT_ZLEVEL, { motionBlur: false }); this._zr.painter.clearLayer(ecConfig.EFFECT_ZLEVEL); }, /** * 清除已渲染内容 ,clear后echarts实例可用 */ - clear : function () { + clear: function () { this._disposeChartList(); this._zr.clear(); - this._option = {}; - this._optionRestore = {}; + this._option = { }; + this._optionRestore = { }; return this; }, /** * 释放,dispose后echarts实例不可用 */ - dispose : function () { + dispose: function () { var key = this.dom.getAttribute(DOM_ATTRIBUTE_KEY); key && delete _instances[key]; diff --git a/src/util/mapData/geoCoord.js b/src/util/mapData/geoCoord.js index c98c27651f17fa48f61459971643ee78ad3a5c7d..b8d4bd6691cf1243f8991d26385a1458baa4501d 100644 --- a/src/util/mapData/geoCoord.js +++ b/src/util/mapData/geoCoord.js @@ -3,7 +3,7 @@ */ define(function() { return { - 'Russia' : [100, 60], - 'United States of America' : [-99, 38] + 'Russia': [ 100, 60 ], + 'United States of America': [ -99, 38 ] }; }); \ No newline at end of file diff --git a/src/util/mapData/params.js b/src/util/mapData/params.js index df44dabc0cfbfe4377e165ca5b6621e274d2934b..cce76a6be9569830972fdc1f7fcf0d4664e98244 100644 --- a/src/util/mapData/params.js +++ b/src/util/mapData/params.js @@ -65,7 +65,7 @@ define(function (require) { } var mapParams = { - 'none' : { + 'none': { getGeoJson: function(callback) { callback({ type: 'FeatureCollection', @@ -97,10 +97,10 @@ define(function (require) { }); } }, - '南海诸岛' : { - textCoord : [126, 25], - getPath : function (leftTop, scale) { - // scale.x : width = 10.51 : 64 + '南海诸岛': { + textCoord: [126, 25], + getPath: function (leftTop, scale) { + // scale.x: width = 10.51 : 64 var pList = [ [ [0,3.5],[7,11.2],[15,11.9],[30,7],[42,0.7],[52,0.7], @@ -402,7 +402,7 @@ define(function (require) { }; return { - decode : decode, - params : mapParams + decode: decode, + params: mapParams }; }); \ No newline at end of file diff --git a/src/util/projection/normal.js b/src/util/projection/normal.js index 1c044d8cb949c13c93c8308fa894f33bc2e47813..fe6630d63e1ab49a8a09a2434621b9abf51a6177 100644 --- a/src/util/projection/normal.js +++ b/src/util/projection/normal.js @@ -48,10 +48,10 @@ define(function() { } json.srcSize = { - left : convertorParse.xmin.toFixed(4)*1, - top : convertorParse.ymin.toFixed(4)*1, - width : (convertorParse.xmax - convertorParse.xmin).toFixed(4)*1, - height : (convertorParse.ymax - convertorParse.ymin).toFixed(4)*1 + left: convertorParse.xmin.toFixed(4)*1, + top: convertorParse.ymin.toFixed(4)*1, + width: (convertorParse.xmax - convertorParse.xmin).toFixed(4)*1, + height: (convertorParse.ymax - convertorParse.ymin).toFixed(4)*1 }; return json; @@ -59,13 +59,13 @@ define(function() { var convertor = { //调整俄罗斯东部到地图右侧与俄罗斯相连 - formatPoint : function (p) { + formatPoint: function (p) { return [ ((p[0] < -168.5 && p[1] > 63.8) ? p[0] + 360 : p[0]) + 168.5, 90 - p[1] ]; }, - makePoint : function (p) { + makePoint: function (p) { var self = this; var point = self.formatPoint(p); // for cp @@ -79,11 +79,11 @@ define(function() { + convertor.offset.top; return [x, y]; }, - Point : function (coordinates) { + Point: function (coordinates) { coordinates = this.makePoint(coordinates); return coordinates.join(','); }, - LineString : function (coordinates) { + LineString: function (coordinates) { var str = ''; var point; for (var i = 0, len = coordinates.length; i < len; i++) { @@ -96,28 +96,28 @@ define(function() { } return str; }, - Polygon : function (coordinates) { + Polygon: function (coordinates) { var str = ''; for (var i = 0, len = coordinates.length; i < len; i++) { str = str + convertor.LineString(coordinates[i]) + 'z'; } return str; }, - MultiPoint : function (coordinates) { + MultiPoint: function (coordinates) { var arr = []; for (var i = 0, len = coordinates.length; i < len; i++) { arr.push(convertor.Point(coordinates[i])); } return arr; }, - MultiLineString : function (coordinates) { + MultiLineString: function (coordinates) { var str = ''; for (var i = 0, len = coordinates.length; i < len; i++) { str += convertor.LineString(coordinates[i]); } return str; }, - MultiPolygon : function (coordinates) { + MultiPolygon: function (coordinates) { var str = ''; for (var i = 0, len = coordinates.length; i < len; i++) { str += convertor.Polygon(coordinates[i]); @@ -127,9 +127,9 @@ define(function() { }; var convertorParse = { - formatPoint : convertor.formatPoint, + formatPoint: convertor.formatPoint, - makePoint : function (p) { + makePoint: function (p) { var self = this; var point = self.formatPoint(p); var x = point[0]; @@ -139,30 +139,30 @@ define(function() { if (self.ymin > y) { self.ymin = y; } if (self.ymax < y) { self.ymax = y; } }, - Point : function (coordinates) { + Point: function (coordinates) { this.makePoint(coordinates); }, - LineString : function (coordinates) { + LineString: function (coordinates) { for (var i = 0, len = coordinates.length; i < len; i++) { this.makePoint(coordinates[i]); } }, - Polygon : function (coordinates) { + Polygon: function (coordinates) { for (var i = 0, len = coordinates.length; i < len; i++) { this.LineString(coordinates[i]); } }, - MultiPoint : function (coordinates) { + MultiPoint: function (coordinates) { for (var i = 0, len = coordinates.length; i < len; i++) { this.Point(coordinates[i]); } }, - MultiLineString : function (coordinates) { + MultiLineString: function (coordinates) { for (var i = 0, len = coordinates.length; i < len; i++) { this.LineString(coordinates[i]); } }, - MultiPolygon : function (coordinates) { + MultiPolygon: function (coordinates) { for (var i = 0, len = coordinates.length; i < len; i++) { this.Polygon(coordinates[i]); } @@ -179,10 +179,10 @@ define(function() { } transform.offset = { - x : json.srcSize.left, - y : json.srcSize.top, - left : transform.OffsetLeft || 0, - top : transform.OffsetTop || 0 + x: json.srcSize.left, + y: json.srcSize.top, + left: transform.OffsetLeft || 0, + top: transform.OffsetTop || 0 }; convertor.scale = transform.scale; @@ -218,23 +218,23 @@ define(function() { shapeType = gm.type; shapeCoordinates = gm.coordinates; convertor._bbox = { - xmin : 360, - xmax : -360, - ymin : 180, - ymax : -180 + xmin: 360, + xmax: -360, + ymin: 180, + ymax: -180 }; str = convertor[shapeType](shapeCoordinates); pathArray.push({ - //type : shapeType, - path : str, - cp : shape.properties.cp - ? convertor.makePoint(shape.properties.cp) - : convertor.makePoint([ - (convertor._bbox.xmin + convertor._bbox.xmax) / 2, - (convertor._bbox.ymin + convertor._bbox.ymax) / 2 - ]), - properties : shape.properties, - id : shape.id + // type: shapeType, + path: str, + cp: shape.properties.cp + ? convertor.makePoint(shape.properties.cp) + : convertor.makePoint([ + (convertor._bbox.xmin + convertor._bbox.xmax) / 2, + (convertor._bbox.ymin + convertor._bbox.ymax) / 2 + ]), + properties: shape.properties, + id: shape.id }); } @@ -276,9 +276,9 @@ define(function() { } return { - getBbox : getBbox, - geoJson2Path : geoJson2Path, - pos2geo : pos2geo, - geo2pos : geo2pos + getBbox: getBbox, + geoJson2Path: geoJson2Path, + pos2geo: pos2geo, + geo2pos: geo2pos }; }); \ No newline at end of file diff --git a/src/util/projection/svg.js b/src/util/projection/svg.js index 90e97bc65a5e56d78e49530b8dd581e90d890eed..9f07231615262e24974c5b96587a1c2b51f1c75a 100644 --- a/src/util/projection/svg.js +++ b/src/util/projection/svg.js @@ -25,10 +25,10 @@ define(function(require) { var width = toFloat(svgNode.getAttribute('width')); var height = toFloat(svgNode.getAttribute('height')); return { - left : x, - top : y, - width : width, - height : height + left: x, + top: y, + width: width, + height: height }; } @@ -44,7 +44,7 @@ define(function(require) { // Common attributes obj.scale = scale; obj.properties = { - name : root.getAttribute('name') || '' + name: root.getAttribute('name') || '' }; obj.id = root.id; extendCommonAttributes(obj, root); @@ -126,11 +126,11 @@ define(function(require) { var shapeBuilders = { path: function(xmlNode, scale) { var path = xmlNode.getAttribute('d'); - var rect = PathShape.prototype.getRect({path : path}); + var rect = PathShape.prototype.getRect({ path : path }); return { shapeType: 'path', - path : path, - cp : [ + path: path, + cp: [ (rect.x + rect.width / 2) * scale[0], (rect.y + rect.height / 2) * scale[1] ] @@ -149,7 +149,7 @@ define(function(require) { y: y, width: width, height: height, - cp : [ + cp: [ (x + width / 2) * scale[0], (y + height / 2) * scale[1] ] @@ -168,7 +168,7 @@ define(function(require) { yStart: y1, xEnd: x2, yEnd: y2, - cp : [ + cp: [ (x1 + x2) * 0.5 * scale[0], (y1 + y2) * 0.5 * scale[1] ] @@ -231,7 +231,7 @@ define(function(require) { return { shapeType: 'polygon', pointList: points, - cp : [ + cp: [ (min[0] + max[0]) / 2 * scale[0], (min[1] + max[1]) / 2 * scale[0] ] @@ -246,9 +246,9 @@ define(function(require) { }; return { - getBbox : getBbox, - geoJson2Path : geoJson2Path, - pos2geo : pos2geo, - geo2pos : geo2pos + getBbox: getBbox, + geoJson2Path: geoJson2Path, + pos2geo: pos2geo, + geo2pos: geo2pos }; }); \ No newline at end of file diff --git a/src/util/shape/Chord.js b/src/util/shape/Chord.js deleted file mode 100644 index 674e92cd42a3880a03299afe2c73f2b56ad6ecbe..0000000000000000000000000000000000000000 --- a/src/util/shape/Chord.js +++ /dev/null @@ -1,118 +0,0 @@ -/** - * zrender - * - * @author pissang (https://github.com/pissang) - * - * shape类:chord - * 可配图形属性: - { - // 基础属性 - shape : 'chord', // 必须,shape类标识,需要显式指定 - id : {string}, // 必须,图形唯一标识,可通过'zrender/tool/guid'方法生成 - zlevel : {number}, // 默认为0,z层level,决定绘画在哪层canvas中 - invisible : {boolean}, // 默认为false,是否可见 - - // 样式属性,默认状态样式样式属性 - style : { - center : {array}, - source0 : {number}, - source1 : {number}, - target0 : {number}, - target1 : {number}, - r : {number}, - }, - - // 样式属性,高亮样式属性,当不存在highlightStyle时使用基于默认样式扩展显示 - highlightStyle : { - // 同style - } - - // 交互属性,详见shape.Base - - // 事件属性,详见shape.Base - } - */ -define(function (require) { - var Base = require('zrender/shape/Base'); - var zrUtil = require('zrender/tool/util'); - var _ctx = zrUtil.getContext(); - - function ChordShape(options) { - Base.call(this, options); - } - - ChordShape.prototype = { - type : 'chord', - - // center, source0, source1, target0, target1, r - buildPath : function (ctx, style) { - var PI2 = Math.PI * 2; - var cx = style.center[0]; - var cy = style.center[1]; - var r = style.r; - var s0 = style.source0 / 180 * Math.PI; - var s1 = style.source1 / 180 * Math.PI; - var t0 = style.target0 / 180 * Math.PI; - var t1 = style.target1 / 180 * Math.PI; - var sx0 = cx + Math.cos(PI2 - s0) * r; - var sy0 = cy - Math.sin(PI2 - s0) * r; - var sx1 = cx + Math.cos(PI2 - s1) * r; - var sy1 = cy - Math.sin(PI2 - s1) * r; - var tx0 = cx + Math.cos(PI2 - t0) * r; - var ty0 = cy - Math.sin(PI2 - t0) * r; - var tx1 = cx + Math.cos(PI2 - t1) * r; - var ty1 = cy - Math.sin(PI2 - t1) * r; - - ctx.moveTo(sx0, sy0); - ctx.arc(cx, cy, style.r, s0, s1, false); - ctx.bezierCurveTo( - (cx - sx1) * 0.70 + sx1, - (cy - sy1) * 0.70 + sy1, - (cx - tx0) * 0.70 + tx0, - (cy - ty0) * 0.70 + ty0, - tx0, ty0 - ); - // Chord to self - if (style.source0 === style.target0 && - style.source1 === style.target1) { - return; - } - ctx.arc(cx, cy, style.r, t0, t1, false); - ctx.bezierCurveTo( - (cx - tx1) * 0.70 + tx1, - (cy - ty1) * 0.70 + ty1, - (cx - sx0) * 0.70 + sx0, - (cy - sy0) * 0.70 + sy0, - sx0, sy0 - ); - }, - - getRect : function (){ - return { - x : 0, - y : 0, - width : 0, - height : 0 - }; - }, - - isCover : function (x, y) { - if (!_ctx.isPointInPath) { // In ie - return false; - } - var originPos = this.getTansform(x, y); - x = originPos[0]; - y = originPos[1]; - - _ctx.beginPath(); - ChordShape.prototype.buildPath.call(null, _ctx, this.style); - _ctx.closePath(); - - return _ctx.isPointInPath(x, y); - } - }; - - zrUtil.inherits(ChordShape, Base); - - return ChordShape; -}); \ No newline at end of file diff --git a/src/util/shape/HalfSmoothPolygon.js b/src/util/shape/HalfSmoothPolygon.js index 2a42eef1f3a852faf0d031b36ad51ae2c0bf74a0..b1afc8192ea2f3f03a2cb6e81769db865408e1fc 100644 --- a/src/util/shape/HalfSmoothPolygon.js +++ b/src/util/shape/HalfSmoothPolygon.js @@ -68,7 +68,7 @@ define(function (require) { } if (style.smooth) { var controlPoints = smoothBezier( - pointList.slice(0, -2), style.smooth + pointList.slice(0, -2), style.smooth, false, style.smoothConstraint ); ctx.moveTo(pointList[0][0], pointList[0][1]); diff --git a/src/util/shape/Ribbon.js b/src/util/shape/Ribbon.js new file mode 100644 index 0000000000000000000000000000000000000000..7416092044ec597a05d98c3ecc885a68f847aa24 --- /dev/null +++ b/src/util/shape/Ribbon.js @@ -0,0 +1,125 @@ +/** + * @module echarts/util/shape/Ribbon + * @author pissang (https://github.com/pissang) + */ +/** + * @typedef {Object} IRibbonStyle + * @property {number} x + * @property {number} y + * @property {number} source0 + * @property {number} source1 + * @property {number} target0 + * @property {number} target1 + * @property {number} r + * @property {string} [brushType='fill'] + * @property {string} [color='#000000'] 填充颜色 + * @property {string} [strokeColor='#000000'] 描边颜色 + * @property {string} [lineCape='butt'] 线帽样式,可以是 butt, round, square + * @property {number} [lineWidth=1] 描边宽度 + * @property {number} [opacity=1] 绘制透明度 + * @property {number} [shadowBlur=0] 阴影模糊度,大于0有效 + * @property {string} [shadowColor='#000000'] 阴影颜色 + * @property {number} [shadowOffsetX=0] 阴影横向偏移 + * @property {number} [shadowOffsetY=0] 阴影纵向偏移 + * @property {string} [text] 图形中的附加文本 + * @property {string} [textColor='#000000'] 文本颜色 + * @property {string} [textFont] 附加文本样式,eg:'bold 18px verdana' + * @property {string} [textPosition='end'] 附加文本位置, 可以是 inside, left, right, top, bottom + * @property {string} [textAlign] 默认根据textPosition自动设置,附加文本水平对齐。 + * 可以是start, end, left, right, center + * @property {string} [textBaseline] 默认根据textPosition自动设置,附加文本垂直对齐。 + * 可以是top, bottom, middle, alphabetic, hanging, ideographic + */ +define(function (require) { + var Base = require('zrender/shape/Base'); + var PathProxy = require('zrender/shape/util/PathProxy'); + var zrUtil = require('zrender/tool/util'); + var area = require('zrender/tool/area'); + + var _ctx = zrUtil.getContext(); + + function RibbonShape(options) { + Base.call(this, options); + + this._pathProxy = new PathProxy(); + } + + RibbonShape.prototype = { + type : 'chord', + + // center, source0, source1, target0, target1, r + buildPath : function (ctx, style) { + + var path = this._pathProxy; + path.begin(ctx); + + var PI2 = Math.PI * 2; + var cx = style.x; + var cy = style.y; + var r = style.r; + var s0 = style.source0 / 180 * Math.PI; + var s1 = style.source1 / 180 * Math.PI; + var t0 = style.target0 / 180 * Math.PI; + var t1 = style.target1 / 180 * Math.PI; + var sx0 = cx + Math.cos(PI2 - s0) * r; + var sy0 = cy - Math.sin(PI2 - s0) * r; + var sx1 = cx + Math.cos(PI2 - s1) * r; + var sy1 = cy - Math.sin(PI2 - s1) * r; + var tx0 = cx + Math.cos(PI2 - t0) * r; + var ty0 = cy - Math.sin(PI2 - t0) * r; + var tx1 = cx + Math.cos(PI2 - t1) * r; + var ty1 = cy - Math.sin(PI2 - t1) * r; + + path.moveTo(sx0, sy0); + path.arc(cx, cy, style.r, s0, s1, false); + path.bezierCurveTo( + (cx - sx1) * 0.70 + sx1, + (cy - sy1) * 0.70 + sy1, + (cx - tx0) * 0.70 + tx0, + (cy - ty0) * 0.70 + ty0, + tx0, ty0 + ); + // Chord to self + if (style.source0 === style.target0 + && style.source1 === style.target1 + ) { + return; + } + path.arc(cx, cy, style.r, t0, t1, false); + path.bezierCurveTo( + (cx - tx1) * 0.70 + tx1, + (cy - ty1) * 0.70 + ty1, + (cx - sx0) * 0.70 + sx0, + (cy - sy0) * 0.70 + sy0, + sx0, sy0 + ); + }, + + getRect : function (style) { + if (style.__rect) { + return style.__rect; + } + if (!this._pathProxy.isEmpty()) { + this.buildPath(null, style); + } + return this._pathProxy.fastBoundingRect(); + }, + + isCover : function (x, y) { + var rect = this.getRect(this.style); + if (x >= rect.x + && x <= (rect.x + rect.width) + && y >= rect.y + && y <= (rect.y + rect.height) + ) { + return area.isInsidePath( + this._pathProxy.pathCommands, 0, 'fill', x, y + ); + } + } + }; + + zrUtil.inherits(RibbonShape, Base); + + return RibbonShape; +}); \ No newline at end of file