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 seriesList2  from 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", //返回数据形式为json                    success: 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("图表数据加载失败！");                    }                });            })})