Skip to content

Commit

Permalink
fix bug apache#7340
Browse files Browse the repository at this point in the history
  • Loading branch information
yufeng04 committed Sep 20, 2019
1 parent 4f21665 commit ce0fffa
Show file tree
Hide file tree
Showing 7 changed files with 504 additions and 11 deletions.
8 changes: 8 additions & 0 deletions src/component/legend/LegendModel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,14 @@ var LegendModel = echarts.extendComponentModel({
// 图例关闭时候的颜色
inactiveColor: '#ccc',

// 图例关闭时候的颜色
inactiveBorderColor: '#ccc',

itemStyle: {
// 图例默认无边框
borderWidth: 0
},

textStyle: {
// 图例文字颜色
color: '#333'
Expand Down
49 changes: 41 additions & 8 deletions src/component/legend/LegendView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,21 +179,28 @@ 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') {
// Use the first data
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');

var itemGroup = this._createItem(
name, dataIndex, itemModel, legendModel,
legendSymbolType, symbolType,
itemAlign, color,
itemAlign, color, borderColor,
selectMode
);

Expand All @@ -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
);

Expand Down Expand Up @@ -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();
Expand All @@ -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,
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -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',
Expand Down
5 changes: 5 additions & 0 deletions src/model/Series.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
2 changes: 2 additions & 0 deletions src/model/mixin/dataFormat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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({
Expand Down
28 changes: 25 additions & 3 deletions src/visual/dataColor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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);
}
});
}
};
Expand Down
21 changes: 21 additions & 0 deletions src/visual/seriesColor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand All @@ -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 };
Expand Down
Loading

0 comments on commit ce0fffa

Please sign in to comment.