标签：category style items Charts value Ant Design year data

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

标签：category,style,items,Charts,value,Ant,Design,year,data
来源： https://www.cnblogs.com/yuan-luo/p/15043266.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。