参考官方示例链接
https://echarts.apache.org/ex...
将其数据坐标简单修改为时间戳,如下列形式,然后设置x坐标轴类型为时间,
我发现只要时间戳不是连续的数字,热力图就会渲染成条状。。
`
var noise = getNoiseHelper();
var xData = [];
var yData = [];
noise.seed(Math.random());
function generateData(theta, min, max) {
var data = [];
for (var i = 0; i <= 100; i++) {
for (var j = 0; j <= 300; j++) {
// var x = (max - min) * i / 200 + min;
// var y = (max - min) * j / 100 + min;
data.push([new Date().getTime()+1000*i,j,noise.perlin2(i / 40, j / 20) + 0.5]);
// data.push([i, j, normalDist(theta, x) * normalDist(theta, y)]);
}
}
for (var j = 0; j < 100; j++) {
yData.push(j);
}
return data;
}
var data = generateData(2, -5, 5);
option = {
tooltip: {},
xAxis: {
type: 'time',
data: xData
},
yAxis: {
type: 'category',
data: yData
},
visualMap: {
min: 0,
max: 1,
calculable: true,
realtime: false,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'],
symbolSize:[10,100],
}
},
dataZoom:{type:'inside'},
series: [{
name: 'Gaussian',
type: 'heatmap',
data: data,
emphasis: {
itemStyle: {
borderColor: '#333',
borderWidth: 1
}
},
progressive: 1000,
animation: false
}]
};`