Echarts组件

简介 #

ECharts 组件是 SmartChart 图形开发的核心入口。通过将 ECharts 官方示例的 option 配置复制到 SmartChart 图形编辑器，转化为平台适配的写法，即可实现从静态示例到动态数据绑定的完整图形开发流程。

核心步骤 说明
找示例 在 ECharts 官方示例中复制 option
转化 点击"工具 → 转化为 SmartChart"
动态数据 将静态数据替换为 __dataset__ + ds_createMap()
变量规范 变量名带 __name__ 后缀，避免 DOM 冲突

应用场景 #

SmartChart 提供了大量通用图形模板，可直接从商店取用。当需要更高程度的个性化定制时（如同一图形展示多种图表类型、复杂交互联动、特殊样式等），就需要在图形编辑器中自定义开发。

开发前建议先观看以下视频了解基础流程（视频界面与当前版本略有差异，以文档为准）：

开发流程概览 # 

1. 在 ECharts 官网找到目标图形示例
        ↓
2. 复制 option 到 SmartChart 图形编辑器
        ↓
3. 点击"工具 → 转化为 SmartChart"完成基础转化
        ↓
4. 将静态数据替换为动态数据集（__dataset__）
        ↓
5. 调整 option 配置，保存

获取原生 ECharts 图形 #

在 ECharts 官方示例 中找到目标图形，复制其 option 代码：

ECharts 示例

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'
    }]
};

转化为 SmartChart 图形 #

复制 option 到图形编辑器后，点击 “工具 → 转化为 SmartChart” 自动完成初步转化：

转化菜单

转化完成后，将静态数据替换为数据集驱动的动态写法：

let dataset = __dataset__              // 接收后端二维数组，格式见下方说明
let legend_label = ds_rowname(dataset) // 自动获取系列名（第一列去掉表头后的值列表）
let xlabel = dataset[0].slice(1)       // X 轴标签（表头中第二列起的字段名）
dataset = ds_createMap(dataset)        // 转化为 key→[] 字典，方便按名取值

// 定义 series（柱图 + 折线图混合）
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__ 是 SmartChart 传入的标准二维数组，第一行为表头，后续行为数据，例如：

[['month', '销售额', '利润'],
 ['1月',    120,     30],
 ['2月',    200,     55]]

添加更多配置项 #

在理解 ECharts option 结构后，可以为图形添加标题、图例、提示框等丰富的配置：

option__name__ = {
    title: {
        text: '月度销售趋势',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        formatter: '{a} <br/>{b} : {c}'   // {a}系列名 {b}X轴值 {c}数值
    },
    legend: {
        left: 'left',
        data: legend_label
    },
    xAxis: {
        type: 'category',
        data: xlabel
    },
    yAxis: {
        type: 'value'
    },
    series: series
};

更多配置参考：

自动化生成 series #

当系列数量随数据动态变化时，推荐使用循环自动构建 series，无需手动一一定义：

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

// 按系列名循环生成（可自由设定每个系列的 type）
let series = [];
for (let name of legend_label) {
    series.push({
        name: name,
        data: dataset[name],
        type: 'bar'          // 全部柱图，或按需改为 'line'
    });
}

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
};

也可以直接使用 ECharts dataset 模式，更简洁：

let dataset = __dataset__

// 自动生成 series（type 全部为 bar）
let series = dataset[0].slice(1).map(() => ({ type: 'bar' }));

option__name__ = {
    legend: { show: true },
    tooltip: { trigger: 'axis' },
    dataset: { source: dataset },   // 直接传入二维数组，ECharts 自动识别表头
    xAxis: { type: 'category' },
    yAxis: { type: 'value' },
    series: series
};

常见问题 #

图形编辑器可以显示，仪表盘中无法显示 #

按顺序检查以下几点：

1. 变量名是否带 __name__ 后缀

// ❌ 错误：使用了通用变量名
myChart.setOption(option)
// ✅ 正确：带 __name__ 后缀，SmartChart 会自动替换为唯一 ID
myChart__name__.setOption(option__name__)

2. 手动调用了 setOption 但未更新变量名

如果代码中手动调用 setOption，确保在 option 定义后补上：

myChart__name__.setOption(option__name__)

3. 变量声明使用了 let/const

在图形 JS 代码中，共享变量不要用 let 声明（避免作用域问题）：

// ❌ 错误
let data = dataset
// ✅ 正确（直接赋值，挂到全局作用域）
data = dataset

SmartChart 让你使用 ECharts 没有门槛！

Edit Edit this page