關於echarts的重新加載與渲染

！！！踩了多少的坑我的天吶！！！！echarts催人命！！！！！

坑坑1：

根據返回數據加載不同的echarts組件

import React from 'react';
import {observer} from 'mobx-react';
import intl from 'react-intl-universal';
import echarts from 'echarts/lib/echarts';
import { Modal,Icon, Tooltip } from '../../../components/antd/index';
import MonthGrowthTrend from './MonthGrowthTrend';
import EarlyWarnRanking from './EarlyWarnRanking';
import DistributionLog from './DistributionLog';
// 引入柱狀圖
import  'echarts/lib/chart/bar';
// 引入提示框和標題組件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
@observer
class monitorDataFlowContainer extends React.Component {
//寫入所有的方法、state、構造
    render() {
    return (
        <div store={this.props.store} >。。。</div>
    )
  }
}

@observer
class MonthGrowthTrendComponent extends React.Component {
//或者直接引入組件
  render() {
    return (
        <MonthGrowthTrend store={this.props.store} />
    )
  }
};
@observer
class EarlyWarnRankingComponent extends React.Component {
  render() {
    return (
        <EarlyWarnRanking store={this.props.store} />
    )
  }
};
@observer
class DistributionLogComponent extends React.Component {
  render() {
    return (
        <DistributionLog store={this.props.store}/>
    )
  }
};
@observer
export default class DataFlowMonitor extends React.Component{
    。。。省略。。
    render(){
//寫一個對象引入需要的組件
        const list = {
            'sourcesystem': monitorDataFlowContainer,
            'monthdata': MonthGrowthTrendComponent,
            'earlywarning':EarlyWarnRankingComponent,
            'distributelog':DistributionLogComponent,
          }
          let showCardsList = this.props.store.showCardsList;
          var Com1 = null
          var Com2 = null
          var Com3 = null
          var Com4 = null
//倒黴需求，還得排序！！！！！
          if (showCardsList.length){
            for(let i =0 ;i<showCardsList.length;i++){
                if(showCardsList.length==1){
                  Com1 = list[showCardsList[0].namecode]
                  Com2 = null
                  Com3 = null
                  Com4 = null
                }else if( showCardsList.length==2){
                  Com1 = list[showCardsList[0].namecode]
                  Com2 = list[showCardsList[1].namecode]
                  Com3 = null
                  Com4 = null
                }else if(showCardsList.length==3){
                  Com1 = list[showCardsList[0].namecode]
                  Com2 = list[showCardsList[1].namecode]
                  Com3 = list[showCardsList[2].namecode]
                  Com4 = null
                }else{
                    Com1 = list[showCardsList[0].namecode]
                    Com2 = list[showCardsList[1].namecode]
                    Com3 = list[showCardsList[2].namecode]
                    Com4 = list[showCardsList[3].namecode]
                }
            }
          }
        return(
            <div className='monitor-div'>
                <div className='monitor-header'>
                    <div className='monitor-title-sum'>
                        <p className='monitor-title'>{this.props.store.dataFlowMonitorObj.name}</p>
                        <p className='monitor-second-title'>數據更新於{this.props.store.dataFlowMonitorObj.updatetime}</p>
                    </div>
                    <div className='monitor-setting' onClick={this.showModal}><img src='../images/monitor-setting.png'/> 設置</div>
                </div>
                <componentName />
                <div className='monitor-month-and-ranking'>

//按順序加載組件  傳入store
                    {Com1?<Com1 store={this.props.store}/>:null}
                    {Com2?<Com2 store={this.props.store}/>:null}
                    {Com3?<Com3 store={this.props.store}/>:null}
                    {Com4?<Com4 store={this.props.store}/>:null}
                </div>
               
                <Modal
                    className='monitor-modal'
                    title="今日運行狀態設置"
                    cancelText={intl.get('Cancel')}
                    okText={intl.get('OK')}
                    width={'70%'}
                    closable={false}
                    visible={this.state.showModel}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    mask={this.state.showModel}
                >
                    <div className='monitor-model-title'>
                        已展示信息
                    </div>
                    {this.showUsedCard()}
                    <div className='monitor-model-title'>
                        可添加信息
                    </div>
                    {this.showUnusedCard()}
                </Modal>
            </div>
        )
    }    
}

