ECharts sql ajax PHP 数据的自动刷新的二种办法总结

最新推荐文章于 2024-07-24 18:30:28 发布

scj0088

最新推荐文章于 2024-07-24 18:30:28 发布

阅读量460

点赞数 1

本文链接：https://blog.csdn.net/weixin_41741088/article/details/114112587

版权

ECharts

在工作中需要对PHP的数据进行一下图表展示，发现了ECharts正好满足我的需求，但苦于对JAVA的不熟悉，折磨了很长一段时间。终于用最笨的办法，完成了我需要的功能，也在这里分享一下，当然更多的是希望各位大佬能为我指出错误。指点一二。
！另外我是初学者大神请绕道！

一、json格式

ECharts 异步数据访问都是是JSON形式进行访问的，对于数据的转换，
1、把数据存入JSON文件

 require 'conn.php';	//连接数据库
    result=mysqli_query($con,"select * form .......")	//
     while ( $row = mysqli_fetch_array( $result ) ) {
 	 $data1[]=array('value'=>$row[**你的值**],'name' => $row[**你的值**]);
	}
	$json_string = json_encode($data1);	 // 转换成JSON格式的数据
	file_put_contents('text.json', $json_string);  //把数据写入到JSON文件里

2、用过AJAX把数据转换成JSON

//显示页面代码
$.ajax({
	type: "post",
	async: false,     //异步执行  
	url: "ech-5.php",   //SQL数据库文件  
	data:{},         //发送给数据库的数据  
	dataType:"json",//json类型  
	success:function(result) {  
if (result){
	for (var i = 0; i < result.length; i++) {  
		places.push(result[i].places);  
		  nums.push(result[i].nums);
		}
		}},error: function(errmsg) {
		alert("Ajax获取服务器数据出错了！"+ errmsg);}
	})
}
//ECH-5.PHP ，数据处理文件
require 'conn.php';
    class user{  
        public $places;  
        public $nums;
    }  
	$result = mysqli_query( $con, "SELECT * FROM 报表 where " );
	while ( $row = mysqli_fetch_array( $result ) ) {
		$user=new user();
		$user->places=$row['sku'];
		$user->nums=$row['xl1'];
		$array[]=$user;
	}
	$data=json_encode($array);	//这里先转换成JSON格式
	echo $data;

这个文件里千万要注意，不要带有 meta charset=“utf-8” 不然输出的JSON格式会有问题这个问题我找了好久好久才发现，初学者的错误啊。

二、显示图表

为了便与以后自动刷新，我们这里定义了一个函数。用于读取上面的AJAX数据。
1、通过JSON读取数据【这里我们使用了网上的帮助代码】

<script>
	var myChart = echarts.init(document.getElementById('main'));
        $.get('http://192.168.8.117:8807/text.json', function (data) {
            myChart.setOption({
                series : [
                    {name: '访问来源',
                     type: 'pie',    // 设置图表类型为饼图
                     radius: '55%',  // 饼图的半径，
                        data:data.data_pie
                    }]})
        }, 'json')
myChart.setOption(option);
</script>

2、通过PHP AJAX 读取数据

function drawChart(){
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var option = {title: {text: 'ECharts+Ajax+MySQL+PHP'},  
			  tooltip: {show : true},  
			  legend: {},  
			  xAxis: [{type : 'category',data : places}],  
			  yAxis: {type : 'value'},  
			  series: [{name : "数量",type : "bar",data : nums}]  
			 }
	if (option && typeof option === "object") {
			myChart.setOption(option,true);	
			//option.series[0].data = data;
}}

三、自动刷新

1、我们使用定时器自动刷新

window.setInterval(function(){
places=[], nums=[];//这里我们需要把我们的值初使化，不然会一直在图形的后面加入新的数据，
//我想了很多办法，但觉得这个办法最有效。也是最笨的办法。
TestAjax();
},2200);

2、我们使用AJAX的事件提交后刷新数据。
我们把数据获取定义为函数，使之在表单提交的时候获得数据并刷新结果。

function TestAjax(){ 
var jian= $("#sj1").val();
places=[], nums=[];
$.ajax({
	type: "post",
	async: false,     //异步执行  
	url: "ech-5.php",   //SQL数据库文件  
	data:{},   //发送给数据库的数据
	dataType:"json",//json类型  
	success:function(result) {  
if (result){
	for (var i = 0; i < result.length; i++) {  
		places.push(result[i].places);  
		  nums.push(result[i].nums);
		}
		}drawChart();
							},error: function(errmsg) {
								alert("Ajax获取服务器数据出错了！"+ errmsg);}
	})
}

四、完整代码整理

一、自动刷新-计时器刷新。
A.PHP

<div id="main" style="width: 900px;height:400px;"></div> 
<script>
var echart={arrPrice:[],arrRate:[],time:[]};
var places=[], nums=[];  

