//yarn add @ant-design/charts 或者 npm install@ant-design/charts import{Line}from'@ant-design/charts';

1、獲取data資料

useEffect(()=>{ asyncFetch(); },[]); constasyncFetch = (0 => { 　　fetch('獲取介面連線') 　　.then((response)=>response.json()) 　　.then((json)=>{ 　　//setData(json) 　　}) .catch((error)=>{ 　　console.log('fetchdatafailed',error); }); } 2、預設資料： constdata=[ { 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配置 constconfig={ 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( <divstyle={{padding:'12px14px',fontSize:'12px',width:'180px',height:'68px'}}> {items&&items.length===2&&( <> <pclassName={styles.firstTg}> <spanclassName={styles.yellowTip}/> <spanclassName={styles.scoendTg}>充值</span> {items[0]&&items[0].data.amount} </p> <pclassName={styles.firstTg}> <spanclassName={styles.greenTip}/> <spanclassName={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( <divclassName={styles.custom_g2plot}> <Line{...config}/> </div> );