Разработка интерактивных графиков на ECharts для сайта

Разработка интерактивных графиков на ECharts для сайта

Apache ECharts — мощная библиотека для сложных визуализаций: тепловые карты, графы связей, treemap, sunburst, scatter, candlestick. Подходит для дашбордов с большими данными.

Установка

npm install echarts echarts-for-react

Базовая интеграция с 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' }}  // svg или canvas
    />
  );
}

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,  // [[dayIndex, hourIndex, value], ...]
      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',
      // [open, close, low, high]
      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 option = {
  dataZoom: [
    {
      type: 'inside',  // зум колёсиком мыши
      start: 0,
      end: 100
    },
    {
      type: 'slider',  // ползунок под графиком
      start: 0,
      end: 100
    }
  ],
  // ... rest of option
};

Динамическое обновление данных

const chartRef = useRef();

// Обновить данные без перерисовки всего графика
function updateChart(newData) {
  const chart = chartRef.current?.getEchartsInstance();
  if (!chart) return;

  chart.setOption({
    series: [{ data: newData }]
  }, { notMerge: false });  // merge — только обновить изменившееся
}

Сроки

5–7 типов графиков с DataZoom и tooltip — 3–5 дней.