xinyi/public/static/echart/build/source/chart/heatmap.js

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;
});