ASP.Net绑定Sql数据源用echarts图表来展示数据
这里我们需要先学会ajax请求和网页的echarts图的使用
不会的同学也没关系可以看我接下来的内容我会一步步的来讲解的
首先大家可以先从我的博客里下载一下一个免费华为数据库的sql语句来创建数据库
首先先创建一个空白解决方案
之后我们创建一个空白的asp.net的项目
在我们的项目中加一个DBHelper类
之后我们既然用到了数据库就一定会有DBHelper类下面我就写了一个DBHelper类
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace HuaWeiProject
{
public class DBHelper
{
//1,定义连接字符串
public static string connStr = "server=.;database=huawei;Integrated Security=true";
public static SqlConnection connection;
//创建连接对象并打开
public static void InitConn()
{
//1,创建连接对象
connection = new SqlConnection(connStr);
//2,打开连接
connection.Open();
}
//执行增删改的方法
public static bool ExecuteNonQuery(string sql)
{
InitConn();//连接并打开数据库
//创建Command对象
SqlCommand command = new SqlCommand(sql, connection);
//执行sql语句
int result = command.ExecuteNonQuery();
connection.Close();//关闭数据库
return result>0;
}
//执行查询
public static SqlDataReader ExecuteReader(string sql)
{
InitConn();//连接并打开数据库
SqlCommand command = new SqlCommand(sql, connection);//创建Command对象
SqlDataReader reader = command.ExecuteReader(CommandBehavior.CloseConnection);
return reader;
}
//执行查询
public static DataTable GetTable(string sql)
{
InitConn();//连接并打开数据库
//创建SqlDataAdapter对象
SqlDataAdapter adapter = new SqlDataAdapter(sql, connection);
//创建DataSet
DataSet ds = new DataSet();
//填充
adapter.Fill(ds);
return ds.Tables[0];
}
}
}
之后我这里要用到jQuery和echarts脚本
里面放我的两个js脚本：这两个脚本可以在网上找一找一下就出来了
echarts:https://echarts.apache.org/zh/index.html
jquery:https://www.jb51.net/zt/jquerydown.htm
下面我们创建一个html网页
之后就是我们的html代码了
第一个ajax请求我都写了注释了其他的都雷同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#box1 {
width: 800px;
height: 600px;
margin: 0px auto;
border: 1px solid red;
}
#tab {
float: right;
border: 1px solid aqua;
}
#charts {
width: 600px;
height: 400px;
margin: 50px auto;
border: 1px solid greenyellow;
}
li {
list-style: none;
float: left;
margin: 5px;
padding: 5px;
background-color: aquamarine;
}
li a {
text-decoration: none;
}
</style>
<script type="text/javascript">
$(function () {
$("#btnbar").click(function () {/*这里我们按钮的点击事件*/
var xAxis_Data = [];
var series_Data = [];
$.ajax({/*ajax请求*/
url: "HuaweiHandler.ashx",/*这里放我们的一般处理程序*/
dataType: 'json',/*文件类型*/
success: function (data1) {
$.each(data1, function (index, item) {/*这里相当于我们的for循环一步一步把里面的数据取出来放在我们的数组里*/
xAxis_Data.push(item.name);
series_Data.push(item.value);
})
echarts.init(document.getElementById('box')).dispose();/*echarts图初始化*/
var myChartbar = echarts.init(document.getElementById('box'));
var option = {/*数据绑定具体去看我上面发的echarts图官网*/
title: {
text: '华为部门员工表'
},
tooltip: {},
legend: {
data: ['人数']
},
xAxis: {
data: xAxis_Data
},
yAxis: {},
series: [{
name: '人数',
type: 'bar',
data: series_Data
}]
};
myChartbar.setOption(option);
}
});
});
$("#btnline").click(function () {
var xAxis_Data = [];
var series_Data = [];
$.ajax({
url: "HuaweiHandler.ashx",
dataType: 'json',
success: function (data1) {
$.each(data1, function (index, item) {
xAxis_Data.push(item.name);
series_Data.push(item.value);
})
echarts.init(document.getElementById('box')).dispose();
var myChartbar = echarts.init(document.getElementById('box'));
var option = {
title: {
text: '华为部门员工表'
},
tooltip: {},
legend: {
data: ['人数']
},
xAxis: {
data: xAxis_Data
},
yAxis: {},
series: [{
name: '人数',
type: 'line',
data: series_Data
}]
};
myChartbar.setOption(option);
}
});
});
$("#btnpie").click(function () {
$.ajax({
url: "HuaweiHandler.ashx",
dataType: 'json',
success: function (data1) {
echarts.init(document.getElementById('box')).dispose();
var myChartpie = echarts.init(document.getElementById('box'));
var option = {
title: {
text: '华为部门员工表',
left: 'center'
},
tooltip: {},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: '销量',
type: 'pie',
data: data1
}]
};
// 使用刚指定的配置项和数据显示图表。
myChartpie.setOption(option);
}
});
});
$("#btnradar").click(function () {
var renshu_Data = [];
$.ajax({
url: "HuaWeiHandler1.ashx",
dataType: 'json',
success: function (data) {
$.each(data, function (index, item) {
renshu_Data.push(item.value);
})
echarts.init(document.getElementById('box')).dispose();
var myChart = echarts.init(document.getElementById('box'));
var option;
option = {
title: {
text: '华为员工人数雷达图'
},
legend: {
data: ['预计人数', '实际人数']
},
radar: {
// shape: 'circle',
indicator: data
},
series: [{
name: '预计人数 vs 实际人数',
type: 'radar',
data: [
{
value: [5, 4, 1, 3, 7],
name: '预计人数'
},
{
value: renshu_Data,
name: '实际人数'
}
]
}]
};
myChart.setOption(option);
}
});
});
});
</script>
</head>
<body>
<div id="box1">
<div id="tab">
<ul>
<li><a href="#" id="btnbar">柱状图</a></li>
<li><a href="#" id="btnline">折线图</a></li>
<li><a href="#" id="btnpie">饼状图</a></li>
<li><a href="#" id="btnradar">雷达图</a></li>
</ul>
</div>
<div id="charts">
<div id="box" style="width: 600px;height:400px;"></div>
</div>
</div>
</body>
</html>
最后就是我们的一般处理程序了
创建出来
下面就是我们一般处理程序里面写的内容了
其中我们需要添加一个 Newtonsoft.Json.dll引用来保存我们的json数据
Newtonsoft.Json.dll:https://github.com/JamesNK/Newtonsoft.Json
这里因为我有了就没有添加了
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
namespace HuaWeiProject
{
/// <summary>
/// HuaweiHandler 的摘要说明
/// </summary>
public class HuaweiHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string sql = "select d.deptName as name,COUNT(d.deptName) value from Dept d inner join Employee e on e.DeptID=d.deptID group by d.deptName;";/*这里写我们的sql语句*/
DataTable dt = DBHelper.GetTable(sql);/*运用到我们的DBHelper类的GetTable方法*/
var str = JsonConvert.SerializeObject(dt);/*将我们的dt转化成我们的jaso数据*/
context.Response.ContentType = "application/json";/*文件类型*/
context.Response.Write(str);/*返回前端的json格式数据*/
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
最后我们看一下最终运行
最后想看最终成型的项目的可以在我的博客里用积分下载就行了
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
