echarts 饼图 结合thinkphp 的使用

本文介绍了如何结合Echarts饼图组件与Thinkphp框架来展示数据。通过控制器查询所需数据,转化为JSON并传递给视图,最终在前端渲染出饼图。

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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ougexingfuba

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值