Echarts读取数据库数据并展现

Echarts读取数据库数据并展现

前端

  <div id="main" style="height:400px;width:60%"></div>
    <!--echarts和jquery需自己引入-->
    <script type="text/javascript">
                var objsx = [];
                var objsy = [];
                     $.ajax({
                         type: "post",
                         async: false,
                         url: "global/Echarts1Data.ashx",   //数据接口
                         data: {},
                         dataType: "json",                          
                         error: function (errorMsg) { alert(errorMsg); },
                         success: function (result) {
                             for (var i = 0; i < result.wip.length; i++) {
                                 objsy[i] = JSON.parse(result.NUM[i]);  //以特定的JSON的格式接收数字；           
                                 objsx[i] = result.id[i];   //以JSON的方式接收字符串
                             }
                                 var myChart = echarts.init(document.getElementById('main'));
                                 var option =
                                     {
                                         title: {
                                             text: 'Product'
                                         },
                                         tooltip: {},
                                         legend: {
                                             orient: 'horizontal', 
                                              data:['NUM1','NUM2'],  //图例需要和series里的name一致
                                              textStyle: {  
                                                  color: '#000',  // 字体颜色
                                              },
                                              x: 'center',//图例位置沿Y轴居中
                                              y: 'top'
                                         },
                                         xAxis: {
                                             type: 'category',
                                             data: objsx,
                                             axisLabel: {     //横坐标只显示6个字符，剩下的省略
                                                formatter: function (value, index) {
                                                    var v = value.substring(0, 6) + '...'
                                                    return value.length > 10 ? v : value
                                                }
                                            }              
                                         },
                                         yAxis: {
                                             type: 'value'
                                         },
                                         series: [{
                                             name: 'NUM1',
                                             type: 'bar',  //柱状图
                                             data: objsy,
                                             color:['green'],  //柱子颜色
                                             barWidth:20   //柱子宽度
                                         },{
                                             name: 'NUM2',
                                             type: 'line',  //折线图
                                             data: objsy
                                         }]
                                     };                                    
                                 myChart.setOption(option);
                             }                       
                     });
    </script>

ashx

using Newtonsoft.Json;   //引入Newtonsoft用于转化为json格式
  public class Echarts1Data : IHttpHandler
    {
        OracleConnection Oracle_DB = new OracleConnection(WebConfigurationManager.AppSettings["key1"].ToString());
        public void ProcessRequest(HttpContext context)
        {
            ArrayList xAxisData = new ArrayList();
            ArrayList yAxisData = new ArrayList();
            System.Data.DataTable dt = new System.Data.DataTable();
            string sqltext = "select id as id,num as NUM from table1";
            Oracle_DB.Open();
            OracleDataAdapter oda = new OracleDataAdapter(sqltext,Oracle_DB);
            DataSet ds1 = new DataSet();
            oda.Fill(ds1,"product");
            DataTable dt1 = new DataTable();
            dt1=ds1.Tables["product"];
            Oracle_DB.Close();
            for (int i = 0; i < dt1.Rows.Count; i++)   //将datatable数据存入到数组中
            {
                yAxisData.Add(dt1.Rows[i].ItemArray[1]);  //NUM
                xAxisData.Add(dt1.Rows[i].ItemArray[0]);  //id
            }
            var obj = new
            {
                id= xAxisData,
                NUM= yAxisData
            };
            string strjson = JsonConvert.SerializeObject(obj);   //用Newtonsoft，将两个数据一起序列化传递给echarts
            context.Response.Write(strjson);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }