后台管理系统难免会需要用到图表,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. 然后就可以去使用了