![](/img/trans.png)
[英]Apache ECharts: "time" Axis labels are overlapping when using DataZoom
[英]Using 'time' type on X axis of ECharts for timeseries graphing
我正在使用 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
]
}
這是讓時間軸工作的唯一方法嗎? 我對如何使用它感到非常困惑。 在倍數系列中使用時間軸的正確方法是什么?
正確的數據格式是這樣的
[
['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'
}
}]
感謝瓦利亞的正確答案! 因為我也在尋找這個問題的解決方案 - 我認為在運行示例中將所有內容放在一起會很酷 - 這就是我添加這個答案的原因。
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>
根據文檔https://ecomfe.github.io/echarts-doc/public/en/option.html#series-line.data 。 可能你應該嘗試使用原生日期
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.