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);
1条答案
按热度按时间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.