向上效果图

前端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. python--内置模块(二) os sys pickle json

    1.os模块 常用方法: os.makedirs('dirname1/dirname2') 可生成多层递归目录 os.removedirs('dirname1') 若目录为空,则删除,并递归到上一级目 ...

  2. PHP设计超级好用的文件上传处理类一 (37)

    <?php class FileUpload { private $filepath; //指定上传文件保存的路径 private $allowtype=array('gif', 'jpg', ...

  3. java中二维数组遍历

    public class Demoshuzu2 { public static void main(String[] args) {        int[][] arr2 = {{78,79,65, ...

  4. Vue 框架 笔记

    1.兼容 2.性能优化   vuejs ******作者:尤雨溪 *** *******MVVM框架: M:model层 数据层 数据的增删改查 V:view视图层 类似于html的模板 vm:vie ...

  5. LOJ#162. 快速幂 2(分块)

    题面 传送门 题解 orzljz 我们分块,设\(s=\sqrt{p}+1\),那么\(x^a\)可以拆成\((x^s)^{a/s}\)和\(x^{a\bmod s}\),\(O(s)\)预处理,\( ...

  6. 支付宝支付下载对账单bug反馈整理

    支付宝官方给广大开发朋友们,留了一个下载账单的API接口,供大家下载指定日期的账单数据.先来看下这个页面: 点我前往官方说明文档 $aop = new AopClient (); $aop->g ...

  7. 技巧方法 - CentOS6将Python2.6.6升级到Python2.7.6

    1.首先使用“python -V”命令查看python版本,我们测试主机显示的是2.6.6版,于是下面就着手将python2.6.6升级到Python2.7.6.python -V #查看python ...

  8. [BZOJ 5323][Jxoi2018]游戏

    传送门 \(\color{green}{solution}\) 它每次感染的人是它的倍数,那么我们只需要找出那些除了自己以外在\(l\), \(r\)内没有别的数是 它的约数的数,在这里称其为关键数. ...

  9. 服务器端控件同html控件的区别

    ●ASP.NET中共有几种类型的控件? 三种:1-asp.net控件(动态) 2-标准的html控件(静态) 3-标准的html控件加runat="server"属性(动态) 动态 ...

  10. 完美原创:centos7.1 从源码升级安装Python3.5.2

    (原创)完美原创:centos7.1 从源码升级安装Python3.5.2 下载Python3.5.2源码:https://www.python.org/downloads/release/pytho ...