大家都知道小程序文件大小不能超过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. Spring中基于注解的IOC(二):案例与总结

    2.Spring的IOC案例 创建maven项目 导入依赖 pom.xml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ...

  2. 响应式js库——rxjs

    原文地址:https://rxjs.dev/guide/overview 简介 RxJS 是组合异步以及基于事件的使用可观察者序列的程序类库.它提供一个核心类型,Observable,附属类型(Obs ...

  3. fastjson 将json字符串转化成List<Map<String, Object>>

    亲测可行,如下: JSON.parseObject(jsonstr, new TypeReference<List<Map<String, Object>>>() ...

  4. 【干货】gitlab-11.10.4版本汉化

    目录 1.YUM安装gitlab-11.10.4 2.gitlab汉化技能 1.YUM安装gitlab-11.10.4 下载gitlab-ce的repo [root@localhost ~]# cur ...

  5. MFC For循环中实时更新显示Edit内容

    在for(){}循环中如果有处理函数,然后需要显示的时候,简单的UpdateData(false);是不行的: for (int i=0;i<10000;i++) { m_nT1.Format( ...

  6. 【转】如何把变量或者数组定义到SDRAM及任意位置

    我们开发软件的时候,经常会遇到到一个问题,就是内存不够,这个时候就纠结了,怎么办,有两种方法,第一种是扩展内存,外加SRAM或者SDRAM:第二种应该就是优化代码,也就是通常所说的把数组大小减一减,代 ...

  7. 转载_fread函数详解

    fread函数详解 函数原型: size_t   fread(   void   *buffer,   size_t   size,   size_t   count,   FILE   *strea ...

  8. C++学习(8)—— 封装

    C++面向对象的三大特性:封装.继承.多态 C++认为万事万物都可以为对象,对象上有其属性和行为 具有相同性质的对象,可以抽象为类   1. 封装的意义 封装是C++面向对象三大特性之一 封装的意义: ...

  9. The 2016 ACM-ICPC Asia China-Final D. Ice Cream Tower 二分 + 贪心

    题目大意: 对于给出的n个冰激凌球的大小,满足下面的球的大小是上一个的至少2倍,对于给出的k(由k的冰激凌球才能算作一个冰激凌塔),问n个冰激凌球可以最多堆出多少个高度为k的冰激凌塔 题目分析: 对于 ...

  10. HihoCoder - 1652:三角形面积和2(扫描线)

    题意:给定X轴上的一些三角形,求面积并. 每个三角形的给出形式是Li,Ri,Xi,Yi,表示三个顶点分别是(Li,0):(Ri,0):(Xi,Yi),且满足Li<=Xi<=Ri: 思路:我 ...