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

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

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

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

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

echarts版本使用注意事项

移动端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时不会出现渲染异常
}

Echarts图表移动端手机横屏展示相关推荐

Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
阿泽CSS踩坑系列（二）-解决安卓端手机横屏后图片比例失调，需要刷新才能恢复正常的问题。（华为手机浏览器）
问题描述:开发个人博客摄影版块的时候,横屏时图片出现了拉伸,点击下一张图片再点回来就能恢复正常.(理想状态:保持宽高比,当高度或者宽度达到最大时,停止缩放) 我们看一下竖屏时的图片: 嗯,完美,没有什 ...
vue移动端强制横屏展示
一.在 index.html 中加入计算 font-size 代码 window.calcFontSize = () => {document.documentElement.style.fon ...
java echarts 生成图片_java如何在后台生成echarts图表？实际代码展示
学习是一个永无止境的过程,关于java的学习更是如此.今天主要为大家介绍下,如何在java中后台生成echarts图表,并且为大家展示实际的操作流程. 首先说下它的适用情况:⑴.支持echart4.0 ...
web图片铺满网页_web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)...
[实例简介] 最近针对web端实现单页面展示多个echarts图表,更直观的展示数据的变化,响应式 [实例截图] [核心代码] charts └── charts ├── css │ ├── bo ...
android bmob上传图片,Bmob+Android+ECharts 实现移动端数据上传与图表展示
Bmob:后端云全方位一体化的后端服务平台,无需再造应用后端服务轻松拥有开发中需要的各种后端能力. ECharts:开源图表库,丰富的可视化效果,多图表类型,满足不同数据的处理需求更多的搭配方案 ...
零基础ECharts 图表使用步骤流程图详解与 pc 端自适应
前言:呦呦呦是我我来了我是静静,这回又是零基础 echarts 图表的使用,最近项目中要用到echarts 使用,实话是在使用中,一共就三个步骤,看完开发文档稳稳当当的就会使用,但是大家懒啊所以这 ...
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件原型展示及下载地址:h ...
ASP.Net绑定Sql数据源用echarts图表来展示数据
ASP.Net绑定Sql数据源用echarts图表来展示数据这里我们需要先学会ajax请求和网页的echarts图的使用不会的同学也没关系可以看我接下来的内容我会一步步的来讲解的首先大家可以先从 ...
移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo
移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo 前言,反思在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根 ...

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

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

echarts版本使用注意事项

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

Echarts图表移动端手机横屏展示相关推荐

最新文章

热门文章