在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
向上效果图 前端code /* * ------------------------------------------------------------------ * module-information: * ------------------------------------------------------------------ * create * @date 2017-02-09 * @author vicm<[email protected]> * ------------------------------------------------------------------ * modify * @info: * @vision * @date 2017-02-09 * @author vicm<[email protected]> * ------------------------------------------------------------------ */ $(document).ready(function () { getData(); setInterval(function () { getData(); }, 100000);//10秒定时刷新 }); var ajaxurl = "../aowei/handler/HandlerPortalEchartsPieBarData.ashx?"; function getData() { func_echarts_pie_area(); func_echarts_bar_itemAmount(); func_echarts_pie_schedule(); func_echarts_bar_latestUpdate(); } function func_echarts_pie_area() { var echarts_pie_area = echarts.init(document.getElementById('id_echarts_pie_area')); echarts_pie_area.option_pie_area = { title: { //text: '地区', subtext: '地区', x: 'center', subtextStyle: { "fontSize": 14, "fontFamily": "Microsoft YaHei", "fontWeight": "bold", "color": "black" } }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series: [ { name: '地区', type: 'pie', radius: '65%', center: ['55%', '67%'], data: [], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(255, 0, 0, 0.5)', label: { show: true }, labelLine: { show: true } } } } ] }; echarts_pie_area.setOption(echarts_pie_area.option_pie_area); //====================get 提交 //var ajaxurl_para ="operate=echarts_pie_area" //ajaxurl += ajaxurl_para; //====================get 提交 $.ajax({ type: "post", url: ajaxurl, data: { async: false, operate: "echarts_pie_area" }, dataType: "json", //返回数据形式为json success: function (result) { for (var i = 0; i < result.length; i++) { result[i].name; } echarts_pie_area.setOption({ legend: { data: name }, series: [{ data: result }] }); }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } }); } function func_echarts_bar_itemAmount() { var echarts_bar_itemAmount = echarts.init(document.getElementById('id_echarts_bar_itemAmount')); echarts_bar_itemAmount.option_bar_itemAmount = { title: { //text: '金额', subtext: '项目金额', x: 'center', subtextStyle: { "fontSize": 14, "fontFamily": "Microsoft YaHei", "fontWeight": "bold", "color": "black" } }, //color: ['#7084CD'], color: ['#2D9759'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['1-3月', '4-6月', '7-9月', '10-12月'], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value', axisLabel: { formatter: '{value}W' }, } ], series: [ { name: '项目金额', type: 'bar', barWidth: '60%', //data: [500, 100, 500, 1000] data: [] } ] }; echarts_bar_itemAmount.setOption(echarts_bar_itemAmount.option_bar_itemAmount); //====================get 提交 //var ajaxurl_para ="operate=echarts_pie_area" //ajaxurl += ajaxurl_para; //====================get 提交 $.ajax({ type: "post", url: ajaxurl, data: { async: false, operate: "echarts_bar_itemmoney" }, dataType: "json", //返回数据形式为json success: function (result) { for (var i = 0; i < result.length; i++) { result[i].name; } echarts_bar_itemAmount.setOption({ legend: { data: name }, series: [{ data: result }] }); }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } }); } function func_echarts_pie_schedule() { var echarts_pie_schedule = echarts.init(document.getElementById('id_echarts_pie_schedule')); echarts_pie_schedule.option_pie_schedule = { title: { //text: '工作安排', subtext: '工作安排', x: 'center', subtextStyle: { "fontSize": 14, "fontFamily": "Microsoft YaHei", "fontWeight": "bold", "color": "black" } }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, //legend: { // orient: 'vertical', // left: 'left', // data: ['数据审批', '数据查看', '项目分配', '项目修改', '其他任务'] //}, series: [ { name: '工作安排', type: 'pie', radius: '65%', center: ['50%', '65%'], data: [], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(255, 0, 0, 0.5)', label: { show: true }, labelLine: { show: true } } } } ] }; echarts_pie_schedule.setOption(echarts_pie_schedule.option_pie_schedule); //====================get 提交 //var ajaxurl_para ="operate=echarts_pie_area" //ajaxurl += ajaxurl_para; //====================get 提交 $.ajax({ type: "post", url: ajaxurl, data: { async: false, operate: "echarts_pie_schedule" }, dataType: "json", //返回数据形式为json success: function (result) { for (var i = 0; i < result.length; i++) { result[i].name; } echarts_pie_schedule.setOption({ legend: { data: name }, series: [{ data: result }] }); }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } }); } function func_echarts_bar_latestUpdate() { var echarts_bar_latestUpdate = echarts.init(document.getElementById('id_echarts_bar_latestUpdate')); echarts_bar_latestUpdate.option_bar_latestUpdate = { title: { //text: '最近更新', subtext: '最近更新', x: 'center', subtextStyle: { "fontSize": 14, "fontFamily": "Microsoft YaHei", "fontWeight": "bold", "color": "black" } }, color: ['green'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: ['1-3月', '4-6月', '7-9月', '10-12月'], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: 'value', axisLabel: { formatter: '{value} 个' }, } ], series: [ { name: '项目更新', type: 'bar', barWidth: '60%', data: [] } ] }; echarts_bar_latestUpdate.setOption(echarts_bar_latestUpdate.option_bar_latestUpdate); $.ajax({ type: "post", url: ajaxurl, data: { async: false, operate: "echarts_bar_latestupdate" }, dataType: "json", //返回数据形式为json success: function (result) { for (var i = 0; i < result.length; i++) { result[i].name; } echarts_bar_latestUpdate.setOption({ legend: { data: name }, series: [{ data: result }] }); }, error: function (errorMsg) { //请求失败时执行该函数 alert("图表请求数据失败!"); } }); } 后端code : <%@ WebHandler Language="C#" Class="HandlerPortalEchartsPieBarData" %> using System; using System.Web; using EntityMan; using Microsoft.SharePoint; using CodeArt.SharePoint.CamlQuery; using System.Collections.Generic; using System.Data; using System.Web.Script.Serialization; public class HandlerPortalEchartsPieBarData : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string operate = HttpUtility.UrlDecode(context.Request["operate"], System.Text.Encoding.UTF8); //标志 object returnobj = null; switch (operate.ToLower()) { case "echarts_pie_area": returnobj = Get_echarts_pie_area_data();//pie charts pie_area break; case "echarts_bar_itemmoney": returnobj = Get_echarts_bar_itemmoney_data();//bar charts itemmoney break; case "echarts_pie_schedule": returnobj = Get_echarts_pie_schedule_data();//pie charts schedule break; case "echarts_bar_latestupdate": returnobj = Get_echarts_bar_latestUpdate_data();//bar charts latestUpdate break; default: break; } string returnvalue = GetSerializeString(returnobj); context.Response.Write(returnvalue); context.Response.End(); } public object Get_echarts_bar_itemmoney_data() { double[] a = new double[] { 5, 3, 8, 9 }; return a; } public object Get_echarts_pie_area_data() { Deart sh = new Deart(); sh.name = "上海"; sh.value = Convert.ToInt32(100); Deart sh1 = new Deart(); sh1.name = "上海1"; sh1.value = Convert.ToInt32(200); Deart zj = new Deart(); zj.name = "浙江"; zj.value = Convert.ToInt32(300); Deart zj1 = new Deart(); zj1.name = "浙江1"; zj1.value = Convert.ToInt32(400); Deart jz = new Deart(); jz.name = "江苏"; jz.value = Convert.ToInt32(400); List<object> list = new List<object>(); list.Add(sh); list.Add(sh1); list.Add(zj); list.Add(zj1); list.Add(jz); return list; } public object Get_echarts_pie_schedule_data() { Deart sh = new Deart(); sh.name = "数据审批"; sh.value = Convert.ToInt32(201); Deart sh1 = new Deart(); sh1.name = "数据查看"; sh1.value = Convert.ToInt32(180); Deart zj = new Deart(); zj.name = "项目分配"; zj.value = Convert.ToInt32(250); Deart zj1 = new Deart(); zj1.name = "项目修改"; zj1.value = Convert.ToInt32(401); Deart jz = new Deart(); jz.name = "其他任务"; jz.value = Convert.ToInt32(101); List<object> list = new List<object>(); list.Add(sh); list.Add(sh1); list.Add(zj); list.Add(zj1); list.Add(jz); return list; } public object Get_echarts_bar_latestUpdate_data() { double[] a = new double[] { 7, 3, 8, 6 }; return a; } public static string GetObjectJson(object value) { return Newtonsoft.Json.JsonConvert.SerializeObject(value); } public static string GetSerializeString(object value) { JavaScriptSerializer jss = new JavaScriptSerializer(); string json = jss.Serialize(value); return json; } public bool IsReusable { get { return false; } } } public class Deart //test { public string name { get; set; } public int value { get; set; } }
|
请发表评论