# Smartchart开发手册

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/ Recent content on Smartchart开发手册 Hugo -- gohugo.io

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2/ 低代码化开发 # smartchart的标准模板为了标准化的原因,对于引用JS,编写CSS等有一定不方便性, 但有时候你可能需要放飞自由, 随意定制 你甚至可能想引用一些其它的UI组件, 所以smartchart给你一个原汗原味的开发空间 开启方式 # 在高级设定中开启模板 主菜单中会多出来一个 模板 的功能 进入模板编辑界面

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%BF%AB%E6%8D%B7%E5%BC%80%E5%8F%91/
应用场景 # 专业化开发, 可将仪表盘显示和模板开发分屏开发 当你熟悉smartchart的基础开发后, 你可能会喜欢上现在这种方式 把你的可视化页面移动的显示器上吧, 进入&quot;模板&quot; 开发页面(上节介绍如何进入) 方式一: 自动化DIV # 此方式当你新增数据集图形时会自动识别, 无需手动在模板在添加 采用此方式请不要采用点击模板上方菜单的图形新增 如需编辑图形或数据集可按如下方式: 方式二: 自由DIV # 你可以模板中按照常规的H5页面编辑, 只是在需要插入图形的地方插入即可(建意通过模板上方的图形新增) 开始畅快的开发 点击图形即可新增一个图形,你甚至可以指定图表的位置, 完全和写html一样, 图形代码段:{{div_list.图表顺序号}} 注意自由DIV模式下的新增图形, 是不自带容器的, 如有需要,可选中&quot;图形代码&quot;,点击菜单的容器包裹上容器 如果使用自由布局, 请删除自动化DIV这一段代码 选中生成的图形代码段, 点击菜单栏的 数据集, 图形, 布局开发或使用CTRL+Q， 即可进入开发界面, 如果没有数据集, 会自动帮你新建 可以观看视屏, 视屏比较老和现在不太一样, 仅参考即可 自由开发模式视屏

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E4%B8%8A%E4%BC%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E4%B8%8A%E4%BC%A0%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6/
点击 模板开发 中的菜单即可上传你的资源文件, 如css, js, 图片等 视屏介绍说明 常规上传 # 可直接上传单个文件或zip包上传, 注意zip包中不可以有中文文件名 上传后会提示引用路径为/static/custom/仪表盘ID/&hellip; 上传为共享资源 # 可把资源打包为zip文件, 上传名以usr_开头, 如usr_tp.zip 上传完后不会有路径提示, 引用路径为/static/custom/usr_tp/&hellip;. 上传自定义数据源或jar包 # 上传后不会有路径提示

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E8%BE%B9%E6%A1%86%E4%B8%8E%E8%A3%85%E9%A5%B0/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E8%BE%B9%E6%A1%86%E4%B8%8E%E8%A3%85%E9%A5%B0/
观看视屏 # 边框与装饰说明1 边框与背景说明2 边框/装饰/背景(购买专业版提供使用方法) #

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B/
样式操作: # 要想大屏做得好, 样式要写得好 可是我们不是前端的同学也能写样式么 当然可以, 相信你观看完以下视屏即可 快速上手样式开发 基础样式入门: # CSS介绍 # CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法 # CSS实例 每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 CSS注释 /*这是注释*/ 注释是代码之母, smartchart编辑中你可以使用CTRL+/快捷注释 CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 &lt;p style=&#34;color: red&#34;&gt;Hello world.&lt;/p&gt; 内部样式 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下： &lt;head&gt; &lt;style&gt; p{ background-color: #2b99ff; } &lt;/style&gt; &lt;/head&gt; 外部样式 外部样式就是将css写在一个单独的文件中 &lt;link href=&#34;mystyle.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34;/&gt; CSS选择器 # 基本选择器 /*元素选择器*/ p {color: &#34;red&#34;;} /*ID选择器*/ #i1 { background-color: red; } /*类选择器*/ .c1 { font-size: 14px; } p .c1 { color: red; } 注意： 样式类名不要用数字开头（有的浏览器不认）。 标签中的class属性如果有多个，要用空格分隔。

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/IDE%E5%BC%80%E5%8F%91%E6%A8%A1%E5%BC%8F/
应用场景 # 如果您是一个资深的前端开发者 可能不需要使用smartchart组件,仅需使用到数据集 你希望在IDE(如VS code)中开发然后打包发布 非专用人士,请不要尝试这种方式 开发方式 # 在模板中使用basesimple 此时smartchart不会引用任何echarts, vue组件, 完全由您自已控制引入 如何使用数据集接口 # 在仪表中新增懒加载数据集 修改对应图形编辑器, 使数据赋值给一个全局变量或vue 在IDE中开发 # 由于你在开发中仅需要用到filter_param及ds_refresh, 建意新建一个js文件, 文件内容: //以下为辅助方法, 发布时, 无需放入smartchart模板中 var filter_param = {}; function ds_refresh(num){ if(num === 0){你对应的图形中赋值代码,调试代码} if(num === 1){....} ...... } 然后将这个js文件在你的项目中引用调试使用 如何部署到smartchart # 打包完成后会有相应的css, js 和index.html文件, 将index.html中的代码复制贴粘到对应的模板区域中即可 上传css,js 修改css,js 相关引用路径 去除之前定义的js辅助开发文件引用, 如果有定义全局变量, 将全局变量定义复制到模板js区域

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/
自动旋转效果 # 在&quot;模板&quot;的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这个类给到这个组件即可, 比如图形 &lt;img class=&#34;Rotate&#34; src=&#34;https://www.smartchart.cn/media/editor/smc162_20220407150432307320.png&#34;&gt; 组件变形 # 常见变形沿着Y轴, 其它变形方式自已搜索, 比如需要0号,1号图形变形的样式写法 #container_0{transform:skewY(10deg);} #container_1{transform:skewY(-10deg);} 效果如下:

#

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/ Mon, 01 Jan 0001 00:00:00 +0000

https://help.smartchart.cn/docs/6.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E4%BD%8E%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91/%E7%BC%96%E8%BE%91%E5%99%A8%E5%BF%AB%E6%8D%B7%E9%94%AE/
功能 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