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