echarts竖屏显示折线图

最新推荐文章于 2024-06-13 14:50:59 发布

carpe diem xt

最新推荐文章于 2024-06-13 14:50:59 发布

阅读量2.9k

点赞数 1

分类专栏： echarts 文章标签： echarts vue.js

本文链接：https://blog.csdn.net/u_ndefine_d/article/details/119389165

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

新官网已经有垂直折线图的案例：https://echarts.apache.org/examples/zh/index.html
在这里插入图片描述

echarts 折线图一般都是横屏显示，例如下图（官方案例）：
在这里插入图片描述
但是如果在移动端显示折线图，数据有非常多的情况下，横屏显示显然数据看着会很拥挤，所以我就想在移动端时，是否可以竖屏显示，这样看着折线图相对来说比较清晰，最终结果如下图（截取手机上的图）：
在这里插入图片描述
下面是具体的代码：
一、实现折线图竖屏显示
原理：将x轴和y轴对调，

（1）、横屏显示的X和Y轴

xAxis: {
  type: 'time',
   axisLabel: {
     show: true,
     rotate: 58
   }
 },
 yAxis: {
   type: 'value'
 },

（2）、竖屏显示的X和Y轴

xAxis: {
   type: 'value',  //y轴坐标
   position: 'top', // 可选值有'bottom' 和 'top'
  // nameRotate: -90, // 坐标轴名字旋转角度(当前案例中没有定义坐标轴名称)
   axisLabel: {
     show: true,
     rotate: 90 // 刻度标签旋转的角度
   }
 },
 yAxis: {
   type: 'time', //X轴坐标
   inverse: 'true', // 坐标轴是否反转
   axisLabel: {
     show: true,
     rotate: -58 //  刻度标签旋转的角度
   }
 },

修改之后折线图已经实现了竖屏显示，但是我的项目中，需要自定义时间坐标轴，根据数据的时间来展示，所以需要对 series 中的 data 做特殊处理，
二、处理时间轴的data数据
（1）、横屏显示的data数据 (截取了部分数据)

chartDataPc = {
		xAxisData: [
		   ['2021-07-20 10:19:00', 0.025], ['2021-07-20 10:19:01', 0.022], ['2021-07-20 10:19:37', 0.0241],
		   ['2021-07-20 10:19:40', 0.025], ['2021-07-20 10:19:41', 0.022], ['2021-07-20 10:20:17', 0.0233],
		   ['2021-07-20 10:20:21', 0.025], ['2021-07-20 10:20:22', 0.022], ['2021-07-20 10:20:58', 0.0232],
		   ['2021-07-20 10:21:01', 0.025], ['2021-07-20 10:21:02', 0.022], ['2021-07-20 10:21:38', 0.0247],
		   ['2021-07-20 10:21:42', 0.025], ['2021-07-20 10:21:43', 0.022], ['2021-07-20 10:24:29', 0.022],
		   ['2021-07-20 10:25:04', 0.024], ['2021-07-20 10:55:04', 0.0269], ['2021-07-20 11:25:04', 0.0267],
		   ['2021-07-20 11:54:12', 0.025], ['2021-07-20 11:54:13', 0.022], ['2021-07-20 11:54:14', 0.0232]
		],
		yAxisData: [
	    ['2021-07-20 10:19:00', 0.0468], ['2021-07-20 10:19:01', 0.0464], ['2021-07-20 10:19:37', 0.0482],
	   ['2021-07-20 10:19:40', 0.0468], ['2021-07-20 10:19:41', 0.0464], ['2021-07-20 10:20:17', 0.0473],
	   ['2021-07-20 10:20:21', 0.0468], ['2021-07-20 10:20:22', 0.0464], ['2021-07-20 10:20:58', 0.0472], 
	   ['2021-07-20 10:21:01', 0.0468],['2021-07-20 10:21:02', 0.0464], ['2021-07-20 10:21:38', 0.0472], 
	   ['2021-07-20 10:21:42', 0.0468], ['2021-07-20 10:21:43', 0.0464], ['2021-07-20 10:24:29', 0.0464], 
	   ['2021-07-20 10:25:04', 0.0477], ['2021-07-20 10:55:04', 0.047], ['2021-07-20 11:25:04', 0.0475],
	   ['2021-07-20 11:54:12', 0.0468], ['2021-07-20 11:54:13', 0.0464],['2021-07-20 11:54:14', 0.0472],
    ],
    zAxisData: [
	    ['2021-07-20 10:19:00', 0.0583], ['2021-07-20 10:19:01', 0.0375], ['2021-07-20 10:19:37', 0.0523],
	    ['2021-07-20 10:19:40', 0.0583], ['2021-07-20 10:19:41', 0.0375], ['2021-07-20 10:20:17', 0.0504], 
	    ['2021-07-20 10:20:21', 0.0583], ['2021-07-20 10:20:22', 0.0375], ['2021-07-20 10:20:58', 0.0569], 
	    ['2021-07-20 10:21:01', 0.0583],['2021-07-20 10:21:02', 0.0375], ['2021-07-20 10:21:38', 0.0492], 
	    ['2021-07-20 10:21:42', 0.0583], ['2021-07-20 10:21:43', 0.0375], ['2021-07-20 10:24:29', 0.0375], 
	    ['2021-07-20 10:25:04', 0.0432], ['2021-07-20 10:55:04', 0.0468], ['2021-07-20 11:25:04', 0.0487], 
	    ['2021-07-20 11:54:12', 0.0583], ['2021-07-20 11:54:13', 0.0375],['2021-07-20 11:54:14', 0.0443]
    ]
}

