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 ...
随机推荐
- Linux基础实验(二)
一)基础实验: 1. 新建文件a.txt,并用权限模式.权限值两种方式修改权限为rwxrwx--x 新建文件:touch a.txt 权限模式:chmod ug=rwx o=x a.tx ...
- 2018-2019-2 20165219《网络对抗技术》Exp0 Kali安装 Week1
2018-2019-2 20165219<网络对抗技术>Exp0 Kali安装 Week1 安装Kali 在官网下载,然后将解压后的文件导入 输入username和password 共享文 ...
- 【文文殿下】Manache算法-学习笔记
Manache算法 定义:是一个判断回文子串的算法,我们结合例题解释: 题目:给定一个长度为 n 的字符串 S,求其最长回文子串 一个字符串是回文的,当且仅当反转后的串与原串完全相等 分析:对于这个题 ...
- python学习笔记-练手实例
1.题目:输出 9*9 乘法口诀表. 程序分析:分行与列考虑,共9行9列,i控制行,j控制列 代码: for i in range(1,10): print ('\r') for j ...
- tf入门-卷积步长strides参数的具体解释
conv1 = tf.nn.conv2d(input_tensor,conv1_weights,strides=[1,1,1,1],padding='SAME') 这是一个常见的卷积操作,其中stri ...
- GCD 使用若干注意事项
这篇文章写的是看完 WWDC 17 - Modernizing GCD Usage 之后的笔记. 一.Parallelism & Concurrency Parallelism 指的是在多个 ...
- Windows Server2008如何打开添加IIS服务器
https://jingyan.baidu.com/article/1612d500aa4594e20e1eeefc.html
- HQL的使用和limit的替代
1.HQL不同于SQL,from必须是项目中table反转后对应的class的名字. 2.如何使用参数生成HQL语句: String hql = "from User where userI ...
- 利用scrapy-client发布爬虫的远程服务器
一.环境准备 远程服务器必须装有scapyd,我们使用的机器必须有scrapy-client(我这里是windows),并确保这两者正常安装并启动. 二.客户端准备上传 首先进入到爬虫项目的根文件夹: ...
- linux常用多线程下载工具
1.axel 下载安装yum install axel 这个软件下载速度实时显示