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>