vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用

更新時(shí)間：2024年08月10日 10:15:05 作者：牛仔很會(huì)忙

這篇文章主要介紹了vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

自適應(yīng)echarts圖表

第一：自適應(yīng)的echarts圖表，要配合著能夠自適應(yīng)的盒子來(lái)使用，首先就是盒子要能夠跟隨屏幕大小改變而改變，比如我們使用彈性盒子就可以實(shí)現(xiàn)。
第二：要想實(shí)現(xiàn)自適應(yīng)的echarts圖表，就是當(dāng)窗口發(fā)生改變時(shí)，echarts圖表的尺寸重新定義一下，使用resize的方法就可以實(shí)現(xiàn)。

總體布局

<template>
    <div class="aboutPage">
        <div class="chartBoxWrap" ref="chartBox">
            <div id="chartBox"></div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.chartBoxWrap {
    display: flex;
    height: 600px;

    #chartBox {
        flex: 1;
        background-color: #f0faf0;
    }
}
</style>

創(chuàng)建echarts圖表的方法

initChart(e){
            let myChart = echarts.init(document.getElementById("chartBox"))
            myChart.setOption({
                title:{
                    text:"自適應(yīng)圖表"
                },
                legend:{
                    show:true,
                    icon:'circle'
                },
                xAxis:{
                    type:'category',
                    name:"月份",
                    data:e.xData
                },
                yAxis:{
                    type:'value',
                    axisLine:{
                        show:true
                    },
                    axisTick:{
                        show:true
                    }
                },
                series:[
                    {
                        type:"line",
                        smooth:"true",
                        data:e.data
                    }
                ]
            })
            window.onresize=function(){  // 當(dāng)屏幕尺寸發(fā)生變化時(shí)，圖表尺寸同時(shí)發(fā)生改變
                myChart.resize()
            }
        }

使用

在mounted中調(diào)用這個(gè)方法，并且將數(shù)據(jù)傳入進(jìn)去，那么就可以實(shí)現(xiàn)自適應(yīng)echarts圖表了

后面會(huì)有整個(gè)的一個(gè)案例，可以后面一起復(fù)制過去

screenfull全屏插件

首先在項(xiàng)目中安裝這個(gè)插件，使用npm指令

npm install screenfull -S

在需要使用的組件，引入一下即可

import screenfull from "screenfull";

判斷是否支持全屏isEnabled —screenfull.isEnabled，返回布爾值
判斷是否已進(jìn)入全屏模式isFullscreen—screenfull.isFullscreen，返回布爾值
進(jìn)入全屏request(this.$refs.refName)–screenfull.request(this.$refs.refName),里面的參數(shù)可以省略，如果省略，那么就默認(rèn)整個(gè)組件進(jìn)入全屏模式，如果想要某個(gè)部分進(jìn)入全屏，那么給這個(gè)元素定義一個(gè)ref，將其填入?yún)?shù)中，即可實(shí)現(xiàn)
退出全屏exit()—screenfull.exit()
來(lái)回切換toggle(this.$refs.refName)–screenfull.toggle(this.$refs.refName)，切換全屏和非全屏，如果需要單獨(dú)切換某個(gè)部分，那么里面可以加入?yún)?shù)

使用的方法

toScreenfull(){
            console.log(screenfull.isEnabled)
            if(screenfull.isEnabled){   // 判斷是否支持全屏
            screenfull.toggle(this.$refs.chartBox);   // 使用toggle方法
            }else{
                this.$message.error('不支持全屏')
            }
            if(screenfull.isFullscreen){  // 判斷是否為全屏，如果是false就是沒有全屏
                this.text="全屏"
                this.iconType='el-icon-zoom-in'
            }else{
                this.text="退出全屏"
                this.iconType='el-icon-zoom-out'
            }
        }

自適應(yīng)圖表和screenfull案例

<template>
    <div class="aboutPage">
        <div class="chartBoxWrap" ref="chartBox">
            <el-button type="primary" :icon="iconType" @click="toScreenfull">
                {{text}}
            </el-button>
            <div id="chartBox"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import screenfull from "screenfull";

export default {
    data() {
        return {
            text:'全屏',
            iconType:'el-icon-zoom-in',
            chartData:{
                xData:["一月份","二月份","三月份","四月份"],
                data:[50,24,86,89]
            }
        }
    },
    methods: {
        toScreenfull(){
            console.log(screenfull.isEnabled)
            if(screenfull.isEnabled){   // 判斷是否支持全屏
            screenfull.toggle(this.$refs.chartBox);   // 使用toggle方法
            }else{
                this.$message.error('不支持全屏')
            }
            if(screenfull.isFullscreen){  // 判斷是否為全屏，如果是false就是沒有全屏
                this.text="全屏"
                this.iconType='el-icon-zoom-in'
            }else{
                this.text="退出全屏"
                this.iconType='el-icon-zoom-out'
            }
        },
        initChart(e){
            let myChart = echarts.init(document.getElementById("chartBox"))
            myChart.setOption({
                title:{
                    text:"自適應(yīng)圖表"
                },
                legend:{
                    show:true,
                    icon:'circle'
                },
                xAxis:{
                    type:'category',
                    name:"月份",
                    data:e.xData
                },
                yAxis:{
                    type:'value',
                    axisLine:{
                        show:true
                    },
                    axisTick:{
                        show:true
                    }
                },
                series:[
                    {
                        type:"line",
                        smooth:"true",
                        data:e.data
                    }
                ]
            })
            window.onresize=function(){  // 當(dāng)屏幕尺寸發(fā)生變化時(shí)，圖表尺寸同時(shí)發(fā)生改變
                myChart.resize()
            }
        }
    },
    mounted() {
        this.$nextTick(()=>{
            this.initChart(this.chartData)
        })
    },
}
</script>

<style lang="scss" scoped>
.chartBoxWrap {
    display: flex;
    height: 600px;

    #chartBox {
        flex: 1;
        background-color: #f0faf0;
    }
}
</style>