第一步，去Echarts官网下载Echarts的JS插件。地址：http://echarts.baidu.com/download.html
第二步，把下载的JS引用到页面上
第三步，前台cshtml的HTML和JS
HTML：
<div style="padding: 30px; margin: 25px;border-radius:5px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(189, 189, 189) 0px 0px 10px; background: #fff;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1700px;height:650px;text-align:center"><span style="margin:0 auto;line-height:50">I'm Ready.</span></div>
</div>JS：
//查询事件
$("#btn_Search").click(function () {
try {
$.ajax({
url: '../../Echarts/Test/GetChartOption',
data: { Test1:Test1的值,Test2:Test2的值},
type: "POST",
dataType: "json",
async: false,
success: function (data) {
//没有数据时提示
if (data.hasOwnProperty("type")) {
dialogMsg(data.message, 0);
return;
}
var series = JSON.parse(data.Series.series);
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading({
text: '疯狂计算中',
effect: 'whirling'
});
option = {
title: {
text: "Echarts在ASP.NET MVC下动态生成图表",
subtext: "来自5653325的的博客"
},
tooltip: {
trigger: 'axis'
},
legend: {
data: data.legend.data
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.xAxis.data
},
yAxis: {
type: 'value',
splitNumber: 10,
axisLabel: {
formatter: '{value} '
}
},
series: series
};
//给每个值设定相同的 显示最低、最高和平均值的线条
$(series).each(function (u) {
this.markPoint = {
data: [
{ type: 'max', name: '最高成绩' },
{ type: 'min', name: '最低成绩' }
]
};
this.markLine = {
data: [
{ type: 'average', name: '平均值' },
[{
symbol: 'none',
x: '93%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
};
});
myChart.setOption(option);
myChart.hideLoading();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
dialogMsg(errorThrown, -1);
}
});
}
catch (ex) {
dialogMsg("请求失败，可能是您掉线了。请刷新页面后重试", 0);
}
});第四歩，后台Controller中的代码
/// <summary>
/// 返回Echarts的option数据
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult GetChartOption(string Test1, string Test2)
{
//根据条件 组合成查询语句，从成绩表里取得数据
IEnumerable<ChengJiEntity> IEnChengJiList = bll.GetList(Test1, Test2);
if (IEnChanceList == null || IEnChanceList.Count() == 0)
{
return Error("没有数据");
}
#region 生成Echarts数据
List<string> Days = new List<string>();
//日期，X轴底部展示
foreach (ChengJiEntity c in IEnChanceList)
{
if (!Days.Contains(c.SourceId.ToShortDateString()))
{
Days.Add(c.SourceId.ToShortDateString());
}
}
//折线图上部项目名称，用名称进行GroupBy分组得到唯一名称
List<IGrouping<string, ChengJiEntity>> ChengJiList = new List<IGrouping<string, ChengJiEntity>>();
ChengJiList = IEnChengJiList.GroupBy(x => x.FullName).ToList();
dynamic sp;//一个动态的类，省得要去定义Model，.NET4.0以上支持
List<dynamic> LL = new List<dynamic>();//Y轴上折现的数值列表[1,2,3,4,5]这样
List<int> LV;//每个Y轴上的数值
List<string> Legend = new List<string>();//展示名称 如['成绩一','成绩二']
//便利循环得到名称和每个名称的所有值
foreach (IGrouping<string, ChengJiEntity> s in ChengJiList)
{
Legend.Add(s.Key);
List<ChengJiEntity> CL = new List<ChengJiEntity>();
//得到此名称下的查询到的所有信息，并取得值
CL = IEnChengJiList.Where(x => x.FullName == s.Key).OrderBy(x => x.AddDate).ToList();
LV = new List<int>();
foreach (string day in Days)
{
//根据天数生成X轴底部说明，并且在当前日期没有值的Y轴上的数据进行补0操作
ChengJiEntity DayChance = new ChengJiEntity();
DayChance = CL.Where(x => x.FullName == s.Key && x.AddDate.ToShortDateString() == day).FirstOrDefault();
if (DayChance == null || DayChance.SuccessRate == null)
{
LV.Add(0);
}
else
{
LV.Add(Decimal.ToInt32((decimal)DayChance.FenShu));
}
}
sp = new ExpandoObject();
sp.name = s.Key;
sp.type = "line";
sp.data = LV.ToArray();
LL.Add(sp);
}
#endregion
return Json(new { xAxis = new { data = Days.ToArray() }, legend = new { data = Legend.ToArray() }, Series = new { series = JsonConvert.SerializeObject(LL) }});
}
第五步，前台运行结果展示。
擦，CSDN的编辑器竟然不能粘贴图片保存。。。还的重来一遍上传图片。
