echarts实现全屏并且不失真，全屏图片需要自己换

html：

  <!-- 图表全屏盒子 -->        
<div style="position: relative;" ref="charts_orders"><!-- 图表 --><div class="chart_box" v-show="show_orders" ref="charts" style="width: 100%; height: 100%;"></div><div class="top_img"><!-- 全屏按钮 --><img v-if="Full_screen" @click="Full_screener_orders" src="../../assets/img/quan.png" alt=""><img v-if="!Full_screen" @click="tuier" src="../../assets/img/quan.png" alt=""></div>
</div>

js：

import * as echarts from "echarts";
import { ref } from "vue";
// 订单统计
const charts = ref();
// 盒子
const charts_orders = ref();
// 全屏状态
const Full_screen = ref(true);
const orders_list = () => {const myCharts = echarts.init(charts.value);let option = {title: {text: '订单统计',left: '3%',top: '5%'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {data: ['总订单', '未付款', '已付款', '已完成', '未完成'],orient: 'vertical',left: '25%',top: '5%'},series: [{name: '订单统计',type: 'pie',radius: ['40%', '90%'],left: '35%',avoidLabelOverlap: false,label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: 15,fontWeight: 'bold'}},labelLine: {show: false},//你自己的数据data:  [{ value: 1048, name: '总订单' },{ value: 735, name: '未付款' },{ value: 580, name: '已付款' },{ value: 484, name: '已完成' },{ value: 300, name: '未完成' },{ value: 300, name: '已取消' }]}]};myCharts.setOption(option);myCharts.resize();
};  
// 全屏查看
function Full_screener_orders() {let element = charts_orders.valueif (!element) {return}if (element.requestFullScreen) {// HTML W3C 提议element.requestFullScreen();} else if (element.msRequestFullscreen) {// IE11element.msRequestFullScreen();} else if (element.webkitRequestFullScreen) {// Webkitelement.webkitRequestFullScreen();} else if (element.mozRequestFullScreen) {// Firefoxelement.mozRequestFullScreen();}Full_screen.value = false
}
// 退出全屏
function tuier() {let element = charts_orders.valueif (!element) {return}// 退出全屏if (element.requestFullScreen) {document.exitFullscreen();} else if (element.msRequestFullScreen) {document.msExitFullscreen();} else if (element.webkitRequestFullScreen) {document.webkitCancelFullScreen();} else if (element.mozRequestFullScreen) {document.mozCancelFullScreen();}Full_screen.value = true;
}// 当窗口大小变化时自动调整图表尺寸
window.onresize = function () {// 图表orders_list();
};

css：

.echarts_zhong {width: 34.5%;height: 100%;display: flex;justify-content: space-between;flex-direction: column;
}.echarts_zhong>div {width: 100%;height: 48%;border-radius: 8px;border: 1px solid #eaeaea;
}/*<!-- 图表盒子 -->*/
.chart_box {border: 1px solid #eaeaea;border-radius: 8px;background-color: white;display: flex;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);position: relative;align-items: center;justify-content: center;
}.top_img>img {width: 20px;height: 20px;
}.top_img>div {width: 1px;height: 80%;background-color: #eaeaea;
}