提交 98e87ee0 编写于 作者: O Ovilia

fix(legend): fix line and radar

上级 04ce156b
...@@ -38,15 +38,15 @@ export function install(registers: EChartsExtensionInstallRegisters) { ...@@ -38,15 +38,15 @@ export function install(registers: EChartsExtensionInstallRegisters) {
registers.registerVisual({ registers.registerVisual({
seriesType: 'line', seriesType: 'line',
reset: function (seriesModel: LineSeriesModel) { reset: function (seriesModel: LineSeriesModel) {
const data = seriesModel.getData();
// Visual coding for legend // Visual coding for legend
const lineStyle = seriesModel.getModel('lineStyle').getLineStyle(); const lineStyle = seriesModel.getModel('lineStyle').getLineStyle();
const itemStyle = seriesModel.getModel('itemStyle').getItemStyle(); if (lineStyle && !lineStyle.stroke) {
const color = itemStyle && itemStyle.fill; // Fill in visual should be palette color if
if (lineStyle) { // has color callback
lineStyle.stroke = lineStyle.stroke || color; lineStyle.stroke = data.getVisual('style').fill;
} }
data.setVisual('legendLineStyle', lineStyle);
seriesModel.getData().setVisual('legendLineStyle', lineStyle);
} }
}); });
......
...@@ -543,24 +543,34 @@ function getLegendStyle( ...@@ -543,24 +543,34 @@ function getLegendStyle(
const visualName = itemProperties[i][0] as keyof PathStyleProps; const visualName = itemProperties[i][0] as keyof PathStyleProps;
const value = legendItemModel.getShallow(propName) as LegendItemStyleOption[keyof LegendItemStyleOption]; const value = legendItemModel.getShallow(propName) as LegendItemStyleOption[keyof LegendItemStyleOption];
if (value === 'inherit') { if (value === 'inherit') {
if (visualName === 'fill') { switch (visualName) {
/** case 'fill':
* Series with visualDrawType as 'stroke' should have /**
* series stroke as legend fill * Series with visualDrawType as 'stroke' should have
*/ * series stroke as legend fill
itemStyle.fill = itemVisualStyle[drawType]; */
} itemStyle.fill = itemVisualStyle[drawType];
else if (visualName === 'stroke') { break;
/**
* symbol type with "emptyXXX" should use fill color case 'stroke':
* in visual style /**
*/ * symbol type with "emptyXXX" should use fill color
itemStyle.stroke = itemVisualStyle[ * in visual style
symbolType.startsWith('empty') ? 'fill' : 'stroke' */
]; itemStyle.stroke = itemVisualStyle[
} symbolType.startsWith('empty') ? 'fill' : 'stroke'
else { ];
(itemStyle as any)[visualName] = itemVisualStyle[visualName]; break;
case 'opacity':
/**
* Use lineStyle.opacity if drawType is stroke
*/
itemStyle.opacity = (drawType === 'fill' ? itemVisualStyle : lineVisualStyle).opacity;
break;
default:
(itemStyle as any)[visualName] = itemVisualStyle[visualName];
} }
} }
else if (value === 'auto' && visualName === 'lineWidth') { else if (value === 'auto' && visualName === 'lineWidth') {
......
...@@ -32,9 +32,12 @@ export function install(registers: EChartsExtensionInstallRegisters) { ...@@ -32,9 +32,12 @@ export function install(registers: EChartsExtensionInstallRegisters) {
seriesType: 'radar', seriesType: 'radar',
reset: function (seriesModel: RadarSeriesModel) { reset: function (seriesModel: RadarSeriesModel) {
const data = seriesModel.getData(); const data = seriesModel.getData();
let symbol = data.getVisual('symbol');
// Use roundRect if no symbol type
(!symbol || symbol === 'none') && (symbol = 'roundRect');
data.each(function (idx) { data.each(function (idx) {
console.log('idx', idx); data.setItemVisual(idx, 'legendSymbol', symbol);
data.setItemVisual(idx, 'legendSymbol', 'roundRect');
}); });
} }
}) })
......
...@@ -102,8 +102,12 @@ const seriesStyleTask: StageHandler = { ...@@ -102,8 +102,12 @@ const seriesStyleTask: StageHandler = {
globalStyle[colorKey] = colorPalette; globalStyle[colorKey] = colorPalette;
data.setVisual('colorFromPalette', true); data.setVisual('colorFromPalette', true);
} }
globalStyle.fill = (globalStyle.fill === 'auto' || typeof globalStyle.fill === 'function') ? colorPalette : globalStyle.fill; globalStyle.fill = (globalStyle.fill === 'auto' || typeof globalStyle.fill === 'function')
globalStyle.stroke = (globalStyle.stroke === 'auto' || typeof globalStyle.stroke === 'function') ? colorPalette : globalStyle.stroke; ? colorPalette
: globalStyle.fill;
globalStyle.stroke = (globalStyle.stroke === 'auto' || typeof globalStyle.stroke === 'function')
? colorPalette
: globalStyle.stroke;
} }
data.setVisual('style', globalStyle); data.setVisual('style', globalStyle);
......
...@@ -202,7 +202,7 @@ under the License. ...@@ -202,7 +202,7 @@ under the License.
'Line B: the style of the line and items should be the same in those in legend; all colored in red', 'Line B: the style of the line and items should be the same in those in legend; all colored in red',
'Line C: the style of the line and items should be the same in those in legend; items colored in red and line colored in green', 'Line C: the style of the line and items should be the same in those in legend; items colored in red and line colored in green',
'Line D: the style of the line should be the same in that in the legend; items colored orange in legend and blue in series', 'Line D: the style of the line should be the same in that in the legend; items colored orange in legend and blue in series',
'Line E: the style of the line should be the same in that in the legend; items colored yellow in legend and green in series', 'Line E: the style of the line should be the same in that in the legend; items colored pink in legend and green in series',
'Line F: the colors in the legend should be blue' 'Line F: the colors in the legend should be blue'
], ],
option: option option: option
......
...@@ -49,7 +49,10 @@ under the License. ...@@ -49,7 +49,10 @@ under the License.
}, },
tooltip: {}, tooltip: {},
legend: { legend: {
data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)含有 "-" 数据', '第一个元素是 null'] data: [{
icon: 'circle',
name: 'Legend 应为 Circle'
}, '实际开销(Actual Spending)含有 "-" 数据', '第一个元素是 null', 'symbol 为 none 的需要用 roundRect']
}, },
radar: { radar: {
radius: [50, '70%'], radius: [50, '70%'],
...@@ -80,7 +83,7 @@ under the License. ...@@ -80,7 +83,7 @@ under the License.
data : [ data : [
{ {
value : [0, 10000, 28000, 35000, 50000, 19000], value : [0, 10000, 28000, 35000, 50000, 19000],
name : '预算分配(Allocated Budget)' name : 'Legend 应为 Circle'
}, },
{ {
value : [50, 14000, 28000, 31000, '-', 21000], value : [50, 14000, 28000, 31000, '-', 21000],
...@@ -96,6 +99,21 @@ under the License. ...@@ -96,6 +99,21 @@ under the License.
symbolRotate: function(value, params) { symbolRotate: function(value, params) {
return ~~(360 * Math.random()); return ~~(360 * Math.random());
} }
}, {
name: '2',
type: 'radar',
label: {
normal: {
show: true
}
},
data : [
{
value : [100, 2800, 3500, 5000, 1900, 1000],
name : 'symbol 为 none 的需要用 roundRect'
}
],
symbol: 'none'
}] }]
}); });
var theIndex = 2; var theIndex = 2;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册