统计图

统计图是用于数据可视化展示的重要组件，基于ECharts图表库实现多样化的图表渲染能力。它负责将数据模型转换为直观的图形表示、支持交互式数据探索和提供丰富的样式配置选项，支持24种图表类型包括折线图、柱状图、饼图、地图、雷达图等。

统计图元素分层结构为Meta（components.Meta） → Type（components.Chart） → 实例，开发者可通过JitAI的可视化开发工具快捷地创建统计图实例元素。

当然，开发者也可以创建自己的Type元素，或者在自己的App中改写JitAi官方提供的components.ChartType元素，以实现自己的封装。

快速开始

基础配置示例

折线图配置示例
{
  "chartType": "line",
  "fieldList": [
    [
      {
        "name": "createDate",
        "dataType": "Date",
        "alias": "日期",
        "ormType": "GROUP"
      }
    ],
    [
      {
        "name": "amount",
        "dataType": "Numeric", 
        "alias": "金额",
        "ormType": "SUM"
      }
    ]
  ],
  "requireElements": [
    {
      "name": "models.SalesModel",
      "filter": "",
      "orderBy": []
    }
  ],
  "chartOption": {
    "legendShow": true,
    "smooth": false
  }
}

饼图配置示例
{
  "chartType": "pie",
  "fieldList": [
    [
      {
        "name": "category",
        "dataType": "Stext",
        "alias": "分类",
        "ormType": "GROUP"
      }
    ],
    [
      {
        "name": "count",
        "dataType": "Numeric",
        "alias": "数量", 
        "ormType": "COUNT"
      }
    ]
  ],
  "requireElements": [
    {
      "name": "models.ProductModel",
      "filter": "",
      "orderBy": []
    }
  ],
  "chartOption": {
    "legendShow": true,
    "radius": 150
  }
}

配置属性说明

属性名	类型	必填	默认值	说明
chartType	string	是	'line'	图表类型，支持line/bar/pie/map等24种类型
fieldList	Array<Array<CommonFieldSelectorItem>>	是	[]	字段配置列表，第一层为维度字段，第二层为指标字段
requireElements	Array<DataSourcesConfig>	是	[]	数据源配置，指定使用的模型和过滤条件
chartOption	object	否		图表样式配置选项
commonOption	object	否		通用选项配置
customOption	object	否		自定义选项配置

chartOption属性详解：

属性名	类型	默认值	说明
legendShow	boolean	true	是否显示图例
legend	LegendEnum	0	图例位置：0-顶部，1-底部，2-左侧，3-右侧
smooth	boolean	false	折线图是否平滑显示
barWidth	number	20	柱状图柱宽
radius	number	100	饼图/环图半径
axisLabelStyle	object		坐标轴标签样式配置
XAxisStyle	object		X轴样式配置
YAxisStyle	object		Y轴样式配置

变量

dimensionFilter

类型: QFilter
说明: 维度筛选条件，用于对图表数据进行筛选
只读: 是
泛型: 关联的模型类型

detailFilter

类型: QFilter
说明: 明细筛选条件，用于图表明细数据筛选
只读: 是
泛型: 关联的模型类型

方法

call

刷新图表数据，根据筛选条件重新获取和渲染数据。

参数详解

参数名	类型	必填	说明
qFilter	QFilter	是	查询筛选条件

返回值

无返回值

使用示例

刷新图表数据
// 创建筛选条件
const filter = new Jit.datatypes.QFilter({
  value: "Q(status='active')"
});

// 刷新图表
chartComponent.call(filter);

getChartData

获取图表数据，从模型服务获取预览数据并处理。

返回值

类型	说明
Promise<void>	异步获取数据，结果存储在组件data属性中

使用示例

获取图表数据
// 获取图表数据
await chartComponent.getChartData();

// 访问数据
const chartData = chartComponent.data.dataList;
console.log('图表数据:', chartData);

checkConfig

检查图表配置是否有效，验证字段配置的完整性。

返回值

类型	说明
boolean	配置是否有效

使用示例

验证图表配置
// 检查配置有效性
const isValid = chartComponent.checkConfig();

