.net从数据库获取数据并在echarts中展示

最新推荐文章于 2024-05-31 09:39:55 发布

白斩翅

最新推荐文章于 2024-05-31 09:39:55 发布

阅读量4.4k

点赞数 12

分类专栏： c# 文章标签：数据库 ajax .net echarts

本文链接：https://blog.csdn.net/qq_43496676/article/details/111477499

版权

c# 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

.net从数据库获取数据并在echarts中展示

一．
做了两天半终于把这个搞定了，翻了好多博客，主要还是这些博客写的挺模糊的，不那么清晰，所以搞了好久。前两天基本什么没干，一直跳不进去success,第三天灵感来了直接搞好了。
从数据库获取数据并在echarts中展示步骤挺简单的，就是实现起来挺麻烦的，主要有以下几步：
1、从数据库获取数据。
2、将数据返回给前端。
3、前端接收数据并绘制柱形图。
1.从数据库获取数据
后台新建一个控制器“echartsController”控制器里写一个连接数据库方法和一个数据库获取数据方法。
代码：
private DataTable GetDataTable(string sql)
{
//连接数据库
string config = @“Data Source=localhost;Initial Catalog=company;User ID=sa;Password=123”;
try
{
using (SqlConnection conn = new SqlConnection(config))
{
//打开数据库连接
conn.Open();
}
}
catch (Exception ex)
{
this.Response.Write(“”);
}
//创建SqlDataAdapter对象并执行sql语句
SqlDataAdapter sda = new SqlDataAdapter(sql, config);
DataTable dt = new DataTable();
//将数据填充到数据表中
sda.Fill(dt);
dt.Dispose();
return dt;
}
2.从数据库获取数据并返回json格式
代码：
public JsonResult GetCharts()
{
ArrayList xAxisData = new ArrayList();
ArrayList yAxisData = new ArrayList();
System.Data.DataTable dt = new System.Data.DataTable();
var table = GetDataTable(“select 员工姓名,总工资 from dbo.test”);//此处是sql语句
for (int i = 0; i < table.Rows.Count; i++)
{
yAxisData.Add(table.Rows[i].ItemArray[1]);//提取出我们要的部分存入到数组中
xAxisData.Add(table.Rows[i].ItemArray[0]);
}
var result = new
{
name = xAxisData,
num = yAxisData
};
return Json(result,JsonRequestBehavior.AllowGet);//返回JSON数据
}

后端完整代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using System.Collections;
using System.Data;

namespace WebApplication1.Controllers
{

    public class echartsController : Controller
    {
        // GET: echarts
        public ActionResult Index()
        {
            return View();
        }
        /// <summary>
        /// 获取数据并返回到前端
        /// </summary>
        /// <returns></returns>
        public JsonResult GetCharts()
        {
            ArrayList xAxisData = new ArrayList();
            ArrayList yAxisData = new ArrayList();
            System.Data.DataTable dt = new System.Data.DataTable();
            var table = GetDataTable("select 员工姓名,总工资 from dbo.test");//此处是sql语句
            for (int i = 0; i < table.Rows.Count; i++)
            {
                yAxisData.Add(table.Rows[i].ItemArray[1]);//提取出我们要的部分存入到数组中
                xAxisData.Add(table.Rows[i].ItemArray[0]);
            }
            var result = new
            {
                name = xAxisData,
                num = yAxisData
            };      
            return Json(result,JsonRequestBehavior.AllowGet);//返回JSON数据

            
        }
        /// <summary>
        /// 连接数据库方法
        /// </summary>
        /// <param name="sql">sql语句</param>
        /// <returns></returns>
        private DataTable GetDataTable(string sql)
        {
            //连接数据库
            string config = @"Data Source=localhost;Initial Catalog=company;User ID=**;Password=***";
            try
            {
                using (SqlConnection conn = new SqlConnection(config))
                {
                    //打开数据库连接
                    conn.Open();
                    
                }
            }
            catch (Exception ex)
            {
                this.Response.Write("<script language='javascript'>alert('连接失败！')</script>");
            }
            //创建SqlDataAdapter对象并执行sql语句
            SqlDataAdapter sda = new SqlDataAdapter(sql, config);
            DataTable dt = new DataTable();
            //将数据填充到数据表中
            sda.Fill(dt);
            dt.Dispose();
            return dt;
        }
    }
}

3.前端获取数据
前端通过ajax获取数据并存到数组里
在这里插入图片描述

4.使用echarts绘制柱状图
这部分最难得就是获取数据，获取到数据再绘制就挺容易的了。从网上找个柱状图模板然后改改数据。

前端完整代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="~/Scripts/echarts.min.js"></script>
        <script src="~/Scripts/echarts.js"></script>
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">      
                    var objsx = [];
                    var objsy = [];
                            $.ajax({
                                type: "post",
                                async: false,
                                url: "/echarts/GetCharts",   
                                data: { },
                                dataType: "json",                          
                                error: function (errorMsg) { alert(errorMsg); },
                                success: function (result) {
                                    for (var i = 0; i < result.num.length; i++) {
                                        objsy[i] = JSON.parse(result.num[i]);//以特定的JSON的格式接收数字；           
                                        objsx[i] = result.name[i];//以JSON的方式接收字符串
                                    }
                                        var myChart = echarts.init(document.getElementById('main'));
                                        var option =
                                            {
                                                title: {
                                                    text: '工资表'
                                                },
                                                tooltip: {},
                                                legend: {
                                                    data: ['员工']
                                                },
                                                xAxis: {
                                                    // data: objsx
                                                    type: 'category',
                                                    data: objsx
                                                },
                                                yAxis: {
                                                    type: 'value'
                                                },
                                                series: [{
                                                    name: '薪资',
                                                    type: 'bar',
                                                    data: objsy
                                                }]
                                            };                                    
                                        // 使用刚指定的配置项和数据显示图表。
                                        myChart.setOption(option);
                                    }                       
                            });
        </script>
    </body>
</html>

数据库样式：
在这里插入图片描述
结果图

这也是我第一次用ajax来实现从前端获取数据，代码什么的可能还能简化吧，但是对我来说实现了就是最好的。
二．遇到的问题
实现过程中自然是遇到了很多问题。
1.从数据库获取数据这些都还好，主要是要把数据返回成json格式，
在这里插入图片描述
最后调试result是这样就表示获取成功。这个方法是从前台ajax的url跳进来的。

2.之前一直进不去ajax的success，后来有博客说是格式设置有问题把datatype:”json”换成datatype:”text”,这样是能进去了，但是我要json的啊，所以应该不是这个问题，但是我知道了是格式的问题，然后再调试发现返回的不是json格式，多了一部分…
在这里插入图片描述
这部分是我验证数据库连接成功的输出内容，然后我就把这部分删了。再进去就能进到successon里了。本来还想连接成功弹出个框提示一下，终究还是错付了。
这样的话错误的提示框应该也是弹不出提示框的，好在连接成功没进到错误提示框。
在这里插入图片描述
这样就是对的了。
3.提示object Object
这就是没有将数据转换成json格式
Success后的方法关键是获取后台数据，要转换成json格式数据，不过我返回的就是json格式的，忘了哪一步报这个错了，反正就是不是json格式，emmmm…应该是上一个错误也报了这个错。
在这里插入图片描述