将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