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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

创建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()
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

使用

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

---

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

---

screenfull全屏插件

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

在需要使用的组件，引入一下即可
import screenfull from "screenfull";

---

1. 判断是否支持全屏isEnabled —screenfull.isEnabled，返回布尔值
2. 判断是否已进入全屏模式isFullscreen—screenfull.isFullscreen，返回布尔值
3. 进入全屏request(this.$refs.refName)–screenfull.request(this.$refs.refName),里面的参数可以省略，如果省略，那么就默认整个组件进入全屏模式，如果想要某个部分进入全屏，那么给这个元素定义一个ref，将其填入参数中，即可实现
4. 退出全屏exit()—screenfull.exit()
5. 来回切换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'
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

自适应图表和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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97