前言
由于客户对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对象,设置属性