[Внешняя визуализация] Как элегантно использовать ECharts в React🍉

внешний интерфейс React.js
[Внешняя визуализация] Как элегантно использовать ECharts в React🍉

предисловие

Эта статья вдохновлена ​​​​проектом компании по визуализации, который недавно был реализован. С быстрым развитием интерфейса визуализация данных в последние годы становится все более популярной. Бизнес некоторых компаний неотделим от карт, местоположений, больших данных и т. д. , поэтому визуализация данных даже стала отдельной отраслью фронтенда.Например, должности визуализатора фронтенда в районе Ханчжоу имеют не только определенный спрос и высокую зарплату,

截屏2021-08-25 下午10.57.37.png

На данный момент у нас есть много сред визуализации, из которых мы можем выбирать, например,D3,ECharts,Leaflet....так далее.

Среда визуализации, используемая в этой статье,ECharts.

Что вы узнаете после прочтения этой статьи?

  • Как собрать проект react+ts+echarts
  • Основное использование машинописного текста
  • Как использовать eCharts более безопасно и эффективно в React
  • Использование электронных диаграмм
  • Адаптивный размер диаграммы eCharts
  • Идеи проекта визуализации просветления

Адрес источника этой статьи:GitHub.com/G ex-Tuy/О…

Подготовка проекта

Стек технологий это:React+TypeScript+ECharts. Раз упоминается элегантность, то она должна быть неотделима от побега из ТС, ведь мощная система типов может сопровождать мой 🐶💩 код, что? Я не знаю TS, я не читаю, не волнуйтесь, в этой статье не делается слишком сложная проверка типов, только базовое использование в состоянии компонента (state), свойствах (props), вы можете понять, даже если вы не знаю ТС, без глупостей Хватит говорить, давайте начнем.

Официальные льготы RACT используются, raction-raction-app, но запуск по умолчанию - это обычный проект JS. Если вы хотите добавить проверку типа Tymdercript, мы можем перейти на свой складский адрес для проверки синтаксиса использования. найдено на Githubfacebook/create-react-app. найти каталогпакеты/cra-template-typescript.Вы можете увидеть команду запуска в READMEcreate-реагировать-приложение my-app --template машинописный текст. image

После сборки проекта проверьте, является ли суффикс индексного файла в src tsx вместо jsx.Если это tsx, это означает, что проект ts успешно собран, и мы можем начать наше изящное путешествие~

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

Это не имеет ничего общего с главным героем Echarts нашей статьи, автор десантника? Не волнуйтесь, давайте начнем, сначала установите Echarts.

npm i echarts

Что мне делать после установки? Конечно, это официальный пример входа, чтобы пощупать его, открыть.Официальный сайт -> Быстрый старт -> Нарисуйте простую диаграмму.

Как видите, каждой диаграмме нужен DOM в качестве контейнера.В React мы можем использовать ref для получения экземпляра DOM.

image

Обнаружено, что ссылка, которая обычно пишется, на самом деле неверна. Это роль мощного ts. Когда мы наводим на него мышку, мы можем обнаружить, что в окне подсказки много чего есть.

不能将类型“RefObject<unknown>”分配给类型“LegacyRef<HTMLDivElement> | undefined”。
不能将类型“RefObject<unknown>”分配给类型“RefObject<HTMLDivElement>”。
不能将类型“unknown”分配给类型“HTMLDivElement”。
.....

Вы можете решить эту проблему в соответствии с ее подсказками, добавьте ref для проверки типов, в этой статье не слишком много ts, используйте только простую базовую проверку типов, мы напрямую добавляем к ней :any.

eChartsRef:any= React.createRef();

Тогда ошибка исчезнет,Можно понять, что тип any не имеет проверки типов, как и обычный js. Настоящая суть не здесь, поэтому просто используйте any напрямую, на самом деле вы должны добавить проверку реального типа в соответствии с его подсказками.RefObject<HTMLDivElement>.

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

import React, { PureComponent } from "react";
import * as eCharts from "echarts";

export default class App extends PureComponent {

  eChartsRef: any = React.createRef();

  componentDidMount() {
    const myChart = eCharts.init(this.eChartsRef.current);

    let option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    myChart.setOption(option);
  }

  render() {
    return <div ref={this.eChartsRef} style={{
      width: 600,
      height: 400,
      margin: 100
    }}></div>;
  }
}

gif

Когда перед вами предстает динамический эффект иконки, вы волнуетесь?Оказывается, визуализация такая простая, а здесь у вас будет самое основное применение.

Далее, давайте начнем в центре внимания этой статьи!Как инкапсулировать динамический рендеринг компонента диаграммы в реакции и адаптировать его к мобильному терминалу.

текст

Сначала определите диаграммы, которые мы будем использовать в проекте, здесь я выбрал четыре самых основных и часто используемых диаграммы (линейный график,Тренд,круговая диаграмма,Гистограмма).

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

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

Линейный график: src/components/LineChart

import React, { useEffect, useRef } from 'react';
import { IProps } from "./type";
import * as echarts from "echarts";

const Index: React.FC<IProps> = (props) => {

    const chartRef:any = useRef();  //拿到DOM容器

    // 每当props改变的时候就会实时重新渲染
    useEffect(()=>{
        const chart = echarts.init(chartRef.current);   //echart初始化容器
        let option = {  //配置项(数据都来自于props)
            title: {
                text: props.title ? props.title : "暂无数据",
            },
            xAxis: {
                type: 'category',
                data: props.xData,
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: props.seriesData,
                type: 'line'
            }]
        };

        chart.setOption(option);
    }, [props]);

    return <div ref={chartRef} className="chart"></div>
}

