Краткое руководство по использованию электронных диаграмм и vue-echarts

Суть каждого приложения - отображение данных для пользователей. Иногда очень сложно отобразить эти данные с помощью текста. Диаграммы и графики - отличный способ визуально представить эти данные. В этой статье я покажу вам, как легко создавать визуально привлекательные диаграммы в вашем приложении Vue.js.

Начиная

Я буду использовать Vue CLI, чтобы быстро создать стартовое приложение. Я буду использовать как электронные диаграммы, так и vue-диаграммы, чтобы добавить диаграммы в наше стартовое приложение. Итак, приступим.

Установите Vue CLI с помощью этой команды:

npm install @vue/cli

Затем мы воспользуемся Vue CLI, чтобы создать приложение Vue, которое мы будем использовать. Мы создадим приложение с помощью этой команды:

vue create vue-echarts-demo

Vue CLI спросит вас, хотите ли вы использовать предустановку по умолчанию или выбрать функции вручную. Выберите default.

Это создаст наше приложение в папке с именем vue-echarts-demo. Перейдите в этот каталог с помощью этой команды:

cd vue-echarts-demo

Установка пакетов диаграмм

eCharts - одна из крупнейших и наиболее широко используемых графических программ. Мы будем использовать это в нашем приложении vue. Чтобы его можно было использовать во Vue, мы также будем использовать продукт под названием vue-echarts. Vue-echarts - это оболочка для eCharts, позволяющая ему работать в среде Vue.

Вы можете установить их обе с помощью этой команды:

npm install echarts vue-echarts

Настройка пакетов диаграмм

Теперь, когда у нас установлены пакеты диаграмм, нам нужно установить их в нашем приложении. Откройте каталог src и создайте новый каталог с именем plugins. Внутри нового каталога плагинов создайте файл с именем echarts.js.

В этом файле мы создадим компонент Vue для eCharts. Компонент будет глобально доступен в нашем приложении. Шаги, которые нам нужно предпринять, - это импортировать как vue, так и vue-echarts. Затем мы импортируем части eCharts, которые будем использовать. Наша первая диаграмма будет гистограммой, поэтому нам нужно будет импортировать и ее. Наконец, мы создаем глобальный компонент с именем chart. Вот как должен выглядеть ваш файл echarts.js:

import Vue from 'vue';
import Echarts from 'vue-echarts';

import 'echarts/lib/chart/bar';

Vue.component('chart', Echarts);

Импорт файла нашего плагина

Мы должны сделать так, чтобы Vue узнал о только что созданном файле. Мы делаем это, импортируя его в файл main.js. Откройте файл main.js и добавьте следующую строку после последнего оператора импорта:

import "@/plugins/echarts";

Теперь мы готовы создать нашу первую диаграмму.

Создание гистограммы

Мы будем создавать все наши диаграммы в компоненте HelloWorld. Этот компонент был создан автоматически, когда мы использовали Vue CLI для создания нашего приложения.

Откройте файл HelloWorld.vue и сделайте следующее:

  • удалить весь HTML внутри тегов шаблона
  • удалить реквизит в тегах скрипта
  • удалить весь CSS в тегах стиля

Ваш файл должен выглядеть так:

<template>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
</style>

В нашем плагине мы назвали наш компонент chart. Vue-echarts строит диаграммы, используя данные, которые вы передаете в него, используя свойство options. Давайте воспользуемся этим, чтобы создать HTML-код для нашей первой диаграммы. Добавьте следующий код в теги шаблона:

<chart :options="chartOptionsBar"></chart>

Определение нашей диаграммы

Далее нам нужно определить данные, которые будут использоваться для создания нашей диаграммы. Внутри тегов скрипта создайте новый объект данных с записью для chartOptionsBar. Ваш тег скрипта должен выглядеть так:

<script>
export default {
  name: 'HelloWorld',
  data: () => ({
    chartOptionsBar: {}
  })
}
</script>

Создание данных диаграммы

Наша первая гистограмма будет содержать квартальные данные о продажах вымышленной компании. Каждый квартал будет отображаться на оси X диаграммы. Сумма продаж будет отображаться на оси Y диаграммы.

