vue按需引入echarts
2023-09-11 14:19:54 时间
下载安装echarts包:npm install echarts -D
一、全局引入
main.js中配置
import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件
缺点:如果是完整的引入Echarts,会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加载耗时过长,影响用户体验
二、按需引入
如果是在许多页面中都有用到,就写在main.js中
//引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入折线图等组件
require('echarts/lib/chart/line')
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')
require('echarts/lib/component/legendScroll')//图例翻译滚动
Vue.prototype.$echarts = echarts
在组建中使用都是一样的,如果只在一个地方使用就直接写在.vue文件中就好啦
注:这里用 require 不用 import 引入是因为 import 需要详细的路径
然后打包,,比全部导入1.69M,少了差不多400K。
相关文章
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- Vue——vue中的双向数据绑定
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- Vue中使用ECharts报错echarts Uncaught (in promise) TypeError: Cannot read property ‘getAttribute‘ of null
- vue-devtools 获取到 vuex store 和 Vue 实例的?
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- vue-cli2.0引入nprogress 进度条
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- vue开源项目库汇总
- vue-状态管理与Vuex
- Vue知识点总结(12)——组件通信-子传父(超级详细)
- Vue+Echarts监控大屏实例十六:Echarts对接天地图插件开发
- Vue+Echarts监控大屏实例七:智慧养老监控模板实例下
- vue实战入门进阶篇六:vue+elementui实现网站后台-新闻资讯界面实现
- vue学习笔记四:Jquery VS Vue之元素操作明细对照
- vue引入nutUI
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- Django+Vue项目学习第九篇:vue项目部署到服务器
- Django+Vue项目学习第二篇:vue项目创建
- Vue脚手架报错: Component name “xxx“ should always be multi-word(vue/multi-word-component-names)的解决办法