Ant Design Charts 折线图配置属性结合案例详细说明
// yarn add @ant-design/charts 或者 npm install @ant-design/charts
import { Line } from '@ant-design/charts';
1、获取data数据
useEffect(() => {
asyncFetch();
}, []);
const asyncFetch = (0 => {
fetch('获取接口连接')
.then((response) => response.json())
.then((json) => {
// setData(json)
})
.catch((error) => {
console.log('fetch data failed', error);
});
}
2、默认数据：
const data = [
{
category: '调用量',
value: 0,
year: '2001',
},
{
category: '并发量',
value: 10,
year: '2001',
},
{
category: '调用量',
value: 40,
year: '2002',
},
{
category: '并发量',
value: 112,
year: '2002',
},
{
category: '调用量',
value: 50,
year: '2012',
},
{
category: '并发量',
value: 60,
year: '2012',
},
];
3、config配置
const config = {
data,
height: 450, // 画布高度
xField: 'year',
yField: 'value',
seriesField: 'category', // 这个是多条曲线的关键，如果数值有多种，就会出现多条曲线
yAxis: { // 设置y轴的样式
nice: true,
// line: { style: { stroke: '#0A122E' } },
label: {
formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
style: {
stroke: '#0A122E',
// fontSize: 12,
fontWeight: 300,
},
},
},
xAxis: { // 设置x轴的样式
line: { style: { stroke: '#0A122E' } },
label: {
style: {
stroke: '#0A122E',
// fontSize: 12,
fontWeight: 300,
},
},
},
// tooltip 自定义触摸到曲线后显示数据弹窗的样式，不配就显示默认的
tooltip: {
customContent: (title: any, items: any): any => {
return (
<div style={{ padding: '12px 14px', fontSize: '12px', width: '180px', height: '68px' }}>
{items && items.length === 2 && (
<>
<p className={styles.firstTg}>
<span className={styles.yellowTip} />
<span className={styles.scoendTg}>充值</span>
{items[0] && items[0].data.amount}
</p>
<p className={styles.firstTg}>
<span className={styles.greenTip} />
<span className={styles.scoendTg}>消费</span>
{items[1] && items[1].data.amount}
</p>
</>
)}
</div>
);
},
},
legend: {
position: 'top-right',
items: [
{
name: '调用量',
marker: {
symbol: 'square',
style: {
fill: '#1979C9',
},
},
},
{
name: '并发量',
marker: {
symbol: 'square',
style: {
fill: '#D62A0D',
},
},
},
],
}, //
color: ['#1979C9', '#D62A0D'], // 配置显示的2条曲线线条颜色，如果多条，继续添加，注意与右上角的图例颜色要对应
smooth: false // 是否为平滑曲线
};
4、
return (
<div className={styles.custom_g2plot}>
<Line {...config} />
</div>
);
