心痕610 2021-09-23 19:31 采纳率: 58.3%
浏览 80
已结题

html网页无法显示，数据已通过json的1.php文件显示到网页[{"xname":"1","ysh":"5"},{"xname":"2","ysh":"6"}]


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="echarts.js" ></script>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <title>数据库图形</title>
</head>
<body>

</body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

    //初始化
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
        title: {
            text: 'test'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    });
    //数据加载完之前先显示一段简单的loading动画
    myChart.showLoading();   
    //名字数组（实际用来盛放X轴坐标值）
    var names=[];  
    //value数组（实际用来盛放Y坐标值）  
    var nums=[];    
    $.ajax({
        type : "get",
        async : true,            
        url : "1.php",  
        data : {},
        //返回数据形式为json
        dataType : "json", 
        //请求成功时执行该函数内容，result即为服务器返回的json对象       
        success : function(result) {
           // alert("连接成功");
            if (result) {
                for(var i=0;i<result.length;i++){
                    //挨个取出name并填入名字数组，这个xname是根据你在php那发过来的列表来的，下面那个ysh也是
                    names.push(result[i].xname);    
                }
                for(var i=0;i<result.length;i++){
                    //挨个取出value并填入value数组
                    nums.push(result[i].ysh);    
                }
                //数据都存进去了，就不需要加载动画了，所以这里把他隐藏
                myChart.hideLoading();    
                //将图表渲染进容器里
                myChart.setOption({        
                    xAxis: {
                        data: names
                    },
                    series: [
                        name: '销量',data: nums
                    }]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })

</script>
</html>
  • 写回答

3条回答 默认 最新

  • 普通网友 2021-09-23 19:33
    关注

    肯定不会不显示的，你是怎么处理的？

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 9月27日
  • 已采纳回答 9月26日
  • 修改了问题 9月23日
  • 修改了问题 9月23日
  • 展开全部

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器