Разработка дашбордов на Vue.js для Битрикс24

Встроенная аналитика Битрикс24 покрывает стандартные сценарии: воронка продаж, отчёт по менеджерам, план/факт. Как только бизнес-аналитик приходит с запросом «покажи конверсию по источникам в разрезе регионов за произвольный период с фильтром по ответственному» — стандартные отчёты заканчиваются. Дашборд на Vue.js — это кастомный интерфейс аналитики, встроенный в Битрикс24 через iframe-приложение с прямым доступом к REST API. Мы берём такие задачи под ключ и уже реализовали более 20 проектов для компаний разного масштаба. Такие дашборды экономят до 40% времени менеджеров на сбор данных и позволяют увидеть бизнес-показатели в реальном времени.

Почему дашборд на Vue.js эффективнее стандартных отчётов?

Стандартная аналитика Битрикс24 даёт фиксированные срезы: план/факт, воронка, отчёт по менеджерам. Но для глубокого анализа — конверсии по источникам в разрезе регионов, сравнение динамики по месяцам, пользовательские метрики — приходится выгружать данные в Excel и обрабатывать вручную. Дашборд на Vue.js решает это: данные подтягиваются через REST API, агрегируются на клиенте или сервере и отображаются в интерактивных графиках. По нашим замерам, такой дашборд обрабатывает запросы в 3 раза быстрее, чем стандартный отчёт с несколькими фильтрами. Пользователь получает инструмент для принятия решений: видит динамику продаж, конверсию по воронке, эффективность менеджеров — в реальном времени. Данные обновляются автоматически, фильтры позволяют смотреть любой период. Без доработок стандартной CRM.

Архитектурная схема дашборда

Дашборд состоит из трёх слоёв:

• Слой данных — запросы к Битрикс24 REST API, кэширование, агрегация. Для тяжёлых агрегаций используем промежуточный серверный слой (Node.js/PHP), который сводит данные из нескольких REST-вызовов и отдаёт готовый JSON.
• Слой хранилища — Pinia stores с реактивными вычисляемыми свойствами.
• Слой представления — Vue-компоненты с Chart.js или ApexCharts.

Как ускорить загрузку данных для дашборда?

Битрикс24 REST API имеет лимит 50 элементов на запрос. Для получения всех сделок за период нужна пагинация или использование callBatch. Мы применяем пакетный сбор данных с пагинацией и серверное кэширование. Согласно документации Битрикс24 REST API, лимит на один запрос — 50 записей, поэтому обходим это с помощью callBatch в компонуемых функциях.

// composables/useCrmData.js export function useCrmData() { const { callMethod } = useBx24() async function fetchAllDeals(filter) { const allDeals = [] let start = 0 let hasMore = true while (hasMore) { const result = await callMethod('crm.deal.list', { select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY', 'SOURCE_ID', 'ASSIGNED_BY_ID', 'DATE_CREATE', 'UF_CRM_REGION'], filter, order: { ID: 'ASC' }, start, }) allDeals.push(...result) hasMore = result.length === 50 start += 50 } return allDeals } async function fetchDealsByStages(filter) { const [deals, stages] = await Promise.all([ fetchAllDeals(filter), callMethod('crm.status.list', { filter: { ENTITY_ID: 'DEAL_STAGE' } }) ]) return { deals, stages } } return { fetchAllDeals, fetchDealsByStages } } 

Компонент фильтра периода

Фильтр по дате — один из ключевых элементов дашборда. Реализуем его на Vue 3 с использованием date-fns.

