大家都知道小程序文件大小不能超过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. 【开发笔记】-Ubuntu环境命令初始化

    更新apt-get命令 apt-get update 安装yum命令 首先检测是否安装 build-essential 包 sudo apt-get install build-essential 安 ...

  2. vue自定义指令VNode详解(转)

    1.自定义指令钩子函数 Vue.directive('my-directive', {bind: function () {// 做绑定的准备工作// 比如添加事件监听器,或是其他只需要执行一次的复杂 ...

  3. 从 Vue 的视角学 React（二）—— 基本语法

    基于 Vue.js 开发的时候,每个 vue 文件都是一个单独的组件,可以包含 HTML,JS,CSS 而 React 是以函数为基础,每个 function 就是一个组件.虽然 JSX 让 HTML ...

  4. JavaScript 数据类型（基本数据类型）

    JavaScript 数据类型分为简单数据类型和复杂数据类型. 简单数据类别包括 Number.String.Boolean.Undefined 和 Null 共5种. 复杂数据类型只有一个 Obje ...

  5. HTML5 新增文本标签

    一.mark 标记文本 <mark> 标签定义带有记号的文本,表示页面中需要突出显示或高亮显示的信息. 通常在引用原文的时候使用 mark 元素,目的是引起当前用户的注意. 语法格式: & ...

  6. 虚拟机-VMware小结

    1.网卡的3种模式 桥接模式:虚拟机=物理机器,连接物理网卡,虚拟ip设置物理网卡的网段和网管.可上网. NAT模式:虚拟机把物理机器当做路由器,虚拟ip网段ip自动获取.可上网. https://w ...

  7. linux设备驱动程序--gpio控制

    gpio驱动程序 上一章节linux设备驱动程序--创建设备节点章节主要介绍了linux字符设备驱动程序的框架,从这一章节开始我们讲解各种外设的控制,包括gpio,i2c,dma等等,既然是外设,那就 ...

  8. Java自动化环境搭建笔记（3）

    Java自动化环境搭建笔记(3) 自动化测试 自动化的环境已经基本搭建完成,后续可对BaseTester基类以及工具类进行扩展.下面便是持续集成的环境的搭建: Jenkins安装 git安装 源码上传 ...

  9. Linux GCC下strstr的实现以及一个简单的Kmp算法的接口

    今天做了一道题,要用判断一个字符串是否是另一个字符串的子串,于是查了一下strstr的实现. 代码如下: char *strstr(const char*s1,const char*s2) { con ...

  10. php中的闭包类

    看注释 <?php //闭包类实现匿名函数 //call方法调用 class Customer { private $firstname; private $lastname; public f ...