封装了一个echarts图全屏放大的功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了封装了一个echarts图全屏放大的功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

注意：1、没有监听屏幕的大小，我感觉没必要
2、如果是监听屏幕大小变化，直接echarts.resize()就行了。

封装的js文件

import * as echarts from 'echarts'
/**
 * el:目标渲染元素
 * option：echarts配置项
 * resize：是否需要全屏功能
 */

export const initEcharts = (el, option, resize = false) => {
    const chartDom = el;
    const myChart = echarts.init(chartDom);
    let num = 0
    //全屏放大功能，增加全屏按钮，点击全屏按钮(自己添加)传递resize参数=true就行
    if (resize) {
        myChart.resize()
        const resizeObserver = new ResizeObserver(entries => {
            num++
            if (num >= 2) {
                myChart.resize()
                if (!document.webkitIsFullScreen) {
                    num = 0
                    setTimeout(() => {
                        resizeObserver.disconnect()
                    }, 50)
                }
            }
        });
        resizeObserver.observe(el)
    }
    myChart.clear()
    myChart.setOption(option);
}

export const screenFull = e => {
    if (e.requestFullscreen) {
        e.requestFullscreen();
    } else if (e.mozRequestFullScreen) {
        e.mozRequestFullScreen();
    } else if (e.webkitRequestFullscreen) {
        e.webkitRequestFullscreen();
    } else if (e.msRequestFullscreen) {
        e.msRequestFullscreen();
    }
};

使用

1、initEcharts接收三个参数，参一为echarts渲染的目标元素
参二为echarts渲染的配置项
参三控制是否需要全屏放大的相关功能

2、screenFull 为控制某个元素放大的按钮，传递需要放大的元素即可文章来源地址https://www.toymoban.com/news/detail-424905.html

<template>
	<div class="main-pie">
		<button @click="fn">点击此按钮进入全屏（根据需求可以换成icon的形式，搭配hover）</button>
		<div class="main-echarts" ref="main-echarts"></div>
	</div>
</template>
<script>
	import { initEcharts, screenFull } from "@/utils/initEcharts.js";
	export default {
		data() {
			return {
				option2: {
					tooltip: {
						trigger: "item"
					},
					legend: {
						type: "scroll",
						orient: "vertical",
						right: "center",
						top: 20,
						bottom: 20
					},
					series: [
						{
							type: "pie",
							radius: "90%",
							left: "50%",
							itemStyle: {
								borderColor: "#fff",
								borderWidth: 2
							},
							data: [
								{
									value: 1548,
									name: "CityE"
								},
								{ value: 735, name: "基础治疗" },
								{ value: 510, name: "挂号" },
								{ value: 434, name: "正畸形" },
								{ value: 335, name: "修复类" },
								{ value: 335, name: "种植类" }
							]
						},
						{
							itemStyle: {
								borderColor: "#fff",
								borderWidth: 2
							},
							type: "pie",
							radius: "90%",
							right: "50%",

							data: [
								{
									value: 1548,
									name: "CityE"
								},
								{ value: 735, name: "基础治疗" },
								{ value: 510, name: "挂号" },
								{ value: 434, name: "正畸形" },
								{ value: 335, name: "修复类" },
								{ value: 335, name: "种植类" }
							]
						}
					]
				}
			};
		},
		props: {},
		watch: {},
		mounted() {
			this.initMainEcharts();
		},
		created() {},
		methods: {
			initMainEcharts(resize = false) {
				let el = this.$refs["main-echarts"];
				initEcharts(el, this.option2, resize);
			},
			fn() {
				screenFull(this.$refs["main-echarts"]);
				//全屏放大，需要等待容器缩放完成后，重绘echarts图像
				setTimeout(() => {
					this.initMainEcharts(true);
				}, 50);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.main-pie {
		li {
			list-style: none;
			display: flex;
			align-items: center;
			padding: 6px;
			cursor: pointer;
			white-space: nowrap;
			> div {
				width: 10%;
				height: 10px;
				margin-right: 10px;
			}
		}
		.title-echarts {
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			p {
				text-align: center;
				width: 42%;
				font-size: 18px;
			}
		}
		width: 100%;
		> .main-echarts {
			background-color: white;
			height: calc(100vh - 270px);
		}

		.main-echarts {
			width: 100%;
		}

		p {
			padding: 0;
			margin: 0;
			color: #000000;
		}
	}
</style>