Echarts 数据统计折线图
来源：互联网 发布：命运交响曲 知乎 编辑：程序博客网 时间：2024/05/27 09:46
.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 ""; } }
阅读全文
0 0
- Echarts 数据统计折线图
- echarts动态加载折线图数据demo
- echarts动态加载折线图数据demo
- 获取动态数据到echarts-折线图
- 百度echarts使用教程(4)：echarts折线图每个折线点都显示数据
- Echarts折线图
- echarts折线图
- echarts-折线图
- echarts折线图
- echarts绘制折线图
- ECharts学习-折线图
- echarts-单折线图
- echarts-多折线图
- echarts 双折线图
- Echarts柱状折线图
- Echarts折线图模板
- ECharts折线图小结
- Echarts学习 折线图
- C#编程向SQLite数据库中正确写入DateTime类型数据
- 026-Java-017
- 欢迎使用CSDN-markdown编辑器
- Java链表来存储二叉树和（前中后序）遍历二叉树--Java版
- Android中asset文件夹和raw文件夹区别与用法
- Echarts 数据统计折线图
- cocos 单例模式 链接
- GC垃圾回收机制
- June Challenge 2017 | Xenny and Coin Rankings
- Error while updating property 'nativeBackgroundAndroid' of a view managed by:RCTView
- [YTU]_2914 ( xiaoping学构造函数)
- JQuery中的parent
- 单例
- Vue列表渲染指令v-for的索引$index报错Uncaught ReferenceError: $index is not defined
