RSLive renderer benchmark

DataChart: Chart.js против ECharts

Один ChartModel, одинаковые datasets и два renderer. Это технический стенд: данные ниже искусственные и нужны только для сравнения поведения библиотек.

Для чистого Network/Performance сравнения используйте изолированные страницы: Chart.js · ECharts · contract checks.

Контрольная страница без DataChart →

Показывать

Тема

Bundled runtime: Chart.js 4.5.1 / canvas · ECharts 6.1.0 / SVG.
Оба движка устанавливаются через npm и собираются Vite в отдельные lazy chunks; внешнего CDN нет.

Что проверять

Сравнить подписи, легенды, null, tooltip и плотность одного dataset в двух движках.
Переключать светлую/тёмную тему: готовые графики должны уничтожаться и создаваться заново без дублей.
На ширине около 360 px не должно быть горизонтального вылета карточки.
Раскрыть «Данные графика»: HTML-таблица должна оставаться доступной независимо от renderer.
На изолированных страницах проверить отдельные bundled chunks; контрольная страница не должна запрашивать ни Chart.js, ни ECharts, ни jsDelivr.
Прокрутить страницу: первый ряд загружается eager, остальные — только рядом с viewport.

Вариант 1

Line · human table + null

Три серии, одна пропущенная точка, подписи категорий и ручной табличный синтаксис.

Chart.js · canvas

Line · human table + null

Те же нормализованные данные, renderer Chart.js.

Загрузка Chart.js…

Данные графика

Месяц	Белград	Нови-Сад	Ниш
Янв	101	94	72
Фев	104	96	74
Мар	108	99	78
Апр	111	103	80
Май	115	107	83
Июн	118	110	—
Июл	122	114	88
Авг	120	116	91

Искусственный fixture

ECharts · SVG

Line · human table + null

Те же нормализованные данные, renderer ECharts.

Загрузка ECharts…

Данные графика

Месяц	Белград	Нови-Сад	Ниш
Янв	101	94	72
Фев	104	96	74
Мар	108	99	78
Апр	111	103	80
Май	115	107	83
Июн	118	110	—
Июл	122	114	88
Авг	120	116	91

Искусственный fixture

Вариант 2

Bar · 3 серии

Дискретные категории и три сравниваемых ряда.

Chart.js · canvas

Bar · 3 серии

Те же нормализованные данные, renderer Chart.js.

Загрузка Chart.js…

Данные графика

category	first	second	third
A	34	21	16
B	28	25	19
C	41	31	23
D	37	29	28
E	46	35	31
F	43	39	33

Искусственный fixture

ECharts · SVG

Bar · 3 серии

Те же нормализованные данные, renderer ECharts.

Загрузка ECharts…

Данные графика

category	first	second	third
A	34	21	16
B	28	25	19
C	41	31	23
D	37	29	28
E	46	35	31
F	43	39	33

Искусственный fixture

Вариант 3

Area · 18 периодов

Две серии на общей шкале; проверка заполнения области и длинного ряда.

Chart.js · canvas

Area · 18 периодов

Те же нормализованные данные, renderer Chart.js.

Загрузка Chart.js…

Данные графика

period	value	baseline
T1	42	35
T2	47	36
T3	51	37
T4	54	38
T5	56	40
T6	55	41
T7	54	42
T8	52	43
T9	51	44
T10	51	45
T11	53	47
T12	57	48
T13	62	49
T14	67	50
T15	72	51
T16	76	52
T17	78	53
T18	78	55

Искусственный fixture

ECharts · SVG

Area · 18 периодов

Те же нормализованные данные, renderer ECharts.

Загрузка ECharts…

Данные графика

period	value	baseline
T1	42	35
T2	47	36
T3	51	37
T4	54	38
T5	56	40
T6	55	41
T7	54	42
T8	52	43
T9	51	44
T10	51	45
T11	53	47
T12	57	48
T13	62	49
T14	67	50
T15	72	51
T16	76	52
T17	78	53
T18	78	55

Искусственный fixture

Вариант 4

Scatter · 120 точек

Числовая ось X и достаточно точек, чтобы сравнить SVG и canvas.

Chart.js · canvas

Scatter · 120 точек

Те же нормализованные данные, renderer Chart.js.

Загрузка Chart.js…

Данные графика

x	value
1	28
2	34
3	38,7
4	41,2
5	41
6	38,2
7	33,6
8	28,3
9	23,6
10	20,7
11	20,2
12	22,5
13	27
14	32,9
15	39
16	43,8
17	46,5
18	46,6
19	44
20	39,6
21	34,3
22	29,5
23	26,4
24	25,7
25	27,7
26	32,1
27	37,9
28	43,9
29	49
30	51,9
31	52,2
32	49,9
33	45,5
34	40,3
35	35,4
36	32
37	31,1
38	32,9
39	37,1
40	42,8
41	48,9
42	54,1
43	57,2
44	57,8
45	55,7
46	51,5
47	46,3
48	41,3
49	37,8
50	36,6
51	38,1
52	42,1
53	47,8
54	53,9
55	59,2
56	62,6
57	63,3
58	61,4
59	57,4
60	52,2
61	47,2
62	43,5
63	42,1
64	43,4
65	47,2
66	52,7
67	58,9
68	64,3
69	67,8
70	68,9
71	67,2
72	63,3
73	58,2
74	53,1
75	49,2
76	47,6
77	48,7
78	52,3
79	57,7
80	63,8
81	69,3
82	73,1
83	74,4
84	73
85	69,2
86	64,2
87	59
88	55
89	53,1
90	53,9
91	57,3
92	62,6
93	68,8
94	74,4
95	78,4
96	79,9
97	78,7
98	75,2
99	70,2
100	65
101	60,8
102	58,7
103	59,3
104	62,4
105	67,6
106	73,7
107	79,4
108	83,6
109	85,4
110	84,4
111	81
112	76,1
113	70,9
114	66,6
115	64,3
116	64,6
117	67,6
118	72,6
119	78,7
120	84,5

