Как легко создавать мощные визуализации с помощью Apache Echarts и React

Данные — это нефть, используйте их правильно

В современном мире визуализация является одним из наиболее эффективных и результативных способов обработки данных. Человек может эффективно проводить анализ на круговой диаграмме, а не в электронной таблице.

Допустим, у вас есть огромное количество данных о пользователях вашего программного обеспечения, но это бесполезно, если вы не можете извлечь из этих необработанных данных выводы, которые помогут вам принять лучшие бизнес-решения, а точнее «решения, основанные на данных». Хватит о контексте, ребята, давайте начнем с главной цели этой статьи — начать работу с 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",
    },
];
Войти в полноэкранный режим Выход из полноэкранного режима


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

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

Оцените статью
devanswers.ru
Добавить комментарий