前言

嗨，程序员（媛）们好！我是pp酱~大二学生一枚，在不断学习的路上希望遇见志同道合的的你们，创作内容不易，喜欢所分享内容，还麻烦一键三连，蟹蟹uu们

在我们的项目开发中使用Ajax进行前后端数据交互，展示统计数据是不可或缺的存在，清晰明了的统计图能在我们项目答辩中起到锦上添花的作用！话不多说，咱们直接开干！（效果如下）

一、是什么Ajax？有什么作用？

Ajax（Asynchronous JavaScript and XML） ,是异步的javascript和XML，Ajax可以使数据交互，可以从服务器获取到数据，也可以从前台把数据发送到后台服务器。

二、使用步骤

1.创建一般处理程序

由于篇长问题，这边后台基本数据获取的代码省略，我们直接看重点（敲黑板！！！）
1》添加一般处理程序步骤如下：

2》引用一个命名空间–using Newtonsoft.Json，并在一般处理程序中获取所要的后台数据。

代码如下（示例）：

    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";   //把“text/plain”改成“application/json”，将数据转化为JSON格式
            List<Hobbyer> hobbyers = HobbyBLL.GetHobbyers(); //调用三层的BLL层，拿到所有需要的数据
            string obj = JsonConvert.SerializeObject(hobbyers); //将传输的数据转化为JSON格式
            context.Response.Write(obj);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

2.复制echars图表源代码，进行数据展示

1》首先下载并引入echarts.min.js和js脚本

2》通过ajax拿到服务器数据，通过ecahrs绑定展示，这里要十分注意url的路径是否正确！！！
代码如下（示例）：

 <form id="form1" runat="server">
        <%-- 创建一个div--%>
         <div id="all" style="width:600px;height:600px; margin:0px auto;">
    </form>
    <script>
        <%-- 创建一个echars--%>
        var echar = echarts.init(document.getElementById("all"))
         <%-- 通过ajax请求一般处理程序的地址，请求成功后拿到后台数据，并赋值给变量--%>
        $.get({ url: "Handler1.ashx", success: function (res) {
                var name = []
                var num = []
                res.forEach(item => {
                    num.push(item.Num)
                    name.push(item.Name)
                })
                option = {
                    xAxis: {
                        type: 'category',
                        data: name
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: num,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };
            echar.setOption(option); //将option绑定到echars中
            }
        })
    </script>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Ajax进行前后端数据交互实现echars图表展示的使用，实现方法不唯一，重要的是拿到后台数据和url地址无误，还有很多更高级复杂ecahrs图表展示，大家可以探索一下~