echarts [Feature] Using blur in heatmap (catesian2d)

omhiaaxx  于 4个月前  发布在  Echarts
关注(0)|答案(1)|浏览(119)

What problem does this feature solve?

I want to give blurring effect of point in heatmap. I also want to give effect when coordinate system is catesian2d.

let arr = [
//x, y, value
[0.000, 37.300, 320.975],
[2.500, 37.300, 294.121],
.
.
.
.
];
Data is in the same format as above.
Sorry if there's something that sets up the above features and I haven't found it. I haven't found it, please help.

I made this heatmap and used "Heatmap - 20K data demo".
and I want to point blur like "Heatmap on Baidu Map demo"

please help me

What does the proposed API look like?

let arr= [
[0.000, 37.300, 320.975],
[2.500, 37.300, 294.121],
[5.000, 37.300, 270.164],
[7.500, 37.300, 253.959],
[10.000, 37.300, 236.359],
[12.500, 37.300, 213.479],
[15.000, 37.300, 192.662],
[17.500, 37.300, 184.157],
[20.000, 37.300, 176.095],
[22.500, 37.300, 164.266],
[25.000, 37.300, 155.423],
[27.500, 37.300, 157.904],
.
.
.
];

function getMin2DArr(arr, idx) {
const min = Math.min.apply(null, arr.map((el) => el[idx]));
const max = Math.max.apply(null, arr.map((el) => el[idx]));
return min;
}

function getMax2DArr(arr, idx) {
const min = Math.min.apply(null, arr.map((el) => el[idx]));
const max = Math.max.apply(null, arr.map((el) => el[idx]));
return max;
}

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};

var option;

let xData = [];
let yData = [];

function generateData(theta, min, max) {
let data = [];

for (var i = 0; i < arr.length; i++){
data.push([arr[i][0], arr[i][1], arr[i][2]]);

}

for (var i = 0; i < getMax2DArr(datFile, 0); i++) {
    xData.push(i);
}

for (var i = 0; i < getMax2DArr(datFile, 1); i++) {
    yData.push(datFile[i]);
}
return data;

}

let data = generateData(2, -5, 5);
option = {
tooltip: {
position: "top"
},

xAxis: [{
    type: 'category',
    data: xData
}],
yAxis: {
    type: 'value',
    data: yData
},
visualMap: {
    min: getMin2DArr(datFile, 2),
    max: getMax2DArr(datFile, 2),
    calculable: true,
    realtime: false,
    inRange: {
        color: [
            '#313695', '#00a31b', '#f0d800', '#f06c00', '#f00000', '#cc0055'
        ]
    }
},
series: [{
        name: 'val',
        type: 'heatmap',
        data: data,
        coordinateSystem: 'cartesian2d',
        animation: false,
        emphasis: {
            foucs: 'series',
            blurScope: 'coordinateSystem'
        },
        blurSize: 6,
        pointSize: 6
    },
]

};

if (option && typeof option === 'object') {
myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

ht4b089n

ht4b089n1#

I think cartesian2d heatmap is just a color matrix.
API says pointSize and blurSize are valid only with geo coordinate system. So cartesian2d points cannot be merged on zoom, like in geo.

相关问题