Line

父组件

子组件

Properties

  • type'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' | Function

    曲线的插值类型,可以接收自定义的函数。折线对应的 type 为 “linear” 。

    默认值:'linear'

  • dataKeyString | Number | Function

    每个区域图对应一个唯一的 key,需要在 LineChart 中保证唯一。

  • xAxisIdString | Number

    区域图对应的 x 轴的 id 。

    默认值:0

  • yAxisIdString | Number

    区域图对应的 y 轴的 id 。

    默认值:0

  • legendType'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye' | 'none'optional

    对应的图例 icon 的类型。

    默认值:'line'

  • shapeReactElement | Functionoptional

    线条的图形配置,接收多种配置。当值是一个 React Element ,会克隆这个 React Element 来渲染"线条"。当值是函数时,会调用这个函数去渲染自定义的"线条"。

    格式:

    <Line dataKey="value" shape={<CustomizedShape/>}/>
    <Line dataKey="value" shape={renderShape}/>
  • dotBoolean | Object | ReactElement | Function

    曲线上的点,接收多种配置。当值为 false ,不渲染点。当值为 true ,点会继承 Line 的属性配置,例如配置了 Area 的 stroke 为 "red", 点会继承这个属性。当值为一个对象的时候,会把这个对象解析为点的属性,来覆盖默认属性。当值是一个 React Element ,会克隆这个 React Element 来渲染“点”。当值是一个 函数 时,会调用这个函数去渲染自定义的“点”。

    默认值:true

    格式:

    <Line dataKey="value" dot={false} />
    <Line dataKey="value" dot={{ stroke: 'red', strokeWidth: 2 }} />
    <Line dataKey="value" dot={<CustomizedDot />} />
    <Line dataKey="value" dot={renderDot} />
  • activeDotBoolean | Object | ReactElement | Function

    当图表触发mouseenter事件,并且需要展示 Tooltip 的时候,会展示一个“激活状态的点”。当值为 false ,不渲染“激活状态的点”。当值为 true ,点会继承 Line 的属性配置,例如配置了 Line 的 stroke 为 "red", 点会继承这个属性。当值为一个对象的时候,会把这个对象解析为点的属性,来覆盖默认属性。当值是一个 React Element ,会克隆这个 React Element 来渲染“点”。当值是一个 函数 时,会调用这个函数去渲染自定义的“点”。

    默认值:true

    格式:

    <Line dataKey="value" activeDot={false} />
    <Line dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
    <Line dataKey="value" activeDot={<CustomizedActiveDot />} />
    <Line dataKey="value" activeDot={renderDot} />
  • labelBoolean | Object | ReactElement | Function

    图形上的文本标签。当值为 false ,不展示文本标签。当值为 true,会根据 Line 的属性配置来展示文本标签。当值为一个对象的时候,会把这个对象解析为 文本标签 的属性,来覆盖默认属性。当值是一个 React Element ,会克隆这个 React Element 来渲染“文本标签”。当值是一个 函数 时,会调用这个函数去渲染自定义的“文本标签”。

    默认值:false

    格式:

    <Line dataKey="value" label />
    <Line dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
    <Line dataKey="value" label={<CustomizedLabel />} />
    <Line dataKey="value" label={renderLabel} />
  • hideBooleanoptional

    将行隐藏为true,在通过图例切换可见性状态时很有用

    默认值:false

  • pointsArray

    曲线上点的坐标。当使用 LineChart 或者 ComposedChart 作为父组件的时候,不需要自己计算,父组件会计算好。

    格式:

    [{x: 12, y: 12, value: 240}]
  • strokeStringoptional

    描边的颜色

    默认值:#3182bd

    格式:

    <Line dataKey="value" stroke="#ff0ff0" />
  • strokeWidthString | Numberoptional

    虚线的宽度

    默认值:1

    格式:

    <Line dataKey="value" strokeWidth={1} />
    <Line dataKey="value" strokeWidth={3} />
  • layout'horizontal' | 'vertical'optional

    布局类型,通常继承父组件的布局类型。

  • connectNullsBoolean

    当遇到 null、undefined 等非法输入的时候,是否跳过这个值,让前后连接起来。

    默认值:false

  • unitString | Numberoptional

    对应数据的单位,这个单位会展示在 Tooltip 的数值后面。

  • nameString | Numberoptional

    对应数据的名称,这个名称会展示在 Tooltip 以及 Legend 中用来表示这个趋势图。如果名称为空,我们会使用 dataKey 替代。

  • isAnimationActiveBoolean

    当值为 false,不开启动画。

    默认值:true in CSR, and false in SSR

  • animationBeginNumber

    声明组件挂载后,开始运行动画的间隔时长,单位为毫秒。

    默认值:0

  • animationDurationNumber

    声明动画的运行时长,单位为毫秒。

    默认值:1500

  • animationEasing'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'

    动画缓动函数的类型。

    默认值:'ease'

  • idStringoptional

    唯一的id,会用于生成内部的clip path id 等,建议使用SSR的时候设置这个属性。

  • onAnimationStartFunctionoptional

    区域图动画 start 事件的回调函数。

  • onAnimationEndFunctionoptional

    区域图动画 end 事件的回调函数。

  • onClickFunctionoptional

    曲线 click 事件的回调函数。

  • onMouseDownFunctionoptional

    曲线 mousedown 事件的回调函数。

  • onMouseUpFunctionoptional

    曲线 mouseup 事件的回调函数。

  • onMouseMoveFunctionoptional

    曲线 mousemove 事件的回调函数。

  • onMouseOverFunctionoptional

    曲线 mouseover 事件的回调函数。

  • onMouseOutFunctionoptional

    曲线 mouseout 事件的回调函数。

  • onMouseEnterFunctionoptional

    曲线 mouseenter 事件的回调函数。

  • onMouseLeaveFunctionoptional

    曲线 mouseleave 事件的回调函数。

  • strokeDasharrayString

    The pattern of dashes and gaps used to paint the line

    格式:

    <Line strokeDasharray="4" />
    <Line strokeDasharray="4 1" />
    <Line strokeDasharray="4 1 2" />