ajax和echarts实现动态图表

4444l

已于 2022-05-06 19:47:38 修改

阅读量999

点赞数

文章标签：学习

于 2022-05-03 16:32:55 首次发布

本文链接：https://blog.csdn.net/qq_59816727/article/details/124556204

版权

第一步：实体类必须添加序列化特性[Serializable]

第二步：在后台类中添加静态方法，方法上添加[WebMethod],返回数据时进行对象转json ----JsonConvert.SerializeObject(list)

第三步：在页面引入jQuery和Echarts框架、插件

第四步：调用jquery的ajax方法，传入对应参数（url：“地址”,type：“post”,contentType：“application/json”，success：回调方法）

第五步：解析数据，转换成Json对象或数组：JSON.parse();

第六步：绑定图表数据

<script type="text/javascript">

            $.ajax({
                url: "Index.aspx/GetData",
                contentType: "application/json",
                type: "post",
                success: function (resp) {
                    console.log(resp);
                    //json字符串转对象
                    var list = JSON.parse(resp.d);
                    console.log(list.length);
                    $.each(list, function (index, item) {
                        console.log(index)
                        console.log(item.uid);
                        console.log(item.uname);
                        console.log(item.upwd);
                        console.log(item.datenow);
                    });
                }
            })
        </script>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="_4_Market.Test" %>

<!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/jquery-3.3.1.min.js"></script>
    <%--图表插件--%>
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="main" style="width: 900px;height:600px;"></div>
        <script>
            var list, xlist = new Array(), ylist = new Array();
//需要大家实现步骤
            $.ajax({})
            function initdata() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '食品面类统计'
                    },
                    tooltip: {},
                    legend: {
                        data: ['库存']
                    },
                    xAxis: {
                        data: xlist
                    },
                    yAxis: {},
                    series: [{
                        name: '库存',
                        //柱状图bar 饼图pie 折线图line
                        type: 'pie',
                        data: ylist
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        </script>
    </form>
</body>
</html>