大家都知道小程序文件大小不能超过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. nginx 配置跨域

    location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, ...

  2. Sass和Less的区别?

    这篇文章主要解答以下几个问题,供前端开发者的新手参考. 1.什么是Sass和Less? 2.为什么要使用CSS预处理器? 3.Sass和Less的比较 4.为什么选择使用Sass而不是Less? 什么 ...

  3. SpringBoot中执行定时任务

    一:在SpringBoot中使用定时任务相当的简单.首先,我们在启动类中加入@EnableScheduling来开启定时任务. @SpringBootApplication @EnableSchedu ...

  4. orcale的to_number方法

    转自:https://blog.csdn.net/tiantangdizhibuxiang/article/details/81034893 TO_NUMBER函数()是Oracle中常用的类型转换函 ...

  5. Python 操作 MySQL 数据库

    使用示例: import pymysql #python3 conn=pymysql.connect(host="localhost",port=3306,user="r ...

  6. BLAS快速入门

    一.简介 BLAS[Basic Linear Algebra Subprograms,基础线性代数程序集]是一个应用程序接口[API]标准,用于规范发布基础基础线性代数操作的数值库[常用于向量或矩阵计 ...

  7. windows jupyter notebook 切换默认环境

    windows jupyter notebook 切换默认环境 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog ...

  8. springboot设置访问端口和项目路径

    找到,application.properties, 添加如下配置即可 server.port=8088server.servlet.context-path=/

  9. 基于Chrominum的发行版本Microsoft Edge-Beta

    问题描述: Microsoft Edge -->Chromium Edge(未来Window的主力浏览器) 问题解决: 下载地址: https://www.microsoftedgeinside ...

  10. 使用kubeadm安装Kubernetes 1.15.3 并开启 ipvs

    一.安装前准备 机器列表 主机名 IP node-1(master) 1.1.1.101 node-2(node) 1.1.1.102 node-3(node) 1.1.1.103 设置时区 cp / ...