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 ...
随机推荐
- WPF WindowStyle为None
当WindwoStyle为None时 窗口会出现边框,不会完全覆盖窗口 修改办法: 使用AllowsTransparency="True"即可
- C# winform中listview排序
本文解决方案是采用下面链接中的解决方案.十分感谢这篇文章的作者bright:http://blog.163.com/shensc@126/blog/static/1312896522010614103 ...
- JavaScript多个音频audio标签，点击其中一个播放时，其他的停止播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [文文殿下]基本的DP技巧
. 二进制状态压缩动态规划 对于某些情况,如果题目中所给的限制数目比较小,我们可以尝试状态压缩动态规划.例如,题目中给出数据范围\(n<=20\),这个一般情况下是一个状压DP的提示. 状态压缩 ...
- 如何实现三个div都自适应（滴滴面试题）
<div class="table"> <div class="accordant"> <div class="box& ...
- java----session
什么是session? 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),也就是说他是保存在服务端的.注意:一个浏览器独占一个session对象(默认情况下).因此,在 ...
- linux中python配置tab=4个空格，并显示行号。
vim ~/.vimrc 写入: set ts=4 set nu :wq 保存. source ~/.vimrc 使之生效.
- jQuery的隔行换色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- python 对mongodb进行压力测试
最近对mongoDB数据库进行性能分析,需要对数据库进行加压. 加压时,最初采用threading模块写了个多线程程序,测试的效果不理想. 单机读数据库每秒请求数只能达到1000次/s.而开发的jav ...
- redis-server.exe双击闪退 win10系统
博客 解决方法: 1-win+R 打开命令行 2-cd至redis目录,例如 D:\redis> 3-输入 redis-server.exe redis.windows.conf 4-若 ...