if (isValid) {
  console.log('图表配置有效');
  await chartComponent.getChartData();
} else {
  console.log('图表配置无效，请检查字段配置');
}

publishEvent

发布组件事件，通知其他组件或页面元素。

参数详解

参数名	类型	必填	说明
name	string	是	事件名称
ex	Record<string, any>	否	事件携带的额外数据

返回值

类型	说明
Promise<void>	异步发布事件

使用示例

发布事件示例
// 发布表格刷新事件
await chartComponent.publishEvent('tableRefresh', {
  timestamp: Date.now()
});

// 发布自定义事件
await chartComponent.publishEvent('dataChanged', {
  newValue: 'updated data',
  source: 'chart'
});

subscribeEvent

订阅组件事件，监听其他组件发布的事件。

参数详解

参数名	类型	必填	说明
name	string	是	事件名称
evtCb	Function	是	事件回调函数
unSubscribeExist	boolean	否	是否取消已存在的订阅，默认true

返回值

类型	说明
string	事件处理器ID，用于后续取消订阅

使用示例

订阅事件示例
// 订阅数据变化事件
const handlerId = chartComponent.subscribeEvent(
  'dataUpdate',
  async (eventData) => {
    console.log('接收到数据更新事件:', eventData);
    await chartComponent.getChartData();
  }
);

// 订阅过滤器变化事件
chartComponent.subscribeEvent(
  'filterChanged',
  (filterData) => {
    const newFilter = new Jit.datatypes.QFilter(filterData);
    chartComponent.call(newFilter);
  }
);

unSubscribeEvent

取消事件订阅，停止监听指定的事件。

参数详解

参数名	类型	必填	说明
id	string	是	事件处理器ID

返回值

类型	说明
boolean	是否成功取消订阅

使用示例

取消事件订阅
// 取消指定事件订阅
const success = chartComponent.unSubscribeEvent(handlerId);

if (success) {
  console.log('成功取消事件订阅');
}

setConfig

设置组件配置，支持部分更新或完全替换配置。

参数详解

参数名	类型	必填	说明
next	Partial<ChartPageConfig>	是	新的配置对象
clean	boolean	否	是否完全替换配置，默认false

使用示例

更新图表配置
// 部分更新配置
chartComponent.setConfig({
  chartType: 'bar',
  chartOption: {
    legendShow: false,
    barWidth: 30
  }
});

// 完全替换配置
chartComponent.setConfig(newCompleteConfig, true);

getPermConfig

获取当前组件的权限配置信息。

返回值

类型	说明
Record<string, any> \| undefined	权限配置对象，如果没有权限限制则返回undefined

使用示例

获取权限配置
const permConfig = chartComponent.getPermConfig();

if (permConfig) {
  console.log('组件权限配置:', permConfig);
  // 根据权限配置调整组件行为
} else {
  console.log('组件无权限限制');
}

bindApp

绑定应用实例到组件，建立组件与应用的关联关系。

参数详解

参数名	类型	必填	说明
app	App	是	应用实例对象

使用示例

绑定应用实例
const app = getRuntimeApp();
chartComponent.bindApp(app);

// 绑定后可访问应用级服务
console.log('应用名称:', chartComponent.app?.name);

bindPage

绑定页面实例到组件，同时为组件变量绑定页面上下文。

参数详解

参数名	类型	必填	说明
page	BasePage	是	页面实例对象

使用示例

绑定页面实例
// 绑定当前页面
chartComponent.bindPage(currentPage);

// 绑定后组件变量也会自动绑定页面上下文
console.log('页面实例:', chartComponent.page);

getEventKey

生成组件事件的唯一键名，用于事件系统中的事件标识。

参数详解

参数名	类型	必填	说明
eventName	string	是	事件名称

返回值

类型	说明
string	格式为`${uuid}.${name}.${eventName}`的事件键名

使用示例

获取事件键名
const eventKey = chartComponent.getEventKey('dataChanged');
console.log('事件键名:', eventKey);
// 输出: "uuid-string.chartName.dataChanged"

// 用于自定义事件系统
const customEventKey = chartComponent.getEventKey('customEvent');

