通过对数据可视化，可以让数据更容易理解，激发数据使用者的 想象力。
在阿里云上，可以使用DataV进行数据的可视化。
在阿里云下，可以使用ECharts进行数据的可视化。
下面，是使用ECharts对数据进行可视化的例子。
准备
搭建好Apache 2+PHP 7+MySQL 5环境
从http://echarts.baidu.com/download.html下载echarts.js
从http://jquery.com/download/下载jQuery
思路
采用Ajax，通过php，从mysql取出数据，然后将数据使用ECharts展示。
如果想要动态刷新图标，那么设置一个定时器，定时取数，就可以达到目的。
所以，下面会编写2个脚本：index.html和data.php
index.html使用jQuery的ajax方法从data.php获取数据，dataphp实现从MySQL获取数据。
代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="jquery-3.0.0.js"></script>
<script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
function addData(){
$.get('data.php').done(function(data,status) {
//$data=eval(data);
var data=eval('('+data+')'); //转换为json
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
}
myChart.timeTicket = setInterval(function () {
addData(); //动态刷新
}, 500);
</script>
<p>ok</p>
</body>
</html>data.php
<?php
$mysqli=new mysqli('localhost','demo','demo','demo');
$sql="SELECT * FROM sale_data2";
$result = $mysqli->query($sql,MYSQLI_USE_RESULT);
if($result){
$i=0;
$categories=array();
$datas=array();
while($row = $result->fetch_assoc())
{
$categories[$i]=$row['category'];
$datas[$i]=$row['data'];
$i=$i+1;
}
$arr=array('categories'=>$categories,'data'=>$datas);
echo json_encode($arr);
}
$mysqli->close();
?>总结
通过编写代码，可以实现像DataV那样的效果，只是没有DataV那样通过拖拽的方式方便和快捷。
参考：http://echarts.baidu.com/tutorial.html
时间： 2024-09-20 00:02:12