前言
- Apache ECharts 一个开源的 JavaScript 可视化库
- 每次在使用Echarts之后,打包后的资源总是较大,会加重页面访问的负担,那么有啥办法可以优化这种情况呢?
- 没错啦,就是按需引入,根据项目情况,引入所需要的部分组件等功能即可
一、Echarts安装
npm install echarts --S
or
yarn add echarts --S
or 淘宝源安装速度快
cnpm install echarts --save
二、Echarts引入
全量引入(可优化CDN引入,减少打包构建时间)
// 引入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
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 为对应图标配置参数信息
"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();
}
},
}
},
}
总结
原文地址:https://blog.csdn.net/weiCong_Ling/article/details/130710021
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_16927.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。