Toggle navigation
热力图网格
By
梦***7
2020-03-04 07:19:51
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
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});
