在React 組件中使用Echarts的範例程式碼，reactecharts

在React 組件中使用Echarts的範例程式碼，reactecharts

在完成一個需求的時候碰到一個情境需要使用柱狀圖。涉及到可視化，第一反應當然是Echarts了。平時用js載入Echarts組件很方便，但是在React中就要費下神了。各種連蒙帶猜實現了。edmo裡的

這裡我們要在自己搭建的react項目中使用ECharts，我們可以在ECharts官網上看到有一種方式是在 webpack 中使用 ECharts，我們需要的就是這種方法。

我們在使用ECharts之前要先安裝ECharts，在以往的開發模式中，我們很多使用就是把官網中的ECharts的核心js檔案匯入到我們的html或者是jsp等檔案裡面，但是在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.

最後附上：

　　　　　

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。