在React 組件中使用Echarts的示例代碼

更新時(shí)間：2017年11月08日 09:38:48 作者：悠悠洛

本篇文章主要介紹了在React 組件中使用Echarts的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在完成一個(gè)需求的時(shí)候碰到一個(gè)場(chǎng)景需要使用柱狀圖。涉及到可視化，第一反應(yīng)當(dāng)然是Echarts了。平時(shí)用js加載Echarts組件很方便，但是在React中就要費(fèi)下神了。各種連蒙帶猜實(shí)現(xiàn)了。edmo里的

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

我們?cè)谑褂肊Charts之前要先安裝ECharts，在以往的開發(fā)模式中，我們很多使用就是把官網(wǎng)中的ECharts的核心js文件導(dǎo)入到我們的html或者是jsp等文件里面，但是在react項(xiàng)目中，我們可以直接使用node.js的npm命令安裝：

npm install echarts --save

Echarts的例子就是Echarts文檔上介紹的最簡(jiǎn)單的應(yīng)用。

render:function() {
    
  var info = 1;

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

這是調(diào)用Echarts組件的地方，給里面?zhèn)髁?個(gè)屬性（data-開頭是H5定義的規(guī)范）

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

  componentWillMount: function() {
    var info = this.props.data; 
    //HTML5規(guī)定自定義屬性要以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'] //后臺(tái)返回的數(shù)據(jù)
    });
  },

   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根據(jù)不同狀態(tài)（3種狀態(tài)）提供的處理函數(shù)（一共有5種）。

1、componentWillMount：在插入真實(shí)DOM之前發(fā)起Action，向后端請(qǐng)求數(shù)據(jù)。

2、onChangeStore：在數(shù)據(jù)變更的時(shí)候更新數(shù)據(jù)，并在getInitialState中加入監(jiān)聽Store中數(shù)據(jù)變化的監(jiān)聽器。

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

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

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

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

否則會(huì)報(bào)錯(cuò)： 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.

最后附上效果圖：