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="width: 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