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 ""; }
        }