https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/ Recent content on Smartchart开发手册 Hugo -- gohugo.io https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%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/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%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/ 低代码化开发 # smartchart的标准模板为了标准化的原因,对于引用JS,编写CSS等有一定不方便性, 但有时候你可能需要放飞自由, 随意定制 你甚至可能想引用一些其它的UI组件, 所以smartchart给你一个原汗原味的开发空间 开启方式 # 在高级设定中开启模板 主菜单中会多出来一个 模板 的功能 进入模板编辑界面 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/ 简介 # SmartChart 提供两种基于模板的低代码开发模式：自动化 DIV 模式（系统自动管理图形容器，适合快速搭建）和自由 DIV 模式（手动控制 HTML 布局，完全自定义）。通过模板开发界面，开发者可以将可视化开发窗口与显示窗口分屏，实现更专业的开发体验。 应用场景 # 专业化开发, 可将仪表盘显示和模板开发分屏开发 当你熟悉smartchart的基础开发后, 你可能会喜欢上现在这种方式 把你的可视化页面移动的显示器上吧, 进入"模板" 开发页面(上节介绍如何进入) 方式一: 自动化DIV # 此方式当你新增数据集图形时会自动识别, 无需手动在模板在添加 采用此方式请不要采用点击模板上方菜单的图形新增 如需编辑图形或数据集可按如下方式: 方式二: 自由DIV # 你可以模板中按照常规的H5页面编辑, 只是在需要插入图形的地方插入即可(建意通过模板上方的图形新增) 开始畅快的开发 点击图形即可新增一个图形,你甚至可以指定图表的位置, 完全和写html一样, 图形代码段:{{div_list.图表顺序号}} 注意自由DIV模式下的新增图形, 是不自带容器的, 如有需要,可选中"图形代码",点击菜单的容器包裹上容器 如果使用自由布局, 请删除自动化DIV这一段代码 选中生成的图形代码段, 点击菜单栏的 数据集, 图形, 布局开发或使用CTRL+Q， 即可进入开发界面, 如果没有数据集, 会自动帮你新建 可以观看视屏, 视屏比较老和现在不太一样, 仅参考即可 自由开发模式视屏 两种模式对比 # 模式 适合场景 图形容器 新增方式 自动化 DIV 快速搭建，无需手动管理容器 系统自动生成并追踪 通过仪表盘界面新增按钮 自由 DIV 完全自定义布局，精确控制位置 手动在 HTML 中插入 {{div_list. https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E4%B8%8A%E7%BA%BF/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E4%B8%8A%E7%BA%BF/ 简介 # SmartChart 支持将开发模板和上线模板分离，实现开发与生产环境的隔离。当你在开发模板中进行调试修改时，线上用户看到的始终是上次发布的稳定版本，只有主动点击"发布上线"后才会将新版本推送到生产环境。 应用场景 # 实现开发模板与上线模板分离 上线方式 # 默认情况下，开发模板和上线模板是一样的，当我们需要分离时 可以在模板开发界面 –> 工具 –> 发布上线 下线方式 # 如果我们想删除上线模板，可以清空模板内容，再点发布上线即可 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%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/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%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/ 简介 # SmartChart 的资源管理功能允许将 CSS、JS、图片、字体等静态资源文件上传到服务端，并通过固定路径在模板中引用。支持单文件上传和 ZIP 压缩包批量上传，还支持将自定义数据源文件（Python）和 JDBC JAR 包上传到系统中作为驱动使用。 点击 模板开发 中的菜单即可上传你的资源文件, 如css, js, 图片等 视屏介绍说明 注意:新版本已做升级,文件上传改名为"资源管理" 常规上传 # 可直接上传单个文件或zip包上传, 注意zip包中不可以有中文文件名 上传后会提示引用路径为/static/custom/仪表盘ID/… 上传为共享资源 # 可把资源打包为zip文件, 上传名以usr_开头, 如usr_tp.zip 上传完后不会有路径提示, 引用路径为/static/custom/usr_tp/…. 上传自定义数据源或jar包 # 上传后不会有路径提示 上传管理 # 可以从首页进入"资源管理" 超级管理员可以看到usr,custom两个仪表盘分别用于授权是否可以查看个人通用资源或所有通用资源 资源路径速查 # 上传类型 路径格式 示例 普通文件 /static/custom/{仪表盘ID}/文件名 /static/custom/5/bg.png 共享资源（usr_开头 ZIP） /static/custom/{zip包名不含.zip}/文件名 /static/custom/usr_tp/logo.svg 自定义数据源 / JAR 无路径提示，系统内部加载 在数据源驱动字段填写文件名（不含后缀） ZIP 包规范：共享资源包名必须以 usr_ 开头，如 usr_tp.zip；ZIP 内不能有中文文件名，否则解压可能失败。 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%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/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%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/ 观看视屏 # 边框与装饰说明1 边框与背景说明2 边框/装饰/背景(购买专业版提供使用方法) # https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/ 样式操作 # 要想大屏做得好，样式要写得好。本章介绍在 SmartChart 中常用的 CSS 知识，即使不是前端也能快速上手。 快速上手样式开发 在 SmartChart 中写样式的位置 # 位置 写法 作用范围 模板 <style> 区 #container_0 { ... } 仅当前仪表盘 容器开发界面 直接写 style 属性 仅当前容器 行内样式 style="color:red" 仅当前元素 基础样式入门: # CSS介绍 # CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 # CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ 注释是代码之母, smartchart编辑中你可以使用CTRL+/快捷注释 CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 <p style="color: red">Hello world.</p> 内部样式 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下： <head> <style> p{ background-color: #2b99ff; } </style> </head> 外部样式 外部样式就是将css写在一个单独的文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/> CSS选择器 # 基本选择器 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/ 简介 # IDE 开发模式专为资深前端开发者设计。在此模式下，SmartChart 不加载任何 ECharts、Vue 组件，开发者可以在本地 VS Code 等 IDE 中完全自主开发 H5 页面，仅通过 SmartChart 的数据集接口获取数据，开发完成后将代码打包复制到模板区域即可发布。这种方式彻底解耦了数据层和展示层，使前端开发人员可以在不接触公司数据的情况下独立完成视觉开发。 应用场景 # 如果您是一个资深的前端开发者 可能不需要使用smartchart组件,仅需使用到数据集 你希望在IDE(如VS code)中开发然后打包发布 非专用人士,请不要尝试这种方式 开发方式 # 在模板中使用basesimple 此时smartchart不会引用任何echarts, vue组件, 完全由您自已控制引入 如何使用数据集接口 # 在仪表中新增懒加载数据集 前端可以使用ds_refresh(数据集ID,filter_param,’list’)获取数据 具体使用方法查看 “图形端数据函数” 在IDE中开发 # 由于你在开发中仅需要用到filter_param及ds_refresh, 建意新建一个js文件, 文件内容: //以下为辅助方法, 发布时, 无需放入smartchart模板中 var filter_param = {}; function ds_refresh(num,param,r='list'){ if(num === 0){你对应的图形中赋值代码,调试代码} if(num === 1){....} ...... } 然后将这个js文件在你的项目中引用调试使用 如何部署到smartchart # 打包完成后会有相应的css, js 和index.html文件, 将index.html中的代码复制贴粘到对应的模板区域中即可 上传css,js 修改css,js 相关引用路径 去除之前定义的js辅助开发文件引用, 如果有定义全局变量, 将全局变量定义复制到模板js区域 IDE 开发模式流程 # 1. https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/ 简介 # SmartChart 支持通过 CSS 动画让大屏元素更生动，包括旋转、变形、颜色渐变等效果。将 CSS 动画类名赋给组件即可应用，无需引入额外库。 自动旋转效果 # 在"模板"的style中加入以下样式 @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @keyframes spin { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .Rotate { -webkit-animation: spin 3s linear 3s 5 alternate; animation: spin 3s linear infinite; } 如需任意组件自动旋转, 只需将Rotate这个类给到这个组件即可, 比如图形 <img class="Rotate" src="https://www.smartchart.cn/media/editor/smc162_20220407150432307320.png"> 也可以让图形容器旋转： /* 让0号容器旋转 */ #container_0 { animation: spin 5s linear infinite; } 组件变形 # 常见变形沿着Y轴, 其它变形方式自已搜索, 比如需要0号,1号图形变形的样式写法 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/4.%E5%B8%83%E5%B1%80%E8%AF%B4%E6%98%8E/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/ 简介 # SmartChart 编辑器（基于 CodeMirror）内置了丰富的快捷键，熟悉这些快捷键可以大幅提升开发效率。特别是 Ctrl-Q（数据集快速编辑）是 SmartChart 特有的快捷键，可以在模板编辑器中直接跳入数据集开发。 功能 WIN MAC 说明 显示菜单 CTRL-, Command-, 折叠其它 Alt-0 Command-Option-0 查找替换 Ctrl-F Command-F 重复选中 Ctrl-D Command-D 注释选中 Ctrl-/ Command-/ 取消修改 Ctrl-z Command-z 重新执行 Ctrl-y Command-y 数据集编辑 Ctrl-Q Ctrl-Q 选中大写 Ctrl-U Ctrl-U 选中小写 SHIFT-Ctrl-U SHIFT-Ctrl-U