vue 移动端echarts横屏竖屏展示

77 阅读 0 评论 51 点赞

我是靠谱客的博主美丽大白，最近开发中收集的这篇文章主要介绍vue 移动端echarts横屏竖屏展示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			@import url("css/iconfont.css");

			* {
				margin: 0;
				padding: 0;
			}

			.contents {
				width: 100%;
				height: 100vh;
				background: #fff;
			}

			.content {
				width: 100%;
				height: 100vh;
				background: #ededed;
			}

			.echarts {
				position: relative;
			}

			.landscape_echarts {
				transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
				-o-transform: rotate(90deg);
			}

			.vertical_echarts {
				width: 100%;
				background-color: #fff;
			}

			.landscape {
				width: 100vh;
				height: 100vw;
			}

			.vertical {
				width: 100%;
				height: 5rem;
			}

			.title {
				display: flex;
				align-items: center;
				/* transform: translateY(.5rem); */
				position: absolute;
				top: 0;
				justify-content: space-between;
				z-index: 999;
			}

			.landscape_title {
				width: 100vh;
				height: 1rem;
			}

			.vertical_title {
				width: 100%;
				height: 1rem;
			}

			.title h5 {
				text-indent: .3rem;
				font-size: .4rem;
			}

			.title span {
				display: block;
				width: .4rem;
				height: .4rem;
				font-size: .4rem;
				margin-right: .4rem;
			}
		</style>
	</head>
	<body>
		<div id='app' :class="!isFull?'content':'contents'">
			<div :class="['echarts', !isColumnar?'vertical_echarts':'landscape_echarts']">
				<div :class="['title',!isColumnar?'vertical_title':'landscape_title']">
					<h5>柱状图</h5>
					<span :class="['iconfont', !isColumnar?'icon-hengping':'icon-shuping' ]" @click='columnar()'></span>
				</div>
				<div id="main" :class="!isColumnar?'vertical':'landscape'"></div>
			</div>
		</div>
	</body>
</html>
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data() {
			return {
				myChart: null, // 图表需要字段
				isFull: false,
				isColumnar: false,
				option: null,
			}
		},
		methods: {
			echarts() {
				// 基于准备好的dom，初始化echarts实例
				this.myChart = echarts.init(document.getElementById('main'));

				// 指定图表的配置项和数据
				this.option = {
					dataZoom: [{
						type: 'inside'
					}],
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "衬衫", "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋",
							"袜子", "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"
						]
					},
					yAxis: {

					},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20, 5, 5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(this.option);
			},
			resize() {
				this.myChart.resize() // 窗口大小发生变化的时候重置
			},
			columnar() {
				this.isColumnar = !this.isColumnar;
				this.isFull = !this.isFull;
			}

		},
		destroyed() {
			// 移除监听，echarts自适应
			window.removeEventListener('resize', this.resize)
		},
		mounted() {
			// echarts图表自适应
			window.addEventListener('resize', this.resize); // 添加监听
			this.echarts();
		},
		watch: {
			isColumnar: {
				handler() {
					//监听当屏幕发生转变时，重新渲染echarts
					if (this.myChart) {
						this.$nextTick(() => this.resize())
						this.myChart.setOption(this.option, true);
					}
				}
			},
		}
	})
</script>