H5W3
当前位置:H5W3 > 其他技术问题 > 正文

echarts中heatmap在坐标轴为'time'类型时渲染有问题,应该怎么解

参考官方示例链接
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
}]

};`

本文地址:H5W3 » echarts中heatmap在坐标轴为'time'类型时渲染有问题,应该怎么解

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址