Ajax定时刷新

长街395

已于 2022-08-31 20:51:52 修改

阅读量702

点赞数 2

分类专栏： web 文章标签： html php ajax echarts

于 2022-04-13 20:17:01 首次发布

本文链接：https://blog.csdn.net/weixin_56301399/article/details/124156619

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

经过一下午爆肝，主要是因为之前没有找到相关资料，逻辑不清晰，不过现在能跑起来就好，这代码是针对作者自己的数据库，但其结构，希望能对诸君有用。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>  
    <!-- 引入 echarts.js -->  
    <link href="../css/index.css" type="text/css" rel="stylesheet" />
    <script src="../js/echart.js"></script>  
    <script src="../js/jquery-2.2.1.min.js"></script>  
</head>  
<body>  
    <div class="nav" >
        <ul class="ul_top">
      
            <li><a href="../html/index.html">首页</a></li>
            <li><a href="#">汉字演变</a></li>
            <li><a href="../html/t02.html">识字率</a></li>
            <li><a href="#">汉文化传播</a></li>
            <li><a href="#">热词</a></li>
            <li><a href="#">视频</a></li>
        </ul>
      </div>
      <div style="width: 100px;height:10px;margin:150px">
      <strong>地区：</strong>
      <select name="pla" id="pla" > 
          <!-- selected="selected" 打开页面处于选中状态 -->
          <option value="河南">
              河南
          </option>
          <option value="山东"  >
              山东
          </option>
          <option value="广东">
              广东
          </option>
          <option value="北京">
              北京
          </option>
          <option value="成都">
              成都
          </option>
          <option value="重庆">
              重庆
          </option>
          <option value="青海">
              青海
          </option>
          <option value="湖南">
              湖南
          </option>
          <option value="陕西">
              陕西
          </option>
          <option value="浙江">
              浙江
          </option>
          <option value="安徽">
              安徽
          </option>
          <option value="河北">
              河北
          </option>
          <option value="山西">
              山西
          </option>
          <option value="辽宁">
              辽宁
          </option>
          <option value="吉林">
              吉林
          </option>
          <option value="黑龙江">
              黑龙江
          </option>
          <option value="江苏">
              江苏
          </option>
          <option value="海南">
              海南
          </option>
          <option value="台湾">
              台湾
          </option>
          <option value="湖北">
              湖北
          </option>
          <option value="四川">
              四川
          </option>
          <option value="贵州">
              贵州
          </option>
          <option value="云南">
              云南
          </option>
           <option value="甘肃">
              甘肃
          </option>
          <option value="江西">
              江西
          </option>
          <option value="福建">
              福建
          </option>
          <option value="北京">
              北京
          </option>
          <option value="上海">
              上海
          </option>
          <option value="天津">
              天津
          </option>
          <option value="香港">
              香港
          </option>
          <option value="澳门">
              澳门
          </option>
          <option value="广西">
              广西
          </option>
          <option value="西藏">
              西藏
          </option>
          <option value="新疆">
              新疆
          </option>
          <option value="内蒙古">
              内蒙古
          </option>
          <option value="宁夏">
              宁夏
          </option>
      </select>
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="width: 400px;height:400px;margin:150px"></div>  
    <script type="text/javascript">  
//     $(function() {
// 	$('#pla').change(function(e){ 
// 		fillreport();
// 	}) 
// });
// function fillreport(){
// var name = $("#pla  option:selected").text();//获取select里的内容
// var val = $("#pla  option:selected").val();//获取select里的value值
// //alert(name +"的值："+val); 
// }
//         // 基于准备好的dom，初始化echarts实例  
       // var myChart = echarts.init(document.getElementById('main'));  
        // 初始化两个数组，盛装从数据库中获取到的数据  
        var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom); 
 $('#pla').change(function(e){ 
		TestAjax();
	}) 
          var places=[], percent=[],year=[]; 
        function TestAjax(){  
          
    var name = $("#pla  option:selected").text();//获取select里的内容
      var val = $("#pla  option:selected").val();
            places.splice(0,places.length);//清空数组 
            percent.splice(0,percent.length);
            year.splice(0,year.length);
            $.ajax({  
                type: "post",  
                async: false,     //异步执行  
                url: "../php/sql.php",   //SQL数据库文件  
                data: {pla:val},        //发送给数据库的数据  
                dataType: "json", //json类型 
                success: function(result) {  

                    if (result) {  
                        for (var i = 0; i < result.length; i++) {  
                            places.push(result[i].place);  
                            percent.push(100-result[i].percent);
                            year.push(result[i].year); 
                            console.log(result[i].place);  
                            console.log(result[i].percent); 
                            console.log(result[i].year);
                        }  
                    
                    for(var i=0;i<result.length;i++)
                    {
                        for(var j=i+1;j<=result.length-1;j++)
                        {
                               if(year[i]>year[j])
                               {
                                   var t=year[i];
                                   var k=percent[i];
                                   year[i]=year[j];
                                   year[j]=t;
                                   percent[i]=percent[j];
                                   percent[j]=k;
                               }
                        }
                    }  
                }
                }  
            })  

            var option = {  
            title: {  
                text: '识字率的变化'  
            },  
            tooltip: {  
                show : true  
            },  
            legend: {  
                data:['年份']  
            },  
            xAxis: [{  
                type : 'category',  
                data : year  
            }],  
            yAxis: {  
                type : 'value'  
            },  
            series: [{  
                name : "数量",  
                type : "line", 
                data : percent 
            }]  
        };  
        
        // 使用刚指定的配置项和数据显示图表。  
        option && myChart.setOption(option, true);
        
        }
        //执行异步请求   
        TestAjax(); 
//setInterval(TestAjax(), 3000); 
        // 指定图表的配置项和数据  
       

        
    </script>  
</body>  
</html>

效果如下：

长街395

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Ajax定时刷新

经过一下午爆肝，主要是因为之前没有找到相关资料，逻辑不清晰，不过现在能跑起来就好，这代码是针对作者自己的数据库，但其结构，希望能对诸君有用。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <link href=
复制链接

扫一扫