amis-reports

爱速搭报表是基于 ECharts 实现的图表功能组件，旨在为用户提供简单和快捷的可视化报表能力，帮助用户在爱速搭平台上快速设计常见的数据报表页和大屏报表效果页。

核心功能

1. 支持22种报表组件：包括数值指标、环形进度图、仪表盘、柱状图（水平、堆叠、双向对比）、饼图、玫瑰图、环形图、折线图、堆叠面积图、雷达图、漏斗图、词云、地图（世界、中国、省市级）、阶梯瀑布图、散点图、日历图、气泡图、气泡地图及桑基图；
2. 支持对接5种数据源：静态JSON、内外API数据、上下文数据、实体数据源和数据集；
3. 支持通过上下文数据和事件动作实现报表联动，以及自定义报表数据下钻功能；
4. 支持对接主题（含主题数据色），以及支持运行时实时切换，可用于实现“一键换肤”功能；
5. 支持行转列对比功能；
6. 支持同类型报表组件快速切换；
7. 支持大屏报表可视化设计；
8. 支持标题、图例、标签、提示、X轴和Y轴等120+种报表属性配置。

可单独使用的方法

1. amis-reports/lib/renderers: 报表组件渲染器列表
2. amis-reports/lib/plugins: 报表组件插件列表
3. amis-reports/lib/json2report: 【开发中】根据业务数据json推荐报表组件

本地调试

本地调试方式说明
在线Demo

外部使用

npm install --save amis-reports

1、设计态引入报表插件

引入报表插件，页面设计器左侧组件物料显示报表组件

import reportPlugins from 'amis-reports'; // 报表插件
import {Editor} from 'amis-editor'; // 页面设计器

<Editor
  preview={preview}
  isMobile={isMobile}
  value={schema}
  onChange={this.handleChange}
  onPreview={this.handlePreviewChange}
  onSave={this.onSave}
  className="is-fixed"
  theme="cxd"
  showCustomRenderersPanel={true}
  plugins={[
    ...reportPlugins, // 报表插件
    xxPlugin
  ]}
  $schemaUrl={`${location.protocol}//${location.host}/schema.json`}
>

2、运行时引入报表渲染器

引入报表渲染器，确保页面能正常渲染报表组件

import 'amis-reports/lib/renderers';
import 'amis-reports/lib/renderers.css';

示例

amis-reports-demo