Использование ECharts в Vue 3: практический пример

ECharts — мощная библиотека для визуализации данных. Она поддерживает линейные, столбчатые, круговые диаграммы, карты и многое другое. В этой статье разберём, как интегрировать ECharts в Vue 3 с помощью Composition API и показать пример динамической диаграммы.

---

1. Установка

Для Vue 3 лучше использовать пакет echarts и обёртку vue-echarts:

npm install echarts vue-echarts

---

2. Регистрация компонента

Создадим глобальный компонент BaseChart.vue:

<script setup>
import { defineProps, onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'const props = defineProps({
  options: {
    type: Object,
    required: true
  },
  width: {
    type: String,
    default: '600px'
  },
  height: {
    type: String,
    default: '400px'
  }
})const chartRef = ref(null)
let chartInstance = nullonMounted(() => {
  chartInstance = echarts.init(chartRef.value)
  chartInstance.setOption(props.options)
})watch(props.options, (newOptions) => {
  if (chartInstance) {
    chartInstance.setOption(newOptions)
  }
}, { deep: true })
</script><template>
  <div :style="{ width, height }" ref="chartRef"></div>
</template>

Что делает компонент:

• Инициализирует ECharts на div.
• Обновляет диаграмму при изменении options.
• Поддерживает настраиваемую ширину и высоту.

---

3. Использование в родительском компоненте

Пример: динамическая линейная диаграмма с данными о продажах:

<script setup>
import { ref } from 'vue'
import BaseChart from './BaseChart.vue'const salesData = ref([120, 200, 150, 80, 70, 110, 130])
const categories = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']const chartOptions = ref({
  title: {
    text: 'Продажи за неделю'
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: categories
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Продажи',
      type: 'line',
      data: salesData.value,
      smooth: true
    }
  ]
})// Пример обновления данных через 3 секунды
setTimeout(() => {
  salesData.value = [150, 180, 200, 130, 90, 120, 160]
  chartOptions.value.series[0].data = salesData.value
}, 3000)
</script><template>
  <BaseChart :options="chartOptions" width="700px" height="400px" />
</template>

Что происходит:

• Сначала отображаются начальные данные.
• Через 3 секунды данные обновляются, и диаграмма перерисовывается автоматически.

---

4. Советы по использованию

1. Динамическое обновление: используйте реактивные ref и watch, как в примере.
2. Адаптация размеров: добавьте resize при изменении окна:

window.addEventListener('resize', () => {
  if (chartInstance) chartInstance.resize()
})

3. Комбинированные графики: ECharts поддерживает комбинированные диаграммы, например bar + line.
4. Лёгкая кастомизация: можно добавлять легенды, цветовые схемы и интерактивные события через опции.

---

5. Вывод

Использование ECharts в Vue 3 с Composition API:

• позволяет создавать динамические и реактивные диаграммы,
• компоненты легко переиспользовать,
• библиотека поддерживает множество типов графиков и анимации.

Такой подход удобен для панелей аналитики, дашбордов и визуализации больших данных.