我们一般使用echarts不会全量引入,因为全量引入会导致包体积过大,首页加载白屏的时长会较长,容易被测试或者产品经理吐槽;所以我们一般会按需引入,这里有两种方式可以按需引入,我们分别说下;

第一种,是按照官网的,引入核心模块,按需引入需要用到的组件;(下方链接为官网链接,也可以按照官网链接操作)

Handbook - Apache EChartshttps://echarts.apache.org/handbook/zh/basics/import

1.1 npm引入 npm install echarts --save

1.2 按需引入需要用到的组件和模块(下面代码为例子,可以按需增减,基本上都会用到)

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入各种图表，图表后缀都为 Chart
import {  LineChart ,ScatterChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {TitleComponent,TooltipComponent,ToolboxComponent,GridComponent,LegendComponent,AxisPointerComponent,DatasetComponent,MarkLineComponent
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([LineChart,TitleComponent,TooltipComponent,ToolboxComponent,GridComponent,LegendComponent,AxisPointerComponent,DatasetComponent,CanvasRenderer,ScatterChart,MarkLineComponent
]);

按照此种方式打包之后,我发现即便压缩之后我用到echarts的那个文件1.38M,这个其实我还是不能接受的;所以继续查看官网,想要看看还有什么好的方式去减少这个体积;(这里我不想使用cdn引入,担心cdn不是很稳定);果然,官网还有一个在线定制,可以减少包体积,确切的说就是

在线定制

可自由选择所需图表、坐标系、组件进行打包下载。

注意：打包的源文件来自 jsdelivr CDN，非 Apache 官方源代码和编译产物

上面是官网的说明,我抱着试试的心态,试了一下;

ECharts 在线构建

上面为官网链接,大家可以看下;

1.图表

2.坐标系

3.组件

4.工具集

5.代码压缩

6.svg渲染

这里大致有6个选项,第一个是图表,我们只需要勾选我们需要的图表,坐标系,组件等,然后点击确定,会生成一个最小体积的echast.min.js文件,我们放入到项目中引用即可。(我的项目里面echarts文件大致500kb,比第一种方法小了很多)

我是使用的vue框架开发的,所以在index.html那里引入

一般会把文件放到static下面的lib文件夹;

补充一下,如何使用

在main.js文件里面

Vue.prototype.$echarts = window.echarts

在用到echarts的vue文件里面直接使用即可

mounted() {

let myChart = this.$echarts.init(this.$refs.container);

myChart.setOption(this.option, true);

}

网络上很多文章写了如何使用echarts,这里不做赘述;主要是讲两种减小echart体积的方法;

以上如果有不正确的地方,欢迎大家指正,谢谢

echarts如何定制使用以便于减小打包体积相关推荐

Vue 配置使用 externals 使用cdn减小打包体积 (前端优化)
Vue 配置使用 externals 使用cdn减小打包体积在 vue.config.js 中书写配置 // 引入webpackconst webpack = require('webpack') ...
Vue项目优化，减小打包体积
使用Vue-cli脚手架搭建项目Vue的话(这里说明一下,我用的是脚手架2.x),看这里 1.使用路由懒加载原理,让文件按需加载,使用的时候再加载出来在路由文件导出的对象加入下面这种格式 ex ...
vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb
解决方法 1.压缩图片应尽可能地压缩项目中的图片,或使用svg矢量图.雪碧图.webp图片(此种图片仅兼容谷歌和opera浏览器,但图片的体积更小)等小体积的图片,达到减少打包体积的目的. 2.路由 ...
NuGet学习笔记(2) 使用图形化界面打包自己的类库
上文NuGet学习笔记(1) 初识NuGet及快速安装使用说到NuGet相对于我们最重要的功能是能够搭建自己的NuGet服务器,实现公司内部类库的轻松共享更新.在安装好NuGet扩展后,我们已经能够通 ...
NuGet学习笔记(2) 使用图形化界面打包自己的类库[转]
http://www.cnblogs.com/lzrabbit/archive/2012/05/01/2477607.html 上文NuGet学习笔记(1) 初识NuGet及快速安装使用说到NuGet ...
【转】NuGet学习笔记(2)——使用图形化界面打包自己的类库
上文NuGet学习笔记(1) 初识NuGet及快速安装使用说到NuGet相对于我们最重要的功能是能够搭建自己的NuGet服务器,实现公司内部类库的轻松共享更新.在安装好NuGet扩展后,我们已经能够通 ...
html5 filereader读取文件,H5的FileReader分布读取文件应该如何使用以及其方法简介...
这次给大家带来H5的FileReader分布读取文件应该如何使用以及其方法简介,H5的FileReader分布读取文件的使用以及其方法简介的注意事项有哪些,下面就是实战案例,一起来看一下. 先介绍一下 ...
NuGet学习笔记(2)——使用图形化界面打包自己的类库
上文NuGet学习笔记(1) 初识NuGet及快速安装使用说到NuGet相对于我们最重要的功能是能够搭建自己的NuGet服务器,实现公司内部类库的轻松共享更新.在安装好NuGet扩展后,我们已经能够通 ...
04 【eCharts样式定制系列】矩形树图自定义颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...

echarts如何定制使用以便于减小打包体积

在线定制

echarts如何定制使用以便于减小打包体积相关推荐

最新文章

热门文章