基于vue+echarts实现图形统计

背景:公司后台管理系统需要针对公司本身业务做一个图形统计,然而高逼格的D3.js没接触过,由于时间关系导致不敢这么贸然去尝试。最后考虑再三还是使用大众化的且功能同样强大的Echarts

第一步:安装项目依赖 

在控制台输入并运行

npm install echarts --save-dev

第二步:引入项目





考虑到统计图形多个地方会用到,决定把它做成一个公共组件方便不同页面去做调用,且将之命名为echarts.vue

因为document.getElementById的原因,所以需要在mounted钩子里面初始化echarts

第三步父组件去引入echarts.vue,且传参options与id






注:项目使用的是element-UI;另外echart详细参数设置请查看官方文档,这里就不作详细说明了

你可能感兴趣的:(vue,Echarts)