1.简单实例：ASP.NET下Echarts通过Ajax从数据库中获取数据

后台：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>