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" />