ReactコンポーネントでEchartsを使用するための正しい姿勢の詳細な説明

この記事では主に React コンポーネントで Echarts を使用するためのサンプルコードを紹介します。編集者が非常に良いと思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

要件を完了するときに、ヒストグラムを使用する必要があるシナリオに遭遇します。視覚化に関して言えば、最初に反応するのはもちろん Echarts です。通常、JS を使用して Echarts コンポーネントをロードするのは非常に便利ですが、React では多大な労力がかかります。あらゆる種類の推測が的中しました。

edmo では、構築した React プロジェクトで ECharts を使用したいと考えています。ECharts の公式 Web サイトには、Webpack で ECharts を使用する方法があることがわかります。

ECharts を使用する前に ECharts をインストールする必要があります。これまでの開発モデルでは、ECharts のコア js ファイルを公式 Web サイトから html または jsp ファイルにインポートすることが多かったですが、反応プロジェクトでは、インストールするnode.jsのnpmコマンド:

npm install echarts --save

Echartsの例は、Echartsドキュメントで紹介されている最も単純なアプリケーションです。

render:function() {
    
  var info = 1;

    return (  
      <p className="mt15 xui-financialAnalyse-page">   
        <p className="xui-general">
          <Chart data={info} data-info={info} />
        </p>
      </p>
    )
  }

ここで Echarts コンポーネントが呼び出され、2 つの属性がそれに渡されます (データの始まり - は H5 で定義された仕様です)

var Chart = React.createClass({
  getInitialState: function() {
    this.token = Store.addListener(this.onChangeData);
    return {}
  },

  componentWillMount: function() {
    var info = this.props.data; 
    //HTML5规定自定义属性要以data-开头，这样的可以如下取
    console.log(this.props['data-info']) 
    Action.getInfo(info);
  },


   componentDidUpdate: function() {
　　　　　this.showChart(this.state.data)
   },

   onChangeData: function() {
    var data = Store.getData();
    this.setState({
      data: data['info']['data'] //后台返回的数据
    });
  },

   showChart: function(dataSet){
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title: {
        text: 'ECharts 入门示例'
      },
      color: ['#3398DB'],
      tooltip : {
        trigger: 'axis',
        axisPointer : {    
          type : 'shadow' 
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis : [
        {
          type : 'category',
          data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      series : [
        {
          name:'你好',
          type:'bar',
          barWidth: '60%',
          data: dataSet
        }
      ]
    };

    myChart.setOption(option);
   },

   render: function() {
    return (
       <p id="main" style={{width: 500, height:500}}></p>
    )
  }
});

上記は、デモ Echarts コンポーネントの完全なコードであり、主に次を使用します。さまざまな状態（3つのステータス）に応じて反応して調整する処理機能（合計5種類）。

1.componentWillMount: 実際の DOM を挿入する前にアクションを開始し、バックエンドからデータをリクエストします。

2. onChangeStore: データが変更されたときにデータを更新し、ストア内のデータ変更を監視するためのリスナーを getInitialState に追加します。

3.componentDidUpdate: データが再レンダリングされた後、showChart() メソッドをトリガーしてキャンバスを描画します。

4. showChart: Echarts の設定。具体的な設定情報については、Echarts のドキュメントを参照してください。

5. コンポーネントのライフサイクルが終了した場合は、次のコードを追加します。それ以外の場合は、エラーが報告されます。 setState(...): マウントされたコンポーネントまたはマウントされているコンポーネントのみを更新できます。これは通常、アンマウントされたコンポーネントに対して setState() を呼び出したことを意味します。未定義のコンポーネントのコードを確認してください。

レンダリング:

関連する推奨事項:

Echartsの使い方の詳細な紹介

ECharts-HTML5 Canvasに基づくJavaScriptチャートライブラリの詳細なグラフィックとテキストの説明

ECharts3は動的データ+時間軸の操作を実装します

以上がReactコンポーネントでEchartsを使用するための正しい姿勢の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。