首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue2.0自适应echarts图表、全屏插件screenfull

vue2.0中自适应echarts图表、全屏插件screenfull的使用

2024-08-10 10:15:06 作者：牛仔很会忙

这篇文章主要介绍了vue2.0中自适应echarts图表、全屏插件screenfull的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

该案例是基于vue2.0脚手架，使用了elementUI、eCharts、screenfull插件

自适应echarts图表

第一：自适应的echarts图表，要配合着能够自适应的盒子来使用，首先就是盒子要能够跟随屏幕大小改变而改变，比如我们使用弹性盒子就可以实现。
第二：要想实现自适应的echarts图表，就是当窗口发生改变时，echarts图表的尺寸重新定义一下，使用resize的方法就可以实现。

总体布局

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

创建echarts图表的方法

initChart(e){
            let myChart = echarts.init(document.getElementById("chartBox"))
            myChart.setOption({
                title:{
                    text:"自适应图表"
                },
                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(){  // 当屏幕尺寸发生变化时，图表尺寸同时发生改变
                myChart.resize()
            }
        }

使用

在mounted中调用这个方法，并且将数据传入进去，那么就可以实现自适应echarts图表了

后面会有整个的一个案例，可以后面一起复制过去

screenfull全屏插件

首先在项目中安装这个插件，使用npm指令

npm install screenfull -S

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

import screenfull from "screenfull";

判断是否支持全屏isEnabled —screenfull.isEnabled，返回布尔值
判断是否已进入全屏模式isFullscreen—screenfull.isFullscreen，返回布尔值
进入全屏request(this.$refs.refName)–screenfull.request(this.$refs.refName),里面的参数可以省略，如果省略，那么就默认整个组件进入全屏模式，如果想要某个部分进入全屏，那么给这个元素定义一个ref，将其填入参数中，即可实现
退出全屏exit()—screenfull.exit()
来回切换toggle(this.$refs.refName)–screenfull.toggle(this.$refs.refName)，切换全屏和非全屏，如果需要单独切换某个部分，那么里面可以加入参数

使用的方法

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

自适应图表和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:"自适应图表"
                },
                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(){  // 当屏幕尺寸发生变化时，图表尺寸同时发生改变
                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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。