https://help.smartchart.cn/en/docs/3.Graphics/ Recent content on Smartchart开发手册 Hugo -- gohugo.io https://help.smartchart.cn/en/docs/3.Graphics/BasicGraphics/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/BasicGraphics/ Quick Apply Basic Graphic Components # SmartChart includes a rich set of basic graphic components with one-click application and quick customization. Select “Graphics” → “Basic Graphics” from the top menu, click any graphic to apply it to the current chart Find more community-contributed SmartChart graphic templates in the Graphics Store Built-in basic graphics cover common types (bar, line, pie, etc.); simple configuration modifications can derive stacked charts, area charts, dual-axis charts, and other variants Understanding ECharts Core Concepts # SmartChart’s graphic configuration is entirely based on ECharts option. https://help.smartchart.cn/en/docs/3.Graphics/ManageGraphics/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/ManageGraphics/ Introduction # The custom component management feature allows you to save developed graphics as local samples for quick reuse across multiple dashboards. No need to reconfigure SQL and JS code — simply call from the sample library. Ideal for accumulating and sharing standardized graphic components across teams. Operation Description Add Sample Save current graphic configuration to local sample list Remove Sample Remove a selected sample from the list Reuse Sample Call from the sample library with one click when creating new graphics Use Cases # During graphics development, when you complete a graphic’s configuration and logic, you can save it as a custom component for quick reuse in other dashboards, avoiding repetitive development. https://help.smartchart.cn/en/docs/3.Graphics/EchartsComponents/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/EchartsComponents/ Introduction # ECharts components are the core entry point for SmartChart graphic development. By copying the option configuration from ECharts official examples into the SmartChart graphic editor and converting it to platform-adapted code, you can achieve the complete graphic development workflow from static examples to dynamic data binding. Core Step Description View Example Copy option from ECharts official examples Convert Click “Tools → Convert to SmartChart” Dynamic Data Replace static data with __dataset__ + ds_createMap() Variable Convention Variable names with __name__ suffix to avoid DOM conflicts Use Cases # SmartChart provides a large collection of generic graphic templates available directly from the store. https://help.smartchart.cn/en/docs/3.Graphics/HTMLComponents/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/HTMLComponents/ Introduction # HTML components are the most flexible component type in SmartChart, suitable for implementing input controls (filters, buttons), display components (indicator cards, tables), and rich text content. Use dom__name__.innerHTML in JS code to render HTML, combined with datasets for dynamic content. Key Syntax Description dom__name__ Current graphic DOM container, __name__ auto-replaced with unique ID innerHTML Write HTML content to container ds_setParam() Set parameter to trigger linkage ds_refresh(n) Refresh graphic number n __dataset__ Standard 2D array from backend Use Cases # HTML components are the most flexible component type in SmartChart, suitable for: https://help.smartchart.cn/en/docs/3.Graphics/ChartDataFunctions/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/ChartDataFunctions/ Use Cases # In graphic development, you may need to use JS to process the data passed from the backend. All functions can be called directly in the graphic’s JS code area. Data Convention: All examples use the following standard 2D array, where the first row is the header and subsequent rows are data: dataset = [['category', 'C1', 'C2'], ['R1', 12, 18], ['R2', 10, 17]] Dataset Transformation # ds_transform(dataset) # Row-column transpose: Swaps rows and columns of a 2D array (matrix transpose). https://help.smartchart.cn/en/docs/3.Graphics/DebugLogs/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/3.Graphics/DebugLogs/ Overview # SmartChart provides two debugging methods: dashboard-level logs and graph-level log() function. Compared to opening the browser F12 console, SmartChart’s built-in logging system is better suited for large-screen development scenarios — you can see log output and graphic sequence numbers directly on the page for quick problem identification. Enable Log Display in Dashboard # Click the log toggle in the dashboard top menu to switch log display status: