大家都知道小程序文件大小不能超过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. android如何在标题栏设置返回返回图标返回到另一个activity

    在java代码中: 添加返回按钮 Objects.requireNonNull(getSupportActionBar()).setDisplayHomeAsUpEnabled(true); 进行返回 ...

  2. linux常见依赖

    1. 搭建LNMP环境用到的依赖包 yum -y install gcc gcc-c++ libxml2 libxml2-devel openssl openssl-devel curl libcur ...

  3. Spark 安装教程

    Spark 安装教程 本文原始地址:https://sitoi.cn/posts/45358.html 安装环境 Fedora 29 openjdk version "1.8.0_191&q ...

  4. linux 管道,输出重定向,后端执行

    1. | (管道) $time|data:"Y-m-d"将前部的输出,作为后部的输入:配合管道使用的命令,典型的就是grep,more find --help | grep cne ...

  5. IoT设备上的恶意软件——通过漏洞、弱密码渗透

    2018年,是 IoT 高速发展的一年,从空调到电灯,从打印机到智能电视,从路由器到监控摄像头统统都开始上网.随着5G网络的发展,我们身边的 IoT 设备会越来越多.与此同时,IoT 的安全问题也慢慢 ...

  6. Django如何与JQuery进行数据通信?

    index.html: 下面form的action属性表示当提交表单时,向何处发送表单数据 <script src="https://code.jquery.com/jquery-3. ...

  7. HDU3605 Escape(最大流判满流 + 状压)

    [题意]: 有N个人,M个星球,给N*M矩阵,(i, j)为1代表i可以到j星球,0代表不能,问是否能把所有人转移走. [思路]: N的范围为1e6,如果让每个人与星球连边一定TLE,再根据矩阵每一行 ...

  8. Educational Codeforces Round 69 D. Yet Another Subarray Problem

    Educational Codeforces Round 69 (Rated for Div. 2) D. Yet Another Subarray Problem 题目链接 题意: 求\(\sum_ ...

  9. 配置/更改vue项目中的资源路径

    打开 build/webpack.base.conf.js  ,在module.exports .resolve.alias下自定义: alias: { 'vue$': 'vue/dist/vue.e ...

  10. xargs的用法

    处理带有空格的文件名 #我们创建了3个日志文件, 且故意让文件名称中都含有空格 [roc@roclinux ~]$ ;i<;i++)); do touch "test ${i}.log ...