一. 概述

项目环境：vue + vuex + echarts
实现图表的横屏效果。

二. 效果图

横屏效果

三. 方案

废弃方案：

1. 在图表的外层添加一个div，添加css旋转属性，宽/高=100%，
2. 设置图表的高=屏幕高，图表的高=屏幕宽

废弃方案的结果：效果同样能达到横屏效果，但是提示文本有问题，有些区域点击无法弹出提示文本，pass了这个写法。
也琢磨了一下为什么部分区域点击无效呢，由于图表外层div旋转了，没有覆盖整个屏幕，超出图表区域，点击无效。

有效方案：

1. 图表的配置项设置成类似横屏效果的就可以了。
2. 给图表标题，全屏打开/关闭按钮所在的区域设置旋转，动态调控旋转后图表的位置。
3. echarts图例没办法旋转，如果需要图例的话，需要自己封装，参考第二步。

注意：步骤二中旋转后位置的计算，
顶部距离marginTop = 屏幕的高/2 - 需要旋转元素的高/2，
左侧距离marginLeft = 屏幕的宽 - 屏幕的高/2- 需要旋转元素的高/2，

步骤一：

// 设置提示旋转
 this.barFullOption.tooltip.extraCssText = 'transform: rotate(90deg)'
 // 横屏后y轴配置
 this.barFullOption.xAxis = {
   type: 'value',
   position: 'top',
   nameRotate: -90,
   axisLabel: {
     rotate: 90
   },
   scale: true,
   data: [],
   nameTextStyle: {
     color: '#333'
   },
   splitLine: {
     lineStyle: {
       // 使用深浅的间隔色
       color: ['#ddd'],
       type: 'dashed'
     }
   }
 }
 // 横屏后x轴样式配置
 this.barFullOption.yAxis = {
   type: 'category',
   inverse: true,
   axisLabel: {
     rotate: -90,
     margin: 15
   },
   data: []
 }
 this.barFullOption.yAxis.data = xData

步骤二：

 <div class="chart-rorate"
   :style="{width:fullHeight,marginTop:topSpace + 'px',marginLeft:leftSpace+'px'}">
    <p class="chart-title">
        {{ title }}
        <img
            @click="fullScreenOpenOrClose(false)"
            class="screen-full-img"
            :src="require('@/assets/img/icon_close.png')">
    </p>
</div>

 computed: {
    fullWidth () { // 屏幕宽
      return window.innerWidth + 'px'
    },
    fullHeight () { // 屏幕高
      return window.innerHeight + 'px'
    },
    topSpace () { // 旋转后距离顶部距离
      return Math.round(Number(replaceStr(this.fullHeight, 'px', '')) / 2) - Math.round(57 / 2)
    },
    leftSpace () { //旋转后距离左侧距离
      return Number(replaceStr(this.fullWidth, 'px', '')) - Math.round(Number(replaceStr(this.fullHeight, 'px', '')) / 2) - Math.round(57 / 2)
    }
  },

四. 代码地址

git@github.com:xuweixiao/vue-calendar.git