Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 9279f753 编写于 作者: P plainheart
浏览文件
操作

refact(dash): normalize dash style in zrender.

上级 9001e86c
隐藏空白更改
内联 并排
Showing with 39 addition and 113 deletion
src/chart/helper/Line.ts
浏览文件 @ 9279f753
......@@ -460,4 +460,4 @@ class Line extends graphic.Group {
}
}
export default Line;
\ No newline at end of file
export default Line;
src/component/axis/SingleAxisView.ts
浏览文件 @ 9279f753
......@@ -146,7 +146,8 @@ const axisElementBuilders: Record<typeof selfBuilderAttrs[number], AxisElementBu
group.add(graphic.mergePath(splitLines[i], {
style: {
stroke: lineColors[i % lineColors.length],
lineDash: lineStyleModel.getLineDash(lineWidth),
// PENDING
//lineDash: lineStyleModel.getLineDash(lineWidth),
lineWidth: lineWidth
},
silent: true
......
src/label/labelStyle.ts
浏览文件 @ 9279f753
......@@ -393,7 +393,7 @@ const TEXT_PROPS_SELF = [
'align', 'lineHeight', 'width', 'height', 'tag', 'verticalAlign'
] as const;
const TEXT_PROPS_BOX = [
'padding', 'borderWidth', 'borderRadius',
'padding', 'borderWidth', 'borderRadius', 'borderDashOffset',
'backgroundColor', 'borderColor',
'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'
] as const;
......@@ -455,16 +455,8 @@ function setTokenTextStyle(
textStyle.lineWidth = textBorderWidth;
}
const textBorderType = retrieve2(textStyleModel.getShallow('textBorderType'), globalTextStyle.textBorderType);
if (!textBorderType || textBorderType === 'solid') {
textStyle.lineDash = [];
}
else {
let textBorderDashArray = retrieve2(textStyleModel.getShallow('textBorderDashArray'), globalTextStyle.textBorderDashArray);
// compatible with single number
if (textBorderDashArray != null && !isNaN(textBorderDashArray as number)) {
textBorderDashArray = [+textBorderDashArray];
}
textStyle.lineDash = textBorderDashArray as number[] || (textBorderType === 'dashed' ? [5, 5] : [1, 1]);
if (textBorderType != null) {
textStyle.lineDash = textBorderType as any;
}
const textBorderDashOffset = retrieve2(textStyleModel.getShallow('textBorderDashOffset'), globalTextStyle.textBorderDashOffset);
if (textBorderDashOffset != null) {
......@@ -510,21 +502,9 @@ function setTokenTextStyle(
}
}
const borderType = retrieve2(textStyleModel.getShallow('borderType'), globalTextStyle.borderType);
if (!borderType || borderType === 'solid') {
textStyle.borderDash = [];
}
else {
let borderDashArray = retrieve2(textStyleModel.getShallow('borderDashArray'), globalTextStyle.borderDashArray);
// compatible with single number
if (borderDashArray != null && !isNaN(borderDashArray as number)) {
borderDashArray = [+borderDashArray];
}
textStyle.borderDash = borderDashArray as number[] || (borderType === 'dashed' ? [5, 5] : [1, 1]);
}
const borderDashOffset = retrieve2(textStyleModel.getShallow('borderDashOffset'), globalTextStyle.borderDashOffset);
if (borderDashOffset != null) {
textStyle.borderDashOffset = borderDashOffset;
const borderType = textStyleModel.getShallow('borderType');
if (borderType != null) {
textStyle.borderDash = borderType as any;
}
if ((textStyle.backgroundColor === 'auto' || textStyle.backgroundColor === 'inherit') && inheritColor) {
......
src/model/mixin/itemStyle.ts
浏览文件 @ 9279f753
......@@ -31,7 +31,7 @@ export const ITEM_STYLE_KEY_MAP = [
['shadowOffsetX'],
['shadowOffsetY'],
['shadowColor'],
['lineDash', 'borderDashArray'],
['lineDash', 'borderType'],
['lineDashOffset', 'borderDashOffset'],
['lineCap', 'borderCap'],
['lineJoin', 'borderJoin'],
......@@ -63,26 +63,9 @@ class ItemStyleMixin {
excludes?: readonly (keyof ItemStyleOption)[],
includes?: readonly (keyof ItemStyleOption)[]
): ItemStyleProps {
const style = getItemStyle(this, excludes, includes);
style.lineDash = this.getBorderLineDash(style.lineWidth);
return style;
return getItemStyle(this, excludes, includes);
}
getBorderLineDash(this: Model, lineWidth?: number): number[] {
const lineType = this.get('borderType');
if (lineType == null || lineType === 'solid') {
return [];
}
lineWidth = lineWidth || 0;
let dashArray = this.get('borderDashArray');
// compatible with single number
if (dashArray != null && !isNaN(dashArray)) {
dashArray = [+dashArray];
}
return dashArray || (lineType === 'dashed' ? [5, 5] : [1, 1]);
}
}
export {ItemStyleMixin};
src/model/mixin/lineStyle.ts
浏览文件 @ 9279f753
......@@ -30,7 +30,7 @@ export const LINE_STYLE_KEY_MAP = [
['shadowOffsetX'],
['shadowOffsetY'],
['shadowColor'],
['lineDash', 'dashArray'],
['lineDash', 'type'],
['lineDashOffset', 'dashOffset'],
['lineCap', 'cap'],
['lineJoin', 'join'],
......@@ -60,35 +60,9 @@ class LineStyleMixin {
this: Model,
excludes?: readonly (keyof LineStyleOption)[]
): LineStyleProps {
const style = getLineStyle(this, excludes);
// Always set lineDash whether dashed, otherwise we can not
// erase the previous style when assigning to el.style.
style.lineDash = this.getLineDash(style.lineWidth);
return style;
return getLineStyle(this, excludes);
}
getLineDash(this: Model, lineWidth?: number): false | number[] {
const lineType = this.get('type');
if (lineType == null || lineType === 'solid') {
// Use `false` but not `null` for the solid line here, because `null` might be
// ignored when assigning to `el.style`. e.g., when setting `lineStyle.type` as
// `'dashed'` and `emphasis.lineStyle.type` as `'solid'` in graph series, the
// `lineDash` gotten form the latter one is not able to erase that from the former
// one if using `null` here according to the emhpsis strategy in `util/graphic.js`.
return false;
}
if (lineWidth == null) {
lineWidth = 1;
}
let dashArray = this.get('dashArray');
// compatible with single number
if (dashArray != null && !isNaN(dashArray)) {
dashArray = [+dashArray];
}
return lineType === 'dashed'
? dashArray || [lineWidth * 4]
: dashArray || [Math.max(lineWidth, 2)];
}
};
export {LineStyleMixin};
src/util/types.ts
浏览文件 @ 9279f753
......@@ -64,7 +64,7 @@ export type VerticalAlign = 'top' | 'middle' | 'bottom';
// Types from zrender
export type ColorString = string;
export type ZRColor = ColorString | LinearGradientObject | RadialGradientObject | PatternObject;
export type ZRLineType = 'solid' | 'dotted' | 'dashed';
export type ZRLineType = 'solid' | 'dotted' | 'dashed' | number | number[];
export type ZRFontStyle = 'normal' | 'italic' | 'oblique';
export type ZRFontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | number;
......@@ -657,7 +657,6 @@ export interface BorderOptionMixin {
borderType?: ZRLineType
borderCap?: CanvasLineCap
borderJoin?: CanvasLineJoin
borderDashArray?: number | number[]
borderDashOffset?: number
borderMiterLimit?: number
}
......@@ -784,7 +783,6 @@ export interface LineStyleOption<Clr = ZRColor> extends ShadowOptionMixin {
type?: ZRLineType
cap?: CanvasLineCap
join?: CanvasLineJoin
dashArray?: number | number[]
dashOffset?: number
miterLimit?: number
}
......@@ -859,7 +857,6 @@ export interface TextCommonOption extends ShadowOptionMixin {
borderColor?: string
borderWidth?: number
borderType?: ZRLineType
borderDashArray?: number | number[]
borderDashOffset?: number
borderRadius?: number | number[]
padding?: number | number[]
......@@ -869,7 +866,6 @@ export interface TextCommonOption extends ShadowOptionMixin {
textBorderColor?: string
textBorderWidth?: number
textBorderType?: ZRLineType
textBorderDashArray?: number | number[]
textBorderDashOffset?: number
textShadowBlur?: number
......
src/visual/style.ts
浏览文件 @ 9279f753
......@@ -213,4 +213,4 @@ export {
seriesStyleTask,
dataStyleTask,
dataColorPaletteTask
};
\ No newline at end of file
};
test/line-style.html
浏览文件 @ 9279f753
......@@ -143,7 +143,7 @@ under the License.
// textBorderWidth: 5,
// textBorderColor: 'red',
// textBorderType: 'dashed',
// textBorderDash: [2, 2]
// textBorderType: [2, 2]
// },
title: {
text: '这是标题~',
......@@ -159,8 +159,7 @@ under the License.
subtextStyle: {
textBorderWidth: 1,
textBorderColor: 'cyan',
textBorderType: 'dashed',
textBorderDash: [15, 3, 3]
textBorderType: [15, 3, 3]
}
},
legend: {
......@@ -201,7 +200,7 @@ under the License.
formatter: '{c}'
},
axisPointer: {
show: true,
show: false,
type: 'line',
lineStyle: {
type: 'dotted',
......@@ -220,11 +219,10 @@ under the License.
textBorderColor: 'cyan',
textBorderWidth: 2,
textBorderType: 'dotted',
//textBorderDashArray: [5, 5],
//textBorderType: [5, 5],
borderWidth: 1,
borderColor: 'black',
borderType: 'dashed',
borderDashArray: [15, 3, 3],
borderType: [15, 3, 3],
borderRadius: 20,
backgroundColor: 'yellow',
padding: 10,
......@@ -277,8 +275,7 @@ under the License.
},
splitLine: {
lineStyle: {
type: 'dashed',
dashArray: [20, 5, 5]
type: [20, 5, 5]
}
}
},
......@@ -339,7 +336,7 @@ under the License.
},
series: [
{
name: 'lineStyle.dashArray is [10, 5]',
name: 'lineStyle.type is [10, 5]',
type: 'line',
data: [{
value: 7200,
......@@ -354,8 +351,7 @@ under the License.
symbolSize: 10,
smooth: true,
lineStyle: {
type: 'dashed',
dashArray: [10, 5]
type: [10, 5]
},
symbol: 'circle',
//symbolRotate: 60,
......@@ -363,72 +359,68 @@ under the License.
color: 'red',
borderType: 'dashed',
borderWidth: 1,
borderColor: 'cyan',
borderDashArray: [2, 2]
borderColor: 'purple'
},
emphasis: {
lineStyle: {
type: 'dotted'
},
itemStyle: {
borderType: 'dashed',
borderType: [12, 3, 3],
borderWidth: 2,
borderColor: '#000',
borderDashArray: [12, 3, 3]
borderColor: '#000'
}
}
},
{
name: 'lineStyle.dashArray is [12, 3, 3]',
name: 'lineStyle.type is [12, 3, 3]',
type: 'line',
data: [6200, 6210, 6200, 6220, 6200, 6230],
symbolSize: 10,
smooth: true,
lineStyle: {
type: 'dashed',
dashArray: [12, 3, 3]
type: [12, 3, 3]
}
},
{
name: 'lineStyle.dashArray is [20, 3, 3, 3, 3, 3, 3, 3]',
name: 'lineStyle.type is [20, 3, 3, 3, 3, 3, 3, 3]',
type: 'line',
data: [5200, 5210, 5200, 5220, 5200, 5230],
symbolSize: 10,
smooth: true,
lineStyle: {
type: 'dashed',
dashArray: [20, 3, 3, 3, 3, 3, 3, 3]
type: [20, 3, 3, 3, 3, 3, 3, 3]
}
},
{
name: 'lineStyle.dashArray is [20, 3, 3, 3, 3, 3, 3, 3]\nlineStyle.dashOffset is 20',
name: 'lineStyle.type is [20, 3, 3, 3, 3, 3, 3, 3]\nlineStyle.dashOffset is 20',
type: 'line',
data: [4200, 4210, 4200, 4220, 4200, 4230],
symbolSize: 10,
smooth: true,
lineStyle: {
type: 'dashed',
dashArray: [20, 3, 3, 3, 3, 3, 3, 3],
type: [20, 3, 3, 3, 3, 3, 3, 3],
dashOffset: 20
}
},
{
name: 'lineStyle.dashArray is [2, 6]\nlineStyle.type is dotted',
name: 'lineStyle.type is [2, 6]',
type: 'line',
data: [3250, 3260, 3250, 3270, 3250, 3280],
symbolSize: 10,
smooth: true,
lineStyle: {
type: 'dotted',
dashArray: [2, 6]
type: [2, 6]
}
},
{
name: 'lineStyle.dashArray is [2, 2]\nlineStyle.type is dotted',
name: 'lineStyle.type is [2, 2]',
type: 'line',
data: [2200, 2210, 2200, 2220, 2200, 2230],
symbolSize: 10,
smooth: true,
lineStyle: {
type: 'dotted',
dashArray: [2, 2]
type: [2, 2]
}
},
{
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或