echarts 按需引入解决打包体积过大问题

news2024/9/28 21:18:42

问题:由于服务器网速特别慢大概100kb打包文件过大导致第一次加载静态文件时特别慢,优化echarts

原先引入的方式和使用(导致体积过大):

// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入图表后缀都为 Chart
import { BarChart, LineChart, PieChart, GaugeChart } from 'echarts/charts'
// 引入需要的组件,后缀都为 Component
import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use(
  [CanvasRenderer, BarChart, LineChart, PieChart, GaugeChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent]
)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.按需引入,新建一个echarts.js,我用到的是饼图和柱状图(pie和bar)

const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legend');
require('echarts/lib/component/grid');
require('echarts/lib/chart/pie');
require('echarts/lib/chart/bar');
export default echarts

在这里插入图片描述

2. 在用到的组件中引入

import echarts from ‘@/utils/echarts’;
在这里插入图片描述

3. 现在可以看到体积小了1MB左右在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/636989.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

10. Java对象内存布局和对象头

10.1 面试题 ● 说下JUC,AQS的大致流程 ● CAS自旋锁,是获取不到锁就一直自旋吗?CAS和synchronized区别在哪里,为什么CAS好,具体优势在哪里? ● sychronized底层是如何实现的,实现同步的时候用到…

idea导入java web项目带jar

可参考:idea导入Javaweb项目_小黑cc的博客-CSDN博客 配置tomcat 加载项目jar依赖 最后点ok,tomcat启动 jsp页面的项目,必须要加载这两个jar包

windows 服务程序和桌面程序集成(二)服务程序

系列文章目录链接: windows 服务程序和桌面程序集成(一)概念介绍windows 服务程序和桌面程序集成(二)服务程序windows 服务程序和桌面程序集成(三)UDP监控工具windows 服务程序和桌面程序集成&…

OpenLayers.js 入门教程:打造互动地图的入门指南

theme: smartblue 本文简介 戴尬猴,我是德育处主任 本文介绍如何使用 OpenLayers.js (后面简称 ol)。ol 是一个开源 JavaScript 库,可用于在Web页面上创建交互式地图。 ol能帮助我们在浏览器轻松地使用地图功能,例如地图缩放、地图拖动、地图…

双碳目标下DNDC模型建模方法及在土壤碳储量、温室气体排放、农田减排、土地变化、气候变化中的应用

由于全球变暖、大气中温室气体浓度逐年增加等问题的出现,“双碳”行动特别是碳中和已经在世界范围形成广泛影响。国家领导人在多次重要会议上讲到,要把“双碳”纳入经济社会发展和生态文明建设整体布局。同时,提到要把减污降碳协同增效作为促…

数字电子电路绪论

博主介绍:一个爱打游戏的计算机专业学生 博主主页:夏驰和徐策 所属专栏:程序猿之数字电路 1.科技革命促生互联网时代 科技革命对互联网时代的兴起产生了巨大的推动作用。以下是一些科技革命对互联网时代的促进因素: 1. 计算机技…

赢涛智慧工单 v2.4.3 公众号模块版

适用于:入驻加盟、运价查询、申请返礼、工单售后、商标注册、执照申请、汽车保养、年审代办、材料申请、流程审批、贷款申请、废品回收、投诉建议、业务登记、在线督导、购房申请、设备维修、门店报修、信息申请、材料提交、合作咨询、党群服务、入党申请、补贴申领…

内网隧道代理技术(三)之使用SSH端口转发

使用SSH端口转发 SSH介绍 SSH通过网络远程访问主机提供保护,可以对客户端和服务端之间的数据传输进行压缩和加密,有身份验证、SCP、SFTP、和端口转发的功能 SSH转发常用的参数介绍: 参数作用-C请求压缩所有数据-D动态转发、即socks代理-f…

np.meshgrid()与网络表格

目录 数组是如何绘制表格的?分别绘制X和Y图像绘制等高线 数组是如何绘制表格的? 我们先将两个数组传入np.meshgrid(),查看该函数是如何绘制网格的。 import numpy as npx np.linspace(-2, 2, 5) y np.linspace(-2, 2, 5)X, Y np.meshgri…

