您的当前位置:首页>全部文章>文章详情

用ECharts的getDataURL方法自动下载Chart图到服务器

发表于:2021-08-26 16:36:45浏览:1473次TAG: #Chart #图表

最近做的项目需要结合ECharts生成的图表生成海报分享,海报量有数据分析图,如折线图,柱状图,散点图等。综合考虑之后,选择了目前已经很成熟的也很流行的ECharts库出图,然后自动下载到服务器,再合成海报。

ECharts一个纯 Javascript 的图表库,它提供了绘制各种图形的方法方法,几乎囊括了所有的二维图形,用起来也很是方便,还提供了图片下载的功能。这里我主要说的是图片自动下载到服务器。

技术栈:ECharts+ThinkPHP

首先,我们先在某页面生成想要的chart图。

js代码生成chart图:

var ops= {
    color:["#1AAD19","#1890FF"],
	animation : false,
    grid: {
          left: '10px',
          right: '20px',
          bottom: '20px',
          top: '60px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          show: true,
        },
        legend: {
            data: ["今日", "昨日"]
        },
        xAxis: [{
            type: "category",
            boundaryGap: !1,
            data: xData
        }],
        yAxis: [{
            type: "value"
        }],
        series: [{
            name: "今日",
            type: "line",
            smooth: !0,
            itemStyle: {
                normal: {
                    areaStyle: {
                        type: "default",
                        opacity:0.2
                    }
                }
            },
            data: yData1
        }, {
            name: "昨日",
            type: "line",
            smooth: !0,
            itemStyle: {
                normal: {
                    areaStyle: {
                        type: "default",
                        opacity:0.2
                    }
                }
            },
            data: yData2
        }]
  }
  chartView.setOption(ops);

然后用getDataURL得到图片信息,注意,getDataURL仍然要放在setOption方法生成一个简单的图形之后,现在得到的picInfo是一串base64信息。

ajax请求后端生成图片方法:

var picInfo = chartView.getDataURL();
if(picInfo){
  $.ajax({
    type: "post",
    data: {
      baseimg: picInfo
    },
    url: '/admin/api/get_chart_pic',
    async: true,
    success: function(data) {
      console.log(picInfo);
    },
    error: function(err){
      console.log('图片保存失败');
    }
  });
}


然后设法将得到的图像信息picInfo用Ajax传递到后台处理,这用的是thinkphp框架,因此,以thinkphp处理为例:

新建一个方法,接收Ajax传递到后台的信息,将base64转化为图片保存。先判断picInfo是否存在,存在则传递到后台,代码如下:

php接受数据并处理生成图片:

  //保存chart图
  public function get_chart_pic()
	{
		$param = get_params();
		$picInfo = $param['baseimg'];
		$streamFileRand = date('YmdHis').rand(1000,9999); //图片名
		$picType ='.png';//图片后缀
		$path = get_config('filesystem.disks.public.url');//保存图片位置
		$streamFilename = CMS_ROOT . "public/storage/".$streamFileRand .$picType; //图片保存地址
		preg_match('/(?<=base64,)[\S|\s]+/',$picInfo,$picInfoW);//处理base64文本
		file_put_contents($streamFilename,base64_decode($picInfoW[0]));//文件写入
		return to_assign(1, $streamFilename);
}

到这里,测试一下成功保存图片到自己想要的位置了。另外要注意的是,如果看到一个空的坐标轴,那么可能是动画效果产生的后果,animation决定是否开启动画,关闭即可,在echart的option中加入:

animation : false,

完美,得到的图形可以正确显示了,最后,来张图秀一下。

11.png