asp.net web +三层架构实现echarts图表

en911

于 2023-05-12 18:12:52 发布

阅读量240

点赞数 1

文章标签：前端 asp.net javascript echarts

本文链接：https://blog.csdn.net/qq_56281383/article/details/130647954

版权

html

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="echars.aspx.cs" Inherits="ZhPcb.Web.echars" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
     <script src="js/jquery.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
   <div id="pie-chart" style="width: 800px;height:600px;"></div>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: 'GET',
                url: 'admin/ajax/UserHandler.ashx?param=GetEmployees',
                dataType: 'json',
                success: function (data) {
                    var chartData = data;
                    var myChart = echarts.init(document.getElementById('pie-chart'));
                    myChart.setOption({
                        title: {
                            text: '饼状图',
                            left: 'center',
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: chartData
                        }]
                    });
                },
                error: function (xhr, status, error) {
                    console.log(error);
                }
            });
        });
    </script>
   
</body>
</html>

DAL:

public  DataTable GetEmployees()
        {
            string query = "select role_type,real_name from dt_manager";

            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand(query, con))
                {
                    con.Open();
                    using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                    {

                        DataTable dt = new DataTable();
                        da.Fill(dt);
                        return dt;
                    }
                }
            }
        }

BLL:

public string GetEmployees()
        {
            DAL.OrdersDAL employeeDAL = new DAL.OrdersDAL();
            DataTable dt = employeeDAL.GetEmployees();
            List<Object> dataList = new List<object>();
            foreach (DataRow row in dt.Rows)
            {
                Dictionary<string, object> dataObject = new Dictionary<string, object>();
                dataObject.Add("name", row["real_name"].ToString());
                dataObject.Add("value", row["role_type"]);
                dataList.Add(dataObject);
            }
            string JSONString = JsonConvert.SerializeObject(dataList);
            return JSONString;
        }

一般处理程序用来接收返回值的，你也可以写一个web api

public void GetEmployees()
        {
            BLL.OrdersBLL employeeDAL = new BLL.OrdersBLL();
            string jsonString = employeeDAL.GetEmployees();

            HttpContext.Current.Response.Clear();
            HttpContext.Current.Response.Write(jsonString);
            HttpContext.Current.Response.End();
        }