c# asp.net后台控制echarts前端显示数据

分享下小白的辛苦历程，明明是小白，要求还挺高，虽然C#里就带了charts插件，非常简单，也有示例，但是总感觉图表没有echarts的好看，所以就想要换成echarts，但是不会后台传输data值到前端，网上找了好多方法，都是利用json的，有的是用到了ashx，弄了几天没弄明白，搁置了一段时间，最近又想起来研究下，看到了一篇文档觉得挺好，不用单独建立ashx文件了，后台直接生成json，前台引用。不过新手对很多函数命令不是很懂，无奈，只好完全照搬吧！不过我在实际操作的时候还是遇到了问题，好多命令不懂真是苦恼，错在哪知道了（还好vs有错误语句显示，不然就是错在哪都不知道了。），可是怎么改不知道该如何是好。
下面的是我对原文的修改部分，历尽艰辛终于完成了，对于很多会的人我想大概是不难的，分分钟搞定，但是很多像我一样的小白估计跟我一样，一个简单的问题要卡好长时间才能研究明白，所以把这个给自学的小白们分享下，做个参考。。。。
我用的vs2017，echarts用的最新的，5.0.2

我是完全复制的，但是提示在这里插入图片描述
研究了半天这个JSON是啥不知道，无奈啊，只好想替代办法，反正就是把内容转换成json，网上找到了下面这句。（问了博主回复我是“封装好的json操作类 ，来个邮箱发你”，可惜我看到的时候已经找了替代办法。）

 string json = JsonConvert.SerializeObject(newObj);

但是得先引用 json.net.net4.0
在这里插入图片描述
然后就可以使用了。
别忘了先引用下。。。。

using Newtonsoft.Json;

当然也可以不引用，直接输入以下语句。

string json = Newtonsoft.Json.JsonConvert.SerializeObject(newObj);

做完这些在调试阶段依然报错

在这里插入图片描述
看到这个我想大概是传递成功了，因为这显示的就是我的html的代码，第一行的就是我要传递过来的数据，就是哪个地方出错了不知道，后面弹出的3个框200，4，parsereerror，表示已经成功了，最后一个错误就是说json错误，于是我又在网上翻了半天发现有类似问题，说后面缺少2段命令。
Response.Flush();和Response.Close();
于是原文最后4段修改成以下内容，最终调试成功了。

		string json = JsonConvert.SerializeObject(newObj);
		Response.Write(json);
   		Response.Flush();
        Response.Close();

在这里插入图片描述
另外要提醒下小白，哪个创建Series类，就是把内容复制到c#后台代码中，在最后面就行了。当然要在public partial class admin_Chart_ZFB_char : Page{里面。
在网上看了还是ashx比较方便，就研究了下发现其实也挺简单的。
下面的链接是我用ajax和ashx交互的链接。
c# asp.net利用ajax和ashx文件进行交互_●紫枫的博客-CSDN博客 https://blog.csdn.net/weixin_41053472/article/details/116596621

标题以下是原文内容。

原文链接：[https://blog.csdn.net/qq_18816201/article/details/100656662]
前端页面↓

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!-- 引入 echarts.js -->
    <script src="../../peizhi/echartsjs/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:900px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化ECharts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var options = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: [] //'销量'
            },
            xAxis: {
                data: [] //"衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋"
            },
            yAxis: {},
            series: []
            /*
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 20]
            }
            */
        };
 
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(options);
 
        //ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件
        // 处理点击事件并且跳转到相应的百度搜索页面
        myChart.on('click', function (params) {
            window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
        });
 
        
        //通过Ajax获取数据
        $.ajax({
            type: "POST",
            async: false, 
            url: "ZFB_char.aspx?action=LoadChart",
            dataType: "json",
            beforeSend: function () {
                myChart.showLoading(); //显示加载动画效果
            },
            success: function (obj) {
                console.log(obj);
                
                if (obj) {
                    options.xAxis.data = obj.xList; //给X轴数据
                    options.series = obj.series;  //给series数据
                    options.legend.data = obj.legend; //给legend数据
                    myChart.hideLoading(); //隐藏动画加载效果
                    myChart.setOption(options);  //设置图表实例的配置项以及数据
                }
            },                    
            error: function (XMLHttpRequest, textStatus, errorThrown) 
            {                       
                alert(XMLHttpRequest.responseText);
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus); 
            }
        });            
    </script>
</body>
</html>

创建Series类

/// <summary>
/// 图表Series参数 
/// </summary>
public class Series
{
    /// series序列组名称
    public string name
    {
        get;
        set;
    }
    /// series序列组呈现图表类型
    public string type
    {
        get;
        set;
    }
    /// series序列组呈现对应的Y轴刻度
    public int yAxisIndex
    {
        get;
        set;
    }
    /// series序列组的数据为数据类型数组
    public List<int> data
    {
        get;
        set;
    }
}

C#后台代码↓

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class admin_Chart_ZFB_char : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string action = Request["action"];
        switch (action)
        {
            case "LoadChart"://查询数据 
                LoadChart();
                break;
            
            default:
                break;
        }
    }
 
    private void LoadChart()
    {
        //legend集合
        List<string> legendList = new List<string>();
        legendList.Add("销量");
        //X轴集合
        List<string> xList = new List<string>();//"衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"
        xList.Add("衬衫"); xList.Add("羊毛衫"); xList.Add("雪纺衫"); xList.Add("裤子"); xList.Add("高跟鞋");
        //series集合
        List<Series> seriesList = new List<Series>();
        //定义一个Series对象
        Series seriesObj = new Series();
        //seriesObj.id = 1;
        seriesObj.name = "销量";
        seriesObj.type = "bar"; //柱形
        seriesObj.data = new List<int>(); //先初始化 不初始化后面直直接data.Add(x)会报错   
        int[] sz = new int[] { 5, 20, 36, 10, 20 };
        for (int i = 0; i < sz.Length; i++)
        {
            seriesObj.data.Add(sz[i]);
        }
        seriesList.Add(seriesObj);
 
        var newObj = new
        {
            xList = xList, //X轴集合
            series = seriesList, //series集合
            legend = legendList //legend集合
        };
        String json = JSON.Encode(newObj);
        Response.Write(json);
    }
    
 
 
}

效果图↓
在这里插入图片描述

传到前台的json数据↓
在这里插入图片描述

————————————————
版权声明：本文为CSDN博主「本将仍在」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_18816201/article/details/100656662

版权声明：本文为weixin_41053472原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。