在 ECharts 的 X 轴上使用 'time' 类型进行时间序列图

Question

我正在使用 ECharts 4.0.4 ( http://echarts.baidu.com/ ) 在 X 轴上绘制一些带有时间戳的传感器数据。

已尝试使用旧系列数据和数据集（v4 上的新功能），但“时间”轴类型无法正常工作。 使用“类别”可以正常工作：

 var myChart = echarts.init(document.getElementById('main')); var option = { legend: {}, tooltip: { trigger: 'axis', }, dataset: { source: { timestamp: ['2018-04-10T20:40:33Z', '2018-04-10T20:40:53Z', '2018-04-10T20:41:03Z'], sensor1: [1, 2, 4], sensor2: [5, 3, 2] } }, xAxis: { type: 'category' }, yAxis: { }, series: [ { type: 'line'}, { type: 'line'} ], }; myChart.setOption(option);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script> <div id="main" style="width: 500px;height:400px;"></div>

有了“时间”，它不会：

 var myChart = echarts.init(document.getElementById('main')); var option = { legend: {}, tooltip: { trigger: 'axis', }, dataset: { source: { timestamp: ['2018-04-10T20:40:33Z', '2018-04-10T20:40:53Z', '2018-04-10T20:41:03Z'], sensor1: [1, 2, 4], sensor2: [5, 3, 2] } }, xAxis: { type: 'time' }, yAxis: { }, series: [ { type: 'line'}, { type: 'line'} ], }; myChart.setOption(option);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script> <div id="main" style="width: 500px;height:400px;"></div>

我什至尝试使用尺寸（每个系列的类型）：

 var myChart = echarts.init(document.getElementById('main')); var option = { legend: {}, tooltip: { trigger: 'axis', }, dataset: { source: [ ['2018-04-10T20:40:33Z', 1, 5], ['2018-04-10T20:40:53Z', 2, 3], ['2018-04-10T20:41:03Z', 4, 2] ] }, xAxis: { type: 'time' }, yAxis: { }, series: { type: 'line', dimensions: [ {name: 'timestamp', type: 'time'}, {name: 'sensor1', type: 'float'}, {name: 'sensor2', type: 'float'} ] }, }; myChart.setOption(option);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script> <div id="main" style="width: 500px;height:400px;"></div>

不好，它只显示一个系列（并且带有损坏的工具提示）。 并且通过使用维度，我的数据的布局需要反转，这并不好，因为从 JSON 端点获取数据会更好地采用以前的方式。

ECharts 演示页面上的时间轴示例对数据点使用不同的数据格式（对于单个系列）：

point = {
  name: 'Sun Jul 23 2000 00:00:00 GMT-0300 (-03)',
  value: [
    '2000/7/23',   // X data (timestamp)
    100            // Y data
  ]
}

这是让时间轴工作的唯一方法吗？ 我对如何使用它感到非常困惑。 在倍数系列中使用时间轴的正确方法是什么？

Answer 1

正确的数据格式是这样的

[
  ['2018-04-10T20:40:33Z', 1, 5],
  ['2018-04-10T20:40:53Z', 2, 3],
  ['2018-04-10T20:41:03Z', 4, 2]
]

dataset:{
  source:data,
  dimensions: ['timestamp', 'sensor1', 'sensor2'],
}

这个系列应该是

series: [{
        name: 'sensor1',
        type: 'line',
        encode: {
          x: 'timestamp',
          y: 'sensor1' // refer sensor 1 value 
        }
    },{
        name: 'sensor2',
        type: 'line',
        encode: {
          x: 'timestamp',
          y: 'sensor2'
        }
    }]

Answer 2

感谢瓦利亚的正确答案！ 因为我也在寻找这个问题的解决方案 - 我认为在运行示例中将所有内容放在一起会很酷 - 这就是我添加这个答案的原因。

 var myChart = echarts.init(document.getElementById('main')); var data = [ ['2018-04-10T20:40:33Z', 1, 5], ['2018-04-10T20:40:53Z', 2, 3], ['2018-04-10T20:41:03Z', 4, 2], ['2018-04-10T20:44:03Z', 5, 1], ['2018-04-10T20:45:03Z', 6, 0] ]; var option = { legend: {}, tooltip: { trigger: 'axis', }, dataset: { source:data, dimensions: ['timestamp', 'sensor1', 'sensor2'], }, xAxis: { type: 'time' }, yAxis: { }, series: [ { name: 'sensor1', type: 'line', encode: { x: 'timestamp', y: 'sensor1' // refer sensor 1 value } },{ name: 'sensor2', type: 'line', encode: { x: 'timestamp', y: 'sensor2' } }] }; myChart.setOption(option);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts.min.js"></script> <div id="main" style="width: 500px;height:400px;"></div>

Answer 3

根据文档https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.data 。 可能你应该尝试使用原生日期