echarts全屏，vue

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.value
  if (!element) {
    return
  }

  if (element.requestFullScreen) {
    // HTML W3C 提议
    element.requestFullScreen();
  } else if (element.msRequestFullscreen) {
    // IE11
    element.msRequestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    // Webkit
    element.webkitRequestFullScreen();
  } else if (element.mozRequestFullScreen) {
    // Firefox
    element.mozRequestFullScreen();
  }
  Full_screen.value = false
}
// 退出全屏
function tuier() {
  let element = charts_orders.value
  if (!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;
}

原文地址：https://blog.csdn.net/zhang20040217/article/details/144328325

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！