（2）、竖屏显示的data数据 (截取了部分数据)

chartData = {
  xAxisData： [
	  [0.025, '2021-07-20 10:19:00'], [0.022, '2021-07-20 10:19:01'], [0.0241, '2021-07-20 10:19:37'], 
	  [0.025, '2021-07-20 10:19:40'], [0.022, '2021-07-20 10:19:41'], [0.0233, '2021-07-20 10:20:17'], 
	  [0.025, '2021-07-20 10:20:21'], [0.022, '2021-07-20 10:20:22'], [0.0232, '2021-07-20 10:20:58'], 
	  [0.025, '2021-07-20 10:21:01'], [0.022, '2021-07-20 10:21:02'], [0.0247, '2021-07-20 10:21:38'], 
	  [0.025, '2021-07-20 10:21:42'], [0.022, '2021-07-20 10:21:43'], [0.022, '2021-07-20 10:24:29'], 
	  [0.024, '2021-07-20 10:25:04'], [0.0269, '2021-07-20 10:55:04'], [0.0267, '2021-07-20 11:25:04'], 
	  [0.025, '2021-07-20 11:54:12'], [0.022, '2021-07-20 11:54:13'], [0.0232, '2021-07-20 11:54:14'], 
	  [0.0248, '2021-07-20 11:54:15'], [0.0271, '2021-07-20 11:54:15'], [0.0202, '2021-07-20 11:54:15']
 ],
 yAxisData: [
    [0.0468, '2021-07-20 10:19:00'], [0.0464, '2021-07-20 10:19:01'], [0.0482, '2021-07-20 10:19:37'], 
    [0.0468, '2021-07-20 10:19:40'], [0.0464, '2021-07-20 10:19:41'], [0.0473, '2021-07-20 10:20:17'], 
    [0.0468, '2021-07-20 10:20:21'], [0.0464, '2021-07-20 10:20:22'], [0.0472, '2021-07-20 10:20:58'], 
    [0.0468, '2021-07-20 10:21:01'], [0.0464, '2021-07-20 10:21:02'], [0.0472, '2021-07-20 10:21:38'], 
    [0.0468, '2021-07-20 10:21:42'], [0.0464, '2021-07-20 10:21:43'], [0.0464, '2021-07-20 10:24:29'], 
    [0.0477, '2021-07-20 10:25:04'], [0.047, '2021-07-20 10:55:04'], [0.0475, '2021-07-20 11:25:04'], 
    [0.0468, '2021-07-20 11:54:12'], [0.0464, '2021-07-20 11:54:13'], [0.0472, '2021-07-20 11:54:14']
  ],
  zAxisData: [
    [0.0583, '2021-07-20 10:19:00'], [0.0375, '2021-07-20 10:19:01'], [0.0523, '2021-07-20 10:19:37'], 
    [0.0583, '2021-07-20 10:19:40'], [0.0375, '2021-07-20 10:19:41'], [0.0504, '2021-07-20 10:20:17'], 
    [0.0583, '2021-07-20 10:20:21'], [0.0375, '2021-07-20 10:20:22'], [0.0569, '2021-07-20 10:20:58'], 
    [0.0583, '2021-07-20 10:21:01'], [0.0375, '2021-07-20 10:21:02'], [0.0492, '2021-07-20 10:21:38'], 
    [0.0583, '2021-07-20 10:21:42'], [0.0375, '2021-07-20 10:21:43'], [0.0375, '2021-07-20 10:24:29'], 
    [0.0432, '2021-07-20 10:25:04'], [0.0468, '2021-07-20 10:55:04'], [0.0487, '2021-07-20 11:25:04'], 
    [0.0583, '2021-07-20 11:54:12'], [0.0375, '2021-07-20 11:54:13'], [0.0443, '2021-07-20 11:54:14'], 
  ]
}

