我们一般使用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那里引入

<script src="./static/lib/echarts.min.js"></script>

一般会把文件放到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体积的方法;

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