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

最新推荐文章于 2024-08-07 11:26:48 发布

wxqqq666

最新推荐文章于 2024-08-07 11:26:48 发布

阅读量2.1k

点赞数 1

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

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

版权

本文介绍了如何使用Echarts创建仪表盘，并通过CSS浮动实现表格布局，以同时展示多个仪表盘，适用于展示多种数据，如温度、风速等。提供了代码示例和整合方法。

摘要由CSDN通过智能技术生成

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

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
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录