echarts可视显示已租未租

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：效果图：

 

posted @ 2021-11-22 21:10  王越666  阅读(26)  评论(0)  编辑  收藏  举报