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 。
默认值:
0yAxisIdString | Number
区域图对应的 y 轴的 id 。
默认值:
0legendType'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,在通过图例切换可见性状态时很有用
默认值:
falsestrokeStringoptional
描边的颜色
默认值:
"#3182bd"格式:
<Line dataKey="value" stroke="#ff0ff0" />strokeWidthString | Numberoptional
虚线的宽度
默认值:
"1"格式:
<Line dataKey="value" strokeWidth={1} /> <Line dataKey="value" strokeWidth={3} />connectNullsBoolean
当遇到 null、undefined 等非法输入的时候,是否跳过这个值,让前后连接起来。
默认值:
falseunitString | Numberoptional
对应数据的单位,这个单位会展示在 Tooltip 的数值后面。
nameString | Numberoptional
对应数据的名称,这个名称会展示在 Tooltip 以及 Legend 中用来表示这个趋势图。如果名称为空,我们会使用 dataKey 替代。
isAnimationActiveBoolean | "auto"
当值为 false,不开启动画。
默认值:
"auto"animationBeginNumber
声明组件挂载后,开始运行动画的间隔时长,单位为毫秒。
默认值:
0animationDurationNumber
声明动画的运行时长,单位为毫秒。
默认值:
1500animationEasing'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" />