Echarts怎么在React 組件中使用

今天就跟大家聊聊有關Echarts怎么在React 組件中使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

使用node.js的npm命令安裝：

npm install echarts --save

Echarts的例子就是Echarts文檔上介紹的最簡單的應用。

render:function() {
    
  var info = 1;

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

這是調用Echarts組件的地方，給里面傳了2個屬性（data-開頭是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 (
       <div id="main" style={{width: 500, height:500}}></div>
    )
  }
});

上面是完整的demo Echarts組件的代碼，主要是利用了React根據不同狀態（3種狀態）提供的處理函數（一共有5種）。

1、componentWillMount：在插入真實DOM之前發起Action，向后端請求數據。

2、onChangeStore：在數據變更的時候更新數據，并在getInitialState中加入監聽Store中數據變化的監聽器。

3、componentDidUpdate：在數據被重新渲染之后，觸發showChart()方法繪制canvas。

4、showChart：配置Echarts，具體配置信息可以參考Echarts文檔

5、如果組件生命周期結束，那么要加上如下代碼：

  componentWillUnmount: function() {
    this.token.remove();
  },

否則會報錯： Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

最后附上效果圖：

看完上述內容，你們對Echarts怎么在React 組件中使用有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。