4.Ant Design Pro V2 使用 Echarts

前言

由于客户对Dashboard的要求导致ant提供的原生图标没法满足了

说到底还是原生提供的图表弱了点，这不支持那没有的，所以准备使用比较强大的Echarts

准备

安装echarts，直接敲命令，玩了一个月的前端了，现在安装包已经是手起刀落了~

安装命令可以去看echarts的官网文档，里面有写

npm install echarts --save

开始

安装完成后引入依赖，我这里用一个bar柱状图来做测试

//主依赖
import echarts from 'echarts/lib/echarts';

import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

然后Echars需要一个容器元素来放渲染的图表，在render的return里放一个容器元素，自己定一个ID

好，现在开始写组装这个图标的代码了

在完成react完成加载的钩子函数里加上以下代码，这是Echarts有给的

找到实际的DOM元素，然后通过这个元素来初始化echarts对象，设置属性