大家都知道小程序文件大小不能超过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的更多相关文章

  1. creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色

    在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...

  2. vue按需引入echarts

    下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue. ...

  3. vue中按需引入Element-ui

    安装 1.安装element-ui:npm i element-ui -S. 2.安装babel-plugin-component:npm install babel-plugin-component ...

  4. 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function

    react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...

  5. vue中按需引入mint-UI报Error: .plugins[3][1] must be an object, false, or undefined

    { "presets": ["@babel/preset-env", "@babel/preset-react"], "plugi ...

  6. 针对elementUI 中InfiniteScroll按需引入的一点注意事项

    大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在 ...

  7. 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文件替换了,但是后来我又将其改了(采坑过程我也 ...

  8. Vue项目中jQuery的引入

    1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require(&qu ...

  9. vue引入echarts、找不到的图表引入方法、图表中的点击事件

    1.在vue-cli项目中添加webpack配置,本文引入的最新版本.在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维 ...

随机推荐

  1. 2019-08-01 jquery中常用方法

    1.attr()方法设置或返回被选元素的属性值 <html> <meta charset="utf-8"/> <head><title&g ...

  2. js事件【续】(事件类型)

    一.UI事件[使用时需要添加on eg: onload 页面加载完成事件]load    [一张页面或一幅图像完成加载]页面加载后触发的事件,即进入页面后 unload    [用户退出页面]页面卸载 ...

  3. Java垃圾回收_过程观察

    这是今天看JVM垃圾回收的时候做的实验观察. 使用工具:Java VisualVM.VisualVM GC插件 观察应用:Tomcat容器中的Web服务 1. Java VisualVM 在tomca ...

  4. Java下载文件解决中文乱码问题

    直接上代码 /** * @desc 下载已存在的文件 */ public void sendFile(HttpServletRequest request, HttpServletResponse r ...

  5. 【异常】Zipkin server启动 Caused by: java.lang.ClassNotFoundException: com.linecorp.armeria.server.cors.CorsServiceBuilder

    一.异常信息 ERROR StatusLogger Log4j2 could not find a logging implementation. Please add log4j-core to t ...

  6. Odoo搜素视图过滤器之筛选与分组

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826168.html 一:过滤器 搜索视图还可以包含<filter>元素,定制过滤器. 过滤器 ...

  7. php命令模式(command pattern)

    ... <?php /* The command pattern decouples the object that executes certain operations from objec ...

  8. 最近走过的坑 :slf4j 多个实现 hibernate 类型转换异常 bean依赖问题

    最近走过的坑 slf4j 多个实现 主要是maven依赖中存在多个slf4j的实现类,在引入的依赖中排除对应的依赖就可以 <dependency> <groupId>xxxxx ...

  9. 调皮的js

    一.中文变量名 今天偶然看文章.看到js的var还可以用中文做变量名,那么我们试试,看看中文的变量名是否能打印出值呢? var 临时变量="111"; console.log(临时 ...

  10. 2019牛客暑期多校训练营(第六场)C:Palindrome Mouse(回文树+树剖)

    题意:给定字符串Str,求出回文串集合为S,问S中的(a,b)满足a是b的子串的对数. 思路:开始和题解的思路差不多,维护当前后缀的每个串的最后出现位置,但是不知道怎么套“最小回文分割”,所以想到了树 ...