向上效果图

前端code

/*
* ------------------------------------------------------------------
* module-information:
* ------------------------------------------------------------------
* create
* @date 2017-02-09
* @author vicm<lcfhn168@163.com>
* ------------------------------------------------------------------
* modify
* @info:
* @vision
* @date 2017-02-09
* @author vicm<lcfhn168@163.com>
* ------------------------------------------------------------------
*/ $(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[] { , , , };
return a;
} public object Get_echarts_pie_area_data()
{
Deart sh = new Deart();
sh.name = "上海";
sh.value = Convert.ToInt32();
Deart sh1 = new Deart();
sh1.name = "上海1";
sh1.value = Convert.ToInt32(); Deart zj = new Deart();
zj.name = "浙江";
zj.value = Convert.ToInt32(); Deart zj1 = new Deart();
zj1.name = "浙江1";
zj1.value = Convert.ToInt32();
Deart jz = new Deart();
jz.name = "江苏";
jz.value = Convert.ToInt32(); 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();
Deart sh1 = new Deart();
sh1.name = "数据查看";
sh1.value = Convert.ToInt32(); Deart zj = new Deart();
zj.name = "项目分配";
zj.value = Convert.ToInt32(); Deart zj1 = new Deart();
zj1.name = "项目修改";
zj1.value = Convert.ToInt32();
Deart jz = new Deart();
jz.name = "其他任务";
jz.value = Convert.ToInt32(); 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[] { , , , };
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; } }

Echarts 使用asp.net +ashx+ajax 实现 饼图、柱形图后台交互的更多相关文章

  1. jQuery ajax get与post后台交互中的奥秘

    这两天在做关注功能模块(类似于Instagram).多处页面都需要通过一个"关注"按钮进行关注或者取消该好友的操作.一个页面对应的放一个按钮,进行操作.效率低维护性差.因此想通过j ...

  2. echarts教程-asp.net+ashx实现堆积柱状

    说说看.崔西莲夫人紧接着说. 想不到史春吉是这种人. 你会这样说倒是有趣,因为这正是我当时的感觉.这跟奈维尔的个性不合.奈维尔,就像大部分男人一样,通常都是尽量避开任何可能造成尴尬或不愉快的场面.我怀 ...

  3. Javascript 中ajax实现前台向后台交互

    第一种情况:前台传入字符串参数 后台返回json字符串.或是json数组  代码如下: 前台: $.ajax({ url: "xxx/xxx.action", data: &quo ...

  4. ASP.NET 使用 AjaxPro 实现前端跟后台交互

    使用 AjaxPro 进行交互,很多人都写过文章了,为什么还要继续老生常谈呢.因为有一些细节上的东西我们需要注意,因为这些细节如果不注意的话,那么程序会报错,而且维护性较差. 引言 一.首先,还是那句 ...

  5. 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...

  6. ASP.NET+ashx+jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  7. asp.net的ajax以及json

    asp.net的ajax以及json 来现在这家公司以前,从未接触过webform,以前在学校做的项目是php,java以及asp.net mvc的,当时asp.net mvc用的是razor引擎,所 ...

  8. 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

    什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...

  9. ASP.NET jquery ajax传递参数

    第一种:GET传递 前台 ajax   GET 传递 :即在请求的地址后面加上参数,URL地址长度有显示,安全性低 后台接收:Request.QueryString[“参数名字”]! 例如: func ...

随机推荐

  1. RabbitMq初探——消息均发

    消息均发 前言 由前文 RabbitMq初探——消息分发 可知,rabbitmq自带分发机制——消息会按顺序的投放到该队列下的多个消费者,例如1,3,5投放消费者C1,2,4,6投放消费者C2. 这就 ...

  2. 数据库访问接口(ODBC、OLE DB、ADO)

    最近在学C#的数据库编程,对于数据库接口技术这块的知识一直比较模糊,网上查了不少资料,看了几天还是朦朦胧胧的,只能做些笔记再研究了. 我们都知道,“数据库”是指一组相关信息的集合,最早的计算机应用之一 ...

  3. java—实现一个监听器HttpServletRequest的创建销毁、在线人数 (56)

    在JavaWeb中的监听器分类 在Javaweb中存在三个被监听对象: HttpServletRequest HttpSessoin ServletContext 监听者 被监听者 监听到事件对象 H ...

  4. Java50道经典习题-程序18 乒乓球赛

    题目:两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定比赛名单.有人向队员打听比赛的名单. a说他不和x比,c说他不和x,z比,请编程序找出三队赛手的名单.分析: ...

  5. layui select 禁止点击

    $('select').attr('disabled', 'disabled'); form.render('select'); 注意事项: 1. 必须写 layui.use([form]) 2. 先 ...

  6. html页面pc显示正常,在手机端适配也可以看整个页面

    <meta name="viewport" content="width=1250,initial-scale=0,maximum-scale=2"/&g ...

  7. python基础目录

    一.博客链接 1.基础操作 python基础,变量,if语句 while循环/格式化输出/ 逻辑运算/ 编码 /单位转换 列表的操作,元组,range; enumerate dict字典;dict的操 ...

  8. 第四天,同步和异常数据存储到mysql,item loader方法

    github对应代码:伯乐在线文章爬取     一. 普通插入方法 1. 连接到我的阿里云,用户名是test1,然后在navicat中新建数据库

  9. sql注入实例详解(二)

    前言 这篇文章就是一个最基本的SQl手工注入的过程了.基本上在sqlilabs上面的实验,如果知道了其中的全部知识点,都可以通过以下的步骤进行脱裤.下面的这个步骤也是其他的脱裤手段的基础.如果想要精通 ...

  10. MySql环境变量配置

    配置环境变量 前面步骤完成后安装好MySQL,为MySQL配置环境变量.MySQL默认安装在C:\Program Files下. 1)新建MYSQL_HOME变量,并配置:C:\Program Fil ...