diff --git a/src/component/legend/LegendModel.js b/src/component/legend/LegendModel.js index 70bf54040e..ceeb39b1c6 100644 --- a/src/component/legend/LegendModel.js +++ b/src/component/legend/LegendModel.js @@ -275,14 +275,22 @@ var LegendModel = echarts.extendComponentModel({ // 各个item之间的间隔,单位px,默认为10, // 横向布局时为水平间隔,纵向布局时为纵向间隔 itemGap: 10, - // 图例图形宽度 + // the width of legend symbol itemWidth: 25, - // 图例图形高度 + // the height of legend symbol itemHeight: 14, - // 图例关闭时候的颜色 + // the color of unselected legend symbol inactiveColor: '#ccc', + // the borderColor of unselected legend symbol + inactiveBorderColor: '#ccc', + + itemStyle: { + // the default borderWidth of legend symbol + borderWidth: 0 + }, + textStyle: { // 图例文字颜色 color: '#333' diff --git a/src/component/legend/LegendView.js b/src/component/legend/LegendView.js index fc0d15660e..3556038fb9 100644 --- a/src/component/legend/LegendView.js +++ b/src/component/legend/LegendView.js @@ -179,6 +179,7 @@ export default echarts.extendComponentView({ if (seriesModel) { var data = seriesModel.getData(); var color = data.getVisual('color'); + var borderColor = data.getVisual('borderColor'); // If color is a callback function if (typeof color === 'function') { @@ -186,6 +187,12 @@ export default echarts.extendComponentView({ color = color(seriesModel.getDataParams(0)); } + // If borderColor is a callback function + if (typeof borderColor === 'function') { + // Use the first data + borderColor = borderColor(seriesModel.getDataParams(0)); + } + // Using rect symbol defaultly var legendSymbolType = data.getVisual('legendSymbol') || 'roundRect'; var symbolType = data.getVisual('symbol'); @@ -193,7 +200,7 @@ export default echarts.extendComponentView({ var itemGroup = this._createItem( name, dataIndex, itemModel, legendModel, legendSymbolType, symbolType, - itemAlign, color, + itemAlign, color, borderColor, selectMode ); @@ -219,13 +226,14 @@ export default echarts.extendComponentView({ } var color = data.getItemVisual(idx, 'color'); + var borderColor = data.getItemVisual(idx, 'borderColor'); var legendSymbolType = 'roundRect'; var itemGroup = this._createItem( name, dataIndex, itemModel, legendModel, legendSymbolType, null, - itemAlign, color, + itemAlign, color, borderColor, selectMode ); @@ -299,12 +307,14 @@ export default echarts.extendComponentView({ _createItem: function ( name, dataIndex, itemModel, legendModel, legendSymbolType, symbolType, - itemAlign, color, selectMode + itemAlign, color, borderColor, selectMode ) { var itemWidth = legendModel.get('itemWidth'); var itemHeight = legendModel.get('itemHeight'); var inactiveColor = legendModel.get('inactiveColor'); + var inactiveBorderColor = legendModel.get('inactiveBorderColor'); var symbolKeepAspect = legendModel.get('symbolKeepAspect'); + var legendModelItemStyle = legendModel.getModel('itemStyle'); var isSelected = legendModel.isSelected(name); var itemGroup = new Group(); @@ -318,7 +328,7 @@ export default echarts.extendComponentView({ // Use user given icon first legendSymbolType = itemIcon || legendSymbolType; - itemGroup.add(createSymbol( + var legendSymbol = createSymbol( legendSymbolType, 0, 0, @@ -327,7 +337,13 @@ export default echarts.extendComponentView({ isSelected ? color : inactiveColor, // symbolKeepAspect default true for legend symbolKeepAspect == null ? true : symbolKeepAspect - )); + ); + itemGroup.add( + setSymbolStyle( + legendSymbol, legendSymbolType, legendModelItemStyle, + borderColor, inactiveBorderColor, isSelected + ) + ); // Compose symbols // PENDING @@ -339,8 +355,7 @@ export default echarts.extendComponentView({ if (symbolType === 'none') { symbolType = 'circle'; } - // Put symbol in the center - itemGroup.add(createSymbol( + var legendSymbolCenter = createSymbol( symbolType, (itemWidth - size) / 2, (itemHeight - size) / 2, @@ -349,7 +364,14 @@ export default echarts.extendComponentView({ isSelected ? color : inactiveColor, // symbolKeepAspect default true for legend symbolKeepAspect == null ? true : symbolKeepAspect - )); + ); + // Put symbol in the center + itemGroup.add( + setSymbolStyle( + legendSymbolCenter, symbolType, legendModelItemStyle, + borderColor, inactiveBorderColor, isSelected + ) + ); } var textX = itemAlign === 'left' ? itemWidth + 5 : -5; @@ -481,6 +503,21 @@ export default echarts.extendComponentView({ }); +function setSymbolStyle(symbol, symbolType, legendModelItemStyle, borderColor, inactiveBorderColor, isSelected) { + var itemStyle; + if (symbolType !== 'line' && symbolType.indexOf('empty') < 0) { + itemStyle = legendModelItemStyle.getItemStyle(); + symbol.style.stroke = borderColor; + if (!isSelected) { + itemStyle.stroke = inactiveBorderColor; + } + } + else { + itemStyle = legendModelItemStyle.getItemStyle(['borderWidth', 'borderColor']); + } + return symbol.setStyle(itemStyle); +} + function dispatchSelectAction(name, api) { api.dispatchAction({ type: 'legendToggleSelect', diff --git a/src/model/Series.js b/src/model/Series.js index 395a096560..8b090e6b93 100644 --- a/src/model/Series.js +++ b/src/model/Series.js @@ -73,6 +73,11 @@ var SeriesModel = ComponentModel.extend({ */ visualColorAccessPath: 'itemStyle.color', + /** + * Access path of borderColor for visual + */ + visualBorderColorAccessPath: 'itemStyle.borderColor', + /** * Support merge layout params. * Only support 'box' now (left/right/top/bottom/width/height). diff --git a/src/model/mixin/dataFormat.js b/src/model/mixin/dataFormat.js index 1d10e6e55d..64d4643092 100644 --- a/src/model/mixin/dataFormat.js +++ b/src/model/mixin/dataFormat.js @@ -38,6 +38,7 @@ export default { var name = data.getName(dataIndex); var itemOpt = data.getRawDataItem(dataIndex); var color = data.getItemVisual(dataIndex, 'color'); + var borderColor = data.getItemVisual(dataIndex, 'borderColor'); var tooltipModel = this.ecModel.getComponent('tooltip'); var renderModeOption = tooltipModel && tooltipModel.get('renderMode'); var renderMode = getTooltipRenderMode(renderModeOption); @@ -59,6 +60,7 @@ export default { dataType: dataType, value: rawValue, color: color, + borderColor: borderColor, dimensionNames: userOutput ? userOutput.dimensionNames : null, encode: userOutput ? userOutput.encode : null, marker: getTooltipMarker({ diff --git a/src/visual/dataColor.js b/src/visual/dataColor.js index 8fbd9ebfd4..63c2b84e9a 100644 --- a/src/visual/dataColor.js +++ b/src/visual/dataColor.js @@ -53,10 +53,16 @@ export default function (seriesType) { var singleDataColor = filteredIdx != null && data.getItemVisual(filteredIdx, 'color', true); - if (!singleDataColor) { + var singleDataBorderColor = filteredIdx != null + && data.getItemVisual(filteredIdx, 'borderColor', true); + + var itemModel; + if (!singleDataColor || !singleDataBorderColor) { // FIXME Performance - var itemModel = dataAll.getItemModel(rawIdx); + itemModel = dataAll.getItemModel(rawIdx); + } + if (!singleDataColor) { var color = itemModel.get('itemStyle.color') || seriesModel.getColorFromPalette( dataAll.getName(rawIdx) || (rawIdx + ''), seriesModel.__paletteScope, @@ -74,6 +80,21 @@ export default function (seriesType) { // Set data all color for legend dataAll.setItemVisual(rawIdx, 'color', singleDataColor); } + + if (!singleDataBorderColor) { + var borderColor = itemModel.get('itemStyle.borderColor'); + // Legend may use the visual info in data before processed + dataAll.setItemVisual(rawIdx, 'borderColor', borderColor); + + // Data is not filtered + if (filteredIdx != null) { + data.setItemVisual(filteredIdx, 'borderColor', borderColor); + } + } + else { + // Set data all borderColor for legend + dataAll.setItemVisual(rawIdx, 'borderColor', singleDataBorderColor); + } }); } }; diff --git a/src/visual/seriesColor.js b/src/visual/seriesColor.js index b253fff6ea..66e5a60aca 100644 --- a/src/visual/seriesColor.js +++ b/src/visual/seriesColor.js @@ -33,6 +33,10 @@ export default { // FIXME Set color function or use the platte color data.setVisual('color', color); + + var borderColorAccessPath = (seriesModel.visualBorderColorAccessPath || 'itemStyle.borderColor').split('.'); + var borderColor = seriesModel.get(borderColorAccessPath); + data.setVisual('borderColor', borderColor); // Only visible series has each data be visual encoded if (!ecModel.isSeriesFiltered(seriesModel)) { @@ -48,9 +52,13 @@ export default { var dataEach = function (data, idx) { var itemModel = data.getItemModel(idx); var color = itemModel.get(colorAccessPath, true); + var borderColor = itemModel.get(borderColorAccessPath, true); if (color != null) { data.setItemVisual(idx, 'color', color); } + if (borderColor != null) { + data.setItemVisual(idx, 'borderColor', borderColor); + } }; return { dataEach: data.hasItemOption ? dataEach : null }; diff --git a/test/legend-borderColor.html b/test/legend-borderColor.html new file mode 100644 index 0000000000..8eb11a577d --- /dev/null +++ b/test/legend-borderColor.html @@ -0,0 +1,560 @@ + + + + + + + + + + + + + + + + +
+
+
+
+ + + + \ No newline at end of file