大家都知道小程序文件大小不能超过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跳转动画、淡出淡入、滑出滑入、自定义退出进入

    Activity跳转动画.淡入淡出.滑入滑出.自定义退出进入 前言: 系统中有两个定义好的Activity跳转动画:fade_in.fade_out.slide_in_left.slide_out_r ...

  2. Sping注解开发

    基本注解 @Configuration 作用: 标记在类上表示是一个配置类(相当于一个配置类) @Bean 作用: 在容器中放一个bean相当于xml文件里的bean标签 @Configuration ...

  3. windows自动化-脚本案例

    ; Script Start - Add your code below here Run("D:\Navicat Premium\navicat.exe") Sleep(1000 ...

  4. Mysql 控制结构初识

    Mysql 流程控制 认识 从我目前所接触的编程语言,C, R, VB, Python, Javascript...,来看, 无非就是变量, 表达式, 流程控制(顺序, 分支, 循环), 封装了一些更 ...

  5. Ubuntu中wine程序安装windows软件中文乱码如何解决

    1.安装wine sudo apt install wine 2.安装中文程序方法 下载exe文件 在命令行执行 wine 文件名.exe 3.中文乱码原因分析 查看/home/用户名/.wine/d ...

  6. windows10安装redis

    下载 github上下载最新(或者你需要的版本)的redis安装包,下载地址如下: https://github.com/microsoftarchive/redis/releases 打开点击版本号 ...

  7. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  8. php抽象工厂模式(Abstract factory pattern)

    练代码 <?php interface Button { public function render(); } interface GUIFactory { public function c ...

  9. Elasticsearch 待办

    日期格式:yyyy-MM-dd,改为 yyyy-MM-dd HH:mm:ss.SSS:实体类路径:https://github.com/cag2050/spring_boot_elasticsearc ...

  10. Linux 定时重启 Tomcat、重启Keepalived

    1.在 tomcat 目录新建一个.sh 文件: vi restartTomcat.sh 2.输入内容: #!/bin/bash# author: Linnuo # date: -- # Filena ...