mpvue中按需引入echarts
大家都知道小程序文件大小不能超过2M, 在项目中引入echarts后,文件大小远远超出2M了。因为echarts文件默认是包含所有图表代码的,所以文件体积会比较大。解决办法如下:
安装
首先我们先安装下面两个依赖包
cnpm install mpvue-echarts
cnpm install echarts
自定义echarts
去echarts官网在线构建代码文件,根据自己的需求,选择相应的图表和组件,然后下载文件。官网地址
替换node_modules文件
在node_modules文件夹找到echarts依赖文件,进入dist文件夹,将刚刚下载的文件重命名一下,为:diy_echarts.js ,然后放到dist文件夹下。然后就可以在组件中引入了,引入方式如下:
import echarts from 'echarts/dist/diy_echarts'
import mpvueEcharts from 'mpvue-echarts'
然后在代码中使用mpvueEcharts组件就可以了。
mpvue中按需引入echarts的更多相关文章
- creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色
在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...
- vue按需引入echarts
下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...
- vue中按需引入Element-ui
安装 1.安装element-ui:npm i element-ui -S. 2.安装babel-plugin-component:npm install babel-plugin-component ...
- 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function
react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...
- vue中按需引入mint-UI报Error: .plugins[3][1] must be an object, false, or undefined
{ "presets": ["@babel/preset-env", "@babel/preset-react"], "plugi ...
- 针对elementUI 中InfiniteScroll按需引入的一点注意事项
大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在 ...
- VUE 采坑之旅-- Mint-ui 按需引入报出Module build failed: Error: Couldn't find preset "es2015" relative to directory "C:\\phpStudy\\PHPTutorial\\WWW\\text\\vuep\\vue-demo"
首先按照mint-ui的文档中按需引入的要求,先执行 npm install babel-plugin-component -D 然后,将.babelrc文件替换了,但是后来我又将其改了(采坑过程我也 ...
- Vue项目中jQuery的引入
1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require(&qu ...
- vue引入echarts、找不到的图表引入方法、图表中的点击事件
1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...
随机推荐
- 【开发笔记】- 在Grails下查看打印真实的SQL
以往我们都是在hibernate里面开启sql,在grails里面只需要在 DataSource.groovy 里面的一个dataSource加入一个 logSql = true即可,但是这样加后发出 ...
- Vue搭建脚手架1
Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加 ...
- javascript:void(0)的含义
void关键字介绍 首先,void关键字是javascript当中非常重要的关键字,该操作符指定要计算或运行一个表达式,但是不返回值. 语法格式: void func() void(func()) 实 ...
- 请实现一个js脚本,要求做到将数字转化为千分位表示如:1234567转化为1,234,567
//法一 function parseNum(num){ var list = new String(num).split('').reverse(); for(var i = 0; i < l ...
- 逻辑回归 之 Logist 推导
Logist从概率角度认识 可以咱学校教材大二版的<> - 山大版, 来整一波, 为了简化推导形式呢, 这里就假设2个样本空间的形式来展开, 基于(条件概率) 全概率与贝叶斯 作为核心. ...
- Filter和Listener
Filter: 1.概念: web中的过滤器:当访问服务器的资源时,过滤器可以将请求拦截下来,做一些事. 过滤器的作用:一般用于完成一些通用的操作:登录验证.统一编码处理,敏感字符处理.... 2.快 ...
- python的with语法的深入理解
如果你有一些对象(比如一个文件.网络连接或锁),需要支持 with 语句,下面介绍两种定义方法. 方法(1): 首先介绍下with 工作原理 (1)紧跟with后面的语句被求值后,返回对象的“__en ...
- Linux基础学习之基础命令(1)--2019-11-14
查看命令路径其他方法: which 命令: which [options] [--] programname [...] -a:显示所有匹配的程序文件,而非第一个: --skip-alias:略过别名 ...
- SQL血的教训
1. 每次查询的数据要有限制 2013年1月 产品独立数据库,由于多条SQL每次查询数据超过几千条,有些超过10万条数据未分页,造成应用服务器CPU有时持续100%. 2. 禁止 ...
- mysql查询语句中使用星号真的慢的要死?
前言 之所以写这篇文章,是源于以前看过的关于sql语句优化的帖子,里面明确提到了在sql语句中不要使用 * 来做查询,就像下面的规则中说的 2.尽量避免使用select *,返回无用的字段会降低查询效 ...