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

最近接手了一个react项目,里面需要用到折线图,看到图表的感觉不难。但是仔细一看引入的是 Ant Design Charts。然后去看了一下文档,发现好多地方的属性与echart区别很大,甚至用法都不一样了。最终结合文档,对属性一 一 试用了解,完成了任务。现给与记录,以便后来再使用方便。

实现目标( UI 给图 )                                                                             

现有折线图(ant 基础折线图)

提供数据格式如下:

1.首先安装包,导入引用直接看文档。传送门:快速上手 | Ant Design Charts

2.找到基础的折现配置,直接放入代码。data数据需要自己提供,数据格式参照上图。

3.最终config实现配置代码如下。注意:如果是ts就要在config后面加上类型为any

  const config: any = {
    height: 240,   // 画布高度
// padding:画布周围空白,如果字体过长过大,都要填充大一点,auto在苹果设备上可能会出现x轴坐标文字显示不完整
    padding: [40, 0, 40, 60], 
// data 数据源  xField的值取data中某个字段,表示x轴显示的文字。 yField同理 y轴的文字
    data: data
    xField: 'year',  
    yField: 'value',
// seriesField 这个是多条曲线的关键,如果数值有多种,就会出现多条曲线
    seriesField: 'category',
// tooltip 自定义触摸到曲线后显示数据弹窗的样式,不配就显示默认的
    tooltip: {
      customContent: (title: any, items: any): any => (
        <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>
            </>
          )}
          {items
            && items.length < 2
            && ((items && items[0] && items[0].name === '充值总额' && (
              <p className={styles.firstTg}>
                <span className={styles.yellowTip} />
                <span className={styles.scoendTg}>充值</span>
                {items[0] && items[0].data.amount}
              </p>
            ))
              || (items && items[0] && items[0].name === '消费总额' && (
                <p className={styles.firstTg}>
                  <span className={styles.greenTip} />
                  <span className={styles.scoendTg}>消费</span>
                  {items[0] && items[0].data.amount}
                </p>
              )))}
        </div>
      ),
    },
// 设置y轴的样式
    yAxis: {
      min: 0,
      max: 100,  // min 和 max 设置Y轴最大值和最小值,然后自动分配
      line: { style: { stroke: '#0A122E' }}// 配上这条数据才会显示y轴 stroke等同css color
       // label 配置y轴文字的样式
      label: {
        // formatter 对y轴文字进一步处理
        formatter: (v: any) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        style: {
          stroke: '#0A122E',
          fontSize: 12,
          fontWeight: 300,
          fontFamily: 'Apercu',
        },
      },
       // grid 配置水平线的样式 下面配置为虚线如果要为实线,不用配置
      grid: {
        line: {
          style: {
            stroke: 'rgb(150,160,171)',
            lineDash: [4, 5],
          },
        },
      },
    },
    xAxis: {
      line: { style: { stroke: '#0A122E' } },
      label: {
        style: {
          stroke: '#0A122E',
          fontSize: 12,
          fontWeight: 300,
          fontFamily: 'Apercu',
        },
      },
    },
    //renderer 画布渲染配置,canvas 或 svg
    renderer: 'svg',
    // 是否为平滑曲线
    smooth: true,
    // 配置显示的2条曲线线条颜色,如果多条,继续添加,注意与右上角的图例颜色要对应
    color: ['#E09B27', '#38A636'],
    // 配置显示图例,就是上面那个可以点击的曲线
    legend: {
      //  图例相对于画布的位置
      position: 'top-right',
      // 每个图例的样式 
      items: [
        {
          name: '充值总额',
          marker: {
             // 是否为方块
            symbol: 'square',
            style: {
               // 填充颜色,注意要与线条颜色对应。
              fill: '#E09B27',
            },
          },
        },
        {
          name: '消费总额',
          marker: {
            symbol: 'square',
            style: {
              fill: '#38A636',
            },          
          },
        },
      ],
    },
  };

4。最终<Line {...config} />放入你想要放的位置。     

  <Line {...config} />

  • 10
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端 - wei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值