| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <link rel="stylesheet" href="../common/reset.css"> |
| </head> |
| <body> |
| <div id="main" style="opacity: 0.4;"></div> |
| <script src="../common/echarts.min.js"></script> |
| <script src="../common/jquery.min.js"></script> |
| <script src="../common/echarts-gl.js"></script> |
| <script src="../common/sprite.js"></script> |
| <script> |
| var chart = echarts.init(document.getElementById('main')); |
| |
| var canvas = document.createElement('canvas'); |
| var sdfCanvas = document.createElement('canvas'); |
| var RANGE = 15; |
| |
| spriteUtil.createSymbolSprite('path://M292.235-334.88c-0.544-0.205-1.104-0.291-1.65-0.266c0.099-0.433,0.125-0.866,0.086-1.291\ |
| c-0.139-1.541-1.135-2.941-2.675-3.529c-1.584-0.599-3.302-0.173-4.428,0.948c0.446,0.004,0.898,0.088,1.338,0.256\ |
| c2.018,0.763,3.03,3.018,2.269,5.035c-0.281,0.743-0.767,1.35-1.364,1.784c-1.029,0.739-2.397,0.968-3.669,0.484\ |
| c-2.019-0.761-3.031-3.017-2.27-5.035c0.101-0.262,0.227-0.507,0.374-0.739h-0.002c0,0,0,0,0,0.002\ |
| c0.649-1.015,1.206-2.114,1.65-3.285c3.448-9.107-1.14-19.291-10.249-22.741c-9.111-3.449-19.291,1.139-22.741,10.247\ |
| c-0.943,2.485-1.285,5.049-1.099,7.537c0.004,0.082,0.012,0.166,0.02,0.25c0.736,8.456,6.184,16.162,14.651,19.367\ |
| c8.611,3.259,17.962,0.967,24.111-5.104c1.053-1.021,2.641-1.398,4.1-0.847c1.756,0.665,2.749,2.458,2.476,4.241\ |
| c0.657-0.463,1.189-1.12,1.498-1.932C295.478-331.653,294.391-334.064,292.235-334.88z', 100, { |
| fill: '#fff', |
| marginBias: 10 |
| }, canvas); |
| spriteUtil.createSDFFromCanvas(canvas, 40, RANGE, sdfCanvas); |
| |
| var ctx = sdfCanvas.getContext('2d'); |
| var imgData = ctx.getImageData(0, 0, sdfCanvas.width, sdfCanvas.height); |
| var data = []; |
| var xData = []; |
| var yData = []; |
| var sdfHeight = sdfCanvas.height; |
| var sdfWidth = sdfCanvas.width; |
| for (var i = 0; i < sdfHeight; i++) { |
| yData.push(i); |
| for (var j = 0; j < sdfWidth; j++) { |
| var idx = i * sdfWidth + j; |
| var r = imgData.data[idx * 4]; |
| data.push([j, sdfHeight - i - 1, r]); |
| } |
| } |
| for (var j = 0; j < sdfWidth; j++) { |
| xData.push(j); |
| } |
| |
| chart.setOption({ |
| tooltip: {}, |
| xAxis: { |
| type: 'category', |
| data: xData, |
| show: false |
| }, |
| yAxis: { |
| type: 'category', |
| data: yData, |
| show: false |
| }, |
| grid: { |
| left:0, |
| top:0, |
| right:0, |
| bottom:0 |
| }, |
| visualMap: { |
| show: false, |
| // type: 'piecewise', |
| min: 0, |
| max: 255, |
| // splitNumber: 8, |
| inRange: { |
| color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] |
| } |
| }, |
| series: [{ |
| name: 'Gaussian', |
| type: 'heatmap', |
| data: data, |
| label: { |
| normal: { |
| show: true, |
| textStyle: { |
| color: 'rgba(255,255,255,0.4)' |
| }, |
| formatter: function (param) { |
| return -((param.value[2] / 255 - 0.5) * RANGE * 2).toFixed(0); |
| } |
| } |
| }, |
| itemStyle: { |
| emphasis: { |
| borderColor: '#333', |
| borderWidth: 2 |
| } |
| }, |
| silent: true, |
| progressive: 1000, |
| // silent: true, |
| // progressive: 0, |
| // progressiveThreshold: 30000, |
| animation: false |
| }] |
| }); |
| |
| </script> |
| </body> |
| </html> |
