Echarts图表移动端手机横屏展示

Echarts手机端横屏展示原理（uni-app）

1、将控制X轴、Y轴的配置内容相互调换，并配置好相关的旋转、展示的角度。
2、将Y轴设置反向坐标轴，图表的提示信息也进线相应角度的旋转。

废弃方案
直接将原来的图表组件外层套一层div，利用css的transform: rotate(90deg);进行一个旋转，达到横屏展示的目的。
不足情况：数据量少时可以进行正常展示，如果X轴数据量多时，echarts的滚动条生效位置会改变，影响用户使用。

• 实际案例需求：
• 在手机端图表需要点击横屏展示；
• X轴的数据刻度分割很多，是按照时间线每5分钟进行一次分割，竖屏展示不开；
• 图表为堆叠的折现图，并可以在手机端利用滚动条、双指缩放进行放大缩小的展示；

echarts版本使用注意事项

1. 移动端echarts图表展示推荐使用echarts 3.8.x版本。原因，高版本的echarts的dataZoom(滚动条)配置不能滚动。

先进行效果展示（手机端横屏之后的效果）

<template>
	<view class="content">
		<view id="main"></view>
	</view>
</template>

<script>
import echarts from '../../components/echarts/echarts.min.js'; //引入echarts.js 当前使用的版本时3.8版本
export default {
	data() {
		return {
			// 图表配置内容
			option: {
				// 提示框信息配置项
				tooltip: {
					trigger: 'axis',
					extraCssText: 'transform: rotate(90deg)' //横屏展示需要将提示框也旋转90°，使显示正常
				},
				// 控制滚动条的配置项，这个dataZoom组件，默认控制x轴。
				dataZoom: [{
					/* 
					inside为内置型数据区域缩放组件：
							PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同）
							移动端：在移动端触屏上，支持两指滑动缩放。 
					slider为滑动条型数据区域缩放组件：
							滑动条型数据区域缩放组件提供了数据缩略图显示，缩放，刷选，拖拽，点击快速定位等数据筛选的功能
					 */
					type: 'slider',
					start: 10, // 左边在 10% 的位置。
					end: 60, // 右边在 60% 的位置。
					zoomOnMouseWheel: true, // 设置鼠标滚轮可以触发图表缩放
					moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
					orient: 'vertical', // 控制横纵屏的滚动条位置
					left: 'left' // 调试滚动条的具体位置
					}],
				xAxis: {
					type: 'value', //数据
					position: 'top', //x 轴的位置【top bottom】
					nameRotate: -90, //坐标轴名字旋转，角度值。
					axisLabel: {
						//坐标轴刻度标签的相关设置。
						rotate: 90 //刻度标签旋转的角度，
					},
					scale: true //是否是脱离 0 值比例
				},
				yAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					inverse: 'true', //是否是反向坐标轴。
					axisLabel: {
						rotate: -90
					}
				},
				series: [
					{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						smooth: true //是否平滑曲线显示
					}
				]
			}
		};
	},
	// 将echarts的配置信息在mounted钩子函数中初始化，不然会报错，因为要等页面渲染完成在获取dom元素
	mounted() {
		echarts.init(document.getElementById('main')).setOption(this.option);
	}
};
</script>

<style>
	/* 适配满屏需要将外层盒子设置100% */
.content {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	bottom: 0px;
}
#main {
	width: 100%;
	height: calc(100% - 88rpx);
}
</style>

页面数据更改后，重新渲染图表方法：

setEchartsOptions() {
			var myChart = echarts.init(document.getElementById('main'));
			myChart.setOption(this.option, true);
			myChart.resize(); //重绘,动态获取options时不会出现渲染异常
}