mirror of
https://gitee.com/smartchart/smartchart
synced 2025-05-05 00:59:25 +08:00
add docs
This commit is contained in:
JohnYan
parent
296304b0d7
commit
c61087c136
@ -9,7 +9,7 @@
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="404 Page not found" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://smartchart.gitee.io/404.html" />
|
||||
<meta property="og:url" content="https://help.smartchart.cn/404.html" />
|
||||
|
||||
<title>404 Page not found | Smartchart开发手册</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
@ -1,6 +0,0 @@
|
||||
---
|
||||
title: "{{ replace .Name "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: true
|
||||
---
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
/* You can add custom styles here. */
|
||||
|
||||
// @import "plugins/numbered";
|
||||
// @import "plugins/scrollbars";
|
||||
@ -1 +0,0 @@
|
||||
/* You can override SASS variables here. */
|
||||
@ -8,7 +8,7 @@
|
||||
<meta name="color-scheme" content="light dark"><meta property="og:title" content="Categories" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://smartchart.gitee.io/categories/" />
|
||||
<meta property="og:url" content="https://help.smartchart.cn/categories/" />
|
||||
|
||||
<title>Categories | Smartchart开发手册</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
@ -18,7 +18,7 @@
|
||||
<script defer src="/en.search.min.9676739f7d6fb9d37e12fd58a755b4f44ec0d94abaddeb103ece302f676fbdef.js" integrity="sha256-lnZzn31vudN+Ev1Yp1W09E7A2Uq63esQPs4wL2dvve8=" crossorigin="anonymous"></script>
|
||||
|
||||
<script defer src="/sw.min.6f6f90fcb8eb1c49ec389838e6b801d0de19430b8e516902f8d75c3c8bd98739.js" integrity="sha256-b2+Q/LjrHEnsOJg45rgB0N4ZQwuOUWkC+NdcPIvZhzk=" crossorigin="anonymous"></script>
|
||||
<link rel="alternate" type="application/rss+xml" href="https://smartchart.gitee.io/categories/index.xml" title="Smartchart开发手册" />
|
||||
<link rel="alternate" type="application/rss+xml" href="https://help.smartchart.cn/categories/index.xml" title="Smartchart开发手册" />
|
||||
<!--
|
||||
Made with Book Theme
|
||||
https://github.com/alex-shpak/hugo-book
|
||||
@ -2,8 +2,8 @@
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>Categories on Smartchart开发手册</title>
|
||||
<link>https://smartchart.gitee.io/categories/</link>
|
||||
<link>https://help.smartchart.cn/categories/</link>
|
||||
<description>Recent content in Categories on Smartchart开发手册</description>
|
||||
<generator>Hugo -- gohugo.io</generator><atom:link href="https://smartchart.gitee.io/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
<generator>Hugo -- gohugo.io</generator><atom:link href="https://help.smartchart.cn/categories/index.xml" rel="self" type="application/rss+xml" />
|
||||
</channel>
|
||||
</rss>
|
||||
10
docs/categories/page/1/index.html
Normal file
10
docs/categories/page/1/index.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>https://help.smartchart.cn/categories/</title>
|
||||
<link rel="canonical" href="https://help.smartchart.cn/categories/">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="refresh" content="0; url=https://help.smartchart.cn/categories/">
|
||||
</head>
|
||||
</html>
|
||||
110
docs/config.yaml
110
docs/config.yaml
@ -1,110 +0,0 @@
|
||||
# hugo server --minify --themesDir ... --baseURL=http://0.0.0.0:1313/theme/hugo-book/
|
||||
|
||||
baseURL: https://smartchart.gitee.io/
|
||||
title: Smartchart开发手册
|
||||
theme: hugo-book
|
||||
|
||||
# Book configuration
|
||||
disablePathToLower: true
|
||||
enableGitInfo: false
|
||||
|
||||
# Needed for mermaid/katex shortcodes
|
||||
markup:
|
||||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
tableOfContents:
|
||||
startLevel: 1
|
||||
|
||||
# Multi-lingual mode config
|
||||
# There are different options to translate files
|
||||
# See https://gohugo.io/content-management/multilingual/#translation-by-filename
|
||||
# And https://gohugo.io/content-management/multilingual/#translation-by-content-directory
|
||||
#languages:
|
||||
# en:
|
||||
# languageName: English
|
||||
# contentDir: content.en
|
||||
# weight: 2
|
||||
# zh:
|
||||
# languageName: Chinese
|
||||
# contentDir: content
|
||||
# weight: 1
|
||||
|
||||
menu:
|
||||
# before: []
|
||||
after:
|
||||
- name: "官网"
|
||||
url: "https://www.smartchart.cn/"
|
||||
weight: 10
|
||||
- name: "Gitee"
|
||||
url: "https://gitee.com/smartchart/smartchart"
|
||||
weight: 20
|
||||
|
||||
params:
|
||||
# (Optional, default light) Sets color theme: light, dark or auto.
|
||||
# Theme 'auto' switches between dark and light modes based on browser/os preferences
|
||||
BookTheme: "light"
|
||||
|
||||
# (Optional, default true) Controls table of contents visibility on right side of pages.
|
||||
# Start and end levels can be controlled with markup.tableOfContents setting.
|
||||
# You can also specify this parameter per page in front matter.
|
||||
BookToC: true
|
||||
|
||||
# (Optional, default none) Set the path to a logo for the book. If the logo is
|
||||
# /static/logo.png then the path would be logo.png
|
||||
# BookLogo: /logo.png
|
||||
|
||||
# (Optional, default none) Set leaf bundle to render as side menu
|
||||
# When not specified file structure and weights will be used
|
||||
# BookMenuBundle: /menu
|
||||
|
||||
# (Optional, default docs) Specify root page to render child pages as menu.
|
||||
# Page is resoled by .GetPage function: https://gohugo.io/functions/getpage/
|
||||
# For backward compatibility you can set '*' to render all sections to menu. Acts same as '/'
|
||||
BookSection: docs
|
||||
|
||||
# Set source repository location.
|
||||
# Used for 'Last Modified' and 'Edit this page' links.
|
||||
BookRepo: https://gitee.com/smartchart/smartchart
|
||||
|
||||
# (Optional, default 'commit') Specifies commit portion of the link to the page's last modified
|
||||
# commit hash for 'doc' page type.
|
||||
# Requires 'BookRepo' param.
|
||||
# Value used to construct a URL consisting of BookRepo/BookCommitPath/<commit-hash>
|
||||
# Github uses 'commit', Bitbucket uses 'commits'
|
||||
# BookCommitPath: commit
|
||||
|
||||
# Enable "Edit this page" links for 'doc' page type.
|
||||
# Disabled by default. Uncomment to enable. Requires 'BookRepo' param.
|
||||
# Edit path must point to root directory of repo.
|
||||
BookEditPath: docs
|
||||
|
||||
# Configure the date format used on the pages
|
||||
# - In git information
|
||||
# - In blog posts
|
||||
BookDateFormat: "January 2, 2006"
|
||||
|
||||
# (Optional, default true) Enables search function with flexsearch,
|
||||
# Index is built on fly, therefore it might slowdown your website.
|
||||
# Configuration for indexing can be adjusted in i18n folder per language.
|
||||
BookSearch: true
|
||||
|
||||
# (Optional, default true) Enables comments template on pages
|
||||
# By default partals/docs/comments.html includes Disqus template
|
||||
# See https://gohugo.io/content-management/comments/#configure-disqus
|
||||
# Can be overwritten by same param in page frontmatter
|
||||
BookComments: true
|
||||
|
||||
# /!\ This is an experimental feature, might be removed or changed at any time
|
||||
# (Optional, experimental, default false) Enables portable links and link checks in markdown pages.
|
||||
# Portable links meant to work with text editors and let you write markdown without {{< relref >}} shortcode
|
||||
# Theme will print warning if page referenced in markdown does not exists.
|
||||
BookPortableLinks: true
|
||||
|
||||
# /!\ This is an experimental feature, might be removed or changed at any time
|
||||
# (Optional, experimental, default false) Enables service worker that caches visited pages and resources for offline use.
|
||||
BookServiceWorker: true
|
||||
|
||||
# /!\ This is an experimental feature, might be removed or changed at any time
|
||||
# (Optional, experimental, default false) Enables a drop-down menu for translations only if a translation is present.
|
||||
BookTranslatedOnly: false
|
||||
@ -1,20 +0,0 @@
|
||||
---
|
||||
title: 介绍
|
||||
type: docs
|
||||
---
|
||||
|
||||
**Smartchart6.0 预计2022年底发布, 带来全新的功能与体验, 请关注**
|
||||
### 设计哲学:
|
||||
|
||||
- 她是基于真实应用场景的敏捷数据中台而设计的产品,已成熟在多个大型企业应用多年,不仅是一个可视化低代码开发平台, 也是数据接口低代码, 甚至是业务系统低代码开发平台
|
||||
- 支持多种混合布局, 对于普通报表可以使用响应式布局同时满足大屏, 电脑, 平板, 手机端的页面, 对于大屏也可使用拖拽辅助布局来配合自由开发模式(专业版)
|
||||
- 她是面向开发者, 如果需要设计出来非常漂亮有个性的数据展现形式, 我们发现如果要达到这个目的, 不管用什么开发工具, 最终还是需要用户了解一些基础的html, css, echarts的配置, 如果去学习某个平台中要在那些地方点点点的界面上进行配置, 那么为什么不去学习使用原生的呢, 这样反而更简单, 用户可以找到的参考资源更全面, 甚至可以从社区的代码中直接复制过来, 所以我们设计理念是不自定义开发语言, 而是帮大家建立数据与图形的高速公路, 定义交通规则 和提供服务区
|
||||
- smartchart有很多隐藏功能, 所以初入smartchart的同学会一脸迷惑, 无从下手, 因为我们讲究 **精减设计** 和 **可扩展性** , 如果有些功能只用一次, 就不会让他在界面显示, 我们不推荐不看文档和视屏就直接上手开发的模式, 给你门槛是为了将来使用得不会太累
|
||||
- 她重在数据处理的便捷, 联动/刷新机制设计一气喝成, 无缝的原生图形开发工具, 没有脱泥带水的让用户去找设定开关, 你甚至可以使用你喜欢的IDE进行开发, 给开发者充分发挥的自由
|
||||
- smartchart是一个企业级解决方案, 不是一个玩具, 她不喜欢浮躁, 需要你沉下心, 慢慢体验, 属于慢热型, 就好比是做菜, smartchart是给你提供了已经切好的菜和菜谱说明, 你可以按自已喜欢加火放调料就行, 你甚至可以增加新的调料(如css, js引用) 或更换调料. 相比有些产品就是给你准备的是已做好的菜品, 如果你觉得它盐放得太多, 你得清洗下, 再重新回锅, 对于我们开发人员来说, 这是不可忍受的
|
||||
- 类似于养成类游戏, 你可以在开发过程中积累图形, 模板等等, 在后面的项目中可以直接用复制粘贴的方式进行复用, 而不需要再界面上重新进行配置调整. 你也可以和其它开发者(厨师)交流, 互通有无, 快速提升自已的等级, 比如购买模板就是最快的方法
|
||||
|
||||
### 与传统BI的区别
|
||||
- 传统BI面向非技术人员, 更注重于开发的过程无代码化,所以最终实现的可视化效果较差, 可定制化程度低, 访问速度慢,对硬件要求高, 应用场景局限性比较大
|
||||
- smartchart是面向技术人员的可视化产品, 更注重于最终效果, 采用的是低代码技术, 对技术人员更友好, 可定制化高, 可视化效果更好, 访问速度快, 更灵活,对硬件要求低, 应用范围广
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
---
|
||||
weight: 3
|
||||
---
|
||||
|
||||
需要在高级中加入“dv”:1,即可开启datav模式
|
||||
|
||||
参考视屏
|
||||
[1. DataV基础应用](https://www.ixigua.com/7021858988451070500)
|
||||
[2. DataV翻盘器](https://www.ixigua.com/7022086509562069512)
|
||||
|
||||
DataV配置方法文档:
|
||||
[图表](http://datav.jiaminghi.com/guide/charts.html)
|
||||
@ -1,71 +0,0 @@
|
||||
---
|
||||
weight: 2
|
||||
---
|
||||
#### 应用场景
|
||||
- 非大屏场景应用
|
||||
- 有较多交互场景的报表, 如筛选,表格,分页,下载等
|
||||
|
||||
#### 使用方法
|
||||
如下图, base.html 改为 basevue.html
|
||||
将自动开启加载vue和elementui
|
||||
|
||||
**注意vue的变量引用在 模板编辑界面中, 写法变更为 {[ ]}**
|
||||
|
||||
[ElementUI组件说明](https://element.eleme.cn/)
|
||||
[视屏参考](https://www.toutiao.com/video/7107842562462843395/)
|
||||
|
||||
#### 参考样列
|
||||
新增一个数据集(点击金色的新增按钮, 这样会新增一个可拖拽的数据集)
|
||||
修改相应的数据集及图形
|
||||
数据集端
|
||||
```sql
|
||||
select H1, H2, qty, rate from smartdemo2 limit 100
|
||||
```
|
||||
图形端
|
||||
```
|
||||
let dataset = __dataset__;
|
||||
let tableData = ds_createMap_all(dataset);
|
||||
|
||||
vapp.d0={
|
||||
tableData: tableData
|
||||
}
|
||||
```
|
||||
模板Body区端
|
||||
```html
|
||||
<div class="smtdrag" id="id_1639824145817">
|
||||
<template>
|
||||
<el-table
|
||||
stripe
|
||||
border
|
||||
height="100%"
|
||||
:data="d0.tableData"
|
||||
style="width: 100%">
|
||||
<el-table-column label="hero">
|
||||
<el-table-column
|
||||
prop="H1"
|
||||
label="H1"
|
||||
fixed
|
||||
:default-sort = "{prop: 'H2', order: 'descending'}"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="H2"
|
||||
label="H2"
|
||||
sortable
|
||||
width="180">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
sortable
|
||||
prop="qty"
|
||||
label="qty">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="rate"
|
||||
label="rate">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</div>
|
||||
```
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 110
|
||||
---
|
||||
@ -1,71 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
---
|
||||
|
||||
#### 使用场景
|
||||
- 报表中涉及交互场景较多, 需要数据与页面绑定
|
||||
- 开发者熟悉vue
|
||||
|
||||
#### 常见绑定
|
||||
```html
|
||||
//显示变量message
|
||||
<p>{[ message ]}</p>
|
||||
//循环产生li,变量sites
|
||||
<ol>
|
||||
<li v-for="site in sites">
|
||||
{[ site.name ]}
|
||||
</li>
|
||||
</ol>
|
||||
//绑定输入值变量use
|
||||
<input type="checkbox" v-model="use">
|
||||
//显示控制
|
||||
<p v-if="seen">现在你看到我了</p>
|
||||
<p v-show="seen">现在你看到我了</p>
|
||||
//绑定属性
|
||||
<a :href="url"></a>
|
||||
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
|
||||
<div :class="[errorClass ,isActive ? activeClass : '']"></div>
|
||||
//绑定点击方法
|
||||
<a @click="doSomething"></a>
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
#### 开启VUE
|
||||
需要在高级中加入“dv”:2,即可开启vue模式
|
||||
|
||||
你可以在图形编辑器中给vue的变量赋值，我们内置了17个变量，从d0, d1... d16
|
||||
赋值方式 vapp.d0 = xxxx
|
||||
|
||||
|
||||
你可以将d0赋值为字典, 如:
|
||||
vapp.d0 = { 'index1': 100, 'index2': 300}
|
||||
|
||||
>注意,我们修改了vue的默认引用方式, 你需要采用如下方法引用:
|
||||
{[d0.index1]}
|
||||
|
||||
#### 使用模板可以更方便使用VUE
|
||||
你也可以在 模板开发中 使用VUE
|
||||
开启方法, 首先你需要在高级设定中 , 设定 "template":"diy",
|
||||
然后你可以看到 模板 的菜单, 进入编辑器
|
||||
|
||||
如果你需要更多自定义的方法, 例如加入方法, 你可以在模板的script中加入自定义代码
|
||||
```js
|
||||
<script>
|
||||
var vapp = new Vue({el: '#vue_app', delimiters: ['{[', ']}'],
|
||||
data: {
|
||||
tableData:''
|
||||
},
|
||||
methods: {
|
||||
formatter(row, column) {
|
||||
return row.address;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 100
|
||||
---
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 120
|
||||
---
|
||||
@ -1,7 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
---
|
||||
点击smartchart图标,切换到菜单固定模式, 你可看到主题的选择
|
||||
|
||||
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
weight: 2
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
### 复制仪表盘
|
||||
- 好不容易开发好了一个仪表盘, 想再做一个类似的, 或者想要一个测试用, 还需要一个个数据集, 图形复制粘贴么, 不, 你仅仅只需要点击下, 将给你复制出一个全新的仪表盘
|
||||
|
||||
|
||||
**注意: 复制出来的仪表盘, 数据集是与原仪表盘公用的！！**
|
||||
|
||||
- 如果你想将数据集独立出来, 可以按下图操作, 进入数据集设定, 点击磁铁, 将为你自动创建一个全新的数据集
|
||||
|
||||
@ -1,77 +0,0 @@
|
||||
---
|
||||
title: 专业版本说明
|
||||
weight: 1
|
||||
type : docs
|
||||
---
|
||||
### 版权声明
|
||||
为项目能持续维护，并保持稳定的模式，按照社区投票的意见, 开始区分免费版本和专业版本
|
||||
目前免费版本无需激活， 你可以使用到常用的功能，我们也会保持持续的更新
|
||||
为保持项目的健康发展，如需进行商用，您需提供使用方并知会作者进行授权
|
||||
|
||||
>免费版使用者必须保留SmartChart相关版权标识及LOGO，禁止对其进行修改和删除
|
||||
>如果违反，将保留对侵权者追究责任的权利
|
||||
|
||||
### 激活方式
|
||||
**您在初次安装Smartchart后会自动免费激活20天的专业版本, 之后专业版本功能会限制使用**
|
||||
请务必仔细阅读免费版本与专业版本的区别, 避免带来的不便
|
||||
后续如果您还需要继续体验专业版本， [点击查看激活试用方式](https://gitee.com/smartchart/smartchart/wikis/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)，
|
||||
**如果您是企业用途，建意使用专业版，获取更快的开发效率，可视化效果, 可靠性的保障及极速的查询体验**
|
||||
|
||||
>针对个人独立开发者,你可以采用廉价的专业版仪表盘激活方案, 可满足小项目的可视化要求
|
||||
>如果需要永久激活专业版，可关注公众号与客服联系,或扫码联系微信客服了解, 非诚勿扰
|
||||
|
||||
<a href="https://work.weixin.qq.com/kfid/kfcded01b07b7ba963b" target="_blank"><img src="https://foruda.gitee.com/images/1662372287435411063/1c7ddbe7_5500438.png" height="200px"></a>
|
||||
|
||||
**微信客服不提供技术咨询, 如有使用方法的疑惑,建意加QQ群:476715246 进行沟通**
|
||||
|
||||
### 免费版本与专业版本对比:
|
||||
| 功能 | 免费版 | 专业版 | 中台版 |
|
||||
| :-----| :----: | :----: | :----: |
|
||||
| 栅格布局 | V | V | V |
|
||||
| DATAV | V | V | V |
|
||||
| 拖拽布局 | | V | V |
|
||||
| 自由开发 | | V | V |
|
||||
| 切换图表主题| | V | V |
|
||||
| 主题自由设计| | V | V |
|
||||
| 引入JS | | V | V |
|
||||
| 引入CSS | | V | V |
|
||||
| 上传静态资源 | | V | V |
|
||||
| 使用VUE | V | V | V |
|
||||
| 数据集开发 | V | V | V |
|
||||
| 所有数据源 | V | V | V |
|
||||
| 图形开发 | V | V | V |
|
||||
| 图形商店 | V | V | V |
|
||||
| 普通模板应用 | V | V | V |
|
||||
| 专业模板应用 | | V | V |
|
||||
| 复制仪表盘| V | V | V |
|
||||
| 钻取 | V | V | V |
|
||||
| 联动 | V | V | V |
|
||||
| 筛选 | V | V | V |
|
||||
| 单点登录 | V | V | V |
|
||||
| 嵌入认证 | | V | V |
|
||||
| LDAP认证 | | V | V |
|
||||
| Juypter | V | V | V |
|
||||
| 快捷存档| | V | V |
|
||||
| 数据加速 | | V | V |
|
||||
| 数据API服务 | | V | V |
|
||||
| 后台API刷新 | | V | V |
|
||||
| 仪表盘同步 | | V | V |
|
||||
| 仪表盘版本管理 | | V | V |
|
||||
| 数据填报 | | V | V |
|
||||
| 报表Portal | | V | V |
|
||||
| 多级项目菜单 | | | V |
|
||||
| 商业授权 | | V | V |
|
||||
| 优先咨询 | | V | V |
|
||||
| [专业边框背景](https://gitee.com/smartchart/smartchart/wikis/9.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E8%BE%B9%E6%A1%86%E4%B8%8E%E8%A3%85%E9%A5%B0) | | V | V |
|
||||
| 3D场景 | | V | V |
|
||||
| 中国式报表 | | V | V |
|
||||
| 生产部署文档 | | V | V |
|
||||
| 个性化修改 | | V | V |
|
||||
| 授权书 | | V | V |
|
||||
| 低代码ETL | | | V |
|
||||
| 调度平台 | | | V |
|
||||
| 智慧BI | | | V |
|
||||
| 数据资产 | | | V |
|
||||
| 数据血缘 | | | V |
|
||||
| 租户管理 | | | V |
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
---
|
||||
title: 创建连接池
|
||||
weight: 4
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
### 如何新增数据源
|
||||
- 在开发模式下，点击“开发管理”->数据源->新增
|
||||
<img src="https://images.gitee.com/uploads/images/2022/0803/094505_ba96976e_5500438.png" height="300px">
|
||||
|
||||
- 配置连接池参数，注意数据库填写是备注中有写的名称
|
||||
<img src="https://images.gitee.com/uploads/images/2022/0803/094624_fa85413e_5500438.png" height="300px">
|
||||
|
||||
- 你可以通过新建一个数据集来测试连接池的连通性
|
||||
- 点击“保存” 后，回到数据集列表 点击如下图标"E"，进入数据集开发界面
|
||||
<img src="https://images.gitee.com/uploads/images/2021/1218/140717_d1eabbf2_5500438.png" height="300px">
|
||||
|
||||
- 在开发界面调试
|
||||
<img src="https://images.gitee.com/uploads/images/2022/0803/094824_d2c29e65_5500438.png" height="100px">
|
||||
|
||||
### 安全控制
|
||||
你可以在“参数”中设定安全控制，可避免用户误操作导致前后端卡死
|
||||
|
||||
limit: 可限定最大返回数据数量(但实际数据库查询无limit,需通过mode控制)
|
||||
mode: 控制用户查询行为，默认为模式1
|
||||
| 模式 | 说明 |
|
||||
| :-----| :----: |
|
||||
| 0 | 严格模式，每次查询向数据库都会增加limit，MPP类型数据库可能会排序失效 |
|
||||
| 1 | 开发模式，仅调试查询数据库都会增加limit，调试时MPP类型数据库可能会排序失效，但不影响实际 |
|
||||
| 2 | 宽松模式，查询都不带limit, 仅控制返回limit,需开发者避免大查询 |
|
||||
|
||||
### 支持的数据源：
|
||||
|
||||
| 数据库 | 驱动填写 | 需安装 | 使用说明 |
|
||||
| :-----| :----: | :----: | :----: |
|
||||
| Mysql | mysql | 默认支持 | |
|
||||
| Mysql连接池 | mysqlpool | | |
|
||||
| Sqlite | sqlite |默认支持 | 连接地址填写绝对路径 |
|
||||
| API |任意|默认支持 | 参考数据集说明文档 |
|
||||
| EXCEL | 任意|默认支持 | 参考数据集说明文档 |
|
||||
| SQL Server|mssql | 需安装 pip install pymssql | |
|
||||
| SQL Server连接池|mssqlpool | | |
|
||||
| ORACLE |oracle| pip install cx_Oracle | |
|
||||
| ORACLE连接池 |oraclepool| | |
|
||||
| PostgreSql |gp| pip install psycopg2 | |
|
||||
| GP |gp| pip install psycopg2 | |
|
||||
| Impala |impala| pip install impyla | |
|
||||
| Hive |hive| pip install impyla | |
|
||||
| DB2 |db2| pip install ibm_db | |
|
||||
| 达梦 |dm| pip install dmPython | |
|
||||
| Python |python| pip install pandas, openpyxl | 参考数据集->特殊数据源 |
|
||||
| Redis |redis| pip install redis | 参考数据集->特殊数据源 |
|
||||
| Mongodb |mongodb| pip install pymongo | 参考数据集->特殊数据源 |
|
||||
| Clickhouse |clickhouse| pip install clickhouse_driver | |
|
||||
| Elasticsearch |es| pip install elasticsearch==7.13.0 | 参考数据集->特殊数据源 |
|
||||
| Sqlalchemy |sqlalchemy| pip install sqlalchemy | 参考数据集->特殊数据源 |
|
||||
| JDBC |jdbc| pip install JayDeBeApi | 参考数据集->特殊数据源 |
|
||||
| 自定义 |自定义| 用户自由定义 | 参考数据集->特殊数据源 |
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
---
|
||||
title: 应用模板
|
||||
weight: 5
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
### 应用场景
|
||||
你可以快速应用开发好的模板,极大的提高你的开发和学习效率
|
||||
|
||||
### 应用本地模板
|
||||
你可以快速应用本地备份的模板, 我们内置了一个 **通用的数据查询和下载模板** , 你可以尝试
|
||||
- 新建一个全新的dashboard, 不要放任何报表, 点击保存且编辑后, 下方可以看到下载链接, 然后点击下载即可直接应用
|
||||
<img src="https://images.gitee.com/uploads/images/2022/0402/135259_483a2a41_5500438.png" height="200px">
|
||||
|
||||
- 输入"01_SMARTCHART", 点击本地恢复即可
|
||||
<img src="https://foruda.gitee.com/images/1660274778419058362/屏幕截图.png" height="200px">
|
||||
|
||||
[更多本地备份恢复参考](https://gitee.com/smartchart/smartchart/wikis/9.%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)
|
||||
|
||||
### 应用商店模板
|
||||
方法同上"应用本地模板", 注意应用商店模板为收费增值服务
|
||||
- 你可以点击[模板查询](https://www.smartchart.cn/echart/show/), 查看相应的价格后在[TB购买](https://smartchart.taobao.com/)即可获取下载密钥
|
||||
- 如果是全新的仪表盘, 直接输入下载密钥, 点击" **商城下载** "即可
|
||||
> 如果仪表盘中有数据集且不再需要, 可以在下载密钥前面加上FORCE即可自动清空已有数据集后自动下载
|
||||
> 注意模板太廉价,购买后并没有咨询服务,请务必自行了解如何使用
|
||||
|
||||
> 资源文件放置路径
|
||||
> 有些资源会离线打包提供给你, 只需上传即可, [上传方法参考](https://gitee.com/smartchart/smartchart/wikis/9.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E4%B8%8A%E4%BC%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6)
|
||||
|
||||
> 如果不清楚可以观看视屏说明
|
||||
使用方法可参考视屏: [一键应用模板](https://www.ixigua.com/6915568494478426631/ "模板")
|
||||
@ -1,55 +0,0 @@
|
||||
---
|
||||
title: 快速开始
|
||||
weight: 2
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
**开发前你可以先观看操作方面的**
|
||||
:exclamation: [操作视屏教程](https://www.bilibili.com/video/BV14u411S7L8/) :exclamation: [5.0变更操作视屏教程](https://www.bilibili.com/video/BV1fm4y1Q7DG/)
|
||||
:exclamation: [开发系列合集,关注作者持续更新](https://space.bilibili.com/604568670/channel/series/)
|
||||
|
||||
**由于版本的变更, 一些图标可能会有一些变化, 但位置无太大的变化**
|
||||
### 安装Python环境
|
||||
- 环境准备: 官方[最新Python下载链接](https://www.python.org/downloads/release/python-390/ "最新Python下载链接"),可以到[淘宝镜象下载](https://npm.taobao.org/mirrors/python/3.9.0/ "淘宝镜象下载"),也可以下载[WINDOWS64位安装版](https://npm.taobao.org/mirrors/python/3.9.0/python-3.9.0-amd64.exe "WINDOWS64位安装版"),[MAC电脑安装版](http://npm.taobao.org/mirrors/python/3.9.0/python-3.9.0rc2-macosx10.9.pkg "MAC电脑安装版")
|
||||
- [Window平台安装视屏介绍](https://www.ixigua.com/6910413586208653837?id=6901867671193649668 "Window平台安装视屏介绍"),**注意: Windows安装Python时需选中"Add to Path"**
|
||||
<img src="https://images.gitee.com/uploads/images/2022/0408/140321_e1b8e21c_5500438.png" height="250px">
|
||||
|
||||
- Linux安装可参考文档下方的部署说明, [Linux安装说明](https://gitee.com/smartchart/smartchart/wikis/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)
|
||||
|
||||
### 安装SmartChart
|
||||
在Shell或CMD命令行执行
|
||||
```shell script
|
||||
pip3 install smartchart
|
||||
|
||||
如果安装过程慢,建意使用
|
||||
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple smartchart -U
|
||||
|
||||
升级方法:
|
||||
pip3 install smartchart -U (升级)
|
||||
```
|
||||
|
||||
### 启动smartchart
|
||||
```shell script
|
||||
本地命令行启动:
|
||||
smartchart
|
||||
如果你是服务器部署,远程访问,服务端启动方式:
|
||||
smartchart runserver 0.0.0.0:8000 --insecure --noreload
|
||||
如果出现套接字，端口被占用， 可修改端口号启动， 如
|
||||
smartchart runserver 0.0.0.0:8001 --insecure --noreload
|
||||
```
|
||||
一般本地启动后访问： http://127.0.0.1:8000
|
||||
**管理员帐号密码: admin/admin, 请及时更改密码**
|
||||
```
|
||||
如果忘记密码, 可以使用此命令重置
|
||||
smartchart changepassword 用户名
|
||||
```
|
||||
|
||||
- 鼠标滑动，**点击如下图DEV图标, 切换为开发模式**,这样才可以看到开发相关菜单,后打开demo页面
|
||||
> 注意: 不切换是正常的用户报表浏览模式!!
|
||||
|
||||
> 仅管理员或开发人员能看到DEV菜单，用户只会有报表菜单页面
|
||||
|
||||
- 尝试熟悉编辑菜单
|
||||
|
||||
- 尝试点开数据集查看SQL写法， 图形编辑器， 容器等
|
||||
@ -1,38 +0,0 @@
|
||||
---
|
||||
title: 权限管理
|
||||
weight: 6
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
目前的权限管理,大概如下:
|
||||
### 开发者权限
|
||||
你点击DEV后, 才会出进入后台的图标, 在后台中你可以控制用户的开发权限
|
||||
|
||||
|
||||
|
||||
新建用户默认是没有开发权限的, 在首页也看不到任何开发相关的菜单
|
||||
|
||||
如果你需要给用户开发权限, 需要设定如下:
|
||||
|
||||
|
||||
|
||||
|
||||
### Dashboard报表查看权限
|
||||
|
||||
你可以在 仪表盘设定 中进行权限管理
|
||||
|
||||
|
||||
- **全局编辑或查看权限** 由平台用户组或用户权限配置, 如果用户需要查看报表, 需先分配到有查看权限的组中, 默认加入集团组可以具备查看权限
|
||||
- 在dashboard设定页面中可针对人员来分配 **编辑权限**, 有编辑权限同时也会满足查看权限
|
||||
- 在dashboard设定页面中可针对组来分配 **查看权限**
|
||||
- **未上线** 的报表, 只会在编辑页面中出现, 可以预览
|
||||
- **公开** 的报表, 如没有分配编辑权限,在编辑页面中不出现, 但在查看页面所有人可见，你可以共享给所有人，访问url: http://xxxxx：8000/echart?type=你的仪表盘名称
|
||||
- **手机端过滤**, 你可以通过 "全端","电脑端" 选项实现, 当勾选 "全端" 时, 手机端电脑端都会显示, 当未勾选 全端, 也不勾选 电脑端时, 只会在 手机显示, 反之只在电脑端显示
|
||||
|
||||
|
||||
### 总结
|
||||
在编辑入口只会显示 有按人员分配编辑权限的报表清单, 在查看入口中会显示已启用且上线且(已分配查看权限或编辑权限或公开)的报表
|
||||
所以你可以么这么搭配:
|
||||
对于通用报表可以所有人访问的, 但你又不想让他在清单中显示, 你可以将他设为公开但不上线
|
||||
对于开发中的报表, 你可以设为未上线
|
||||
@ -1,42 +0,0 @@
|
||||
---
|
||||
title: 第一个仪表盘
|
||||
weight: 3
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
**由于版本的变更, 一些图标可能会有一些变化, 但位置无太大的变化**
|
||||
### 新建仪表盘
|
||||
- 在开发模式下，滑动“开发管理” ->"仪表盘"-> "新增Dashboard"
|
||||
|
||||
- 填写相应信息后点击“保存”
|
||||
|
||||
- 点击进入仪表盘开发, 注意点击 "E" 字!!
|
||||
|
||||
- 点击新增(注意拖拽布局功能为PRO版本, 后续免费版本中将无法使用),
|
||||
如果你坚持使用免费版本功能, 请使用左边的蓝色颜色的新增, [具体布局方式参考](https://gitee.com/smartchart/smartchart/wikis/4.布局说明/布局指引)
|
||||
|
||||
|
||||
### 数据集编辑
|
||||
- 点开“数据集”
|
||||
|
||||
- 输入以下SQL后，点击“保存并刷新”, 关闭数据集编辑界面
|
||||
```sql
|
||||
select H1 as heroname, sum(qty) as 出场数 from smartdemo2
|
||||
group by H1
|
||||
order by sum(qty) desc
|
||||
```
|
||||
|
||||
|
||||
### 图形编辑
|
||||
- 点开“图形编辑”
|
||||
|
||||
|
||||
- 点击“云图标”，第一次使用可能要你进行登记，按提示操作即可， 在商店中找到合适的图形点击，会自动复制到剪贴板
|
||||
|
||||
- 贴粘到图形编辑器后，点击保存， 关闭图形编辑框
|
||||
|
||||
|
||||
### 拖拽布局
|
||||
- 重复以上步骤，再新增一个， 你可以使用拖拽的方式, 移动到不同的地方
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
### FAQ
|
||||
- 启动显示 以一种访问权限不允许的方式做了一个访问套接字的尝试
|
||||
出现这种情况在Windows中很常见，就是端口被占用，酷狗音乐会占用8000端口
|
||||
使用netstat -ano|findstr 8000 找到进程号
|
||||
使用taskkill /pid 进程号 /F
|
||||
|
||||
- 输入命令找不到smartchart
|
||||
检查你是否有安装多个python环境出现环境变量冲突,请卸载一个或取消一个环境变量
|
||||
|
||||
- 如法安装pip
|
||||
请确认在安装python时,有没有加入环境变量, 可自行加入, 或卸载重装
|
||||
|
||||
- 关于mac版本安装后的各种问题
|
||||
目前来看最大的可能是，/Library/Developer/CommandLineTools这个目录下有python3，应该是在某一个版本的Xcode command line tools安装时生成的
|
||||
可以先把python3全部卸载，再重新按说明安装，命令行中输入python3 和 pip3， 找不到command时才说明完全卸载成功
|
||||
```
|
||||
sudo rm -rf /Library/Developer/CommandLineTools
|
||||
sudo rm -f /usr/bin/python3
|
||||
```
|
||||
- 如果密码忘记了怎么办
|
||||
命令行输入smartchart changepassword 你的用户名
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 1000
|
||||
---
|
||||
@ -1,3 +0,0 @@
|
||||
试用专业版激活码需要每3天激活一次,激活方式：
|
||||
<img src="https://images.gitee.com/uploads/images/2022/0603/120243_4d353ca5_5500438.png" height="300px">
|
||||
由于开发很忙, 文档可能会写得有不尽之处, 多多包涵
|
||||
@ -1,37 +0,0 @@
|
||||
SQLite3版本错误
|
||||
在部分操作系统下（比如CentOS 7）使用SQLite3数据库运行会出现如下的错误提示：
|
||||
```
|
||||
django.core.exceptions.ImproperlyConfigured: SQLite 3.8.3 or later is required (found 3.7.17).
|
||||
```
|
||||
|
||||
这表明操作系统自带的sqlite3版本过低，需要将系统的sqlite3进行升级。
|
||||
|
||||
以下是一种方法，来自于 StackOverlow：
|
||||
|
||||
1、下载新版本的SQLite3
|
||||
```
|
||||
wget https://www.sqlite.org/2019/sqlite-autoconf-3290000.tar.gz
|
||||
```
|
||||
2、解压文件
|
||||
```
|
||||
tar zxvf sqlite-autoconf-3290000.tar.gz
|
||||
```
|
||||
3、进行解压后的目录
|
||||
```
|
||||
cd sqlite-autoconf-3290000
|
||||
```
|
||||
4、配置安装目录
|
||||
```
|
||||
./configure --prefix=$HOME/opt/sqlite
|
||||
```
|
||||
5、编译安装
|
||||
```
|
||||
make && make install
|
||||
```
|
||||
6、指定环境变量
|
||||
```
|
||||
export PATH=$HOME/opt/sqlite/bin:$PATH
|
||||
export LD_LIBRARY_PATH=$HOME/opt/sqlite/lib
|
||||
export LD_RUN_PATH=$HOME/opt/sqlite/lib
|
||||
```
|
||||
完成之后可以运行sqlite3 --version 命令来查看当前的SQLite3版本。
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 1100
|
||||
---
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 涉及的基础环境和版本：
|
||||
```
|
||||
* Centos 7
|
||||
* Python 3.9
|
||||
/data/smartchart/ 项目主目录
|
||||
/data/smartchart/tools 项目相关软件
|
||||
下述内容中，凡是涉及到/data/smartchart路径的，都可以将其修改为你自己系统上的路径。
|
||||
```
|
||||
|
||||
### 安装环境
|
||||
|
||||
#### 安装Python
|
||||
```
|
||||
cd /data/smartchart/tools
|
||||
yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel libffi-devel
|
||||
下载https://npm.taobao.org/mirrors/python/3.9.0/
|
||||
上传服务器，放入安装目录解压 或者
|
||||
Wget https://npm.taobao.org/mirrors/python/3.9.0/Python-3.9.0.tgz
|
||||
tar -zxvf Python-3.9.0.tgz
|
||||
|
||||
进行源码目录
|
||||
配置安装路径
|
||||
./Python-3.9.0/configure --prefix=/data/smartchart/tools/python3
|
||||
编译安装
|
||||
make && make install
|
||||
建立软链接
|
||||
ln -s /data/smartchart/tools/python3/bin/python3.9 /usr/bin/python3
|
||||
ln -s /data/smartchart/tools/python3/bin/pip3.9 /usr/bin/pip3
|
||||
测试是否安装成功
|
||||
python3 --version
|
||||
|
||||
```
|
||||
|
||||
### 建立python虚拟环境
|
||||
```
|
||||
python3 -m venv myvenv
|
||||
cd myvenv
|
||||
source bin/activate
|
||||
|
||||
```
|
||||
### 在虚拟环境中安装smartchart
|
||||
```
|
||||
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple smartchart -U
|
||||
|
||||
```
|
||||
|
||||
### 启动smartchart(测试部署), 企业部署方式可有尝咨询
|
||||
```
|
||||
smartchart runserver 0.0.0.0:8000 --insecure --noreload
|
||||
```
|
||||
@ -1 +0,0 @@
|
||||
购买专业版本，提供企业生产部署及无网离线部署方案
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 1100
|
||||
---
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 210
|
||||
---
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 固定数据集
|
||||
有一些场景, 比如已有一些固定的筛选器,或是需要测试用,或者Demo,或者其它图形需要用到一些共用的已确定好的数据
|
||||
这样我们可以不需要通过查询数据库的方式, 而直接写入数据集, 支持数组和字典的格式
|
||||
你只需要在数据集中起始写入 dataset= , 这样就是默认是固定数据
|
||||
- 如何快速的输入固定数据集, 你可以通过直接从EXCEL复制到数据集编辑器(以下图片非目前编辑器, 供参考),保存以后会自动生成:
|
||||
|
||||
|
||||
|
||||
- 固定数据集也支持之前提到传参数, 魔术方法, 缓存等所有数据集的功能
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
---
|
||||
weight: 2
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 用户如何上传文件
|
||||
smartchart默认是不自带文件上传功能
|
||||
但是smartchart是可以自已创造上传页面, 在模板商店中你可以找到相关模板进行购买
|
||||
然后通过模板下载的方式下载后进行操作
|
||||
这样每一个页面是可以单独使用权限控制的,就和控制报表权限一样,你还可能按需随意定制页面
|
||||
|
||||
|
||||
### 关于上传文件的路径
|
||||
默认的上传主目录是在项目的log的文件夹下面,
|
||||
你可以在setting.py(自定义django) 或 config.ini中设定UPLOAD_PATH来修改你的上传目录
|
||||
比如你上传页面的报表ID是23, 那么文件将会被上传到UPLOAD_PATH/23/你的文件名
|
||||
|
||||
### 如何使用上传的文件
|
||||
你需要使用[python连接器](https://gitee.com/smartchart/smartchart/wikis/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), 来操作你的上传的数据, 内置了变量ds_path为你的上传目录, 所以可以更方便的读取上传的文件,如上文件
|
||||
df = pd.read_excel(ds_path+'/23/文件名')
|
||||
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
---
|
||||
weight: 2
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
SmartChart标准数据集你可以想象为一个EXCEL的二维表, 有行和列
|
||||
你直接在数据集开发界面填写SQL即可
|
||||
|
||||
### 标准图形的数据表类型
|
||||
#### A类数据源
|
||||
```sql
|
||||
比如你的原始数据库中表的格式如下, 表名tb_name:
|
||||
城市 户型 数量
|
||||
长沙 A 12
|
||||
长沙 A 23
|
||||
上海 B 19
|
||||
|
||||
查询的sql: select 城市,户型,sum(数量) AS 数量 from tb_name group by 城市,户型
|
||||
正常的查询的结果为:
|
||||
[['城市','户型','数量'],
|
||||
['长沙','A',35],
|
||||
['上海','B ',19]]
|
||||
由于生成的数据格式第二行是 [字符,字符,数值], 后台会自动进行转列动作,
|
||||
生成图表更容易使用格式:
|
||||
[['Categroy','A','B'],
|
||||
['长沙', 35, 0],
|
||||
['上海', 0, 19]]
|
||||
```
|
||||
|
||||
#### B类数据源
|
||||
```sql
|
||||
再比如我们有一个表的数据格式, 指标是展开的:
|
||||
城市 A B
|
||||
长沙 10 12
|
||||
上海 11 19
|
||||
长沙 9 10
|
||||
|
||||
我们可以写的sql是:
|
||||
select 城市, sum(A) as A, sum(B) as B from tb_name group by 城市
|
||||
这样得到的结果是:
|
||||
[['城市','A','B'],
|
||||
['长沙', 19, 22],
|
||||
['上海', 11, 19]]
|
||||
和我们的标准格式也是一样的
|
||||
|
||||
```
|
||||
|
||||
### SQL多段查询
|
||||
有时你一个数据集可能只用一个SQL查询还不够，比如你需要一个清单数据，同时你需要一个汇总数据做为说明在图形中显示，这样你就需要使用多条SQL语句，在数据集中的写法你只需要用分号隔开，如：
|
||||
```sql
|
||||
select ... from xxx;
|
||||
select ..... from xxxxxxx
|
||||
|
||||
传递到图形中的格式为：
|
||||
{"df0":[[...]]. "df1":[[......]]}
|
||||
df0, df1分别对应的是第一段和第二段查询
|
||||
```
|
||||
[多段查询使用视屏参考](https://www.ixigua.com/6928570043022180876)
|
||||
|
||||
|
||||
### 支持的数据源：
|
||||
| 数据库 | 驱动填写 | 需安装 | 使用说明 |
|
||||
| :-----| :----: | :----: | :----: |
|
||||
| Mysql | mysql | 默认支持 | |
|
||||
| Mysql连接池 | mysqlpool | | |
|
||||
| Sqlite | sqlite |默认支持 | 连接地址填写绝对路径 |
|
||||
| API |任意|默认支持 | 参考数据集说明文档 |
|
||||
| EXCEL | 任意|默认支持 | 参考数据集说明文档 |
|
||||
| SQL Server|mssql | 需安装 pip install pymssql | |
|
||||
| SQL Server连接池|mssqlpool | | |
|
||||
| ORACLE |oracle| pip install cx_Oracle | |
|
||||
| ORACLE连接池 |oraclepool| | |
|
||||
| PostgreSql |gp| pip install psycopg2 | |
|
||||
| GP |gp| pip install psycopg2 | |
|
||||
| Impala |impala| pip install impyla | |
|
||||
| Hive |hive| pip install impyla | |
|
||||
| DB2 |db2| pip install ibm_db | |
|
||||
| 达梦 |dm| pip install dmPython | |
|
||||
| Python |python| pip install pandas, openpyxl | 参考数据集->特殊数据源 |
|
||||
| Redis |redis| pip install redis | 参考数据集->特殊数据源 |
|
||||
| Mongodb |mongodb| pip install pymongo | 参考数据集->特殊数据源 |
|
||||
| Clickhouse |clickhouse| pip install clickhouse_driver | |
|
||||
| Elasticsearch |es| pip install elasticsearch==7.13.0 | 参考数据集->特殊数据源 |
|
||||
| Sqlalchemy |sqlalchemy| pip install sqlalchemy | 参考数据集->特殊数据源 |
|
||||
| JDBC |jdbc| pip install JayDeBeApi | 参考数据集->特殊数据源 |
|
||||
| 自定义 |自定义| 用户自由定义 | 参考数据集->特殊数据源 |
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 200
|
||||
---
|
||||
@ -1,30 +0,0 @@
|
||||
---
|
||||
weight: 3
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 应用场景
|
||||
- 优化查询, 可一个数据集查询完所有数据进行分发
|
||||
- 减少重复查询的浪费, 同一个数据只查询一次
|
||||
|
||||
### 使用方法
|
||||
- 在数据开发界面点击按钮就可以切换成共享数据集/普通数据集
|
||||
|
||||
- 切换完成, 你会发现数据集消失,然后图标跑到菜单上面去了, 你可以在此修改你的查询
|
||||
|
||||
|
||||
- 在”高级“ 中配置
|
||||
|
||||
|
||||
- 这样1，2号图形都映射到了共享数据集的数据
|
||||
|
||||
|
||||
- 你也可以在数据集中写多个SQL查询
|
||||
|
||||
|
||||
- 在”高级“ 设定中进行数据映射
|
||||
|
||||
|
||||
- 观察1，2 号图形的变化
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
开发前建意先观看视屏, 了解基础说明, 视屏有点老和现在界面不一样,
|
||||
目前很多功能已经做成可视化配置, 理解过程即可, 具体以文档为准
|
||||
- [Smartchart数据集与图形](https://www.bilibili.com/video/BV1Gt4y1F7Ra "SQL")
|
||||
|
||||
|
||||
### 从仪表盘界面中进入简易开发界面
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
---
|
||||
weight: 4
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 应用场景
|
||||
类似于前后端开发, 后端会提供一些接口给前端, 但前端不一定需要在一打开页面就进行查询接口, 而是当有需要时再查询,
|
||||
比如数据下载, 只有当用户有下载需求时再加载,
|
||||
再比如有些与后台的数据联动, 我们只需要第一次加载时只显示第一层级, 点击时再加载其它层级
|
||||
|
||||
### 开启数据集懒加载
|
||||
你可以点击数据集的开发界面的"连接" 图标, 将"前端刷新(秒)" 修改为-1
|
||||
这时当打开仪表盘时, 此数据集不会被加载
|
||||
|
||||
### 应用
|
||||
一般懒加载数据集主要是用来做数据查询的, 所以并不太需要显示图形, 所以我们主要是用于在图形中进行赋值操作
|
||||
比如先在模板中定义一个全局变量:
|
||||
|
||||
然后修改图形编辑中的代码:
|
||||
|
||||
即刷新数据集时会进行变量赋值
|
||||
如果您使用VUE, 那么会更方便, 你可以直接使用vapp.变量名 = dataset进行赋值
|
||||
|
||||
### 查询数据
|
||||
你可以随时手动触发数据集的刷新, 比如懒加载的数据集序号为0
|
||||
你可以在你需要触发刷新的地方调用ds_refresh(0)即可刷新0号数据集并执行0号数据集中的JS代码
|
||||
|
||||
>TIPS
|
||||
>可以将懒加载的数据集同时转化为共享数据集(参考上文), 懒加载数据集将移到菜单栏显示
|
||||
@ -1,25 +0,0 @@
|
||||
---
|
||||
weight: 3
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 数据刷新设定方法
|
||||
|
||||
smartchart提供非常精细的数据刷新功能,及内存加速功能
|
||||
你可以在数据集开发界面，点击连接的图标，进行设定
|
||||
|
||||
|
||||
### 定时刷新
|
||||
你可以设定前端页面数据集向后端请求刷新的时间间隔，单位秒
|
||||
> 如果你发现定时刷新，数据并没有变化，可能原因是您数据的缓存时间设定大于定时刷新的时间
|
||||
|
||||
### 数据集缓存加速（PRO)
|
||||
smartchart专业版提供内存加速技术，对数据库仅需请求一次，之后都是毫秒级响应
|
||||
- 间隔时间刷新,单位分钟,如设定 间隔时间为0.5, 则如果下一次访问时间超过30秒, 即触发数据刷新
|
||||
- 固定时点刷新, 如设定 间隔时间 为-1, 则固定时点刷新, 即访问的时间超过固定的时点时(如下图每天09:25), 触发数据刷新
|
||||
- 强制刷新, 访问url加上&refresh=Y, 则强制刷新数据, 此刷新不会影响间隔或固定刷新的时间, 不会更新下次同步时间
|
||||
|
||||
|
||||
### 后台触发强制刷新 (PRO)
|
||||
请参考文档 [后台主动触发刷新](https://gitee.com/smartchart/smartchart/wikis/9.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E5%90%8E%E5%8F%B0API%E5%88%B7%E6%96%B0)
|
||||
@ -1,45 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
对接外部API取数, 注意返回一定要是JSON格式
|
||||
你只需要在数据集编辑框中如下输入
|
||||
```json
|
||||
-- GET 方法:
|
||||
dataset= {
|
||||
"url":"https://www.smartchart.cn/smartdata/api/?i=loaddataset1&j=1"
|
||||
}
|
||||
|
||||
-- POST 方法:
|
||||
dataset= {
|
||||
"url":"https://www.smartchart.cn/smartdata/api",
|
||||
"method":"POST",
|
||||
"data":{"i":"loaddataset1", "j":"1"}
|
||||
...
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
例如你可以传入参数做出联动效果
|
||||
|
||||
```json
|
||||
dataset= {
|
||||
"url":"https://www.smartchart.cn/smartdata/api",
|
||||
"method":"POST",
|
||||
"data":{"i":"loaddataset1", "j":"/*$参数名*/"}
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
你也可以增加header等认证方式
|
||||
|
||||
```json
|
||||
dataset= {
|
||||
"url":"https://www.smartchart.cn/smartdata/api",
|
||||
"method":"GET",
|
||||
"headers":{"Cookie":"xxxxxxx"}
|
||||
...
|
||||
}
|
||||
```
|
||||
@ -1,131 +0,0 @@
|
||||
#### 数据源配置方法
|
||||
|
||||
|
||||
|
||||
#### 查询方法
|
||||
|
||||
|
||||
##### 更多查询方法参考
|
||||
```
|
||||
模糊查询
|
||||
body = {
|
||||
'query': { # 查询命令
|
||||
'match': { # 查询方法：模糊查询（会被分词）。比如此代码，会查到只包含：“我爱你”， “中国”的内容
|
||||
'name': '刘'
|
||||
}
|
||||
},
|
||||
'size': 20 # 不指定默认是10，最大值不超过10000（可以修改，但是同时会增加数据库压力）
|
||||
}
|
||||
|
||||
term，精准单值查询
|
||||
# 注：此方法只能查询一个字段，且只能指定一个值。类似于mysql中的where ziduan='a'
|
||||
body ={
|
||||
'query':{
|
||||
'term':{
|
||||
'ziduan1.keyword': '刘婵' # 查询内容等于“我爱你中国的”的数据。查询中文，在字段后面需要加上.keyword
|
||||
# 'ziduan2': 'liuchan'
|
||||
}
|
||||
}
|
||||
}
|
||||
erms，精准多值查询
|
||||
#此方法只能查询一个字段，但可以同时指定多个值。类似于mysql中的where ziduan in (a, b,c...)
|
||||
body ={
|
||||
"query":{
|
||||
"terms":{
|
||||
"ziduan1.keyword": ["刘婵", "赵云"] # 查询ziduan1="刘婵"或=赵云...的数据
|
||||
}
|
||||
}
|
||||
}
|
||||
multi_match，多字段查询
|
||||
# 查询多个字段中都包含指定内容的数据
|
||||
body = {
|
||||
"query":{
|
||||
"multi_match":{
|
||||
"query":"我爱你中国", # 指定查询内容，注意：会被分词
|
||||
"fields":["ziduan1", "ziduan2"] # 指定字段
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
prefix，前缀查询
|
||||
body = {
|
||||
'query': {
|
||||
'prefix': {
|
||||
'ziduan.keyword': '我爱你' # 查询前缀是指定字符串的数据
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# 注：英文不需要加keyword
|
||||
|
||||
wildcard，通配符查询
|
||||
body = {
|
||||
'query': {
|
||||
'wildcard': {
|
||||
'ziduan1.keyword': '?刘婵*' # ?代表一个字符，*代表0个或多个字符
|
||||
}
|
||||
}
|
||||
}
|
||||
# 注：此方法只能查询单一格式的（都是英文字符串，或者都是汉语字符串）。两者混合不能查询出来。
|
||||
|
||||
regexp，正则匹配
|
||||
body = {
|
||||
'query': {
|
||||
'regexp': {
|
||||
'ziduan1': 'W[0-9].+' # 使用正则表达式查询
|
||||
}
|
||||
}
|
||||
}
|
||||
bool，多条件查询
|
||||
# must：[] 各条件之间是and的关系
|
||||
body = {
|
||||
"query":{
|
||||
"bool":{
|
||||
'must': [{"term":{'ziduan1.keyword': '我爱你中国'}},
|
||||
{'terms': {'ziduan2': ['I love', 'China']}}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# should: [] 各条件之间是or的关系
|
||||
body = {
|
||||
"query":{
|
||||
"bool":{
|
||||
'should': [{"term":{'ziduan1.keyword': '我爱你中国'}},
|
||||
{'terms': {'ziduan2': ['I love', 'China']}}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
# must_not：[]各条件都不满足
|
||||
body = {
|
||||
"query":{
|
||||
"bool":{
|
||||
'must_not': [{"term":{'ziduan1.keyword': '我爱你中国'}},
|
||||
{'terms': {'ziduan2': ['I love', 'China']}}]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
# bool嵌套bool
|
||||
# ziduan1、ziduan2条件必须满足的前提下，ziduan3、ziduan4满足一个即可
|
||||
body = {
|
||||
"query":{
|
||||
"bool":{
|
||||
"must":[{"term":{"ziduan1":"China"}}, # 多个条件并列 ，注意：must后面是[{}, {}],[]里面的每个条件外面有个{}
|
||||
{"term":{"ziduan2.keyword": '我爱你中国'}},
|
||||
{'bool': {
|
||||
'should': [
|
||||
{'term': {'ziduan3': 'Love'}},
|
||||
{'term': {'ziduan4': 'Like'}}
|
||||
]
|
||||
}}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
@ -1,16 +0,0 @@
|
||||
##### 应用场景
|
||||
当无法在python中找到连接库时, 你还可以采用jdbc的连接方式
|
||||
|
||||
##### 使用方法
|
||||
- 首先您需要安装jdbc的包
|
||||
```
|
||||
pip install JayDeBeApi
|
||||
```
|
||||
|
||||
- 在任意的一个仪表盘的 "模板" 编辑器中, 点击上传资源的图标上传相应的jdbc JAR包即可
|
||||
|
||||
|
||||
|
||||
- 新建连接的方式, 以下使用impala为例
|
||||
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
---
|
||||
weight: 2
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
#### 应用场景
|
||||
当SQL查询无法满足你的需求, 你需要对查询后的结果进行处理, 或者你需要使用Excel的数据源, 甚至你需要对不同系统的数据进行查询, Python连接器可以帮到你
|
||||
我们又称他为万能数据集， 你可以使用任何python语法，
|
||||
**需要把数据集的结果赋值给ds变量!!**
|
||||
|
||||
首先你需要新建python连接器, 由于安全控制只允许超级管理员建立
|
||||
|
||||
|
||||
```python
|
||||
# 内置函数说明
|
||||
ds_get(id) #输入目标数据集的id名, 可以获取目标数据集
|
||||
ds_df(id) #输入目标数据集的id名, 转化成pandas的df对象
|
||||
ds_sql(conn_name, sql_str) #输入连接池中的名称, SQL语句, 获取数据集
|
||||
ds_list(df) #将pandas的df对象转化成数据集
|
||||
|
||||
```
|
||||
|
||||
##### 使用方法样列说明
|
||||
```python
|
||||
# 读取Excel数据处理, 如需上传页面可参考"数据上传"说明
|
||||
import pandas as pd
|
||||
df = pd.read_excel('/Users/../smartdemo.xlsx', 'demo')
|
||||
df = df.groupby('c3').agg({'qty':'sum'}).reset_index()
|
||||
ds = ds_list(df)
|
||||
|
||||
#从数据集获取数据
|
||||
ds=ds_get(12)
|
||||
ds=ds[:15]
|
||||
|
||||
#从数据集获取数据转化成pandas对象处理
|
||||
df = ds_df(12)
|
||||
df = df.sort_values(by="出场数", ascending=False)
|
||||
ds = ds_list(df)
|
||||
|
||||
#可以生成字典格式的数据集供多个图形使用
|
||||
import pandas as pd
|
||||
df = pd.read_excel('/Users/../smartdemo.xlsx', 'demo')
|
||||
df1 = df.groupby('c3').agg({'qty':'sum'}).reset_index()
|
||||
df2 = df.groupby(['province','c3']).agg({'qty':'sum'}).reset_index()
|
||||
ds = {'df1': ds_list(df1), 'df2': ds_list(df2)}
|
||||
|
||||
#可以直接执行SQL
|
||||
sql_str = '''select H1 as heroname, sum(qty) as 出场数 from T
|
||||
/* where H2 = '$H2' */
|
||||
group by H1 order by sum(qty) desc'''
|
||||
ds = ds_sql('XXX', sql_str)
|
||||
ds = ds[:10]
|
||||
|
||||
```
|
||||
@ -1,32 +0,0 @@
|
||||
#### 应用场景
|
||||
你可能会有这样的一些需求, 展示数据是要通过外部的程序计算好,如一些实时的计算场景,用spark计算好的数据 或爬虫爬取的数据, 然后写入redis或nosql的数据库,最后由前端图形直接展示或数据下载,SmartChart支持这一块的应用
|
||||
|
||||
#### 使用方法
|
||||
你可以创建一个redis的连接池, 然后按照通用的方法建立数据集
|
||||
不同的是, **数据集的SQL区不再是写sql代码, 而只需要写redis中的keyname**
|
||||
|
||||
如redis中存储的数据是keyname 为 "指标A", 数据 '{"长沙":1,"上海":2}'
|
||||
这样我们只需要在数据集中写上
|
||||
```
|
||||
指标A
|
||||
```
|
||||
即可,
|
||||
最后你会得到{"长沙":1,"上海":2}的返回结果
|
||||
|
||||
如果你需要的是表格格式, 那么你只需要往redis中存入一个二维数组, 比如:
|
||||
[["省份","数量"],["长沙",1],["上海",2]]
|
||||
|
||||
|
||||
> 注意数据存入redis为字符串格式,你可使用python的json.dumps来生成字符串格式存入
|
||||
|
||||
##### 当然我们也支持同一个数据中获取多个keyname
|
||||
比如还有一个"指标B", 数据是'12345'
|
||||
我们可以同时写上两个指标,用分号隔开:
|
||||
```
|
||||
指标A;指标B
|
||||
```
|
||||
最后你会得到的结果是:
|
||||
{
|
||||
"指标A":{"长沙":1,"上海":2},
|
||||
"指标B":12345
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 220
|
||||
---
|
||||
@ -1,59 +0,0 @@
|
||||
用于获取kafka指定分区的最后一条记录, 用于实时场景
|
||||
使用方法参考"自定义数据源"
|
||||
以下为参考代码:
|
||||
|
||||
```python
|
||||
def dataset(*args, **kwargs):
|
||||
"""
|
||||
返回查询数据集
|
||||
:return: 二维数组或JSON字典
|
||||
"""
|
||||
from kafka import KafkaConsumer, TopicPartition
|
||||
import json
|
||||
|
||||
sqlList = args[0] # 数据集编辑界面的输入已按分号拆分成数组 [sql1, sql2...]
|
||||
config = args[1] # 相关的配置字典{'host','port','user','password','db'}
|
||||
# 插入你的数据查询及处理代码, 生成result即可
|
||||
result = {}
|
||||
consumer = KafkaConsumer(sasl_mechanism='PLAIN',
|
||||
security_protocol='SASL_PLAINTEXT',
|
||||
sasl_plain_username=config['user'],
|
||||
sasl_plain_password=config['password'],
|
||||
bootstrap_servers=config['host'],
|
||||
auto_offset_reset='earliest',
|
||||
api_version=(1, 0, 0),
|
||||
consumer_timeout_ms=50,
|
||||
value_deserializer=lambda v: json.loads(v.decode('utf-8')),
|
||||
)
|
||||
topic = sqlList[0]
|
||||
partition = int(config['db'])
|
||||
tp = TopicPartition(topic=topic, partition=partition)
|
||||
consumer.assign([tp])
|
||||
end_offsets = consumer.end_offsets([tp]).get(tp) # 获取当前消费者最大偏移量
|
||||
consumer.seek(tp, offset=end_offsets-1)
|
||||
for message in consumer:
|
||||
result = message.value
|
||||
break
|
||||
return result
|
||||
|
||||
def insert_dataset(*args, **kwargs):
|
||||
"""
|
||||
数据填报实现
|
||||
"""
|
||||
from kafka import KafkaProducer
|
||||
import json
|
||||
|
||||
contents = args[0] # 传入的数据集二维数组格式
|
||||
table = args[1] # 配置中的表名
|
||||
config = args[3] # 相关的配置字典{'host','port','user','password','db'}
|
||||
# 插入你的写入数据逻辑代码
|
||||
producer = KafkaProducer(sasl_mechanism='PLAIN',
|
||||
security_protocol='SASL_PLAINTEXT',
|
||||
sasl_plain_username=config['user'],
|
||||
sasl_plain_password=config['password'],
|
||||
bootstrap_servers=config['host'],
|
||||
value_serializer=lambda v: json.dumps(v).encode('utf-8')
|
||||
)
|
||||
producer.send(table, value=contents, partition=int(config['db']))
|
||||
|
||||
```
|
||||
@ -1,44 +0,0 @@
|
||||
#### 使用方法
|
||||
连接池正常配置即可
|
||||
数据集开发中，填写查询需求：
|
||||
|
||||
```
|
||||
{"db": "db1", "table": "tb1", "filter": {"name": "Zarten"},
|
||||
"projection": {"_id": 0}, "sort": [["_id", 1]], "limit": 10}
|
||||
```
|
||||
由于返回的字典格式， 如需转化成二维数组， 可使图形中的转化函数ds_mapToList
|
||||
```
|
||||
let dataset=ds_mapToList(__dataset__);
|
||||
```
|
||||
|
||||
#### 参数说明：
|
||||
除table，其它都为可选参数
|
||||
|参数|说明|样列|
|
||||
| :-----| :----: | :----: |
|
||||
|db|数库名,默认连接设定中db名||
|
||||
|table|表名[必填]||
|
||||
|filter|筛选项,具体用法参考下文|{"name": "Zarten","date":"2020-10-01"}|
|
||||
|projection|显示列|{"name": 1,"date":1}|
|
||||
|sort|排序，-1为降序|[["date", -1]]|
|
||||
|limit|限定返回数量||
|
||||
|
||||
#### filter条件说明
|
||||
且条件
|
||||
```
|
||||
{"age":{"$gt":22}, "name":{"$regex":"user"}}
|
||||
```
|
||||
或条件
|
||||
```
|
||||
{ "$or": [ {"age": {"$gt": 22}}, {"name": {"$regex": "user"}} ] }
|
||||
```
|
||||
|
||||
```
|
||||
比较查询
|
||||
$lt和<，$lte和<=，$gt和>，gte和>=，ne和!=是一一对应的
|
||||
{"field_name": {"$lt": value, "$gt": value}}
|
||||
关联查询$in和$nin
|
||||
{"field_name": {"$in": [1,5,8]}}
|
||||
$regex为模糊查询的字符串提供正则表达式功能
|
||||
{"$or": [{"field_name": {'$regex': value}},{"field_name2": {"$regex": value}}]}
|
||||
```
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
常规的连接池的设定, 大家应该都很清楚了,
|
||||
Smartchart也支持sqlalchemy连接, 对于一些smartchart不支持的数据源可以使用此方法
|
||||
配置方法:
|
||||
|
||||
只用填以上内容, 其它可留空
|
||||
连接地址的写法参考sqlalchemy说明:
|
||||
```
|
||||
可选参数。一个标准的链接URL是这样的：
|
||||
dialect+driver://username:password@host:port/database
|
||||
dialect，是数据库类型，大概包括：sqlite, mysql, postgresql, oracle, or mssql.
|
||||
driver，是使用的数据库API，驱动，连接包，随便叫什么吧。
|
||||
username，用户名
|
||||
password，密码
|
||||
host，网络地址，可以用ip，域名，计算机名，当然是你能访问到的。
|
||||
port，数据库端口。
|
||||
databas，数据库名。
|
||||
其实这些也就dialect和dirver需要解释。
|
||||
|
||||
二：连接sqlite3
|
||||
1，驱动
|
||||
sqlite3是个文件数据库，不需要什么驱动，或者说python内置了驱动。
|
||||
2，标准连接参数
|
||||
# sqlite://<nohostname>/<path>
|
||||
没有hostname
|
||||
3，各种链接参数
|
||||
# 相对路径，就是这个python文件同目录下foo.db
|
||||
engine = create_engine('sqlite:///foo.db')
|
||||
#绝对路径
|
||||
#Unix/Mac下用四条////表示
|
||||
engine = create_engine('sqlite:////absolute/path/to/foo.db')
|
||||
#Windows下用三条///加盘符路径用两条\\
|
||||
engine = create_engine('sqlite:///C:\\path\\to\\foo.db')
|
||||
#Windows 也可以这么用三条///加盘符路径用一条\
|
||||
engine = create_engine(r'sqlite:///C:\path\to\foo.db')
|
||||
#数据库建在内存里。URI保持为空即可
|
||||
engine = create_engine('sqlite://')
|
||||
|
||||
三：连接mysql（mariadb）
|
||||
sqlalchemy默认使用mysql-python作为链接驱动，既default模式
|
||||
选哪种驱动，就装哪个包。
|
||||
1，default默认链接方式
|
||||
engine = create_engine('mysql://scott:tiger@localhost/foo')
|
||||
2，# mysql-python，声明使用mysql-python驱动
|
||||
engine = create_engine('mysql+mysqldb://scott:tiger@localhost/foo')
|
||||
3，MySQL-connector-python 声明使用MySQL-connector-python驱动（推荐使用）
|
||||
engine = create_engine('mysql+mysqlconnector://scott:tiger@localhost/foo')
|
||||
4，OurSQL 声明使用OurSQL驱动
|
||||
engine = create_engine('mysql+oursql://scott:tiger@localhost/foo')
|
||||
|
||||
四：连接Microsoft SQL Server
|
||||
sqlalchemy默认使用 pyodbc作为链接驱动。
|
||||
1，pyodbc
|
||||
engine = create_engine('mssql+pyodbc://scott:tiger@mydsn')
|
||||
2，pymssql
|
||||
engine = create_engine('mssql+pymssql://scott:tiger@hostname:port/dbname')
|
||||
|
||||
|
||||
五：连接PostgreSQL
|
||||
PostgreSQL默认使用 psycopg2作为链接驱动，既default模式
|
||||
1， default
|
||||
engine = create_engine('postgresql://scott:tiger@localhost/mydatabase')
|
||||
2，psycopg2
|
||||
engine = create_engine('postgresql+psycopg2://scott:tiger@localhost/mydatabase')
|
||||
3， pg8000
|
||||
engine = create_engine('postgresql+pg8000://scott:tiger@localhost/mydatabase')
|
||||
|
||||
六：连接Oracle
|
||||
Oracle可能只有 cx_oracle一个驱动包，既default模式和声明模式一样。
|
||||
1，default
|
||||
engine = create_engine('oracle://scott:tiger@127.0.0.1:1521/sidname')
|
||||
2，cx_oracle
|
||||
engine = create_engine('oracle+cx_oracle://scott:tiger@tnsname')
|
||||
|
||||
```
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
---
|
||||
weight: 3
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
smartchart已实现大部分常用的数据源连接, 对于其它的, 您也可以使用python数据源进行处理
|
||||
但是使用python数据源有一定的缺陷, 需要在dataset上写python代码, 不能复用
|
||||
对于一些带连接信息的还需要重复写入
|
||||
所以你还可以使用自定义数据源
|
||||
#### 应用场景
|
||||
- 未内置的数据源, 如需要使用sparkSQL, ES等
|
||||
- 标准处理满足不了要求, 需要对数据进行预处理的情况
|
||||
- 需要刷新时触发预警等自定义动作
|
||||
- 需要自定义写入方法, 个性化查询需求, 甚至是实时爬取数据
|
||||
|
||||
#### 使用方法
|
||||
- 首先你需要新建一个python脚本文件, 如diy_conn.py
|
||||
- 复制以下代码到这个文件, 然后编写你的自定义查询方法
|
||||
```python
|
||||
def dataset(*args, **kwargs):
|
||||
"""
|
||||
返回查询数据集
|
||||
:return: 二维数组或JSON字典
|
||||
"""
|
||||
sqlList = args[0] # 数据集编辑界面的输入已按分号拆分成数组 [sql1, sql2...]
|
||||
config = args[1] # 相关的配置字典{'host','port','user','password','db'}
|
||||
# 插入你的数据查询及处理代码, 生成result即可
|
||||
result = [[]]
|
||||
|
||||
return result
|
||||
|
||||
def insert_dataset(*args, **kwargs):
|
||||
"""
|
||||
数据填表实现
|
||||
"""
|
||||
contents = args[0] # 传入的数据集二维数组格式
|
||||
table = args[1] # 配置中的表名
|
||||
config = args[3] # 相关的配置字典{'host','port','user','password','db'}
|
||||
# 插入你的写入数据逻辑代码
|
||||
|
||||
|
||||
```
|
||||
|
||||
- 在任意的仪表盘开发界面中 "模板" --> 点击上传图标, 将这个python文件上传即可
|
||||
|
||||
|
||||
- 新建数据源, 驱动填写之前上传过的文件名, 比如我们这个是diy_conn, 其它参数按照你自定义的需求填写, 会自动传入你的自定义函数
|
||||
|
||||
|
||||
之后你可以正常使用这个自定义数据源了
|
||||
|
||||
如果你对python不熟悉, 也可按需定制, 你只需上传即可使用
|
||||
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
---
|
||||
weight: 3
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 应用场景
|
||||
Smartchart提供了很多通用的图形,你可以在商店中直接使用
|
||||
如果要个性化需要你进行自定义, 比如你可能需要在同一个图上展示柱形图和线性图
|
||||
|
||||
开发前建意先观看视屏, 了解基础说明, 视屏有点老和现在界面不一样,
|
||||
**目前很多功能已经做成可视化配置, 理解过程即可, 具体以文档为准**
|
||||
|
||||
- [Smartchart数据库与图形的对话](https://www.ixigua.com/6910413586208653837?id=6910373199603565063 "图形开发")
|
||||
- [Smartchart图形开发一](https://www.bilibili.com/video/BV1X3411t7DQ/ "图形开发")
|
||||
- [Smartchart图形开发二](https://www.bilibili.com/video/BV1t34y1R7Z8/ "图形开发")
|
||||
|
||||
|
||||
### 获取原生echarts图形
|
||||
首先我们在ECHART官网可能找一个你喜欢的图形, 如下简单柱形图链接:
|
||||
[](https://echarts.apache.org/examples/zh/editor.html?c=bar-simple)
|
||||
|
||||
打开我们可以看对应的option:
|
||||
```javascript
|
||||
option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar'
|
||||
}]
|
||||
};
|
||||
```
|
||||
|
||||
### 转化为smartchart图形
|
||||
复制到Smartchart图形编辑器， 点击"刀叉“ 图标(目前是魔法梆)， 会自动进行初步转化
|
||||
|
||||
|
||||
接下来我们就进行下改造, 请注意对比, 你只需照着复制即可
|
||||
```javascript
|
||||
let dataset = __dataset__ //传入dataset
|
||||
let legend_label = ds_rowname(dataset) //可选, 自动获取legend
|
||||
let xlabel = dataset[0].splice(1) //x轴的标签列
|
||||
dataset = ds_createMap(dataset) //转化成KV格式
|
||||
|
||||
//初始化series
|
||||
var series=[];
|
||||
series.push({
|
||||
data: dataset[legend_label[0]], //对应的第一个图列
|
||||
type: 'bar'
|
||||
});
|
||||
series.push({
|
||||
data: dataset[legend_label[1]], //对应的第二个图列
|
||||
type: 'line'
|
||||
});
|
||||
|
||||
option__name__ = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xlabel //X轴的标签
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series:series,
|
||||
};
|
||||
charts.push(myChart__name__);
|
||||
```
|
||||
这样一个柱形+线性图就出来了
|
||||
[](https://www.smartchart.cn/echart/editor_min/?chartid=61 "线柱混合图")
|
||||
|
||||
当然一个图形还有很多其它的元素, 比如标题, legend, 等等 更多option的配置项, 可以点击”！“号图标查看，你可以直接参考echarts的设定， **完全一样！！**
|
||||
|
||||
以下我们做了些简单的修改
|
||||
```javascript
|
||||
option__name__ = {
|
||||
title: {
|
||||
text: '自定义图示例',
|
||||
left: 'center'
|
||||
}, //定义标题的显示
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c}' //鼠标移动提示的格式
|
||||
},
|
||||
legend: {
|
||||
left: 'left',
|
||||
data: legend_label
|
||||
}, //定义图例的显示
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xlabel
|
||||
}, //定义X轴的显示
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
//图例定义
|
||||
series:series,
|
||||
};
|
||||
```
|
||||
|
||||
```javascript
|
||||
//关于自动化series, 可以参考以下代码
|
||||
var series =[];
|
||||
for (var i=1;i<dataset[0].length;i++){
|
||||
series.push({type: 'bar'})
|
||||
}
|
||||
|
||||
```
|
||||
是不是非常简单 **Smartchart让你使用echarts没有门槛**
|
||||
|
||||
|
||||
> TIPS:
|
||||
> - 如果你在图形编辑器中可以显示图形， 但是保存后在dashboard中无法， 首先检查下所有的mychart, option是否都有转化成带__name__, 如果都有，可能原因是你的代码中有mychart.setoption， 这样你可以在代码下方加上myChart__name__.setOption(option__name__);即可
|
||||
> - 如果你在开发界面的仪表盘能看到图形显示，但预览仪表盘时，不显示图形，一般都是因为你图形代码中js结束需加分号的地方没有添加导致的
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 330
|
||||
---
|
||||
@ -1,94 +0,0 @@
|
||||
|
||||
### 模式开启
|
||||
需要开启模板开发模式, 并开启basevue模板
|
||||
|
||||
|
||||
|
||||
### 在Body加入组件
|
||||
```html
|
||||
<!--表格-->
|
||||
<div class="smtdrag" id="id_1654907858638">
|
||||
<el-table
|
||||
:data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
|
||||
height="100%"
|
||||
size="mini"
|
||||
header-cell-class-name="tablehead"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column v-for="item in tableHead" :label="item.label" :property="item.prop" sortable>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--表格结束-->
|
||||
<!--分页控件-->
|
||||
<el-pagination align='center'
|
||||
@size-change="handlerSizeChange"
|
||||
@current-change="handlerCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
layout="total,sizes,prev,pager,next,jumper"
|
||||
:total="tableData.length"
|
||||
></el-pagination>
|
||||
<!--分页控件结束-->
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
### 在JS区域加入
|
||||
```
|
||||
var vapp = new Vue({el: '#vue_app', delimiters: ['{[', ']}'],
|
||||
data: {
|
||||
tableData:[], //表数据
|
||||
tableHead:[], //表头
|
||||
currentPage:1,
|
||||
total:20,
|
||||
pageSize:10
|
||||
|
||||
},
|
||||
methods: {
|
||||
//处理分页数量
|
||||
handlerSizeChange(val){
|
||||
this.currentPage = 1;
|
||||
this.pageSize=val;
|
||||
},
|
||||
//处理页选择
|
||||
handlerCurrentChange(val){
|
||||
this.currentPage = val;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
```
|
||||
|
||||
### 新增一个数据集
|
||||
```
|
||||
select * from smartdemo2
|
||||
limit /* $limit -- */ 100
|
||||
|
||||
```
|
||||
### 图形开发中修改
|
||||
|
||||
```js
|
||||
let df0 = __dataset__;
|
||||
//处理表头
|
||||
let columnsDict = {'c1':'渠道','qty':'数量'};
|
||||
let tableHead = [];
|
||||
let tableHeadLabel;
|
||||
for (let i=0;i<df0[0].length;i++){
|
||||
if(columnsDict.hasOwnProperty(df0[0][i])){
|
||||
df0[0][i] = columnsDict[df0[0][i]]
|
||||
}
|
||||
tableHeadLabel=df0[0][i];
|
||||
tableHead.push({label: tableHeadLabel, prop:df0[0][i]});
|
||||
}
|
||||
|
||||
//VUE赋值
|
||||
vapp.tableHead = tableHead;
|
||||
vapp.tableData=ds_createMap_all(df0);
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
> smartchart内置了这个查询模板, 你可以通过[本地模板恢复快速应用](https://gitee.com/smartchart/smartchart/wikis/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)
|
||||
@ -1,53 +0,0 @@
|
||||
---
|
||||
weight: 4
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 应用场景
|
||||
- 输入控件,如输入框,筛选器,多选,按钮...
|
||||
- 显示组件, 文本, 图片, 视屏...
|
||||
- 表格组件
|
||||
> 如果你还不熟悉html, 建意先花几分钟看下文档, 推荐 [HTML基础](https://www.runoob.com/html/html-tutorial.html)
|
||||
> 实际应用中有不熟悉的组件, 你都可以通过baidu搜索到, 如时间选择器
|
||||
|
||||
|
||||
### 如何将html组件转化为smartchart组件
|
||||
比如我们要实现一个有多选项和按钮的网页元素
|
||||
|
||||
|
||||
从各大搜索平台上我们可以找到html的代码是：
|
||||
```html
|
||||
<label><input type="checkbox">孙尚香</label>
|
||||
.....
|
||||
<button id='id_select0'>提交</button>
|
||||
```
|
||||
那么我们可以直接在图形编辑器写上
|
||||
```js
|
||||
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;
|
||||
```
|
||||
但是由于我们是要通过传入的数据动态变化的，所以只需要做简单修改
|
||||
```js
|
||||
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组件，
|
||||
你可以通过学习”万能表格系列视屏“ 来了解通用组件开发
|
||||
[第一波](https://www.bilibili.com/video/BV1Ma41187oZ)
|
||||
[第二波](https://www.bilibili.com/video/BV1SR4y1F7Pp)
|
||||
[第三波](https://www.bilibili.com/video/BV11P4y1T7gX)
|
||||
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 300
|
||||
---
|
||||
@ -1,121 +0,0 @@
|
||||
---
|
||||
weight: 2
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
在做自定义html组件的时候你可能需要用得上：
|
||||
|
||||
一、向上遍历
|
||||
|
||||
1. parent() 获取元素的直接父元素
|
||||
```
|
||||
$("span").parent().css({
|
||||
"color":"red",
|
||||
"border":"1px solid red"
|
||||
})
|
||||
```
|
||||
|
||||
2. parents() 获取元素的祖先元素，直到根元素html
|
||||
```
|
||||
$("span").parents().css({
|
||||
"color":"red",
|
||||
"border":"1px solid red"
|
||||
})
|
||||
```
|
||||
3. parentsUntil() 向上查找直到遇见某个祖先元素为止
|
||||
```
|
||||
$("span").parentsUntil("div").css({ //向上查找直到遇见div元素为止
|
||||
"color":"red",
|
||||
"border":"1px solid red"
|
||||
})
|
||||
```
|
||||
二、向下遍历
|
||||
```
|
||||
1. children() 查找子元素[按照从属关系]
|
||||
|
||||
$("ul").children("li:first-child")
|
||||
|
||||
2. find() 按照指定的条件向下查找
|
||||
|
||||
$("ul").find("span")
|
||||
|
||||
```
|
||||
三、水平遍历
|
||||
|
||||
```
|
||||
1. siblings() 获取元素的所有兄弟元素
|
||||
|
||||
$(".start").siblings().css({color:"red",border:"2px solid red"})
|
||||
|
||||
2. next() 获取元素的下一个兄弟元素
|
||||
|
||||
$(".start").next().css({color:"red",border:"2px solid red"})
|
||||
|
||||
3. nextAll() 获取其后的所有兄弟元素
|
||||
|
||||
$(".start").nextAll().css({color:"red",border:"2px solid red"})
|
||||
|
||||
4. nextUntil() 查找后面所有的兄弟元素，直到遇见某个元素为止
|
||||
|
||||
$(".start").nextUntil("li:last-child").css({color:"red",border:"2px solid red"})
|
||||
|
||||
5. prev() 查找上一个兄弟元素
|
||||
|
||||
$("li.start").prev().css({color:"red",border:"2px solid red"})
|
||||
|
||||
6. prevAll() 查找上面所有的兄弟元素
|
||||
|
||||
$("li.start").prevAll().css({color:"red",border:"2px solid red"})
|
||||
|
||||
prevUntil() 查找上面所有的兄弟元素，直到遇见某个元素为止
|
||||
$(".start").prevUntil("li:first").css({"color":"red","border":"2px solid red"})
|
||||
|
||||
```
|
||||
|
||||
四、过滤
|
||||
|
||||
```
|
||||
1. first() 获取第一个元素
|
||||
|
||||
$("li").first().css("color","red");
|
||||
|
||||
2. last() 获取最后一个元素
|
||||
|
||||
$("li").last().css("color","red");
|
||||
|
||||
3. not() 获取不是…的元素
|
||||
|
||||
$("li").not(":eq(2)").css("font-size","26px");
|
||||
|
||||
4. eq(n) 获取索引为n的元素
|
||||
|
||||
$("li").eq(3).css("background","green");
|
||||
|
||||
5. has() 检测某个子元素是否存在
|
||||
|
||||
$("li").eq(1).has("span").length)
|
||||
|
||||
6. filter() 筛选出与符合条件的DOM元素
|
||||
|
||||
$("div")..filter(".middle")
|
||||
|
||||
7. is() 用来判断是否符合条件
|
||||
|
||||
$("p").parent().is("div") //判断p的父元素是不是div,是就返回true,不是就返回false
|
||||
|
||||
```
|
||||
|
||||
五、each遍历
|
||||
|
||||
```
|
||||
1. each() 方法为每个匹配元素规定要运行的函数。
|
||||
|
||||
$(selector).each(function(index,element){
|
||||
.....
|
||||
})
|
||||
//index 表示当前遍历元素的索引
|
||||
element 当前的元素（也可使用 "this" 选择器）
|
||||
|
||||
2. $.each(obj,function( index,value){})
|
||||
```
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 310
|
||||
---
|
||||
@ -1,155 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
### 应用场景
|
||||
在图形开发中，我们可能需要使用js对传递过来的数据进行处理
|
||||
|
||||
### 原始数据格式
|
||||
假设dataset的格式是, SQL = Select 维度1,维度2,数据 from xxxx, 生成的数据集如下
|
||||
```javascript
|
||||
dataset = [['category','C1','C2'],
|
||||
['R1', 12, 18],
|
||||
['R2', 10, 17] ]
|
||||
```
|
||||
|
||||
### 转化函数
|
||||
#### 生成字典表示为key->[], 常用于定制化高的图形
|
||||
```
|
||||
result = ds_createMap(dataset)
|
||||
结果 = {"category":['C1','C2'],
|
||||
"R1" : [12, 10],
|
||||
"R2" : [18, 17]}
|
||||
```
|
||||
|
||||
#### 生成非常多前端组件要求的格式
|
||||
```
|
||||
result = ds_createMap_all(dataset)
|
||||
结果 = [{"category":"R1", "C1": 12, "C2": 18},
|
||||
{"category":"R2", "C1": 10, "C2": 17}]
|
||||
|
||||
```
|
||||
|
||||
#### 获取列名list, 用于获取系列名
|
||||
```
|
||||
result = ds_rowname(dataset)
|
||||
结果 = ['R1','R2']
|
||||
```
|
||||
|
||||
#### 将数据集行列转化, 一般用于坐标轴翻转
|
||||
```
|
||||
result = ds_transform(dataset)
|
||||
结果 = [['category','R1','R2'],
|
||||
['C1', 12, 10],
|
||||
['C2', 18, 17]]
|
||||
```
|
||||
|
||||
|
||||
#### 两个数据集左关联, 常用于将两段查询数据合并
|
||||
```
|
||||
假设需要关联的数据集格式：
|
||||
dataset2 = [['category','C3'],
|
||||
['R1', 38],
|
||||
['R6', 13]]
|
||||
处理后的结果：
|
||||
result = ds_leftjoin(dataset, dataset2)
|
||||
结果 = [['category','C1','C2','C3'],
|
||||
['R1', 12, 18, 38],
|
||||
['R2', 10, 17, 0] ]
|
||||
|
||||
```
|
||||
|
||||
#### 数据集旋转，在excel中叫透视表
|
||||
```
|
||||
比如需要将dataset3的户型变成指标
|
||||
dataset3 = [['城市','户型','数量'],
|
||||
['长沙','A',35],
|
||||
['上海','B',19]]
|
||||
处理后的结果：
|
||||
result = ds_pivot(dataset3)
|
||||
结果 = [["城市","A","B"],
|
||||
["长沙",35,0],
|
||||
["上海",0,19]]
|
||||
```
|
||||
|
||||
#### 移除数据集中的某几列
|
||||
```
|
||||
比如移除第1列（序号0）
|
||||
result=ds_remove_column(dataset,remove_list=[0])
|
||||
结果 = [['R1','R2'],
|
||||
[12, 10],
|
||||
[18, 17] ]
|
||||
```
|
||||
|
||||
### smartchart图形中可用的转化函数
|
||||
| 函数名| 函数说明 | 样列 |
|
||||
| :-----| :----: | :----: |
|
||||
| ds_transform(dataset) | 行列替换 | |
|
||||
| ds_split(data,sep=',',head_add=[]) | 将第一列拆分成多个字段,默认逗号分隔, 如果不传表头,取SQL中的字段名拆分 | |
|
||||
| ds_createMap(data) | data表示传入的二位数组,生成结果表示为key->[], 常用于echarts指定数据| |
|
||||
| ds_createMap_all(data) | data表示传入的二维数组,生成结果表示为[{A:A1,B:B1,C:C1},{A:A2,B:B2,C:C2}...] | |
|
||||
| ds_mapToList(data) | 将createMap_all的格式还原成二维数组, 常用于将nosql(mongodb,es..)数据源数据处理 | |
|
||||
| ds_fontSize(rem) | 基于分辨率自动转字体大小, 参数rem | |
|
||||
| ds_rowname(dataset,start_row=1,column=0) | 获取指定列的数据, 默认取第一列从第二行(序号1)开始的数据,常用于获取维度 | |
|
||||
| ds_remove_column(dataset,remove_list=[0]) | 默认移除第一列, 也要移除指定的多个列 | |
|
||||
| ds_toThousands(num) | 转逗号分隔的千分位 | |
|
||||
| ds_distinct(a, b=[]) | 对单个或多个二维数组去重 | |
|
||||
| ds_leftjoin(a,b,withhead=true,type=1) | 两个数组join [[1,2,3,4],[2,3,4,5]] ,[[2,3,4]], 如果带头,合并头 | |
|
||||
| ds_crossjoin(a,b,withhead=true) | | |
|
||||
| ds_fulljoin(a,b,withhead=true) | | |
|
||||
| ds_union(a,b,withhead=true) | 合并两个数据集, 可选是否带头, 取第一个数据集的头, 去除第二个头 | |
|
||||
| ds_pivot(arr) | 传入一下二维数组(维度, 维度, 值), 进行透视 | |
|
||||
| ds_sort(arr, index=0, asc=true)|指定二维数组列序号排序,默认升序,index参数也可以是函数,如(a,b)=>{return a.qty - b.qty}||
|
||||
| getUndefined(param,defaultValue) | 获取value值,如果为空,null,undefined给默认值 | |
|
||||
| ds_round(num,qty=2) | 小数点处理, 默认保留两位小数 | |
|
||||
| ds_param(name) | 传入参数名,获取图形点击时传递来的参数值 | |
|
||||
| ds_setParam('参数名', 参数值) | 设定全局参数, 此方法将自动判断当参数值为空时, 删除参数回到初始未传参状态 | |
|
||||
| ds_refresh(id, param=filter_param) | 刷新图形, id为图形序号,默认采取全局参数刷新,也可指定param,参数为字典{"参数名":"值",...} | |
|
||||
|
||||
#### 多维度的数据透视
|
||||
```sql
|
||||
常规数据集中提到 A类数据源的情况, 格式都是:
|
||||
维度A 维度B 数据
|
||||
但还有情况比如你有一个数据格式是:
|
||||
维度A 维度B 维度C 数据
|
||||
你需要在表格中将 A,B维度做维度, 但C做透视为指标名进行展示
|
||||
由于我们的数据透视只支持"字符, 字符, 数值"的SQL写法,
|
||||
所以如果要多维, 我们需要做下转变, 可以写成:
|
||||
select concat_ws(',',维度A,维度B) AS 维度,维度C,SUM(数据) AS 度量
|
||||
from tablename group by 维度, 维度C
|
||||
得到的数据样式
|
||||
dataset=[['维度','C1','C2'....]
|
||||
,['A1,B1',1,1...]
|
||||
,['A2,B2',2,2...]]
|
||||
最终在图形数据集处理中, 我们可以使用如下函数进行转化:
|
||||
dataset = ds_split(dataset,',',['维度A','维度B'])
|
||||
',' : 参数为分隔符
|
||||
['维度A','维度B'] : 指第一个字段需要拆分的表头名称
|
||||
|
||||
最终得到的数据就是多维度透视
|
||||
[['维度A','维度B','C1','C2'....]
|
||||
,['A1','B1',1,1...]
|
||||
,['A2','B2',2,2...]]
|
||||
|
||||
```
|
||||
|
||||
### 常用JS原生函数
|
||||
```javascript
|
||||
//数组追加
|
||||
dataset.push(item)
|
||||
//数组前方插入
|
||||
dataset.unshit(item)
|
||||
//切片
|
||||
dataset = dataset.slice(1) 从序号1个开始到最最后一个
|
||||
dataset = dataset.slice(5, 10) 从第序号5开始截取到第10个
|
||||
dataset = dataset.slice(-3) 截取最后三个元素
|
||||
//循环遍历
|
||||
for最快，但可读性比较差(smartchart推荐)
|
||||
forEach比较快，能够控制内容
|
||||
for...in比较慢，不方便
|
||||
for(let i=0; i<dataset.length; i++){
|
||||
|
||||
}
|
||||
|
||||
```
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 快速应用基础图形组件
|
||||
- 你可使用如下方式选择常规的图形一键进行应用(我们只放了基础图形,因为你可以通过简单修改配置转化为各种图形,如线性面积图, 柱形堆叠图..)
|
||||
- 你也可以在图形商店中找到更多已转化好的Smartchart图形
|
||||
|
||||
|
||||
配置项完全和Echarts原生一样
|
||||
|
||||
>注意:
|
||||
>对于一些特殊图形如地图js在图形编辑中需要进行动态加载, 如果你使用了非常规图形,
|
||||
>你可在图形编辑器使用ds_loadjs('smt_china’)加载中国地图, 同理我们有 'smt_wordcloud', 'smt_world', 'smt_ecStat', ‘smt_liquidfill’
|
||||
>
|
||||
有些图形可能同时需要在模板中加载, 更多特殊图形加载说明参考 [特殊图形模板加载](https://gitee.com/smartchart/smartchart/wikis/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)
|
||||
@ -1,39 +0,0 @@
|
||||
Smartchart内置了LineUp图形
|
||||
LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes.
|
||||
|
||||
|
||||
LineUp图形参考
|
||||
```
|
||||
ds_loadcss('smt_LineUp');
|
||||
ds_loadjs('smt_LineUp');
|
||||
let dataset = __dataset__;
|
||||
dataset = ds_createMap_all(dataset);
|
||||
try{Ljs__name__.destroy()}catch{}
|
||||
Ljs__name__ = LineUpJS.asTaggle(dom__name__, dataset);
|
||||
|
||||
// 点击选中行响应动作
|
||||
Ljs__name__.on(LineUpJS.LineUp.EVENT_SELECTION_CHANGED, (selection) => {
|
||||
console.log(Ljs__name__.data._data[selection]);
|
||||
//通过以上log可以查看到数据格式， 以下就是标准的联动写法
|
||||
filter_param['LineupParam'] = Ljs__name__.data._data[selection].xx
|
||||
ds_refresh(2);
|
||||
});
|
||||
|
||||
//更多响应动作
|
||||
Ljs__name__.on(LineUpJS.LineUp.EVENT_HIGHLIGHT_CHANGED, (highlight) => {
|
||||
});
|
||||
|
||||
// document.querySelector('button#select').addEventListener('click', () => {
|
||||
// Ljs__name__.setSelection([1, 2, 3]);
|
||||
// });
|
||||
|
||||
// document.querySelector('button#highlight').addEventListener('click', () => {
|
||||
// Ljs__name__.setHighlight(50);
|
||||
// });
|
||||
|
||||
// 获取筛选后的数据并下载(来源与"路阳" 赞助开发)
|
||||
outputStr=Ljs__name__.data.exportTable(Ljs__name__.data.getRankings()[0], {});
|
||||
outputStr = outputStr.replace(/\t/g, ',');
|
||||
ds_download('abc.csv', outputStr);
|
||||
|
||||
```
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 320
|
||||
---
|
||||
@ -1,11 +0,0 @@
|
||||
在"模板"中加载图标资源
|
||||
|
||||
使用方法, 可参考[font-awesome菜鸟教程](https://www.runoob.com/font-awesome/)
|
||||
V5图标名称参考, 也可以[图标样列查询](https://fontawesome.com/v5/search?m=free)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,102 +0,0 @@
|
||||
### 通用滚动
|
||||
例如你的html如下
|
||||
```
|
||||
<div id="smtid" style="height:100%">
|
||||
<ul>
|
||||
<li>smartchart</li>
|
||||
<li>bigdata</li>
|
||||
<li>echarts</li>
|
||||
<li>make it great</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
你只需要使用以下函数, 即可实现在无缝滚动
|
||||
由于smtid是ID, 则使用 ds_liMarquee('#smtid') 即可开启自动滚动
|
||||
如果 class="smtclass", 那么也可以使用类选择器 ds_liMarquee('.smtclass')
|
||||
|
||||
我们也可以使用更多的配置方法
|
||||
|
||||
```
|
||||
marconfig={
|
||||
playtime: 3000, //滚动3秒
|
||||
pausetime: 3000, //停3秒
|
||||
config:{
|
||||
direction: 'up',//向上滚动
|
||||
runshort: false,//内容不足时不滚动
|
||||
scrollamount: 20//速度
|
||||
}
|
||||
}
|
||||
```
|
||||
可以使用 ds_liMarquee('#smtid', marconfig) 传入配置
|
||||
|
||||
更多config说明:
|
||||
| 名称 | 类型 | 默认值 |说明 |
|
||||
| :-----| :----: | :----: | :----: |
|
||||
|direction|字符串|left|滚动方向，可选 left / right / up / down|
|
||||
|loop|整数|-1|循环次数，-1 为无限循环|
|
||||
|scrolldelay|整数|0|每次重复之前的延迟|
|
||||
|scrollamount|整数|50|滚动速度，越大越快|
|
||||
|circular|布尔值|true|无缝滚动，如果为 false，则和 marquee 效果一样|
|
||||
|drag|布尔值|true|鼠标可拖动|
|
||||
|runshort|布尔值|true|内容不足是否滚动|
|
||||
|hoverstop|布尔值|true|鼠标悬停暂停|
|
||||
|xml|布尔值|false|加载xml 文件|
|
||||
|inverthover|布尔值|false|反向，即默认不滚动，鼠标悬停滚动|
|
||||
|
||||
|
||||
### 内置滚动表格
|
||||
smartchart内置了滚动表格, 可以一键生成
|
||||
如果你需要修改表格的样式, 如字体,颜色等, 你可以在模板中重定义样式
|
||||
具体样式的写法, 参考 [样式快速入门](https://gitee.com/smartchart/smartchart/wikis/9.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)
|
||||
```
|
||||
如下例修改表头高度为5rem, 内容单元格高度3rem 及背景字体等
|
||||
/*表头样式*/
|
||||
.smtlisthead{
|
||||
background: #fff2cc;
|
||||
color: red;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.smtlisthead span{
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
/*表格本体样式*/
|
||||
.smtlistnav{
|
||||
height: calc(100% - 5rem);
|
||||
color: red;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.smtlistnav li span{
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
|
||||
/*修改奇数行背景*/
|
||||
.smtlistnav ul li:nth-child(odd){ background: rgba(100,100,100,.1);}
|
||||
偶数行将odd改为even
|
||||
|
||||
/*指定某单独格宽度对齐*/
|
||||
<span>
|
||||
<span style="width:32rem;height:100%;flex-shrink:0;justify-content:left"><span>
|
||||
</span>
|
||||
|
||||
/*单元格点击响应*/
|
||||
let lastClickDom;
|
||||
let lastDomColor;
|
||||
$('#smtlist__name__, li').click(function(params){
|
||||
try{lastClickDom.css('background', lastDomColor)}catch{}
|
||||
lastDomColor = $(this).css('background');
|
||||
$(this).css('background', 'yellow');
|
||||
lastClickDom = $(this);
|
||||
let myparam = $(this).children('span').eq(0).text(); //获取点击的参数
|
||||
//以下加入你的action
|
||||
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
smartchart默认只会引echarts的基础图形
|
||||
如果你需要使用到更多图形, 你可以自行引用,可以写在模板的javascript标签中
|
||||
```html
|
||||
中国地图
|
||||
<script src="/static/smartchart/opt/smt_china.js"></script>
|
||||
世界地图
|
||||
<script src="/static/smartchart/opt/smt_world.js"></script>
|
||||
统计图
|
||||
<script src="/static/smartchart/opt/smt_ecStat.js"></script>
|
||||
水球图
|
||||
<script src="/static/smartchart/opt/smt_liquidfill.js"></script>
|
||||
词云
|
||||
<script src="/static/smartchart/opt/smt_wordcloud.js"></script>
|
||||
百度地图
|
||||
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
|
||||
```
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
---
|
||||
weight: 2
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
### 应用场景
|
||||
如何快速复用已开发好的组件
|
||||
|
||||
### 本地管理自定义组件
|
||||
如下图,点击图形编辑器中的菜单,即可管理和查看自定义图形列表
|
||||
点击"加入样列"即可把当前图形加入到样列清单, 点击"取消样列"即可将所选样列移除样列清单
|
||||
|
||||
|
||||
### 云管理,在图形商店中保存你的图形
|
||||
这样你就可以在图形商店看到你的图形进行重复利用
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
---
|
||||
weight: 5
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 关于页面日志查看
|
||||
大家可能比较熟悉使用F12来查看网页日志, 但有的同学会觉得这不够方便, 所以
|
||||
在5.1.11后, smartchart加入了可以页面直接显示日志的功能
|
||||
#### 在仪表盘中显示
|
||||
你只需要点击如下菜单, 即可切换是否显示日志
|
||||
|
||||
当在刷新页面或执行时, 日志将直接显示在右上角中, 而且还能显示出对应出错的图表序号
|
||||
|
||||
|
||||
### 在图形中显示
|
||||
smartchart基于python的使用习惯, 重定义的专用的日志打印函数print
|
||||
你可以在图形编辑器中使用些函数即可打印日志
|
||||
比如看看鼠标放在echarts图上params, 在编辑界面和console中都能看到日志, 方便你进行调试
|
||||
|
||||
|
||||
不仅仅这些, 你可能会想写太多打印日志, 上线了不好
|
||||
smartchart已为你想到这些, 如果你在仪表盘中没有开启日志显示, print函数是不会打印任何日志
|
||||
|
||||
有了仪表盘日志显示, 我们还能做更多的事情, 比如实时显示你拖拽的坐标, 让你精确定位
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 400
|
||||
---
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 410
|
||||
---
|
||||
@ -1,26 +0,0 @@
|
||||
**由于我们移除了boostrap的布局方式, 此布局不再做推荐!**
|
||||
初次学习的同学, 可能会需要一个拖拉拽的布局方式(3.9.9.13以上才支持), 所以下面介绍的是smartchart的辅助布局方法
|
||||
- 你可以在"布局" 中找到入口
|
||||
|
||||
|
||||
- 进入编辑器后, 你可以拖拉拽的方式进行布局, 注意我们建意你一个column(C)容器只放一个smartchart的图形便于标准化
|
||||
|
||||
|
||||
- 点击"生成", 复制相关代码
|
||||
|
||||
|
||||
- 回到仪表盘"布局", 粘贴到编辑器, 点击 "闪电" 图标, 进行转化, 可能会提示你数据集不够,这样你需要新增足够数量的数据集后再点转化
|
||||
|
||||
|
||||
注: 代码转化布局你可以不用可视化辅助, 可以用其它任意每三方布局工具生成代码后粘过来生成, 需要注意的格式是:
|
||||
在你需要数据集的地方使用以下代码即可:
|
||||
```html
|
||||
<div style="height:100%" id="container_{name}"></div>
|
||||
|
||||
```
|
||||
|
||||
|
||||
- 转化完成后, 点击保存即可应用布局
|
||||
|
||||
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
### 容器管理
|
||||
- 你可以单独对一个容器进行编辑，或者在全局进行编辑
|
||||
|
||||
|
||||
|
||||
|
||||
- 全局编辑器
|
||||
|
||||
|
||||
|
||||
- 移动图形
|
||||
1. 你有两种方法移动数据集
|
||||
可以在“报表” 中直接暴力修改序号
|
||||
|
||||
|
||||
2. 也可以在数据集编辑器中移动，
|
||||
可选择插入（带着容器一起动），替换（容器不动，就是整体布局不变化， 只移动数据和图形）
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
weight: 3
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
对于仪表盘中不再使用的数据集，你可能会考虑删除
|
||||
首先smartchart推荐你不做删除，因为你可以保留他， 当你下次有新增数据集的需求时再拿出来
|
||||
所以优先推荐使用隐藏的方法,你可以在数据集编辑界面找到他
|
||||
|
||||
如果你实在需要删除，可以在“报表”界面先中不需要容器后，选中删除，后保存
|
||||
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
### 整理一份完整的SmartChart布局说明
|
||||
推荐先观看视屏了解[smartchart布局方式](https://b23.tv/2YwZfCi)
|
||||
|
||||
### 容器说明
|
||||
<img src="https://foruda.gitee.com/images/1662694261562716350/1cbcf1f0_5500438.png" height="200px">
|
||||
|
||||
| 容器 | 说明 |
|
||||
| :-----| :----: |
|
||||
| 定位容器 | 用于图形定位, 有拖拽和栅格两种. 在界面上新增时会自带;在模板编辑中新增图形时需自行加入容器|
|
||||
| 图形容器 | 用于图形选择, 使用id选择器, 如序号为2的容器, 选择器为#container_2 |
|
||||
| 图形 | 可视化的实际单位, 如选择图形中的table标签, 可使用#container_2 table|
|
||||
|
||||
|
||||
### 响应式布局
|
||||
一般移动端报表推荐使用响应式布局, 一次布局可以同时满足电脑端/移动端的需求
|
||||
当你新增一个数据集时, smartchart会给你一段默认的代码
|
||||
```html
|
||||
<div class="el-col-xs-24 el-col-md-24" style="padding:0.2rem;height:50%;" >
|
||||
<div style="height:100%;" id="container_{name}"></div>
|
||||
</div>
|
||||
|
||||
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)
|
||||
大家如果开发大屏, 只是用响应式布局可能对于复杂的布局不是很方便, 你也可以采用拖拽绝对定位的方法, 这样你可以随意指定图形的所在位置.
|
||||
方法可参考视屏 [拖拽说明](https://www.bilibili.com/video/BV1PD4y1c7uz/)
|
||||
你可以配合使用 ”模板开发“ 来实现高度定制化的效果， 参考 [模板开发指引](https://gitee.com/smartchart/smartchart/wikis/9.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2)
|
||||
|
||||
### 混合布局(PRO)
|
||||
你可以考虑先用响应式布局把整体框架画出来, 如果要加一下装饰的情况, 可以用绝对定位(拖拽布局)来实现
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
weight: 2
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
拖拽很方便, 但是精确对齐还是有些手抖, 所以smartchart增加了自动对齐的功能
|
||||
你可以在"模板" --> "转化" 中找到这个功能
|
||||
首先我们随意拖拽了一些组件
|
||||
|
||||
然后选中拖拽代码段, 点"拖拽对齐" 后 点"保存"
|
||||
|
||||
就可以查看对齐后的效果了, 再进行下拖拽微调, 重复以上动作到满意
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 500
|
||||
---
|
||||
@ -1,88 +0,0 @@
|
||||
---
|
||||
weight: 1
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
|
||||
### 使用场景
|
||||
- 需要使用图表联动效果
|
||||
- 数据服务接口开发
|
||||
|
||||
### 使用魔法方法(smartchart独创,拒绝抄袭)
|
||||
#### 基础原理
|
||||
```sql
|
||||
- $参数名, 当有传递参数时将替换相关的值
|
||||
- /* ... $参数 ... */, 当参数写在这个区间时, 如果外部没有传入参数, 会自动忽略这一段代码
|
||||
- -- 标识之后单行的代码会被忽略
|
||||
```
|
||||
#### 常见组合应用
|
||||
理解以下样列后, 可录活使用组合出各种可能的需求
|
||||
- 默认参数: 实现在不传参数时默认参数是当前月份
|
||||
```
|
||||
select xx from tablename where
|
||||
calmonth =/*'$calmonth' -- */ to_char(sysdate,'YYYYMM')
|
||||
```
|
||||
- 多个参数: 注意使用1=1及and的位置
|
||||
```
|
||||
select xx from tablename where 1=1 /* and city = '$city' */
|
||||
/* and calmonth ='$calmonth'*/
|
||||
```
|
||||
- 维度变化: 将字段当成参数
|
||||
```
|
||||
select /*$calmonth,*/ city, count(1) as qty from tablename
|
||||
group by /*$calmonth,*/ city
|
||||
```
|
||||
- 维度变化: 当传入月份条件时, 按城市,月份的数据, 不传参数时只看按城市的总数
|
||||
```
|
||||
select /*月份, -- $Month */
|
||||
城市, sum(度量) from tablename
|
||||
where 1=1
|
||||
/* and 月份 > '$Month' */
|
||||
group by 城市
|
||||
/*,月份 -- $Month*/
|
||||
```
|
||||
#### 高级开关应用
|
||||
以上应用可以通过参数是否有传递来实现开关代码段的效果, 有些场景可能还希望通过参数值来进行代码段的开关
|
||||
如下代码可以实现当传递参数type=1 或 type=2 时执行不同的代码段
|
||||
使用 "$参数__值" 的方式做为开关
|
||||
```
|
||||
/* select count(1) as qty from tablename1 $type__1*/
|
||||
/* select count(1) as qty from tablename2 $type__2*/
|
||||
|
||||
```
|
||||
再比如
|
||||
当参数D传值为"月份"时是统计2022年按月的统计,
|
||||
传"日期"时统计的是2022年10月按天的统计
|
||||
```
|
||||
select $D, count(1) as qty from tablename
|
||||
where 1 = 1
|
||||
/* and year='2022' -- $D__日期 $D__月份 */
|
||||
/* and month='10' $D__日期 */
|
||||
group by
|
||||
$D
|
||||
```
|
||||
> 加了"--"是为了避免语法错误
|
||||
|
||||
### 数据集开发调试参数方法
|
||||
|
||||
```sql
|
||||
对于开发人员来说, 带参数的SQL调试不方便, 所以支持你在sql中写入默认参数
|
||||
方法如下格式, 你可以在sql编辑器的最上方写上 /* {xxxxxx} */,
|
||||
会默认在开发调试模式下取这些参数, 在用户模式下会忽略
|
||||
/* {"月份":"202009","城市":"中山"} */
|
||||
select xxx from table xxx
|
||||
|
||||
```
|
||||
|
||||
### 数据权限行级别控制
|
||||
- 当你在sql查询中加上'$username', 会自动替换成登录用户的用户名
|
||||
- 如果你是嵌入到第三方系统, 你可以通过url传递参数id, 在后台会转化为参数_id, 在sql中配置$_id即可控制数据权限
|
||||
- 可以采用此做数据权限关联后台权限mapping表进行数据权限控制实现不同人看不同的数据
|
||||
|
||||
### 参数的传递方式
|
||||
- 你可以从url传入参数, 在url上加入 ¶m={"参数名":"参数值"}
|
||||
- 在图形联动的点击过程中会自动传递参数， 具体参考联动相关文档
|
||||
|
||||
> TIPS
|
||||
> 当设定参数后, 联动过程dataset的缓存功能失效, 所以不要让带参数的查询设计得太慢
|
||||
> 参数如果存在一些非法字符可能会有问题, 比如参数中不可以有#号
|
||||
@ -1,68 +0,0 @@
|
||||
---
|
||||
weight: 2
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
### 数据集准备
|
||||
首先在需要进行联动的数据集中SQL的写法如下, 比如对应2号图形:
|
||||
```sql
|
||||
注意 /* ... */的写法, 当参数写在这个区间时, 如果外部没有传入参数,
|
||||
会自动忽略这一段代码, 这样对于联动来说非常重要,
|
||||
初始时全部显示, 点击其它图形时传入参数进行动态联动
|
||||
|
||||
select xxx,xxx,xxx from tablename /* where xxxx = '$参数名' */ ....
|
||||
```
|
||||
建意观看视屏比较容易理解:
|
||||
[数据联动说明](https://www.bilibili.com/video/BV1ra411X7RM)
|
||||
|
||||
### 常规方法
|
||||
比如你需要点击0号图形, 指定其它图形联动
|
||||
你只需要打开0号图形的数据集编辑页面, 点击标题的位置
|
||||
|
||||
然后输入相关的参数即可, 以下为sample
|
||||
|
||||
参数值设定的方法, 你可以先留空, 然后保存, F12打浏览器调试方法
|
||||
点击0号图形你需要点击的动作, 你可以右调试窗口的console看到输入的log
|
||||
比如我们需要传递的参数值是"廉颇", 那么取数据的方法就是data.name, 你把这个填入即可
|
||||
|
||||
|
||||
这样就实现按所选数据或所选系列钻取/联动了, **重新点击当前所选**, 恢复原来的
|
||||
**如何在图形开发中获取参数值**
|
||||
```
|
||||
图形编辑器中,
|
||||
你可以使用函数 ds_param('参数名') 来获取传入的参数值
|
||||
|
||||
```
|
||||
|
||||
### 高级定制方法
|
||||
如果有更多个性化需求,可以在需要点击的图形的编辑器中加入以下代码,你仅仅需要修改的是**序号**和**参数名**
|
||||
```javascript
|
||||
//比如传入多个参数进行联动
|
||||
myChart__name__.on('click', function(params){
|
||||
let myparam = params.seriesName; //获取点击的值
|
||||
filter_param['参数名'] = myparam; //填写你的数据集的SQL设定中对应的参数名
|
||||
filter_param['参数名2'] = myparam2; //你可以赋值给多个参数
|
||||
ds_refresh(3); //3 为你要刷新图形序号
|
||||
});
|
||||
|
||||
```
|
||||
你也可以使用更方便的参数赋值方法(5.6以上)
|
||||
```javascript
|
||||
//使用方法
|
||||
ds_setParam('参数名', 参数值)
|
||||
此方法将自动判断当参数值为空时, 删除参数回到初始未传参状态
|
||||
|
||||
```
|
||||
|
||||
你还可以实现钻取到另外一个报表
|
||||
```
|
||||
myChart__name__.on('click', function (params) {
|
||||
let myparam = `¶m={"参数名": "${params.seriesName}"}`;
|
||||
//拼成url并传参，具体参考数据集说明中的数据联动url传参的方法
|
||||
let myurl='http://localhost:8000/echart/?type=目标报表名'+ myparam;
|
||||
window.open(myurl,'_blank','toolbar=no,scrollbar=no,top=100,left=100,width=800,height=500');
|
||||
});
|
||||
|
||||
```
|
||||
> TIPS
|
||||
> 如果你的参数中存在非法字符如&=, 你可以使用encodeURIComponent函数进行转义后赋值
|
||||
@ -1,43 +0,0 @@
|
||||
---
|
||||
weight: 3
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
### 通用实现方式
|
||||
SMARTCHART实现筛选最简单的方法只需要配一个控件即可:
|
||||
建立一个筛选清单数据集, 自动获取筛选的列表,那么可以这么写
|
||||
```sql
|
||||
Select xxxx as city from tablename.....
|
||||
则会生成一个如下的数据集:
|
||||
[['city'],[选项1],[选项2],..]
|
||||
```
|
||||
良好的习惯, 先保存在数据集
|
||||
然后在筛选器数据集中的js编辑器(图形编辑器),填下如下代码:
|
||||
```js
|
||||
//如要要美化, 自已加样式, 只要保证id="id_select__name__"
|
||||
let dataset=__dataset__;
|
||||
let table ='<span>标题</span><select id="id_select__name__">';
|
||||
table = table + '<option value="" selected>----</option>';
|
||||
for(let i=1;i<dataset.length;i++){
|
||||
table = table + '<option>' + dataset[i][0] + '</option>';
|
||||
}
|
||||
table = table + '</select></div></div>'
|
||||
|
||||
dom__name__.innerHTML=table;
|
||||
|
||||
```
|
||||
这个时候你已经可以看到筛选器了
|
||||
|
||||
|
||||
现在我们来设定联动效果
|
||||
|
||||
假设需要被筛选的数据集的SQL这样写,数据集的序号是0
|
||||
```sql
|
||||
//那么在需要被联动的数据集中,如使用pcity做为参数写查询, 比如:
|
||||
select xx, xx, xx from tablename /* where xx = '$pcity' */
|
||||
```
|
||||
|
||||
现在回到我们筛选器数据集,点击标题的位置, 我们需要使0号图形被筛选器联动, 设置如下即可:
|
||||
|
||||
|
||||
然后你就可以看到筛选效果了, 非常的简单方便, 需要多个图形被联动, 只需用逗号分隔即可 比如: 0, 2, 4
|
||||
@ -1,63 +0,0 @@
|
||||
---
|
||||
weight: 4
|
||||
type : docs
|
||||
bookFlatSection : false
|
||||
---
|
||||
### 应用场景
|
||||
Smartchart对于单项筛选有通用的组件， 可以直接配置即可，但对于个性化的筛选，需要你进行一些简单的定制化，以下就针对多项筛选联动的需求来介绍如何定制化你的筛选联动效果
|
||||
通过此例,你可以了解如何自定义任意的联动效果
|
||||
|
||||
|
||||
### 样列参考
|
||||
以我们内置的仪表盘为例，
|
||||
|
||||
第一步，新建一个数据集
|
||||
|
||||
第二步，在新的数据集中编写查询
|
||||
```sql
|
||||
select distinct H1 as heroname from smartdemo2 limit 10
|
||||
```
|
||||
第三步，编辑此数据集的图形，可复制以下代码
|
||||
```js
|
||||
//select distinct xx from tablename
|
||||
let dataset=__dataset__;
|
||||
let table = '';
|
||||
for (let i=1;i<dataset.length;i++){
|
||||
table = `${table}<label><input name="select__name__" type="checkbox" value="${dataset[i][0]}" />${dataset[i][0]}</label> `;
|
||||
}
|
||||
table = table + "<button id='id_select__name__'>提交</button>";
|
||||
|
||||
dom__name__.innerHTML=table;
|
||||
|
||||
$('#id_select__name__').click(
|
||||
function(){
|
||||
let res = [];
|
||||
$("input[name='select__name__']:checked").each(function(i){
|
||||
res.push("'" + $(this).val() + "'");
|
||||
});
|
||||
|
||||
filter_param['H1'] = res.toString(); //参数赋值
|
||||
ds_refresh(1); //刷新1号图形
|
||||
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
第四步，在你要联动刷新数据集中增加代码
|
||||
```sql
|
||||
select H1 as heroname, sum(qty) as 出场数 from smartdemo2
|
||||
where 1=1
|
||||
/* and H1 in ($H1) */ --此处来新增
|
||||
group by H1
|
||||
order by sum(qty) desc
|
||||
```
|
||||
|
||||
这样就完成了，任何其他需求，都可以采用类似方法自定义
|
||||
|
||||
> TIPS
|
||||
> 如果你这个点击的图形又可能被其它图形来点击联动, 你需要加入如下unbind否则会触发多次刷新
|
||||
> $('#id_select__name__').unbind('click').click(.....
|
||||
|
||||
> 如果你想取消联动,恢复到初始效果, 你需要删除参数, 如:
|
||||
> delete filter_param['H1']
|
||||
@ -1,138 +0,0 @@
|
||||
### 应用场景
|
||||
> 你需要在jupyter中通过smartchart分享的数据集获取数据进行分析
|
||||
> 你有很多线下数据需要进行个性化分析, 然后制做仪表盘
|
||||
> 在Jupyter的数据分析过程中, 你需要快速生成图形
|
||||
> 大屏或报表有部分数据集是需要能过复杂的分析生成的
|
||||
|
||||
|
||||
Smartchart支持像pyecharts, Matplotlib 等python绘图工具一样在Jupyter中使用,
|
||||
但她更加方便, 更加炫酷 和 通用化,
|
||||
不仅仅是一个绘图工具, 而且是一个平台
|
||||
|
||||
我们有什么特色:
|
||||
> 使用上手非常简单, 仅仅只有两个命令, get and set, 配置项采用原生的Echarts配置, 无重复学习成本, 使用顺滑
|
||||
> 支持Echarts所有功能, 可定制化程度高, 显示效果好, 可嵌入也可以弹出窗口显示, 也可以dashboard中显示
|
||||
> 数据可以固化存储, 采用smartchart Portal可以直接拼接炫酷大屏
|
||||
|
||||
|
||||
[Smartchart与Pandas](https://www.ixigua.com/6910413586208653837?id=6918162479646245389 "smartchart")
|
||||
[Smartchart与Jupyter](https://www.ixigua.com/6910413586208653837?id=6917989046132310535 "smartchart")
|
||||
[SmartChart大屏新思路](https://www.ixigua.com/6921133676189352456 "smartchart")
|
||||
|
||||
|
||||
|
||||
|
||||
### 安装使用方法
|
||||
```
|
||||
你需要在jupyter相同的python环境中安装smartchart客户端
|
||||
pip install smartchart
|
||||
或pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple smartchart
|
||||
|
||||
如果你只是需要连接已部署好的smartchart服务端, 本地无需启动smartchart
|
||||
```
|
||||
### 快速开始
|
||||
|
||||
初始化认证:
|
||||
第一次使用时, 打开jupyter后, 需要设定默认用户和smartchart服务端url
|
||||
同一个环境, 只需初始化一次, 后面无需再设定
|
||||
```python
|
||||
from smart_chart import Smart
|
||||
Smart().set_auth('用户名', '密码',url = 'http://xxxxx')
|
||||
```
|
||||
如果smartchart服务端在本地, 可以省略url
|
||||
```python
|
||||
Smart().set_auth('用户名', '密码')
|
||||
```
|
||||
|
||||
使用方法:
|
||||
```python
|
||||
from smart_chart import Smart
|
||||
mysmart = Smart()
|
||||
dataset = [['A','B','C'],[12,34,23],[22,33,37]]
|
||||
#把数据写入临时数据集并显示图形
|
||||
mysmart.set(1,dataset)
|
||||
#随意命名临时数据集, 不一定需要smartchart中数据集已有的
|
||||
mysmart.set('DD', dataset)
|
||||
|
||||
#从已有的数据集中获取数据(格式参考smartchart数据集)
|
||||
ds1 = mysmart.get(1)
|
||||
ds2 = mysmart.get('DD')
|
||||
```
|
||||
|
||||
### 修改图形显示
|
||||
方法一: 你可以在图形菜单中选择内置图形或主题
|
||||
方法二: set默认是表格显示,你也可通过名称加前缀 bar, line, pie进行修改
|
||||
|
||||
```python
|
||||
mysmart.set('barxxx', dataset) #显示柱形图, 另外还有linexxx, piexxx
|
||||
```
|
||||
方法三: 简单图形,可能无法满足你的个性化要求, 你可以采用实例化数据集的方式后做出炫酷的自定义图形
|
||||
|
||||
```python
|
||||
mysmart.set('myds_1', dataset, push=1) #参数push=1, 将实例化数据集
|
||||
```
|
||||
实例化的数据集, 在图形编辑区点击, 可以进入定制化图形开发, 可使用原生的Echarts配置和实时调试,或直接使用社区图形(第一次使用,有一个登记的过程, 按提示进行)
|
||||
|
||||
|
||||
方法四: 如何在非实例化的数据集中使用自定义图形进行临时显示
|
||||
假如你已经实例化并自定义了图形, 比如 'myds_1', 你可以直接用它的名称来set
|
||||
```python
|
||||
#不加push, 将使用新的数据采用myds_1的图形临时显示, 而不会改变原myds_1的数据
|
||||
mysmart.set('myds_1', dataset)
|
||||
```
|
||||
|
||||
### 显示设定参数
|
||||
你可以通过参数来设定图形的高宽, 是否嵌入等个性化要求
|
||||
```python
|
||||
# width, height指定图形嵌入显示的宽高
|
||||
# embed 默认不嵌入, embed=1 嵌入, embed=0 不嵌入
|
||||
# editor 是否显示图形菜单, 1显示, 0不显示
|
||||
# push 是否持久化数据集 push=1, 无则新建有则保存数据
|
||||
# url 报表访问的url,默认是localhost
|
||||
|
||||
#可以全局初始化设定
|
||||
mysmart = Smart(width=xx, height=xx, embed=1, editor='')
|
||||
#也可以全局单独进行设定
|
||||
mysmart.url = 'http://ip:8000'
|
||||
mysmart.embed = 1
|
||||
|
||||
#也可以针对单独的一个图形设定
|
||||
mysmart.set(1,dataset,embed=1,height=200,editor=0)
|
||||
```
|
||||
|
||||
### SmartChart与Pandas
|
||||
Smartchart的set支持直接set Pandas的dataframe对象
|
||||
```python
|
||||
from smart_chart import Smart
|
||||
import pandas as pd
|
||||
mysmart = Smart()
|
||||
df = pd.read_excel('manual_smartdemo.xlsx', 'sheet1')
|
||||
mysmart.set('excelsample', df.sample(10))
|
||||
|
||||
|
||||
df1 = df.groupby('province').agg({'qty':'sum'}).reset_index()
|
||||
mysmart.set('ec_df1', df1, push=1)
|
||||
|
||||
df2 = df.groupby('c1').agg({'qty':'sum'}).reset_index()
|
||||
mysmart.set('ec_df2', df2, push=1)
|
||||
|
||||
df4 = df.groupby('province').agg({'qty':'count'}).reset_index()
|
||||
mysmart.set('ec_df4', df1, push=1)
|
||||
|
||||
|
||||
df3 = df.groupby('c3').agg({'qty':'sum'}).reset_index()
|
||||
print(df3)
|
||||
df3.loc[1, 'qty'] = df3.loc[1, 'qty'] * 100
|
||||
print(df3)
|
||||
|
||||
mysmart.set('ec_df3', df3, push=1)
|
||||
|
||||
#mysmart.set('pie0', df1)
|
||||
#df2 = df.groupby(['province','c3']).agg({'qty':'sum'}).reset_index()
|
||||
#print(df2)
|
||||
#mysmart.set('ssss', df2)
|
||||
#print(mysmart.get(15))
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 600
|
||||
---
|
||||
@ -1,4 +0,0 @@
|
||||
---
|
||||
bookCollapseSection: true
|
||||
weight: 700
|
||||
---
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user