坑坑2：

按順序加載含有echarts的組件實現了，還要實現定時請求數據重新渲染！

echarts是個月球，踩不完的坑。。。

要知道echarts是根據id找到的容器，再繪製圖表的。而一個頁面中只允許有一個id。

找不到id容器的話，是不會繪製圖表的。

所以要先在組件加載完成之後渲染echarts

componentDidMount(){ 
        this.renderChart()
    }; 

然後在函數中要判斷是否已經有了這個id，是否還需要再次實例化！

renderChart(){ 
//這裏這裏！！！
        let myChart = echarts.getInstanceByDom(document.getElementById('monitor-data-flow')); //有的話就獲取已有echarts實例的DOM節點。
        if (myChart == null) { // 如果不存在，就進行初始化。
            myChart = echarts.init(document.getElementById('monitor-data-flow'));
        }
        $(window).resize(myChart.resize);
        // 繪製圖表 
            if(this.props.store.dataFlowXList.length){
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        show: true,
                        left: '3%',
                        right: '4%',
                        bottom:'3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        data: ['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '110','120','130'],
                        axisLine: {
                            show:false,
                            lineStyle: {
                                color: '#999999'
                            }
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data:this.props.store.dataFlowXList.slice(),
                        splitArea: {     // 網格區域
                            show: false   // 是否顯示，默認爲false
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth :'20%',
                            data:this.props.store.dataFlowYList.slice(),//[10, 20, 30, 40],
                            itemStyle:{
                                normal:{
                                    color:function(params) { 
                                        var colorList = ['#FE3653','#006FF3','#FB5893','#0CA567',"#B8860B","#FFA07A","#8B008B"];
                                        return colorList[params.dataIndex] 
                                    },
                                    opacity:'0.9'
                                },
                            },
                        }
                    ]
                },true);
            }
    }

再設定時器請求數據

componentDidMount(){
        this.store.getqryMonitor1()
        this.store.getqryMonitor2()
        this.store.getqryMonitor3()
        this.timer = setInterval(()=>{
            this.store.getqryMonitor1()
            this.store.getqryMonitor2()
            this.store.getqryMonitor3()
        },60000)
}
componentWillUnmount(){
        clearInterval(this.timer)
};

 

坑坑3：

還要能放大縮小echarts圖表呢~~~~

我喜歡全屏。

constructor(props){
        super(props);
        this.state={isFullScreen: false}}

fullScreen(){ 
        let isFullScreen=this.state.isFullScreen;
        if (!this.state.isFullScreen) {
            this.requestFullScreen();
        } else {
            this.exitFullscreen();
        }
        this.setState({
            isFullScreen:!isFullScreen
        })
    };
    requestFullScreen(){
        var dom = document.getElementById('monitorDataFlowContainer');
        if (dom.requestFullscreen) {
            dom.requestFullscreen();
        } else if (dom.mozRequestFullScreen) {
            dom.mozRequestFullScreen();
        } else if (dom.webkitRequestFullScreen) {
            dom.webkitRequestFullScreen();
        }
    };
    exitFullscreen(){
        var dom = document;
            if (dom.exitFullscreen) {
                dom.exitFullscreen();
            } else if (dom.mozCancelFullScreen) {
                dom.mozCancelFullScreen();
            } else if (dom.webkitCancelFullScreen) {
                dom.webkitCancelFullScreen();
            }
    };
    watchFullScreen(){
        const _self = this;
        document.addEventListener(
            "webkitfullscreenchange",
            function() {
                _self.setState({
                    isFullScreen: document.webkitIsFullScreen
                });
            },
            false
        );
    };

齊活兒！頭疼