initVariables

初始化组件变量，根据数据类型配置创建对应的变量实例。

参数详解

参数名	类型	必填	说明
dataTypeList	BaseDataType[]	是	数据类型配置列表

使用示例

初始化变量
const variableConfigs = [
  {
    name: 'filterCondition',
    dataType: 'QFilter',
    title: '筛选条件',
    generic: 'models.SalesModel'
  },
  {
    name: 'chartData',
    dataType: 'RowList',
    title: '图表数据'
  }
];

chartComponent.initVariables(variableConfigs);

// 初始化后可访问变量
console.log('筛选条件变量:', chartComponent.filterCondition);

newVariable

根据变量配置创建新的数据类型变量实例。

参数详解

参数名	类型	必填	说明
varConfig	InstanceType<typeof Jit.DataTypeConfig>	是	变量配置对象

返回值

类型	说明
BaseDataType \| undefined	创建的变量实例，失败时返回undefined

使用示例

创建新变量
const varConfig = new Jit.DataTypeConfig({
  name: 'customFilter',
  dataType: 'QFilter',
  title: '自定义筛选器',
  generic: 'models.UserModel'
});

const variable = chartComponent.newVariable(varConfig);
if (variable) {
  console.log('变量创建成功:', variable.title);
  // 手动绑定组件和页面
  variable.bindComponent(chartComponent);
  variable.bindPage(chartComponent.page);
} else {
  console.error('变量创建失败');
}

### destroy

销毁组件实例，清理所有事件监听器和变量引用，释放内存资源。

#### 使用示例

