ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Ant Design Charts 折线图配置属性结合案例详细说明

2021-07-22 11:32:54  阅读:40  来源: 互联网

标签: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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有