热力图网格echarts category配置项内容和展示
配置项如下
const HEAPMAP_XAXIS_L = 26;
const HEAPMAP_YAXIS_L = 22;
const HEAPMAP_XAXIS_DATA = Array.from({
length: HEAPMAP_XAXIS_L
}, (item, index) => index);
const HEAPMAP_YAXIS_DATA = Array.from({
length: HEAPMAP_YAXIS_L
}, (item, index) => index);
var data = [];
var randomData = function() {
let seriesData = [];
for (let z = 0; z < HEAPMAP_XAXIS_L; z++) {
for (let i = 0; i < HEAPMAP_YAXIS_L; i++) {
seriesData.push([i, z, 50 + Math.round(Math.random() * 300)]);
}
}
seriesData = seriesData.map((item) => [item[1], item[0], item[2]]);
data = seriesData;
};
var initData = function() {
let seriesData = [];
for (let z = 0; z < HEAPMAP_XAXIS_L; z++) {
for (let i = 0; i < HEAPMAP_YAXIS_L; i++) {
seriesData.push([i, z, 101]);
}
}
seriesData = seriesData.map((item) => [item[1], item[0], item[2]]);
return seriesData;
};
// 初始化
// randomData();
// console.log(JSON.stringify(data));
data = [
[0, 0, 297],
[0, 1, 224],
[0, 2, 243],
[0, 3, 126],
[0, 4, 59],
[0, 5, 126],
[0, 6, 70],
[0, 7, 91],
[0, 8, 266],
[0, 9, 303],
[0, 10, 302],
[0, 11, 220],
[0, 12, 197],
[0, 13, 140],
[0, 14, 252],
[0, 15, 110],
[0, 16, 204],
[0, 17, 221],
[0, 18, 133],
[0, 19, 335],
[0, 20, 99],
[0, 21, 53],
[1, 0, 344],
[1, 1, 320],
[1, 2, 53],
[1, 3, 197],
[1, 4, 112],
[1, 5, 121],
[1, 6, 248],
[1, 7, 261],
[1, 8, 341],
[1, 9, 115],
[1, 10, 121],
[1, 11, 289],
[1, 12, 345],
[1, 13, 274],
[1, 14, 199],
[1, 15, 181],
[1, 16, 142],
[1, 17, 283],
[1, 18, 194],
[1, 19, 145],
[1, 20, 232],
[1, 21, 314],
[2, 0, 152],
[2, 1, 136],
[2, 2, 250],
[2, 3, 127],
[2, 4, 153],
[2, 5, 291],
[2, 6, 340],
[2, 7, 70],
[2, 8, 293],
[2, 9, 311],
[2, 10, 127],
[2, 11, 212],
[2, 12, 210],
[2, 13, 190],
[2, 14, 250],
[2, 15, 214],
[2, 16, 82],
[2, 17, 318],
[2, 18, 142],
[2, 19, 119],
[2, 20, 217],
[2, 21, 192],
[3, 0, 97],
[3, 1, 118],
[3, 2, 138],
[3, 3, 290],
[3, 4, 327],
[3, 5, 78],
[3, 6, 285],
[3, 7, 131],
[3, 8, 227],
[3, 9, 257],
[3, 10, 60],
[3, 11, 244],
[3, 12, 271],
[3, 13, 127],
[3, 14, 197],
[3, 15, 202],
[3, 16, 332],
[3, 17, 203],
[3, 18, 300],
[3, 19, 99],
[3, 20, 286],
[3, 21, 260],
[4, 0, 162],
[4, 1, 320],
[4, 2, 78],
[4, 3, 284],
[4, 4, 221],
[4, 5, 101],
[4, 6, 216],
[4, 7, 183],
[4, 8, 125],
[4, 9, 144],
[4, 10, 71],
[4, 11, 253],
[4, 12, 270],
[4, 13, 53],
[4, 14, 332],
[4, 15, 296],
[4, 16, 310],
[4, 17, 174],
[4, 18, 318],
[4, 19, 112],
[4, 20, 207],
[4, 21, 73],
[5, 0, 60],
[5, 1, 69],
[5, 2, 255],
[5, 3, 277],
[5, 4, 269],
[5, 5, 227],
[5, 6, 211],
[5, 7, 348],
[5, 8, 54],
[5, 9, 150],
[5, 10, 123],
[5, 11, 59],
[5, 12, 53],
[5, 13, 108],
[5, 14, 60],
[5, 15, 207],
[5, 16, 57],
[5, 17, 62],
[5, 18, 91],
[5, 19, 226],
[5, 20, 318],
[5, 21, 282],
[6, 0, 313],
[6, 1, 51],
[6, 2, 198],
[6, 3, 331],
[6, 4, 328],
[6, 5, 349],
[6, 6, 66],
[6, 7, 119],
[6, 8, 236],
[6, 9, 124],
[6, 10, 274],
[6, 11, 193],
[6, 12, 201],
[6, 13, 334],
[6, 14, 326],
[6, 15, 184],
[6, 16, 150],
[6, 17, 135],
[6, 18, 296],
[6, 19, 213],
[6, 20, 266],
[6, 21, 97],
[7, 0, 242],
[7, 1, 55],
[7, 2, 182],
[7, 3, 104],
[7, 4, 78],
[7, 5, 91],
[7, 6, 304],
[7, 7, 196],
[7, 8, 296],
[7, 9, 104],
[7, 10, 228],
[7, 11, 179],
[7, 12, 130],
[7, 13, 267],
[7, 14, 55],
[7, 15, 232],
[7, 16, 91],
[7, 17, 296],
[7, 18, 136],
[7, 19, 50],
[7, 20, 174],
[7, 21, 244],
[8, 0, 136],
[8, 1, 318],
[8, 2, 151],
[8, 3, 230],
[8, 4, 282],
[8, 5, 76],
[8, 6, 152],
[8, 7, 117],
[8, 8, 268],
[8, 9, 315],
[8, 10, 57],
[8, 11, 226],
[8, 12, 164],
[8, 13, 225],
[8, 14, 276],
[8, 15, 347],
[8, 16, 56],
[8, 17, 237],
[8, 18, 233],
[8, 19, 194],
[8, 20, 236],
[8, 21, 133],
[9, 0, 131],
[9, 1, 160],
[9, 2, 313],
[9, 3, 143],
[9, 4, 320],
[9, 5, 227],
[9, 6, 271],
[9, 7, 280],
[9, 8, 304],
[9, 9, 276],
[9, 10, 75],
[9, 11, 243],
[9, 12, 107],
[9, 13, 171],
[9, 14, 86],
[9, 15, 229],
[9, 16, 170],
[9, 17, 65],
[9, 18, 174],
[9, 19, 82],
[9, 20, 268],
[9, 21, 200],
[10, 0, 227],
[10, 1, 235],
[10, 2, 324],
[10, 3, 69],
[10, 4, 69],
[10, 5, 104],
[10, 6, 189],
[10, 7, 207],
[10, 8, 195],
[10, 9, 281],
[10, 10, 186],
[10, 11, 98],
[10, 12, 212],
[10, 13, 293],
[10, 14, 123],
[10, 15, 182],
[10, 16, 87],
[10, 17, 149],
[10, 18, 281],
[10, 19, 282],
[10, 20, 225],
[10, 21, 340],
[11, 0, 158],
[11, 1, 280],
[11, 2, 213],
[11, 3, 247],
[11, 4, 93],
[11, 5, 222],
[11, 6, 325],
[11, 7, 206],
[11, 8, 230],
[11, 9, 155],
[11, 10, 148],
[11, 11, 61],
[11, 12, 277],
[11, 13, 242],
[11, 14, 201],
[11, 15, 158],
[11, 16, 69],
[11, 17, 149],
[11, 18, 110],
[11, 19, 158],
[11, 20, 88],
[11, 21, 76],
[12, 0, 337],
[12, 1, 99],
[12, 2, 169],
[12, 3, 206],
[12, 4, 119],
[12, 5, 277],
[12, 6, 291],
[12, 7, 313],
[12, 8, 118],
[12, 9, 260],
[12, 10, 195],
[12, 11, 127],
[12, 12, 105],
[12, 13, 173],
[12, 14, 202],
[12, 15, 127],
[12, 16, 308],
[12, 17, 288],
[12, 18, 141],
[12, 19, 75],
[12, 20, 347],
[12, 21, 73],
[13, 0, 233],
[13, 1, 121],
[13, 2, 186],
[13, 3, 287],
[13, 4, 156],
[13, 5, 300],
[13, 6, 192],
[13, 7, 288],
[13, 8, 316],
[13, 9, 186],
[13, 10, 189],
[13, 11, 224],
[13, 12, 77],
[13, 13, 247],
[13, 14, 263],
[13, 15, 221],
[13, 16, 155],
[13, 17, 171],
[13, 18, 296],
[13, 19, 280],
[13, 20, 337],
[13, 21, 178],
[14, 0, 118],
[14, 1, 347],
[14, 2, 264],
[14, 3, 96],
[14, 4, 104],
[14, 5, 232],
[14, 6, 342],
[14, 7, 125],
[14, 8, 169],
[14, 9, 323],
[14, 10, 221],
[14, 11, 327],
[14, 12, 161],
[14, 13, 187],
[14, 14, 345],
[14, 15, 100],
[14, 16, 141],
[14, 17, 214],
[14, 18, 279],
[14, 19, 126],
[14, 20, 214],
[14, 21, 330],
[15, 0, 171],
[15, 1, 238],
[15, 2, 67],
[15, 3, 325],
[15, 4, 288],
[15, 5, 205],
[15, 6, 217],
[15, 7, 269],
[15, 8, 266],
[15, 9, 222],
[15, 10, 201],
[15, 11, 80],
[15, 12, 299],
[15, 13, 262],
[15, 14, 220],
[15, 15, 59],
[15, 16, 334],
[15, 17, 309],
[15, 18, 141],
[15, 19, 69],
[15, 20, 119],
[15, 21, 180],
[16, 0, 71],
[16, 1, 240],
[16, 2, 239],
[16, 3, 210],
[16, 4, 153],
[16, 5, 69],
[16, 6, 159],
[16, 7, 261],
[16, 8, 55],
[16, 9, 77],
[16, 10, 87],
[16, 11, 104],
[16, 12, 338],
[16, 13, 134],
[16, 14, 195],
[16, 15, 337],
[16, 16, 291],
[16, 17, 135],
[16, 18, 137],
[16, 19, 216],
[16, 20, 175],
[16, 21, 195],
[17, 0, 210],
[17, 1, 317],
[17, 2, 232],
[17, 3, 130],
[17, 4, 140],
[17, 5, 253],
[17, 6, 107],
[17, 7, 209],
[17, 8, 196],
[17, 9, 277],
[17, 10, 264],
[17, 11, 238],
[17, 12, 68],
[17, 13, 293],
[17, 14, 175],
[17, 15, 186],
[17, 16, 279],
[17, 17, 348],
[17, 18, 171],
[17, 19, 327],
[17, 20, 252],
[17, 21, 238],
[18, 0, 248],
[18, 1, 204],
[18, 2, 76],
[18, 3, 73],
[18, 4, 280],
[18, 5, 133],
[18, 6, 99],
[18, 7, 142],
[18, 8, 185],
[18, 9, 138],
[18, 10, 228],
[18, 11, 261],
[18, 12, 271],
[18, 13, 296],
[18, 14, 185],
[18, 15, 243],
[18, 16, 97],
[18, 17, 225],
[18, 18, 123],
[18, 19, 105],
[18, 20, 274],
[18, 21, 179],
[19, 0, 108],
[19, 1, 88],
[19, 2, 272],
[19, 3, 61],
[19, 4, 91],
[19, 5, 130],
[19, 6, 104],
[19, 7, 257],
[19, 8, 115],
[19, 9, 274],
[19, 10, 321],
[19, 11, 242],
[19, 12, 301],
[19, 13, 64],
[19, 14, 84],
[19, 15, 142],
[19, 16, 77],
[19, 17, 202],
[19, 18, 185],
[19, 19, 55],
[19, 20, 114],
[19, 21, 285],
[20, 0, 75],
[20, 1, 327],
[20, 2, 319],
[20, 3, 74],
[20, 4, 80],
[20, 5, 141],
[20, 6, 273],
[20, 7, 62],
[20, 8, 323],
[20, 9, 333],
[20, 10, 291],
[20, 11, 333],
[20, 12, 189],
[20, 13, 85],
[20, 14, 281],
[20, 15, 219],
[20, 16, 63],
[20, 17, 97],
[20, 18, 108],
[20, 19, 275],
[20, 20, 318],
[20, 21, 117],
[21, 0, 223],
[21, 1, 329],
[21, 2, 139],
[21, 3, 107],
[21, 4, 159],
[21, 5, 277],
[21, 6, 312],
[21, 7, 346],
[21, 8, 280],
[21, 9, 212],
[21, 10, 84],
[21, 11, 175],
[21, 12, 313],
[21, 13, 69],
[21, 14, 336],
[21, 15, 148],
[21, 16, 277],
[21, 17, 142],
[21, 18, 170],
[21, 19, 324],
[21, 20, 134],
[21, 21, 275],
[22, 0, 68],
[22, 1, 230],
[22, 2, 347],
[22, 3, 206],
[22, 4, 341],
[22, 5, 187],
[22, 6, 273],
[22, 7, 199],
[22, 8, 242],
[22, 9, 210],
[22, 10, 176],
[22, 11, 322],
[22, 12, 222],
[22, 13, 294],
[22, 14, 192],
[22, 15, 176],
[22, 16, 222],
[22, 17, 157],
[22, 18, 141],
[22, 19, 60],
[22, 20, 170],
[22, 21, 102],
[23, 0, 249],
[23, 1, 179],
[23, 2, 160],
[23, 3, 64],
[23, 4, 348],
[23, 5, 182],
[23, 6, 335],
[23, 7, 287],
[23, 8, 300],
[23, 9, 73],
[23, 10, 175],
[23, 11, 201],
[23, 12, 99],
[23, 13, 306],
[23, 14, 87],
[23, 15, 330],
[23, 16, 75],
[23, 17, 246],
[23, 18, 196],
[23, 19, 176],
[23, 20, 144],
[23, 21, 63],
[24, 0, 212],
[24, 1, 202],
[24, 2, 318],
[24, 3, 209],
[24, 4, 82],
[24, 5, 165],
[24, 6, 132],
[24, 7, 196],
[24, 8, 75],
[24, 9, 290],
[24, 10, 193],
[24, 11, 218],
[24, 12, 199],
[24, 13, 141],
[24, 14, 101],
[24, 15, 178],
[24, 16, 161],
[24, 17, 79],
[24, 18, 241],
[24, 19, 53],
[24, 20, 187],
[24, 21, 126],
[25, 0, 337],
[25, 1, 347],
[25, 2, 186],
[25, 3, 215],
[25, 4, 145],
[25, 5, 267],
[25, 6, 93],
[25, 7, 164],
[25, 8, 102],
[25, 9, 172],
[25, 10, 162],
[25, 11, 342],
[25, 12, 290],
[25, 13, 99],
[25, 14, 75],
[25, 15, 277],
[25, 16, 311],
[25, 17, 241],
[25, 18, 200],
[25, 19, 87],
[25, 20, 132],
[25, 21, 274]
];
var realData = data.filter(item => {
return item[2] <= 100
});
// console.log(JSON.stringify(realData));
// 基于准备好的dom，初始化echarts实例
var axisType = {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
};
var option = {
backgroundColor: 'rgba(5, 19, 64, 0.7)',
grid: {
textStyle: {
color: '#fff',
},
show: true,
// backgroundColor: 'rgba(255, 255, 255, .03)',
borderWidth: 0,
containLabel: true,
left: 60,
right: 60,
top: 100,
bottom: 60,
},
title: {
text: '安全评分（年）',
textStyle: {
fontWeight: 400,
color: 'rgba(255,255,255,0.75)',
},
left: 50,
top: 20,
},
tooltip: {
formatter: function(params) {
return '[' + params.value[0] + ', ' + params.value[1] + ']: ' + params.value[2]
}
},
// animation: false,
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: HEAPMAP_XAXIS_DATA,
},
yAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: HEAPMAP_YAXIS_DATA,
},
visualMap: {
type: 'piecewise',
inverse: true,
show: true,
top: 65,
left: 50,
orient: 'horizontal',
textStyle: {
color: 'rgba(255,255,255,0.75)',
},
borderWidth: 0,
backgroundColor: 'transparent',
itemGap: 50,
itemHeight: 12,
itemWidth: 12,
dimension: 2,
itemSymbol: 'diamond',
pieces: [{
lt: 60,
color: '#40d8ff',
}, {
gte: 60,
lte: 80,
color: '#207fcf',
}, {
gte: 81,
lte: 100,
color: '#17507f',
}],
// 表示 目标系列 的视觉样式 和 visualMap-piecewise 共有的视觉样式。
inRange: {
// Sunrise Yellow / 日出
color: ['#ffffb8', '#fffb8f', '#fff566', '#fadb14', '#d4b106'],
symbol: 'rect',
symbolSize: [10, 10],
},
// 表示 visualMap-piecewise 本身的视觉样式，会覆盖共有的视觉样式。比如，symbolSize 覆盖成为 [30, 100]，而 color 不变。
controller: {
inRange: {
// Lime / 青柠
// color: ['#d3f261', '#bae637', '#5b8c00', '#3f6600', '#254000'],
symbol: 'diamond',
symbolSize: [8, 8],
},
},
outOfRange: {
// backgroundColor
color: ['rgba(63, 217, 254, 0.102)'],
symbolSize: [6, 6],
symbol: 'rect',
},
},
series: [{
name: '2048',
type: 'heatmap',
data: initData(),
label: false,
itemStyle: {
borderWidth: 1,
borderColor: 'rgba(5, 19, 64, 0.7)'
}
},
{
name: '2048',
type: 'heatmap',
data: realData,
label: false,
itemStyle: {
borderWidth: 1,
borderColor: 'rgba(5, 19, 64, 0.7)'
}
},
]
};
myChart.setOption(option);
myChart.resize({width:400,height: 400});
截图如下
