Echarts多行多列仪表盘-利用浮动实现表格布局

最新推荐文章于 2023-08-31 17:06:43 发布

wxqqq666

最新推荐文章于 2023-08-31 17:06:43 发布

阅读量2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript css

本文链接：https://blog.csdn.net/wxqqq666/article/details/103639675

版权

年终事情一大把项目科研两手抓

Echarts仪表盘

Echarts官网仪表盘Demo地址
我的需求是每一时刻要呈现多种数据（温度、风速、盐度、有效波高）考虑采用类似表格的布局方式来同时展示多个仪表盘以展示多种数据。

CSS浮动实现表格布局

首先利用css浮动实现表格布局代码如下

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <style type="text/css">
        .cell{
    float:left; width:300px; height:300px; border:1px solid; }
        .dcell{
    clear:both; }
        </style>
   </head>
   <body style="height: 100%; margin: 0">
       <!-- <div id="container" style="height: 100%"></div> -->
       <div id="dialog">
        <div id="container1" class="cell"></div>
        <div id="container2" class="cell"></div>
        <div id="container3" class="cell"></div>
        <div class="dcell">
        <div id="container4" class="cell"></div>
        <div id="container5" class="cell"></div>
        <div id="container6" class="cell"></div>
       </div> 
   </body>
</html>

整合

两者结合即可实现如下效果
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html style="height: 100%"

最低0.47元/天解锁文章

wxqqq666

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Echarts多行多列仪表盘-利用浮动实现表格布局

年终事情一大把项目科研两手抓Echarts仪表盘Echarts官网仪表盘Demo地址我的需求是每一时刻要呈现多种数据（温度、风速、盐度、有效波高）考虑采用类似表格的布局方式来同时展示多个仪表盘以展示多种数据。CSS浮动实现表格布局首先利用css浮动实现表格布局代码如下<!DOCTYPE html><html style="height: 100%"> ...
复制链接

扫一扫