@lowdefy/blocks-echarts 5.6.0 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
limitations under the License.
|
|
15
15
|
*/ import React from 'react';
|
|
16
16
|
import { withBlockDefaults } from '@lowdefy/block-utils';
|
|
17
|
-
import { registerTheme } from 'echarts';
|
|
18
17
|
import ReactECharts from 'echarts-for-react';
|
|
19
18
|
let EChart = class EChart extends React.Component {
|
|
20
19
|
triggerEvent(name, event) {
|
|
@@ -23,6 +22,19 @@ let EChart = class EChart extends React.Component {
|
|
|
23
22
|
event
|
|
24
23
|
});
|
|
25
24
|
}
|
|
25
|
+
componentDidUpdate() {
|
|
26
|
+
this.syncTheme();
|
|
27
|
+
}
|
|
28
|
+
// Apply a theme that changed after mount — an app switching to dark mode, say.
|
|
29
|
+
// A theme is plain JSON, so serialising it is a sound and cheap equality check.
|
|
30
|
+
syncTheme() {
|
|
31
|
+
const { theme } = this.props.properties;
|
|
32
|
+
if (!this.chart || !theme) return;
|
|
33
|
+
const applied = JSON.stringify(theme);
|
|
34
|
+
if (applied === this.appliedTheme) return;
|
|
35
|
+
this.appliedTheme = applied;
|
|
36
|
+
this.chart.setTheme(theme);
|
|
37
|
+
}
|
|
26
38
|
render() {
|
|
27
39
|
return /*#__PURE__*/ React.createElement("div", {
|
|
28
40
|
className: this.props.classNames?.element,
|
|
@@ -48,7 +60,8 @@ let EChart = class EChart extends React.Component {
|
|
|
48
60
|
width: '100%',
|
|
49
61
|
height: '100%'
|
|
50
62
|
},
|
|
51
|
-
theme: this.
|
|
63
|
+
theme: this.initialTheme,
|
|
64
|
+
onChartReady: this.onChartReady
|
|
52
65
|
}));
|
|
53
66
|
}
|
|
54
67
|
constructor(props){
|
|
@@ -96,9 +109,19 @@ let EChart = class EChart extends React.Component {
|
|
|
96
109
|
if (props.events[eventName]) acc[eventName] = this.allEvents[eventName];
|
|
97
110
|
return acc;
|
|
98
111
|
}, {});
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
112
|
+
// The theme handed to echarts-for-react is fixed for the life of the block.
|
|
113
|
+
// It deep-compares that prop and disposes + re-inits the chart whenever it
|
|
114
|
+
// changes; swapping the theme on the live instance instead (see syncTheme)
|
|
115
|
+
// repaints without the teardown, so the chart re-inks with no visible flash.
|
|
116
|
+
this.initialTheme = props.properties.theme;
|
|
117
|
+
this.appliedTheme = JSON.stringify(props.properties.theme);
|
|
118
|
+
this.chart = undefined;
|
|
119
|
+
this.onChartReady = (chart)=>{
|
|
120
|
+
this.chart = chart;
|
|
121
|
+
// The instance is created asynchronously, so the theme may already have
|
|
122
|
+
// changed by the time it exists.
|
|
123
|
+
this.syncTheme();
|
|
124
|
+
};
|
|
102
125
|
}
|
|
103
126
|
};
|
|
104
127
|
export default withBlockDefaults(EChart);
|
|
@@ -0,0 +1,395 @@
|
|
|
1
|
+
# Copyright 2020-2026 Lowdefy, Inc
|
|
2
|
+
|
|
3
|
+
# Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
# you may not use this file except in compliance with the License.
|
|
5
|
+
# You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
# http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
# Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
# distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
# See the License for the specific language governing permissions and
|
|
13
|
+
# limitations under the License.
|
|
14
|
+
|
|
15
|
+
- title: Bar Chart
|
|
16
|
+
fullWidth: true
|
|
17
|
+
blocks:
|
|
18
|
+
- id: bar_chart
|
|
19
|
+
type: EChart
|
|
20
|
+
properties:
|
|
21
|
+
height: 350
|
|
22
|
+
option:
|
|
23
|
+
tooltip:
|
|
24
|
+
trigger: axis
|
|
25
|
+
legend:
|
|
26
|
+
data:
|
|
27
|
+
- Revenue
|
|
28
|
+
- Expenses
|
|
29
|
+
xAxis:
|
|
30
|
+
type: category
|
|
31
|
+
data:
|
|
32
|
+
- Jan
|
|
33
|
+
- Feb
|
|
34
|
+
- Mar
|
|
35
|
+
- Apr
|
|
36
|
+
- May
|
|
37
|
+
- Jun
|
|
38
|
+
yAxis:
|
|
39
|
+
type: value
|
|
40
|
+
axisLabel:
|
|
41
|
+
formatter: '${value}'
|
|
42
|
+
series:
|
|
43
|
+
- name: Revenue
|
|
44
|
+
type: bar
|
|
45
|
+
data:
|
|
46
|
+
- 4200
|
|
47
|
+
- 3800
|
|
48
|
+
- 5100
|
|
49
|
+
- 4600
|
|
50
|
+
- 5800
|
|
51
|
+
- 6200
|
|
52
|
+
itemStyle:
|
|
53
|
+
color: '#5470c6'
|
|
54
|
+
- name: Expenses
|
|
55
|
+
type: bar
|
|
56
|
+
data:
|
|
57
|
+
- 3100
|
|
58
|
+
- 2900
|
|
59
|
+
- 3400
|
|
60
|
+
- 3200
|
|
61
|
+
- 3600
|
|
62
|
+
- 3800
|
|
63
|
+
itemStyle:
|
|
64
|
+
color: '#91cc75'
|
|
65
|
+
|
|
66
|
+
- title: Line Chart
|
|
67
|
+
fullWidth: true
|
|
68
|
+
blocks:
|
|
69
|
+
- id: line_chart
|
|
70
|
+
type: EChart
|
|
71
|
+
properties:
|
|
72
|
+
height: 350
|
|
73
|
+
option:
|
|
74
|
+
tooltip:
|
|
75
|
+
trigger: axis
|
|
76
|
+
legend:
|
|
77
|
+
data:
|
|
78
|
+
- Organic
|
|
79
|
+
- Paid
|
|
80
|
+
- Referral
|
|
81
|
+
xAxis:
|
|
82
|
+
type: category
|
|
83
|
+
data:
|
|
84
|
+
- Jan
|
|
85
|
+
- Feb
|
|
86
|
+
- Mar
|
|
87
|
+
- Apr
|
|
88
|
+
- May
|
|
89
|
+
- Jun
|
|
90
|
+
- Jul
|
|
91
|
+
- Aug
|
|
92
|
+
yAxis:
|
|
93
|
+
type: value
|
|
94
|
+
series:
|
|
95
|
+
- name: Organic
|
|
96
|
+
type: line
|
|
97
|
+
smooth: true
|
|
98
|
+
data:
|
|
99
|
+
- 820
|
|
100
|
+
- 932
|
|
101
|
+
- 1100
|
|
102
|
+
- 1234
|
|
103
|
+
- 1390
|
|
104
|
+
- 1530
|
|
105
|
+
- 1620
|
|
106
|
+
- 1780
|
|
107
|
+
- name: Paid
|
|
108
|
+
type: line
|
|
109
|
+
smooth: true
|
|
110
|
+
data:
|
|
111
|
+
- 420
|
|
112
|
+
- 510
|
|
113
|
+
- 635
|
|
114
|
+
- 720
|
|
115
|
+
- 845
|
|
116
|
+
- 910
|
|
117
|
+
- 980
|
|
118
|
+
- 1050
|
|
119
|
+
- name: Referral
|
|
120
|
+
type: line
|
|
121
|
+
smooth: true
|
|
122
|
+
data:
|
|
123
|
+
- 220
|
|
124
|
+
- 280
|
|
125
|
+
- 310
|
|
126
|
+
- 350
|
|
127
|
+
- 410
|
|
128
|
+
- 480
|
|
129
|
+
- 530
|
|
130
|
+
- 590
|
|
131
|
+
|
|
132
|
+
- title: Pie Chart
|
|
133
|
+
fullWidth: true
|
|
134
|
+
blocks:
|
|
135
|
+
- id: pie_chart
|
|
136
|
+
type: EChart
|
|
137
|
+
properties:
|
|
138
|
+
height: 350
|
|
139
|
+
option:
|
|
140
|
+
tooltip:
|
|
141
|
+
trigger: item
|
|
142
|
+
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
143
|
+
legend:
|
|
144
|
+
orient: vertical
|
|
145
|
+
left: left
|
|
146
|
+
data:
|
|
147
|
+
- Direct
|
|
148
|
+
- Search Engine
|
|
149
|
+
- Email
|
|
150
|
+
- Social Media
|
|
151
|
+
- Affiliates
|
|
152
|
+
- Other
|
|
153
|
+
series:
|
|
154
|
+
- name: Traffic Source
|
|
155
|
+
type: pie
|
|
156
|
+
radius:
|
|
157
|
+
- '40%'
|
|
158
|
+
- '70%'
|
|
159
|
+
avoidLabelOverlap: true
|
|
160
|
+
itemStyle:
|
|
161
|
+
borderRadius: 6
|
|
162
|
+
borderColor: '#fff'
|
|
163
|
+
borderWidth: 2
|
|
164
|
+
label:
|
|
165
|
+
show: true
|
|
166
|
+
formatter: '{b}: {d}%'
|
|
167
|
+
data:
|
|
168
|
+
- name: Direct
|
|
169
|
+
value: 3350
|
|
170
|
+
- name: Search Engine
|
|
171
|
+
value: 5100
|
|
172
|
+
- name: Email
|
|
173
|
+
value: 1548
|
|
174
|
+
- name: Social Media
|
|
175
|
+
value: 2430
|
|
176
|
+
- name: Affiliates
|
|
177
|
+
value: 980
|
|
178
|
+
- name: Other
|
|
179
|
+
value: 620
|
|
180
|
+
|
|
181
|
+
- title: Area Chart
|
|
182
|
+
fullWidth: true
|
|
183
|
+
blocks:
|
|
184
|
+
- id: area_chart
|
|
185
|
+
type: EChart
|
|
186
|
+
properties:
|
|
187
|
+
height: 350
|
|
188
|
+
option:
|
|
189
|
+
tooltip:
|
|
190
|
+
trigger: axis
|
|
191
|
+
legend:
|
|
192
|
+
data:
|
|
193
|
+
- Downloads
|
|
194
|
+
- Active Users
|
|
195
|
+
xAxis:
|
|
196
|
+
type: category
|
|
197
|
+
boundaryGap: false
|
|
198
|
+
data:
|
|
199
|
+
- Mon
|
|
200
|
+
- Tue
|
|
201
|
+
- Wed
|
|
202
|
+
- Thu
|
|
203
|
+
- Fri
|
|
204
|
+
- Sat
|
|
205
|
+
- Sun
|
|
206
|
+
yAxis:
|
|
207
|
+
type: value
|
|
208
|
+
series:
|
|
209
|
+
- name: Downloads
|
|
210
|
+
type: line
|
|
211
|
+
smooth: true
|
|
212
|
+
areaStyle:
|
|
213
|
+
opacity: 0.3
|
|
214
|
+
data:
|
|
215
|
+
- 1200
|
|
216
|
+
- 1400
|
|
217
|
+
- 1350
|
|
218
|
+
- 1680
|
|
219
|
+
- 1920
|
|
220
|
+
- 980
|
|
221
|
+
- 870
|
|
222
|
+
- name: Active Users
|
|
223
|
+
type: line
|
|
224
|
+
smooth: true
|
|
225
|
+
areaStyle:
|
|
226
|
+
opacity: 0.3
|
|
227
|
+
data:
|
|
228
|
+
- 450
|
|
229
|
+
- 520
|
|
230
|
+
- 490
|
|
231
|
+
- 610
|
|
232
|
+
- 720
|
|
233
|
+
- 380
|
|
234
|
+
- 340
|
|
235
|
+
|
|
236
|
+
- title: Scatter Plot
|
|
237
|
+
fullWidth: true
|
|
238
|
+
blocks:
|
|
239
|
+
- id: scatter_plot
|
|
240
|
+
type: EChart
|
|
241
|
+
properties:
|
|
242
|
+
height: 350
|
|
243
|
+
option:
|
|
244
|
+
tooltip:
|
|
245
|
+
trigger: item
|
|
246
|
+
xAxis:
|
|
247
|
+
name: Price ($)
|
|
248
|
+
nameLocation: middle
|
|
249
|
+
nameGap: 30
|
|
250
|
+
yAxis:
|
|
251
|
+
name: Rating
|
|
252
|
+
nameLocation: middle
|
|
253
|
+
nameGap: 40
|
|
254
|
+
series:
|
|
255
|
+
- name: Electronics
|
|
256
|
+
type: scatter
|
|
257
|
+
symbolSize: 14
|
|
258
|
+
data:
|
|
259
|
+
- [29, 4.2]
|
|
260
|
+
- [49, 4.5]
|
|
261
|
+
- [79, 4.0]
|
|
262
|
+
- [99, 4.8]
|
|
263
|
+
- [149, 3.9]
|
|
264
|
+
- [199, 4.6]
|
|
265
|
+
- [249, 4.3]
|
|
266
|
+
- name: Furniture
|
|
267
|
+
type: scatter
|
|
268
|
+
symbolSize: 14
|
|
269
|
+
data:
|
|
270
|
+
- [89, 3.8]
|
|
271
|
+
- [159, 4.1]
|
|
272
|
+
- [289, 4.7]
|
|
273
|
+
- [399, 4.4]
|
|
274
|
+
- [449, 4.9]
|
|
275
|
+
- [599, 4.2]
|
|
276
|
+
- name: Accessories
|
|
277
|
+
type: scatter
|
|
278
|
+
symbolSize: 14
|
|
279
|
+
data:
|
|
280
|
+
- [9, 3.5]
|
|
281
|
+
- [15, 4.0]
|
|
282
|
+
- [24, 4.3]
|
|
283
|
+
- [39, 3.9]
|
|
284
|
+
- [19, 4.6]
|
|
285
|
+
- [34, 4.1]
|
|
286
|
+
|
|
287
|
+
- title: Mixed Chart
|
|
288
|
+
fullWidth: true
|
|
289
|
+
blocks:
|
|
290
|
+
- id: mixed_chart
|
|
291
|
+
type: EChart
|
|
292
|
+
properties:
|
|
293
|
+
height: 350
|
|
294
|
+
option:
|
|
295
|
+
tooltip:
|
|
296
|
+
trigger: axis
|
|
297
|
+
axisPointer:
|
|
298
|
+
type: cross
|
|
299
|
+
legend:
|
|
300
|
+
data:
|
|
301
|
+
- Sales Volume
|
|
302
|
+
- Avg Price
|
|
303
|
+
xAxis:
|
|
304
|
+
type: category
|
|
305
|
+
data:
|
|
306
|
+
- Laptops
|
|
307
|
+
- Phones
|
|
308
|
+
- Tablets
|
|
309
|
+
- Watches
|
|
310
|
+
- Headphones
|
|
311
|
+
- Cameras
|
|
312
|
+
yAxis:
|
|
313
|
+
- type: value
|
|
314
|
+
name: Units Sold
|
|
315
|
+
position: left
|
|
316
|
+
- type: value
|
|
317
|
+
name: Avg Price ($)
|
|
318
|
+
position: right
|
|
319
|
+
series:
|
|
320
|
+
- name: Sales Volume
|
|
321
|
+
type: bar
|
|
322
|
+
data:
|
|
323
|
+
- 1240
|
|
324
|
+
- 3560
|
|
325
|
+
- 890
|
|
326
|
+
- 2100
|
|
327
|
+
- 4300
|
|
328
|
+
- 560
|
|
329
|
+
itemStyle:
|
|
330
|
+
color: '#5470c6'
|
|
331
|
+
- name: Avg Price
|
|
332
|
+
type: line
|
|
333
|
+
yAxisIndex: 1
|
|
334
|
+
smooth: true
|
|
335
|
+
data:
|
|
336
|
+
- 899
|
|
337
|
+
- 699
|
|
338
|
+
- 449
|
|
339
|
+
- 299
|
|
340
|
+
- 149
|
|
341
|
+
- 549
|
|
342
|
+
lineStyle:
|
|
343
|
+
width: 3
|
|
344
|
+
itemStyle:
|
|
345
|
+
color: '#ee6666'
|
|
346
|
+
|
|
347
|
+
- title: Dashboard Gauge
|
|
348
|
+
fullWidth: true
|
|
349
|
+
blocks:
|
|
350
|
+
- id: gauge_chart
|
|
351
|
+
type: EChart
|
|
352
|
+
properties:
|
|
353
|
+
height: 350
|
|
354
|
+
option:
|
|
355
|
+
series:
|
|
356
|
+
- type: gauge
|
|
357
|
+
startAngle: 200
|
|
358
|
+
endAngle: -20
|
|
359
|
+
min: 0
|
|
360
|
+
max: 100
|
|
361
|
+
splitNumber: 10
|
|
362
|
+
progress:
|
|
363
|
+
show: true
|
|
364
|
+
width: 20
|
|
365
|
+
pointer:
|
|
366
|
+
show: true
|
|
367
|
+
axisLine:
|
|
368
|
+
lineStyle:
|
|
369
|
+
width: 20
|
|
370
|
+
axisTick:
|
|
371
|
+
show: false
|
|
372
|
+
splitLine:
|
|
373
|
+
length: 10
|
|
374
|
+
lineStyle:
|
|
375
|
+
width: 2
|
|
376
|
+
color: '#999'
|
|
377
|
+
axisLabel:
|
|
378
|
+
distance: 25
|
|
379
|
+
fontSize: 12
|
|
380
|
+
color: '#999'
|
|
381
|
+
title:
|
|
382
|
+
offsetCenter:
|
|
383
|
+
- 0
|
|
384
|
+
- '70%'
|
|
385
|
+
fontSize: 16
|
|
386
|
+
detail:
|
|
387
|
+
valueAnimation: true
|
|
388
|
+
fontSize: 32
|
|
389
|
+
offsetCenter:
|
|
390
|
+
- 0
|
|
391
|
+
- '40%'
|
|
392
|
+
formatter: '{value}%'
|
|
393
|
+
data:
|
|
394
|
+
- value: 73
|
|
395
|
+
name: Performance
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
# Copyright 2020-2026 Lowdefy, Inc
|
|
2
|
+
|
|
3
|
+
# Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
# you may not use this file except in compliance with the License.
|
|
5
|
+
# You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
# http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
# Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
# distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
# See the License for the specific language governing permissions and
|
|
13
|
+
# limitations under the License.
|
|
14
|
+
|
|
15
|
+
id: echart
|
|
16
|
+
type: Box
|
|
17
|
+
|
|
18
|
+
blocks:
|
|
19
|
+
# ============================================
|
|
20
|
+
# BASIC RENDERING
|
|
21
|
+
# ============================================
|
|
22
|
+
|
|
23
|
+
- id: echart_basic
|
|
24
|
+
type: EChart
|
|
25
|
+
properties:
|
|
26
|
+
option:
|
|
27
|
+
xAxis:
|
|
28
|
+
type: category
|
|
29
|
+
data:
|
|
30
|
+
- Mon
|
|
31
|
+
- Tue
|
|
32
|
+
- Wed
|
|
33
|
+
- Thu
|
|
34
|
+
- Fri
|
|
35
|
+
yAxis:
|
|
36
|
+
type: value
|
|
37
|
+
series:
|
|
38
|
+
- data:
|
|
39
|
+
- 120
|
|
40
|
+
- 200
|
|
41
|
+
- 150
|
|
42
|
+
- 80
|
|
43
|
+
- 70
|
|
44
|
+
type: bar
|
|
45
|
+
|
|
46
|
+
# ============================================
|
|
47
|
+
# PROPERTY TESTS
|
|
48
|
+
# ============================================
|
|
49
|
+
|
|
50
|
+
- id: echart_height
|
|
51
|
+
type: EChart
|
|
52
|
+
properties:
|
|
53
|
+
height: 200
|
|
54
|
+
option:
|
|
55
|
+
xAxis:
|
|
56
|
+
type: category
|
|
57
|
+
data:
|
|
58
|
+
- A
|
|
59
|
+
- B
|
|
60
|
+
yAxis:
|
|
61
|
+
type: value
|
|
62
|
+
series:
|
|
63
|
+
- data:
|
|
64
|
+
- 10
|
|
65
|
+
- 20
|
|
66
|
+
type: bar
|
|
67
|
+
|
|
68
|
+
- id: echart_width
|
|
69
|
+
type: EChart
|
|
70
|
+
properties:
|
|
71
|
+
width: 400
|
|
72
|
+
option:
|
|
73
|
+
xAxis:
|
|
74
|
+
type: category
|
|
75
|
+
data:
|
|
76
|
+
- A
|
|
77
|
+
- B
|
|
78
|
+
yAxis:
|
|
79
|
+
type: value
|
|
80
|
+
series:
|
|
81
|
+
- data:
|
|
82
|
+
- 10
|
|
83
|
+
- 20
|
|
84
|
+
type: bar
|
|
85
|
+
|
|
86
|
+
- id: echart_svg_renderer
|
|
87
|
+
type: EChart
|
|
88
|
+
properties:
|
|
89
|
+
init:
|
|
90
|
+
renderer: svg
|
|
91
|
+
option:
|
|
92
|
+
xAxis:
|
|
93
|
+
type: category
|
|
94
|
+
data:
|
|
95
|
+
- A
|
|
96
|
+
- B
|
|
97
|
+
yAxis:
|
|
98
|
+
type: value
|
|
99
|
+
series:
|
|
100
|
+
- data:
|
|
101
|
+
- 10
|
|
102
|
+
- 20
|
|
103
|
+
type: line
|
|
104
|
+
|
|
105
|
+
- id: echart_pie
|
|
106
|
+
type: EChart
|
|
107
|
+
properties:
|
|
108
|
+
option:
|
|
109
|
+
series:
|
|
110
|
+
- type: pie
|
|
111
|
+
data:
|
|
112
|
+
- value: 335
|
|
113
|
+
name: Direct
|
|
114
|
+
- value: 310
|
|
115
|
+
name: Email
|
|
116
|
+
- value: 234
|
|
117
|
+
name: Search
|
|
118
|
+
|
|
119
|
+
- id: echart_with_title
|
|
120
|
+
type: EChart
|
|
121
|
+
properties:
|
|
122
|
+
option:
|
|
123
|
+
title:
|
|
124
|
+
text: Sales Chart
|
|
125
|
+
xAxis:
|
|
126
|
+
type: category
|
|
127
|
+
data:
|
|
128
|
+
- Q1
|
|
129
|
+
- Q2
|
|
130
|
+
yAxis:
|
|
131
|
+
type: value
|
|
132
|
+
series:
|
|
133
|
+
- data:
|
|
134
|
+
- 100
|
|
135
|
+
- 200
|
|
136
|
+
type: bar
|
|
137
|
+
|
|
138
|
+
- id: echart_empty_dataset
|
|
139
|
+
type: EChart
|
|
140
|
+
properties:
|
|
141
|
+
option:
|
|
142
|
+
dataset:
|
|
143
|
+
source: null
|
|
144
|
+
xAxis:
|
|
145
|
+
type: category
|
|
146
|
+
yAxis:
|
|
147
|
+
type: value
|
|
148
|
+
series:
|
|
149
|
+
- type: bar
|
|
150
|
+
|
|
151
|
+
# ============================================
|
|
152
|
+
# EVENT TESTS
|
|
153
|
+
# ============================================
|
|
154
|
+
|
|
155
|
+
- id: echart_onclick
|
|
156
|
+
type: EChart
|
|
157
|
+
properties:
|
|
158
|
+
init:
|
|
159
|
+
renderer: svg
|
|
160
|
+
option:
|
|
161
|
+
xAxis:
|
|
162
|
+
type: category
|
|
163
|
+
data:
|
|
164
|
+
- Mon
|
|
165
|
+
- Tue
|
|
166
|
+
- Wed
|
|
167
|
+
yAxis:
|
|
168
|
+
type: value
|
|
169
|
+
series:
|
|
170
|
+
- data:
|
|
171
|
+
- 120
|
|
172
|
+
- 200
|
|
173
|
+
- 150
|
|
174
|
+
type: bar
|
|
175
|
+
events:
|
|
176
|
+
click:
|
|
177
|
+
- id: set_click
|
|
178
|
+
type: SetState
|
|
179
|
+
params:
|
|
180
|
+
echart_clicked: true
|
|
181
|
+
|
|
182
|
+
- id: echart_click_display
|
|
183
|
+
type: Span
|
|
184
|
+
properties:
|
|
185
|
+
content:
|
|
186
|
+
_if:
|
|
187
|
+
test:
|
|
188
|
+
_eq:
|
|
189
|
+
- _state: echart_clicked
|
|
190
|
+
- true
|
|
191
|
+
then: Chart clicked
|
|
192
|
+
else: ''
|
|
193
|
+
|
|
194
|
+
# ============================================
|
|
195
|
+
# THEME TESTS
|
|
196
|
+
# ============================================
|
|
197
|
+
|
|
198
|
+
# A theme that changes after the chart has mounted must reach ECharts. The SVG
|
|
199
|
+
# renderer writes resolved colours into the DOM, so the axis label fill can be
|
|
200
|
+
# read directly; clicking a bar swaps the theme through state.
|
|
201
|
+
- id: echart_theme_update
|
|
202
|
+
type: EChart
|
|
203
|
+
properties:
|
|
204
|
+
init:
|
|
205
|
+
renderer: svg
|
|
206
|
+
theme:
|
|
207
|
+
_if:
|
|
208
|
+
test:
|
|
209
|
+
_eq:
|
|
210
|
+
- _state: echart_theme_swapped
|
|
211
|
+
- true
|
|
212
|
+
then:
|
|
213
|
+
categoryAxis:
|
|
214
|
+
axisLabel:
|
|
215
|
+
color: '#ff0000'
|
|
216
|
+
else:
|
|
217
|
+
categoryAxis:
|
|
218
|
+
axisLabel:
|
|
219
|
+
color: '#0000ff'
|
|
220
|
+
option:
|
|
221
|
+
xAxis:
|
|
222
|
+
type: category
|
|
223
|
+
data:
|
|
224
|
+
- Mon
|
|
225
|
+
- Tue
|
|
226
|
+
- Wed
|
|
227
|
+
yAxis:
|
|
228
|
+
type: value
|
|
229
|
+
series:
|
|
230
|
+
- data:
|
|
231
|
+
- 120
|
|
232
|
+
- 200
|
|
233
|
+
- 150
|
|
234
|
+
type: bar
|
|
235
|
+
events:
|
|
236
|
+
click:
|
|
237
|
+
- id: swap_theme
|
|
238
|
+
type: SetState
|
|
239
|
+
params:
|
|
240
|
+
echart_theme_swapped: true
|
|
@@ -0,0 +1,319 @@
|
|
|
1
|
+
# Copyright 2020-2026 Lowdefy, Inc
|
|
2
|
+
|
|
3
|
+
# Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
# you may not use this file except in compliance with the License.
|
|
5
|
+
# You may obtain a copy of the License at
|
|
6
|
+
|
|
7
|
+
# http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
|
|
9
|
+
# Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
# distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
# See the License for the specific language governing permissions and
|
|
13
|
+
# limitations under the License.
|
|
14
|
+
|
|
15
|
+
- id: line
|
|
16
|
+
type: EChart
|
|
17
|
+
properties:
|
|
18
|
+
option:
|
|
19
|
+
{
|
|
20
|
+
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
|
|
21
|
+
yAxis: { type: 'value' },
|
|
22
|
+
series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }],
|
|
23
|
+
}
|
|
24
|
+
- id: pie
|
|
25
|
+
type: EChart
|
|
26
|
+
properties:
|
|
27
|
+
init:
|
|
28
|
+
height: '600'
|
|
29
|
+
option:
|
|
30
|
+
{
|
|
31
|
+
legend: { top: 'bottom' },
|
|
32
|
+
toolbox:
|
|
33
|
+
{
|
|
34
|
+
show: true,
|
|
35
|
+
feature:
|
|
36
|
+
{
|
|
37
|
+
mark: { show: true },
|
|
38
|
+
dataView: { show: true, readOnly: false },
|
|
39
|
+
restore: { show: true },
|
|
40
|
+
saveAsImage: { show: true },
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
series:
|
|
44
|
+
[
|
|
45
|
+
{
|
|
46
|
+
name: 'Data Pie',
|
|
47
|
+
type: 'pie',
|
|
48
|
+
radius: [50, 250],
|
|
49
|
+
center: ['50%', '50%'],
|
|
50
|
+
roseType: 'area',
|
|
51
|
+
itemStyle: { borderRadius: 8 },
|
|
52
|
+
data:
|
|
53
|
+
[
|
|
54
|
+
{ value: 40, name: 'rose 1' },
|
|
55
|
+
{ value: 38, name: 'rose 2' },
|
|
56
|
+
{ value: 32, name: 'rose 3' },
|
|
57
|
+
{ value: 30, name: 'rose 4' },
|
|
58
|
+
{ value: 28, name: 'rose 5' },
|
|
59
|
+
{ value: 26, name: 'rose 6' },
|
|
60
|
+
{ value: 22, name: 'rose 7' },
|
|
61
|
+
{ value: 18, name: 'rose 8' },
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}
|
|
66
|
+
- id: area with custom theme
|
|
67
|
+
type: EChart
|
|
68
|
+
properties:
|
|
69
|
+
theme:
|
|
70
|
+
{
|
|
71
|
+
'color':
|
|
72
|
+
[
|
|
73
|
+
'#dd6b66',
|
|
74
|
+
'#759aa0',
|
|
75
|
+
'#e69d87',
|
|
76
|
+
'#8dc1a9',
|
|
77
|
+
'#ea7e53',
|
|
78
|
+
'#eedd78',
|
|
79
|
+
'#73a373',
|
|
80
|
+
'#73b9bc',
|
|
81
|
+
'#7289ab',
|
|
82
|
+
'#91ca8c',
|
|
83
|
+
'#f49f42',
|
|
84
|
+
],
|
|
85
|
+
'backgroundColor': 'rgba(51,51,51,1)',
|
|
86
|
+
'textStyle': {},
|
|
87
|
+
'title': { 'textStyle': { 'color': '#eeeeee' }, 'subtextStyle': { 'color': '#aaaaaa' } },
|
|
88
|
+
'line':
|
|
89
|
+
{
|
|
90
|
+
'itemStyle': { 'borderWidth': 1 },
|
|
91
|
+
'lineStyle': { 'width': 2 },
|
|
92
|
+
'symbolSize': 4,
|
|
93
|
+
'symbol': 'circle',
|
|
94
|
+
'smooth': false,
|
|
95
|
+
},
|
|
96
|
+
'radar':
|
|
97
|
+
{
|
|
98
|
+
'itemStyle': { 'borderWidth': 1 },
|
|
99
|
+
'lineStyle': { 'width': 2 },
|
|
100
|
+
'symbolSize': 4,
|
|
101
|
+
'symbol': 'circle',
|
|
102
|
+
'smooth': false,
|
|
103
|
+
},
|
|
104
|
+
'bar': { 'itemStyle': { 'barBorderWidth': 0, 'barBorderColor': '#ccc' } },
|
|
105
|
+
'pie': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
|
|
106
|
+
'scatter': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
|
|
107
|
+
'boxplot': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
|
|
108
|
+
'parallel': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
|
|
109
|
+
'sankey': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
|
|
110
|
+
'funnel': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
|
|
111
|
+
'gauge': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
|
|
112
|
+
'candlestick':
|
|
113
|
+
{
|
|
114
|
+
'itemStyle':
|
|
115
|
+
{
|
|
116
|
+
'color': '#fd1050',
|
|
117
|
+
'color0': '#0cf49b',
|
|
118
|
+
'borderColor': '#fd1050',
|
|
119
|
+
'borderColor0': '#0cf49b',
|
|
120
|
+
'borderWidth': 1,
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
'graph':
|
|
124
|
+
{
|
|
125
|
+
'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' },
|
|
126
|
+
'lineStyle': { 'width': 1, 'color': '#aaa' },
|
|
127
|
+
'symbolSize': 4,
|
|
128
|
+
'symbol': 'circle',
|
|
129
|
+
'smooth': false,
|
|
130
|
+
'color':
|
|
131
|
+
[
|
|
132
|
+
'#dd6b66',
|
|
133
|
+
'#759aa0',
|
|
134
|
+
'#e69d87',
|
|
135
|
+
'#8dc1a9',
|
|
136
|
+
'#ea7e53',
|
|
137
|
+
'#eedd78',
|
|
138
|
+
'#73a373',
|
|
139
|
+
'#73b9bc',
|
|
140
|
+
'#7289ab',
|
|
141
|
+
'#91ca8c',
|
|
142
|
+
'#f49f42',
|
|
143
|
+
],
|
|
144
|
+
'label': { 'color': '#eee' },
|
|
145
|
+
},
|
|
146
|
+
'map':
|
|
147
|
+
{
|
|
148
|
+
'itemStyle':
|
|
149
|
+
{
|
|
150
|
+
'normal': { 'areaColor': '#eee', 'borderColor': '#444', 'borderWidth': 0.5 },
|
|
151
|
+
'emphasis':
|
|
152
|
+
{ 'areaColor': 'rgba(255,215,0,0.8)', 'borderColor': '#444', 'borderWidth': 1 },
|
|
153
|
+
},
|
|
154
|
+
'label':
|
|
155
|
+
{
|
|
156
|
+
'normal': { 'textStyle': { 'color': '#000' } },
|
|
157
|
+
'emphasis': { 'textStyle': { 'color': 'rgb(100,0,0)' } },
|
|
158
|
+
},
|
|
159
|
+
},
|
|
160
|
+
'geo':
|
|
161
|
+
{
|
|
162
|
+
'itemStyle':
|
|
163
|
+
{
|
|
164
|
+
'normal': { 'areaColor': '#eee', 'borderColor': '#444', 'borderWidth': 0.5 },
|
|
165
|
+
'emphasis':
|
|
166
|
+
{ 'areaColor': 'rgba(255,215,0,0.8)', 'borderColor': '#444', 'borderWidth': 1 },
|
|
167
|
+
},
|
|
168
|
+
'label':
|
|
169
|
+
{
|
|
170
|
+
'normal': { 'textStyle': { 'color': '#000' } },
|
|
171
|
+
'emphasis': { 'textStyle': { 'color': 'rgb(100,0,0)' } },
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
'categoryAxis':
|
|
175
|
+
{
|
|
176
|
+
'axisLine': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
|
|
177
|
+
'axisTick': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
|
|
178
|
+
'axisLabel': { 'show': true, 'textStyle': { 'color': '#eeeeee' } },
|
|
179
|
+
'splitLine': { 'show': true, 'lineStyle': { 'color': ['#aaaaaa'] } },
|
|
180
|
+
'splitArea': { 'show': false, 'areaStyle': { 'color': ['#eeeeee'] } },
|
|
181
|
+
},
|
|
182
|
+
'valueAxis':
|
|
183
|
+
{
|
|
184
|
+
'axisLine': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
|
|
185
|
+
'axisTick': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
|
|
186
|
+
'axisLabel': { 'show': true, 'textStyle': { 'color': '#eeeeee' } },
|
|
187
|
+
'splitLine': { 'show': true, 'lineStyle': { 'color': ['#aaaaaa'] } },
|
|
188
|
+
'splitArea': { 'show': false, 'areaStyle': { 'color': ['#eeeeee'] } },
|
|
189
|
+
},
|
|
190
|
+
'logAxis':
|
|
191
|
+
{
|
|
192
|
+
'axisLine': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
|
|
193
|
+
'axisTick': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
|
|
194
|
+
'axisLabel': { 'show': true, 'textStyle': { 'color': '#eeeeee' } },
|
|
195
|
+
'splitLine': { 'show': true, 'lineStyle': { 'color': ['#aaaaaa'] } },
|
|
196
|
+
'splitArea': { 'show': false, 'areaStyle': { 'color': ['#eeeeee'] } },
|
|
197
|
+
},
|
|
198
|
+
'timeAxis':
|
|
199
|
+
{
|
|
200
|
+
'axisLine': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
|
|
201
|
+
'axisTick': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
|
|
202
|
+
'axisLabel': { 'show': true, 'textStyle': { 'color': '#eeeeee' } },
|
|
203
|
+
'splitLine': { 'show': true, 'lineStyle': { 'color': ['#aaaaaa'] } },
|
|
204
|
+
'splitArea': { 'show': false, 'areaStyle': { 'color': ['#eeeeee'] } },
|
|
205
|
+
},
|
|
206
|
+
'toolbox':
|
|
207
|
+
{
|
|
208
|
+
'iconStyle':
|
|
209
|
+
{ 'normal': { 'borderColor': '#999' }, 'emphasis': { 'borderColor': '#666' } },
|
|
210
|
+
},
|
|
211
|
+
'legend': { 'textStyle': { 'color': '#eeeeee' } },
|
|
212
|
+
'tooltip':
|
|
213
|
+
{
|
|
214
|
+
'axisPointer':
|
|
215
|
+
{
|
|
216
|
+
'lineStyle': { 'color': '#eeeeee', 'width': '1' },
|
|
217
|
+
'crossStyle': { 'color': '#eeeeee', 'width': '1' },
|
|
218
|
+
},
|
|
219
|
+
},
|
|
220
|
+
'timeline':
|
|
221
|
+
{
|
|
222
|
+
'lineStyle': { 'color': '#eeeeee', 'width': 1 },
|
|
223
|
+
'itemStyle':
|
|
224
|
+
{
|
|
225
|
+
'normal': { 'color': '#dd6b66', 'borderWidth': 1 },
|
|
226
|
+
'emphasis': { 'color': '#a9334c' },
|
|
227
|
+
},
|
|
228
|
+
'controlStyle':
|
|
229
|
+
{
|
|
230
|
+
'normal': { 'color': '#eeeeee', 'borderColor': '#eeeeee', 'borderWidth': 0.5 },
|
|
231
|
+
'emphasis': { 'color': '#eeeeee', 'borderColor': '#eeeeee', 'borderWidth': 0.5 },
|
|
232
|
+
},
|
|
233
|
+
'checkpointStyle': { 'color': '#e43c59', 'borderColor': '#c23531' },
|
|
234
|
+
'label':
|
|
235
|
+
{
|
|
236
|
+
'normal': { 'textStyle': { 'color': '#eeeeee' } },
|
|
237
|
+
'emphasis': { 'textStyle': { 'color': '#eeeeee' } },
|
|
238
|
+
},
|
|
239
|
+
},
|
|
240
|
+
'visualMap': { 'color': ['#bf444c', '#d88273', '#f6efa6'] },
|
|
241
|
+
'dataZoom':
|
|
242
|
+
{
|
|
243
|
+
'backgroundColor': 'rgba(47,69,84,0)',
|
|
244
|
+
'dataBackgroundColor': 'rgba(255,255,255,0.3)',
|
|
245
|
+
'fillerColor': 'rgba(167,183,204,0.4)',
|
|
246
|
+
'handleColor': '#a7b7cc',
|
|
247
|
+
'handleSize': '100%',
|
|
248
|
+
'textStyle': { 'color': '#eeeeee' },
|
|
249
|
+
},
|
|
250
|
+
'markPoint': { 'label': { 'color': '#eee' }, 'emphasis': { 'label': { 'color': '#eee' } } },
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
init:
|
|
254
|
+
height: 600
|
|
255
|
+
option:
|
|
256
|
+
{
|
|
257
|
+
title: { text: '堆叠区域图' },
|
|
258
|
+
tooltip:
|
|
259
|
+
{
|
|
260
|
+
trigger: 'axis',
|
|
261
|
+
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
|
|
262
|
+
},
|
|
263
|
+
legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] },
|
|
264
|
+
toolbox: { feature: { saveAsImage: {} } },
|
|
265
|
+
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
266
|
+
xAxis:
|
|
267
|
+
[
|
|
268
|
+
{
|
|
269
|
+
type: 'category',
|
|
270
|
+
boundaryGap: false,
|
|
271
|
+
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
272
|
+
},
|
|
273
|
+
],
|
|
274
|
+
yAxis: [{ type: 'value' }],
|
|
275
|
+
series:
|
|
276
|
+
[
|
|
277
|
+
{
|
|
278
|
+
name: '邮件营销',
|
|
279
|
+
type: 'line',
|
|
280
|
+
stack: '总量',
|
|
281
|
+
areaStyle: {},
|
|
282
|
+
emphasis: { focus: 'series' },
|
|
283
|
+
data: [120, 132, 101, 134, 90, 230, 210],
|
|
284
|
+
},
|
|
285
|
+
{
|
|
286
|
+
name: '联盟广告',
|
|
287
|
+
type: 'line',
|
|
288
|
+
stack: '总量',
|
|
289
|
+
areaStyle: {},
|
|
290
|
+
emphasis: { focus: 'series' },
|
|
291
|
+
data: [220, 182, 191, 234, 290, 330, 310],
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
name: '视频广告',
|
|
295
|
+
type: 'line',
|
|
296
|
+
stack: '总量',
|
|
297
|
+
areaStyle: {},
|
|
298
|
+
emphasis: { focus: 'series' },
|
|
299
|
+
data: [150, 232, 201, 154, 190, 330, 410],
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
name: '直接访问',
|
|
303
|
+
type: 'line',
|
|
304
|
+
stack: '总量',
|
|
305
|
+
areaStyle: {},
|
|
306
|
+
emphasis: { focus: 'series' },
|
|
307
|
+
data: [320, 332, 301, 334, 390, 330, 320],
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
name: '搜索引擎',
|
|
311
|
+
type: 'line',
|
|
312
|
+
stack: '总量',
|
|
313
|
+
label: { show: true, position: 'top' },
|
|
314
|
+
areaStyle: {},
|
|
315
|
+
emphasis: { focus: 'series' },
|
|
316
|
+
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
317
|
+
},
|
|
318
|
+
],
|
|
319
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lowdefy/blocks-echarts",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "ECharts Blocks for Lowdefy.",
|
|
6
6
|
"homepage": "https://lowdefy.com",
|
|
@@ -44,20 +44,20 @@
|
|
|
44
44
|
"dist/*"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@lowdefy/block-utils": "
|
|
47
|
+
"@lowdefy/block-utils": "6.0.0",
|
|
48
48
|
"echarts": "6.0.0",
|
|
49
|
-
"echarts-for-react": "3.0.
|
|
49
|
+
"echarts-for-react": "3.0.6"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": ">=18",
|
|
53
53
|
"react-dom": ">=18"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@lowdefy/block-dev-e2e": "
|
|
57
|
-
"@lowdefy/e2e-utils": "
|
|
58
|
-
"@playwright/test": "1.
|
|
59
|
-
"@swc/cli": "0.8.
|
|
60
|
-
"@swc/core": "1.15.
|
|
56
|
+
"@lowdefy/block-dev-e2e": "6.0.0",
|
|
57
|
+
"@lowdefy/e2e-utils": "6.0.0",
|
|
58
|
+
"@playwright/test": "1.59.1",
|
|
59
|
+
"@swc/cli": "0.8.1",
|
|
60
|
+
"@swc/core": "1.15.32",
|
|
61
61
|
"copyfiles": "2.4.1"
|
|
62
62
|
},
|
|
63
63
|
"publishConfig": {
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"scripts": {
|
|
67
67
|
"build": "swc src --out-dir dist --config-file ../../../../.swcrc --cli-config-file ../../../../.swc-cli.json && pnpm copyfiles",
|
|
68
68
|
"clean": "rm -rf dist",
|
|
69
|
-
"copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.
|
|
69
|
+
"copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.snap\"",
|
|
70
70
|
"e2e": "playwright test --config e2e/playwright.config.js",
|
|
71
71
|
"e2e:ui": "playwright test --config e2e/playwright.config.js --ui"
|
|
72
72
|
}
|