From ce0fffabf49089f750f1df552c2d39e2e627d7a2 Mon Sep 17 00:00:00 2001 From: yufeng04 Date: Sat, 21 Sep 2019 01:06:48 +0800 Subject: [PATCH 1/5] fix bug #7340 --- src/component/legend/LegendModel.js | 8 + src/component/legend/LegendView.js | 49 +++- src/model/Series.js | 5 + src/model/mixin/dataFormat.js | 2 + src/visual/dataColor.js | 28 +- src/visual/seriesColor.js | 21 ++ test/lengend-borderColor.html | 402 ++++++++++++++++++++++++++++ 7 files changed, 504 insertions(+), 11 deletions(-) create mode 100644 test/lengend-borderColor.html diff --git a/src/component/legend/LegendModel.js b/src/component/legend/LegendModel.js index 70bf54040e..5442c302f3 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 fc0d15660e..f12f5336ba 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 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..5d5f1523fe 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 b253fff6ea..0cd240ab1c 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 0000000000..d7515332d7 --- /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 From 0645f84a0c9088ed278483b66ad4560fa4bda5aa Mon Sep 17 00:00:00 2001 From: yufeng04 Date: Mon, 23 Sep 2019 18:09:50 +0800 Subject: [PATCH 2/5] fix bug #7340 --- README.md | 2 +- src/chart/custom.js | 10 +- src/component/graphic.js | 18 +- src/component/legend/LegendModel.js | 10 +- src/component/legend/LegendView.js | 6 +- src/export.js | 1 + src/util/graphic.js | 61 +++ src/visual/dataColor.js | 13 +- src/visual/seriesColor.js | 15 +- test/legend-borderColor.html | 558 ++++++++++++++++++++++++++++ test/lengend-borderColor.html | 402 -------------------- 11 files changed, 661 insertions(+), 435 deletions(-) create mode 100644 test/legend-borderColor.html delete mode 100644 test/lengend-borderColor.html diff --git a/README.md b/README.md index e140c91863..ee5d328a5f 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ More custom build approaches can be checked in this tutorial: [Create Custom Bui ## Contribution -If you wish to debug locally, or make pull requests, please refer to [contributing](https://github.com/apache/incubator-echarts/blob/master/.github/CONTRIBUTING.md) document. +If you wish to debug locally, or make pull requests, please refer to [contributing](https://github.com/apache/incubator-echarts/blob/master/CONTRIBUTING.md) document. ## Resources diff --git a/src/chart/custom.js b/src/chart/custom.js index 7c31bb7bb4..784e59c157 100644 --- a/src/chart/custom.js +++ b/src/chart/custom.js @@ -231,6 +231,8 @@ function createEl(elOption) { var graphicType = elOption.type; var el; + // Those graphic elements are not shapes. They should not be + // overwritten by users, so do them first. if (graphicType === 'path') { var shape = elOption.shape; // Using pathRect brings convenience to users sacle svg path. @@ -255,8 +257,14 @@ function createEl(elOption) { el = new graphicUtil.Text({}); el.__customText = elOption.style.text; } + else if (graphicType === 'group') { + el = new graphicUtil.Group(); + } + else if (graphicType === 'compoundPath') { + throw new Error('"compoundPath" is not supported yet.'); + } else { - var Clz = graphicUtil[graphicType.charAt(0).toUpperCase() + graphicType.slice(1)]; + var Clz = graphicUtil.getShapeClass(graphicType); if (__DEV__) { zrUtil.assert(Clz, 'graphic type "' + graphicType + '" can not be found.'); diff --git a/src/component/graphic.js b/src/component/graphic.js index 92674a70ed..e689db1bd2 100644 --- a/src/component/graphic.js +++ b/src/component/graphic.js @@ -26,6 +26,18 @@ import * as graphicUtil from '../util/graphic'; import * as layoutUtil from '../util/layout'; import {parsePercent} from '../util/number'; +var _nonShapeGraphicElements = { + + // Reserved but not supported in graphic component. + path: null, + compoundPath: null, + + // Supported in graphic component. + group: graphicUtil.Group, + image: graphicUtil.Image, + text: graphicUtil.Text +}; + // ------------- // Preprocessor // ------------- @@ -440,7 +452,11 @@ function createEl(id, targetElParent, elOption, elMap) { zrUtil.assert(graphicType, 'graphic type MUST be set'); } - var Clz = graphicUtil[graphicType.charAt(0).toUpperCase() + graphicType.slice(1)]; + var Clz = _nonShapeGraphicElements.hasOwnProperty(graphicType) + // Those graphic elements are not shapes. They should not be + // overwritten by users, so do them first. + ? _nonShapeGraphicElements[graphicType] + : graphicUtil.getShapeClass(graphicType); if (__DEV__) { zrUtil.assert(Clz, 'graphic type can not be found'); diff --git a/src/component/legend/LegendModel.js b/src/component/legend/LegendModel.js index 5442c302f3..ceeb39b1c6 100644 --- a/src/component/legend/LegendModel.js +++ b/src/component/legend/LegendModel.js @@ -275,19 +275,19 @@ 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 }, diff --git a/src/component/legend/LegendView.js b/src/component/legend/LegendView.js index f12f5336ba..c6c059e43c 100644 --- a/src/component/legend/LegendView.js +++ b/src/component/legend/LegendView.js @@ -339,7 +339,7 @@ export default echarts.extendComponentView({ symbolKeepAspect == null ? true : symbolKeepAspect ); itemGroup.add( - setSympleStyle( + setSymbolStyle( legendSymbol, legendSymbolType, itemStyle, borderColor, inactiveBorderColor, isSelected ) @@ -367,7 +367,7 @@ export default echarts.extendComponentView({ ); // Put symbol in the center itemGroup.add( - setSympleStyle( + setSymbolStyle( legendSymbolCenter, symbolType, itemStyle, borderColor, inactiveBorderColor, isSelected ) @@ -503,7 +503,7 @@ export default echarts.extendComponentView({ }); -function setSympleStyle(symbol, symbolType, itemStyle, borderColor, inactiveBorderColor, isSelected) { +function setSymbolStyle(symbol, symbolType, itemStyle, borderColor, inactiveBorderColor, isSelected) { if (symbolType !== 'line' && symbolType.indexOf('empty') < 0) { symbol.style.stroke = borderColor; if (!isSelected) { diff --git a/src/export.js b/src/export.js index dded75c774..6ddd62eccf 100644 --- a/src/export.js +++ b/src/export.js @@ -71,6 +71,7 @@ zrUtil.each( 'setHoverStyle', 'setLabelStyle', 'setTextStyle', 'setText', 'getFont', 'updateProps', 'initProps', 'getTransform', 'clipPointsByRect', 'clipRectByRect', + 'registerShape', 'getShapeClass', 'Group', 'Image', 'Text', diff --git a/src/util/graphic.js b/src/util/graphic.js index 38b2b854c2..0ca633d3f1 100644 --- a/src/util/graphic.js +++ b/src/util/graphic.js @@ -65,6 +65,8 @@ var NORMAL = 'normal'; var _highlightNextDigit = 1; var _highlightKeyMap = {}; +var _customShapeMap = {}; + /** * Extend shape with parameters @@ -80,6 +82,53 @@ export function extendPath(pathData, opts) { return pathTool.extendFromString(pathData, opts); } +/** + * Register a user defined shape. + * The shape class can be fetched by `getShapeClass` + * This method will not overwrite the built-in shapes. + * The shape can be used in `custom series` and + * `graphic component` by declaring `{type: name}`. + * + * @param {string} name + * @param {Object} ShapeClass Can be generated by `extendShape`. + */ +export function registerShape(name, ShapeClass) { + _customShapeMap[name] = ShapeClass; +} + +/** + * Find shape class registered by `registerShape`. Usually used in + * fetching user defined shape. + * + * [Caution]: + * (1) This method **MUST NOT be used inside echarts !!!**, unless it is prepared + * to use user registered shapes. + * Because the built-in shape (see `getBuiltInShape`) will be registered by + * `registerShape` by default. That enables users to get both built-in + * shapes as well as the shapes belonging to themsleves. But users can overwrite + * the built-in shapes by using names like 'circle', 'rect' via calling + * `registerShape`. So the echarts inner featrues should not fetch shapes from here + * in case that it is overwritten by users, except that some features, like + * `custom series`, `graphic component`, do it deliberately. + * + * (2) In the features like `custom series`, `graphic component`, the user input + * `{tpye: 'xxx'}` does not only specify shapes but also specify other graphic + * elements like `'group'`, `'text'`, `'image'` or event `'path'`. Those names + * are reserved names, that is, if some user register a shape named `'image'`, + * the shape will not be used. If we intending to add some more reserved names + * in feature, that might bring break changes (disable some existing user shape + * names). But that case probably rearly happen. So we dont make more mechanism + * to resolve this issue here. + * + * @param {string} name + * @return {Object} The shape class. If not found, return nothing. + */ +export function getShapeClass(name) { + if (_customShapeMap.hasOwnProperty(name)) { + return _customShapeMap[name]; + } +} + /** * Create a path element from path data string * @param {string} pathData @@ -1377,6 +1426,18 @@ function nearZero(val) { return val <= (1e-6) && val >= -(1e-6); } +// Register built-in shapes. These shapes might be overwirtten +// by users, although we do not recommend that. +registerShape('circle', Circle); +registerShape('sector', Sector); +registerShape('ring', Ring); +registerShape('polygon', Polygon); +registerShape('polyline', Polyline); +registerShape('rect', Rect); +registerShape('line', Line); +registerShape('bezierCurve', BezierCurve); +registerShape('arc', Arc); + export { Group, ZImage as Image, diff --git a/src/visual/dataColor.js b/src/visual/dataColor.js index 5d5f1523fe..a408c584cf 100644 --- a/src/visual/dataColor.js +++ b/src/visual/dataColor.js @@ -56,10 +56,9 @@ export default function (seriesType) { var singleDataBorderColor = filteredIdx != null && data.getItemVisual(filteredIdx, 'borderColor', true); - // FIXME Performance - var itemModel = dataAll.getItemModel(rawIdx); - if (!singleDataColor) { + // FIXME Performance + var itemModel = dataAll.getItemModel(rawIdx); var color = itemModel.get('itemStyle.color') || seriesModel.getColorFromPalette( dataAll.getName(rawIdx) || (rawIdx + ''), seriesModel.__paletteScope, @@ -79,11 +78,9 @@ export default function (seriesType) { } if (!singleDataBorderColor) { - var borderColor = itemModel.get('itemStyle.borderColor') - || seriesModel.getColorFromPalette( - dataAll.getName(rawIdx) || (rawIdx + ''), seriesModel.__paletteScope, - dataAll.count() - ); + // FIXME Performance + var itemModel = dataAll.getItemModel(rawIdx); + var borderColor = itemModel.get('itemStyle.borderColor'); // Legend may use the visual info in data before processed dataAll.setItemVisual(rawIdx, 'borderColor', borderColor); diff --git a/src/visual/seriesColor.js b/src/visual/seriesColor.js index 0cd240ab1c..66e5a60aca 100644 --- a/src/visual/seriesColor.js +++ b/src/visual/seriesColor.js @@ -35,12 +35,7 @@ export default { 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 + var borderColor = seriesModel.get(borderColorAccessPath); data.setVisual('borderColor', borderColor); // Only visible series has each data be visual encoded @@ -53,14 +48,6 @@ 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); diff --git a/test/legend-borderColor.html b/test/legend-borderColor.html new file mode 100644 index 0000000000..e3e6909c5f --- /dev/null +++ b/test/legend-borderColor.html @@ -0,0 +1,558 @@ + + + + + + + + + + + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/test/lengend-borderColor.html b/test/lengend-borderColor.html deleted file mode 100644 index d7515332d7..0000000000 --- a/test/lengend-borderColor.html +++ /dev/null @@ -1,402 +0,0 @@ - - - - - - - - - - - - - - -

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 From ce034f91718fe4abb7346f8af7ac101427a957f0 Mon Sep 17 00:00:00 2001 From: yufeng04 Date: Mon, 23 Sep 2019 18:53:49 +0800 Subject: [PATCH 3/5] fix typo --- test/legend-borderColor.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/test/legend-borderColor.html b/test/legend-borderColor.html index e3e6909c5f..056f61839e 100644 --- a/test/legend-borderColor.html +++ b/test/legend-borderColor.html @@ -300,12 +300,12 @@ testHelper.create(echarts, 'plain1', { title: [ '(Legend symbol of line)', - 'the borderColor of first legend symble should be black', - 'the borderColor of second legend symble should be blue', + 'the borderColor of first legend symbol should be black', + 'the borderColor of second legend symbol should be blue', 'the bar borderColor of second series should be red, because the legend borderColor is incompatible with barBorderColor', - 'the third legend symble should be unselected', - 'the borderColor of other legend symbles should be the same as color of corresponding series', - 'the borderColor of all legend symbles should be 3' + 'the third legend symbol should be unselected', + 'the borderColor of other legend symbols should be the same as color of corresponding series', + 'the borderColor of all legend symbols should be 3' ], option: option1, height: 300 @@ -424,9 +424,9 @@ testHelper.create(echarts, 'plain2', { title: [ '(Legend symbol of line)', - 'the first legend symble should be unselected', + 'the first legend symbol should be unselected', 'the borderColor of legend symbol should be red', - 'the borderWidth of all legend symbles should be 3' + 'the borderWidth of all legend symbols should be 3' ], option: option2, height: 300 @@ -541,9 +541,9 @@ testHelper.create(echarts, 'plain3', { title: [ '(Legend symbol of scatter)', - 'the legend symble of 1990 should be unselected', + 'the legend symbol of 1990 should be unselected', 'the borderColor of legend symbol should be black', - 'the borderWidth of all legend symbles should be 3' + 'the borderWidth of all legend symbols should be 3' ], option: option3, height: 300 From e8c8e096d275174dbc0899b11a431a66d782bf28 Mon Sep 17 00:00:00 2001 From: yufeng04 Date: Mon, 23 Sep 2019 22:27:50 +0800 Subject: [PATCH 4/5] fix typo & itemModel should not be created twice --- src/visual/dataColor.js | 10 ++++++---- test/legend-borderColor.html | 4 ++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/visual/dataColor.js b/src/visual/dataColor.js index a408c584cf..63c2b84e9a 100644 --- a/src/visual/dataColor.js +++ b/src/visual/dataColor.js @@ -56,9 +56,13 @@ export default function (seriesType) { var singleDataBorderColor = filteredIdx != null && data.getItemVisual(filteredIdx, 'borderColor', true); - if (!singleDataColor) { + 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, @@ -78,8 +82,6 @@ export default function (seriesType) { } if (!singleDataBorderColor) { - // FIXME Performance - var itemModel = dataAll.getItemModel(rawIdx); var borderColor = itemModel.get('itemStyle.borderColor'); // Legend may use the visual info in data before processed dataAll.setItemVisual(rawIdx, 'borderColor', borderColor); diff --git a/test/legend-borderColor.html b/test/legend-borderColor.html index 056f61839e..7caa9fbd2d 100644 --- a/test/legend-borderColor.html +++ b/test/legend-borderColor.html @@ -299,7 +299,7 @@ // chart1.setOption(option1); testHelper.create(echarts, 'plain1', { title: [ - '(Legend symbol of line)', + '(Legend symbol of bar)', 'the borderColor of first legend symbol should be black', 'the borderColor of second legend symbol should be blue', 'the bar borderColor of second series should be red, because the legend borderColor is incompatible with barBorderColor', @@ -423,7 +423,7 @@ // chart2.setOption(option2); testHelper.create(echarts, 'plain2', { title: [ - '(Legend symbol of line)', + '(Legend symbol of pie)', 'the first legend symbol should be unselected', 'the borderColor of legend symbol should be red', 'the borderWidth of all legend symbols should be 3' From 60d2751bdd879843ea6d7f74e25d1a7824589c31 Mon Sep 17 00:00:00 2001 From: yufeng04 Date: Tue, 24 Sep 2019 01:23:56 +0800 Subject: [PATCH 5/5] Modified the logic of function setSymbolStyle --- src/component/legend/LegendView.js | 16 ++++++++++------ test/legend-borderColor.html | 4 +++- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/component/legend/LegendView.js b/src/component/legend/LegendView.js index c6c059e43c..3556038fb9 100644 --- a/src/component/legend/LegendView.js +++ b/src/component/legend/LegendView.js @@ -314,7 +314,7 @@ export default echarts.extendComponentView({ var inactiveColor = legendModel.get('inactiveColor'); var inactiveBorderColor = legendModel.get('inactiveBorderColor'); var symbolKeepAspect = legendModel.get('symbolKeepAspect'); - var itemStyle = legendModel.getModel('itemStyle').getItemStyle(); + var legendModelItemStyle = legendModel.getModel('itemStyle'); var isSelected = legendModel.isSelected(name); var itemGroup = new Group(); @@ -340,7 +340,7 @@ export default echarts.extendComponentView({ ); itemGroup.add( setSymbolStyle( - legendSymbol, legendSymbolType, itemStyle, + legendSymbol, legendSymbolType, legendModelItemStyle, borderColor, inactiveBorderColor, isSelected ) ); @@ -368,7 +368,7 @@ export default echarts.extendComponentView({ // Put symbol in the center itemGroup.add( setSymbolStyle( - legendSymbolCenter, symbolType, itemStyle, + legendSymbolCenter, symbolType, legendModelItemStyle, borderColor, inactiveBorderColor, isSelected ) ); @@ -503,15 +503,19 @@ export default echarts.extendComponentView({ }); -function setSymbolStyle(symbol, symbolType, itemStyle, borderColor, inactiveBorderColor, isSelected) { +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; } - symbol.setStyle(itemStyle); } - return symbol; + else { + itemStyle = legendModelItemStyle.getItemStyle(['borderWidth', 'borderColor']); + } + return symbol.setStyle(itemStyle); } function dispatchSelectAction(name, api) { diff --git a/test/legend-borderColor.html b/test/legend-borderColor.html index 7caa9fbd2d..8eb11a577d 100644 --- a/test/legend-borderColor.html +++ b/test/legend-borderColor.html @@ -74,7 +74,8 @@ data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'], itemStyle: { // borderColor: '#f00', - borderWidth: 3 + borderWidth: 3, + borderType: 'dashed' }, selected: { '联盟广告': false, @@ -179,6 +180,7 @@ title: [ '(Legend symbol of line)', 'the emptyCircle symbol doesn\'t have fillColor, so the strokeColor should be the same as color of corresponding series', + 'the borderType of legend symbol is dashed, especially the first emptyCircle symbol', 'the color of line in legend symbol should be same as corresponding symbol', 'the borderWidth of legend symbols should only be determined by legend.itemStyle.borderWidth', 'the second and the third legend symbol should be unselected'