echarts gl 坐标系时间轴
source link: https://www.oschina.net/question/4170529_2322040
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
echarts gl 坐标系时间轴
入门案例 三维坐标系Y轴为时间轴后, Y轴并未正确显示, 望指教
简单示例:
grid3D: {}, xAxis3D: { type: 'value', }, yAxis3D: { type: 'time', }, zAxis3D: { type: 'value', },
series: [{ data: [ [6.5034, '2021/4/5', 0.045], [6.5201,'2021/4/5', 0.045], [6.5234, '2021/4/5', 0.045], [6.5334, '2021/4/5', 0.043], [6.5434, '2021/4/5', 0.045], [6.5034, '2021/6/6', 0.042], [6.5134, '2021/6/6', 0.04], [6.5234, '2021/6/6', 0.042], [6.5434, '2021/6/6', 0.043], [6.5434, '2021/6/6', 0.044], [6.5034, '2021/7/7', 0.04], [6.5134, '2021/7/7', 0.04], [6.5234, '2021/7/7', 0.04], [6.5334, '2021/7/7', 0.04], [6.5434, '2021/7/7', 0.038], [6.5034, '2021/8/8', 0.042], [6.5134, '2021/8/8', 0.042], [6.5234, '2021/8/8', 0.042], [6.5334, '2021/8/8', 0.045], [6.5434, '2021/8/8', 0.042], [6.5034, '2021/10/3', 0.05], [6.5134, '2021/10/3', 0.05], [6.5234, '2021/10/3', 0.05], [6.5334, '2021/10/3', 0.05], [6.5434, '2021/10/3', 0.051], ],}
Y 轴 是日期(date)数据:2021/4/5,2021/6/6.2021.7/7.2021/8/8, 以及 2021/10/3 ,即 5 类 (5 categories )日期,表示的不是时间(time), 所以,用时间格式显示的Y轴数据的刻度值,成了"乱码"。
建议将 Y 轴的数据类型改成
yAxis3D: {
type: 'category'
},
试试是否可行。
若 Y 轴要用 type: 'time', 请参看 天气 风向 风速 海浪 预报 的案例:
xAxis: {
type: 'time',
maxInterval: 3600 * 1000 * 24,
splitLine: {
lineStyle: {
color: '#ddd'
}
}
},
要有足够多的数据。
我做以下测试尝试时间入参的转化。
例如,从 '2021-04-05 18:00:49:000',间隔 1 秒,直到 '2021-04-16 18:00:57:000' 共有 9个数据点的时间数据。时间数据
依次调用
date = new Date('2021-04-05 18:00:49:000');
time_ data = date.valueOf();
分别计算(转换)得到 9 个 以毫秒为单位的时间数据 time_ data。这样的时间数据,就可以作为时间坐标的数据。
<html>
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var data = [];
var times=[[2, 1618567249000,5], [1,1618567250000, 5], [3, 1618567251000 , 4],
[4,1618567252000, 1], [1,1618567253000, 1],[2,1618567254000, 1],
[1, 1618567255000,4], [2,1618567256000, 2], [5,1618567257000, 1]];
option = {
grid3D: {},
xAxis3D: {
type: 'value'
},
yAxis3D: {
type:'time'
},
zAxis3D: {
type: 'value'
},
series: [
{
type: 'scatter3D',
symbolSize: 12,
data: times,
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
我想,将你的时间数据,例如 2021/4/5 通过上述方法,可以换成 1617552000000,将 20201/6/6 换成 1622908800000 ...,若使用这样转换成的以毫秒为单位的数据, Y 轴的刻度就可以正常显示了。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK