React实现打印功能，实现打印ECharts图表功能。

写在前面：由于echarts图表是动态的数据，直接打印会丢失图表数据，所以打印echarts时会先将echarts图表转换成img图片，再进行打印。

*当多次循环调用echarts图表时，请注意要动态的修改绑定div的id，不要让多个echarts图表div的id相同。

一、先创建打印页面

创建PrintBox文件夹，在其中新建index.js文件以及styles.less文件，BarChart与PieChart是自己写的图表组件。（一会给你们看这俩页面的代码）

index.js页面
小伙伴们，我这里是已经通过接口得到了要显示的数据，你们没有数据的可以自己模拟假的数据进行效果的实现。

import React from 'react';
import styles from './styles.less';
import axios from 'axios'
import {
    Button } from 'antd';
import x from "@/assets/bird/x.png"
import IPConfig from '@/constants/IPConfig'; // 接口的ip及端口地址

import BarChart from './BarChart/index'
import PieChart from './PieChart/index'

class PrintBox extends React.Component {
   
  constructor(props) {
   
    super(props);
    this.state = {
   
      display: 'none',
      month: '',
      data: [],

    };
  }
  //渲染前调用
  componentWillMount() {
   
    
  }
  
  //渲染后调用
  componentDidMount() {
   
    this.printBtn()
  }

  //打印按钮方法
  printBtn() {
   
    let api = '/bird-web/statistics/report/' 
    let myDate = new Date()
    let tYear = myDate.getFullYear();
    let tMonth = myDate.getMonth();
    let changeNum = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
    let lastMoth = tYear + '-' + tMonth;
    axios({
   
      url: IPConfig.printUrl + api + lastMoth, //请求的接口地址
      method: 'get',
    }).then(res => {
   
      console.log(res);
      let data = res.data.res
      this.setState({
   
      	display:'block',//打印区域变为块状元素显示出来
        month: changeNum[tMonth - 1],
        data: data,
      })
    }).catch(err => {
   
      console.log('失败', err)
    }).then(() => {
   
      // 总会执行

    })
  }
  // 关闭窗口按钮
  printClose() {
   
    this.setState({
   
      display:'none'//打印区域不显示
    })
    
  }
  //确认打印
  printOk() {
   
	//获取打印区域
    const print = document.getElementById('printDiv').innerHTML;
    // 把当前页面替换成要打印的内容
    document.body.innerHTML = print;
    // 打印
    window.print();
    // 刷新页面
    window.location.reload();
  }




  render() {
   
    let {
    Cordonarea, TrackPlaybackVal, radarVal } = this.state;

    return (<React.Fragment>
      <div className={
   styles.printBtnBox}>
        {
   /* 打印按钮 */}
        <Button className={
   styles.printBtn} onClick={
   this.printBtn.bind(this)} type="primary" shape="round" size="large">
          打印报告表单
        </Button>
      </div>
      <div className={
   styles.printShadow} style={
   {
    display: this.state.display }}>

      </div>

      <div className={
   styles.printAll} style={
   {
    display: this.state.display }}>
        <div className={
   styles.printTop}>