https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/ Recent content on Smartchart开发手册 Hugo -- gohugo.io https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/UsingVUE/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/UsingVUE/ Introduction # SmartChart has built-in Vue 2.x support, allowing Vue data binding, directives, and component capabilities in chart editors and templates. Compared to plain JS, Vue mode is better for scenarios with heavy dynamic interactions (filters, tables, conditional display). Note: SmartChart’s Vue templates use {[ ]} instead of standard Vue {{ }} to avoid Django template syntax conflicts. Use Cases # Reports with many interaction scenarios, need data-page binding Developers familiar with Vue Common Bindings # <! https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/ElementUI/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/ElementUI/ Introduction # ElementUI is a Vue 2.x enterprise UI component library with built-in SmartChart support. By switching to basevue.html template, you can use el-table, el-form, el-select and other rich UI components directly in reports, ideal for management report pages with complex interaction needs. Use Cases # Non-large-screen applications Reports with many interactions: filters, tables, pagination, downloads Usage # Change base.html to basevue.html to auto-load Vue and ElementUI Note: Vue variable references in template editor use {[ ]} syntax https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/DataVApp/ Mon, 01 Jan 0001 00:00:00 +0000 https://help.smartchart.cn/en/docs/4.Layout/TemplateDev/VUE/DataVApp/ Introduction # DataV is a Vue component library designed for large-screen digital visualization, providing flip cards, progress pools, number scrolling, flyline maps, and other common large-screen effect components. SmartChart has built-in DataV support in advanced settings. Enable DataV mode in Advanced Settings Reference videos: 1. DataV Basics 2. DataV Flip Card DataV documentation: Charts Common DataV Components # Component Tag Usage Flip Text <dv-flip-text> Number/text scroll display, ideal for KPI metrics Count To <dv-count-to> Number dynamic growth effect Percent Pond <dv-percent-pond> Percentage progress display Active Ring Chart <dv-active-ring-chart> Auto-rotating ring chart Water Level Pond <dv-water-level-pond> Water level percentage visualization Flyline Chart <dv-flyline-chart> Traffic flylines on map Border <dv-border-box-n> Digital screen decorative borders (n=1~13) Decoration <dv-decoration-n> Screen decoration lines (n=1~12) DataV mode must be enabled in Advanced Settings, system auto-loads corresponding JS/CSS DataV removed in v8.