封装的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 = 0setTimeout(() => {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 为控制某个元素放大的按钮，传递需要放大的元素即可

<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>