// 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>
);