Echarts 数据统计折线图

.aspx

<script src="../js/jquery-1.9.1/jquery.min.js"></script> <script src="../js/ECharts/echarts.js"></script> //Echarts官网数据 <script type="text/javascript"> function InitialReport(data,lastdata,currentyear,lastyear) { InitialReasonReport(data, lastdata, currentyear, lastyear); } function InitialReasonReport(data, lastdata, currentyear, lastyear) { var containerID = '<%=contentReportData.ClientID %>'; //var containerID = 'main'; data = eval(data); lastdata = eval(lastdata); //当前年的数据 var MData = $.map(data, function (obj) { return obj.M; }); //月份 var PassRateData = $.map(data, function (obj) { return obj.PassRate; }); var goalData = $.map(data, function (obj) { return obj.QualityGoal; }) var NewMData = []; for (var i = 0; i < MData.length; i++) { var temp = { value: MData[i] }; NewMData.push(temp); } var NewPassRateData = []; for (var i = 0; i < PassRateData.length; i++) { var tempP = { value: PassRateData[i] }; NewPassRateData.push(tempP); } //前一年的数据 var LPassRateData = $.map(lastdata, function (obj) { return obj.PassRate; }); var LNewPassRateData = []; for (var i = 0; i < LPassRateData.length; i++) { var tempP = { value: LPassRateData[i] }; LNewPassRateData.push(tempP); } //路径配置 require.config({ paths: { echarts: "../js/Echarts" } }); //使用 require( [ 'echarts', 'echarts/chart/pie', 'echarts/chart/line', 'echarts/chart/bar' ], function (ec) { //基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById(containerID)); option = { title: { text: '阀门密封一次试压合格率折线图', subtext: ''+currentyear+'' + '年', x: 'left' }, tooltip: { trigger: 'axis', //formatter: "{a} <br/>{b} : {c}%" formatter: function (p) { var res = p[0].name + '<br/>'; res += p[0].seriesName + ' : ' + p[0].value + '%<br/>'; res += p[1].seriesName + ' : ' + p[1].value + '%'; return res; } }, legend: { data: [''+currentyear+'' + '年', ''+lastyear+'' + '年','目标'] }, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: NewMData }, yAxis: { type: 'value', axisLabel: { formatter: '{value} %' } }, series: [ { name: ''+currentyear+'' + '年', type: 'line', data: NewPassRateData, itemStyle: { normal: { label: { show: true, position: 'top', formatter: function (p) { return p.value + '%'; } } } }, //markPoint: { // data: [ // { type: 'max', name: '最大值' }, // { type: 'min', name: '最小值' } // ] //}, //markLine: { // data: [ // { type: 'average', name: '平均值' } // ] //} }, { name: ''+lastyear+'' + '年', type: 'line', data: LNewPassRateData, itemStyle: { normal: { label: { show: true, position: 'top', formatter: function (p) { return p.value + '%'; } } } }, //markPoint: { // data: [ // { name: '最低', value: 0, xAxis: 1, yAxis: 0 } // ] //}, //markLine: { // data: [ // { type: 'average', name: '平均值' }, // [{ // symbol: 'none', // x: '90%', // yAxis: 'max' // }, { // symbol: 'circle', // label: { // normal: { // position: 'start', // formatter: '最大值' // } // }, // type: 'max', // name: '最高点' // }] // ] //} }, { name: '目标', type: 'line', data: goalData, itemStyle: { normal: { label: { show: true, position: 'down', formatter: function (p) { return p.value + '%'; } } } }, } ] }; myChart.setOption(option); } ); } </script> .aspx.cs

this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "", "<script>InitialReport('" + LoadGetLineChartsData() + "','" + LoadGetLineChartsLastData() + "','" + ddlYear.SelectedValue.ToString() + "','" + (Convert.ToInt32(ddlYear.SelectedValue) - 1).ToString() + "');</script>", true); //data,lastdata,currentyear,lastyear public string LoadGetLineChartsData() { string year = ddlYear.SelectedValue.ToString(); SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@ActionType",SqlDbType.NVarChar,100), new SqlParameter("@Year",SqlDbType.NVarChar,100) }; parm[0].Value = "CurrentYear"; parm[1].Value = year; DataSet ds = new DataSet(); ds = DAL.SqlHelper.ExecuteDataSetProducts("存储过程名称", parm); if (ds != null && ds.Tables.Count > 0) { DataTable dt = ds.Tables[0]; return JsonConvert.SerializeObject(dt); } else { return ""; } } public string LoadGetLineChartsLastData() { string year = ddlYear.SelectedValue.ToString(); SqlParameter[] parm = new SqlParameter[] { new SqlParameter("@ActionType",SqlDbType.NVarChar,100), new SqlParameter("@Year",SqlDbType.NVarChar,100) }; parm[0].Value = "LastYear"; parm[1].Value = year; DataSet ds = new DataSet(); ds = DAL.SqlHelper.ExecuteDataSetProducts("存储过程名称", parm); if (ds != null && ds.Tables.Count > 0) { DataTable dt = ds.Tables[0]; return JsonConvert.SerializeObject(dt); } else { return ""; } }