ASP.NET MVC使用Echarts动态生成图表

第一步，去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的编辑器竟然不能粘贴图片保存。。。还的重来一遍上传图片。