脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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>

总结

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

您可能感兴趣的文章:

相关文章

  • Vue2.0 组件传值通讯的示例代码

    Vue2.0 组件传值通讯的示例代码

    本篇文章主要介绍了Vue2.0 组件传值通讯的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue中.native修饰符的作用及说明

    Vue中.native修饰符的作用及说明

    这篇文章主要介绍了Vue中.native修饰符的作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue3兄弟组件传值之mitt的超详细讲解

    Vue3兄弟组件传值之mitt的超详细讲解

    之前只是浅显的使用插件进行vue开发展示,最近深入的研究了下,下面这篇文章主要给大家介绍了关于Vue3兄弟组件传值之mitt的超详细讲解,需要的朋友可以参考下
    2022-06-06
  • Vue中如何实现字符串换行

    Vue中如何实现字符串换行

    这篇文章主要介绍了Vue中如何实现字符串换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue.js展示AJAX数据简单示例讲解

    Vue.js展示AJAX数据简单示例讲解

    当通过AJAX方式取回数据后，使用vue.js可以完美地按一定逻辑在页面上的展示数据，代码简单、优美、自然，而且便于与在用的页面框架集成，本文给大家介绍Vue.js展示AJAX数据简单示例
    2017-03-03
  • vue实现路由鉴权和不同用户登录

    vue实现路由鉴权和不同用户登录

    这篇文章主要为大家详细介绍了vue中实现路由鉴权和不同用户登录的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • 浅谈vue的props，data，computed变化对组件更新的影响

    浅谈vue的props，data，computed变化对组件更新的影响

    本篇文章主要介绍了浅谈vue的props，data，computed变化对组件更新的影响，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Ant Design Vue Table组件合并单元格方式

    Ant Design Vue Table组件合并单元格方式

    这篇文章主要介绍了Ant Design Vue Table组件合并单元格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • vue-cli3+echarts实现渐变色仪表盘组件封装

    vue-cli3+echarts实现渐变色仪表盘组件封装

    这篇文章主要为大家详细介绍了vue-cli3+echarts实现渐变色仪表盘组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue项目中使用bpmn为节点添加颜色的方法

    vue项目中使用bpmn为节点添加颜色的方法

    这篇文章主要介绍了vue项目中使用bpmn为节点添加颜色的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04

最新评论