define('echarts/chart/funnel', [ 'require', './base', 'zrender/shape/Text', 'zrender/shape/Line', 'zrender/shape/Polygon', '../config', '../util/ecData', '../util/number', 'zrender/tool/util', 'zrender/tool/color', 'zrender/tool/area', '../chart' ], function (require) { var ChartBase = require('./base'); var TextShape = require('zrender/shape/Text'); var LineShape = require('zrender/shape/Line'); var PolygonShape = require('zrender/shape/Polygon'); var ecConfig = require('../config'); ecConfig.funnel = { zlevel: 0, z: 2, clickable: true, legendHoverLink: true, x: 80, y: 60, x2: 80, y2: 60, min: 0, max: 100, minSize: '0%', maxSize: '100%', sort: 'descending', gap: 0, funnelAlign: 'center', itemStyle: { normal: { borderColor: '#fff', borderWidth: 1, label: { show: true, position: 'outer' }, labelLine: { show: true, length: 10, lineStyle: { width: 1, type: 'solid' } } }, emphasis: { borderColor: 'rgba(0,0,0,0)', borderWidth: 1, label: { show: true }, labelLine: { show: true } } } }; var ecData = require('../util/ecData'); var number = require('../util/number'); var zrUtil = require('zrender/tool/util'); var zrColor = require('zrender/tool/color'); var zrArea = require('zrender/tool/area'); function Funnel(ecTheme, messageCenter, zr, option, myChart) { ChartBase.call(this, ecTheme, messageCenter, zr, option, myChart); this.refresh(option); } Funnel.prototype = { type: ecConfig.CHART_TYPE_FUNNEL, _buildShape: function () { var series = this.series; var legend = this.component.legend; this._paramsMap = {}; this._selected = {}; this.selectedMap = {}; var serieName; for (var i = 0, l = series.length; i < l; i++) { if (series[i].type === ecConfig.CHART_TYPE_FUNNEL) { series[i] = this.reformOption(series[i]); this.legendHoverLink = series[i].legendHoverLink || this.legendHoverLink; serieName = series[i].name || ''; this.selectedMap[serieName] = legend ? legend.isSelected(serieName) : true; if (!this.selectedMap[serieName]) { continue; } this._buildSingleFunnel(i); this.buildMark(i); } } this.addShapeList(); }, _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 }; var itemName; var total = 0; var selectedData = []; for (var i = 0, l = data.length; i < l; i++) { itemName = data[i].name; this.selectedMap[itemName] = legend ? legend.isSelected(itemName) : true; if (this.selectedMap[itemName] && !isNaN(data[i].value)) { selectedData.push(data[i]); total++; } } if (total === 0) { return; } var funnelCase = this._buildFunnelCase(seriesIndex); var align = serie.funnelAlign; var gap = serie.gap; var height = total > 1 ? (location.height - (total - 1) * gap) / total : location.height; var width; var lastY = location.y; 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 centerX = location.centerX; var pointList = []; var x; var polygon; var lastPolygon; for (var i = 0, l = selectedData.length; i < l; i++) { itemName = selectedData[i].name; if (this.selectedMap[itemName] && !isNaN(selectedData[i].value)) { width = i <= l - 2 ? this._getItemWidth(seriesIndex, selectedData[i + next].value) : serie.sort === 'descending' ? number.parsePercent(serie.minSize, location.width) : number.parsePercent(serie.maxSize, location.width); switch (align) { case 'left': x = location.x; break; case 'right': x = location.x + location.width - lastWidth; break; default: x = centerX - lastWidth / 2; } polygon = this._buildItem(seriesIndex, selectedData[i]._index, legend ? legend.getColor(itemName) : this.zr.getColor(selectedData[i]._index), x, lastY, lastWidth, width, height, align); lastY += height + gap; lastPolygon = polygon.style.pointList; pointList.unshift([ lastPolygon[0][0] - 10, lastPolygon[0][1] ]); pointList.push([ lastPolygon[1][0] + 10, lastPolygon[1][1] ]); if (i === 0) { if (lastWidth === 0) { lastPolygon = pointList.pop(); align == 'center' && (pointList[0][0] += 10); align == 'right' && (pointList[0][0] = lastPolygon[0]); pointList[0][1] -= align == 'center' ? 10 : 15; if (l == 1) { lastPolygon = polygon.style.pointList; } } else { pointList[pointList.length - 1][1] -= 5; pointList[0][1] -= 5; } } lastWidth = width; } } if (funnelCase) { pointList.unshift([ lastPolygon[3][0] - 10, lastPolygon[3][1] ]); pointList.push([ lastPolygon[2][0] + 10, lastPolygon[2][1] ]); if (lastWidth === 0) { lastPolygon = pointList.pop(); align == 'center' && (pointList[0][0] += 10); align == 'right' && (pointList[0][0] = lastPolygon[0]); pointList[0][1] += align == 'center' ? 10 : 15; } else { pointList[pointList.length - 1][1] += 5; pointList[0][1] += 5; } funnelCase.style.pointList = pointList; } }, _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: [ [ 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 || ecConfig.calculableHolderColor } }; ecData.pack(funnelCase, serie, seriesIndex, undefined, -1); this.setCalculable(funnelCase); funnelCase = new PolygonShape(funnelCase); this.shapeList.push(funnelCase); return funnelCase; } }, _getLocation: function (seriesIndex) { var gridOption = this.series[seriesIndex]; var zrWidth = this.zr.getWidth(); var zrHeight = this.zr.getHeight(); var x = this.parsePercent(gridOption.x, zrWidth); var y = this.parsePercent(gridOption.y, zrHeight); var width = gridOption.width == null ? zrWidth - x - this.parsePercent(gridOption.x2, zrWidth) : this.parsePercent(gridOption.width, zrWidth); return { x: x, y: y, width: width, height: gridOption.height == null ? zrHeight - y - this.parsePercent(gridOption.y2, zrHeight) : this.parsePercent(gridOption.height, zrHeight), centerX: x + width / 2 }; }, _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 === '-') { return 1; } else if (b.value === '-') { return -1; } return b.value - a.value; } function numAscending(a, b) { return -numDescending(a, b); } if (serie.sort != 'none') { funnelData.sort(serie.sort === 'descending' ? numDescending : numAscending); } return funnelData; }, _buildItem: function (seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height, align) { var series = this.series; var serie = series[seriesIndex]; var data = serie.data[dataIndex]; var polygon = this.getPolygon(seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height, align); ecData.pack(polygon, series[seriesIndex], seriesIndex, series[seriesIndex].data[dataIndex], dataIndex, series[seriesIndex].data[dataIndex].name); this.shapeList.push(polygon); var label = this.getLabel(seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height, align); ecData.pack(label, series[seriesIndex], seriesIndex, series[seriesIndex].data[dataIndex], dataIndex, series[seriesIndex].data[dataIndex].name); this.shapeList.push(label); if (!this._needLabel(serie, data, false)) { label.invisible = true; } var labelLine = this.getLabelLine(seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height, align); this.shapeList.push(labelLine); if (!this._needLabelLine(serie, data, false)) { labelLine.invisible = true; } var polygonHoverConnect = []; var labelHoverConnect = []; if (this._needLabelLine(serie, data, true)) { polygonHoverConnect.push(labelLine.id); labelHoverConnect.push(labelLine.id); } if (this._needLabel(serie, data, true)) { polygonHoverConnect.push(label.id); labelHoverConnect.push(polygon.id); } polygon.hoverConnect = polygonHoverConnect; label.hoverConnect = labelHoverConnect; return polygon; }, _getItemWidth: function (seriesIndex, value) { var serie = this.series[seriesIndex]; var location = this._paramsMap[seriesIndex].location; var min = serie.min; var max = serie.max; var minSize = number.parsePercent(serie.minSize, location.width); var maxSize = number.parsePercent(serie.maxSize, location.width); return (value - min) * (maxSize - minSize) / (max - min) + minSize; }, getPolygon: function (seriesIndex, dataIndex, defaultColor, xLT, y, topWidth, bottomWidth, height, align) { var serie = this.series[seriesIndex]; var data = serie.data[dataIndex]; var queryTarget = [ data, serie ]; var normal = this.deepMerge(queryTarget, 'itemStyle.normal') || {}; var emphasis = this.deepMerge(queryTarget, 'itemStyle.emphasis') || {}; var normalColor = this.getItemStyleColor(normal.color, seriesIndex, dataIndex, data) || defaultColor; var emphasisColor = this.getItemStyleColor(emphasis.color, seriesIndex, dataIndex, data) || (typeof normalColor === 'string' ? zrColor.lift(normalColor, -0.2) : normalColor); var xLB; switch (align) { case 'left': xLB = xLT; break; case 'right': xLB = xLT + (topWidth - bottomWidth); break; default: xLB = xLT + (topWidth - bottomWidth) / 2; break; } var polygon = { zlevel: serie.zlevel, z: serie.z, clickable: this.deepQuery(queryTarget, 'clickable'), style: { pointList: [ [ xLT, y ], [ xLT + topWidth, y ], [ xLB + bottomWidth, y + height ], [ xLB, y + height ] ], brushType: 'both', color: normalColor, lineWidth: normal.borderWidth, strokeColor: normal.borderColor }, highlightStyle: { color: emphasisColor, lineWidth: emphasis.borderWidth, strokeColor: emphasis.borderColor } }; if (this.deepQuery([ data, serie, this.option ], 'calculable')) { this.setCalculable(polygon); polygon.draggable = true; } return new PolygonShape(polygon); }, getLabel: function (seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height, align) { var serie = this.series[seriesIndex]; var data = serie.data[dataIndex]; var location = this._paramsMap[seriesIndex].location; var itemStyle = zrUtil.merge(zrUtil.clone(data.itemStyle) || {}, serie.itemStyle); var status = 'normal'; var labelControl = itemStyle[status].label; var textStyle = labelControl.textStyle || {}; var lineLength = itemStyle[status].labelLine.length; var text = this.getLabelText(seriesIndex, dataIndex, status); var textFont = this.getFont(textStyle); var textAlign; var textColor = defaultColor; labelControl.position = labelControl.position || itemStyle.normal.label.position; if (labelControl.position === 'inner' || labelControl.position === 'inside' || labelControl.position === 'center') { textAlign = align; textColor = Math.max(topWidth, bottomWidth) / 2 > zrArea.getTextWidth(text, textFont) ? '#fff' : zrColor.reverse(defaultColor); } else if (labelControl.position === 'left') { textAlign = 'right'; } else { textAlign = 'left'; } var textShape = { zlevel: serie.zlevel, z: serie.z + 1, style: { x: this._getLabelPoint(labelControl.position, x, location, topWidth, bottomWidth, lineLength, align), y: y + height / 2, color: textStyle.color || textColor, text: text, textAlign: textStyle.align || textAlign, textBaseline: textStyle.baseline || 'middle', textFont: textFont } }; status = 'emphasis'; labelControl = itemStyle[status].label || labelControl; textStyle = labelControl.textStyle || textStyle; lineLength = itemStyle[status].labelLine.length || lineLength; labelControl.position = labelControl.position || itemStyle.normal.label.position; text = this.getLabelText(seriesIndex, dataIndex, status); textFont = this.getFont(textStyle); textColor = defaultColor; if (labelControl.position === 'inner' || labelControl.position === 'inside' || labelControl.position === 'center') { textAlign = align; textColor = Math.max(topWidth, bottomWidth) / 2 > zrArea.getTextWidth(text, textFont) ? '#fff' : zrColor.reverse(defaultColor); } else if (labelControl.position === 'left') { textAlign = 'right'; } else { textAlign = 'left'; } textShape.highlightStyle = { x: this._getLabelPoint(labelControl.position, x, location, topWidth, bottomWidth, lineLength, align), color: textStyle.color || textColor, text: text, textAlign: textStyle.align || textAlign, textFont: textFont, brushType: 'fill' }; return new TextShape(textShape); }, getLabelText: function (seriesIndex, dataIndex, status) { var series = this.series; var serie = series[seriesIndex]; var data = serie.data[dataIndex]; var formatter = this.deepQuery([ data, serie ], 'itemStyle.' + status + '.label.formatter'); if (formatter) { if (typeof formatter === 'function') { return formatter.call(this.myChart, { seriesIndex: seriesIndex, seriesName: serie.name || '', series: serie, dataIndex: dataIndex, data: data, name: data.name, value: data.value }); } else if (typeof formatter === 'string') { formatter = formatter.replace('{a}', '{a0}').replace('{b}', '{b0}').replace('{c}', '{c0}').replace('{a0}', serie.name).replace('{b0}', data.name).replace('{c0}', data.value); return formatter; } } else { return data.name; } }, getLabelLine: function (seriesIndex, dataIndex, defaultColor, x, y, topWidth, bottomWidth, height, align) { var serie = this.series[seriesIndex]; var data = serie.data[dataIndex]; var location = this._paramsMap[seriesIndex].location; var itemStyle = zrUtil.merge(zrUtil.clone(data.itemStyle) || {}, serie.itemStyle); var status = 'normal'; var labelLineControl = itemStyle[status].labelLine; var lineLength = itemStyle[status].labelLine.length; var lineStyle = labelLineControl.lineStyle || {}; var labelControl = itemStyle[status].label; labelControl.position = labelControl.position || itemStyle.normal.label.position; var lineShape = { zlevel: serie.zlevel, z: serie.z + 1, hoverable: false, style: { xStart: this._getLabelLineStartPoint(x, location, topWidth, bottomWidth, align), yStart: y + height / 2, xEnd: this._getLabelPoint(labelControl.position, x, location, topWidth, bottomWidth, lineLength, align), yEnd: y + height / 2, strokeColor: lineStyle.color || defaultColor, lineType: lineStyle.type, lineWidth: lineStyle.width } }; status = 'emphasis'; labelLineControl = itemStyle[status].labelLine || labelLineControl; lineLength = itemStyle[status].labelLine.length || lineLength; lineStyle = labelLineControl.lineStyle || lineStyle; labelControl = itemStyle[status].label || labelControl; labelControl.position = labelControl.position; lineShape.highlightStyle = { xEnd: this._getLabelPoint(labelControl.position, x, location, topWidth, bottomWidth, lineLength, align), strokeColor: lineStyle.color || defaultColor, lineType: lineStyle.type, lineWidth: lineStyle.width }; return new LineShape(lineShape); }, _getLabelPoint: function (position, x, location, topWidth, bottomWidth, lineLength, align) { position = position === 'inner' || position === 'inside' ? 'center' : position; switch (position) { case 'center': return align == 'center' ? x + topWidth / 2 : align == 'left' ? x + 10 : x + topWidth - 10; case 'left': if (lineLength === 'auto') { return location.x - 10; } else { return align == 'center' ? location.centerX - Math.max(topWidth, bottomWidth) / 2 - lineLength : align == 'right' ? x - (topWidth < bottomWidth ? bottomWidth - topWidth : 0) - lineLength : location.x - lineLength; } break; default: if (lineLength === 'auto') { return location.x + location.width + 10; } else { return align == 'center' ? location.centerX + Math.max(topWidth, bottomWidth) / 2 + lineLength : align == 'right' ? location.x + location.width + lineLength : x + Math.max(topWidth, bottomWidth) + lineLength; } } }, _getLabelLineStartPoint: function (x, location, topWidth, bottomWidth, align) { return align == 'center' ? location.centerX : topWidth < bottomWidth ? x + Math.min(topWidth, bottomWidth) / 2 : x + Math.max(topWidth, bottomWidth) / 2; }, _needLabel: function (serie, data, isEmphasis) { return this.deepQuery([ data, serie ], 'itemStyle.' + (isEmphasis ? 'emphasis' : 'normal') + '.label.show'); }, _needLabelLine: function (serie, data, isEmphasis) { return this.deepQuery([ data, serie ], 'itemStyle.' + (isEmphasis ? 'emphasis' : 'normal') + '.labelLine.show'); }, refresh: function (newOption) { if (newOption) { this.option = newOption; this.series = newOption.series; } this.backupShapeList(); this._buildShape(); } }; zrUtil.inherits(Funnel, ChartBase); require('../chart').define('funnel', Funnel); return Funnel; });