新官网已经有垂直折线图的案例: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)'
}
}
}
}
},