https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/ Recent content on Smartchart开发手册 Hugo -- gohugo.io https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/TemplateDevInterface/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/TemplateDevInterface/ Low-Code Development # SmartChart’s standard template has some constraints for referencing JS, writing CSS, etc. But sometimes you may need more freedom to customize freely. You might even want to reference other UI components, so SmartChart provides a pure development space. How to Enable # Enable template in Advanced Settings A “Template” menu will appear in the main menu Enter the template editing interface https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/QuickDev/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/QuickDev/ Introduction # SmartChart provides two template-based low-code development modes: Automated DIV mode (system auto-manages chart containers, for quick setup) and Free DIV mode (manual HTML layout, fully customizable). Through the template dev interface, developers can split the visual development window and display window for a professional development experience. Use Cases # Professional development, split dashboard display and template editing Once familiar with SmartChart basics, you’ll enjoy this approach Mode 1: Automated DIV # When adding new dataset charts, auto-recognition applies - no manual template insertion needed. https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/TemplatePublish/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/TemplatePublish/ Introduction # SmartChart supports separating development and production templates, isolating dev and production environments. When you debug in the dev template, production users always see the last published stable version. Only when you click “Publish” does the new version go live. Use Cases # Separate development and production templates Publishing # By default, dev and production templates are identical. To separate them: Template Development -> Tools -> Publish Unpublishing # To remove the production template, clear the template content, then click Publish https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/UploadResources/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/UploadResources/ Introduction # SmartChart’s resource management allows uploading CSS, JS, images, fonts, and other static resources to the server, referenced via fixed paths in templates. Supports single file and ZIP batch upload, as well as custom data source files (Python) and JDBC JAR packages as drivers. Click the menu in Template Development to upload resource files like CSS, JS, images Video Tutorial Note: New versions upgraded “File Upload” to “Resource Management” https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/BorderDecoration/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/BorderDecoration/ Video Tutorials # Border & Decoration 1 Border & Background 2 Borders/Decorations/Backgrounds (Pro edition required for usage) # https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/StyleQuickStart/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/StyleQuickStart/ Styling # Great dashboards need great CSS. This chapter covers CSS knowledge commonly used in SmartChart. CSS Quick Start Video Where to Write CSS in SmartChart # Location Syntax Scope Template <style> section #container_0 { ... } Current dashboard only Container editor Inline style attribute Current container only Inline style style="color:red" Current element only CSS Basics # CSS Introduction # CSS (Cascading Style Sheets) defines how HTML elements are displayed. https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/IDEDevMode/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/IDEDevMode/ Introduction # IDE development mode is designed for senior frontend developers. In this mode, SmartChart loads no ECharts or Vue components. Developers can fully develop H5 pages in local IDEs like VS Code, using only SmartChart’s dataset interface for data. After development, package the code and paste into the template area to publish. This approach completely decouples data and presentation layers. Use Cases # For senior frontend developers May not need SmartChart components, only dataset interface Prefer developing in IDE (e. https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/AnimationEffects/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/AnimationEffects/ Introduction # SmartChart supports CSS animations to make dashboard elements more dynamic, including rotation, deformation, color gradients, etc. Apply CSS animation class names to components without importing additional libraries. Auto Rotation # Add the following style in template’s <style> section: @-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; } To rotate any component, add the Rotate class: https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/EditorShortcuts/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/EditorShortcuts/ Introduction # SmartChart editor (based on CodeMirror) has built-in rich keyboard shortcuts. Familiarity with these can significantly improve development efficiency. Especially Ctrl-Q (dataset quick edit) is SmartChart’s unique shortcut, allowing direct jump from template editor to dataset development. Function WIN MAC Description Show menu CTRL-, Command-, Fold others Alt-0 Command-Option-0 Find & replace Ctrl-F Command-F Duplicate selection Ctrl-D Command-D Comment selection Ctrl-/ Command-/ Undo Ctrl-z Command-z Redo Ctrl-y Command-y Dataset edit Ctrl-Q Ctrl-Q Uppercase Ctrl-U Ctrl-U Lowercase SHIFT-Ctrl-U SHIFT-Ctrl-U