您的位置：首页 > 编程语言 > PHP开发

php原生态与百度echarts联合制作数据图表

2017-02-22 18:19 507 查看

php原生态与百度echarts联合制作饼状图：

需要的文件如下：

1、switch.php 这个是转换文件，也是主要的显示区域；

2、connect.php 这个是数据库连接文件；

以下是switch.php文件:

<?php
session_start();
// 把表名文件名保存到session，带到文件导出页面备用
$_SESSION['titlesql']='ip';
$_SESSION['contentsql']=$sql;
$_SESSION['fileName']=$commit;

// 引入数据库链接文件
include_once 'connect.php';
//获取上一个页面，选择要查询的字段
$page=$_POST['page']?$_POST['page']:$_GET['page'];
//默认展示5条数据
$num=$_POST['num']?$_POST['num']:5;
$commit=$_GET['commit']?$_GET['commit']:$_POST['commit'];

// 执行SQL语句查询数据，取别名分别为name和value，这个是echarts里面的指定数据名称
$sql='select '.$page.' name,count(id) value from ip group by name order by value desc limit '.$num;

// 执行查询语句，返回对象
$rest=$pdo->query($sql);
// 获取数据
$rows=$rest->fetchAll();

// 取出数组中name这一列的值，作为echarts的饼名字
$ip=json_encode(array_column($rows, 'name'));       //名字
$ips=json_encode($rows) ;       //名字和值

?>
<!DOCTYPE html>
<html>

<head>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"></div>
<div class="choose">
<form class="form-horizontal" action="switch.php" method="post" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">显示项数：</label>
<input type="text" class="form-control" name="num" id="inputEmail3" placeholder="默认前五">
<input type="hidden" name="page" value="<?php echo $page ?>">
<input type="hidden" name="commit" value="<?php echo $commit ?>">
<input type="submit" value="提交">
</div>
<div class="form-group">
<a href="func/excel.class.php" class="btn">导出excel文件</a>
</div>
</form>
</div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));

option = {
title: {
text: '<?php echo $commit ?>',
subtext: '阳水平测试',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: '0%',
y: '10%',
data: <?php echo $ip ?>
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['65%', '60%'],
data:<?php echo $ips; ?>
}]
};

// 为echarts对象加载数据
myChart.setOption(option);
</script>

</html>

以下是connect.php文件：

<?php
try{
$pdo=new PDO('mysql:host=localhost;dbname=dh_access','root','123456');
}catch(PDOException $e){
die($e->getMessage());
}
// 连接数据库，设置字符集
$pdo->exec('set names utf8');

// 设置获取数据格式，之后取数据都按照索引数组取值
$pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
// echo "数据库连接成功";

效果图如下，右键》在新标签中打开图片，可以查看大图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： php 数据库

相关文章推荐

新的分享

章节导航