页面WebForm.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm.aspx.cs" Inherits="WebApplication1.WebForm" %>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- ECharts单文件引入 -->
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 400px">
</div>
<script src="Scripts/echarts.js" type="text/javascript"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
$.ajax({
type: "POST",
dataType: "json",
url: "WebForm.aspx?action=getUserName",
async: false,
success: function (data) {
var name = [];
var age = [];
for (var i = 0; i < data.length; i++) {
name[i] = data[i].name;
age[i] = data[i].data;
}
var option = {
tooltip: {
show: true
},
legend: {
data: ['销量']
},
xAxis: [
{
type: 'category',
data: name
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "销量",
"type": "bar",
"data": age
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
});
}
);
</script>
</body>
WebForm.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
namespace WebApplication1
{
public partial class WebForm : System.Web.UI.Page
{
protected readonly string ConnCRB = ConfigurationManager.ConnectionStrings["CRBConnectionString"].ToString().Trim();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
String action = Request["action"];
// string action = "getUserName";
if (!String.IsNullOrEmpty(action))
{
Response.Clear();
switch (action)
{
case "getUserName": Response.Write(v()); break;
}
Response.End();
return;
}
}
}
public string v() {
string strSql = "select Sname,Sage from Student";
SqlDataReader sdr = ExecuteReader(ConnCRB, CommandType.Text, strSql, null);
List<Series> t = new List<Series>();
while (sdr.Read())
{
Series item = new Series();
item.name = sdr["Sname"].ToString();
item.data = sdr["Sage"].ToString();
item.type = "bar";
t.Add(item);
}
JavaScriptSerializer serialize = new JavaScriptSerializer();
return serialize.Serialize(t);
}
protected SqlDataReader ExecuteReader(string connectionString, CommandType cmdType, string cmdText, params SqlParameter[] commandParameters)
{
SqlCommand cmd = new SqlCommand();
SqlConnection conn = new SqlConnection(connectionString);
if (conn.State != ConnectionState.Open)
conn.Open();
PrepareCommand(cmd, conn, null, cmdType, cmdText, commandParameters);
SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
cmd.Parameters.Clear();
return rdr;
}
private void PrepareCommand(SqlCommand cmd, SqlConnection conn, SqlTransaction trans, CommandType cmdType, string cmdText, SqlParameter[] cmdParms)
{
cmd.Connection = conn;
cmd.CommandText = cmdText;
if (trans != null)
cmd.Transaction = trans;
cmd.CommandType = cmdType;
if (cmdParms != null)
{
foreach (SqlParameter parm in cmdParms)
cmd.Parameters.Add(parm);
}
}
public class Series
{
public string name
{
get;
set;
}
public string type
{
get;
set;
}
public string data
{
get;
set;
}
}
}
}