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 维 ...
随机推荐
- ionic创建组件、页面或者过滤器
ionic可以直接 用命令来创建组件.页面或者过滤器. 在ionic项目根目录打开命令窗口.输入下列命令: ionic g page pageName //创建新页面 ionic g componen ...
- Android-----实现给图片添加字体
实现给图片添加字体,图片旋转功能:xml布局文件内容如下,一个简单的ImageView布局 <com.example.hsjgapp.RotateImageView //这里存放要展示的图片 a ...
- CDA数据分析实务【第一章:营销决策分析概述】
一.营销概述 营销是关于企业如何发现.创造和交付价值以满足一定目标市场的需求,同时获取利润的学科.营销学用来辨识未被满足的需求,定义,度量目标市场的规模和利润潜力,找到最合适企业进入的细分市场和适合该 ...
- echarts设置横坐标的信息竖向排放
需要在xAxis 中添加 axisLabel , demo案例如下: 设置成每行两个文字竖向排放. xAxis : [ { type : 'category', data : this.xAxis, ...
- windows系统获取进程的pid号并终止
,,,* delims= " %a in ('tasklist ^| findstr "AutodeskDesktopApp.exe"') do (set commitd ...
- nfs实现k8s持久化
1. 部署nfs服务端 k8s-master 节点上搭建了 NFS 服务器 (1)安装nfs服务: yum install -y nfs-utils rpcbind vim /etc/exports ...
- 洛谷 P1522 牛的旅行 Cow Tours
题目链接:https://www.luogu.org/problem/P1522 思路:编号,然后跑floyd,这是很清楚的.然后记录每个点在这个联通块中的最远距离. 然后分连通块,枚举两个点(不属于 ...
- Tomcat管理
Tomcat日志 /data/env/tomcat8546/logs/catalina.out echo "" > catalina.out Tomcat配置文件 /data ...
- python2和python3共存方法
拿到安装包,安装python3 centos: sudo yum install python36 ubuntu: sudo add-apt-repository ppa:deadsnakes/ppa ...
- nginx,apache,tomcat的区别
nginx与apache 这里说的apche指apache http server ,与nginx都属于http服务器软件,主要处理静态资源. http server关心的是http协议层面的传输和访 ...