一．
做了两天半终于把这个搞定了，翻了好多博客，主要还是这些博客写的挺模糊的，不那么清晰，所以搞了好久。前两天基本什么没干，一直跳不进去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();
}
///
/// 获取数据并返回到前端
///
///
/// 连接数据库方法
///
/// sql语句
///
3.前端获取数据
前端通过ajax获取数据并存到数组里
4.使用echarts绘制柱状图
这部分最难得就是获取数据，获取到数据再绘制就挺容易的了。从网上找个柱状图模板然后改改数据。
前端完整代码：
ECharts
数据库样式：
结果图
这也是我第一次用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…应该是上一个错误也报了这个错。
