小程序图表mpvue-echarts横屏展示

932 阅读1分钟

图表需要横屏展示,如下图

image.png

尝试方式:

第一种: 旋转外部div, 点击x轴tooltip的事件出现问题。

第二种: 屏幕旋转,图表旋转没有问题,但其他元素也都横向摆放,不符合实际需求。

最终实现方式

1 互换x轴和y轴数据,将x轴标签和y轴标签进行旋转

{
  xAxis: {
    name: this.xAxisName,
    nameRotate: -90,
    type: 'value',
    position: 'top',
    axisLabel: {
      rotate: 90
    },
    boundaryGap: [0, '10%'] // 设置最大值延伸,防止markPoint显示超出图表范围而被遮盖
  },
  yAxis: {
    type: 'category',
    data: this.data.map(item => item.name),
    axisLabel: {
      formatter: (val) => {
        if (this.lineType === 'time') {
          return val
        } else {
          return val.length > 5 ? val.substring(0, 5) + '...' : val
        }
      },
      rotate: -90
    },
    inverse: 'true'
  }
}

2 dataZoom设置方向为垂直方向

{
  dataZoom: [
    {
      type: 'inside',
      startValue: 0,
      endValue: this.size - 1,
      orient: 'vertical',
      filterMode: 'empty'
    }
  ]
}

4 原本横向滑动图表,可查看下一页数据,但是横向展示后,滑动操作与页面滚动操作冲突,所以加了两个按钮去控制翻页

image.png

点击按钮时通过更改dataZoom范围来实现切换数据效果,

updateDataZoom(range) {
    console.log('数据显示范围', range)
    const option = this.options
    option.dataZoom[0].startValue = range[0]
    option.dataZoom[0].endValue = range[1]
    this.chart.setOption(option)
}

5 tooltip横向展示,根据官方文档设置浮层样式,但是在小程序中不生效

image.png

最终使用了cover-view自定义tooltip来实现tooltip横向展示效果

<div class="echarts">
        <mpvue-echarts
          :throttleTouch="true"
          :echarts="echarts"
          :onInit="initChart"
          :canvasId="chartId"
        />
        <cover-view
          ref="tooltipView"
          v-if="tooltip"
          :style="{ top: tooltipTop + 'px', left: tooltipLeft + 'px' }"
          class="tooltip-container"
        >
          {{ tooltip }}
          <!--空白占位, 解决真机cover-view显示不全问题-->
          <cover-view class="blank" />
        </cover-view>
      </div>
.tooltip-container {
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 15px;
    left: 100px;
    color: white;
    border-radius: 6px;
    transform: rotate(90deg);
    font-size: 12px;
    padding: 6px 0 6px 1em;
    display: flex;
    align-items: center;

    .blank {
      width: 2em;
      opacity: 0;
    }
  }

在options中更新cover-view位置

tooltip: {
  show: true,
    trigger: 'axis',
      position: (point) => {
        this.tooltipLeft = point[0]
        this.tooltipTop = point[1]
        return ['-100%', 0]
      }
}