后台:Test01.ashx.cs:从数据库获取数据,通过HTTP请求(HttpContext)实现和前台数据传递json数据
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Serialization;
namespace SSF_Echarts_WebApp_01
{
/// <summary>
/// Summary description for Test011
/// </summary>
public class Test011 : IHttpHandler
{
SqlConnection con = new SqlConnection("Server=.\\sqlexpress;User Id=sa;Pwd=123456;DataBase=study_01");
DataSet ds = new DataSet();
SqlDataAdapter adapter = new SqlDataAdapter();
JavaScriptSerializer jsS = new JavaScriptSerializer();
List<object> lists = new List<object>();
//Series seriesObj = new Series();
string result = "";
public void ProcessRequest(HttpContext context)
{
//获取一同发送过来的参数
//string command = context.Request["cmd"];
context.Response.ContentType = "text/plain";
//用来传回去的内容
//context.Response.Write("Hello World");
Get_Data01(context);
}
public void Get_Data01(HttpContext context)
{
string sql = @"select Month, data from Table_Echarts_Test_01 where ID<11";
ds = GetDataFromDatabase(sql);
lists = new List<object>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
var obj = new { Month = dr["Month"], data = dr["data"] };
lists.Add(obj);
}
jsS = new JavaScriptSerializer();
result = jsS.Serialize(lists);
context.Response.Write(result);
}
public DataSet GetDataFromDatabase(string sql)
{
ds = new DataSet();
adapter = new SqlDataAdapter(sql, con);
adapter.Fill(ds);
return ds;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
前台:Test01.aspx:通过Ajax将传递过来的json数据在回调函数中对象化并赋给echarts数据源。echarts其他参数都可以类似扩展,编写复杂的逻辑。
<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('main1'));
var option1 = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
title: {
text: '',
subtext: '',
},
legend: {
data: ['data'],
right: '5%'
},
grid: {
left: '5%',
right: '0%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: []
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'New',
type: 'bar',
data: [100],
markPoint: {
data: [
{ type: 'max', name: 'Max Value' },
{ type: 'min', name: 'Min Value' }
]
},
},
]
};
$.ajax({
type: "post",
async: false,
url: "Test01.ashx",
data: { cmd: "test" }, //发送到服务器的参数
datatype: "json",
success: function (result) {
if (result) {
eval("var transresult=" + result);
//alert(transresult[0].Month);
option1.xAxis[0].data = [transresult[0].Month, transresult[1].Month, transresult[2].Month, transresult[3].Month, transresult[4].Month, transresult[5].Month, transresult[6].Month, transresult[7].Month, transresult[8].Month, transresult[9].Month];
option1.series[0].data = [transresult[0].data, transresult[1].data, transresult[2].data, transresult[3].data, transresult[4].data, transresult[5].data, transresult[6].data, transresult[7].data, transresult[8].data, transresult[9].data];
myChart1.setOption(option1);
}
},
error: function (errorMsg) {
alert("request data failed!!!");
}
});
</script>