diff --git a/__tests__/unit/plots/dual-axes/pattern-spec.ts b/__tests__/unit/plots/dual-axes/pattern-spec.ts new file mode 100644 index 0000000000..514ed7a480 --- /dev/null +++ b/__tests__/unit/plots/dual-axes/pattern-spec.ts @@ -0,0 +1,152 @@ +import { DualAxes } from '../../../../src'; +import { PV_DATA, UV_DATA } from '../../../data/pv-uv'; +import { createDiv } from '../../../utils/dom'; +import { MultipleData } from '../../../data/common'; + +describe('dual-axes: pattern', () => { + it('column pattern: obj', () => { + const dualAxes = new DualAxes(createDiv(), { + width: 400, + height: 500, + data: [PV_DATA, UV_DATA], + xField: 'date', + yField: ['pv', 'uv'], + geometryOptions: [ + { + geometry: 'column', + pattern: { + type: 'dot', + }, + }, + { + geometry: 'line', + }, + ], + }); + + dualAxes.render(); + + const [leftView] = dualAxes.chart.views; + expect(leftView.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + expect(leftView.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + expect(leftView.geometries[0].elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + + dualAxes.destroy(); + }); + + it('column pattern: callback', () => { + const dualAxes = new DualAxes(createDiv(), { + width: 400, + height: 500, + data: [PV_DATA, UV_DATA], + xField: 'date', + yField: ['pv', 'uv'], + geometryOptions: [ + { + geometry: 'column', + pattern: ({ pv }) => { + if (pv > 630000) { + return { type: 'line' }; + } + }, + }, + { + geometry: 'line', + }, + ], + }); + + dualAxes.render(); + + const [leftView] = dualAxes.chart.views; + expect(leftView.geometries[0].elements[3].shape.attr('fill') instanceof CanvasPattern).toEqual(false); + expect(leftView.geometries[0].elements[4].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + expect(leftView.geometries[0].elements[5].shape.attr('fill') instanceof CanvasPattern).toEqual(false); + + dualAxes.destroy(); + }); + + it('stack column pattern: obj', () => { + const dualAxes = new DualAxes(createDiv('stack column and stack line'), { + height: 500, + data: [MultipleData, MultipleData], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + pattern: { + type: 'line', + }, + }, + { + geometry: 'line', + seriesField: 'type', + smooth: true, + isGroup: true, + isStack: true, + groupField: 'name', + }, + ], + tooltip: false, + }); + + dualAxes.render(); + + const [leftView] = dualAxes.chart.views; + expect(leftView.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + expect(leftView.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + expect(leftView.geometries[0].elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + + dualAxes.destroy(); + }); + + it('stack column pattern: callback', () => { + const dualAxes = new DualAxes(createDiv('stack column and stack line'), { + height: 500, + data: [MultipleData, MultipleData], + xField: 'month', + yField: ['value', 'value'], + geometryOptions: [ + { + geometry: 'column', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + pattern: ({ type }) => { + if (type === '语文') { + return { + type: 'line', + }; + } + }, + }, + { + geometry: 'line', + seriesField: 'type', + smooth: true, + isGroup: true, + isStack: true, + groupField: 'name', + }, + ], + tooltip: false, + }); + + dualAxes.render(); + + const [leftView] = dualAxes.chart.views; + expect(leftView.geometries[0].elements[0].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + expect(leftView.geometries[0].elements[1].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + expect(leftView.geometries[0].elements[2].shape.attr('fill') instanceof CanvasPattern).toEqual(true); + expect(leftView.geometries[0].elements[3].shape.attr('fill') instanceof CanvasPattern).toEqual(false); + expect(leftView.geometries[0].elements[4].shape.attr('fill') instanceof CanvasPattern).toEqual(false); + + dualAxes.destroy(); + }); +}); diff --git a/docs/api/pattern.en.md b/docs/api/pattern.en.md index 205d0ef520..db0bd548f4 100644 --- a/docs/api/pattern.en.md +++ b/docs/api/pattern.en.md @@ -3,4 +3,38 @@ title: Pattern order: 12 --- -`markdown:docs/api/pattern.zh.md` +### Introduction +We can set patterns for geometries. +- We provide the default, high contrast patterns: dot, line, and square. For charts with poor color differentiation, pattern can be used as an "intuitive, visual classification attribute" to distinguish each item, making it color-blind friendly. +- add grouping for color: Pattern can help to expand the classification of colors when there are not enough harmonious colors, or when the color has a small proportion, the distinction is not obvious. +- Subdivision and grouping with color: We can use pattern as a "group", and the color as sub classification in this group. +- Grouping as degree: The size of a circle or square, the thickness of a line can indicate "degree". +- Highlight key points and enrich expression: Pattern not only has a "good-looking" skin, but also can highlight a certain items for storytelling. + +### Use pattern in G2Plot + +G2Plot with built-in `'dot' | 'line' | 'square'` several patterns, the pattern inherits the current element's fill color by default. + + + +Usage for scenes: + +- [Demo1](/zh/examples/plugin/pattern#legend-marker-with-pattern): Set pattern for legend marker +- [Demo2](/zh/examples/plugin/pattern#bar-pattern): Set pattern with callback for each geometry + + + + +### API + +`markdown:docs/common/pattern.en.md` + +### Attention + +Please note the use of pattern, which currently has some limitations. + +1. Pattern is not supported in the `svg` rendering mode. +2. Pattern inherits the fill color of element by default, but does not support gradient color for pattern fill color, i.e. when we needs gradient color for element, pattern background color cannot be inherited and needs to be specified manually. See: [Demo](/zh/examples/tiny/tiny-area#pattern) +3. Tooltip, the legend marker is still in plain color. For the legend marker, consider using a callback to set it, see:[Demo](/zh/examples/plugin/pattern#pie-pattern-callback) + + diff --git a/docs/api/pattern.zh.md b/docs/api/pattern.zh.md index 8fbe6c8cff..07ccb839dc 100644 --- a/docs/api/pattern.zh.md +++ b/docs/api/pattern.zh.md @@ -4,8 +4,12 @@ order: 12 --- ### 介绍 - -使用 Pattern 可以很有用地对相似的项目进行分组，例如，假设您想要构建一个显示各种食物的饼图，您可以使用颜色比例尺为每种食物指定一种唯一的颜色，然后您可以对蔬菜/水果/肉类/进行分组，为每组使用类似的 pattern（同时保持颜色）。 +pattern 是附着在图形上的贴图样式。 +- 我们内置了默认的、区分度较高的三种贴图：点、线、方形。在颜色区分度不高的图表中，pattern 能够作为「直观的、视觉上的分类属性」来区分每个项目，对色盲人士友好。 +- 扩充颜色分组：pattern 还可以作为颜色的「补充项」。遇到和谐的颜色「不够用」、颜色占比小「区分不明显」等情况，pattern 可以帮助颜色扩充分类。 +- 结合颜色分组：我们可以用 pattern 作为「组」，然后用颜色在该组下进行细粒度的分类。 +- 程度分组：圆形和方形的大小、线的粗细可以用来表示「程度」。 +- 突出重点、丰富表现力：pattern 不仅有「好看」的皮囊，还可以作为讲故事的「点睛之笔」，高亮某个项目。 ### 在 G2Plot 中使用 pattern diff --git a/docs/api/plots/dual-axes.en.md b/docs/api/plots/dual-axes.en.md index 60c99a1992..8a3df08e1e 100644 --- a/docs/api/plots/dual-axes.en.md +++ b/docs/api/plots/dual-axes.en.md @@ -91,6 +91,7 @@ The graph corresponding to the column is configured as follows: | columnStyle | _StyleAttr \| Function_ | Column style configuration[Column columnStyle](/en/docs/api/plots/column#columnstyle) | | | label | _ContinueLegendLabelCfg_ | Column label [Column label](/en/docs/api/plots/column#label) | | color | _string \| string[] \| Function_ | Specifies the color of the point [Column color](/en/docs/api/plots/column#color) | +| pattern | _object \| Function_ | Specifies the pattern of the column [Column pattern](/en/docs/api/plots/column#pattern) | | groupField | _string_ | Split field, used to stack group histograms. Split field takes precedence over SeriesField. IsGroup: true will group by GroupField. | - | ### Plot Components diff --git a/docs/api/plots/dual-axes.zh.md b/docs/api/plots/dual-axes.zh.md index 6f2aec6913..f86b887034 100644 --- a/docs/api/plots/dual-axes.zh.md +++ b/docs/api/plots/dual-axes.zh.md @@ -90,6 +90,7 @@ const data = [[{ time: '1991'，value: 20 }], [{ time: '1992', count: 20 }]]; | columnStyle | _StyleAttr \| Function_ | 柱子样式配置，具体用法同[柱形图 columnStyle](/zh/docs/api/plots/column#columnstyle) | | | label | _ContinueLegendLabelCfg_ | 柱形图 label,具体用法同[柱形图 label](/zh/docs/api/plots/column#label) | | color | _string \| string[] \| Function_ | 指定点的颜色。具体用法同[柱形图 color](/zh/docs/api/plots/column#color) | +| pattern | _object \| Function_ | 柱子的贴图配置，具体用法同[柱形图 columnStyle](/zh/docs/api/plots/column#pattern) | | groupField | _string_ | 拆分字段，用于堆叠+分组柱图，拆分优先级高于 seriesField，isGroup: true 时会根据 groupField 进行分组。 | - | ### 图表组件 diff --git a/docs/common/pattern.en.md b/docs/common/pattern.en.md index 678ecb8dbe..8e9aa1250c 100644 --- a/docs/common/pattern.en.md +++ b/docs/common/pattern.en.md @@ -2,7 +2,7 @@ Set the pattern style of the geometries. - PatternOption: consists of `type` and `cfg`, `type` includes: `dot`, `line`, `square`, `cfg` is optional. - Features: pattern will override the `style` of geometry (such as pieStyle, columnStyle, etc.). - Usage: You can set a uniform pattern style for all geometries of the chart by using configuration (`PatternOption`) or `CanvasPattern` object, and a `callback` is provided to set the pattern for each geometry. -In addition, we provide `getCanvasPattern` function, pass in the PatternOption to create the pattern to modify the Legend, Tooltip Marker styles[Demo](/zh/examples/plugin/pattern#legend-marker-with-pattern) +In addition, we provide `getCanvasPattern` function, pass in the PatternOption to create the pattern to modify the Legend styles[Demo](/zh/examples/plugin/pattern#legend-marker-with-pattern) The type of pattern is defined as follows: ```plain @@ -71,7 +71,7 @@ Additional configuration for dotPattern | Attribute | Type | Description | | ------------- | --------------- | ---------------- | -| size | _number_ | The size of the dot, default: `4` | +| size | _number_ | The size of the dot, default: `6` | | padding | _number_ | The distance between dots, default: `2` | | isStagger | _boolean_ | Staggered dots. default: `true` | @@ -79,12 +79,12 @@ Additional configuration for linePattern | Attribute | Type | Description | | ------------- | --------------- | ---------------- | -| spacing | _number_ | The distance between the two lines, default: `4` | +| spacing | _number_ | The distance between the two lines, default: `5` | Additional configuration for squarePattern | Attribute | Type | Description | | ------------- | --------------- | ---------------- | -| size | _number_ | The size of the square, default: `5` | -| padding | _number_ | The distance between squares, default:`0` | +| size | _number_ | The size of the square, default: `6` | +| padding | _number_ | The distance between squares, default:`1` | | isStagger | _boolean_ | Staggered squares. default:`true` | \ No newline at end of file diff --git a/docs/common/pattern.zh.md b/docs/common/pattern.zh.md index 66591b286e..b0adc92a12 100644 --- a/docs/common/pattern.zh.md +++ b/docs/common/pattern.zh.md @@ -2,7 +2,7 @@ - 配置项：由`type`和`cfg`组成，`type`目前包括三种类型：`dot`、`line`、`square`，`cfg`为可选项。 - 特点：`pattern`会覆盖当前图形设置的`style`样式(如 pieStyle、columnStyle 等)。 -- 使用方式：可通过 配置项(PatternOption) 或传入 CanvasPattern 对象 的方式给图表的所有图形设置统一的贴图样式，还提供了 callback 的方式给对应的图形设置样式。此外，提供了 getCanvasPattern 方法传入 PatternOption 配置来创建 pattern，以修改 Legend、Tooltip Marker 样式[Demo](/zh/examples/plugin/pattern#legend-marker-with-pattern) +- 使用方式：可通过 配置项(PatternOption) 或传入 CanvasPattern 对象 的方式给图表的所有图形设置统一的贴图样式，还提供了 callback 的方式给对应的图形设置样式。此外，提供了 getCanvasPattern 方法传入 PatternOption 配置来创建 pattern，以修改 Legend 样式[Demo](/zh/examples/plugin/pattern#legend-marker-with-pattern) pattern 的类型定义如下： @@ -73,7 +73,7 @@ dotPattern 额外的 cfg 配置项 | 属性名 | 类型 | 介绍 | | ------------- | --------------- | ---------------- | -| size | _number_ | 圆点的大小，默认为`4` | +| size | _number_ | 圆点的大小，默认为`6` | | padding | _number_ | 圆点之间的间隔，默认为`2` | | isStagger | _boolean_ | 圆点之间是否交错，默认为`true` | @@ -81,12 +81,12 @@ linePattern 额外的 cfg 配置项 | 属性名 | 类型 | 介绍 | | ------------- | --------------- | ---------------- | -| spacing | _number_ | 两条线之间的距离，默认为`4` | +| spacing | _number_ | 两条线之间的距离，默认为`5` | squarePattern 额外的 cfg 配置项 | 属性名 | 类型 | 介绍 | | ------------- | --------------- | ---------------- | -| size | _number_ | 矩形的大小，默认为`5` | -| padding | _number_ | 矩形之间的间隔，默认为`0` | +| size | _number_ | 矩形的大小，默认为`6` | +| padding | _number_ | 矩形之间的间隔，默认为`1` | | isStagger | _boolean_ | 矩形之间是否交错，默认为`true` | \ No newline at end of file diff --git a/examples/dual-axes/column-line/demo/meta.json b/examples/dual-axes/column-line/demo/meta.json index 870c5b557e..c7f931d673 100644 --- a/examples/dual-axes/column-line/demo/meta.json +++ b/examples/dual-axes/column-line/demo/meta.json @@ -51,6 +51,15 @@ "en": "Slider with column line" }, "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/fxukGXuXfg/89ea37e5-e00d-4424-b75e-1aba3ff8b633.png" + }, + { + "filename": "pattern.ts", + "title": { + "zh": "带贴图图案的柱线混合图表", + "en": "column line with pattern" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/iMCSWEAapb/d19f59e0-788a-4945-8fbb-85b921a6e654.png" } ] } diff --git a/examples/plugin/pattern/demo/area-pattern.ts b/examples/plugin/pattern/demo/area-pattern.ts new file mode 100644 index 0000000000..ba068a2ca3 --- /dev/null +++ b/examples/plugin/pattern/demo/area-pattern.ts @@ -0,0 +1,81 @@ +import { Area } from '@antv/g2plot'; + +const data = [ + { country: 'Asia', year: '1750', value: 502 }, + { country: 'Asia', year: '1800', value: 635 }, + { country: 'Asia', year: '1850', value: 809 }, + { country: 'Asia', year: '1900', value: 5268 }, + { country: 'Asia', year: '1950', value: 4400 }, + { country: 'Asia', year: '1999', value: 3634 }, + { country: 'Asia', year: '2050', value: 947 }, + { country: 'Africa', year: '1750', value: 106 }, + { country: 'Africa', year: '1800', value: 107 }, + { country: 'Africa', year: '1850', value: 111 }, + { country: 'Africa', year: '1900', value: 1766 }, + { country: 'Africa', year: '1950', value: 221 }, + { country: 'Africa', year: '1999', value: 767 }, + { country: 'Africa', year: '2050', value: 133 }, + { country: 'Europe', year: '1750', value: 163 }, + { country: 'Europe', year: '1800', value: 203 }, + { country: 'Europe', year: '1850', value: 276 }, + { country: 'Europe', year: '1900', value: 628 }, + { country: 'Europe', year: '1950', value: 547 }, + { country: 'Europe', year: '1999', value: 729 }, + { country: 'Europe', year: '2050', value: 408 }, + { country: 'Oceania', year: '1750', value: 200 }, + { country: 'Oceania', year: '1800', value: 200 }, + { country: 'Oceania', year: '1850', value: 200 }, + { country: 'Oceania', year: '1900', value: 460 }, + { country: 'Oceania', year: '1950', value: 230 }, + { country: 'Oceania', year: '1999', value: 300 }, + { country: 'Oceania', year: '2050', value: 300 }, +]; + +const pattern = ({ country }) => { + if (country === 'Asia') { + return { + type: 'line', + cfg: { + lineWidth: 10, + strokeOpacity: 0.6, + }, + }; + } else if (country === 'Europe') { + return { + type: 'dot', + cfg: { + size: 10, + padding: 5, + fill: '#fff', + fillOpacity: 0.8, + }, + }; + } +}; + +const area = new Area('container', { + data, + xField: 'year', + yField: 'value', + seriesField: 'country', + color: ['#82d1de', '#cb302d', '#e3ca8c'], + areaStyle: { + fillOpacity: 0.7, + }, + meta: { + year: { + nice: true, + range: [0, 1], + }, + }, + smooth: true, + yAxis: { + label: { + formatter: (value) => { + return value * 100; + }, + }, + }, + pattern, +}); +area.render(); diff --git a/examples/plugin/pattern/demo/bar-pattern.ts b/examples/plugin/pattern/demo/bar-pattern.ts index c84e006540..8439f65fc5 100644 --- a/examples/plugin/pattern/demo/bar-pattern.ts +++ b/examples/plugin/pattern/demo/bar-pattern.ts @@ -8,34 +8,36 @@ const data = [ { type: '分类四', value: 15 }, { type: '分类五', value: 10 }, ]; + const PATTERN_MAP = { 分类一: { type: 'dot', }, 分类二: { - type: 'square', + type: 'line', }, 分类三: { - type: 'line', + type: 'square', }, 分类四: { - type: 'square', + type: 'line', cfg: { - size: 4, - padding: 1, - rotation: 45, - isStagger: false, + spacing: 6, + lineWidth: 2, + rotation: 90, }, }, 分类五: { - type: 'line', + type: 'square', cfg: { - spacing: 3, - lineWidth: 2, - rotation: 90, + size: 5, + padding: 2, + rotation: 45, + isStagger: false, }, }, }; + const pattern = ({ type }, color) => getCanvasPattern(deepMix({}, PATTERN_MAP[type], { cfg: { backgroundColor: color } })); @@ -51,6 +53,7 @@ const plot = new Bar('container', { return { style: { fill: pattern({ type: text }, color), + r: 8, }, }; }, diff --git a/examples/plugin/pattern/demo/column-pattern.ts b/examples/plugin/pattern/demo/column-pattern.ts deleted file mode 100644 index 870d7c57d5..0000000000 --- a/examples/plugin/pattern/demo/column-pattern.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Column } from '@antv/g2plot'; - -const data = [ - { type: '分类一', value: 27 }, - { type: '分类二', value: 25 }, - { type: '分类三', value: 18 }, - { type: '分类四', value: 15 }, - { type: '分类五', value: 10 }, - { type: '其他', value: 5 }, -]; - -const plot = new Column('container', { - data, - yField: 'value', - xField: 'type', - pattern: { - type: 'line', - cfg: { - spacing: 6, - lineWidth: 2, - strokeOpacity: 0.5, - rotation: 45, - }, - }, -}); - -plot.render(); diff --git a/examples/plugin/pattern/demo/donut-pattern.ts b/examples/plugin/pattern/demo/donut-pattern.ts new file mode 100644 index 0000000000..0914456885 --- /dev/null +++ b/examples/plugin/pattern/demo/donut-pattern.ts @@ -0,0 +1,98 @@ +import { Pie } from '@antv/g2plot'; + +const data = [ + { type: '分类一', value: 27 }, + { type: '分类二', value: 25 }, + { type: '分类三', value: 18 }, + { type: '分类四', value: 15 }, + { type: '分类五', value: 10 }, + { type: '其他', value: 5 }, +]; + +const pattern = ({ type }) => { + if (type === '分类一') { + return { + type: 'line', + cfg: { + lineWidth: 6, + spacing: 5, + }, + }; + } else if (type === '分类三') { + return { + type: 'dot', + cfg: { + size: 10, + }, + }; + } + return; +}; + +const piePlot = new Pie('container', { + data, + angleField: 'value', + colorField: 'type', + radius: 0.7, + innerRadius: 0.6, + label: { + type: 'outer', + offset: '50%', + content: '{value}', + style: { + fontSize: 14, + }, + }, + interactions: [{ type: 'element-selected' }, { type: 'element-active' }], + statistic: { + title: false, + content: { + style: { + whiteSpace: 'pre-wrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + content: 'AntV\nG2Plot', + }, + }, + pattern, +}); + +piePlot.update({ + theme: { + styleSheet: { + brandColor: '#014c63', + paletteQualitative10: [ + '#014c63', + '#168575', + '#0bc286', + '#96dcb0', + '#F2EAEA', + '#FFA884', + '#FF6836', + '#D13808', + '#7A270E', + ], + paletteQualitative20: [ + '#014c63', + '#10686c', + '#168575', + '#16a37e', + '#0bc286', + '#65cf9b', + '#96dcb0', + '#c1e8c5', + '#F2EAEA', + '#FFC5AC', + '#FFA884', + '#FF895D', + '#FF6836', + '#F3470D', + '#D13808', + '#A4300C', + '#7A270E', + ], + }, + }, +}); +piePlot.render(); diff --git a/examples/plugin/pattern/demo/group-column-pattern.ts b/examples/plugin/pattern/demo/group-column-pattern.ts index 27006ccb4a..b79574cade 100644 --- a/examples/plugin/pattern/demo/group-column-pattern.ts +++ b/examples/plugin/pattern/demo/group-column-pattern.ts @@ -1,41 +1,129 @@ -import { Column } from '@antv/g2plot'; +import { Column, getCanvasPattern } from '@antv/g2plot'; const data = [ - { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 }, - { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 }, - { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 }, - { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 }, - { name: 'London', 月份: 'May', 月均降雨量: 47 }, - { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 }, - { name: 'London', 月份: 'Jul.', 月均降雨量: 24 }, - { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 }, - { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 }, - { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 }, - { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 }, - { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 }, - { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 }, - { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 }, - { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 }, - { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }, + { + name: 'London', + 月份: 'Jan.', + 月均降雨量: 18.9, + }, + { + name: 'London', + 月份: 'Feb.', + 月均降雨量: 28.8, + }, + { + name: 'London', + 月份: 'Mar.', + 月均降雨量: 39.3, + }, + { + name: 'London', + 月份: 'Apr.', + 月均降雨量: 81.4, + }, + { + name: 'London', + 月份: 'May', + 月均降雨量: 47, + }, + { + name: 'London', + 月份: 'Jun.', + 月均降雨量: 20.3, + }, + { + name: 'London', + 月份: 'Jul.', + 月均降雨量: 24, + }, + { + name: 'London', + 月份: 'Aug.', + 月均降雨量: 35.6, + }, + { + name: 'Berlin', + 月份: 'Jan.', + 月均降雨量: 12.4, + }, + { + name: 'Berlin', + 月份: 'Feb.', + 月均降雨量: 23.2, + }, + { + name: 'Berlin', + 月份: 'Mar.', + 月均降雨量: 34.5, + }, + { + name: 'Berlin', + 月份: 'Apr.', + 月均降雨量: 99.7, + }, + { + name: 'Berlin', + 月份: 'May', + 月均降雨量: 52.6, + }, + { + name: 'Berlin', + 月份: 'Jun.', + 月均降雨量: 35.5, + }, + { + name: 'Berlin', + 月份: 'Jul.', + 月均降雨量: 37.4, + }, + { + name: 'Berlin', + 月份: 'Aug.', + 月均降雨量: 42.4, + }, ]; -const plot = new Column('container', { +const pattern = (datum, color) => + getCanvasPattern({ + type: datum.name === 'London' ? 'dot' : 'line', + cfg: { + backgroundColor: color, + }, + }); + +const stackedColumnPlot = new Column('container', { data, - yField: '月均降雨量', + isGroup: true, xField: '月份', + yField: '月均降雨量', seriesField: 'name', - isGroup: true, - pattern: ({ name }) => { - if (name === 'London') { - return { - type: 'line', - }; - } else { + /** 设置间距 */ + // marginRatio: 0.1, + label: { + // 可手动配置 label 数据标签位置 + position: 'middle', // 'top', 'middle', 'bottom' + // 可配置附加的布局方法 + layout: [ + // 柱形图数据标签位置自动调整 + { type: 'interval-adjust-position' }, + // 数据标签防遮挡 + { type: 'interval-hide-overlap' }, + // 数据标签文颜色自动调整 + { type: 'adjust-color' }, + ], + }, + legend: { + marker: (text, index, item) => { + const color = item.style.fill; return { - type: 'dot', + style: { + fill: pattern({ name: text }, color), + r: 8, + }, }; - } + }, }, + pattern, }); -plot.render(); +stackedColumnPlot.render(); diff --git a/examples/plugin/pattern/demo/heatmap-cookie-pattern.ts b/examples/plugin/pattern/demo/heatmap-cookie-pattern.ts new file mode 100644 index 0000000000..3b9fe69ba0 --- /dev/null +++ b/examples/plugin/pattern/demo/heatmap-cookie-pattern.ts @@ -0,0 +1,73 @@ +import { Heatmap } from '@antv/g2plot'; + +const pattern = ({ value }, color) => { + if (value >= 90) { + return { + type: 'square', + cfg: { + size: 2, + padding: 1, + fill: color, + backgroundColor: '#44120c', + fillOpacity: 0.9, + isStagger: false, + rotation: 45, + }, + }; + } else if (70 <= value && value < 90) { + return { + type: 'square', + cfg: { + size: 10, + padding: 1, + fill: color, + backgroundColor: '#44120c', + fillOpacity: 0.9, + isStagger: false, + rotation: 45, + }, + }; + } + if (60 <= value && value < 70) { + return { + type: 'dot', + cfg: { + size: 2, + padding: 5, + lineWidth: 1, + fill: 'transparent', + stroke: '#44120c', + strokeOpacity: 0.9, + }, + }; + } + return { + type: 'line', + cfg: { + spacing: 10, + lineWidth: 1, + stroke: '#fff', + strokeOpacity: 0.5, + }, + }; +}; + +fetch('https://gw.alipayobjects.com/os/bmw-prod/68d3f380-089e-4683-ab9e-4493200198f9.json') + .then((res) => res.json()) + .then((data) => { + const heatmapPlot = new Heatmap(document.getElementById('container'), { + data, + xField: 'name', + yField: 'country', + colorField: 'value', + color: '#edaa53', + shape: 'circle', + heatmapStyle: { + shadowBlur: 10, + shadowColor: 'rgba(0,0,0,0.3)', + }, + pattern, + }); + + heatmapPlot.render(); + }); diff --git a/examples/plugin/pattern/demo/heatmap-pattern.ts b/examples/plugin/pattern/demo/heatmap-pattern.ts new file mode 100644 index 0000000000..fdee61f526 --- /dev/null +++ b/examples/plugin/pattern/demo/heatmap-pattern.ts @@ -0,0 +1,48 @@ +import { Heatmap } from '@antv/g2plot'; + +const pattern = ({ value }) => { + if (value >= 90) { + return { + type: 'line', + cfg: { + spacing: 2, + lineWidth: 6, + strokeOpacity: 0.9, + }, + }; + } else if (70 <= value && value < 90) { + return { + type: 'line', + cfg: { + spacing: 8, + lineWidth: 1, + strokeOpacity: 0.9, + }, + }; + } + if (60 <= value && value < 70) { + return { + type: 'dot', + cfg: { + size: 2, + padding: 5, + fillOpacity: 0.9, + }, + }; + } +}; + +fetch('https://gw.alipayobjects.com/os/bmw-prod/68d3f380-089e-4683-ab9e-4493200198f9.json') + .then((res) => res.json()) + .then((data) => { + const heatmapPlot = new Heatmap(document.getElementById('container'), { + data, + xField: 'name', + yField: 'country', + color: '#8E0C24', + colorField: 'value', + pattern, + }); + + heatmapPlot.render(); + }); diff --git a/examples/plugin/pattern/demo/legend-marker-with-pattern.ts b/examples/plugin/pattern/demo/legend-marker-with-pattern.ts index 813f5c82c0..2ce917acd8 100644 --- a/examples/plugin/pattern/demo/legend-marker-with-pattern.ts +++ b/examples/plugin/pattern/demo/legend-marker-with-pattern.ts @@ -1,3 +1,4 @@ +// 外置方法 getCanvasPattern import { Pie, getCanvasPattern } from '@antv/g2plot'; const data = [ @@ -5,41 +6,40 @@ const data = [ { type: '分类二', value: 25 }, { type: '分类三', value: 18 }, { type: '分类四', value: 15 }, - { type: '分类五', value: 10 }, { type: '其他', value: 5 }, ]; const pattern = (datum, color) => getCanvasPattern({ - type: datum.type === '其他' ? 'dot' : 'line', + type: datum.type === '分类一' ? 'dot' : 'line', cfg: { - backgroundColor: datum.type === '其他' ? '#014c63' : color, + backgroundColor: datum.type === '分类一' ? '#d78ab7' : color, }, }); const plot = new Pie('container', { - appendPadding: 10, data, angleField: 'value', colorField: 'type', + color: ['#215B77', '#1B9CD0', '#61C9FF', '#ABDFFF', '#FFDE94'], radius: 0.6, label: { type: 'outer', - offset: '20%', - content: ({ percent }) => `${(percent * 100).toFixed(0)}%`, - style: { - fontSize: 12, - }, + offset: 10, + labelLine: false, + content: '{value}', }, pieStyle: { lineWidth: 1, }, + // 给legend增加贴图 legend: { marker: (text, index, item) => { const color = item.style.fill; return { style: { fill: pattern({ type: text }, color), + r: 8, }, }; }, diff --git a/examples/plugin/pattern/demo/liquid-pattern.ts b/examples/plugin/pattern/demo/liquid-pattern.ts new file mode 100644 index 0000000000..b94a237a7d --- /dev/null +++ b/examples/plugin/pattern/demo/liquid-pattern.ts @@ -0,0 +1,34 @@ +import { Liquid } from '@antv/g2plot'; + +const liquidPlot = new Liquid('container', { + padding: [0, 120], + percent: 0.85, + outline: { + border: 4, + distance: 5, + }, + wave: { + length: 128, + }, + statistic: { + content: { + style: { + fontSize: 32, + fill: '#ffffff', + opacity: 1, + lineWidth: 2, + shadowColor: '#000', + shadowBlur: 10, + }, + offsetY: 2, + }, + }, + pattern: { + type: 'dot', + cfg: { + size: 30, + }, + }, +}); + +liquidPlot.render(); diff --git a/examples/plugin/pattern/demo/meta.json b/examples/plugin/pattern/demo/meta.json index a08f94eb59..7a86ff5a1f 100644 --- a/examples/plugin/pattern/demo/meta.json +++ b/examples/plugin/pattern/demo/meta.json @@ -11,7 +11,7 @@ "en": "Pie plot with pattern" }, "new": true, - "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/q74g6X7aF3/d9238359-5228-402e-a265-f3e2d25aa802.png" + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/cACfJO99IO/32b38815-8427-4111-a0f0-34208aa65dd8.png" }, { "filename": "legend-marker-with-pattern.ts", @@ -20,16 +20,7 @@ "en": "Custom legend marker with pattern" }, "new": true, - "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%241UK9BTcGM/c8446d1c-3180-4f95-8d9b-487ad04b87fc.png" - }, - { - "filename": "column-pattern.ts", - "title": { - "zh": "带贴图图案的柱状图", - "en": "Column plot with pattern" - }, - "new": true, - "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/1%26kZLf2KMW/68f576f5-1729-45f8-a48c-9e12e809ade1.png" + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/N%26xo4t7zRW/79c6bdf8-0cc6-49b7-94a2-f462b9f825bc.png" }, { "filename": "group-column-pattern.ts", @@ -38,7 +29,7 @@ "en": "Grouped column plot with pattern" }, "new": true, - "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/sAXTkW5p2C/93012937-dd60-4a52-9b4b-cb0ea01fd078.png" + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/wlurjHqyu%24/4b21f53e-7186-42c8-8f57-6f32c91a09ba.png" }, { "filename": "bar-pattern.ts", @@ -47,16 +38,70 @@ "en": "Bar plot with pattern" }, "new": true, - "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/5Q%24sV5H6BG/cc8ebaba-0c13-4f3e-bf24-0de4e20f6c2d.png" + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/APiY4THavu/93d5749b-1e0d-4118-b04f-4e928a7eb144.png" + }, + { + "filename": "stack-bar-pattern.ts", + "title": { + "zh": "带贴图图案的堆叠图", + "en": "Stack-bar plot with pattern" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/LGFxwRRwZl/d11e9835-a520-4a4c-9893-30b6a6ebb3c1.png" + }, + { + "filename": "donut-pattern.ts", + "title": { + "zh": "带贴图图案的环形图", + "en": "Donut with pattern" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/spgIo%26zAzG/6562dc40-2ac6-4c8a-b433-88e41e20621a.png" + }, + { + "filename": "area-pattern.ts", + "title": { + "zh": "带贴图图案的面积图", + "en": "Area with pattern" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/msiCPIX%243T/16b69b77-6a87-42e0-9e8c-9767d6b9df79.png" + }, + { + "filename": "stacked-group-column-pattern.ts", + "title": { + "zh": "带贴图图案的堆叠分组柱状图", + "en": "Stacked grouped column plot with pattern" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/1Ei8A%24VtRI/a9f53248-bdb4-4bc4-a567-3cd0d76e2a26.png" + }, + { + "filename": "heatmap-pattern.ts", + "title": { + "zh": "带贴图图案的热力图", + "en": "Heatmap with pattern" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/0zXfW5rjOu/e442fed3-047c-4f34-9536-8efe2e60a92f.png" + }, + { + "filename": "heatmap-cookie-pattern.ts", + "title": { + "zh": "带贴图图案的热力图", + "en": "Heatmap with pattern (cookie)" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vR9mVPFTmx/7b2e0aac-cee0-428b-bca3-c7082bb2b76f.png" }, { - "filename": "radial-bar-pattern.ts", + "filename": "liquid-pattern.ts", "title": { - "zh": "带贴图图案的玉珏图", - "en": "Radial-bar plot with pattern" + "zh": "带贴图图案的水波图", + "en": "Liquid with pattern" }, "new": true, - "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/WKAcXIU4px/a20a3082-5c77-4787-87e6-4d4b072470a7.png" + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/CBo9L7m9Ux/53202fa4-ad16-4c47-ba72-f8b9858f0c78.png" } ] } diff --git a/examples/plugin/pattern/demo/pie-pattern.ts b/examples/plugin/pattern/demo/pie-pattern.ts index 568316c5c0..86882c39aa 100644 --- a/examples/plugin/pattern/demo/pie-pattern.ts +++ b/examples/plugin/pattern/demo/pie-pattern.ts @@ -4,26 +4,43 @@ const data = [ { type: '分类一', value: 27 }, { type: '分类二', value: 25 }, { type: '分类三', value: 18 }, - { type: '分类四', value: 15 }, - { type: '分类五', value: 10 }, - { type: '其他', value: 5 }, ]; -const plot = new Pie('container', { - appendPadding: 10, +const pattern = ({ type }) => { + if (type === '分类一') { + return { + type: 'dot', + }; + } else if (type === '分类二') { + return { + type: 'square', + }; + } else if (type === '分类三') { + return { + type: 'line', + }; + } + return { + type: 'dot', + }; +}; + +const piePlot = new Pie('container', { data, angleField: 'value', colorField: 'type', - radius: 0.6, - label: false, - pattern: { - type: 'dot', - cfg: { - size: 4, - padding: 5, - }, + radius: 0.5, + legend: false, + label: { + type: 'spider', + labelHeight: 28, + content: '{name}\n{percentage}', + }, + pieStyle: { + lineWidth: 2, }, - interactions: [{ type: 'element-active' }], + pattern, + interactions: [{ type: 'element-selected' }, { type: 'element-active' }], }); -plot.render(); +piePlot.render(); diff --git a/examples/plugin/pattern/demo/radial-bar-pattern.ts b/examples/plugin/pattern/demo/radial-bar-pattern.ts deleted file mode 100644 index 44cfea2712..0000000000 --- a/examples/plugin/pattern/demo/radial-bar-pattern.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { RadialBar } from '@antv/g2plot'; - -const data = [ - { name: 'X6', star: 297 }, - { name: 'G', star: 506 }, - { name: 'AVA', star: 805 }, - { name: 'G2Plot', star: 1478 }, - { name: 'L7', star: 2029 }, - { name: 'G6', star: 7100 }, - { name: 'F2', star: 7346 }, - { name: 'G2', star: 10178 }, -]; - -const plot = new RadialBar('container', { - data, - xField: 'name', - yField: 'star', - // color 字段，可不设置 - colorField: 'name', - radius: 0.8, - innerRadius: 0.2, - tooltip: { - formatter: (datum) => { - return { name: 'star数', value: datum.star }; - }, - }, - pattern: { - type: 'dot', - cfg: { - size: 4, - padding: 2, - // dot 不进行交错 - isStagger: true, - }, - }, -}); - -plot.render(); diff --git a/examples/plugin/pattern/demo/stack-bar-pattern.ts b/examples/plugin/pattern/demo/stack-bar-pattern.ts new file mode 100644 index 0000000000..0c7b4dbdba --- /dev/null +++ b/examples/plugin/pattern/demo/stack-bar-pattern.ts @@ -0,0 +1,66 @@ +import { Column, getCanvasPattern } from '@antv/g2plot'; +import { deepMix } from '@antv/util'; + +const PATTERN_MAP = { + Gas: { + type: 'dot', + }, + Wasserkraft: { + type: 'line', + }, + Biomasse: { + type: 'square', + }, + Wind: { + type: 'line', + cfg: { + rotation: 90, + }, + }, + Solar: { + type: 'square', + cfg: { + size: 5, + padding: 2, + rotation: 45, + isStagger: false, + }, + }, +}; + +const pattern = ({ type }, color) => + getCanvasPattern(deepMix({}, PATTERN_MAP[type], { cfg: { backgroundColor: color } })); + +fetch('https://gw.alipayobjects.com/os/antfincdn/jSRiL%26YNql/percent-column.json') + .then((data) => data.json()) + .then((data) => { + const columnPlot = new Column('container', { + data, + xField: 'year', + yField: 'value', + seriesField: 'type', + isPercent: true, + isStack: true, + meta: { + value: { + min: 0, + max: 1, + }, + }, + pattern: ({ type }, color) => pattern({ type }, color), + legend: { + marker: (text, index, item) => { + const color = item.style.fill; + return { + style: { + fill: pattern({ type: text }, color), + r: 8, + }, + }; + }, + }, + interactions: [{ type: 'element-highlight-by-color' }, { type: 'element-link' }], + }); + + columnPlot.render(); + }); diff --git a/examples/plugin/pattern/demo/stacked-group-column-pattern.ts b/examples/plugin/pattern/demo/stacked-group-column-pattern.ts new file mode 100644 index 0000000000..5fdb44dd94 --- /dev/null +++ b/examples/plugin/pattern/demo/stacked-group-column-pattern.ts @@ -0,0 +1,80 @@ +import { Column } from '@antv/g2plot'; + +const pattern = ({ name }) => { + return name === '理科' + ? { + type: 'line', + cfg: { + lineWidth: 6, + spacing: 5, + }, + } + : { + type: 'dot', + cfg: { + size: 10, + }, + }; +}; + +fetch('https://gw.alipayobjects.com/os/antfincdn/cK%24sTxSsah/stack-group-column.json') + .then((data) => data.json()) + .then((data) => { + const column = new Column('container', { + data, + xField: 'month', + yField: 'value', + isGroup: true, + isStack: true, + seriesField: 'type', + groupField: 'name', + rawFields: ['type', 'name'], + columnStyle: { + radius: 5, + }, + pattern, + }); + + column.update({ + theme: { + styleSheet: { + brandColor: '#FF4500', + paletteQualitative10: [ + '#FF4500', + '#1AAF8B', + '#406C85', + '#F6BD16', + '#B40F0F', + '#2FB8FC', + '#4435FF', + '#FF5CA2', + '#BBE800', + '#FE8A26', + ], + paletteQualitative20: [ + '#FF4500', + '#1AAF8B', + '#406C85', + '#F6BD16', + '#B40F0F', + '#2FB8FC', + '#4435FF', + '#FF5CA2', + '#BBE800', + '#FE8A26', + '#946DFF', + '#6C3E00', + '#6193FF', + '#FF988E', + '#36BCCB', + '#004988', + '#FFCF9D', + '#CCDC8A', + '#8D00A1', + '#1CC25E', + ], + }, + }, + }); + column.render(); + }); diff --git a/examples/rose/basic/demo/meta.json b/examples/rose/basic/demo/meta.json index 416308c474..bce83cb8a4 100644 --- a/examples/rose/basic/demo/meta.json +++ b/examples/rose/basic/demo/meta.json @@ -35,6 +35,15 @@ "en": "Rose interaction - with element action" }, "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*OgVJR7IIQiMAAAAAAAAAAABkARQnAQ" + }, + { + "filename": "rose-pattern.ts", + "title": { + "zh": "带有贴图图案的玫瑰图", + "en": "Rose with pattern" + }, + "new": true, + "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/mVpttHqMHR/bf55e601-ccbe-40b2-bd04-d31ae0264fa8.png" } ] } diff --git a/examples/rose/basic/demo/rose-pattern.ts b/examples/rose/basic/demo/rose-pattern.ts new file mode 100644 index 0000000000..03ea3bf2f7 --- /dev/null +++ b/examples/rose/basic/demo/rose-pattern.ts @@ -0,0 +1,92 @@ +import { Rose } from '@antv/g2plot'; + +const data = [ + { type: '分类一', value: 27 }, + { type: '分类二', value: 25 }, + { type: '分类三', value: 18 }, + { type: '分类四', value: 15 }, + { type: '分类五', value: 10 }, + { type: '其他', value: 5 }, +]; + +const PATTERN_MAP = { + 分类一: { + type: 'dot', + cfg: { + size: 20, + padding: 5, + fill: '#fff', + strokeOpacity: 1, + opacity: 0.8, + }, + }, + 分类二: { + type: 'line', + cfg: { + stroke: '#FFA884', + lineWidth: 5, + spacing: 10, + rotation: 90, + backgroundColor: '#F2EAEA', + }, + }, + 分类三: { + type: 'square', + cfg: { + size: 3, + fill: '#014c63', + padding: 6, + }, + }, +}; + +const rosePlot = new Rose('container', { + data, + xField: 'type', + yField: 'value', + seriesField: 'type', + radius: 0.9, + legend: false, + pattern: ({ type }) => { + return PATTERN_MAP[type] || { type: 'line' }; + }, +}); + +rosePlot.update({ + theme: { + styleSheet: { + brandColor: '#215B77', + paletteQualitative10: [ + '#215B77', + '#1B9CD0', + '#61C9FF', + '#ABDFFF', + '#EFF3DE', + '#FFDE94', + '#FFC741', + '#D09C10', + '#795B16', + ], + paletteQualitative20: [ + '#215B77', + '#227BA2', + '#1B9CD0', + '#22BAED', + '#61C9FF', + '#8AD4FF', + '#ABDFFF', + '#C9E9FF', + '#EFF3DE', + '#FFE9B8', + '#FFDE94', + '#FFD470', + '#FFC741', + '#EDB40A', + '#D09C10', + '#A37B16', + '#795B16', + ], + }, + }, +}); +rosePlot.render(); diff --git a/src/plots/dual-axes/types.ts b/src/plots/dual-axes/types.ts index fa4dd03c91..45d098eef7 100644 --- a/src/plots/dual-axes/types.ts +++ b/src/plots/dual-axes/types.ts @@ -41,7 +41,15 @@ export type GeometryLineOption = Pick< // 柱设置接口 export type GeometryColumnOption = Pick< ColumnOptions, - 'seriesField' | 'isGroup' | 'isStack' | 'isRange' | 'isPercent' | 'columnWidthRatio' | 'marginRatio' | 'columnStyle' + | 'seriesField' + | 'isGroup' + | 'isStack' + | 'isRange' + | 'isPercent' + | 'columnWidthRatio' + | 'marginRatio' + | 'columnStyle' + | 'pattern' > & CommonGeometryOption; diff --git a/src/utils/pattern/dot.ts b/src/utils/pattern/dot.ts index 9f4b7e3355..562a77ac8a 100644 --- a/src/utils/pattern/dot.ts +++ b/src/utils/pattern/dot.ts @@ -13,12 +13,12 @@ import { * dotPattern的默认配置 */ export const defaultDotPatternCfg = { - size: 4, + size: 6, padding: 2, backgroundColor: 'transparent', opacity: 1, rotation: 0, - fill: '#FFF', + fill: '#fff', fillOpacity: 0.5, stroke: 'transparent', lineWidth: 0, diff --git a/src/utils/pattern/line.ts b/src/utils/pattern/line.ts index dc124fd047..b86d5965f3 100644 --- a/src/utils/pattern/line.ts +++ b/src/utils/pattern/line.ts @@ -7,12 +7,12 @@ import { initCanvas, drawBackground, transformMatrix, getPixelRatio } from './ut */ export const defaultLinePatternCfg = { rotation: 45, - spacing: 4, + spacing: 5, opacity: 1, backgroundColor: 'transparent', strokeOpacity: 0.5, - stroke: '#FFF', - lineWidth: 1, + stroke: '#fff', + lineWidth: 2, }; /** diff --git a/src/utils/pattern/square.ts b/src/utils/pattern/square.ts index 1b1df0bc59..c0e9e99714 100644 --- a/src/utils/pattern/square.ts +++ b/src/utils/pattern/square.ts @@ -13,13 +13,13 @@ import { * squarePattern 的 默认配置 */ export const defaultSquarePatternCfg = { - size: 5, - padding: 0, + size: 6, + padding: 1, isStagger: true, backgroundColor: 'transparent', opacity: 1, rotation: 0, - fill: '#FFF', + fill: '#fff', fillOpacity: 0.5, stroke: 'transparent', lineWidth: 0,