echarts 饼图 结合thinkphp 的使用

首先看看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>