Static Component Integration

To add static visualization elements such as histograms, bar charts, line graphs, pie charts, or scatter plots, follow the standard procedure for extending graphical primitives. The source code already includes pre-built implementations for these common chart types.

Configuring Virtual Variables

For a histogram component, define a virtual variable (e.g., named "HistogramData") with a fixed return type of string and an empty default value. Select appropriate data points based on your business requirements. Implement a custom algorithm as shown below:

const inputParams = arguments[0];
const fallbackValue = arguments[1];

try {
    const chartConfig = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'bar'
        }]
    };
    return encodeURIComponent(JSON.stringify(chartConfig));
} catch (error) {
    console.error('Variable processing error', error);
    return fallbackValue;
}

The return value must be a URI-encoded string. Use the following pattern:

return encodeURIComponent(JSON.stringify(configObject));

Refer to the official ECharts documentation for all available configuration parameters. The system does not modify or preprocess any ECharts parameters—developers must supply complete configuration objects through virtual variables.

Using the Component

Drag the histogram component into the editing area. Select the component and navigate too the Data panel on the right. Choose the previously created virtual variable (e.g., "HistogramData") for the chart data property. Ensure the data output mode is set to "Raw Output". Save the data configuration, then save the entire canvas.