echart实现数据库取值绘制三种类型的图

1.柱状图后台代码

public void getBar()
{
DataTable dt1 = null;
var result1 = new object();
string sqlstring1 = "select description as categoryList1,sales from testEChart where type='bar'";
dt1 = DbHelperSQL.Query(sqlstring1);

List<string> categoryList1 = new List<string>();
List<object> seriesList1 = new List<object>();
foreach (DataRow dr in dt1.Rows)
{
categoryList1.Add(dr[0].ToString());
seriesList1.Add(dr[1]);

}
var obj = new
{
category = categoryList1,
series = seriesList1,
};
ContextResponse(obj);
}

前台代码

$(document).ready(function () {

/*************************************************柱状图************************************************/ var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '数据库连接测试' }, tooltip: {}, legend:{ data: ["销量"] }, xAxis: { //url: "../AjaxTools/Chart.ashx?method=getData", type: 'category', data: null }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: null }] }; myChart.setOption(option); var options = myChart.getOption(); $.ajax({ type: "post",async: false, //同步执行 url: "../AjaxTools/Chart.ashx?method=getBar", dataType: "json", //返回数据形式为json success: function (result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 options.xAxis[0].data = result.category;options.series[0].data = result.series; // options.legend.data = result.legend; myChart.setOption(options); // myChart.refresh(); // $.messager.alert('Warning', result); console.info(result); } }, error: function (errorMsg) { alert("图表数据加载失败！"); } });})

2.折线图后台代码：

#region 折线图public void getLine(){DataTable dt = null;var result = new object();string sqlstring = "select description as categoryList,thisyear as seriesList1,lastyear as seriesList2from testline where type='line'";dt = DbHelperSQL.Query(sqlstring);List<string> categoryList1 = new List<string>();List<object> seriesList1 = new List<object>();List<object> seriesList2 = new List<object>();foreach (DataRow dr in dt.Rows){categoryList1.Add(dr[0].ToString());seriesList1.Add(dr[1]);seriesList2.Add(dr[2]);}// var json1 = JsonConvert.SerializeObject(se);var obj = new{category = categoryList1,series1 = seriesList1,series2 = seriesList2};//var json1 = JsonConvert.SerializeObject(obj);ContextResponse(obj);}#endregion

前台代码

$(document).ready(function () {
/*************************************************折线图************************************************/
var myChart1 = echarts.init(document.getElementById('p'));
var option1 = {
title: {
text: '折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ["今年能耗", "去年能耗"]
},
toolbox: {
show: true,
feature: {
mark: { show: false },
dataView: { show: false, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
grid: {
x: 60,
y: 30,
x2: 5,
y2: 30
},
calculable: true,
xAxis: [
{
type: 'category',
data: null
}
],
yAxis: [
{
type: 'value',
axisLabel: {
fomatter: "."
},
splitArea: { show: true }
}
],
series: [{
name: "今年能耗",
type: "line",
data: null
},
{
name: "去年能耗",
type: "line",
data: null
}]

};

myChart1.setOption(option1);
var options1 = myChart1.getOption();
$.ajax({
type: "post",
async: false, //同步执行
url: "../AjaxTools/Chart.ashx?method=getLine",
dataType: "json", //返回数据形式为json
success: function (result) {
if (result) {
//将返回的category和series对象赋值给options对象内的category和series
//因为xAxis是一个数组 这里需要是xAxis[i]的形式
options1.xAxis[0].data = result.category;
options1.series[0].data = result.series1;
options1.series[1].data = result.series2;

myChart1.setOption(options1);
console.info(result);
}
},
error: function (errorMsg) {
alert("图表数据加载失败！");
}
});
})

3.饼图后台代码#region 饼图public void getPie(){DataTable dt = null;var result = new object();string sqlstring = "select sales as value, description as name from testEChart where type='pie'";dt = DbHelperSQL.Query(sqlstring);var json1 = JsonConvert.SerializeObject(dt);ContextResponse(json1);}#endregion

前台代码

 $(document).ready(function () {/*************************************************饼图************************************************/var myChart2 = echarts.init(document.getElementById('d'));var option2 = {series: [{name: '访问来源',type: 'pie',radius: '55%',data: null}]};myChart2.setOption(option2);var options2 = myChart2.getOption();$.ajax({type: "post",async: false, //同步执行url: "../AjaxTools/Chart.ashx?method=getPie",dataType: "json", //返回数据形式为jsonsuccess: function (result) {if (result) {console.info(result);var chart = eval(result);options2.series[0].data = chart;myChart2.setOption(options2);console.info(chart);}},error: function (errorMsg) {alert("图表数据加载失败！");}});})})