ant design pro 图表组件的使用，容易踩坑~按照官网方法报错，总结一下不同版本的不同情况方法一：直接引用co

方法一：直接引用components中的图标组件

在使用ant design pro v2时，默认是下载安装全部区块的：

首页截图

所以要用什么图表在components组件中找到并引用即可。例如：

import { Gauge, Pie, WaterWave} from './components/Charts';

v4版本更加轻量，按照官网的安装步骤安装下来显示是这个样子的：

首页截图

这时候要想使用组件中的图表哪找去呀~

1）如果你已经习惯了v2全部区块的开发，可以在项目根目录中执行下面的代码来下载所有的区块，这时得到的界面就与v2一样了。

npm run fetch:blocks

2）如果只想要部分区块/模板，可以使用umi ui进行区块/模板管理

这样就可以使用页面中出现的图表组件啦，都在components中放着呢。我们在开发的时候可以针对性地引用具体的组件（可以复制过来）。方法与v2版本一样。

此方法适用于v2版本和v4版本。

引用方式：

import Charts from 'ant-design-pro/lib/Charts';

例如引用柱状图：

import { Bar } from 'ant-design-pro/lib/Charts';

这个时候就可以正常使用组件啦，是不是很方便呢。

hhh没那么简单，在这一过程中踩坑啦啊啊啊，批评一下官网不说清楚哼哼~按照上述官网的引用方式会报错的！记得要在项目根目录中执行代码：

npm install ant-design-pro@latest --save

ant-design-pro是独立使用 Pro 组件，必须要下载的！坑~

现在就可以愉快的使用图标组件啦啦啦