```typescript title="销毁组件"
// 组件不再使用时调用
chartComponent.destroy();

runCode

在页面上下文中执行自定义代码，支持访问页面和组件的作用域。

参数详解

参数名	类型	必填	说明
code	string	是	要执行的JavaScript代码字符串

返回值

类型	说明
any	代码执行结果，异常时返回undefined

使用示例

执行自定义代码
// 执行简单表达式
const result = chartComponent.runCode('1 + 1');
console.log('计算结果:', result); // 2

// 访问页面变量
const pageData = chartComponent.runCode('this.pageVariable');

// 调用页面方法
chartComponent.runCode('this.refreshData()');

属性

config

类型: ChartPageConfig
说明: 图表的完整配置对象，包含图表类型、字段配置、样式设置等
可写: 是

data

类型: { dataList?: Array<Record<string, any>> }
说明: 图表的数据对象，包含从模型获取的数据列表
可写: 是

ModelClass

类型: typeof Jit.BaseModel
说明: 关联的数据模型类，用于数据查询和操作
可写: 是

chartIns

类型: InstanceType<typeof BaiduChart>
说明: 图表实例对象，负责图表的渲染和交互
可写: 是

QObj

类型: Qex | undefined
说明: 当前的查询对象，用于数据筛选
可写: 是

name

类型: string
说明: 组件名称标识
可写: 是

title

类型: string
说明: 组件显示标题
可写: 是

fullName

类型: string
说明: 组件的完整名称路径
可写: 是

showTitle

类型: boolean
说明: 是否显示组件标题
可写: 是

compType

类型: COMPONENT_TYPE
说明: 组件类型标识
可写: 是

type

类型: string
说明: 组件的类型字符串
可写: 是

app

类型: App | undefined
说明: 当前应用实例的引用
只读: 是

modelFilter

类型: Qex | string | undefined
说明: 模型过滤条件，结合权限配置和组件配置生成
只读: 是

dataTypeList

类型: BaseDataType[]
说明: 组件的数据类型配置列表，包含所有变量的类型定义
可写: 是

uuid

类型: string
说明: 组件的唯一标识符，用于事件系统和组件识别
只读: 是

事件

点击明细

事件名: clickDetail
触发时机: 用户点击图表中的明细数据点时触发
事件数据: 包含被点击的数据项信息

使用示例

监听点击明细事件
// 订阅点击明细事件
chartComponent.subscribeEvent('clickDetail', (eventData) => {
  console.log('点击明细数据:', eventData);
  
  // 获取点击的数据项
  const clickedData = eventData.data;
  const seriesName = eventData.seriesName;
  const dataIndex = eventData.dataIndex;
  
  // 根据点击的数据执行相应操作
  if (clickedData) {
    // 跳转到详情页面
    const detailUrl = `/detail/${clickedData.id}`;
    window.open(detailUrl, '_blank');
    
    // 或者显示详情弹窗
    showDetailModal(clickedData);
    
    // 或者更新其他组件的筛选条件
    const filter = new Jit.datatypes.QFilter({
      value: `Q(category='${clickedData.category}')`
    });
    otherComponent.call(filter);
  }
});

// 在组件销毁时取消订阅
chartComponent.subscribeEvent('destroy', () => {
  chartComponent.unSubscribeEvent('clickDetail');
});

结合页面路由的点击处理
chartComponent.subscribeEvent('clickDetail', async (eventData) => {
  const { data } = eventData;
  
  // 更新页面参数
  const currentPage = chartComponent.page;
  if (currentPage && data.orderId) {
    // 导航到订单详情页
    await currentPage.navigate('/orders/detail', {
      orderId: data.orderId,
      source: 'chart'
    });
  }
});

点击维度

事件名: clickDimension
触发时机: 用户点击图表中的维度标签或图例时触发
事件数据: 包含被点击的维度信息

使用示例

监听点击维度事件
// 订阅点击维度事件
chartComponent.subscribeEvent('clickDimension', (eventData) => {
  console.log('点击维度:', eventData);
  
  const dimensionValue = eventData.name;
  const dimensionType = eventData.type;
  
  // 根据点击的维度进行数据筛选
  if (dimensionValue) {
    // 构建筛选条件
    const filterCondition = `Q(${dimensionType}='${dimensionValue}')`;
    const filter = new Jit.datatypes.QFilter({
      value: filterCondition
    });
    
    // 更新当前图表的筛选
    chartComponent.call(filter);
    
    // 同时更新相关组件
    relatedTableComponent.call(filter);
    relatedChartComponent.call(filter);
  }
});

图例交互示例
chartComponent.subscribeEvent('clickDimension', (eventData) => {
  const { name: legendName, selected } = eventData;
  
  if (selected) {
    console.log(`显示系列: ${legendName}`);
    // 显示对应系列的数据
    showSeriesData(legendName);
  } else {
    console.log(`隐藏系列: ${legendName}`);
    // 隐藏对应系列的数据
    hideSeriesData(legendName);
  }
  
  // 更新其他图表的显示状态
  syncChartSeries(legendName, selected);
});

维度钻取示例
chartComponent.subscribeEvent('clickDimension', async (eventData) => {
  const { name: dimensionValue } = eventData;
  
  // 实现维度钻取功能
  if (currentDrillLevel === 'year' && dimensionValue) {
    // 从年度钻取到月度
    const monthlyConfig = {
      ...chartComponent.config,
      fieldList: [
        [
          {
            name: 'month',
            dataType: 'Date',
            alias: '月份',
            ormType: 'GROUP'
          }
        ],
        chartComponent.config.fieldList[1] // 保持指标不变
      ],
      requireElements: [
        {
          ...chartComponent.config.requireElements[0],
          filter: `Q(year='${dimensionValue}')`
        }
      ]
    };
    
    // 更新图表配置
    chartComponent.setConfig(monthlyConfig);
    await chartComponent.getChartData();
    
    // 更新钻取状态
    currentDrillLevel = 'month';
    currentDrillValue = dimensionValue;
  }
});

高级特性

支持的图表类型

统计图组件支持24种图表类型，涵盖常用的数据可视化需求：

基础图表类型：

line - 折线图
bar - 柱状图
yBar - 条形图
pie - 饼状图
circlePie - 环形饼图
areaLine - 面积图

高级图表类型：

radar - 雷达图
funnel - 漏斗图
scatter - 散点图
bubble - 气泡图
chinaMap - 地图
calendar - 日历热力图

特殊图表类型：

CustomSingleValue - 单值图
CustomMutiValue - 多值图
gauge - 仪表盘图
liquidFill - 水球图
progress - 进度条

动态图表切换

动态切换图表类型
// 切换为柱状图
chartComponent.setConfig({
  chartType: 'bar',
  chartOption: {
    barWidth: 25,
    legendShow: true
  }
});

// 切换为饼图
chartComponent.setConfig({
  chartType: 'pie', 
  chartOption: {
    radius: 120,
    legendShow: true,
    legend: 1 // 底部显示图例
  }
});

复杂数据源配置

多维度多指标配置
const complexConfig = {
  chartType: 'line',
  fieldList: [
    // 维度组 - 支持多个维度
    [
      {
        name: 'year',
        dataType: 'Date',
        alias: '年份',
        ormType: 'GROUP'
      },
      {
        name: 'quarter', 
        dataType: 'Date',
        alias: '季度',
        ormType: 'GROUP'
      }
    ],
    // 指标组 - 支持多个指标
    [
      {
        name: 'revenue',
        dataType: 'Numeric',
        alias: '营收',
        ormType: 'SUM'
      },
      {
        name: 'profit',
        dataType: 'Numeric', 
        alias: '利润',
        ormType: 'SUM'
      }
    ]
  ],
  requireElements: [
    {
      name: 'models.FinanceModel',
      filter: "Q(status='confirmed')",
      orderBy: [['year', 1], ['quarter', 1]]
    }
  ]
};

样式主题配置

自定义图表样式
const styleConfig = {
  chartOption: {
    // 坐标轴样式
    XAxisStyle: {
      show: true,
      fontSize: 12,
      color: '#666666'
    },
    YAxisStyle: {
      show: true, 
      fontSize: 12,
      color: '#666666'
    },
    // 标签样式
    axisLabelStyle: {
      width: 60,
      rotate: 45,
      show: true,
      inside: false
    },
    // 图例配置
    legendShow: true,
    legend: 0, // 顶部
    // 间距配置
    horizontalPadding: 10,
    verticalPadding: 10
  }
};

快速开始​

基础配置示例​

配置属性说明​

变量​

dimensionFilter​

detailFilter​

方法​

call​

参数详解​

返回值​

使用示例​

getChartData​

返回值​

使用示例​

checkConfig​

返回值​

使用示例​

publishEvent​

参数详解​

返回值​

使用示例​

subscribeEvent​

参数详解​

返回值​

使用示例​

unSubscribeEvent​

参数详解​

返回值​

使用示例​

setConfig​

参数详解​

使用示例​

getPermConfig​

返回值​

使用示例​

bindApp​

参数详解​

使用示例​

bindPage​

参数详解​

使用示例​

getEventKey​

参数详解​

返回值​

使用示例​

initVariables​

参数详解​

使用示例​

newVariable​

参数详解​

返回值​

使用示例​

runCode​

参数详解​

返回值​

使用示例​

属性​

config​

data​

ModelClass​

chartIns​

QObj​

name​

title​

fullName​

showTitle​

compType​

type​

app​

page​

modelFilter​

dataTypeList​

uuid​

事件​

点击明细​

使用示例​

点击维度​

使用示例​

高级特性​

支持的图表类型​

快速开始

基础配置示例

配置属性说明

变量

dimensionFilter

detailFilter

方法

call

参数详解

返回值

使用示例

getChartData

返回值

使用示例

checkConfig

返回值

使用示例

publishEvent

参数详解

返回值

使用示例

subscribeEvent

参数详解

返回值

使用示例

unSubscribeEvent

参数详解

返回值

使用示例

setConfig

参数详解

使用示例

getPermConfig

返回值

使用示例

bindApp

参数详解

使用示例

bindPage

参数详解

使用示例

getEventKey

参数详解

返回值

使用示例

initVariables

参数详解

使用示例

newVariable

参数详解

返回值

使用示例

runCode

参数详解

返回值

使用示例

属性

config

data

ModelClass

chartIns

QObj

name

title

fullName

showTitle

compType

type

app

page

modelFilter

dataTypeList

uuid

事件

点击明细

使用示例

点击维度

使用示例

高级特性

支持的图表类型