antdesign 柱状图_ant design pro (十)advanced 图表

本文介绍了Ant Design Pro提供的图表组件,包括柱状图在内的10种图表类型和2种图表套件。通过示例展示了如何在项目中使用Charts套件和单独使用BizCharts绘制图表,提供了一种简单的柱状图实现。
摘要由CSDN通过智能技术生成

一、概述

Ant Design Pro 提供了由设计师精心设计抽象的图表类型,是在 BizCharts 图表库基础上的二次封装,同时提供了业务中常用的图表套件,可以单独使用,也可以组合起来实现复杂的展示效果。

目前一共包涵 10 个图表类型,以及 2 个图表套件:

饼状图(Pie)

柱状图(Bar)

仪表盘(Gauge)

雷达图(Radar)

标签云(TagCloud)

水波图(WaterWave)

迷你柱状图(MiniBar)

迷你区域图(MiniArea)

迷你进度条(MiniProgress)

带有时间轴的折线图(TimelineChart)

图表卡片(ChartCard)

图表字段(Field)

二、详细

2.1、使用 Ant Design Pro 的图表

Charts 图表套件是在 components/Charts 包中,引用到项目就像使用其它组件一样:

你也可以通过单独使用 pro 的包的方式使用图表组件:独立使用 Pro 组件

import { ChartCard, MiniBar } from 'components/Charts';

import { Tooltip, Icon } from 'antd';

const visitData = [

{

x: "2017-09-01",

y: 100

},

{

x: "2017-09-02",

y: 120</

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值