bizCharts图表添加保存为图片按钮

1.初始化state。

 state = {
    chartIns:null,
  };

2.在需要下载的Chart处添加函数,添加保存图表按钮。

<Button type="primary" onClick={this.saveImg}>
            保存图表
 </Button>
<Chart  height={400} data={data}  scale={cols} forceFit
 onGetG2Instance={chartIns => {
 this.setState({
      chartIns:chartIns
  })
}}

3.获取图片

  saveImg =()=>{
    const chartIns = this.state.chartIns;
    // (1)bizcharts 提供下载接口
    // chartIns.downloadImage();       
    // (2)更改下载图片背景以及名称,格式
    const canvas = document.createElement('canvas');
    canvas.height = 350;
    canvas.width = 1000;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(chartIns.get('canvas')._cfg.el, 0, 0);
    var image = canvas.toDataURL("image/jpeg");
    var $a = document.createElement('a');
    $a.setAttribute("href", image);
    $a.setAttribute("download",'分行业累计完成投资');
    $a.click();
  }