echarts 餅圖 結合thinkphp 的使用
阿新 • • 發佈：2018-12-30
首先看看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>