Данные — это нефть, используйте их правильно
В современном мире визуализация является одним из наиболее эффективных и результативных способов обработки данных. Человек может эффективно проводить анализ на круговой диаграмме, а не в электронной таблице.
Допустим, у вас есть огромное количество данных о пользователях вашего программного обеспечения, но это бесполезно, если вы не можете извлечь из этих необработанных данных выводы, которые помогут вам принять лучшие бизнес-решения, а точнее «решения, основанные на данных». Хватит о контексте, ребята, давайте начнем с главной цели этой статьи — начать работу с Apache Echarts в React.
Введение в Apache Echarts
ECharts — это мощная, простая в использовании и гибкая библиотека визуализации JavaScript. Apache Echarts описывает себя на npm следующим образом:
Apache ECharts — это бесплатная, мощная библиотека диаграмм и визуализации, предлагающая простой способ добавления интуитивных, интерактивных и очень настраиваемых диаграмм в ваши коммерческие продукты. Она написана на чистом JavaScript и основана на zrender, которая является совершенно новой легковесной библиотекой canvas.
Приведенного выше описания достаточно, чтобы понять, чем занимается ECharts, не так ли 🤔? Сегодня у него около 480k еженедельных загрузок на npm. 51.5k звезд на Github и последняя версия 5.3.3, которая была опубликована всего 12 дней назад.
Echarts для React
Помните, что Apache ECharts — это библиотека JavaScript. echarts-for-react — это обертка React для ECharts.
Начните использовать Echarts в своем проекте React
Шаг 1: Создайте приложение react с помощью вашего любимого инструмента (CRA или Vite) или создайте его с нуля.
Шаг 2: Запустите npm install echarts и npm install echarts-for-react
Теперь у вас есть все, чтобы начать работу с ECharts.
Для создания диаграмм главное, что вы должны знать — это объект options. Этот объект содержит данные, которые необходимы ECharts для идеального отображения графика. Ниже приведен обзор того, что можно включить в объект options. Для получения дополнительной информации о параметрах посмотрите здесь https://echarts.apache.org/en/option.html.
Простая гистограмма с помощью Echarts
Шаг 1: Сначала нам нужно импортировать пакет echarts-for-react (как ReactEChart) в наш файл. Я создал отдельный файл с именем BarChart.jsx
import ReactEChart from "echarts-for-react";
Шаг 2: Нам нужно создать пустой объект eChartsOption, а затем использовать компонент ReactEChart и передать созданный объект в опцию option prop компонента ReactEChart Component
import ReactEChart from "echarts-for-react";
export default function BarChart() {
const eChartsOption {};
return (
<div>
<ReactEChart option±{eChartsOption} />
</div>
);
};
Шаг 3: Теперь мы добавим необходимые данные в объект **eChartsOption **.
Основными данными, которые должны быть включены в объект, являются xAxis, yAxis и series.
xAxis: содержит данные для оси x на графике.
yAxis: содержит данные для оси y на графике.
серия: содержит данные для построения графика. Как и значения
Эти 3 поля могут быть объектами или массивом объектов. Массив объектов можно использовать, если у вас многосерийные данные, в противном случае для выполнения работы достаточно объекта.
Сначала мы начнем с поля серии
import ReactEChart from "echarts-for-react
export default function BarChart() {
const eChartsOption {
series:{
data: [1oo, 200, 3OO, 400],
type: "bar"
}
};
return (
<div>
<ReactEChart option={eChartsOption} />
</div>
);
}
Как вы можете видеть выше, мы включили поля data и type. поле data содержит значения, которые будут использоваться для построения графика, а поле type содержит строку, которая определяет тип графика, который будет построен. поле type может содержать bar, line, pie, scatter, funnel и т.д. Ознакомьтесь с другими типами здесь https://echarts.apache.org/en/option.html#series.
После добавления вышеприведенного кода вы получите ошибку в консоли, но не волнуйтесь, мы скоро избавимся от нее😉.
Вы можете увидеть в консоли, что xAxis/yAxis, но не нашли их. Поэтому нам просто нужно добавить поля с присвоенным им пустым объектом.
import ReactEChart from "echarts-for-react";
export default function BarChart() {
const eChartsOption = {
xAxis: {},
yAxis: {},
series: {
data: [101, 200, 300, 400],
type: "bar",
},
};
return (
<div>
<ReactEChart option={eChartsOption} />
</div>
);
}
Вуаля, мы получили наш первый график с помощью Echarts.
Но вы заметили кое-что странное🤔. Первый бар имеет больше места слева, а последний бар находится вне контейнера, мы решим это прямо сейчас.
Как мы знаем, ось Y содержит числовые данные, т.е. значения, а ось X содержит категориальные данные, поэтому мы скажем echarts то же самое, указав поле type в поле xAxis и yAxis нашего объекта eChartsOption.
import ReactEChart from "echarts-for-react";
export default function BarChart() {
const eChartsOption = {
xAxis: {
type: "category",
},
yAxis: {
type: "value",
},
series: {
data: [101, 200, 300, 400],
type: "bar",
},
};
return (
<div
style={{
width: "100%",
height: "100%",
}}
>
<ReactEChart
style={{
width: "100%",
height: "100%",
}}
option={eChartsOption}
/>
</div>
);
}
Теперь наша гистограмма выглядит идеально, но она совсем не интерактивна. Сначала мы включим всплывающую подсказку, просто указав пустой объект всплывающей подсказки. Мы также можем добавить имена к нашей оси xAxis, указав поле данных в объекте xAxis.
Многосерийная диаграмма
Мы можем создать многосерийный график, используя массив объектов вместо массива полей серий.
series: [
{
data: [101, 200, 300, 400, 500, 650],
type: "bar",
},
{
data: [93, 30, 100, 230, 104, 60],
type: "line",
},
];
Сложенная столбиковая диаграмма
Мы только что создали многосерийную диаграмму, которая может быть легко преобразована в стековую диаграмму. Все, что нам нужно сделать, это просто добавить поле стека в каждый объект серии объектов
series: [
{
data: [101, 200, 300, 400, 500, 650],
type: "bar",
stack: "total",
},
{
data: [93, 30, 100, 230, 104, 60],
type: "line",
stack: "total",
},
];
Вы можете найти несколько других вариантов в песочнице, прикрепленной ниже, не стесняйтесь играть с ними.
Если вам понравилась эта статья, следите за мной, чтобы получить больше подобных статей. Я также хотел бы услышать предложения 🙂