首页 > 代码库 > echart 图表 在.net中生成图片的方法
echart 图表 在.net中生成图片的方法
经过中午近两个小时的努力，终于可以实现了：echart 图表 在.net中生成图片
以下源代码：
前台页面：
<!DOCTYPE html>
<html>
<head>
<title>生成图片</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<div class="maincontent">
<div id="chart0" style="height: 400px;" class="l chart w-50"></div>
</div>
<!-- ECharts单文件引入 -->
<script type="text/javascript" src="http://www.mamicode.com/statics/js/com/jquery-1.8.2.min.js"></script>
<script src="http://www.mamicode.com/statics/plugins/com/Echarts/build/dist/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: ‘/statics/plugins/com/ECharts/build/dist‘
}
});
// 使用
require(
[
‘echarts‘,
‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var datas = [
{
animation: false,//为true，则生不出完整的图片
title: {
text: ‘世界人口总量‘,
subtext: ‘数据来自网络‘
},
tooltip: {
trigger: ‘axis‘
},
legend: {
data: [‘2011年‘, ‘2012年‘]
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: [‘line‘, ‘bar‘] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: ‘value‘,
boundaryGap: [0, 0.01]
}
],
yAxis: [
{
type: ‘category‘,
data: [‘巴西‘, ‘印尼‘, ‘美国‘, ‘印度‘, ‘中国‘, ‘世界人口(万)‘]
}
],
series: [
{
name: ‘2011年‘,
type: ‘bar‘,
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: ‘2012年‘,
type: ‘bar‘,
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
}
];
$(‘.chart‘).each(function (i, n) {
var myChart = ec.init(document.getElementById(‘chart‘ + i));
// 为echarts对象加载数据
myChart.setOption(datas[i]);
var data = "http://www.mamicode.com/ImageSend=" + encodeURI(myChart.getDataURL("png"));
$.ajax({
type: "post",
url: "/ajax/save.aspx",
data: "action=saveImage&" + data,
cache: false,
success: function (msg) {
}
});
});
}
);
</script>
</body>
</html>
后台ajax代码：
using DataService.Framework.BaseFramework.Helper;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Autofac;
using DataService.Framework.Ioc;
using System.Collections;
using System.IO;
using System.Text;
public partial class ajax_save : System.Web.UI.Page
{
private string strAction = "";
public ajax_save()
{
strAction = RequestHelps.Post("action");
}
protected void Page_Load(object sender, EventArgs e)
{
if (strAction != null && strAction.Trim() != "")
{
switch (strAction)
{
case "saveImage":
SaveImage();
break;
}
}
}
/// <summary>
/// 修改问卷皮肤
/// </summary>
protected void SaveImage()
{
int returnid = 0;
string ImageSend = RequestHelps.Post("ImageSend");
ImageSend=Server.UrlDecode(ImageSend);
ImageSend = ImageSend.Replace(" ", "+");
try {
string[] url = ImageSend.Split(‘,‘);
string u = url[1];
// Base64解码
byte[] b = Convert.FromBase64String(u);
string name = "E:\\12.png";
FileHelper.ByteStreamToFile(name, b);
} catch (Exception e) {
}
System.Web.HttpContext.Current.Response.Write(returnid.ToString());
System.Web.HttpContext.Current.Response.End();
}
}
//二进制数组Byte[]生成文件
public static bool ByteStreamToFile(string createFileFullPath, byte[] streamByte)
{
if (!File.Exists(createFileFullPath))
{
FileStream fileStream = File.Create(createFileFullPath);
fileStream.Write(streamByte, 0, streamByte.Length);
fileStream.Close();
return true;
}
return false;
}
echart 图表 在.net中生成图片的方法