fm453/smartchart
1
0
Fork 0
mirror of https://gitee.com/smartchart/smartchart synced 2025-05-05 09:09:24 +08:00
Code Issues Packages Projects Releases Wiki Activity
smartchart/docs/docs/4.布局说明/布局指引/index.html
JohnYan 4763dcf952 v6.0
2022-12-31 09:05:06 +08:00

1776 lines
37 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SmartChart布局说明 # 推荐先观看视屏了解 smartchart布局方式
容器说明 # 容器 说明 定位容器 用于图形定位, 有拖拽和栅格两种. 在界面上新增时会自带;在模板编辑中新增图形时需自行加入容器 图形容器 用于图形选择, 使用id选择器, 如序号为2的容器, 选择器为#container_2 图形 可视化的实际单位, 如选择图形中的table标签, 可使用#container_2 table 6.0版本中拖拽布局方式已可同时满足电脑端/移动端的需求
响应式布局 # 当你新增一个栅格图形时, smartchart会给你一段默认的代码
&lt;div class=&#34;el-col-xs-24 el-col-md-24&#34; style=&#34;padding:0.2rem;height:50%;&#34; &gt; &lt;div style=&#34;height:100%;&#34; id=&#34;container_{name}&#34;&gt;&lt;/div&gt; &lt;/div&gt; el-col-md-24 : 电脑端宽度设定 控制图形父容器的宽度, 整行分成24个栅格, 如果你想让图形占一半, 就可以改成el-col-md-12 el-col-xs-24 ：移动端宽度设定 padding:0.5% 0.5%: 控制图形的上下, 左右内边距, padding: 上 右 下 左 比如你想要图形在容器中往下走一点, 你可写成 padding: 1% 0 0 0 height:50%; 盒子的高度, 相对于父容器的高度， 最外层即浏览器高度 推荐使用拖拽布局（PRO) # 只是用响应式布局可能对于复杂的布局不是很方便, 你也可以采用拖拽绝对定位的方法, 这样你可以随意指定图形的所在位置.">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="" />
<meta property="og:description" content="SmartChart布局说明 # 推荐先观看视屏了解 smartchart布局方式
容器说明 # 容器 说明 定位容器 用于图形定位, 有拖拽和栅格两种. 在界面上新增时会自带;在模板编辑中新增图形时需自行加入容器 图形容器 用于图形选择, 使用id选择器, 如序号为2的容器, 选择器为#container_2 图形 可视化的实际单位, 如选择图形中的table标签, 可使用#container_2 table 6.0版本中拖拽布局方式已可同时满足电脑端/移动端的需求
响应式布局 # 当你新增一个栅格图形时, smartchart会给你一段默认的代码
&lt;div class=&#34;el-col-xs-24 el-col-md-24&#34; style=&#34;padding:0.2rem;height:50%;&#34; &gt; &lt;div style=&#34;height:100%;&#34; id=&#34;container_{name}&#34;&gt;&lt;/div&gt; &lt;/div&gt; el-col-md-24 : 电脑端宽度设定 控制图形父容器的宽度, 整行分成24个栅格, 如果你想让图形占一半, 就可以改成el-col-md-12 el-col-xs-24 ：移动端宽度设定 padding:0.5% 0.5%: 控制图形的上下, 左右内边距, padding: 上 右 下 左 比如你想要图形在容器中往下走一点, 你可写成 padding: 1% 0 0 0 height:50%; 盒子的高度, 相对于父容器的高度， 最外层即浏览器高度 推荐使用拖拽布局（PRO) # 只是用响应式布局可能对于复杂的布局不是很方便, 你也可以采用拖拽绝对定位的方法, 这样你可以随意指定图形的所在位置." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%B8%83%E5%B1%80%E6%8C%87%E5%BC%95/" /><meta property="article:section" content="docs" />
<title>布局指引 | Smartchart开发手册</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css" integrity="sha256-xYKS02sYtnVoCrm66iApIEU3uDnqcvJYdG7A8yzo1sg=" crossorigin="anonymous">
<script defer src="/flexsearch.min.js"></script>
<script defer src="/en.search.min.1ccb98145bb3fdcc53c1644cf31bf89b8c12703ca046029398384c85723cf5ee.js" integrity="sha256-HMuYFFuz/cxTwWRM8xv4m4wScDygRgKTmDhMhXI89e4=" crossorigin="anonymous"></script>
<script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2&#43;Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC&#43;NdcPIvZhzk=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
</head>
<body dir="ltr">
<input type="checkbox" class="hidden toggle" id="menu-control" />
<input type="checkbox" class="hidden toggle" id="toc-control" />
<main class="container flex">
<aside class="book-menu">
<div class="book-menu-content">
<nav>
<h2 class="book-brand">
<a class="flex align-center" href="/"><span>Smartchart开发手册</span>
</a>
</h2>
<div class="book-search">
<input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
<div class="book-search-spinner hidden"></div>
<ul id="book-search-results"></ul>
</div>
<ul>
<li>
<a href="/docs/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/" class="">关于我们</a>
</li>
<li>
<a href="/docs/%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5/" class="">设计理念</a>
</li>
<li>
<input type="checkbox" id="section-c354321856ed6feb84c1b4323285de46" class="toggle" />
<label for="section-c354321856ed6feb84c1b4323285de46" class="flex justify-between">
<a role="button" class="">1.基础操作</a>
</label>
<ul>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%93%E4%B8%9A%E7%89%88%E8%AF%B4%E6%98%8E/" class="">专业版本说明</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">第一个仪表盘</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%A4%8D%E6%9D%82%E6%8A%A5%E8%A1%A8/" class="">第一个复杂报表</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA3D%E5%9C%BA%E6%99%AF/" class="">第一个3D场景</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E7%AC%AC%E4%B8%80%E4%B8%AA%E4%B8%8A%E7%BA%BF%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">第一个上线数据集</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%88%9B%E5%BB%BA%E8%BF%9E%E6%8E%A5%E6%B1%A0/" class="">创建连接池</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BA%94%E7%94%A8%E6%A8%A1%E6%9D%BF/" class="">应用模板</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E6%9D%83%E9%99%90%E7%AE%A1%E7%90%86/" class="">权限管理</a>
</li>
<li>
<input type="checkbox" id="section-ebbdf386fef5a4b61debc89d61d0dadf" class="toggle" />
<label for="section-ebbdf386fef5a4b61debc89d61d0dadf" class="flex justify-between">
<a role="button" class="">Vue相关</a>
</label>
<ul>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/%E4%BD%BF%E7%94%A8VUE/" class="">使用 Vue</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/ElementUI/" class="">Element Ui</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/VUE%E7%9B%B8%E5%85%B3/DataV%E5%BA%94%E7%94%A8/" class="">Data V应用</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-5bb75c87734dfbe4db2b79fa99d34f85" class="toggle" />
<label for="section-5bb75c87734dfbe4db2b79fa99d34f85" class="flex justify-between">
<a role="button" class="">不太重要</a>
</label>
<ul>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E4%B8%BB%E9%A2%98%E5%BA%94%E7%94%A8PRO/" class="">主题应用 Pro</a>
</li>
<li>
<a href="/docs/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E4%B8%8D%E5%A4%AA%E9%87%8D%E8%A6%81/%E5%A4%8D%E5%88%B6%E4%BB%AA%E8%A1%A8%E7%9B%98/" class="">复制仪表盘</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-54fee82a365f217fe67a17292f7959e5" class="toggle" />
<label for="section-54fee82a365f217fe67a17292f7959e5" class="flex justify-between">
<a role="button" class="">2.数据集说明</a>
</label>
<ul>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">数据集开发界面</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/SQL%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Sql数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%95%B0%E6%8D%AE%E5%88%B7%E6%96%B0/" class="">数据集数据刷新</a>
</li>
<li>
<input type="checkbox" id="section-17dce050c02e560c36fb8bcb52fc8432" class="toggle" />
<label for="section-17dce050c02e560c36fb8bcb52fc8432" class="flex justify-between">
<a role="button" class="">特殊数据源</a>
</label>
<ul>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/API%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Api数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E4%BD%BF%E7%94%A8EXCEL%E6%95%B0%E6%8D%AE/" class="">使用 Excel数据</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Python%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">Python数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">自定义数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/webSocket%E6%96%B9%E5%BC%8F/" class="">Web Socket方式</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Elasticsearch%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Elasticsearch数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/JDBC%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Jdbc数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/kafka%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Kafka数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/mongodb%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Mongodb数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/promitheus%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Promitheus数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/Redis%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">Redis数据源</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E7%89%B9%E6%AE%8A%E6%95%B0%E6%8D%AE%E6%BA%90/sqlalchemy%E8%BF%9E%E6%8E%A5/" class="">Sqlalchemy连接</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-b696a5333fb0b6aa0ada2335e5fe864c" class="toggle" />
<label for="section-b696a5333fb0b6aa0ada2335e5fe864c" class="flex justify-between">
<a role="button" class="">数据集形态</a>
</label>
<ul>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E5%85%B1%E4%BA%AB%E6%95%B0%E6%8D%AE%E9%9B%86/" class="">共享数据集</a>
</li>
<li>
<a href="/docs/2.%E6%95%B0%E6%8D%AE%E9%9B%86%E8%AF%B4%E6%98%8E/%E6%95%B0%E6%8D%AE%E9%9B%86%E5%BD%A2%E6%80%81/%E6%95%B0%E6%8D%AE%E9%9B%86%E6%87%92%E5%8A%A0%E8%BD%BD/" class="">数据集懒加载</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-c5a4ac1635ece2dfef28e23678ea9e21" class="toggle" />
<label for="section-c5a4ac1635ece2dfef28e23678ea9e21" class="flex justify-between">
<a role="button" class="">3.图形开发</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%9F%BA%E7%A1%80%E5%9B%BE%E5%BD%A2/" class="">基础图形</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%AE%A1%E7%90%86%E5%9B%BE%E5%BD%A2/" class="">管理图形</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/Echarts%E7%BB%84%E4%BB%B6/" class="">Echarts组件</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/HTML%E7%BB%84%E4%BB%B6/" class="">Html组件</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E8%B0%83%E8%AF%95%E6%97%A5%E5%BF%97/" class="">调试日志</a>
</li>
<li>
<input type="checkbox" id="section-8b7ef748294c9611ad2ef758768793c4" class="toggle" />
<label for="section-8b7ef748294c9611ad2ef758768793c4" class="flex justify-between">
<a role="button" class="">函数方法</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/%E5%9B%BE%E5%BD%A2%E7%AB%AF%E6%95%B0%E6%8D%AE%E5%87%BD%E6%95%B0/" class="">图形端数据函数</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95/Jquery%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" class="">Jquery遍历方法</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-4e8eda9dcb8eb0bfa033731d4401df15" class="toggle" />
<label for="section-4e8eda9dcb8eb0bfa033731d4401df15" class="flex justify-between">
<a role="button" class="">特殊图形</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/LineUp%E5%9B%BE%E5%BD%A2/" class="">Line Up图形</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E4%BD%BF%E7%94%A8%E5%9B%BE%E6%A0%87/" class="">使用图标</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E6%97%A0%E7%BC%9D%E6%BB%9A%E5%8A%A8/" class="">无缝滚动</a>
</li>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2%E5%8A%A0%E8%BD%BD/" class="">特殊图形加载</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-30aee618b2f055fbebe03b9acabc9330" class="toggle" />
<label for="section-30aee618b2f055fbebe03b9acabc9330" class="flex justify-between">
<a role="button" class="">Element Ui组件</a>
</label>
<ul>
<li>
<a href="/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/ElementUI%E7%BB%84%E4%BB%B6/%E5%B8%A6%E5%88%86%E9%A1%B5%E7%9A%84%E8%A1%A8%E6%A0%BC/" class="">带分页的表格</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-478b5d3161d3129d62529b01d6fb834c" class="toggle" checked />
<label for="section-478b5d3161d3129d62529b01d6fb834c" class="flex justify-between">
<a role="button" class="">4.布局说明</a>
</label>
<ul>
<li>
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%B8%83%E5%B1%80%E6%8C%87%E5%BC%95/" class="active">布局指引</a>
</li>
<li>
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%8B%96%E6%8B%BD%E8%87%AA%E5%8A%A8%E5%AF%B9%E9%BD%90/" class="">拖拽自动对齐</a>
</li>
<li>
<a href="/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E5%88%A0%E9%99%A4%E5%AE%B9%E5%99%A8/" class="">删除容器</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-86bbf1d771d855758065f951675b7ee7" class="toggle" />
<label for="section-86bbf1d771d855758065f951675b7ee7" class="flex justify-between">
<a role="button" class="">5.参数及联动钻取</a>
</label>
<ul>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%8F%82%E6%95%B0%E7%BC%96%E5%86%99%E6%96%B9%E6%B3%95/" class="">参数编写方法</a>
</li>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E5%9B%BE%E5%BD%A2%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/" class="">图形联动钻取</a>
</li>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%AD%9B%E9%80%89%E5%99%A8%E6%8C%87%E5%8D%97/" class="">筛选器指南</a>
</li>
<li>
<a href="/docs/5.%E5%8F%82%E6%95%B0%E5%8F%8A%E8%81%94%E5%8A%A8%E9%92%BB%E5%8F%96/%E7%BB%84%E4%BB%B6%E8%87%AA%E5%AE%9A%E4%B9%89%E8%81%94%E5%8A%A8/" class="">组件自定义联动</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-1a4301e6dac08bd3bdb48c3500ec971d" class="toggle" />
<label for="section-1a4301e6dac08bd3bdb48c3500ec971d" class="flex justify-between">
<a role="button" class="">6.进阶开发 Pro</a>
</label>
<ul>
<li>
<input type="checkbox" id="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="toggle" />
<label for="section-3b9f1904c5bd48ec9e224dbf4f4a7d54" class="flex justify-between">
<a role="button" class="">低代码开发</a>
</label>
<ul>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/" class="">模板开发界面</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/" class="">快捷开发</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E4%B8%8A%E4%BC%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6/" class="">上传资源文件</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E8%BE%B9%E6%A1%86%E4%B8%8E%E8%A3%85%E9%A5%B0/" class="">边框与装饰</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/" class="">样式快速上手</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/" class="">ID E开发模式</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/" class="">动画效果</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/" class="">编辑器快捷键</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-2b5b070b11b526d911f2143b53347842" class="toggle" />
<label for="section-2b5b070b11b526d911f2143b53347842" class="flex justify-between">
<a role="button" class="">数据服务</a>
</label>
<ul>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1API/" class="">数据服务 API</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E4%B8%8B%E8%BD%BD/" class="">数据下载</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E6%95%B0%E6%8D%AE%E5%A1%AB%E6%8A%A5/" class="">数据填报</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1/%E5%90%8E%E5%8F%B0API%E5%88%B7%E6%96%B0/" class="">后台 Api刷新</a>
</li>
</ul>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%AE%9E%E6%88%98%E5%A4%A7%E5%B1%8F%E6%A8%A1%E6%9D%BF%E8%BD%AC%E5%8C%96/" class="">实战大屏模板转化</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%A4%87%E4%BB%BD%E6%81%A2%E5%A4%8D%E5%8F%8A%E7%89%88%E6%9C%AC/" class="">备份恢复及版本</a>
</li>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A6%96%E9%A1%B5/" class="">自定义首页</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-bfe0709421fcc9cc6742d70724a0841d" class="toggle" />
<label for="section-bfe0709421fcc9cc6742d70724a0841d" class="flex justify-between">
<a role="button" class="">7.报表嵌入</a>
</label>
<ul>
<li>
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E7%AE%80%E5%8D%95%E5%B5%8C%E5%85%A5/" class="">简单嵌入</a>
</li>
<li>
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/" class="">单点登录</a>
</li>
<li>
<a href="/docs/7.%E6%8A%A5%E8%A1%A8%E5%B5%8C%E5%85%A5/%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%B5%8C%E5%85%A5/" class="">单页面嵌入</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-50ddcd837bca405840b973f89ee4c795" class="toggle" />
<label for="section-50ddcd837bca405840b973f89ee4c795" class="flex justify-between">
<a role="button" class="">8. Django应用</a>
</label>
<ul>
<li>
<a href="/docs/8.Django%E5%BA%94%E7%94%A8/%E5%B5%8C%E5%85%A5Django-Apps/" class="">嵌入 Django Apps</a>
</li>
<li>
<a href="/docs/8.Django%E5%BA%94%E7%94%A8/FAQ/" class="">Faq</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="toggle" />
<label for="section-b7c8fb0b06f0332d83d8a5dbf7287f20" class="flex justify-between">
<a role="button" class="">9. Jupyter应用</a>
</label>
<ul>
<li>
<a href="/docs/9.Jupyter%E5%BA%94%E7%94%A8/Jupyter%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95/" class="">Jupyter中使用指引</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="toggle" />
<label for="section-3f5ca2fcf9ff7a0e49dc6f9a1c867e71" class="flex justify-between">
<a role="button" class="">10.其它</a>
</label>
<ul>
<li>
<a href="/docs/10.%E5%85%B6%E5%AE%83/FAQ/" class="">Faq</a>
</li>
<li>
<a href="/docs/10.%E5%85%B6%E5%AE%83/%E8%AF%95%E7%94%A8%E6%BF%80%E6%B4%BB%E8%AF%B4%E6%98%8E/" class="">试用激活说明</a>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="section-1221ac066d992a43b363728eac9711d8" class="toggle" />
<label for="section-1221ac066d992a43b363728eac9711d8" class="flex justify-between">
<a role="button" class="">11.部署指南</a>
</label>
<ul>
<li>
<input type="checkbox" id="section-df28c15db9b442124658f06e614fc60b" class="toggle" />
<label for="section-df28c15db9b442124658f06e614fc60b" class="flex justify-between">
<a role="button" class="">Linux</a>
</label>
<ul>
<li>
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B/" class="">快速开始</a>
</li>
<li>
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/SQLite3%E7%89%88%E6%9C%AC%E9%94%99%E8%AF%AF/" class="">Sqlite3版本错误</a>
</li>
<li>
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Linux/%E7%94%9F%E4%BA%A7%E9%83%A8%E7%BD%B2/" class="">生产部署</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="https://www.smartchart.cn/" target="_blank" rel="noopener">
官网
</a>
</li>
<li>
<a href="https://gitee.com/smartchart/smartchart" target="_blank" rel="noopener">
Gitee
</a>
</li>
</ul>
</nav>
<script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>
</div>
</aside>
<div class="book-page">
<header class="book-header">
<div class="flex align-center justify-between">
<label for="menu-control">
<img src="/svg/menu.svg" class="book-icon" alt="Menu" />
</label>
<strong>布局指引</strong>
<label for="toc-control">
<img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
</label>
</div>
<aside class="hidden clearfix">
<nav id="TableOfContents">
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#smartchart布局说明">SmartChart布局说明</a></li>
<li><a href="#容器说明">容器说明</a></li>
<li><a href="#响应式布局">响应式布局</a></li>
<li><a href="#推荐使用拖拽布局pro">推荐使用拖拽布局（PRO)</a></li>
<li><a href="#混合布局pro">混合布局(PRO)</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><h3 id="smartchart布局说明">
SmartChart布局说明
<a class="anchor" href="#smartchart%e5%b8%83%e5%b1%80%e8%af%b4%e6%98%8e">#</a>
</h3>
<p>推荐先观看视屏了解
<a href="https://b23.tv/2YwZfCi">smartchart布局方式</a></p>
<h3 id="容器说明">
容器说明
<a class="anchor" href="#%e5%ae%b9%e5%99%a8%e8%af%b4%e6%98%8e">#</a>
</h3>
<img src="https://foruda.gitee.com/images/1662694261562716350/1cbcf1f0_5500438.png" height="200px">
<table>
<thead>
<tr>
<th style="text-align:left">容器</th>
<th style="text-align:center">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">定位容器</td>
<td style="text-align:center">用于图形定位, 有拖拽和栅格两种. 在界面上新增时会自带;在模板编辑中新增图形时需自行加入容器</td>
</tr>
<tr>
<td style="text-align:left">图形容器</td>
<td style="text-align:center">用于图形选择, 使用id选择器, 如序号为2的容器, 选择器为#container_2</td>
</tr>
<tr>
<td style="text-align:left">图形</td>
<td style="text-align:center">可视化的实际单位, 如选择图形中的table标签, 可使用#container_2 table</td>
</tr>
</tbody>
</table>
<blockquote>
<p>6.0版本中拖拽布局方式已可同时满足电脑端/移动端的需求</p>
</blockquote>
<h3 id="响应式布局">
响应式布局
<a class="anchor" href="#%e5%93%8d%e5%ba%94%e5%bc%8f%e5%b8%83%e5%b1%80">#</a>
</h3>
<p>当你新增一个栅格图形时, smartchart会给你一段默认的代码</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;el-col-xs-24 el-col-md-24&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;padding:0.2rem;height:50%;&#34;</span> &gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;height:100%;&#34;</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;container_{name}&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>el-col-md-24 : 电脑端宽度设定
</span></span><span style="display:flex;"><span>控制图形父容器的宽度, 整行分成24个栅格, 如果你想让图形占一半, 就可以改成el-col-md-12
</span></span><span style="display:flex;"><span>el-col-xs-24 ：移动端宽度设定
</span></span><span style="display:flex;"><span>padding:0.5% 0.5%:
</span></span><span style="display:flex;"><span>控制图形的上下, 左右内边距, padding: 上 右 下 左
</span></span><span style="display:flex;"><span>比如你想要图形在容器中往下走一点, 你可写成 padding: 1% 0 0 0
</span></span><span style="display:flex;"><span>height:50%;
</span></span><span style="display:flex;"><span>盒子的高度, 相对于父容器的高度， 最外层即浏览器高度
</span></span></code></pre></div><h3 id="推荐使用拖拽布局pro">
推荐使用拖拽布局（PRO)
<a class="anchor" href="#%e6%8e%a8%e8%8d%90%e4%bd%bf%e7%94%a8%e6%8b%96%e6%8b%bd%e5%b8%83%e5%b1%80pro">#</a>
</h3>
<p>只是用响应式布局可能对于复杂的布局不是很方便, 你也可以采用拖拽绝对定位的方法, 这样你可以随意指定图形的所在位置.
方法可参考视屏
<a href="https://www.bilibili.com/video/BV1PD4y1c7uz/">拖拽说明</a>
你可以配合使用 ”模板开发“ 来实现高度定制化的效果， 参考
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/">模板开发指引</a></p>
<h3 id="混合布局pro">
混合布局(PRO)
<a class="anchor" href="#%e6%b7%b7%e5%90%88%e5%b8%83%e5%b1%80pro">#</a>
</h3>
<p>你可以考虑先用响应式布局把整体框架画出来, 如果要加一下装饰的情况, 可以用绝对定位(拖拽布局)来实现</p>
</article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<div>
<a class="flex align-center" href="https://gitee.com/smartchart/smartchart/docs/content/docs/4.%e5%b8%83%e5%b1%80%e8%af%b4%e6%98%8e/%e5%b8%83%e5%b1%80%e6%8c%87%e5%bc%95.md" target="_blank" rel="noopener">
<img src="/svg/edit.svg" class="book-icon" alt="Edit" />
<span>Edit this page</span>
</a>
</div>
</div>
<script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script>
</footer>
<div class="book-comments">
</div>
<label for="menu-control" class="hidden book-menu-overlay"></label>
</div>
<aside class="book-toc">
<div class="book-toc-content">
<nav id="TableOfContents">
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#smartchart布局说明">SmartChart布局说明</a></li>
<li><a href="#容器说明">容器说明</a></li>
<li><a href="#响应式布局">响应式布局</a></li>
<li><a href="#推荐使用拖拽布局pro">推荐使用拖拽布局（PRO)</a></li>
<li><a href="#混合布局pro">混合布局(PRO)</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink