问答

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

作者:admin 2021-09-10 我要评论

参考官方示例链接 https://echarts.apache.org/ex... 将其数据坐标简单修改为时间戳,如下列形式,然后设置x坐标轴类型为时间, 我发现只要时间戳不是连续的数字...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

};`

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • echarts中heatmap在坐标轴为'time'类型

    echarts中heatmap在坐标轴为'time'类型

  • 根据条件过滤数组

    根据条件过滤数组

  • Laravel where time="0000-00-00" or

    Laravel where time="0000-00-00" or

  • 原生js怎么动态的点击拼接字符串,删除

    原生js怎么动态的点击拼接字符串,删除

腾讯云代理商
海外云服务器