Echarts 使用asp.net +ashx+ajax 实现 饼图、柱形图后台交互

向上效果图 

前端code  

/*
 * ------------------------------------------------------------------
 * module-information：
 * ------------------------------------------------------------------
 * create
 * @date     2017-02-09
 * @author   vicm
 * ------------------------------------------------------------------
 * modify 
 * @info:
 * @vision
 * @date     2017-02-09
 * @author   vicm
 * ------------------------------------------------------------------
 */

$(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} 
{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} 
{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[] { 5, 3, 8, 9 };
        return a;
    }
    
    public object Get_echarts_pie_area_data()
    { 
     Deart sh = new Deart();
        sh.name = "上海";
        sh.value = Convert.ToInt32(100);
        Deart sh1 = new Deart();
        sh1.name = "上海1";
        sh1.value = Convert.ToInt32(200);
        
        Deart zj = new Deart();
        zj.name = "浙江";
        zj.value = Convert.ToInt32(300);

        Deart zj1 = new Deart();
        zj1.name = "浙江1";
        zj1.value = Convert.ToInt32(400);
        Deart jz = new Deart();
        jz.name = "江苏";
        jz.value = Convert.ToInt32(400);

            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(201);
        Deart sh1 = new Deart();
        sh1.name = "数据查看";
        sh1.value = Convert.ToInt32(180);

        Deart zj = new Deart();
        zj.name = "项目分配";
        zj.value = Convert.ToInt32(250);

        Deart zj1 = new Deart();
        zj1.name = "项目修改";
        zj1.value = Convert.ToInt32(401);
        Deart jz = new Deart();
        jz.name = "其他任务";
        jz.value = Convert.ToInt32(101);

        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[] { 7, 3, 8, 6 };
        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; }
  
}