Давайте сначала определим нашу xAxis. Мы предоставим массив данных, который будет содержать записи за каждый квартал года. Добавьте к нашему объекту chartOptionsBar следующее:

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  }
}

Наша yAxis будет отображать только объем продаж за каждый квартал. По этой причине нам не нужно создавать для него массив данных. Вместо этого мы сообщаем ему, что он отобразит value. Добавьте к нашему объекту chartOptionsBar следующее:

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    type: 'value'
  }
}

Последний шаг - предоставить данные, которые будут отображаться на нашей гистограмме. Вы делаете это, добавляя массив серий. Серия - это массив объектов. Каждый объект определяет тип создаваемой диаграммы и будет иметь массив данных значений, которые будут нанесены на график. Вы можете добавить это с помощью этого:

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [63, 75, 24, 92]
    }
  ]
}

Вы можете запустить свой сервер с помощью команды:

npm run serve

Затем откройте в браузере адрес localhost: 8080, и вы увидите свою первую диаграмму, которая выглядит следующим образом:

Добавление стиля в наши диаграммы

По умолчанию vue-echarts устанавливает ширину диаграммы 600 пикселей. Я бы предпочел, чтобы наши диаграммы были во всю ширину контейнера. Для этого я собираюсь поместить диаграмму в div. Я дам этому div класс chart-wrapper. Теперь мой шаблон выглядит так:

<template>
  <div class="chart-wrapper">
    <chart :options="chartOptionsBar"></chart>
  </div>
</template>

Затем я хочу добавить немного стиля новому классу chart-wrapper. Я сделаю этот класс шириной, равной размеру экрана, и высотой 700 пикселей. Вот стиль, который я добавил:

.chart-wrapper {
  width: 100%;
  height: 700px;
}

Vue-echarts добавляет класс echarts ко всем своим диаграммам. Мы также стилизуем это в нашем CSS. Мы скажем этому классу, чтобы он занимал 100% высоты и ширины своего контейнера, который равен chart-wrapper. Вот CSS, который я добавил:

.echarts {
  width: 100%;
  height: 100%;
}

Пока мы добавляем стили, я хочу заменить логотип Vue заголовком. Откройте файл App.vue. Удалите тег ‹img› и замените его на:

<h1>Vue eCharts Demo</h1>

Теперь наша диаграмма выглядит так:

Добавление заголовка и цвета

Это отличное начало для нашего первого графика. Когда люди просматривают диаграмму, они не уверены, что они просматривают. Мы можем решить эту дилемму, добавив заголовок к нашей диаграмме.

Каждый компонент eCharts, который вы хотите использовать, необходимо импортировать. Заголовок - это компонент, поэтому его нужно импортировать. Откройте файл echarts.js и добавьте следующую строку:

import 'echarts/lib/component/title';

Затем мы можем добавить заголовок к нашей гистограмме. Вернувшись в компонент HelloWorld.vue, давайте добавим заголовок к нашему объекту chartOptionsBar.

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [63, 75, 24, 92]
    }
  ],
  title: {
    text: 'Quarterly Sales Results'
  }
}

По умолчанию eCharts помещает заголовок в левую часть гистограммы. Вот как сейчас выглядит наша диаграмма:

Мне не нравится, как выглядит это название, поэтому давайте его изменим. Я хочу, чтобы заголовок имел больший размер шрифта и был по центру. На диаграмме есть опция x, которая представляет горизонтальную плоскость. Я хочу, чтобы название было сосредоточено на этом. Чтобы заголовок имел больший размер шрифта, нам нужно добавить textStyle. Последнее изменение, которое я хочу сделать, - установить полосу другого цвета. Вот как выглядят мои варианты сейчас:

chartOptionsBar: {
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [63, 75, 24, 92]
    }
  ],
  title: {
    text: 'Quarterly Sales Results',
    x: 'center',
    textStyle: {
      fontSize: 24
    }
  },
  color: ['#127ac2']
}

Вот окончательная версия моей гистограммы:

Создание линейной диаграммы

