logo

Ant Design Charts

  • 教程
  • 图表组件
  • 图表示例
  • 选项
  • 所有产品antv logo arrow
  • 2.0.0
  • 统计图表
    • 标题(Title)
    • 坐标轴(Axis)
    • 图例(Legend)
    • 滚动条(Scrollbar)
    • 缩略轴(Slider)
    • 提示信息(Tooltip)
    • 数据标签(Label)
    • 颜色映射(Color)
    • 事件(Event)
    • 交互(Interaction)
      • 概览
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • 状态(State)
    • 样式(Style)
    • 比例尺(Scale)
      • 概览
      • band
      • linear
      • log
      • ordinal
      • point
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
      • pow
    • 动画(Animate)
      • 概览
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • 主题(Theme)
      • 概览
      • academy
      • classic
      • classicDark
    • 数据(Data)
      • 概览
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy

ema

上一篇
custom
下一篇
fetch

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

概述

EMA(Exponential Moving Average,指数移动平均)是一种常用的数据平滑算法,它通过对最近的数据点赋予更高的权重,来减少数据的波动性,从而更清晰地观察数据的趋势变化。

在 Ant Design Charts 的实现中,EMA 的计算方式如下:

ema公式示意图

其中:

  • Pt:当前时刻的原始数据值;
  • EMAt-1:上一个时刻的 EMA 值;
  • α:平滑因子,范围在 (0, 1) 之间。

⚠️ 注意:Ant Design Charts 中 EMA 的实现与传统定义中的 α 权重位置相反,因此:

  • α 越接近 1,平滑效果越明显;
  • α 越接近 0,EMA 越接近原始数据。

使用场景

  • 时间序列中数据存在剧烈波动,希望突出趋势时;
  • 金融数据如股票价格的技术分析;
  • 模型训练过程中的指标平滑与动态跟踪。

配置项

属性描述类型默认值是否必选
field需要平滑的字段名string'y'✓
alpha平滑因子,控制平滑程度(越大越平滑)number0.6
as生成的新字段名,若不指定将覆盖原字段string同 field

若需保留原字段,建议设置 as 属性以输出到新字段。 该默认值由组件内部定义,非来源于主题。 ⚠️ 注意:field 字段必须为数值型,否则将导致计算错误。

示例

以下示例展示如何在 Ant Design Charts 中对数据字段 close 应用 EMA 平滑变换。

import { Line } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';
const Demo = () => {
const config = {
children: [
{
type: 'line',
data: {
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
transform: [
{
type: 'ema',
field: 'close',
alpha: 0.8,
as: 'emaClose',
},
],
},
encode: {
x: 'date',
y: 'emaClose',
},
},
{
type: 'line',
style: {
opacity: 0.3,
},
data: {
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
},
encode: {
x: 'date',
y: 'close',
},
},
],
};
return <Line {...config} />;
};
createRoot(document.getElementById('container')).render(<Demo />);