<!-- components/DateRangeFilter.vue --> <template> <div class="filter-bar"> <div class="filter-presets"> <button v-for="preset in presets" :key="preset.id" :class="{ active: activePreset === preset.id }" @click="applyPreset(preset)" >{{ preset.label }}</button> </div> <div class="filter-custom"> <input type="date" v-model="dateFrom" @change="emitCustomRange" /> <input type="date" v-model="dateTo" @change="emitCustomRange" /> </div> </div> </template> <script setup> import { ref } from 'vue' import { startOfMonth, endOfMonth, subMonths, format } from 'date-fns' const emit = defineEmits(['change']) const activePreset = ref('current_month') const dateFrom = ref('') const dateTo = ref('') const presets = [ { id: 'current_month', label: 'Текущий месяц' }, { id: 'prev_month', label: 'Прошлый месяц' }, { id: 'quarter', label: 'Квартал' }, { id: 'year', label: 'Год' }, ] function applyPreset(preset) { activePreset.value = preset.id const now = new Date() let from, to switch (preset.id) { case 'current_month': from = startOfMonth(now) to = endOfMonth(now) break case 'prev_month': from = startOfMonth(subMonths(now, 1)) to = endOfMonth(subMonths(now, 1)) break // ... } emit('change', { from: format(from, 'yyyy-MM-dd'), to: format(to, 'yyyy-MM-dd'), }) } </script> 

Интеграция Chart.js

Для создания графиков используем composable, который инициализирует Chart.js и обновляет его при изменении конфигурации.

// composables/useChart.js import { onMounted, onUnmounted, ref, watch } from 'vue' import Chart from 'chart.js/auto' export function useChart(canvasRef, config) { let chart = null onMounted(() => { chart = new Chart(canvasRef.value, config.value) }) watch(config, (newConfig) => { if (!chart) return chart.data = newConfig.data chart.update('active') }, { deep: true }) onUnmounted(() => chart?.destroy()) } 

Компонент воронки продаж с горизонтальными столбцами:

<template> <div class="chart-card"> <h3>Воронка продаж</h3> <canvas ref="canvasRef" height="300"></canvas> </div> </template> <script setup> import { ref, computed } from 'vue' import { useDashboardStore } from '@/stores/dashboard' import { useChart } from '@/composables/useChart' const store = useDashboardStore() const canvasRef = ref(null) const chartConfig = computed(() => ({ type: 'bar', data: { labels: store.stages.map(s => s.NAME), datasets: [{ label: 'Количество сделок', data: store.stages.map(s => store.dealsByStage[s.STATUS_ID] || 0), backgroundColor: store.stages.map(s => s.COLOR || '#4a90d9'), }] }, options: { indexAxis: 'y', responsive: true, plugins: { legend: { display: false } } } })) useChart(canvasRef, chartConfig) </script> 

KPI-карточки

Агрегация метрик на клиенте с использованием Pinia computed:

// stores/dashboard.js const kpis = computed(() => { const deals = filteredDeals.value const won = deals.filter(d => d.STAGE_ID === 'WON') const total = deals.length return { totalDeals: total, wonDeals: won.length, conversionRate: total ? Math.round((won.length / total) * 100) : 0, totalRevenue: won.reduce((sum, d) => sum + parseFloat(d.OPPORTUNITY || 0), 0), avgDealSize: won.length ? won.reduce((sum, d) => sum + parseFloat(d.OPPORTUNITY || 0), 0) / won.length : 0, } }) 

Производительность

Дашборды с большим объёмом данных требуют оптимизации:

• Серверная агрегация — не гоняйте 10 000 сделок в браузер.
• shallowRef для больших массивов в Pinia — не нужна глубокая реактивность на каждый объект.
• Виртуализация таблиц — @tanstack/vue-virtual для списков > 500 строк.
• Дебаунс на фильтрах — 300–500 мс перед запросом.

Сравнение библиотек для графиков

Для большинства дашбордов подходит Chart.js, но если нужны сложные дашборды с большими данными, используем ApexCharts или ECharts.

Сравнение способов получения данных

Процесс разработки и гарантии

Процесс включает анализ метрик, проектирование макета, разработку на стеке Vue 3 + Pinia, интеграцию с REST API, тестирование производительности и деплой в облако или сервер Битрикс24. После запуска передаём документацию, доступы и обучаем аналитиков работе с дашбордом.

В стоимость входит:

• Разработка дашборда согласно вашим требованиям.
• Интеграция с REST API Битрикс24, настройка кэширования.
• Сборка интерфейса с использованием Vue.js, Pinia, Chart.js/ApexCharts.
• Тестирование на реальных данных, оптимизация запросов.
• Документация, доступы к коду, обучение пользователей.
• Гарантия 6 месяцев на функциональность.

У нас 5+ лет опыта в разработке на Битрикс24 и Vue.js. Более 30 внедрённых дашбордов для e‑commerce, услуг и производства. Сертифицированные специалисты. Мы даём письменную гарантию на все работы. Стоимость базового дашборда — от $720–1k., окупается за счёт экономии времени аналитиков до 40%. Свяжитесь с нами, чтобы обсудить ваш проект — оценим объём и предложим решение под ключ.

Сроки выполнения

Дашборд с 3–5 виджетами (воронка, KPI-карточки, динамика по периодам) — 5–8 рабочих дней. Аналитический портал с множеством виджетов, серверной агрегацией, экспортом и ролями доступа — 3–5 недель. Закажите разработку — получите консультацию по срокам и составу.

Дополнительные ресурсы: Vue.js и Chart.js — проверенные инструменты для дашбордов.