！！！踩了多少的坑我的天呐！！！！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
);
};齐活儿！头疼