将echarts生成的图表变为图片保存起来
一:echarts
echarts官网:https://echarts.apache.org/zh/index.html
echarts.js地址:https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js
二:将echarts生成的图表变为图片示例
1:html
<div style="width:800px;height:500px;" id="chart"> </div>
2:生成echarts图表(js),这里以柱状图为例
var chart = echarts.init(document.getElementById("chart")); var option = { animation: false, title: { text: '统计', padding: [10, 320, 0, 320] }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], name: '月份', }, tooltip : { trigger: 'item', formatter: "{a} : {c}" }, yAxis: { type: 'value', name: '数量', }, series: [{ name: '数量', data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', barWidth : 50,//柱图宽度 label: { show: true, position: 'top' }, itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#4976C5'}, {offset: 0.5, color: '#7496D3'}, {offset: 1, color: '#ECF0F9'}, ] ) }, } ] }; chart.setOption(option);
3:获取生成的柱状图的base64地址
//获取echarts图表的base64地址 var baseImage = chart.getDataURL("png");
4:将生成的base64传到后端保存起来
(1):ajax上传
$.ajax({ url: url, type: 'post', data: {image:baseImage}, success: function (json) { } });
(2):后端保存文件(以PHP为例)
$image = $request->post('image'); if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $image, $result)) { $type = $result[2]; fullPath = '图片保存地址'; $fileName = 'echarts.png';//图片保存名称 if (file_put_contents($fullPath . $fileName, base64_decode(str_replace($result[1], '', $image)))) { return '上传成功'; } else { return '图片上传失败!'; } } else{ return '无效的图片文件!'; }
(3):后端保存文件(以 C# 为例)
public void Base64ToImage(string base64) { try { base64 = base64.Replace("data:image/png;base64,", "").Replace("data:image/jgp;base64,", "").Replace("data:image/jpg;base64,", "").Replace("data:image/jpeg;base64,", "").Replace("data:image/jpng;base64,", "");//将base64头部信息替换 byte[] bytes = Convert.FromBase64String(base64); MemoryStream memStream = new MemoryStream(bytes); Image mImage = Image.FromStream(memStream); pictureBox1.Image = mImage; Bitmap bp = new Bitmap(mImage); string path = @"D:\images"; if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } DateTime now = DateTime.Now; string fileName = "1"; string filePath = path + "\\" + fileName; bp.Save(filePath, System.Drawing.Imaging.ImageFormat.Jpeg);//注意保存路径 } catch (Exception ex) { LogerHelper.CreateLogTxt($"Return base64转图片失败,错误详情: {ex.Message}"); throw; } }
(4)图片转为base64
/// <summary> /// Image 转成 base64 /// </summary> /// <param name="fileFullName"></param> public static string ImageToBase64(string fileFullName) { try { Bitmap bmp = new Bitmap(fileFullName); MemoryStream ms = new MemoryStream(); bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); byte[] arr = new byte[ms.Length]; ms.Position = 0; ms.Read(arr, 0, (int)ms.Length); ms.Close(); return Convert.ToBase64String(arr); } catch (Exception ex) { return null; } } }
原文链接:https://blog.csdn.net/huaweichenai/article/details/121125976
等风来,不如追风去。