mirror of
https://gitee.com/smartchart/smartchart
synced 2025-05-05 00:59:25 +08:00
1829 lines
40 KiB
HTML
1829 lines
40 KiB
HTML
<!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="应用场景 # 输入控件,如输入框,筛选器,多选,按钮… 显示组件, 文本, 图片, 视屏… 表格组件 如果你还不熟悉html, 建意先花几分钟看下文档, 推荐 HTML基础 实际应用中有不熟悉的组件, 你都可以通过baidu搜索到, 如时间选择器 html组件转化为smartchart组件 # 比如我们要实现一个有多选项和按钮的网页元素 从各大搜索平台上我们可以找到html的代码是：
|
||
<label><input type="checkbox">孙尚香</label> ..... <button id='id_select0'>提交</button> 那么我们可以直接在图形编辑器写上
|
||
let dataset=__dataset__; let table = ''; table = `<label><input type="checkbox">孙一香</label> <label><input type="checkbox">孙二香</label> <label><input type="checkbox">孙三香</label>` table = table + "<button id='id_select0'>提交</button>" dom__name__.innerHTML=table; 但是由于我们是要通过传入的数据动态变化的，所以只需要做简单修改
|
||
let dataset=__dataset__; let table = ''; for (let i=1;i<dataset.length;i++){ table = `${table}<label><input type="checkbox"/>${dataset[i][0]}</label> ` } table = table + "<button id='id_select__name__'>提交</button>" dom__name__.innerHTML=table; 所有html你都可以进行转化成smartchart组件， 你可以通过学习”万能表格系列视屏“ 来了解通用组件开发 第一波 第二波 第三波">
|
||
<meta name="theme-color" content="#FFFFFF">
|
||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="" />
|
||
<meta property="og:description" content="应用场景 # 输入控件,如输入框,筛选器,多选,按钮… 显示组件, 文本, 图片, 视屏… 表格组件 如果你还不熟悉html, 建意先花几分钟看下文档, 推荐 HTML基础 实际应用中有不熟悉的组件, 你都可以通过baidu搜索到, 如时间选择器 html组件转化为smartchart组件 # 比如我们要实现一个有多选项和按钮的网页元素 从各大搜索平台上我们可以找到html的代码是：
|
||
<label><input type="checkbox">孙尚香</label> ..... <button id='id_select0'>提交</button> 那么我们可以直接在图形编辑器写上
|
||
let dataset=__dataset__; let table = ''; table = `<label><input type="checkbox">孙一香</label> <label><input type="checkbox">孙二香</label> <label><input type="checkbox">孙三香</label>` table = table + "<button id='id_select0'>提交</button>" dom__name__.innerHTML=table; 但是由于我们是要通过传入的数据动态变化的，所以只需要做简单修改
|
||
let dataset=__dataset__; let table = ''; for (let i=1;i<dataset.length;i++){ table = `${table}<label><input type="checkbox"/>${dataset[i][0]}</label> ` } table = table + "<button id='id_select__name__'>提交</button>" dom__name__.innerHTML=table; 所有html你都可以进行转化成smartchart组件， 你可以通过学习”万能表格系列视屏“ 来了解通用组件开发 第一波 第二波 第三波" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:url" content="https://help.smartchart.cn/docs/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/HTML%E7%BB%84%E4%BB%B6/" /><meta property="article:section" content="docs" />
|
||
|
||
|
||
|
||
<title>Html组件 | 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.ab069dde5ce91bbd3af2c528f16e7644e729ffde98f61e525463d6d716451ac7.js" integrity="sha256-qwad3lzpG7068sUo8W52ROcp/96Y9h5SVGPW1xZFGsc=" crossorigin="anonymous"></script>
|
||
|
||
<script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2+Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC+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%AAAI%E5%9C%BA%E6%99%AF/" class="">第一个AI场景</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/%E7%AC%AC%E4%B8%80%E4%B8%AA%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/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" checked />
|
||
<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="active">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%A1%E8%AE%BE%E5%AE%9A/" 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%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%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>
|
||
|
||
|
||
|
||
<li>
|
||
|
||
|
||
|
||
|
||
|
||
<input type="checkbox" id="section-1c911073b1023b05de57d665aa6300d6" class="toggle" />
|
||
<label for="section-1c911073b1023b05de57d665aa6300d6" class="flex justify-between">
|
||
<a href="/docs/11.%E9%83%A8%E7%BD%B2%E6%8C%87%E5%8D%97/Windows/" class="">Windows</a>
|
||
</label>
|
||
|
||
|
||
|
||
<ul>
|
||
|
||
</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>Html组件</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="#html组件转化为smartchart组件">html组件转化为smartchart组件</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
|
||
</aside>
|
||
|
||
|
||
</header>
|
||
|
||
|
||
|
||
<article class="markdown"><h3 id="应用场景">
|
||
应用场景
|
||
<a class="anchor" href="#%e5%ba%94%e7%94%a8%e5%9c%ba%e6%99%af">#</a>
|
||
</h3>
|
||
<ul>
|
||
<li>输入控件,如输入框,筛选器,多选,按钮…</li>
|
||
<li>显示组件, 文本, 图片, 视屏…</li>
|
||
<li>表格组件</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>如果你还不熟悉html, 建意先花几分钟看下文档, 推荐
|
||
<a href="https://www.runoob.com/html/html-tutorial.html">HTML基础</a>
|
||
实际应用中有不熟悉的组件, 你都可以通过baidu搜索到, 如时间选择器
|
||
|
||
<img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2022/0731/211441_f3eb7ce4_5500438.png" alt="输入图片说明" title="屏幕截图.png"/></p>
|
||
</blockquote>
|
||
<h3 id="html组件转化为smartchart组件">
|
||
html组件转化为smartchart组件
|
||
<a class="anchor" href="#html%e7%bb%84%e4%bb%b6%e8%bd%ac%e5%8c%96%e4%b8%basmartchart%e7%bb%84%e4%bb%b6">#</a>
|
||
</h3>
|
||
<p>比如我们要实现一个有多选项和按钮的网页元素
|
||
|
||
<img referrerpolicy="no-referrer" src="https://images.gitee.com/uploads/images/2021/0701/150141_1e0ba921_5500438.png" alt="输入图片说明" title="屏幕截图.png"/></p>
|
||
<p>从各大搜索平台上我们可以找到html的代码是：</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><<span style="color:#f92672">label</span>><<span style="color:#f92672">input</span> <span style="color:#a6e22e">type</span><span style="color:#f92672">=</span><span style="color:#e6db74">"checkbox"</span>>孙尚香</<span style="color:#f92672">label</span>>
|
||
</span></span><span style="display:flex;"><span>.....
|
||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">button</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">'id_select0'</span>>提交</<span style="color:#f92672">button</span>>
|
||
</span></span></code></pre></div><p>那么我们可以直接在图形编辑器写上</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-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">dataset</span><span style="color:#f92672">=</span><span style="color:#a6e22e">__dataset__</span>;
|
||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">table</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">''</span>;
|
||
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">table</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">`<label><input type="checkbox">孙一香</label>
|
||
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <label><input type="checkbox">孙二香</label>
|
||
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> <label><input type="checkbox">孙三香</label>`</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">table</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">table</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">"<button id='id_select0'>提交</button>"</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">dom__name__</span>.<span style="color:#a6e22e">innerHTML</span><span style="color:#f92672">=</span><span style="color:#a6e22e">table</span>;
|
||
</span></span></code></pre></div><p>但是由于我们是要通过传入的数据动态变化的，所以只需要做简单修改</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-js" data-lang="js"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">dataset</span><span style="color:#f92672">=</span><span style="color:#a6e22e">__dataset__</span>;
|
||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">table</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">''</span>;
|
||
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span><span style="color:#f92672">=</span><span style="color:#ae81ff">1</span>;<span style="color:#a6e22e">i</span><span style="color:#f92672"><</span><span style="color:#a6e22e">dataset</span>.<span style="color:#a6e22e">length</span>;<span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>){
|
||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">table</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">table</span><span style="color:#e6db74">}</span><span style="color:#e6db74"><label><input type="checkbox"/></span><span style="color:#e6db74">${</span><span style="color:#a6e22e">dataset</span>[<span style="color:#a6e22e">i</span>][<span style="color:#ae81ff">0</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74"></label> `</span>
|
||
</span></span><span style="display:flex;"><span>}
|
||
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">table</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">table</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">"<button id='id_select__name__'>提交</button>"</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">dom__name__</span>.<span style="color:#a6e22e">innerHTML</span><span style="color:#f92672">=</span><span style="color:#a6e22e">table</span>;
|
||
</span></span></code></pre></div><p>所有html你都可以进行转化成smartchart组件，
|
||
你可以通过学习”万能表格系列视屏“ 来了解通用组件开发
|
||
|
||
<a href="https://www.bilibili.com/video/BV1Ma41187oZ">第一波</a>
|
||
|
||
<a href="https://www.bilibili.com/video/BV1SR4y1F7Pp">第二波</a>
|
||
|
||
<a href="https://www.bilibili.com/video/BV11P4y1T7gX">第三波</a></p>
|
||
</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/3.%e5%9b%be%e5%bd%a2%e5%bc%80%e5%8f%91/HTML%e7%bb%84%e4%bb%b6.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="#html组件转化为smartchart组件">html组件转化为smartchart组件</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
</main>
|
||
|
||
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|