Далее я покажу вам, как создать линейный график. Мы создадим линейный график, показывающий месячные цены на акции вымышленной компании. Итак, приступим.

Во-первых, нам нужно создать новый div-обертку диаграммы и новый элемент диаграммы. Новый элемент диаграммы получит свои параметры от объекта chartOptionsLine. Вот как сейчас выглядит мой html-код:

<div>
  <div class="chart-wrapper">
    <chart :options="chartOptionsBar"></chart>
  </div>
  <hr />
  <div class="chart-wrapper">
    <chart :options="chartOptionsLine"></chart>
  </div>
</div>

Затем в нашем объекте данных создайте новый объект chartOptionsLine. Вместо создания нового объекта скопируйте существующий объект chartOptionsBar. Переименуйте копию в chartOptionsLine. На данный момент нам нужно только последовательно менять тип от полосы к строке. Вот как выглядит наш объект chartOptionsLine:

chartOptionsLine: {
  xAxis: {
    data: ["Q1", "Q2", "Q3", "Q4"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      type: "line",
      data: [63, 75, 24, 92]
    }
  ],
  title: {
    text: "Quarterly Sales Results",
    x: "center",
    textStyle: {
      fontSize: 24
    }
  },
  color: ["#127ac2"]
}

Если вы войдете в свой браузер, вы заметите, что линейная диаграмма не отображается. Это потому, что нам нужно импортировать его в наш плагин, как мы это делали с гистограммой.

Откройте echarts.js и добавьте следующую строку:

import 'echarts/lib/chart/line';

Теперь у нас есть этот линейный график:

Изменить заголовок и данные

Мы хотим, чтобы линейная диаграмма отображала ежемесячные цены на акции вымышленной компании. Нам понадобится более четырех точек данных. У нас будет 12 точек данных на четырех линейном графике. Мы также хотим, чтобы заголовок, отображаемый на оси x, отображал месяцы года, а не кварталы. Нам также нужно изменить заголовок нашего графика.

Мы можем обновить наш chartOptionsLine следующими значениями:

chartOptionsLine: {
  xAxis: {
    data: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      type: "line",
      data: [55, 72, 84, 48, 59, 62, 87, 75, 94, 101, 127, 118]
    }
  ],
  title: {
    text: "Monthly Stock Prices",
    x: "center",
    textStyle: {
      fontSize: 24
    }
  },
  color: ["#127ac2"]
}

Теперь наша линейная диаграмма выглядит так:

Доступ к документации по диаграммам

eCharts предоставляет гораздо больше типов диаграмм, помимо столбчатых и линейных. eCharts предоставляет множество опций, которые вы можете добавить в свою диаграмму. Например, вы можете добавить легенды или всплывающие подсказки.

Если вы хотите узнать о других типах диаграмм и доступных опциях, вы можете прочитать их документацию. Вот ссылка на документацию.

Получить код

Весь код для этой статьи можно найти в моем аккаунте GitHub.

Заключение

Очень легко добавить пользовательские диаграммы и графики в приложение Vue.js с помощью eCharts и vue-echarts. Диаграммы позволяют визуализировать данные для просмотра пользователями.

Если у вас есть отзывы, оставьте комментарий ниже. Пожалуйста, аплодируйте этой статье. Спасибо за прочтение.

Еще статьи, которые вы могли бы прочитать



Создание настраиваемых директив в Vue.js
Директивы - это специальные атрибуты с префиксом v-. Задача директивы - реактивно применять побочные эффекты к модели DOM… medium.com





Как создать одностраничное приложение с использованием Vue.js, Vuex, Vuetify и Firebase
Как установить Vue и создать SPA с помощью Vuetify и Vue Router medium.freecodecamp.org





Как добавить интернационализацию в приложение Vue
¡Hola! Bonjour. Чао. 你好. Вот как добавить интернационализацию в Vue. medium.freecodecamp.org





Как уменьшить размер пакета Vue.JS с помощью Webpack
Я работаю в группе Индустрии 4.0 в Stanley Black & Decker. Наша команда недавно создала аналог App Store для… medium.com