logo标签列表

在ECharts中使用“时间”类型作为时间序列图表的X轴

javascripttime-seriesdata-visualizationtimeserieschartecharts
6
我正在使用ECharts 4.0.4 (http://echarts.baidu.com/)来绘制一些带有时间戳的传感器数据图表，已经尝试使用旧版系列数据和数据集（在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>

关于'time'，它并不会：

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
  ]
}

这是让时间轴正常工作的唯一方法吗？我对如何使用它感到非常困惑。如何正确地使用带有多个系列的时间轴？

我对ECharts一无所知，但这似乎是一个你应该通过它的文档得到答案的问题。你已经查看了ECharts的文档吗？ - C. van Dorsten
我已经这样做了。这些示例是使用它们构建的。要么我误解了某些东西，漏掉了某些东西，要么这是一个错误。 - rjunior
如果您认为这是一个错误，我建议您提交支持工单或在他们的论坛中搜索答案。 - C. van Dorsten
我也遇到了同样的问题 :( 有什么进展吗？ - John Kotkin
3个回答
14

正确的数据格式是这样的

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

感谢valia提供正确的答案！由于我也在寻找解决方案，所以我认为将所有内容放在一个运行示例中会很酷 - 这就是为什么我添加了这个答案的原因。

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>

-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接