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

Question

I'm using ECharts 4.0.4 ( http://echarts.baidu.com/ ) to graph some sensor data with timestamps on the X axis.

Have tried with legacy series data and datasets (new on v4), but 'time' axis type won't work properly. With 'category' it works fine:

 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>

With 'time' it doesn't:

 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>

I even tried using dimensions (which features the type for each series):

 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>

No good, it shows just one series (and with broken tooltips). And by using dimensions, the layout of my data needs to be inverted, which is not good, as getting data from a JSON endpoint would be better in the previous way.

The time axis example on ECharts demo page uses a diferent data format for a datapoint (for a single series):

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

Is this the only way to have the time axis working? I'm very confused on how to use this. What's the correct way to use the time axis with multiples series?

Answer 1

The correct data format is this

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

and the the series should be

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

Thank you valia for the correct answer! As I was also looking for a solution to this problem - I thought it would be cool to have everything together in running example - that's why I added this answer.

 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

According to documentation https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.data . May be you should try to use native Date