每天学习一点点,每天记录一点点、每天进步一点点——————《伊索寓言》
效果图
代码
<template>
<div class="outWrap">
<div
:class="
isHorizontalScreen ? 'horizontalEchartsFather' : 'verticalEchartsFather'
"
>
<!-- 全屏进入退出按钮 -->
<h3
@click="switchFn"
:class="isHorizontalScreen ? 'horizontalIcon' : 'verticalIcon'"
>
{{ isHorizontalScreen ? "退出横屏" : "进入横屏" }}
</h3>
<!-- echarts部分 -->
<div
id="echartsId"
:class="isHorizontalScreen ? 'horizontal' : 'vertical'"
></div>
</div>
</div>
</template>
<script>
import Echarts from "echarts";
export default {
data() {
return {
myChart: null, // echarts的实例
isFull: false, // 是否全屏
isHorizontalScreen: false, // 是否是横向屏幕,默认false,默认是竖向屏幕
option: {
dataZoom: [
{
type: "inside",
},
],
xAxis: {
data: [
"4.1",
"4.2",
"4.3",
"4.4",
"4.5",
"4.6",
"4.7",
"4.8",
"4.9",
"4.10",
"4.11",
"4.12",
"4.13",
"4.14",
"4.15",
"4.16",
"4.17",
],
},
yAxis: {},
series: {
name: "股价",
type: "line",
data: [
51, 61, 71, 27, 19, 20, 15, 8, 21, 2, 19, 66, 88, 4, 21, 77, 6,
],
itemStyle: {
normal: {
color: "green", //改变折线点的颜色
lineStyle: {
color: "green", //改变折线颜色
},
},
},
},
},
};
},
watch: {
// 当横屏进入退出要重绘一下echarts
isHorizontalScreen(newVal) {
console.log("横屏切换", newVal);
this.myChart.setOption(this.option, true);
this.$nextTick(() => {
this.resize();
});
},
},
mounted() {
// 添加自适应监听
window.addEventListener("resize", this.resize);
this.echarts();
},
methods: {
// 初始化
echarts() {
this.myChart = Echarts.init(document.querySelector("#echartsId"));
this.myChart.setOption(this.option);
},
resize() {
this.myChart.resize(); // 窗口大小发生变化的时候重置
},
// 切换 水平垂直~全屏默认屏
switchFn() {
this.isHorizontalScreen = !this.isHorizontalScreen;
this.isFull = !this.isFull;
},
},
// 移除自适应监听
beforeDestroy() {
window.removeEventListener("resize", this.resize);
},
};
</script>
<style lang="less" scoped>
// 最外层满屏
.outWrap {
width: 100%;
height: 100vh;
background: #e9e9e9;
}
/* 用于给竖向echarts画布定位用 */
.verticalEchartsFather {
width: 100%;
height: 50%;
background-color: #fff;
position: relative;
}
// 竖向的正常百分比即可
.vertical {
width: 100%;
height: 100%;
}
/* 用于给横向echarts画布定位用,横向就旋转90度即可 */
.horizontalEchartsFather {
transform: rotate(90deg);
position: relative;
width: 100%;
}
// 因为横向了,所以颠倒一下
.horizontal {
width: 100vh;
height: 100vw;
}
/* 进入横屏和退出横屏两套样式,定位在不同的位置 */
.verticalIcon {
position: absolute;
top: 2px;
right: 6px;
z-index: 999;
user-select: none;
}
.horizontalIcon {
position: absolute;
top: 2px;
left: 6px;
z-index: 999;
user-select: none;
}
</style>
总结
横屏的时候,即为竖屏旋转90度,加上监听控制,然后改一下样式,最后别忘了重绘一下Echarts
A good memory is better than a bad pen. Write it down 😀😀😀
If this article helped you, don't forget to jump to my GitHub and give a star ⭐⭐⭐ Thanks a lot...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。