Skip to content

Commit 28c674e

Browse files
army8735Phieo
army8735
authored and
Phieo
committed
feat: 支持改变尺寸didUpdate后重新绘制大小 (#8)
1 parent 3333c07 commit 28c674e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1544
-831
lines changed

‎components/area/index.js‎

Lines changed: 128 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,98 @@ import F2 from '@antv/my-f2';
22
import methods from '../mixins/methods';
33
import util from '../util';
44

5+
function render(chart, props, width, height) {
6+
const { categories, series, xAxis, yAxis, tooltip, legend, adjust } = props;
7+
8+
chart.clear();
9+
10+
let data = [];
11+
if(series.length === 1) {
12+
data = series[0].data.map((item, i) => {
13+
return {
14+
key: categories[i],
15+
value: item,
16+
}
17+
});
18+
}
19+
else if(series.length > 1) {
20+
series.forEach(kind => {
21+
data = data.concat(kind.data.map((item, i) => {
22+
return {
23+
key: categories[i],
24+
value: item,
25+
type: kind.type,
26+
};
27+
}));
28+
});
29+
}
30+
chart.source(data);
31+
32+
if(xAxis) {
33+
if(xAxis.htAlign) {
34+
xAxis.label = util.label;
35+
}
36+
chart.scale('key', util.scale(xAxis));
37+
chart.axis('key', util.axis(xAxis));
38+
}
39+
if(yAxis) {
40+
chart.scale('value', util.scale(yAxis));
41+
chart.axis('value', util.axis(yAxis));
42+
}
43+
chart.tooltip(tooltip);
44+
chart.legend(legend);
45+
46+
const style = {};
47+
series.forEach(kind => {
48+
style[kind.type] = kind.style;
49+
});
50+
const color = {};
51+
series.forEach(kind => {
52+
color[kind.type] = kind.color;
53+
});
54+
55+
if(series.length === 1) {
56+
chart.area().position('key*value').color('type', type => {
57+
return color[type];
58+
}).adjust(adjust);
59+
chart.line().position('key*value').color('type', type => {
60+
return color[type];
61+
}).shape('type', type => {
62+
return style[type] || 'line';
63+
}).adjust(adjust);
64+
if(series[0].point) {
65+
chart.point().position('key*value').style(series[0].point);
66+
}
67+
}
68+
else if(series.length > 1) {
69+
chart.area().position('key*value').color('type', type => {
70+
return color[type];
71+
}).adjust(adjust);
72+
chart.line().position('key*value').color('type', type => {
73+
return color[type];
74+
}).shape('type', type => {
75+
return style[type] || 'line';
76+
}).adjust(adjust);
77+
let pointType = [];
78+
let pointStyle;
79+
series.forEach(kind => {
80+
if(kind.point) {
81+
pointType.push(kind.type);
82+
pointStyle = kind.point;
83+
}
84+
});
85+
if(pointType.length) {
86+
chart.point().position('key*value').color('type').size('type', v => {
87+
if(pointType.indexOf(v) === -1) {
88+
return 0;
89+
}
90+
}).style(pointStyle);
91+
}
92+
}
93+
94+
chart.changeSize(width, height);
95+
}
96+
597
Component({
698
mixins: [methods],
799
props: {
@@ -22,125 +114,63 @@ Component({
22114
});
23115

24116
const id = `am-mc-area-${this.$id}`;
25-
const ctx = my.createCanvasContext(id);
117+
const ctx = this.ctx = my.createCanvasContext(id);
26118
const canvas = this.canvas = new F2.Renderer(ctx);
27119

28-
const pixelRatio = my.getSystemInfoSync().pixelRatio;
120+
const pixelRatio = this.pixelRatio = my.getSystemInfoSync().pixelRatio;
29121
ctx.scale(pixelRatio, pixelRatio);
30122

31123
my.createSelectorQuery()
32124
.select(`#${id}`)
33125
.boundingClientRect()
34126
.exec(res => {
35-
if(!res || !res.length) {
127+
if(!res || !res.length || !res[0]) {
36128
return;
37129
}
38-
const {width, height} = res[0];
130+
const { width, height } = res[0];
131+
39132
this.setData({
40133
width: width * pixelRatio,
41134
height: height * pixelRatio,
42-
});
43-
const { padding, appendPadding } = this.props;
44-
45-
this.chart = new F2.Chart({
46-
el: canvas,
47-
width,
48-
height,
49-
padding,
50-
appendPadding,
135+
}, () => {
136+
const { padding, appendPadding } = this.props;
137+
138+
this.chart = new F2.Chart({
139+
el: canvas,
140+
width,
141+
height,
142+
padding,
143+
appendPadding,
144+
});
145+
146+
render(this.chart, this.props, width, height);
51147
});
52148
});
53149
},
54150
didUpdate() {
55-
const { categories, series, xAxis, yAxis, tooltip, legend, adjust } = this.props;
56-
57-
const chart = this.chart;
58-
chart.clear();
151+
const id = `am-mc-area-${this.$id}`;
152+
const pixelRatio = this.pixelRatio;
59153

60-
let data = [];
61-
if(series.length === 1) {
62-
data = series[0].data.map((item, i) => {
63-
return {
64-
key: categories[i],
65-
value: item,
154+
my.createSelectorQuery()
155+
.select(`#${id}`)
156+
.boundingClientRect()
157+
.exec(res => {
158+
if(!res || !res.length || !res[0]) {
159+
return;
66160
}
67-
});
68-
}
69-
else if(series.length > 1) {
70-
series.forEach(kind => {
71-
data = data.concat(kind.data.map((item, i) => {
72-
return {
73-
key: categories[i],
74-
value: item,
75-
type: kind.type,
76-
};
77-
}));
78-
});
79-
}
80-
chart.source(data);
81-
82-
if(xAxis) {
83-
if(xAxis.htAlign) {
84-
xAxis.label = util.label;
85-
}
86-
chart.scale('key', util.scale(xAxis));
87-
chart.axis('key', util.axis(xAxis));
88-
}
89-
if(yAxis) {
90-
chart.scale('value', util.scale(yAxis));
91-
chart.axis('value', util.axis(yAxis));
92-
}
93-
chart.tooltip(tooltip);
94-
chart.legend(legend);
95-
96-
const style = {};
97-
series.forEach(kind => {
98-
style[kind.type] = kind.style;
99-
});
100-
const color = {};
101-
series.forEach(kind => {
102-
color[kind.type] = kind.color;
103-
});
104-
105-
if(series.length === 1) {
106-
chart.area().position('key*value').color('type', type => {
107-
return color[type];
108-
}).adjust(adjust);
109-
chart.line().position('key*value').color('type', type => {
110-
return color[type];
111-
}).shape('type', type => {
112-
return style[type] || 'line';
113-
}).adjust(adjust);
114-
if(series[0].point) {
115-
chart.point().position('key*value').style(series[0].point);
116-
}
117-
}
118-
else if(series.length > 1) {
119-
chart.area().position('key*value').color('type', type => {
120-
return color[type];
121-
}).adjust(adjust);
122-
chart.line().position('key*value').color('type', type => {
123-
return color[type];
124-
}).shape('type', type => {
125-
return style[type] || 'line';
126-
}).adjust(adjust);
127-
let pointType = [];
128-
let pointStyle;
129-
series.forEach(kind => {
130-
if(kind.point) {
131-
pointType.push(kind.type);
132-
pointStyle = kind.point;
161+
const { width, height } = res[0];
162+
if(this.data.width !== width * pixelRatio || this.data.height !== height * pixelRatio) {
163+
this.ctx.scale(pixelRatio, pixelRatio);
133164
}
165+
166+
this.setData({
167+
width: width * pixelRatio,
168+
height: height * pixelRatio,
169+
}, () => {
170+
render(this.chart, this.props, width, height);
171+
});
134172
});
135-
if(pointType.length) {
136-
chart.point().position('key*value').color('type').size('type', v => {
137-
if(pointType.indexOf(v) === -1) {
138-
return 0;
139-
}
140-
}).style(pointStyle);
141-
}
142-
}
143173

144-
chart.render();
174+
145175
},
146176
});

‎components/bubble/index.acss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@
66
canvas{
77
width:100%;
88
height:100%;
9-
}
9+
}

0 commit comments

Comments
 (0)