1:菜鸟引入js

  <!-- 引入 echarts.js -->

    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2

（1）：路由：

 Route::get('echarts','FangController@echarts');

（2）：laeavel 控制器代码：

    public function   echarts(){

//        模型查询数据

       $data=Fang::fangStatusCount();

//       携带数据返回视图

        return view('fang.echarts',compact('data'));

    }

（3）模型代码：

<?php

namespace App\models;

use Illuminate\Database\Eloquent\Model;

class Fang extends Model

{

    //链接数据库表名

    protected $table = 'fangs';

    public static function fangStatusCount()

    {

//房源总

        $total = self::count();

//已租房

        $czTotal = self::where('fang_status', 0)->count();

// 未租房

        $wczTotal = $total - $czTotal;

        return [

            'total' => $total,

            'czTotal' => $czTotal,

            'wczTotal' => $wczTotal

        ];

    }

}

3:在html中定义显示图表的容器

<body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

    <div id="main" style="width: 600px;height:400px;"></div>

</body>

4:script

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据

    var option = {

        series : [

            {

                name: '访问来源',

                type: 'pie',

                radius: '55%',

                roseType: 'angle',

                data:[

                    //这里是控制器传过来的值

                    {value:{{$data['czTotal']}}, name:'已租房'},

                    {value:{{$data['wczTotal']}}, name:'未租房'},

                ]

            }

        ]

    };

    // 使用刚指定的配置项和数据显示图表。

    myChart.setOption(option);

</script>

5：效果图：

echarts可视显示已租未租的更多相关文章

  1. 利用try-catch判断变量是已声明未赋值还是未声明

    目的是如果一个变量是已声明未赋值,就可以直接赋值,并且不能改变变量的作用域: 如果未声明的话,就重新声明, 在网上搜了下,常见的方法是if(typeof(a)=='undefined'){var a= ...

  2. 利用try-catch判断变量是已声明未声明还是未赋值

    原文 利用try-catch判断变量是已声明未声明还是未赋值 这篇文章主要介绍了利用try-catch判断变量是已声明未赋值还是未声明,需要的朋友可以参考下 目的是如果一个变量是已声明未赋值,就可以直 ...

  3. day116:MoFang:显示背包解锁/未解锁格子数&显示背包的道具物品&背包解锁

    目录 1.显示背包的已解锁/未解锁格子数 2.显示背包中的道具物品 3.用户购买道具的时候,判断背包存储是否达到上限 4.道具也可以使用积分购买 5.在商城界面根据金额/积分显示不同商品 6.背包解锁 ...

  4. 为什么手机连接wifi会显示已停用？

    1.通常导致手机连接WiFi显示“已停用”故障的原因是由于无线路由器“安全模式”设置不当造成的,对此我们可以通过以下方法来解决: 2.根据无线路由器背面的信息(包括路由器IP地址,登陆用户名和密码), ...

  5. 关于win7右下角显示“音频服务未运行”的解决方法

    今天打开电脑发现右下角的的小喇叭多了个叉叉,显示“音频服务未运行”,百度了一下,解决方法还是挺多的,一下是百度到的解决方法,希望可以帮到出现这个问题的朋友们. 解决方法:(转载的) 1.Windows ...

  6. ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

    1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...

  7. echarts报表显示%+没有0

    function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...

  8. http请求在ie中F12查看显示已挂起

    页面有解析和运算工作之后 http新请求在ie中F12查看显示已挂起,http post ,请求返回少量数据

  9. API文档打开显示'已取消到该网页的导航'的解决方法

    从网上下载的API,点击目录右边显示框显示“已取消到该网页的导航”.出现这样的问题并不是文档本身的问题,而是文档属性设置的问题. 这时候只要右键文件选择“属性”-在打开的界面中点击“解除锁定”-点击” ...

随机推荐

  1. wget: unable to resolve host address ‘dl.grafana.com’的解决方法

    [root@Server-qnrsyp system]# wget --no-check-certificate https://dl.grafana.com/oss/release/grafana_ ...

  2. 【VUE】vue中遍历数组和对象

    一.遍历对象 对象数据 cities:{ "A":[{ "id": 56, "spell": "aba", " ...

  3. NSTimer、CADisplayLink、GCD 三种定时器的用法 —— 昉

    在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 在iOS中有很多方法完成定时器的任务,例如 NSTimer.CADisp ...

  4. rust 实战 - 实现一个线程工作池 ThreadPool

    如何实现一个线程池 线程池:一种线程使用模式.线程过多会带来调度开销,进而影响缓存局部性和整体性能.而线程池维护着多个线程,等待着监督管理者分配可并发执行的任务.这避免了在处理短时间任务时创建与销毁线 ...

  5. java-数据库操作(JDBC)

    前言:JDBC用到的API和常用方法 DriverMannager类 加载驱动并创建与数据库的连接,通常使用Class类的静态方法forName()来实现加载驱动,使用getConnection(St ...

  6. CreateEvent进程同步

    CreateEvent进程间同步   CreateEvent可以创建或是打开一个命名或是未命名的event对象. HANDLE CreateEvent(   LPSECURITY_ATTRIBUTES ...

  7. MySQL数据库的导入方法

    问题 如何导入MySQL数据库 解决方案 1. 概述MySQL数据库的导入,有两种方法:1) 先导出数据库SQL脚本,再导入:2) 直接拷贝数据库目录和文件. 在不同操作系统或MySQL版本情况下,直 ...

  8. python控制浏览器上传文件

    自动化爬虫方法和库很多,难点大多数在登录.可以大致分为:普通验证码,扫码登录,QQ一键登录,拖动验证,无痕验证,人工识别(比如12306登录) 万能大法可以破解一切以上需求,自动控制浏览器行为 参考文 ...

  9. 二，配置jdk,安装tomcat.以及tomcat项目的发布

    1.jdk配置 一.环境准备 Windows10 jdk-9.0.1 二.下载并安装JDK 选择一个适合自己的JDK版本下载并安装即可,具体流程不详述. 三.环境变量配置 1.右键桌面上"我 ...

  10. TCP三次握手原理

    本文主要讲述的是 1.TCP协议三次握手原理,以及为什么要三次握手,两次握手带来的不利后果. 2.TCP协议四次挥手原理,为什么要四次挥手. TCP协议三次握手原理: 首先,给张图片,建立TCP三次握 ...