diff --git a/src/component/legend/LegendView.js b/src/component/legend/LegendView.js index 07bf7c27e54bec279649e55d2dd2d33b0c5b1ed0..abbbec00338fb91395be756903b7fb04ca0b7e3b 100644 --- a/src/component/legend/LegendView.js +++ b/src/component/legend/LegendView.js @@ -5,6 +5,7 @@ define(function (require) { var graphic = require('../../util/graphic'); var layout = require('../../util/layout'); + var formatUtil = require('../../util/format'); var LEGEND_DISABLE_COLOR = '#ccc'; @@ -21,6 +22,7 @@ define(function (require) { var y = legendModel.get('y'); var x2 = legendModel.get('x2'); var y2 = legendModel.get('y2'); + if (!x && !x2) { x = 'center'; } @@ -123,11 +125,43 @@ define(function (require) { }, this); layout.box( - legendModel.get('orient'), group, + legendModel.get('orient'), + group, legendModel.get('itemGap') ); positionGroup(group, legendModel, api); + + // Render backgroun after group is positioned + // Or will get rect of group with padding + // FIXME + this._renderBG(legendModel, group) + }, + + // FIXME 通用? + _renderBG: function (legendModel, group) { + var padding = formatUtil.normalizeCssArray( + legendModel.get('padding') + ); + var boundingRect = group.getBoundingRect(); + var rect = new graphic.Rect({ + shape: { + x: boundingRect.x - padding[3], + y: boundingRect.y - padding[0], + width: boundingRect.width + padding[1] + padding[3], + height: boundingRect.height + padding[0] + padding[2] + }, + style: { + stroke: legendModel.get('borderColor'), + fill: legendModel.get('backgroundColor'), + lineWidth: legendModel.get('borderWidth') + }, + // Behind item elements + z2: -1 + }); + graphic.subPixelOptimizeRect(rect); + + group.add(rect); }, _createItem: function ( diff --git a/src/component/title.js b/src/component/title.js index a909bdb68490de707dbf6507f0803cd5544ec25a..bc8d47682f02d6060d4f6804d9191913fba75266 100644 --- a/src/component/title.js +++ b/src/component/title.js @@ -5,6 +5,7 @@ define(function(require) { var echarts = require('../echarts'); var graphic = require('../util/graphic'); var layout = require('../util/layout'); + var formatUtil = require('../util/format'); // Model echarts.extendComponentModel({ @@ -140,7 +141,7 @@ define(function(require) { }, { width: api.getWidth(), height: api.getHeight() - }, null, true, false + }, titleModel.get('padding'), true, false ); // Adjust text align based on position if (!textAlign) { @@ -157,6 +158,32 @@ define(function(require) { } } textEl.style.textAlign = subTextEl.style.textAlign = textAlign; + textEl.dirty(); + subTextEl.dirty(); + + // Render background + var padding = formatUtil.normalizeCssArray( + titleModel.get('padding') + ); + var boundingRect = group.getBoundingRect(); + var rect = new graphic.Rect({ + shape: { + x: boundingRect.x - padding[3], + y: boundingRect.y - padding[0], + width: boundingRect.width + padding[1] + padding[3], + height: boundingRect.height + padding[0] + padding[2] + }, + style: { + stroke: titleModel.get('borderColor'), + fill: titleModel.get('backgroundColor'), + lineWidth: titleModel.get('borderWidth') + }, + // Behind item elements + z2: -1 + }); + graphic.subPixelOptimizeRect(rect); + + group.add(rect); } }); }); \ No newline at end of file