该案例是基于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>