echatsをReactでどのようにラップするか？

1年 ago
夏樹, 風
1 minute

ReactでEchartsをラップする方法はいくつかありますが、以下は一般的な方法の1つです：

  1. 最初に、Echartsライブラリをインストールしてください。
npm install echarts --save
  1. EchartsComponent.jsを日本語で表現すると、Echartsコンポーネント.jsとなります。
import React, { useEffect, useRef } from 'react';
import echarts from 'echarts';

const EchartsComponent = ({ options }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    chart.setOption(options);

    return () => {
      chart.dispose();
    };
  }, [options]);

  return <div ref={chartRef} style={{ width: '100%', height: '300px' }} />;
};

export default EchartsComponent;
  1. エチャーツコンポーネント
import React from 'react';
import EchartsComponent from './EchartsComponent';

const ParentComponent = () => {
  const options = {
    // Echarts配置项
    // ...
  };

  return (
    <div>
      <h1>使用Echarts的父组件</h1>
      <EchartsComponent options={options} />
    </div>
  );
};

export default ParentComponent;

上記の例では、EchartsComponentはEchartsのチャートオプションを設定するためのオプションパラメータを受け取ります。useRefを使用してDOMの参照を作成し、useEffectを使用してコンポーネントがマウントされたときやオプションが変更されたときにEchartsインスタンスを初期化してオプションを設定します。コンポーネントがアンマウントされるときには、return文中の関数を使用してEchartsインスタンスをクリーンアップします。

ReactでEchartsをカプセル化して、コンポーネントのpropsを介して異なるオプションを渡すことで、異なるグラフをレンダリングすることができます。

bannerAds