function TestAjax(){ 
places=[], nums=[];
$.ajax({
	type: "post",
	async: false,     //异步执行  
	url: "ech-5.php",   //SQL数据库文件  
	data:{},  //发送给数据库的数据
	dataType:"json",//json类型  
	success:function(result) {  
if (result){
	for (var i = 0; i < result.length; i++) {  
		places.push(result[i].places);  
		  nums.push(result[i].nums);
		}
	}drawChart();//这里开始取数据
	},error: function(errmsg) {
	alert("Ajax获取服务器数据出错了！"+ errmsg);}
	})
}
//执行异步请求  
function drawChart(){
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var option = {title: {text: 'ECharts+Ajax+MySQL+PHP'},  
			  tooltip: {show : true},  
			  legend: {data:['数量'],},  
			  xAxis: [{type : 'category',data : places}],  
			  yAxis: {type : 'value'},  
			  series: [{name : "数量",type : "bar",data : nums}]  
			 }
	if (option && typeof option === "object") {
			myChart.setOption(option,true);	
			//option.series[0].data = data;
			//我一直没有理解这句的意思，也请大神指教。
}
}
window.setInterval(function(){
places=[], nums=[];
TestAjax();
},2200);//刷新的时间
</script>

ech-5.php

<?php
require 'conn.php';
    class user{  
        public $places;  
        public $nums;
    }  
$sj1 = $_POST[ "jiang" ];
//$sj1="2020-12-15";
$tm = date_format( date_create( $sj1 ), "yy-m-d" );
$result1 = mysqli_query( $con, "SELECT * FROM 报表 where 时间>='$tm' limit 10" );
	while ( $row = mysqli_fetch_array( $result1 ) ) {
		$user=new user();
		$user->places=$row['sku'];
		$user->nums=$row['xl1'];
		$array[]=$user;
	}
	$data=json_encode($array);
	echo $data;
?>

2、通过表单提交数据后刷新
A.PHP

<div id="main" style="width: 900px;height:400px;"></div> 
<select id="oo" onChange="TestAjax()"> 
	  <option value="10">10</option>
	  <option value="20">20</option>
	  <option value="30">30</option>
	</select><input type="date" id="sj1" list="2020-12-1" onchange="TestAjax()" >
	//这里加入事件处理，当点击SELECT的时候 开始攻取数据
<script>
var echart={arrPrice:[],arrRate:[],time:[]};
var places=[], nums=[];  

function TestAjax(){ 
var jian= $("#sj1").val(); //这里取得SELECT列表值，并在下面提交使用。
places=[], nums=[];
$.ajax({
	type: "post",
	async: false,     //异步执行  
	url: "ech-5.php",   //SQL数据库文件  
	data:{jiang:jian},  //发送给数据库的数据  
	dataType:"json",//json类型  
	success:function(result) {  
if (result){
	for (var i = 0; i < result.length; i++) {  
		places.push(result[i].places);  
		  nums.push(result[i].nums);
		}
	}drawChart();//这里开始取数据
	},error: function(errmsg) {
	alert("Ajax获取服务器数据出错了！"+ errmsg);}
	})
}
//执行异步请求  
function drawChart(){
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var option = {title: {text: 'ECharts+Ajax+MySQL+PHP'},  
			  tooltip: {show : true},  
			  legend: {data:['数量'],},  
			  xAxis: [{type : 'category',data : places}],  
			  yAxis: {type : 'value'},  
			  series: [{name : "数量",type : "bar",data : nums}]  
			 }
	if (option && typeof option === "object") {
			myChart.setOption(option,true);	
			//option.series[0].data = data;
			//我一直没有理解这句的意思，也请大神指教。
}
}
window.setInterval(function(){
places=[], nums=[];
TestAjax();
},2200);//刷新的时间
</script>

ech-5.php【这个处理可根据自己的条件加入】

<?php
require 'conn.php';
    class user{  
        public $places;  
        public $nums;
    }  
$sj1 = $_POST[ "jiang" ];
//$sj1="2020-12-15";
$tm = date_format( date_create( $sj1 ), "yy-m-d" );
$result1 = mysqli_query( $con, "SELECT * FROM 报表 where 时间>='$tm' limit 10" );
	while ( $row = mysqli_fetch_array( $result1 ) ) {
		$user=new user();
		$user->places=$row['sku'];
		$user->nums=$row['xl1'];
		$array[]=$user;
	}
	$data=json_encode($array);
	echo $data;
?>

这样，就完成了表单的自动刷新的二种办法了。

另外，表单的样式可以到https://echarts.apache.org/examples/zh/index.html取得很多的事例，无非就是把数据代入就可以了。

经过几天的时间，问题终于得到解决。

scj0088

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
ECharts sql ajax PHP 数据的自动刷新的二种办法总结

ECharts在工作中需要对PHP的数据进行一下图表展示，发现了ECharts正好满足我的需求，但苦于对JAVA的不熟悉，折磨了很长一段时间。终于用最笨的办法，完成了我需要的功能，也在这里分享一下，当然更多的是希望各位大佬能为我指出错误。指点一二。！另外我是初学者大神请绕道！一、json格式ECharts 异步数据访问都是是JSON形式进行访问的，对于数据的转换，1、把数据存入JSON文件 require 'conn.php'; //连接数据库 result=mysqli_query(
复制链接

扫一扫