286 lines
11 KiB
JavaScript
286 lines
11 KiB
JavaScript
define('echarts/chart/heatmap', [
|
|
'require',
|
|
'./base',
|
|
'../layer/heatmap',
|
|
'../config',
|
|
'../util/ecData',
|
|
'zrender/tool/util',
|
|
'zrender/tool/color',
|
|
'zrender/shape/Image',
|
|
'../chart'
|
|
], function (require) {
|
|
var ChartBase = require('./base');
|
|
var HeatmapLayer = require('../layer/heatmap');
|
|
var ecConfig = require('../config');
|
|
var ecData = require('../util/ecData');
|
|
var zrUtil = require('zrender/tool/util');
|
|
var zrColor = require('zrender/tool/color');
|
|
var zrImage = require('zrender/shape/Image');
|
|
ecConfig.heatmap = {
|
|
zlevel: 0,
|
|
z: 2,
|
|
clickable: true
|
|
};
|
|
function Heatmap(ecTheme, messageCenter, zr, option, myChart) {
|
|
ChartBase.call(this, ecTheme, messageCenter, zr, option, myChart);
|
|
this.refresh(option);
|
|
}
|
|
Heatmap.prototype = {
|
|
type: ecConfig.CHART_TYPE_HEATMAP,
|
|
refresh: function (newOption) {
|
|
this.clear();
|
|
if (newOption) {
|
|
this.option = newOption;
|
|
this.series = newOption.series;
|
|
}
|
|
this._init();
|
|
},
|
|
_init: function () {
|
|
var series = this.series;
|
|
this.backupShapeList();
|
|
var len = series.length;
|
|
for (var i = 0; i < len; ++i) {
|
|
if (series[i].type === ecConfig.CHART_TYPE_HEATMAP) {
|
|
series[i] = this.reformOption(series[i]);
|
|
var layer = new HeatmapLayer(series[i]);
|
|
var canvas = layer.getCanvas(series[i].data, this.zr.getWidth(), this.zr.getHeight());
|
|
var image = new zrImage({
|
|
position: [
|
|
0,
|
|
0
|
|
],
|
|
scale: [
|
|
1,
|
|
1
|
|
],
|
|
hoverable: this.option.hoverable,
|
|
style: {
|
|
x: 0,
|
|
y: 0,
|
|
image: canvas,
|
|
width: canvas.width,
|
|
height: canvas.height
|
|
}
|
|
});
|
|
this.shapeList.push(image);
|
|
}
|
|
}
|
|
this.addShapeList();
|
|
}
|
|
};
|
|
zrUtil.inherits(Heatmap, ChartBase);
|
|
require('../chart').define('heatmap', Heatmap);
|
|
return Heatmap;
|
|
});define('echarts/layer/heatmap', ['require'], function (require) {
|
|
var defaultOptions = {
|
|
blurSize: 30,
|
|
gradientColors: [
|
|
'blue',
|
|
'cyan',
|
|
'lime',
|
|
'yellow',
|
|
'red'
|
|
],
|
|
minAlpha: 0.05,
|
|
valueScale: 1,
|
|
opacity: 1
|
|
};
|
|
var BRUSH_SIZE = 20;
|
|
var GRADIENT_LEVELS = 256;
|
|
function Heatmap(opt) {
|
|
this.option = opt;
|
|
if (opt) {
|
|
for (var i in defaultOptions) {
|
|
if (opt[i] !== undefined) {
|
|
this.option[i] = opt[i];
|
|
} else {
|
|
this.option[i] = defaultOptions[i];
|
|
}
|
|
}
|
|
} else {
|
|
this.option = defaultOptions;
|
|
}
|
|
}
|
|
Heatmap.prototype = {
|
|
getCanvas: function (data, width, height) {
|
|
var brush = this._getBrush();
|
|
var gradient = this._getGradient();
|
|
var r = BRUSH_SIZE + this.option.blurSize;
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
var ctx = canvas.getContext('2d');
|
|
var len = data.length;
|
|
for (var i = 0; i < len; ++i) {
|
|
var p = data[i];
|
|
var x = p[0];
|
|
var y = p[1];
|
|
var value = p[2];
|
|
var alpha = Math.min(1, Math.max(value * this.option.valueScale || this.option.minAlpha, this.option.minAlpha));
|
|
ctx.globalAlpha = alpha;
|
|
ctx.drawImage(brush, x - r, y - r);
|
|
}
|
|
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
var pixels = imageData.data;
|
|
var len = pixels.length / 4;
|
|
while (len--) {
|
|
var id = len * 4 + 3;
|
|
var alpha = pixels[id] / 256;
|
|
var colorOffset = Math.floor(alpha * (GRADIENT_LEVELS - 1));
|
|
pixels[id - 3] = gradient[colorOffset * 4];
|
|
pixels[id - 2] = gradient[colorOffset * 4 + 1];
|
|
pixels[id - 1] = gradient[colorOffset * 4 + 2];
|
|
pixels[id] *= this.option.opacity;
|
|
}
|
|
ctx.putImageData(imageData, 0, 0);
|
|
return canvas;
|
|
},
|
|
_getBrush: function () {
|
|
if (!this._brushCanvas) {
|
|
this._brushCanvas = document.createElement('canvas');
|
|
var r = BRUSH_SIZE + this.option.blurSize;
|
|
var d = r * 2;
|
|
this._brushCanvas.width = d;
|
|
this._brushCanvas.height = d;
|
|
var ctx = this._brushCanvas.getContext('2d');
|
|
ctx.shadowOffsetX = d;
|
|
ctx.shadowBlur = this.option.blurSize;
|
|
ctx.shadowColor = 'black';
|
|
ctx.beginPath();
|
|
ctx.arc(-r, r, BRUSH_SIZE, 0, Math.PI * 2, true);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
return this._brushCanvas;
|
|
},
|
|
_getGradient: function () {
|
|
if (!this._gradientPixels) {
|
|
var levels = GRADIENT_LEVELS;
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = 1;
|
|
canvas.height = levels;
|
|
var ctx = canvas.getContext('2d');
|
|
var gradient = ctx.createLinearGradient(0, 0, 0, levels);
|
|
var len = this.option.gradientColors.length;
|
|
for (var i = 0; i < len; ++i) {
|
|
if (typeof this.option.gradientColors[i] === 'string') {
|
|
gradient.addColorStop((i + 1) / len, this.option.gradientColors[i]);
|
|
} else {
|
|
gradient.addColorStop(this.option.gradientColors[i].offset, this.option.gradientColors[i].color);
|
|
}
|
|
}
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, 1, levels);
|
|
this._gradientPixels = ctx.getImageData(0, 0, 1, levels).data;
|
|
}
|
|
return this._gradientPixels;
|
|
}
|
|
};
|
|
return Heatmap;
|
|
});define('echarts/layer/heatmap', ['require'], function (require) {
|
|
var defaultOptions = {
|
|
blurSize: 30,
|
|
gradientColors: [
|
|
'blue',
|
|
'cyan',
|
|
'lime',
|
|
'yellow',
|
|
'red'
|
|
],
|
|
minAlpha: 0.05,
|
|
valueScale: 1,
|
|
opacity: 1
|
|
};
|
|
var BRUSH_SIZE = 20;
|
|
var GRADIENT_LEVELS = 256;
|
|
function Heatmap(opt) {
|
|
this.option = opt;
|
|
if (opt) {
|
|
for (var i in defaultOptions) {
|
|
if (opt[i] !== undefined) {
|
|
this.option[i] = opt[i];
|
|
} else {
|
|
this.option[i] = defaultOptions[i];
|
|
}
|
|
}
|
|
} else {
|
|
this.option = defaultOptions;
|
|
}
|
|
}
|
|
Heatmap.prototype = {
|
|
getCanvas: function (data, width, height) {
|
|
var brush = this._getBrush();
|
|
var gradient = this._getGradient();
|
|
var r = BRUSH_SIZE + this.option.blurSize;
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
var ctx = canvas.getContext('2d');
|
|
var len = data.length;
|
|
for (var i = 0; i < len; ++i) {
|
|
var p = data[i];
|
|
var x = p[0];
|
|
var y = p[1];
|
|
var value = p[2];
|
|
var alpha = Math.min(1, Math.max(value * this.option.valueScale || this.option.minAlpha, this.option.minAlpha));
|
|
ctx.globalAlpha = alpha;
|
|
ctx.drawImage(brush, x - r, y - r);
|
|
}
|
|
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
var pixels = imageData.data;
|
|
var len = pixels.length / 4;
|
|
while (len--) {
|
|
var id = len * 4 + 3;
|
|
var alpha = pixels[id] / 256;
|
|
var colorOffset = Math.floor(alpha * (GRADIENT_LEVELS - 1));
|
|
pixels[id - 3] = gradient[colorOffset * 4];
|
|
pixels[id - 2] = gradient[colorOffset * 4 + 1];
|
|
pixels[id - 1] = gradient[colorOffset * 4 + 2];
|
|
pixels[id] *= this.option.opacity;
|
|
}
|
|
ctx.putImageData(imageData, 0, 0);
|
|
return canvas;
|
|
},
|
|
_getBrush: function () {
|
|
if (!this._brushCanvas) {
|
|
this._brushCanvas = document.createElement('canvas');
|
|
var r = BRUSH_SIZE + this.option.blurSize;
|
|
var d = r * 2;
|
|
this._brushCanvas.width = d;
|
|
this._brushCanvas.height = d;
|
|
var ctx = this._brushCanvas.getContext('2d');
|
|
ctx.shadowOffsetX = d;
|
|
ctx.shadowBlur = this.option.blurSize;
|
|
ctx.shadowColor = 'black';
|
|
ctx.beginPath();
|
|
ctx.arc(-r, r, BRUSH_SIZE, 0, Math.PI * 2, true);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
return this._brushCanvas;
|
|
},
|
|
_getGradient: function () {
|
|
if (!this._gradientPixels) {
|
|
var levels = GRADIENT_LEVELS;
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = 1;
|
|
canvas.height = levels;
|
|
var ctx = canvas.getContext('2d');
|
|
var gradient = ctx.createLinearGradient(0, 0, 0, levels);
|
|
var len = this.option.gradientColors.length;
|
|
for (var i = 0; i < len; ++i) {
|
|
if (typeof this.option.gradientColors[i] === 'string') {
|
|
gradient.addColorStop((i + 1) / len, this.option.gradientColors[i]);
|
|
} else {
|
|
gradient.addColorStop(this.option.gradientColors[i].offset, this.option.gradientColors[i].color);
|
|
}
|
|
}
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, 1, levels);
|
|
this._gradientPixels = ctx.getImageData(0, 0, 1, levels).data;
|
|
}
|
|
return this._gradientPixels;
|
|
}
|
|
};
|
|
return Heatmap;
|
|
}); |