在Vue项目里使用ECharts图标库

ECharts是一个JavaScript实现的开源图标库，能兼容绝大多数浏览器（IE8+），底层依赖ZRender（一个轻量级的Canvas类库），能高度个性化定制数据可视化图标。

ECharts官网地址：https://echarts.apache.org/v4/zh/feature.html

一、在Vue项目下安装：

npm install echarts --save

二、创建一个Chart.vue。在ECharts的官网 —— 文档里找一个案例代码。复制到Chart.vue文件里。

三、在需要使用的页面，通过components的方式申明Chart组件。

四、这个时候打开页面就能显示Echart的图标了。如下图

image.png

但需要注意的是，在使用图标的时候，他会在模版渲染之前就开始渲染，这个时候显示的话会变形。所以我们需要监听DOM容器的变化，DOM变化之后在重新绘制图表。

五、监听DOM变化。

这里我们需要用到一个第三方库resize-detector，先安装。

npm install resize-detector --save

但这种监听在浏览器变动的时候会触发多次，为了优化性能，我们还需要使用lodash。

npm install lodash --save

编码如下：

ok，现在基本就搞完了。

ps： 如果报格式警告，那就安装一个exlint插件，然后一键改下格式就好了。

最后，如果你觉得文章内容有用，那么我推荐你购买唐金州老师(Ant Design vue作者)在极客时间的专栏，手把手教你搭建一个大型的Vue项目。