Echarts Components | Smartchart开发手册

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. When higher levels of customization are needed (e.g., displaying multiple chart types in one graphic, complex interactive linkage, special styles), custom development in the graphic editor is required.

Recommended videos before development (video interface may differ slightly from current version, refer to documentation):

Development Workflow Overview #

1. Find target chart example on ECharts website
        ↓
2. Copy option to SmartChart graphic editor
        ↓
3. Click "Tools → Convert to SmartChart" for basic conversion
        ↓
4. Replace static data with dynamic dataset (__dataset__)
        ↓
5. Adjust option configuration, save

Get Native ECharts Graphics #

Find the target chart in ECharts Official Examples and copy its option code:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

Convert to SmartChart Graphic #

Paste the option into the graphic editor, then click “Tools → Convert to SmartChart” for automatic initial conversion:

Conversion Menu

After conversion, replace static data with dataset-driven dynamic code:

let dataset = __dataset__              // Receive 2D array from backend
let legend_label = ds_rowname(dataset) // Auto-get series names (first column values excluding header)
let xlabel = dataset[0].slice(1)       // X-axis labels (field names from second column onward)
dataset = ds_createMap(dataset)        // Convert to key→[] dictionary for easy access by name

// Define series (bar + line mixed chart)
let series = [];
series.push({
    name: legend_label[0],
    data: dataset[legend_label[0]],
    type: 'bar'
});
series.push({
    name: legend_label[1],
    data: dataset[legend_label[1]],
    type: 'line'
});

option__name__ = {
    xAxis: { type: 'category', data: xlabel },
    yAxis: { type: 'value' },
    series: series
};

Dataset Format: __dataset__ is a standard 2D array passed in by SmartChart. The first row is the header, subsequent rows are data, e.g.:
[['month', 'Sales', 'Profit'],
 ['Jan',    120,      30],
 ['Feb',    200,      55]]

Add More Configuration Items #

After understanding the ECharts option structure, enrich the chart with titles, legends, tooltips, and more:

option__name__ = {
    title: {
        text: 'Monthly Sales Trend',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        formatter: '{a} <br/>{b} : {c}'   // {a} series name, {b} X-axis value, {c} numeric value
    },
    legend: {
        left: 'left',
        data: legend_label
    },
    xAxis: {
        type: 'category',
        data: xlabel
    },
    yAxis: {
        type: 'value'
    },
    series: series
};

More configuration references:

Click the "!" icon on the right side of the graphic editor for common configuration snippets
ECharts Cheat Sheet

Auto-generate Series #

When the number of series changes dynamically with data, use a loop to build series automatically:

let dataset = __dataset__
let legend_label = ds_rowname(dataset)
dataset = ds_createMap(dataset)

// Generate by series name loop (can set type for each series)
let series = [];
for (let name of legend_label) {
    series.push({
        name: name,
        data: dataset[name],
        type: 'bar'          // All bars, or change to 'line' as needed
    });
}

option__name__ = {
    legend: { show: true },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: dataset[dataset[Object.keys(dataset)[0]].length > 0 ? 'category' : Object.keys(dataset)[0]] },
    yAxis: { type: 'value' },
    series: series
};

Alternatively, use ECharts dataset mode for a more concise approach:

let dataset = __dataset__

// Auto-generate series (all type: 'bar')
let series = dataset[0].slice(1).map(() => ({ type: 'bar' }));

option__name__ = {
    legend: { show: true },
    tooltip: { trigger: 'axis' },
    dataset: { source: dataset },   // Pass 2D array directly, ECharts auto-detects header
    xAxis: { type: 'category' },
    yAxis: { type: 'value' },
    series: series
};

Common Issues #

Graphic displays in editor but not in dashboard #

Check the following in order:

1. Variable names must have __name__ suffix

// Wrong: using generic variable names
myChart.setOption(option)
// Correct: with __name__ suffix, SmartChart auto-replaces with unique ID
myChart__name__.setOption(option__name__)

2. Manual setOption calls without updated variable names

If the code manually calls setOption, ensure it’s added after the option definition:

myChart__name__.setOption(option__name__)

3. Variable declarations using let/const

In graphic JS code, don’t use let for shared variables (avoid scope issues):

// Wrong
let data = dataset
// Correct (direct assignment to global scope)
data = dataset

SmartChart makes using ECharts accessible to everyone!