用一个案例来展示tp3.2.3使用echarts获取动态分析图
echarts获取实例： https://echarts.baidu.com/examples/
一、确立自己系统需要的分析需求
这里博主将会制作一个使用下拉框动态获取数据库科研表的立项时间，匹配年份来动态展示各年份、各个专业、各个学院的
科研数量
二、下载自己需要使用的模板
根据需求确立自己到底需要怎样的动态图，这里博主使用的是柱状图。
三、下载模板并复制到自己的页面中
略
四、对前台页面进行处理，增加了需求部分内容
删除无用数据，添加jquery引用，添加ajax请求，添加select下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="<?php echo ADMIN_JS; ?>/jquery.js"></script>
<script type="text/javascript" src="<?php echo ADMIN_JS; ?>/jquery-1.4.2.min.js"></script>
</head>
<body>
<form>
<div id="container" style="height: 500px; width: 80%"></div>
<div> <select name="date1" style="width: 200px;height: 30px" id ="date1">
<volist id="as2" name="date1">
<option value="{$as2.date1}">{$as2.date1}</option>
</volist>
</select>
<input type="button" name="" value="查询" onclick="carTest()">
<!-- <button onclick="carTest()">提交</button> -->
</form>
</body>
<script type="text/javascript">
function carTest(){
var flag = true;
test(flag);
return false;
}
function test (flag){
if(flag){
var arr1=[],arr2=[],arr3=[],arr4=[],arr5=[];
function arrTest(){
$.ajax({
type:"post",
async:false,
dataType:"json",
data:{date2:$("#date1 option:selected").val()},
url:"http://localhost/work1/index.php/Home/Scientific/look3",
success:function(result){
console.log(result);
if (result) {
for (var i = 0; i < result.length; i++) {
arr1.push(result[i].xyname);
arr2.push(result[i].xj);
arr3.push(result[i].sj);
arr4.push(result[i].shj);
arr5.push(result[i].gj);
}
}
},
error:function(){
alert('加载失败；');
}
})
return arr1,arr2,arr3,arr4,arr5;
}
arrTest();
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '堆叠柱状图';
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['校级','市厅级','省部级','国家级']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : arr1
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'校级',
type:'bar',
barWidth:'20px',
data:arr2
},
{
name:'市厅级',
type:'bar',
data:arr3
},
{
name:'省部级',
type:'bar',
data:arr4
},
{
name:'国家级',
type:'bar',
// stack: '分类',
data:arr5
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
flag = false;
}
}
</script>
<script type="text/javascript">
window.onload = function()
{ var flag = true;
test(flag);
return false;
};
// $(document).ready(function(){arrTest(); return false;});
</script>
</html>可以参考博主发的进行相应的修改，
前方高危，请注意：
1.在form表单中如果使用<button></button>按钮他会默认为<input type="submit"> 要么直接使用<input type="button">
要么设置<button type= "button"></button>;要么设置为<form οnsubmit="return false">都可避免一个问题：ajax请求数据后，select更换数据，会闪退回原先的数据。
2.<select name="date1" style="width: 200px;height: 30px" id ="date1">
<volist id="as2" name="date1">
<option value="{$as2.date1}">{$as2.date1}</option>
</volist>
</select>
这个就是前后端交互的动态获取数据库信息的下拉框，这里注意<volist>的name值为你查询出来虚拟表的字段名。
值一定要匹配上；select的name值后台也有用到后面会说；
3.在tp3.2中这个ajax URL和后台转json数据的写法和tp5是不同的，这里是tp3的，有需要的自己更改；
这个坑博主踩了半天才踩平，给个技巧，可以通过浏览器F12进行调试，查看url书写是否有误，浏览器调试功能多加利用。如果你的地址直接可以在浏览器打开，那么就不是url的错误，还有就是这边的数据格式必须要进行接收，否则一直会出问题。
4.转json时必须注意的是tp3 的是 $this->ajaxReturn($fx,'json');没有json_decode() 如果使用的是json_decode()会返回类似json数据的String格式数据，怎么判断，数据两边加了 “ ” 。这个坑不注意就会忽略，还找不到问题所在。
五、控制器的书写
//分析页面
public function look2(){
$sql1 ="select DISTINCT date_format(start_date,'%Y') date1 from tp_items ";
$tec = M('');
$date1 = $tec ->query($sql1);
return $date1;
}
public function look1(){
$date1 = $this->look2();
$this ->assign ('date1',$date1);
$this->display("look");
}
public function look3($date2){
$sql1=" select b.xyname,
count(case when b.rank='校级' then 1 else null
end) as 'xj',
count(case when b.rank='市厅级' then 1 else null end) as 'sj',
count(case when b.rank='省部级' then 1 else null end) as 'shj',
count(case when b.rank='国家级' then 1 else null end) as 'gj' from
(select a.xyname,tp_items.rank,tp_items.start_date from tp_items,(select xyname ,te_id from tp_teacher ) a where a.te_id = tp_items.jsid )b where b.start_date like '$date2%' group BY b.xyname ";
$tec = M('');
$fx = $tec ->query($sql1);
$this->ajaxReturn($fx,'json');
}
这里需要注意的是这个也是需要一一对应的，这里的$this->assign("date1",$date1);就是下拉框中<volist>需要的，
各个建议将渲染模板和获取数据信息分开，便于管理。
最后就是效果展示了：
如有问题请留言，大家共同探讨......
4490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
