[Feature] Using blur in heatmap (catesian2d)

[zhmadeinkorea]

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);

[helgasoft]

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.