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