mvc和 Echarts报表展示 ajax前后台数据交互

控制器:

public ActionResult DataSummary()
{
shopno = ShopLogin.LoginUser.ShopNo;
List<Result> vDataSummaryList = EffectListMap(true, shopno);
View_DataSummary dataSummary = GetView_DataSummary(vDataSummaryList);
return Json(dataSummary, JsonRequestBehavior.AllowGet);
}

处理数据:
View_DataSummary GetView_DataSummary(List<Result> argDataSummaryList)
{
argDataSummaryList = argDataSummaryList.OrderBy(x => x.EffectTime).ToList();
View_DataSummary dataSummary = new View_DataSummary();
List<string> vDateTimeList = argDataSummaryList.Select(x => x.EffectTime.ToString("yyyy-MM-dd")).ToList();
dataSummary.Categories = vDateTimeList;
dataSummary.ProNum = argDataSummaryList.Select(x => x.proNum).ToList();
dataSummary.Fee = argDataSummaryList.Select(x => x.Fee).ToList();
return dataSummary;
}

处理一周的数据结果 如果有添加没有  默认为0

public List<Result> EffectListMap(bool argIsAsc, int shopno)
{
List<Result> vList = new List<Result>();
vList = BLL1.GetWeekFee_New(shopno); //获取销售数据

var da = DateTime.Now.Date.AddDays(-6);

for (DateTime currentDate = da; currentDate <= DateTime.Now.Date; currentDate = currentDate.AddDays(1))
{
var itemData = vList.FirstOrDefault(x => x.EffectTime == currentDate);
Result dataSummary = new Result()
{
proNum = 0,
Fee = 0,
EffectTime = currentDate
};
if (itemData != null) //当天有数据
{
dataSummary.proNum = itemData.proNum;
dataSummary.Fee = itemData.Fee;
dataSummary.EffectTime = itemData.EffectTime;
}
else
{
vList.Add(dataSummary);
}
}
if (argIsAsc)
{
return vList.OrderBy(x => x.EffectTime).ToList();
}
else
{
return vList.OrderByDescending(x => x.EffectTime).ToList();
}

}

处理对象的实体:

public class Result
{
public int proNum { get; set; }
public decimal Fee { get; set; }
public DateTime EffectTime { get; set; }
}

//返回的数据对象list

public class View_DataSummary
{
public List<string> Categories { get; set; }
public List<int> ProNum { get; set; }
public List<decimal> Fee { get; set; }

}

前台数据展示:

<script type="text/javascript">
//页面加载完成后获取余额
$(document).ready(function () {
$.ajax({
type: "POST",
dataType: "json",
url: "/ShopRecharge/GetMoney",
success: function (data) {
}
});

// 路径配置
require.config({
paths: {
echarts: '/areas/cps/echarts/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));

myChart.showLoading({
text: '正在努力的读取数据中...' //loading话术
});

$.get("/Shop/HomePage/DataSummary", function (data) {
myChart.hideLoading();
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['一周订单量', '一周订单佣金']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: data.Categories
}
],
yAxis: [
{
type: 'value'
}
],
series: [

{
name: '一周订单量',
type: 'line',
stack: '今天',
data: data.ProNum
},
{
name: '一周订单佣金',
type: 'line',
stack: '今天',
data: data.Fee
}
]
};
myChart.setOption(option);
});
}
);

});

</script>

html 代码:

<div style="background-color: #FFF;">
<div id="main" style="height: 400px; margin: 0 10px; padding-top: 30px;">
</div>

原文地址:https://www.cnblogs.com/fu123/p/5146322.html