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/1.基础操作/第一个仪表盘/index.html
JohnYan 615fc1604f v6.5
2023-05-05 17:36:52 +08:00

1794 lines
36 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="由于版本的变更, 一些图标可能会有一些变化, 但位置无太大的变化
新建仪表盘 # 在开发模式下，滑动“开发管理” -&gt;&ldquo;仪表盘&rdquo;-&gt; &ldquo;新增Dashboard&rdquo; 填写相应信息后点击“保存” 点击进入仪表盘开发, 注意点击 &ldquo;E&rdquo; 字!! 点击新增(注意拖拽布局功能为PRO版本, 后续免费版本中将无法使用), 如果你坚持使用免费版本功能, 请使用新增栅格组件, 具体布局方式参考 数据集编辑 # 点开“数据集” - 输入以下SQL后，点击“保存并刷新”, 关闭数据集编辑界面 select H1 as heroname, sum(qty) as 出场数 from smartdemo2 group by H1 order by sum(qty) desc 图形编辑 # 点开“图形编辑” 点击“图形”，可以选择基础图形, 也可以使用图形商店,第一次使用可能要你进行登记，按提示操作即可， 在商店中找到合适的图形点击，会自动复制到剪贴板 贴粘到图形编辑器后，点击保存， 关闭图形编辑框 拖拽布局 # 重复以上步骤，再新增一个， 你可以使用拖拽的方式, 移动到不同的地方 当你熟悉smartchart的基础操作后, 可以学习使用第6章节&quot;进阶开发&quot;中的&quot;低代码开发&quot;方式">
<meta name="theme-color" content="#FFFFFF">
<meta name="color-scheme" content="light dark"><meta property="og:title" content="第一个仪表盘" />
<meta property="og:description" content="由于版本的变更, 一些图标可能会有一些变化, 但位置无太大的变化
新建仪表盘 # 在开发模式下，滑动“开发管理” -&gt;&ldquo;仪表盘&rdquo;-&gt; &ldquo;新增Dashboard&rdquo; 填写相应信息后点击“保存” 点击进入仪表盘开发, 注意点击 &ldquo;E&rdquo; 字!! 点击新增(注意拖拽布局功能为PRO版本, 后续免费版本中将无法使用), 如果你坚持使用免费版本功能, 请使用新增栅格组件, 具体布局方式参考 数据集编辑 # 点开“数据集” - 输入以下SQL后，点击“保存并刷新”, 关闭数据集编辑界面 select H1 as heroname, sum(qty) as 出场数 from smartdemo2 group by H1 order by sum(qty) desc 图形编辑 # 点开“图形编辑” 点击“图形”，可以选择基础图形, 也可以使用图形商店,第一次使用可能要你进行登记，按提示操作即可， 在商店中找到合适的图形点击，会自动复制到剪贴板 贴粘到图形编辑器后，点击保存， 关闭图形编辑框 拖拽布局 # 重复以上步骤，再新增一个， 你可以使用拖拽的方式, 移动到不同的地方 当你熟悉smartchart的基础操作后, 可以学习使用第6章节&quot;进阶开发&quot;中的&quot;低代码开发&quot;方式" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://help.smartchart.cn/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/" /><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.ba2874ca2d634efe85c9b5912b9a5f8fa8d39fcfeff3d08ca8779eb1b2f08104.js" integrity="sha256-uih0yi1jTv6FybWRK5pfj6jTn8/v89CMqHeesbLwgQQ=" 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" checked />
<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="active">第一个仪表盘</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>
<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/%E9%82%AE%E4%BB%B6%E5%8F%91%E9%80%81%E6%95%B0%E6%8D%AE%E6%BA%90/" class="">邮件发送数据源</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" />
<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="">布局指引</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>
<li>
<a href="/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E9%9B%86%E6%88%90AI%E7%94%9F%E6%88%90/" class="">集成 Ai生成</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="#新建仪表盘">新建仪表盘</a></li>
<li><a href="#数据集编辑">数据集编辑</a></li>
<li><a href="#图形编辑">图形编辑</a></li>
<li><a href="#拖拽布局">拖拽布局</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</aside>
</header>
<article class="markdown"><p><strong>由于版本的变更, 一些图标可能会有一些变化, 但位置无太大的变化</strong></p>
<h3 id="新建仪表盘">
新建仪表盘
<a class="anchor" href="#%e6%96%b0%e5%bb%ba%e4%bb%aa%e8%a1%a8%e7%9b%98">#</a>
</h3>
<ul>
<li>在开发模式下，滑动“开发管理” -&gt;&ldquo;仪表盘&rdquo;-&gt; &ldquo;新增Dashboard&rdquo;</li>
</ul>
<p>
<img referrerpolicy="no-referrer" src="https://foruda.gitee.com/images/1669707145075302361/79957605_5500438.png" alt="输入图片说明" title="屏幕截图"/></p>
<ul>
<li>填写相应信息后点击“保存”</li>
</ul>
<img src="https://images.gitee.com/uploads/images/2021/1218/133242_50b4e853_5500438.png" referrerpolicy="no-referrer">
<ul>
<li>点击进入仪表盘开发, 注意点击 &ldquo;E&rdquo; 字!!</li>
</ul>
<img src="https://images.gitee.com/uploads/images/2021/1218/133352_6c646f23_5500438.png" referrerpolicy="no-referrer">
<ul>
<li>点击新增(注意拖拽布局功能为PRO版本, 后续免费版本中将无法使用),
如果你坚持使用免费版本功能, 请使用新增栅格组件,
<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/">具体布局方式参考</a></li>
</ul>
<p>
<img referrerpolicy="no-referrer" src="https://foruda.gitee.com/images/1669707413984136049/f8a9210d_5500438.png" alt="输入图片说明" title="屏幕截图"/></p>
<h3 id="数据集编辑">
数据集编辑
<a class="anchor" href="#%e6%95%b0%e6%8d%ae%e9%9b%86%e7%bc%96%e8%be%91">#</a>
</h3>
<ul>
<li>点开“数据集”</li>
</ul>
<img src="https://images.gitee.com/uploads/images/2021/1218/133934_9498a8c4_5500438.png" referrerpolicy="no-referrer">
- 输入以下SQL后，点击“保存并刷新”, 关闭数据集编辑界面
<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-sql" data-lang="sql"><span style="display:flex;"><span><span style="color:#66d9ef">select</span> H1 <span style="color:#66d9ef">as</span> heroname, <span style="color:#66d9ef">sum</span>(qty) <span style="color:#66d9ef">as</span> <span style="color:#960050;background-color:#1e0010">出场数</span> <span style="color:#66d9ef">from</span> smartdemo2
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">group</span> <span style="color:#66d9ef">by</span> H1
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">order</span> <span style="color:#66d9ef">by</span> <span style="color:#66d9ef">sum</span>(qty) <span style="color:#66d9ef">desc</span>
</span></span></code></pre></div><p>
<img referrerpolicy="no-referrer" src="https://foruda.gitee.com/images/1669707698420587697/183b1412_5500438.png" alt="输入图片说明" title="屏幕截图"/></p>
<h3 id="图形编辑">
图形编辑
<a class="anchor" href="#%e5%9b%be%e5%bd%a2%e7%bc%96%e8%be%91">#</a>
</h3>
<ul>
<li>点开“图形编辑”</li>
</ul>
<img src="https://images.gitee.com/uploads/images/2021/1218/134447_6c2ec9da_5500438.png" referrerpolicy="no-referrer">
<ul>
<li>点击“图形”，可以选择基础图形, 也可以使用图形商店,第一次使用可能要你进行登记，按提示操作即可， 在商店中找到合适的图形点击，会自动复制到剪贴板</li>
</ul>
<p>
<img referrerpolicy="no-referrer" src="https://foruda.gitee.com/images/1669708103480902230/4e3d0b9d_5500438.png" alt="输入图片说明" title="屏幕截图"/></p>
<ul>
<li>贴粘到图形编辑器后，点击保存， 关闭图形编辑框</li>
</ul>
<h3 id="拖拽布局">
拖拽布局
<a class="anchor" href="#%e6%8b%96%e6%8b%bd%e5%b8%83%e5%b1%80">#</a>
</h3>
<ul>
<li>重复以上步骤，再新增一个， 你可以使用拖拽的方式, 移动到不同的地方</li>
</ul>
<blockquote>
<p>当你熟悉smartchart的基础操作后, 可以学习使用第6章节&quot;进阶开发&quot;中的&quot;低代码开发&quot;方式</p>
</blockquote>
</article>
<footer class="book-footer">
<div class="flex flex-wrap justify-between">
<div>
<a class="flex align-center" href="https://gitee.com/smartchart/smartchartDoc/edit/master/content/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.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="#新建仪表盘">新建仪表盘</a></li>
<li><a href="#数据集编辑">数据集编辑</a></li>
<li><a href="#图形编辑">图形编辑</a></li>
<li><a href="#拖拽布局">拖拽布局</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
</main>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink