首页 前端知识 Echarts的使用(优化按需引入)

Echarts的使用(优化按需引入)

2024-03-11 10:03:22 前端知识 前端哥 202 845 我要收藏

文章目录

  • 前言
  • 一、Echarts安装
  • 二、Echarts引入
    • 全量引入(可优化CDN引入,减少打包构建时间)
    • 按需引入(加快资源加载,体积小)
      • 1、在常量定义文件夹或者公共代码目录新建 `echarts.ts`文件
      • 2、引入新建的 /const/echarts.ts
      • 3、然后根据官网提供的使用方法就可使用啦
  • 三、查找自己需要的组件
    • 第一种方法(查看源码)
    • 第二种方法(示例名称查找)
  • 总结


前言

  • 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内的即可,一般输入有提示,然后选中所以得即会引入了
在这里插入图片描述

在这里插入图片描述


总结

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3623.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!