asp.net使用echarts展示图表数据的示例

作者：袖梨 2022-06-25

href="https://img.111cn.net/uploads/20220926/img_63315820d411430.jpg" class="js-smartPhoto-pc" target="_blank">

html代码

代码如下 复制代码






Echart图表示例






























asp.net代码：

代码如下 复制代码

asp.net后台组织数据代码：

代码如下 复制代码

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AT.Web.Demo
{
public partial class GetChartData : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string type = Request["type"];
if (!string.IsNullOrEmpty(type))
{
switch (type)
{
case "energyData":
GetEnergyDataAjaxData("", "");
break;
case "reportData":
GetReportDataAjaxData("");
break;
}
}
}
///


/// 获得数据且用Json格式数据返回
///
private void GetEnergyDataAjaxData(string level, string code)
{
//考虑到图表的category是字符串数组 这里定义一个string的List
List categoryList = new List();
//考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
List seriesList = new List();
//考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
List legendList = new List();
DataTable dt = null;
using (SqlConnection con = new SqlConnection("Data Source=.;User ID=sa;Password=111111;Database=AT_DB;"))
{
string strSQL = "select top 12 * from T_EchartData1";
using (SqlDataAdapter adapter = new SqlDataAdapter(strSQL, con))
{
DataSet ds = new DataSet();
adapter.Fill(ds);
dt = ds.Tables[0];
}
}
//htm = htm&(dt.Rows.Count+"条数据！");
//设置legend数组
legendList.Add("今年能耗"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("去年能耗"); //这里的名称必须和series的每一组series的name保持一致
Series thisSeriesObj = new Series();
thisSeriesObj.id = 0;
thisSeriesObj.name = "今年能耗";
thisSeriesObj.type = "line"; //线性图呈现
thisSeriesObj.data = new List();
thisSeriesObj.itemStyle = new itemStyle { normal = new normal { color = "#0099FF" } };
Series lastSeriesObj = new Series();
lastSeriesObj.id = 1;
lastSeriesObj.name = "去年能耗";
lastSeriesObj.type = "line"; //线性图呈现
lastSeriesObj.data = new List();
lastSeriesObj.itemStyle = new itemStyle { normal = new normal { color = "#00CC00" } };
foreach (DataRow dr in dt.Rows)
{
categoryList.Add(dr[0].ToString() + "月");
thisSeriesObj.data.Add(dr[1]);
lastSeriesObj.data.Add(dr[2]);
}
//将sereis对象压入sereis数组列表内
seriesList.Add(thisSeriesObj);
seriesList.Add(lastSeriesObj);
//最后调用相关函数将List转换为Json
//因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象
var newObj = new
{
category = categoryList,
series = seriesList,
legend = legendList
};
//Response返回新对象的json数据
htm = htm&(JsonConvert.SerializeObject(newObj, Formatting.None));
Response.End();
}
///
/// 获得数据且用Json格式数据返回
///
private void GetReportDataAjaxData(string code)
{
//考虑到图表的category是字符串数组 这里定义一个string的List
List categoryList = new List();
//考虑到图表的series数据为一个对象数组 这里额外定义一个series的类
List seriesList = new List();
//考虑到Echarts图表需要设置legend内的data数组为series的name集合这里需要定义一个legend数组
List legendList = new List();
DataTable dt = null;
using (SqlConnection con = new SqlConnection("Data Source=.;User ID=sa;Password=111111;Database=AT_DB;"))
{
string strSQL = "select * from T_EchartData2";
using (SqlDataAdapter adapter = new SqlDataAdapter(strSQL, con))
{
DataSet ds = new DataSet();
adapter.Fill(ds);
dt = ds.Tables[0];
}
}
//htm = htm&(dt.Rows.Count + "条数据！");
//设置legend数组
legendList.Add("电"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("水"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("燃煤"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("天然气"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("汽油"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("柴油"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("热力"); //这里的名称必须和series的每一组series的name保持一致
legendList.Add("其他"); //这里的名称必须和series的每一组series的name保持一致
Series dianSeries = new Series();
dianSeries.id = 0;
dianSeries.name = "电";
dianSeries.type = "line"; //线性图呈现
dianSeries.data = new List();
dianSeries.itemStyle = new itemStyle { normal = new normal { color = "#0099FF" } };
Series shuiSeries = new Series();
shuiSeries.id = 1;
shuiSeries.name = "æ°´";
shuiSeries.type = "line"; //线性图呈现
shuiSeries.data = new List();
shuiSeries.itemStyle = new itemStyle { normal = new normal { color = "#00CC00" } };
Series yuanmeiSeries = new Series();
yuanmeiSeries.id = 2;
yuanmeiSeries.name = "燃煤";
yuanmeiSeries.type = "line"; //线性图呈现
yuanmeiSeries.data = new List();
yuanmeiSeries.itemStyle = new itemStyle { normal = new normal { color = "#008080" } };
Series tianranqiSeries = new Series();
tianranqiSeries.id = 3;
tianranqiSeries.name = "天然气";
tianranqiSeries.type = "line"; //线性图呈现
tianranqiSeries.data = new List();
tianranqiSeries.itemStyle = new itemStyle { normal = new normal { color = "#CC6600" } };
Series qiyouSeries = new Series();
qiyouSeries.id = 4;
qiyouSeries.name = "汽油";
qiyouSeries.type = "line"; //线性图呈现
qiyouSeries.data = new List();
qiyouSeries.itemStyle = new itemStyle { normal = new normal { color = "#CC00CC" } };
Series chaiyouSeries = new Series();
chaiyouSeries.id = 5;
chaiyouSeries.name = "柴油";
chaiyouSeries.type = "line"; //线性图呈现
chaiyouSeries.data = new List();
chaiyouSeries.itemStyle = new itemStyle { normal = new normal { color = "#0033CC" } };
Series reliSeries = new Series();
reliSeries.id = 6;
reliSeries.name = "热力";
reliSeries.type = "line"; //线性图呈现
reliSeries.data = new List();
reliSeries.itemStyle = new itemStyle { normal = new normal { color = "#003300" } };
Series qitaSeries = new Series();
qitaSeries.id = 7;
qitaSeries.name = "其他";
qitaSeries.type = "line"; //线性图呈现
qitaSeries.data = new List();
qitaSeries.itemStyle = new itemStyle { normal = new normal { color = "#FF0000" } };
foreach (DataRow dr in dt.Rows)
{
categoryList.Add(string.Format("{0}年{1}月", dr["ReportYear"], dr["ReportMonth"]));
dianSeries.data.Add(string.IsNullOrEmpty(dr["DIAN"].ToString()) ? 0 : dr["DIAN"]);
shuiSeries.data.Add(string.IsNullOrEmpty(dr["SHUI"].ToString()) ? 0 : dr["SHUI"]);
yuanmeiSeries.data.Add(string.IsNullOrEmpty(dr["YUANMEI"].ToString()) ? 0 : dr["YUANMEI"]);
tianranqiSeries.data.Add(string.IsNullOrEmpty(dr["TIANRQ"].ToString()) ? 0 : dr["TIANRQ"]);
qiyouSeries.data.Add(string.IsNullOrEmpty(dr["QIYOU"].ToString()) ? 0 : dr["QIYOU"]);
chaiyouSeries.data.Add(string.IsNullOrEmpty(dr["CHAIYOU"].ToString()) ? 0 : dr["CHAIYOU"]);
reliSeries.data.Add(string.IsNullOrEmpty(dr["RELI"].ToString()) ? 0 : dr["RELI"]);
qitaSeries.data.Add(string.IsNullOrEmpty(dr["QTNY"].ToString()) ? 0 : dr["QTNY"]);
}
//将sereis对象压入sereis数组列表内
seriesList.Add(dianSeries);
seriesList.Add(shuiSeries);
seriesList.Add(yuanmeiSeries);
seriesList.Add(tianranqiSeries);
seriesList.Add(qiyouSeries);
seriesList.Add(chaiyouSeries);
seriesList.Add(reliSeries);
seriesList.Add(qitaSeries);
//最后调用相关函数将List转换为Json
//因为我们需要返回category和series、legend多个对象 这里我们自己在new一个新的对象来封装这两个对象
var newObj = new
{
category = categoryList,
series = seriesList,
legend = legendList
};
//Response返回新对象的json数据
htm = htm&(JsonConvert.SerializeObject(newObj, Formatting.None));
Response.End();
}
}
///
/// 定义一个Series类 设置其每一组sereis的一些基本属性
///
class Series
{
///
/// sereis序列组id
///
public int id
{
get;
set;
}
///
/// series序列组名称
///
public string name
{
get;
set;
}
///
/// series序列组呈现图表类型(line、column、bar等)
///
public string type
{
get;
set;
}
///
/// series序列组的itemstyle
///
public object itemStyle
{
get;
set;
}
///
/// series序列组的数据为数据类型数组
///
public List data
{
get;
set;
}
}
class normal
{
///
/// color
///
public string color
{
get;
set;
}
}
class itemStyle
{
///
/// normal
///
public object normal
{
get;
set;
}
}
}

相关文章

精彩推荐