Искусственный fixture

ECharts · SVG

Scatter · 120 точек

Те же нормализованные данные, renderer ECharts.

Загрузка ECharts…

Данные графика

x	value
1	28
2	34
3	38,7
4	41,2
5	41
6	38,2
7	33,6
8	28,3
9	23,6
10	20,7
11	20,2
12	22,5
13	27
14	32,9
15	39
16	43,8
17	46,5
18	46,6
19	44
20	39,6
21	34,3
22	29,5
23	26,4
24	25,7
25	27,7
26	32,1
27	37,9
28	43,9
29	49
30	51,9
31	52,2
32	49,9
33	45,5
34	40,3
35	35,4
36	32
37	31,1
38	32,9
39	37,1
40	42,8
41	48,9
42	54,1
43	57,2
44	57,8
45	55,7
46	51,5
47	46,3
48	41,3
49	37,8
50	36,6
51	38,1
52	42,1
53	47,8
54	53,9
55	59,2
56	62,6
57	63,3
58	61,4
59	57,4
60	52,2
61	47,2
62	43,5
63	42,1
64	43,4
65	47,2
66	52,7
67	58,9
68	64,3
69	67,8
70	68,9
71	67,2
72	63,3
73	58,2
74	53,1
75	49,2
76	47,6
77	48,7
78	52,3
79	57,7
80	63,8
81	69,3
82	73,1
83	74,4
84	73
85	69,2
86	64,2
87	59
88	55
89	53,1
90	53,9
91	57,3
92	62,6
93	68,8
94	74,4
95	78,4
96	79,9
97	78,7
98	75,2
99	70,2
100	65
101	60,8
102	58,7
103	59,3
104	62,4
105	67,6
106	73,7
107	79,4
108	83,6
109	85,4
110	84,4
111	81
112	76,1
113	70,9
114	66,6
115	64,3
116	64,6
117	67,6
118	72,6
119	78,7
120	84,5

Искусственный fixture

Вариант 5

Doughnut · строковые numeric-looking категории

Проверяет явные строки «2024», «001» и «null» в human grammar.

Chart.js · canvas

Doughnut · строковые numeric-looking категории

Те же нормализованные данные, renderer Chart.js.

Загрузка Chart.js…

Данные графика

Год	Доля
2024	18%
2025	27%
2026	31%
001	14%
null	10%

Искусственный fixture

ECharts · SVG

Doughnut · строковые numeric-looking категории

Те же нормализованные данные, renderer ECharts.

Загрузка ECharts…

Данные графика

Год	Доля
2024	18%
2025	27%
2026	31%
001	14%
null	10%

Искусственный fixture

Контроль progressive enhancement

Без engine production-компонент использует Chart.js. Ниже engine="none" явно отключает renderer и оставляет только server-rendered fallback.

Fallback only

Эта карточка не должна инициировать загрузку renderer chunk.

Данные графика

category	first	second	third
A	34	21	16
B	28	25	19
C	41	31	23
D	37	29	28
E	46	35	31
F	43	39	33

Искусственный fixture

period	value	baseline
T1	42	35
T2	47	36
T3	51	37
T4	54	38
T5	56	40
T6	55	41
T7	54	42
T8	52	43
T9	51	44
T10	51	45
T11	53	47
T12	57	48
T13	62	49
T14	67	50
T15	72	51
T16	76	52
T17	78	53
T18	78	55

period	value	baseline
T1	42	35
T2	47	36
T3	51	37
T4	54	38
T5	56	40
T6	55	41
T7	54	42
T8	52	43
T9	51	44
T10	51	45
T11	53	47
T12	57	48
T13	62	49
T14	67	50
T15	72	51
T16	76	52
T17	78	53
T18	78	55

period	value	baseline
T1	42	35
T2	47	36
T3	51	37
T4	54	38
T5	56	40
T6	55	41
T7	54	42
T8	52	43
T9	51	44
T10	51	45
T11	53	47
T12	57	48
T13	62	49
T14	67	50
T15	72	51
T16	76	52
T17	78	53
T18	78	55

period	value	baseline
T1	42	35
T2	47	36
T3	51	37
T4	54	38
T5	56	40
T6	55	41
T7	54	42
T8	52	43
T9	51	44
T10	51	45
T11	53	47
T12	57	48
T13	62	49
T14	67	50
T15	72	51
T16	76	52
T17	78	53
T18	78	55

period	value	baseline
T1	42	35
T2	47	36
T3	51	37
T4	54	38
T5	56	40
T6	55	41
T7	54	42
T8	52	43
T9	51	44
T10	51	45
T11	53	47
T12	57	48
T13	62	49
T14	67	50
T15	72	51
T16	76	52
T17	78	53
T18	78	55

period	value	baseline
T1	42	35
T2	47	36
T3	51	37
T4	54	38
T5	56	40
T6	55	41
T7	54	42
T8	52	43
T9	51	44
T10	51	45
T11	53	47
T12	57	48
T13	62	49
T14	67	50
T15	72	51
T16	76	52
T17	78	53
T18	78	55