Розробка інтерактивних графіків на ECharts для сайту
Графіки на сайті гальмують? DataZoom підвішує браузер при 10 000 точок? Слабке місце багатьох бібліотек — продуктивність при великих обсягах даних. Apache ECharts вирішує цю проблему: лінивий рендеринг, WebGL-прискорення, розумне масштабування. Ми розробили десятки дашбордів для фінтеху, аналітики та моніторингу — ділимося досвідом. Наша команда має 5+ років досвіду у візуалізації даних та виконала понад 30 проєктів. Сертифіковані інженери гарантують продуктивність навіть при мільйонах точок. Оптимізація візуалізації економить бюджет за рахунок зниження навантаження на сервер і зменшення часу завантаження сторінки.
Чому варто обрати ECharts для візуалізації?
На відміну від D3.js, де кожен елемент малюється вручну, ECharts надає готові типи графіків та потужний API для кастомізації. Chart.js програє в продуктивності на великих даних. ECharts же включає вбудовану оптимізацію: lazy rendering, dataZoom, WebGL. Це дозволяє рендерити 100 000 точок з 60 FPS. Згідно з документацією Apache ECharts, лінивий рендеринг забезпечує 60 FPS при 100 000 точок. Для екстремальних обсягів використовуйте агрегацію на сервері або розширення echarts-gl.
Як ECharts справляється з мільйонами точок?
Основний механізм — dataZoom з режимом inside. Він масштабує вікно перегляду без перемальовування всіх даних. Для екстремальних обсягів використовуйте агрегацію на сервері: передавайте лише видимий діапазон. ECharts підтримує WebGL через розширення echarts-gl, що дає 60 FPS на 100 000 точок. Порівняйте рендерери:
| Параметр | Canvas | SVG |
|---|---|---|
| Швидкість при 10 000 точок | 30 FPS | 15 FPS |
| Чіткість на ретині | Розмитий | Чіткий |
| Підтримка анімації | Так | Так |
| Рекомендація | >1000 точок | <1000 точок |
Що обрати: canvas чи svg рендеринг?
ECharts за замовчуванням використовує canvas, але можна перемкнути на SVG через opts.renderer. Canvas швидший на великих даних, але поступається в якості на дисплеях Retina. SVG ідеальний для діаграм з невеликою кількістю елементів та анімацією. У наших проєктах ми часто комбінуємо: canvas для графіків з DataZoom, SVG для статичних діаграм.
Типові проблеми та рішення при роботі з ECharts
| Проблема | Рішення |
|---|---|
| Графік гальмує при 50 000 точок | Увімкнути dataZoom з inside-режимом, перемкнутися на canvas |
| Нечіткі лінії на Retina-дисплеї | Використовувати SVG-рендерер для статичних графіків |
| Помилка гідратації в React | Використовувати echarts-for-react з ключем notMerge |
| Витік пам'яті при зміні сторінок | Викликати .dispose() на екземплярі при демонтуванні |
Базова інтеграція з React
import ReactECharts from 'echarts-for-react';
function RevenueChart({ data }) {
const option = {
tooltip: {
trigger: 'axis',
formatter: (params) => {
const p = params[0];
return `${p.axisValue}<br/>${p.marker}Виручка: <b>${formatCurrency(p.value)}</b>`;
}
},
legend: { data: ['Виручка', 'Прогноз'] },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: data.map(d => d.date)
},
yAxis: {
type: 'value',
axisLabel: { formatter: v => `${(v/1000).toFixed(0)}k` }
},
series: [
{
name: 'Виручка',
type: 'line',
smooth: true,
areaStyle: { opacity: 0.2 },
data: data.map(d => d.revenue),
lineStyle: { color: '#3b82f6' }
},
{
name: 'Прогноз',
type: 'line',
smooth: true,
lineStyle: { type: 'dashed', color: '#f59e0b' },
data: data.map(d => d.forecast)
}
]
};
return (
<ReactECharts
option={option}
style={{ height: 350 }}
opts={{ renderer: 'svg' }}
/>
);
}
Heatmap (теплова карта активності)
function ActivityHeatmap({ data }) {
const option = {
tooltip: { position: 'top' },
grid: { height: '50%', top: '10%' },
xAxis: {
type: 'category',
data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Нд'],
splitArea: { show: true }
},
yAxis: {
type: 'category',
data: Array.from({ length: 24 }, (_, i) => `${i}:00`),
splitArea: { show: true }
},
visualMap: {
min: 0, max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%',
inRange: { color: ['#f0f9ff', '#0369a1'] }
},
series: [{
name: 'Активність',
type: 'heatmap',
data: data,
label: { show: false },
emphasis: { itemStyle: { shadowBlur: 10 } }
}]
};
return <ReactECharts option={option} style={{ height: 400 }} />;
}
Candlestick (біржовий графік)
function CandlestickChart({ ohlcData }) {
const option = {
xAxis: {
type: 'category',
data: ohlcData.map(d => d.date)
},
yAxis: { scale: true },
series: [{
type: 'candlestick',
data: ohlcData.map(d => [d.open, d.close, d.low, d.high]),
itemStyle: {
color: '#22c55e',
color0: '#ef4444',
borderColor: '#22c55e',
borderColor0: '#ef4444'
}
}]
};
return <ReactECharts option={option} style={{ height: 400 }} />;
}
DataZoom та динамічне оновлення
const chartRef = useRef();
const option = {
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
type: 'slider',
start: 0,
end: 100
}
],
// ... rest of option
};
function updateChart(newData) {
const chart = chartRef.current?.getEchartsInstance();
if (!chart) return;
chart.setOption({
series: [{ data: newData }]
}, { notMerge: false });
}
Процес роботи над дашбордом
- Аналітика — вивчаємо джерела даних, визначаємо типи графіків, узгоджуємо макет.
- Проектування — обираємо рендерер, налаштовуємо DataZoom, опрацьовуємо кастомні візуалізації.
- Реалізація — пишемо компоненти на React/TypeScript, інтегруємо з API, додаємо адаптивність.
- Тестування — перевіряємо продуктивність на цільових пристроях, виправляємо баги.
- Деплой — розміщуємо на сервері, налаштовуємо кешування, навчаємо команду.
Як уникнути типових помилок продуктивності?
- Ігнорування large dataset — не використовуйте більше 10 000 точок без агрегації. Застосовуйте
dataZoomта серверну вибірку. - Неправильний рендерер — для статичних графіків обирайте SVG, для динамічних — Canvas.
- Відсутність адаптивності — на мобільних пристроях зменшуйте кількість точок та вимикайте анімацію.
- Витік пам'яті — знищуйте екземпляри ECharts при демонтуванні компонента.
Терміни та що входить в роботу
Базова розробка 5–7 типів графіків з DataZoom та tooltip займає 3–5 днів. У вартість входить:
- Вихідний код з коментарями та документацією
- Інтеграція з API вашого сайту
- Налаштування адаптивності під мобільні пристрої
- Навчання команди роботі з ECharts
- Гарантія 30 днів на виявлення прихованих помилок
Для складних дашбордів з кастомними візуалізаціями (графи, sunburst, treemap) терміни уточнюються індивідуально. Замовте консультацію — ми оцінимо проєкт за 24 години та запропонуємо оптимальне рішення. Зв'яжіться з нами, щоб обговорити деталі та отримати комерційну пропозицію.
Гарантії та підтримка
Після здачі дашборду ми забезпечуємо підтримку протягом 30 днів: виправляємо помилки рендерингу, допомагаємо з інтеграцією нових джерел даних та оптимізуємо продуктивність при зміні обсягів. Усі компоненти супроводжуються JSDoc-коментарями та документацією з конфігурації ECharts. За потреби проводимо навчання розробників вашої команди — вони зможуть самостійно додавати нові типи графіків та налаштовувати зовнішній вигляд без нашої участі. Для проєктів з регулярними оновленнями даних та дашбордів пропонуємо розширену технічну підтримку — обговорюємо умови індивідуально.