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.g., VS Code) then packaging for deployment
• Non-experts should not attempt this approach

Development Method #

Use basesimple in the template SmartChart will not load any ECharts or Vue components, you have full control

Using the Dataset Interface #

• Add lazy-load datasets in the dashboard
• Use ds_refresh(dataset_id, filter_param, 'list') to get data on the frontend
• See “Chart Data Functions” for details

Developing in IDE #

Since you only need filter_param and ds_refresh during development, create a JS file:

// Helper methods for development - not needed in production template
var filter_param = {};
function ds_refresh(num,param,r='list'){
  if(num === 0){your chart assignment and debug code}
  if(num === 1){....}
  ......
}

Reference this JS file in your project for debugging

Deploying to SmartChart #

After packaging, you’ll have CSS, JS, and index.html files. Copy the index.html content to the corresponding template area:

• Upload CSS/JS
• Modify CSS/JS reference paths
• Remove the development helper JS file reference. If global variables were defined, copy them to the template JS area

IDE Development Workflow #

1. Select basesimple template in Advanced Settings
2. Add lazy-load datasets in dashboard, note the sequence numbers
3. Create local helper JS file mock_smartchart.js:
   var filter_param = {};
   function ds_refresh(num){ if(num===0){...} }
4. Import mock_smartchart.js for local debugging
5. After completion, remove mock_smartchart.js reference
6. Upload CSS/JS to SmartChart resource management
7. Copy index.html sections to corresponding template areas
8. Modify resource paths to /static/custom/{ID}/...