AntV React简介
图表使用
折线图示例
import { Line } from '@ant-design/plots';
import React from 'react';
import ReactDOM from 'react-dom';
const DemoLine = () => {
const data = [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
];
const config = {
data,
xField: 'year',
yField: 'value',
point: {
shapeField: 'square',
sizeField: 4,
},
style: {
lineWidth: 2,
},
axis: {
y: {
labelFormatter: (value) => `$ ${value}`
}
},
slider: {
x: {}
},
interaction: {
tooltip: {
marker: false,
crosshairs: true,
crosshairsXStroke: "red",
crosshairsXLineWidth: 33,
crosshairsYStroke: "blue",
crosshairsYLineDash: 4,
},
},
};
return <Line {...config} />;
};
ReactDOM.render(<DemoLine />, document.getElementById('container'))