图表需要横屏展示,如下图
尝试方式:
第一种: 旋转外部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 原本横向滑动图表,可查看下一页数据,但是横向展示后,滑动操作与页面滚动操作冲突,所以加了两个按钮去控制翻页
点击按钮时通过更改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横向展示,根据官方文档设置浮层样式,但是在小程序中不生效
最终使用了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]
}
}