echarts获取后台数据在前端展现

最新推荐文章于 2024-04-23 22:35:01 发布

双人余公

最新推荐文章于 2024-04-23 22:35:01 发布

阅读量391

点赞数 1

分类专栏： Echarts 文章标签： ajax echarts c# jquery

本文链接：https://blog.csdn.net/weixin_41182982/article/details/119617376

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

echarts获取后台数据在前端展现

这么一个简单的问题，居然卡了我一个星期……网上各种教程越看越乱，好在有老哥好心解答，在这里分享出来。
前端代码

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="echarts.js"></script>  
</head>
<body>
    <div id="main" style="height:400px;width:600px">
    </div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({                   //新建一个新图表
            title: { text: '异步加载数据' },
            tooltip: {},
            xAxis: { data: [] },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: []
            }]
        });
            
       $.ajax({
            type:"post",
            url: 'Handler1.ashx',       //请求数据的地址
           success: function (result) {
               result = JSON.parse(result);
               console.log(result);
               myChart.setOption({        //加载数据图表  
                   xAxis: {
                       data: result.x    //这里给坐标赋值
                    },
                    series: [{
                        data: result.y
                    }]
                });
            },
            error: function (errorMsg) {
                alert("图表请求数据失败!");
            }
        });
    </script>
</body >
</html >

ashx文件（一般处理程序）
这个文件在vs2019里居然没有，2019的虽然更智能，但不如2017顺手。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace WebApplication12
{

    public class Handler1 : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string[] categories = new string[] { "外套", "羊毛衫", "手套", "鞋子", "毛巾" };
            int[] data = new int[] { 5, 13, 21, 24, 9 };
            var obj = new                    //此步不能省略，需要打包发给前端
            {
                x = categories,
                y = data
            };
            string strJson =JsonConvert.SerializeObject(obj);  //将数据转换为json格式
            context.Response.Write(strJson);  
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

关键是要有Newtonsoft.json这东西，并且.Net框架不能低于3.5
这个文件就自己去找吧，我也不是官网下的，而且csdn不能上传重复的东西……

双人余公

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts获取后台数据在前端展现

echarts获取后台数据在前端展现这么一个简单的问题，居然卡了我一个星期……网上各种教程越看越乱，好在有老哥好心解答，在这里分享出来。前端代码<html><head> <meta charset="utf-8" /> <title></title> <script src="echarts.js"></script> </head><body> <
复制链接

扫一扫