Pie图等在窗口大小发生改变时，无法响应鼠标事件了。

[pine-zhao]

import React from 'react'; import {Liquid,Donut,Gauge,Column,StateManager, Pie} from '@antv/g2plot'; import utils from '@utils'; import requestFilter from 'Services/requestFilter'; import { Modal } from '@components'; import TimeLine from '../common/chart/line/timeLine'; import { Button } from 'antd';

class UsDeployChart extends React.Component {

constructor(props) { super(props); this.state = { data:null }; }

componentDidMount(){
  this.showChart();
  window.addEventListener('resize', this.onWindowResize)

  this.state.timer=setInterval(()=>{

    this.showChart();

    }, 60*1000)
}

componentWillUnmount() {
  window.removeEventListener('resize', this.onWindowResize)

}

onWindowResize=()=>{
  // if(this.deploy){
  //   this.deploy.destroy();
  // }
  // this.showChart();
  // // this.deploy.repaint();
  // console.info("the window resize"+this.deploy);
  // // this.bindDeployDetailEvent();
}

showChart=async ()=>{
    await this.getData();
    const {data}=this.state;
    this.showUs(data);
    this.showDeploy(data);
    this.showDeployDetail(data);  
}

getData = async ( loadingOption) => { try { console.info('us deploy getData..'); var url=this.props.url; var metricId=this.props.metricId; var valueMul=this.props.valueMul; var step=this.props.step; var typeField=this.props.typeField; var valueField=this.props.valueField; const result = await utils.ajax( requestFilter({ url: url, ...loadingOption, method: 'post', data: { metricId, valueMul, step, typeField, valueField, operId:'getData'+Date.now() }, loading: true, errorPop: true, errorAutoClose: false }) );

  if (result.status == 'success') {
    const jsonResult = JSON.parse(result.data);
    this.setState({
      data:jsonResult
    });

  }
} catch (e) {console.error(e)}

};

showDeployDetail=(data)=>{

  var detailsArray;
  data.deploy.forEach(element => {
    if(element.details){
      detailsArray=element.details;
    }
  });
  if(this.deployDetail){
    this.deployDetail.changeData(detailsArray);
    return;
  }

  this.deployDetail = new Column(document.getElementById(this.props.chartId+'_deploy_detail_div'), {
    title: {
      visible: true,
      text: this.props.deployDetailTitle,

    },
    forceFit: true,
    data:detailsArray,
    padding: 'auto',
    xField: 'title',
    yField: 'value',
    meta: {
      title: {
        alias: this.props.detailNameTitle,
      },
      value: {
        alias: this.props.detailValueTitle,
      },
    },
  });

  this.deployDetail.render();

}

showUs=(data)=>{
  if(this.usChart){
    this.usChart.changeData(data);
    return;
  }

  this.usChart  = new Liquid(document.getElementById(this.props.chartId+'_us_div'), {
    title: {
      visible: true,
      text: this.props.usTitle,
      position: 'right',
      cursor:'point',
      style:{
        cursor:'point'
    }

    },
    description: {
      visible: false,
      position: 'right',
      text: '',
    },
    forceFit:true,
    radius: 2,
    pixelRatio:1,        
    min: 0,
    max: 100,
    value: data.us,
    statistic: {
      formatter: (value) => (value ).toFixed(1) + '%',
    }
  });
  this.usChart.render();
  this.bindUsEvent();
}

showDeploy=(data)=>{

  if(this.deploy){
    this.deploy.changeData(data.deploy);
    // this.deploy.repaint();
    // this.bindDeployDetailEvent();
    return;
  }

   this.deploy = new Pie(document.getElementById(this.props.chartId+'_deploy_div'), {
    forceFit: true,
    title: {
      visible: true,
      text: this.props.deployTitle,
    },
    description: {
      visible: false,
      text:'',
    },
    padding: 'auto',
    radius: 0.8,
    data:data.deploy,
    angleField: 'value',
    colorField: 'type',
    pieStyle :{
      fillOpacity:3,
      cursor:'pointer',

    },
    label: {
      visible: true,
      type: 'outer',
    },
  });

  this.deploy.render();
  // this.deploy.onStateChange();
  // this.deploy.on('click',e=>{
  //   console.info("onclice is "+e.target.attrs.origin);
  //   // const origin = e.target.attrs.origin;
  //   // var details=origin.details?origin.details:[];
  //   // this.deployDetail.changeData(details)
  // });

  this.bindDeployDetailEvent();

}

bindDeployDetailEvent=()=>{
  this.stateManager = new StateManager();

  this.deploy.bindStateManager(this.stateManager, {
    setState: [
      {
        event: 'pie:click',
        state: (e) => {
          const origin = e.target.get('origin').data;
          var details=origin.details?origin.details:[];
         this.deployDetail.changeData(details);
          const state = { name: 'type', exp: origin.type };
          return state;
        },
      },
    ],

  })
}

bindUsEvent=()=>{
  if(!this.stateManager){
    this.stateManager=new StateManager();
  }

  this.usChart.bindStateManager(this.stateManager, {
    setState: [
      {
        event: 'liquid:mousemove',
        state: (e) => {
          console.info('mouse');
          const origin = e.target.get('origin').data;
          this.setState({usLineShow:true});
          const state = { name: 'type', exp: origin.type };
          return state;
        },
      },
    ],

  })
}

render(){

    return ( 
            <div>

                <Modal
                      title={this.props.usTitle}
                      width={utils.isMobile() ? '50%' : '80%'}
                      visible={this.state.usLineShow}
                      // onOk={this.handleOk}
                      footer={null}
                      onCancel={() => {
                        this.setState({ usLineShow: false })
                      }}
                      >

                        <TimeLine hideTime={false} bordered={true}
                                        title={this.props.usTitle} url='/dash/getCmpDataByTime' type="lineArea" 
                                        metricId={this.props.cmpMetricId} fieldName={this.props.cmpField}
                                        chartId={this.props.chartId+"_usLineArea" }
                                      />
                  </Modal>

                    <div >
                          <div  style={{ width: '100%' }}>
                            <font size={3}>
                            {this.props.wholeTile}( {this.state.data ? this.state.data.time :null} )    
                               <Button type="link" onClick={()=>this.setState({usLineShow:true})}>更多</Button></font>

                              <hr style={{border:0,'background-color':'#7565',height:1}}/>
                          </div>
                          <div style={{display: 'flex'}}>
                            <div id={this.props.chartId+'_us_div'} style={{ width: "20%" }}></div>
                            <div id={this.props.chartId+'_deploy_div'} style={{ width: "30%" }}></div>
                            <div id={this.props.chartId+'_deploy_detail_div'} style={{ width: "50%" }}></div>
                          </div>
                      </div>             
                    </div>

                          );

}

}

export default UsDeployChart;

[pine-zhao]

感觉跟 这个问题有点像 https://github.com/antvis/G2Plot/issues/748

[paleface001]

已修复

[pine-zhao]

请问是在哪个版本修复了,1.0.3还是1.0.4-beta.0