是的，你没看错，只是把时间和数值换下位置，据我观察，数组左侧的默认在X轴显示，右侧的默认在Y轴显示，
在这里插入图片描述
截止到第二步，竖屏显示已经没有问题了，宽高位置啥的可以对着官方文档改一改就行
三、提示框也跟随竖屏显示
横屏显示的时候，提示框是横着的，竖屏现实的时候也希望提示框跟着也竖着显示，我查找了官方文档，可以直接修改提示框样式，加上旋转90度就ok了，

tooltip: {
          trigger: 'axis',
          extraCssText: 'transform:rotate(90deg)' // 旋转90度
}

具体内容可查看我得上一篇文章：
https://blog.csdn.net/u_ndefine_d/article/details/119387649

四、修改区域缩放
视觉上折线图是竖屏展示的，但是X轴和Y轴是没有改变的，X轴依然是X轴，Y轴依然是Y轴，只是把不同轴上的数据对调了一下，所以 dataZoom没做特殊处理的话，还是横着显示的，控制的是X轴数据的缩放，可查看官网dataZoom的案例，我的项目中修改如下：

dataZoom: [{
   type: 'slider',
   show: true,
   yAxisIndex: 0,
   filterMode: 'empty',
   width: 20,
   height: '84%',
   handleSize: 8,
   showDataShadow: false,
   left: '0.5%'
 }]

在这里插入图片描述
五、工具栏缩放问题 toolbox
如下图，缩放和还原按钮：

产生的原因和步骤四一样，怎么设置材质能缩放Y轴呢：

toolbox: {
          show: true,
          feature: {
            dataZoom: {
              xAxisIndex: 'none', // 设置xAxisIndex：'none', 不控制x轴
              title: {
                zoom: '缩放',
                back: ''
              },
              icon: { // 自定义的icon图标
                back: 'image://M509.92 843.84C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m0-48c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z" p-id="3019" fill="#ffffff"'
              },
              iconStyle: {
                borderColor: 'rgba(0, 0, 0, .3)'
              },
              emphasis: {
                iconStyle: {
                  borderColor: 'rgba(216, 65, 21, 0.5)',
                  textFill: 'rgba(216, 65, 21, 0.5)'
                }
              }
            },
            restore: {
              iconStyle: {
                borderColor: 'rgba(0, 0, 0, .3)'
              },
              emphasis: {
                iconStyle: {
                  borderColor: 'rgba(216, 65, 21, 0.5)',
                  textFill: 'rgba(216, 65, 21, 0.5)'
                }
              }
            }
          }
        },

官网截图：
在这里插入图片描述
以上是当前遇到的问题，后续会再补充，欢迎大家一起讨论

carpe diem xt

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
echarts竖屏显示折线图

echarts 折线图一般都是横屏显示，例如下图（官方案例）：但是如果在移动端显示折线图，数据有非常多的情况下，横屏显示显然数据看着会很拥挤，所以我就想在移动端时，是否可以竖屏显示，这样看着折线图相对来说比较清晰，最终结果如下图（截取手机上的图）：下面是具体的代码：一、实现折线图竖屏显示原理：将x轴和y轴对调，（1）、横屏显示的X和Y轴xAxis: { type: 'time', axisLabel: { show: true, rotate: 58 }
复制链接

扫一扫

专栏目录