diff --git a/src/component/legend/LegendModel.js b/src/component/legend/LegendModel.js index 70bf54040e76661c281c0c7c33c6d4426c0d99da..5442c302f3a05179871a60937762d94a4ad0f959 100644 --- a/src/component/legend/LegendModel.js +++ b/src/component/legend/LegendModel.js @@ -283,6 +283,14 @@ var LegendModel = echarts.extendComponentModel({ // 图例关闭时候的颜色 inactiveColor: '#ccc', + // 图例关闭时候的颜色 + inactiveBorderColor: '#ccc', + + itemStyle: { + // 图例默认无边框 + borderWidth: 0 + }, + textStyle: { // 图例文字颜色 color: '#333' diff --git a/src/component/legend/LegendView.js b/src/component/legend/LegendView.js index fc0d15660e8e0839f9a373a8842b0182d004e5b6..f12f5336ba281144b68cdf4145797de25d778ae8 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 itemStyle = legendModel.getModel('itemStyle').getItemStyle(); 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( + setSympleStyle( + legendSymbol, legendSymbolType, itemStyle, + 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( + setSympleStyle( + legendSymbolCenter, symbolType, itemStyle, + borderColor, inactiveBorderColor, isSelected + ) + ); } var textX = itemAlign === 'left' ? itemWidth + 5 : -5; @@ -481,6 +503,17 @@ export default echarts.extendComponentView({ }); +function setSympleStyle(symbol, symbolType, itemStyle, borderColor, inactiveBorderColor, isSelected) { + if (symbolType !== 'line' && symbolType.indexOf('empty') < 0) { + symbol.style.stroke = borderColor; + if (!isSelected) { + itemStyle.stroke = inactiveBorderColor; + } + symbol.setStyle(itemStyle); + } + return symbol; +} + function dispatchSelectAction(name, api) { api.dispatchAction({ type: 'legendToggleSelect', diff --git a/src/model/Series.js b/src/model/Series.js index 395a0965608711024368e8b6fd0bb879f8479602..8b090e6b93ffcc9bfc847aa6148d479f98734536 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 1d10e6e55d807905796338191350b81d81d6944f..64d4643092427f2a421c17160522d1851ade35ed 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 8fbd9ebfd4d6419794785aec1882fbb6df04badb..5d5f1523fe91d11820a4f1c742e83b561e3276db 100644 --- a/src/visual/dataColor.js +++ b/src/visual/dataColor.js @@ -53,10 +53,13 @@ export default function (seriesType) { var singleDataColor = filteredIdx != null && data.getItemVisual(filteredIdx, 'color', true); - if (!singleDataColor) { - // FIXME Performance - var itemModel = dataAll.getItemModel(rawIdx); + var singleDataBorderColor = filteredIdx != null + && data.getItemVisual(filteredIdx, 'borderColor', true); + + // FIXME Performance + var itemModel = dataAll.getItemModel(rawIdx); + if (!singleDataColor) { var color = itemModel.get('itemStyle.color') || seriesModel.getColorFromPalette( dataAll.getName(rawIdx) || (rawIdx + ''), seriesModel.__paletteScope, @@ -74,6 +77,25 @@ export default function (seriesType) { // Set data all color for legend dataAll.setItemVisual(rawIdx, 'color', singleDataColor); } + + if (!singleDataBorderColor) { + var borderColor = itemModel.get('itemStyle.borderColor') + || seriesModel.getColorFromPalette( + dataAll.getName(rawIdx) || (rawIdx + ''), seriesModel.__paletteScope, + dataAll.count() + ); + // 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 b253fff6ea44e01a241d2da3b054c437110d019f..0cd240ab1cc549c67a88f3d7b4314680982c6818 100644 --- a/src/visual/seriesColor.js +++ b/src/visual/seriesColor.js @@ -33,6 +33,15 @@ 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) // Set in itemStyle + || seriesModel.getColorFromPalette( + // TODO series count changed. + seriesModel.name, null, ecModel.getSeriesCount() + ); // Default borderColor + // FIXME Set borderColor function or use the platte borderColor + data.setVisual('borderColor', borderColor); // Only visible series has each data be visual encoded if (!ecModel.isSeriesFiltered(seriesModel)) { @@ -44,13 +53,25 @@ export default { }); } + if (typeof borderColor === 'function' && !(borderColor instanceof Gradient)) { + data.each(function (idx) { + data.setItemVisual( + idx, 'borderColor', borderColor(seriesModel.getDataParams(idx)) + ); + }); + } + // itemStyle in each data item 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/lengend-borderColor.html b/test/lengend-borderColor.html new file mode 100644 index 0000000000000000000000000000000000000000..d7515332d700d077c96a07a74f1112ba83d0a65a --- /dev/null +++ b/test/lengend-borderColor.html @@ -0,0 +1,402 @@ + + + + + + + + + + + + + + +

The line in legend symble should be default value and the borderWidth of legend symble should be legend.itemSyle.borderWidth

+
+

The style with legend symble should be series[i].itemStyle

+
+

The style with legend symble should be legend.itemStyle

+
+ + + + \ No newline at end of file