echarts可视显示已租未租
2024-08-29 02:15:02
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:效果图:
最新文章
- UIPickerView的使用(二)
- JVM之类加载器中篇
- 设计模式-观察者模式(List列表维护观察者)
- Downloading the Source
- vim的列编辑操作
- [需再总结]SSH整合代码生成器
- DTCMS栏目首页,循环输出子栏目和新闻
- mysqli 扩展库的预处理技术(mysqli_stmt)
- SharePoint 设置Lookup 字段的值
- Google GFS文件系统深入分析
- 百度地图api基本用法
- bmp图片显示
- Spring框架 jar包下载
- Android Button常用法
- os2
- Feign api调用方式
- keepalived+mysql 高可用集群
- 下拉框多选实现回显及sql
- PATtest1.3:最大子列和
- Java基础教程:Lambda表达式
热门文章
- cookie、session、jsession 关系
- UITabBarController的基本使用
- Exception in thread ";main"; java.lang.UnsupportedClassVersionError: org/apache/zeppelin/server/ZeppelinServer : Unsupported major.minor version 52.0
- Java中==、equals、hashCode的区别
- 04 前端之BOM与DOM
- Linux性能优化实战(二)
- 《PHP程序员面试笔试宝典》——在被企业拒绝后是否可以再申请?
- 1、网络并发编程--简介、软件开发架构、OSI七层协议
- erange.heetian.com 回显任意账号
- vue的编译作用域