react-intl-mobx - CSDN

来自 : CSDN技术社区 发布时间：2021-03-25

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\';@observerclass monitorDataFlowContainer extends React.Component {//写入所有的方法、state、构造 render() { return ( div store={this.props.store} 。。。 /div @observerclass MonthGrowthTrendComponent extends React.Component {//或者直接引入组件 render() { return ( MonthGrowthTrend store={this.props.store} / @observerclass EarlyWarnRankingComponent extends React.Component { render() { return ( EarlyWarnRanking store={this.props.store} / @observerclass DistributionLogComponent extends React.Component { render() { return ( DistributionLog store={this.props.store}/ @observerexport 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\' 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 };

齐活儿！头疼

收起 展开全文