Echarts的使用（优化按需引入）

---

前言

• Apache ECharts 一个开源的 JavaScript 可视化库
• 每次在使用Echarts之后，打包后的资源总是较大，会加重页面访问的负担，那么有啥办法可以优化这种情况呢？
• 没错啦，就是按需引入，根据项目情况，引入所需要的部分组件等功能即可

---

一、Echarts安装

npm install echarts --S
or
yarn add echarts --S
or 淘宝源安装速度快
cnpm install echarts --save

二、Echarts引入

全量引入（可优化CDN引入，减少打包构建时间）

• 直接在main.js入口配置在vue 全局

// 引入echarts
import echarts from "@/const/echarts";
 
// 挂载到vue实例中 vue2
Vue.prototype.$echarts = echarts

// vue3
// app.config.globalProperties.$echarts = echarts

Vue2 直接使用this.$echarts
Vue3 可以在生命周期上使用this.$echarts，也可 setup 使用 getCurrentInstance 获取

import { getCurrentInstance } from 'vue'
const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts;

相比这种，咱更喜欢直接在组件内直接引入使用，不过这种全局引入可以使用CDN引入方式优化（可参考CDN引入方法）

下面咱重点说下按需引入

按需引入（加快资源加载，体积小）

1、在常量定义文件夹或者公共代码目录新建 echarts.ts文件

即在src/const/目录下新建echarts.ts文件，然后引入当前项目需要的组件等，当前文章以饼状图和柱状图为例配置如下

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";

// 引入柱状图和饼状图图表，图表后缀都为 Chart，具体为 图标名称+Chart （注意图标名称为首字母大写）
import {
    BarChart,
    PieChart
} from "echarts/charts";

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    ToolboxComponent,
    LegendComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { 
    // LabelLayout,
    // UniversalTransition
} from "echarts/features";

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    ToolboxComponent,
    LegendComponent,
    CanvasRenderer,

    BarChart,
    PieChart,
]);

// 导出
export default echarts;

如果有些不知道是否需要引入，且遗漏的，在页面上会出现以下错误，根据错误一个个配置好即可
在这里插入图片描述

2、引入新建的 /const/echarts.ts

以vite构建为例需先配置 /@

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
},

然后再在需要使用的组件或者页面直接引入

import echarts from "@/const/echarts";

3、然后根据官网提供的使用方法就可使用啦

import echarts from "@/const/echarts";
var myChart = echarts.init(html); // html为某个html节点
...
myChart.setOption(option); // option 为对应图标配置参数信息

最后页面即可显示对应配置的图标啦

• Tips 由于当前图标放大功能大部分图标都不能使用，自定义配置下

"toolbox": {
    show: true,
    feature: {
        saveAsImage: {
            title: "saveAsImage", show: true, name: props.title
        },
        myFull: {
            // 全屏
            show: true,
            title: "zoom",
            icon: `image: //${fullscreen}`, // fullscreen为放大图标，可使用import引入对应资源或者直接配置为可访问的url
            onclick: (e) => {
                html.style.setProperty("background-color", "#f6fdff");
                // 全屏查看
                if (html.requestFullScreen) {
                    // HTML W3C 提议
                    html.requestFullScreen();
                } else if (html.msRequestFullscreen) {
                    // IE11
                    html.msRequestFullScreen();
                } else if (html.webkitRequestFullScreen) {
                    // Webkit
                    html.webkitRequestFullScreen();
                } else if (html.mozRequestFullScreen) {
                    // Firefox
                    html.mozRequestFullScreen();
                }
                // 退出全屏
                if (html.requestFullScreen) {
                    document.exitFullscreen();
                } else if (html.msRequestFullScreen) {
                    document.msExitFullscreen();
                } else if (html.webkitRequestFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (html.mozRequestFullScreen) {
                    document.mozCancelFullScreen();
                }
            },
        }
    },
}

三、查找自己需要的组件

第一种方法（查看源码）

在ndoe_modules进入echarts源码
在dist目录找到以下两个字段，包含了所需要的组件名称，即是咱需要引入的组件名称了
BUITIN_COMPONENTS_MAP
BUILTIN_CHARTS_MAP

第二种方法（示例名称查找）

进入官网，查看示例

下图箭头有title提示（line）
在按需引入的文件内，输入Line会出现提示，选择echarts内的即可，一般输入有提示，然后选中所以得即会引入了

---

总结