通用组件

通用组件支持完整的 ECharts 配置选项，能够灵活创建各种图表。使用该组件需要具备一定的 ECharts 使用经验。本指南将帮助您快速掌握通用组件的使用方法。

1、效果展示

2、添加通用组件

3、样式配置

基础样式配置

• 支持所有通用样式配置，包括位置、大小、颜色等基础属性

高级自定义配置

• 自定义属性：在高级设置中输入 ECharts 配置代码
• 配置格式：必须以 option={} 开头，配置内容放在花括号内，最后以 return option; 结束
• 代码规范：确保 JavaScript 语法正确，配置项符合 ECharts 规范

4、数据配置

数据源配置

• 支持多种数据源：API 接口、数据集等（详见数据集配置文档）
• 数据格式需符合 ECharts 要求

标准数据格式示例

以下是一个标准的折线图数据格式：

{
    "xAxis": {
        "type": "category",
        "boundaryGap": false,
        "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    "yAxis": {
        "type": "value"
    },
    "series": [
        {
            "data": [620, 932, 901, 934, 1290, 1330, 620],
            "type": "line"
        }
    ]
}

显示效果：

动态数据转换示例

您可以通过自定义属性动态修改接口返回的数据或图表配置。例如：

需求：将折线图转换为柱状图，并将 X 轴标签改为中文

解决方案：

option = {
    "xAxis": {
        "type": "category",
        "boundaryGap": false,
        "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    series: [{type: 'bar'}]
};
return option;

转换效果：

5、完整配置示例

基础折线图配置

option = {
    xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {type: 'value'},
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};
return option;

6、相关资源

• ECharts 官方文档：完整的配置项说明和示例
• 数据集配置：了解如何配置数据源