关于echarts:vue项目echarts按需引入

装置echarts包

npm install echarts --save

全局引入–main.js

// 引入echarts
import echarts from 'echarts' 
// 全局注入echarts
Vue.prototype.$echarts = echarts 

vue页面中应用办法
this.$echarts.init(..)

页面按需引入

// 引入echarts模块
const echarts = require('echarts/lib/echarts')
// 引入须要的图表类型,柱状图和雷达图
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')
 // 引入提示框和title组件,图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

vue页面中应用办法
echarts.init(..)

如果呈现图片中的报错信息的话,须要加上以下两句

import { GridComponent } from 'echarts/components'
echarts.use(GridComponent)

好啦,echarts按需引入就实现了,打包时会发现文件放大了很多。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理