本来要写一个生成 eChart报表添加到Excel下载的功能，百度的我真的心力交瘁，十片帖子有8篇重复的，还有两篇看不懂，自己耐下性子研究了研究，终于把这个功能实现了
里面涉及到了：JQuery回调函数，base64与图片互相转换，图片保存到本地和从本地读取图片 等知识点
使用之前首先要在 view文件引入 echart.js，最好是比较新的版本
<script src="~/Scripts/echart/echarts.js"></script>
然后添加一个div用来放置生成的 eChart 图片
<div class="row">
<div class="col-md-12">
<div class="chart">
<div id="main" style="width:100%;height:650px;padding-top:39px;"></div>
</div>
</div>
</div>然后实现生成echart 图表并添加到下载中的Excel中
思路是先在控制器(controller)中写一个方法获取各个数据来组成报表的option，然后把生成的图片在view层转成base64码传到导出Excel的方法中，再在这个方法把base64码转回成图片保存到项目制定文件夹下，并加到生成的Excel中，事后为了管理内存再删除这张图片
$("#btnExportB").click(function () {
var data1 = $("#sysDate1").val();
var data2 = $("#sysDate2").val();
var chartcode = getChartCode(data1, data2, myAjax);
});
function myAjax(data1, data2, chartcode) {
$.ajax({
url: "/现金管理账户表/导出净申赎分析表",
data: { "sysDate1": data1, "sysDate2": data2, "chartcode": chartcode },
datatype: "json",
type: "post",
success: function (data) {
if (data.length > 100)
location.href = "/Account/AuthorizeFail";
else
location.href = "../../Excels/Common/" + data;
}
});
}
function getChartCode(data1, data2, myAjax) {
$.ajax({
url: "/现金管理账户表/getCharts",
data: { "sysDate1": data1, "sysDate2": data2 },
datatype: "json",
type: "post",
async: false,
success: function (data) {
if (data.msg == "份额确认日不能为空") {
alert("份额确认日不能为空.");
}
else if (data.msg == "份额确认日开始时间不能晚于结束时间") {
alert("份额确认日开始时间不能晚于结束时间.");
}
else if (data.msg == "没有查询到相关数据") {
alert("没有查询到任何数据.");
} else {
var myChart = echarts.init(document.getElementById('main'));
//这是为了在加载图标的时候给一个标识
//myChart.showLoading({
// text: '疯狂计算中',
// effect: 'whirling'
//});
option = {
backgroundColor: '#FFFFFF',
legend: {
data: ['申购金额', '赎回金额', '七日年化收益率'],
},
xAxis: [
{
type: 'category',
data: data.dates,
}
],
yAxis: [
{
type: 'value',
name: '金额 /万元',
min: 0,
max: 1000,
interval: 100
},
{
type: 'value',
name: '七日年化收益率',
min: 6,
max: 6.5,
interval: 0.05,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
backgroundColor: '#FFFFFF',
name: '申购金额',
type: 'bar',
barWidth: 30, // 柱图宽度
barMaxWidth: 50, // 最大宽度
color: '#FF8C00',
data: data.申购金额s,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#FF8C00',
fontSize: 16
}
}
}
}
},
{
backgroundColor: '#FFFFFF',
name: '赎回金额',
type: 'bar',
color: '#6495ED',
barWidth: 30, // 柱图宽度
barMaxWidth: 50, // 最大宽度
data: data.赎回金额s,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#6495ED',
fontSize: 16
}
}
}
}
},
{
backgroundColor: '#FFFFFF',
name: '七日年化收益率',
type: 'line',
yAxisIndex: 1,
color: '#CD5555',
axisLabel: {
formatter: '{value} %'
},
data: data.七日年化收益率s,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#CD5555',
fontSize: 16
}
}
}
}
}
]
};
myChart.setOption(option);
//myChart.hideLoading();
//chartcode = myChart.getDataURL({
// type: 'png',
// pixelRatio: 1, //放大三倍下载，之后压缩到同等大小展示。解决生成图片模糊问题，后端需要再缩放回去
// backgroundColor: '#FFFFFF'
//});
//getDataURL 是把图片转成base64
chartcode = myChart.getDataURL();
console.log(chartcode)
myAjax(data1, data2, chartcode);
}
}
});
}上图是按钮点击事件，调用获取chart数据的funtion (getChartCode)，传过去两个参数和另外一个function (myAjax,这个方法才是真的下载Excel的方法，把他传递过去是把它当做回调方法传给getChartCode，获取到base64码再传给下载excel的方法)
public JsonResult getCharts(string sysDate1, string sysDate2)
{
List<string> dates = new List<string>();
List<decimal> 申购金额s = new List<decimal>();
List<decimal> 赎回金额s = new List<decimal>();
List<decimal> 七日年化收益率s = new List<decimal>();
//获取echart中要展示的数据，以JSON的形式返回
return Json(new
{
msg = "",
dates=dates.ToArray(),
申购金额s= 申购金额s.ToArray(),
赎回金额s= 赎回金额s.ToArray(),
七日年化收益率s= 七日年化收益率s.ToArray()
}, JsonRequestBehavior.AllowGet);
}然后下面就是把base64转成图片并加到Excel中的功能，其中生成Excel部分我就不写了，需要的可以看下这篇帖子
https://blog.csdn.net/qq_36730649/article/details/97612262
public string 导出净申赎分析表(string sysDate1, string sysDate2, string chartcode)
{
if (!string.IsNullOrEmpty(chartcode))
{
//设置echart图标保存到本地的位置
string picturePath = Server.MapPath(@"~/TempImages/eCharts/" + Guid.NewGuid().ToString("D") + ".jpg");
//chartcode第二部分才是系统认识的base64码
byte[] b = Convert.FromBase64String(chartcode.Split(',')[1]);
//把图片保存到本地指定文件夹下
using (Image img = Image.FromStream(new MemoryStream(b)))
{
img.Save(picturePath, ImageFormat.Jpeg);
}
//设置图片保存在excel中的位置
//其中的参数为 起始单元格的X轴像素值位置，起始单元格的Y轴像素值位置，最后单元格的X轴像素值位置，最后单元格的Y轴像素值位置，起始行，起始列，末尾行，末尾列
HSSFClientAnchor anchor = new HSSFClientAnchor(100, 100, 100, 100, 0, 8,6, 42);
//加载图片，添加到指定单元格
byte[] bytes = System.IO.File.ReadAllBytes(imgPath);
int pictureIdx = sh.Workbook.AddPicture(bytes, PictureType.PNG);
HSSFPatriarch patriarch = (HSSFPatriarch)sh.CreateDrawingPatriarch();
//把图片插到相应的位置
HSSFPicture pict = (HSSFPicture)patriarch.CreatePicture(anchor, pictureIdx);
pict.Resize();
}
}到这里，我们的功能就实现了