【无标题】储能电池IEC62619认证 IEC62619测试什么内容

储能电池IEC62619认证 IEC62619测试什么内容 作为专业的民营三方检测、认证服务型的,同时已获得CNAS、CMA、NVLAP、MICOM、A2AL、CPSC、IC、EMSD、NATA、SABS、KOSTEC、 lNSPECCO、E-mark、TUV、CETECOM、EUROFINS、PHOENIX、HOENIX、KTC、ITS、SAA、UL等20多个国内…

在webpack中配置bable

一、什么是bable Babel是一个JavaScript**编译工具**,主要用于在旧浏览器或过时的JavaScript语言版本中转换新的或标准的JavaScript语法和功能。它的主要作用是解决跨浏览器的兼容性问题,让我们能够使用最新的JavaScript特性,而不必担心它们…

一个轻量级Web蜜罐(附下载地址)

Loki 0x01 Why 目标: 抓漏洞. 大概是没有找到啥子开源的符合我预期的蜜罐吧,所以自己动手写了。 0x02 What 想做什么样的蜜罐? 1.便于维护,随开随用,配置简单。 2.Web低仿真即可,且只抓Web流量。 3.不同端口指向不同的页面,响应头配置等。 0x03 How SpringB…

Matlab论文插图绘制模板第102期—分组填充箱线图

在之前的文章中,分享了Matlab箱线图的绘制模板: 填充箱线图的绘制模板: 分组箱线图的绘制模板: 进一步,再来分享一下分组填充箱线图的绘制模板。 先来看一下成品效果: 特别提示:本期内容『数据…

DTMultiWindow UE UMG 多窗口插件说明

本插件可以把UMG窗口做为一个系统窗口独立显示。 目录 操作步骤: DT User Widget 说明: 全局蓝图节点说明 : 操作步骤: 1. 创建一个新的UMG,类型选择 DT User Widget 2. 使用传统方式,搭建这个UMG控件。…

深度学习应用篇-自然语言处理[10]:N-Gram、SimCSE介绍,更多技术:数据增强、智能标注、多分类算法、文本信息抽取、多模态信息抽取、模型压缩算法等

【深度学习入门到进阶】必看系列,含激活函数、优化策略、损失函数、模型调优、归一化算法、卷积模型、序列模型、预训练模型、对抗神经网络等 专栏详细介绍:【深度学习入门到进阶】必看系列,含激活函数、优化策略、损失函数、模型调优、归一化…

redis中的 adlist链表实现

adlist源码解读(基于redis 6.2.7) 1丶打开源码 adlist.h typedef struct listNode {struct listNode *prev;struct listNode *next;void *value; } listNode;//迭代时 使用 typedef struct listIter {listNode *next;int direction; 迭代方向 } listIter;typedef struct lis…

Submit的使用,程序中调用其他报表

Submit的使用 项目需求:编写一个程序能够将实时的物料库存数据通过发送邮件的形式发送到对应的邮件。现有标准的事务码MB5B来查看对应的库存数据。可以在程序中使用submit将参数传递到MB5B中,然后将获取的数据返回到程序中,然后在执行发送邮件…

【Git通关之旅】从山脚到山顶(傲视群雄版)

Git分布式版本控制工具 版本控制器的方式 集中式版本控制工具 集中式版本控制工具,版本库是集中存放在中央服务器的,team里每个人work时从中央服务器下载代 码,是必须联网才能工作,局域网或互联网。个人修改后然后提交到中央版本库…

【蓝桥杯】求既约分数—>(全解)最大公约数与最小公倍数

前言: 通过对【蓝桥杯】2020初赛的一道求既约分数的题目的讲解,引出关于求“最大公约数与最小公倍数”的方法汇总。 对于“最大公约数与最小公倍数”来说,求解都有一些固定的方法,而这些方法一般都是固定的,只需要掌握…