5

echarts gl 坐标系时间轴

 2 years ago
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 坐标系时间轴

bolina 发布于 04/12 10:08
阅读 132

入门案例    三维坐标系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],
    ],}

up-5fad9b37c29a595d8cfce9379956ad9b4c4.png

tcxu
04/12 16:50

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'
        },

 试试是否可行。 

tcxu
04/13 09:27
回复 @bolina : 请仅仅将 Y 轴的数据类型改成 type: 'category' , 试试看是什麽?
tcxu
04/12 17:14
回复 @bolina : time 类型的数据格式不可能是这个样子。请按 time 数据的格式,找出一些数据。
bolina
04/12 16:57
非常感谢, 但数据只是示例的 真实情况还是需要使用time类型
tcxu
04/12 17:17

若 Y 轴要用 type: 'time', 请参看 天气 风向 风速 海浪 预报 的案例:

 xAxis: {
            type: 'time',
            maxInterval: 3600 * 1000 * 24,
            splitLine: {
                lineStyle: {
                    color: '#ddd'
                }
            }
        },

要有足够多的数据。

bolina
昨天 16:17
谢谢, 我这边是想做三维轴的,只是时间入参不知道如何转化
tcxu
昨天 19:20

我做以下测试尝试时间入参的转化。
例如,从 '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>

up-26818acb947d35ba35e2834c19eb71ab537.png

我想,将你的时间数据,例如 2021/4/5 通过上述方法,可以换成 1617552000000,将 20201/6/6 换成 1622908800000 ...,若使用这样转换成的以毫秒为单位的数据, Y 轴的刻度就可以正常显示了。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK