在React 組件中使用Echarts

　　在完成一個需求的時候碰到一個場景需要使用柱狀圖。涉及到可視化，第一反應當然是Echarts了。平時用js加載Echarts組件很方便，但是在React中就要費下神了。各種連蒙帶猜實現了。edmo里的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. 

 

　　最后附上效果圖：