vue按需引入echarts

  下载安装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。

posted @   古兰精  阅读(28190)  评论(2编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
历史上的今天:
2017-07-12 解决服务端换行数据经过输入框处理后字符数变多的问题:如何区分计算机中的换行符、回车符、\n、\r、\r\n 等
点击右上角即可分享
微信分享提示