Echarts グラフィックスを React のクラス コンポーネントにカプセル化する

まえがき: React には特別な視覚化ツール AntV がありますが、この視覚化だけに依存するのはプロジェクト開発の要件を満たすには程遠い場合があるため、最も一般的な Echarts 視覚化ツールの導入を検討してください。React での導入にはそれが必要です。このセクションでは、Echarts をカプセル化する方法を簡単に紹介します。ツールの公式 Web サイトは次のとおりです: Apache ECharts

1. まず React で空のコンポーネントを作成します

class Gauge2 extends Component{  

}
export default Gauge2;

Echarts に必要なグラフィック属性とデータを保存する準備をします。

2. Echarts で適切なグラフィックを選択し、必要に応じて依存関係を導入します。(例として基本的な折れ線グラフを取り上げます)

import React, { Component } from "react";
import * as echarts from "echarts";
import "echarts-gl";  //该依赖可不要
//以上依赖的前提是你需要下载 Echarts 的
class Gauge2 extends Component{  

}
export default Gauge2;

3. データを導入し、コンポーネント内のコードを完成させます

import React, { Component } from "react";
import * as echarts from "echarts";
import "echarts-gl";  //该依赖可不要
//以上依赖的前提是你需要下载 Echarts 在 React 中
class Gauge2 extends Component{  
     componentDidMount() {   //初始化组件，只执行一次
        this.initEcharts();
      }
     componentDidUpdate(){   // 组件更新时也会调用。
        this.initEcharts();
     }
      initEcharts() {     
        const myChart = echarts.init(   
          document.getElementById("main") as HTMLElement
        );
        myChart.setOption({  //下列数据可以直接按照可视化图里面的东西进行替换
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [150, 230, 224, 218, 135, 147, 260],
                  type: 'line'
                }
              ]
        });
    }
    render(): React.ReactNode{   //挂载
        return <div id="main" style={
   
   {width:'100px',height:'100px'}}></div>
    }
}
export default Gauge2;

レンダリング：  

 最後に: 他のグラフィックを導入する必要がある場合は、myChart.setOption({}) のデータを直接置き換えることができます。下の図の内容をコピーして貼り付けるだけです。