脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2.0自适应echarts图表、全屏插件screenfull

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

 更新时间：2024年08月10日 10:15:05   作者：牛仔很会忙  
这篇文章主要介绍了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>

总结

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

您可能感兴趣的文章:

相关文章

  • vue中解决异步交互数据出现延迟问题

    vue中解决异步交互数据出现延迟问题

    这篇文章主要介绍了vue中解决异步交互数据出现延迟问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue3封装request请求的完整案例

    vue3封装request请求的完整案例

    本文提供了如何将Vue3的静态页面集成到基于Vue2的若依项目中,并确保能够访问Vue2的接口,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-09-09
  • Vue Router添加全局$router属性的示例详解

    Vue Router添加全局$router属性的示例详解

    这篇文章主要介绍了Vue-Router-添加全局$router属性,在 Vue 中有一个 mixin 方法，这个方法会在每个组件创建之前被调用，我们可以在这个方法中将 VueRouter 实例挂载到 Vue 实例上，本文给大家介绍的非常详细，需要的朋友可以参考下
    2023-11-11
  • vue axios请求频繁时取消上一次请求的方法

    vue axios请求频繁时取消上一次请求的方法

    这篇文章主要介绍了vue axios请求频繁时取消上一次请求的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • elementUI中el-dropdown的command实现传递多个参数

    elementUI中el-dropdown的command实现传递多个参数

    这篇文章主要介绍了elementUI中el-dropdown的command实现传递多个参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue3实现局部页面刷新效果的示例详解

    vue3实现局部页面刷新效果的示例详解

    这篇文章主要为大家详细介绍了vue3如何采用 App.vue定义全局变量与方法并实现局部页面刷新效果,文中的示例代码讲解详细,需要的可以参考一下
    2024-01-01
  • Vue3中Teleport的用法小结

    Vue3中Teleport的用法小结

    Teleport是一个内置组件,它可以将一个组件内部的一部分模板传送到该组件的 DOM 结构外层的位置去,本文主要介绍了Vue3中Teleport用法小结,感兴趣的可以了解一下
    2025-04-04
  • vue的自定义指令传参方式

    vue的自定义指令传参方式

    这篇文章主要介绍了vue的自定义指令传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • vue3.0封装轮播图组件的步骤

    vue3.0封装轮播图组件的步骤

    这篇文章主要介绍了vue3.0封装轮播图组件的步骤，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-03-03
  • vue操作动画的记录animate.css实例代码

    vue操作动画的记录animate.css实例代码

    这篇文章主要介绍了vue操作动画的记录animate.css的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-04-04

最新评论