VUE项目按需引入Echarts

后台管理系统难免会需要用到图表,Echarts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,深受开发者的青睐。

但是一般的后台管理系用的比较多的是柱状图、饼图或者折线图等,为了用这几个图表而引入了全部Echarts,有点太重,因此我们可以选择按需引入。

1.安装插件
npm i babel-plugin-equire -D

2.在babel.config.js 注册插件
module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    // 注册使用一下
    'equire'
  ]
};

3. 在当前src文件下新建一个lib文件夹来存放这些第三方库
// src/lib/echarts/index.js
// 按需引入根据自身项目情况而引入,以下是我公司用到的图表类型和用到的图标属性
const echarts = equire([
  'line',
  'bar',
  'pie',
  'map',
  'radar',
  'funnel',
  'title',
  'legend',
  'legendScroll',
  'tooltip',
  'axis',
  'angleAxis',
  'axisPointer',
  'dataZoom',
  'graphic',
  'grid',
  'polar',
  'radar',
  'radiusAxis',
  'title',
  'toolbox'

]);
export default echarts;

4. 然后就可以去使用了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值