export default Index;

Создайте новый type.ts в том же файле и выделите проверку типа реквизита, чтобы она была ограничена.Конечно, вы также можете написать его непосредственно в файле index.tsx, в зависимости от ваших личных предпочтений. type.ts

// 给props添加类型检查
export interface IProps {
    title: string,          //图表的标题（为string类型）
    xData: string[],        //图表x轴数据的数组（数字里面每一项都为string类型）
    seriesData: number[],   //跟x轴每个坐标点对应的数据（数字里面每一项都为number类型）
}

В соответствии с элементами конфигурации, соответствующими каждой диаграмме, выберите свойства, которые вы хотите настроить динамически, и вы можете записать их как свойства и передать их как свойства. (Например, если в проекте необходимо использовать много линейных диаграмм, но цвет линий каждой диаграммы разный, вы можете указать цвет в качестве реквизита и передать его как значение свойства.)

После инкапсуляции мы внедряем и используем его в App.tsx.

App.tsx

import React, { PureComponent } from "react";
import LineChart from "./components/LineChart/Index";
import "./App.css";
export default class App extends PureComponent {
  eChartsRef: any = React.createRef();

  state = {
    lineChartData: {
      //折线图模拟数据
      xData: [
        "2021/08/13",
        "2021/08/14",
        "2021/08/15",
        "2021/08/16",
        "2021/08/17",
        "2021/08/18",
      ],
      seriesData: [22, 19, 88, 66, 5, 90],
    },
  };

  componentDidMount() {}

  render() {
    return (
      <div className="homeWrapper">
        {/* 折线图 */}
        <div className="chartWrapper">
          <LineChart
            title="折线图模拟数据"
            xData={this.state.lineChartData.xData}
            seriesData={this.state.lineChartData.seriesData}
          />
        </div>
      </div>
    );
  }
}

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

забыл передать атрибут image

Переданный тип не соответствует проверке типа image

Эффект следующий:

gif

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

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

componentDidMount() {
    setInterval(() => {
        this.setState({
            lineChartData: {
                xData: [...this.state.lineChartData.xData, "2000/01/01"],
                seriesData: [...this.state.lineChartData.seriesData, Math.floor(Math.random() * 100)],
            }
        })
    }, 1500 );
}

gif

Таким образом можно отображать данные в реальном времени, такие как количество pv и uv в секунду и так далее. Эффект после того, как мы инкапсулируем все четыре компонента диаграммы, выглядит следующим образом.

gif

Данные первых трех диаграмм получены в результате моделирования данных в реальном времени. На последней круговой диаграмме данные записаны непосредственно в компоненте. Заинтересованные партнеры могут извлечь исходный код, чтобы реализовать его в режиме реального времени самостоятельно. Вы можете увидеть конфигурация в опциях.То, что нужно настроить, извлекается отдельно и прописывается в файле type.ts.

Адаптация мобильного терминала

Какой? echarts не делали мобильную адаптацию? Конечно нет, официальный сайт echarts представляет соответствующую оптимизацию мобильного терминала:E-charts.apache.org/this/feature. …Конечно, есть и кроссплатформенное использование.

gif

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

Не волнуйтесь, в его документе API есть такой метод, экземпляр, созданный echarts, то есть объект после echarts.init() будет иметьresizeМетоды.

Мы можем отслеживать изменения окна и звонить всякий раз, когда изменяется размер окна.resizeметод. Способ наблюдения за изменениями окна очень простwindow.onresizeВы можете добавить метод window.onresize при создании объекта компонента.

Примечание: Если на веб-странице есть только одна диаграмма, можно написать так: Если в проекте более одной диаграммы, будет ли каждый компонент диаграммы писать метод window.onresize позже? Таким образом, только последний созданный компонент будет адаптироваться к размеру экрана, потому что каждый раз, когда компонент создается, window.onresize повторно назначается новому телу функции.

Решение: мы можем написать общедоступный метод, который добавляется в массив каждый раз при создании компонента, при изменении размера экрана он перебирает каждый элемент в массиве, а затем вызывает метод изменения размера.

src/util.js

const echartsDom = [];  //所有echarts图表的数组
/**
 * 当屏幕尺寸变化时，循环数组里的每一项调用resize方法来实现自适应。
 * @param {*} eDom 
 */
export function echartsResize(eDom) {   
    echartsDom.push(eDom);
    window.onresize = () => {
        echartsDom.forEach((it)=>{
            it.resize();
        })
    };
}

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

После этого каждый график может быть адаптирован к размеру экрана ~

gif

Эпилог

В этой статье в основном рассказывается о том, как более безопасно и эффективно использовать eCharts в React. Задействованные ts являются самой базовой проверкой типов (заинтересованные студенты могут расширить ее самостоятельно), просто чтобы предоставить вам пример, когда я пишу проект eCharts Как это сделать и управляйте проектом, добро пожаловать, чтобы указать неправильное место в статье, не распыляйте большого парня, у большого парня есть лучшие идеи и идеи, приглашаем всех оставить сообщение. Спасибо за просмотр~

Категории