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"