首先看看echars官网上饼图用法的实例(如下图):
然后来说说这个饼图结合Thinkphp的用法。
思路是这样的:
1.控制器先查询出要的数据包括:legend里data的数据,series里data的数据。
2.把得到的数据处理成json数据,分配到视图。
3.利用分配过来的数据,得到想要的饼图。
具体代码如下:
控制器:
public function index(){
//var_dump($res_es);
$gno = M("auth_group")->count();
$this->assign('gno',$gno);
$uno = M("auth_user")->count();
$this->assign('uno',$uno);
$ino = M("info")->count();
$this->assign('ino',$ino);
$bcno = M("bike_company")->count();
$this->assign('bcno',$bcno);
$uid = $_SESSION['auth']['id'];
//暂时先将超级管理员区别开
if($uid!=1){
//非管理员,根据行政级别进行过滤
//echo "x";
//根据行政级别,做相应的过滤
$province = $_SESSION['auth']['province'];
$city = $_SESSION['auth']['city'];
$area = $_SESSION['auth']['area'];
if($_SESSION['auth']['class']=='省级'){
$sql .= " and province = '$province' ";
$where["province"] = $_SESSION['auth']['province'];
}
if($_SESSION['auth']['class']=='市级'){
$sql .= " and province = '$province' ";
$sql .= " and city = '$city' ";
$where["province"] = $_SESSION['auth']['province'];
$where["city"] = $_SESSION['auth']['city'];
}
if($_SESSION['auth']['class']=='区级'){
$this->assign('ibno',1);
$this->assign('uno',1);
$this->assign('gno',1);
$sql_area_count = "SELECT COUNT(*) as count FROM dwz_info where area = '$area'";
$count = M()->query($sql_area_count);
$this->assign('ino',$count[0]['count']);
$sql .= " and province = '$province' ";
$sql .= " and city = '$city' ";
$sql .= " and area = '$area' ";
$where["province"] = $_SESSION['auth']['province'];
$where["city"] = $_SESSION['auth']['city'];
$where["area"] = $_SESSION['auth']['area'];
}
$res_es = $this->getbikes_pca($province,$city,$area);
$buckets = $res_es['aggregations'][3]['buckets'];
//var_dump($res_es['hits']['total']);
foreach($buckets as $k => $v){
//var_dump($v);
$arr1[]=$v['key'];
$temp['name']=$v['key'].'('.$v['doc_count'].')';
$temp['value']=$v['doc_count'];
$arr2[]=(object)$temp;
}
//var_dump($arr1);
//var_dump($arr2);
$str1 = json_encode($arr1);
$str2 = json_encode($arr2);
$this->assign('length',$length);
$this->assign('str1',$str1);
//var_dump($str2);
$this->assign('str2',$str2);
$this->assign('bno',$res_es['hits']['total']);
$this->display();
}else{
$sql_area_count = 'SELECT COUNT(DISTINCT area) as count FROM dwz_info';
$count = M()->query($sql_area_count);
$this->assign('ibno',$count[0]['count']);
//超级管理员暂时去数据库获取
//echo "xx";
$data=array();
//获取每家公司的单车数量
$list = M("bike_company")->select();
$this->assign('list1',$list);
//var_dump($list);
foreach($list as $k=>$v){
$nm = $v['title'];
//var_dump($nm);
//模糊查询相关的记录情况
//查询的同时,将当前时刻的数据记录到数据库表
$arr = explode('|',$v['keyword']);
//var_dump($arr);
//echo sizeof($arr);
$condition = '' ;
foreach($arr as $k=>$v){
if($k < sizeof($arr)-1)
{
if($v=='ofo'){
$condition .= " name like '$v' or ";
}else{
$condition .= " name like '$v%' or ";
}
/*if($v=='' or $v=='NULL' or $v=='null'){
$condition .= " name like '' or ";
}else{
$condition .= " name like '$v%' or ";
}*/
}
else
{
if($v=='ofo'){
$condition .= " name like '$v' ";
}else{
$condition .= " name like '$v%' ";
}
/*
if($v=='' or $v=='NULL' or $v=='null'){
$condition .= " name like '' ";
}else{
$condition .= " name like '$v%' ";
}*/
}
}
//var_dump($condition);
//$name = $v['title'];
$sql="select count(*) as numbers ,' $nm ' AS name from dwz_bike where ".$condition;
$Model = M();
$res = $Model->query($sql);
//var_dump($res);
$data[]=$res;
}
//一定的时间记录一次,做数量变化统计图表
//var_dump($data);
$arr1=array();
$arr2=array();
$length=sizeof($data);
$bnoo=0;
foreach($data as $k => $v){
//var_dump($v);
$arr1[]=$v[0]['name'];
$temp['name']=$v[0]['name'].'('.$v[0]['numbers'].')';
$temp['value']=$v[0]['numbers'];
$arr2[]=(object)$temp;
$bnoo+=$v[0]['numbers'];
}
//$arr1[]='其他';
//$temp['value']=$bno - $bnoo;
//$temp['name']='其他'.'('.$temp['value'].')';
//$arr2[]=(object)$temp;
$bno = 0;
//var_dump($arr2);
foreach($arr2 as $k=>$v){
$bno = $bno + $v->value;
}
$this->assign('bno',$bno);
//var_dump($arr1);
//var_dump($arr2);
$str1 = json_encode($arr1);
$str2 = json_encode($arr2);
$this->assign('length',$length);
$this->assign('str1',$str1);
//var_dump($str2);
$this->assign('str2',$str2);
$this->assign('title','首页');
$this->display();
}
视图:
<extend name="Public:left" /> <block name="main"> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script> <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> <div class="row tile_count"> <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> <span class="count_top"><i class="fa fa-group"></i> 所有分组 </span> <div class="count">{$gno}</div> <!--<span class="count_bottom"><i class="green">4% </i> </span>--> </div> <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> <span class="count_top"><i class="fa fa-user"></i> 所有用户 </span> <div class="count">{$uno}</div> <!--<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>--> </div> <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> <span class="count_top"><i class="fa fa-pie-chart"></i> 所有区块 </span> <div class="count">{$ibno}</div> <!--<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>--> </div> <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> <span class="count_top"><i class="fa fa-sitemap"></i> 所有车位 </span> <div class="count">{$ino}</div> <!--<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>--> </div> <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> <span class="count_top"><i class="fa fa-user-plus"></i> 所有车企 </span> <div class="count">{$bcno}</div> <!--<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>--> </div> <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count"> <span class="count_top"><i class="fa fa-bicycle"></i> 所有车辆 </span> <div class="count">{$bno}</div> <!--<span class="count_bottom"><i class="green"><i class="fa fa-sort-asc"></i>3% </i> From last Week</span>--> </div> </div> <div id="main" style="width: 100%;height:800px;"></div> <!--可以隔一定时间记录一次,然后显示变化情况--> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //var test = genData(50); var jstr1 = $.parseJSON('{$str1}'); var jstr2 = $.parseJSON('{$str2}'); option = { title : { text: '当前各个单车公司单车数量统计表', //subtext: '纯属虚构', x:'left' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { type: 'scroll', orient: 'vertical', right: 10, top: 20, bottom: 20, data: jstr1 }, series : [ { name: '车企', type: 'pie', radius : '55%', center: ['40%', '50%'], data: jstr2, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); function realtime(){ location.reload(); console.log("realtime"); } setInterval("realtime()",60000) </script> </block>
本文介绍了如何结合Echarts饼图组件与Thinkphp框架来展示数据。通过控制器查询所需数据,转化为JSON并传递给视图,最终在前端渲染出饼图。

2571

被折叠的 条评论
为什么被折叠?



