1.用ECharts配置项手册中的toolbox.feature.saveAsImage
toolbox: {
show: true,
feature: {
saveAsImage: {
show:true,
excludeComponents :['toolbox'],
pixelRatio: 2
}
}
}
这一段一定要写在option中，这样会在图形右上角产生一个保存为图片的标识，点击即可下载图片。
2.用ECharts实例方法getDataURL
myChart.setOption(option); var picInfo = myChart.getDataURL();
图片处理类：
public class ImageClass
{
public Image ResourceImage;
private int ImageWidth;
private int ImageHeight;
public string ErrMessage;
/// <summary>
/// 类的构造函数
/// </summary>
/// <param name="ImageFileName">图片文件的全路径名称</param>
public ImageClass(string ImageFileName)
{
ResourceImage = Image.FromFile(ImageFileName);
ErrMessage = "";
}
public bool ThumbnailCallback()
{
return false;
}
/// <summary>
/// 生成缩略图重载方法1，返回缩略图的Image对象
/// </summary>
/// <param name="Width">缩略图的宽度</param>
/// <param name="Height">缩略图的高度</param>
/// <returns>缩略图的Image对象</returns>
public Image GetReducedImage(int Width, int Height)
{
try
{
Image ReducedImage;
Image.GetThumbnailImageAbort callb = new Image.GetThumbnailImageAbort(ThumbnailCallback);
ReducedImage = ResourceImage.GetThumbnailImage(Width, Height, callb, IntPtr.Zero);
return ReducedImage;
}
catch (Exception e)
{
ErrMessage = e.Message;
return null;
}
}
/// <summary>
/// 生成缩略图重载方法2，将缩略图文件保存到指定的路径
/// </summary>
/// <param name="Width">缩略图的宽度</param>
/// <param name="Height">缩略图的高度</param>
/// <param name="targetFilePath">缩略图保存的全文件名，(带路径)，参数格式：D:Images ilename.jpg</param>
/// <returns>成功返回true，否则返回false</returns>
public bool GetReducedImage(int Width, int Height, string targetFilePath)
{
try
{
Image ReducedImage;
Image.GetThumbnailImageAbort callb = new Image.GetThumbnailImageAbort(ThumbnailCallback);
ReducedImage = ResourceImage.GetThumbnailImage(Width, Height, callb, IntPtr.Zero);
ReducedImage.Save(@targetFilePath, ImageFormat.Jpeg);
ReducedImage.Dispose();
return true;
}
catch (Exception e)
{
ErrMessage = e.Message;
return false;
}
}
/// <summary>
/// 生成缩略图重载方法3，返回缩略图的Image对象
/// </summary>
/// <param name="Percent">缩略图的宽度百分比 如：需要百分之80，就填0.8</param>
/// <returns>缩略图的Image对象</returns>
public Image GetReducedImage(double Percent)
{
try
{
Image ReducedImage;
Image.GetThumbnailImageAbort callb = new Image.GetThumbnailImageAbort(ThumbnailCallback);
ImageWidth = Convert.ToInt32(ResourceImage.Width * Percent);
ImageHeight = Convert.ToInt32(ResourceImage.Height * Percent);
ReducedImage = ResourceImage.GetThumbnailImage(ImageWidth, ImageHeight, callb, IntPtr.Zero);
return ReducedImage;
}
catch (Exception e)
{
ErrMessage = e.Message;
return null;
}
}
/// <summary>
/// 生成缩略图重载方法4，返回缩略图的Image对象
/// </summary>
/// <param name="Percent">缩略图的宽度百分比 如：需要百分之80，就填0.8</param>
/// <param name="targetFilePath">缩略图保存的全文件名，(带路径)，参数格式：D:Images ilename.jpg</param>
/// <returns>成功返回true,否则返回false</returns>
public bool GetReducedImage(double Percent, string targetFilePath)
{
try
{
Image ReducedImage;
Image.GetThumbnailImageAbort callb = new Image.GetThumbnailImageAbort(ThumbnailCallback);
ImageWidth = Convert.ToInt32(ResourceImage.Width * Percent);
ImageHeight = Convert.ToInt32(ResourceImage.Height * Percent);
ReducedImage = ResourceImage.GetThumbnailImage(ImageWidth, ImageHeight, callb, IntPtr.Zero);
ReducedImage.Save(@targetFilePath, ImageFormat.Jpeg);
ReducedImage.Dispose();
return true;
}
catch (Exception e)
{
ErrMessage = e.Message;
return false;
}
}
public bool GetReducedImage(double Percent, string targetFilePath, ImageFormat imgF)
{
try
{
Image ReducedImage;
Image.GetThumbnailImageAbort callb = new Image.GetThumbnailImageAbort(ThumbnailCallback);
ImageWidth = Convert.ToInt32(ResourceImage.Width * Percent);
ImageHeight = Convert.ToInt32(ResourceImage.Height * Percent);
ReducedImage = ResourceImage.GetThumbnailImage(ImageWidth, ImageHeight, callb, IntPtr.Zero);
ReducedImage.Save(@targetFilePath, imgF);
ReducedImage.Dispose();
return true;
}
catch (Exception e)
{
ErrMessage = e.Message;
return false;
}
}
}
后台服务端：
private string strAction = "";
protected void Page_Load(object sender, EventArgs e)
{
strAction = Request["method"];
string FolderName = Request["FolderName"];
if (strAction != null && strAction.Trim() != "")
{
switch (strAction)
{
case "SaveImage":
SaveImage(FolderName);
break;
}
}
}
protected void SaveImage(string FolderName)
{
int returnid = 0;
string ImageSend = Request["ImageSend"];
ImageSend = Server.UrlDecode(ImageSend);
ImageSend = ImageSend.Replace(" ", "+");
try
{
string[] url = ImageSend.Split(',');
string u = url[1];
// Base64解码
byte[] b = Convert.FromBase64String(u);
string saveUrl = Server.MapPath("~/images/")+ DateTime.Now.ToString("yyyyMMddmmhhss")+ ".png";
System.IO.File.WriteAllBytes(saveUrl, b);
ImageClass ic = new ImageClass(saveUrl);
ic.GetReducedImage(0.7, saveUrl.Replace(".png", "sl.png"), System.Drawing.Imaging.ImageFormat.Png);
}
catch (Exception e)
{
}
System.Web.HttpContext.Current.Response.Write(returnid.ToString());
System.Web.HttpContext.Current.Response.End();
}
前端源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>echars保存图片</title>
<script src="/Jquery/jquery.min.js"></script>
<script src="/Jquery/echarts/echarts.min.js"></script>
</head>
<body>
<div id="main" style=" 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts保存图片'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var data =myChart.getDataURL();
$.ajax({
type: "post",
url: "SaveImg.aspx",
data: "method=SaveImage&ImageSend=" + data,
cache: false,
success: function (msg) { }
});
</script>
</body>
</html>
项目百度云分享地址地址：
链接：https://pan.baidu.com/s/1Xd9dKd4jfqI54mhYPEG95w
提取码：qyky