詳解在React 組件中使用Echarts的正確姿勢-js教程-PHP中文網

詳解在React 組件中使用Echarts的正確姿勢

小云云

發布： 2018-05-15 09:01:00

原創

10050 人瀏覽過

本文主要介紹了在React 元件中使用Echarts的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

在完成一個需求的時候碰到一個場景需要使用長條圖。涉及到可視化，第一個反應當然是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 (  
      <p className="mt15 xui-financialAnalyse-page">   
        <p className="xui-general">
          <Chart data={info} data-info={info} />
        </p>
      </p>
    )
  }

登入後複製

這是呼叫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[&#39;data-info&#39;]) 
    Action.getInfo(info);
  },


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

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

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

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

    myChart.setOption(option);
   },

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

登入後複製

上面是完整的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.#ease check the code for the defined code for the defined code for the defined code for the defined codecom

##最後附上效果圖：