EChart¶
The EChart component creates advanced charts using the ECharts library with JavaScript callback functions for complex and non-standard visualizations.
Configuration¶
Configure the EChart component with these options:
| Option | Description |
|---|---|
| Data Sources | Configure data sources to pass data to the chart via $data |
| Parameters | Set parameters accessible in the callback via $params |
| Edit Chart Configuration | Write the option callback function that defines the chart configuration |
| Add File | Upload SVG files (for maps) or JSON files (for data/geoJSON) accessible via $files |
The Edit Chart Configuration window allows you to write JavaScript code using ECharts options. Available variables in the callback:
| Variable | Description |
|---|---|
$data |
Data from configured data sources |
$params |
Parameters passed to the chart |
$dict |
Dictionary values for translations or dynamic text |
$theme |
Theme settings for consistent styling |
$it |
Iteration context for repeating scenarios |
$files |
Uploaded files (SVG strings for maps, JSON data) |
Theming is configured in Themes > ECharts section to set default appearance for all charts, which can be further customized for each individual chart. For detailed configuration options, see the ECharts documentation.
Use Cases¶
- Complex visualizations - custom chart types not available in regular charts with advanced ECharts features
- Geographic maps - use SVG files for custom map visualizations with data overlays
- Data-driven visualizations - create charts that dynamically adapt based on data parameters and conditions
Tips¶
- Use regular charts for simple visualizations - they offer better UI configuration and theme integration
- ECharts requires JavaScript/programming knowledge to configure the callback function
- Upload SVG files for map visualizations and JSON files for complex data structures