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. 然后就可以去使用了
VUE项目按需引入Echarts_第1张图片

你可能感兴趣的:(前端优化,echarts,vue.js,javascript,前端)