Echarts 使用asp.net +ashx+ajax 实现 饼图、柱形图后台交互
向上效果图
前端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 实现 饼图、柱形图后台交互的更多相关文章
- jQuery ajax get与post后台交互中的奥秘
这两天在做关注功能模块(类似于Instagram).多处页面都需要通过一个"关注"按钮进行关注或者取消该好友的操作.一个页面对应的放一个按钮,进行操作.效率低维护性差.因此想通过j ...
- echarts教程-asp.net+ashx实现堆积柱状
说说看.崔西莲夫人紧接着说. 想不到史春吉是这种人. 你会这样说倒是有趣,因为这正是我当时的感觉.这跟奈维尔的个性不合.奈维尔,就像大部分男人一样,通常都是尽量避开任何可能造成尴尬或不愉快的场面.我怀 ...
- Javascript 中ajax实现前台向后台交互
第一种情况:前台传入字符串参数 后台返回json字符串.或是json数组 代码如下: 前台: $.ajax({ url: "xxx/xxx.action", data: &quo ...
- ASP.NET 使用 AjaxPro 实现前端跟后台交互
使用 AjaxPro 进行交互,很多人都写过文章了,为什么还要继续老生常谈呢.因为有一些细节上的东西我们需要注意,因为这些细节如果不注意的话,那么程序会报错,而且维护性较差. 引言 一.首先,还是那句 ...
- 两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- ASP.NET+ashx+jQuery动态添加删除表格
aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...
- asp.net的ajax以及json
asp.net的ajax以及json 来现在这家公司以前,从未接触过webform,以前在学校做的项目是php,java以及asp.net mvc的,当时asp.net mvc用的是razor引擎,所 ...
- 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能
什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...
- ASP.NET jquery ajax传递参数
第一种:GET传递 前台 ajax GET 传递 :即在请求的地址后面加上参数,URL地址长度有显示,安全性低 后台接收:Request.QueryString[“参数名字”]! 例如: func ...
随机推荐
- RabbitMq初探——消息均发
消息均发 前言 由前文 RabbitMq初探——消息分发 可知,rabbitmq自带分发机制——消息会按顺序的投放到该队列下的多个消费者,例如1,3,5投放消费者C1,2,4,6投放消费者C2. 这就 ...
- 数据库访问接口(ODBC、OLE DB、ADO)
最近在学C#的数据库编程,对于数据库接口技术这块的知识一直比较模糊,网上查了不少资料,看了几天还是朦朦胧胧的,只能做些笔记再研究了. 我们都知道,“数据库”是指一组相关信息的集合,最早的计算机应用之一 ...
- java—实现一个监听器HttpServletRequest的创建销毁、在线人数 （56）
在JavaWeb中的监听器分类 在Javaweb中存在三个被监听对象: HttpServletRequest HttpSessoin ServletContext 监听者 被监听者 监听到事件对象 H ...
- Java50道经典习题-程序18 乒乓球赛
题目:两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人.已抽签决定比赛名单.有人向队员打听比赛的名单. a说他不和x比,c说他不和x,z比,请编程序找出三队赛手的名单.分析: ...
- layui select 禁止点击
$('select').attr('disabled', 'disabled'); form.render('select'); 注意事项: 1. 必须写 layui.use([form]) 2. 先 ...
- html页面pc显示正常，在手机端适配也可以看整个页面
<meta name="viewport" content="width=1250,initial-scale=0,maximum-scale=2"/&g ...
- python基础目录
一.博客链接 1.基础操作 python基础,变量,if语句 while循环/格式化输出/ 逻辑运算/ 编码 /单位转换 列表的操作,元组,range; enumerate dict字典;dict的操 ...
- 第四天，同步和异常数据存储到mysql，item loader方法
github对应代码:伯乐在线文章爬取 一. 普通插入方法 1. 连接到我的阿里云,用户名是test1,然后在navicat中新建数据库
- sql注入实例详解（二）
前言 这篇文章就是一个最基本的SQl手工注入的过程了.基本上在sqlilabs上面的实验,如果知道了其中的全部知识点,都可以通过以下的步骤进行脱裤.下面的这个步骤也是其他的脱裤手段的基础.如果想要精通 ...
- MySql环境变量配置
配置环境变量 前面步骤完成后安装好MySQL,为MySQL配置环境变量.MySQL默认安装在C:\Program Files下. 1)新建MYSQL_HOME变量,并配置:C:\Program Fil ...