跳到主要内容

通用组件

1. 添加通用组件​

点击数据选择通用组件，即可添加通用组件

2.样式配置​

基础样式配置​

高级自定义配置​

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

3.数据配置​

数据源配置​

  • 支持多种数据源：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;

转换效果： 柱形图效果

4.完整配置示例​

基础折线图配置​

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

5.相关资源​

6. 相同配置方式图表组件如下​

通用组件牛气冲天五行相克