echarts+ashx文件+aspx 实现后台加载数据并在echarts上展示

最新推荐文章于 2022-08-04 20:58:10 发布

DreamXY12

最新推荐文章于 2022-08-04 20:58:10 发布

阅读量752

点赞数 1

分类专栏： asp.net 文章标签： asp.net javascript jquery

本文链接：https://blog.csdn.net/DreamXY12/article/details/116587147

版权

asp.net 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近导师让我们用echarts和asp.net结合，动态的展示数据，我从网上看了很多教程发现都不完整，或者echarts的版本比较老，加载表格的方式和现在有所不同。我综合了几个实例，终于弄出来了。

首先要下载jQuery和echarts的库，我下的都是最新版的。jquery-3.6.0.min.js和echarts.min.js。然后将他们导入aspx文件中。

其次，在aspx文件中写上js代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="echarts.aspx.cs" Inherits="echarts" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="JS/echarts.min.js"></script>
     <script src="JS/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
    <div id="main" style="width: 600px;height: 400px;"></div>

	<script type="text/javascript">
	    var myChart = echarts.init(document.getElementById('main'));
	    //指定图表的配置项和数据
	    var option={
	        title:{
	            text:'异步显示数据'
	        },
	        tooltip:{},
	        legend:{
	            data:['销量']
	        },
	        xAxis:{},
	        yAxis:{},
	        series:[]
	    };

	    myChart.showLoading();
	    $(document).ready(function () {
	        $.ajax({
	            type: 'post', //发送请求类型为POST
	            url: 'histogram.ashx?action=ShowChart', //请求页面的URL，此页面即为上面所述提供JSON数据的页面，传递参数ShowChart，后台解析并调用相应的函数
	            data: {},
	            dataType: 'json', //请求数据类型为JSON
	            async: true, //是否为异步加载，true为异步，false为同步
	            success: function (result) { //请求成功：result为后台返回数据
	                if (result) {
	                    alert(result);
	                    option.series = result.series;//将得到的数据赋值给option的Series属性
	                    option.xAxis = result.xAxis;
	                    myChart.hideLoading();
	                    myChart.setOption(option);
	                }
	            },
	            error: function () { //请求失败
	                alert("请求后台数据失败!");
	            }
	        });
	    }

        );
    </script>
</body>
</html>

上面用的数据是echarts中入门示例的第一个，大家可以去看下。这里，我用了ajax来是实现异步的加载数据，请求的文件是histogram.ashx，并附带了参数，ShowCharts就是histogram.ashx中的一个方法。

因为echarts中使用的是JSON格式的数据，所以我们要将c#的基本数据变成JSON格式，这里大家可以从网上搜索下，主要是要导入Newtonsoft.Json.dll这个文件。

弄清楚数据的转换后，就需要在histogram.ashx文件中做出相应的处理。histogram.ashx文件内容如下：

<%@ WebHandler Language="C#" Class="histogram" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Text;

public class histogram : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string action = context.Request.QueryString["action"];
        switch (action)
        {
            case "ShowChart":
                ShowChart(); break;
        }
    }
    
    private void ShowChart()
    {
        /*Series序列数据*/
        List<Series> seriesList = new List<Series>();
        Series series = new Series();
        series.name = "销量";
        series.type = "bar";
        series.data = new List<double>();
        series.data.Add(5);
        series.data.Add(20);
        series.data.Add(36);
        series.data.Add(10);
        series.data.Add(10);
        series.data.Add(20);
        seriesList.Add(series);
        xData xdata = new xData();
        xdata.data = new List<string>();
        xdata.data.Add("衬衫");
        xdata.data.Add("羊毛衫");
        xdata.data.Add("雪纺衫");
        xdata.data.Add("裤子");
        xdata.data.Add("高跟鞋");
        xdata.data.Add("袜子");

        Series series2 = new Series();
        series2.type = "line";
        series2.name = "销量";
        series2.data = new List<double>();
        series2.data.Add(5);
        series2.data.Add(20);
        series2.data.Add(36);
        series2.data.Add(10);
        series2.data.Add(10);
        series2.data.Add(20);
        seriesList.Add(series2);
        
        var newObj = new
        {
            xAxis=xdata,
            series=seriesList
        };
        string strJson = ToJson(newObj);
        WriteJson(strJson);
    }

    public static string ToJson(object obj)
    {
        return NewtosoftJson(obj);
    }
    public static string NewtosoftJson(object obj)
    {
        return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
    }
    public static void WriteJson(string str)
    {
        HttpContext.Current.Response.Write(str);
        HttpContext.Current.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
    class Series
    {
        public string name
        {
            get;
            set;
        }
        public string type
        {
            get;
            set;
        }
        public List<double> data
        {
            get;
            set;
        }
      
    }
    class xData
    {
        public List<string> data
        {
            get;
            set;
        }
    }
}

因为我想给x轴也加数据，所以新建了一个xData类，专门用于加载x轴数据。

其实就这两个文件就可以解决问题了，其他的应用，比如从数据库里面加载数据，这都不是问题。还有什么是.ashx文件,这些问题网上都有解释。运行入下：