From f102447f03d2eb3439d54358a172a405649d425d Mon Sep 17 00:00:00 2001
From: lang <bm2736892@gmail.com>
Date: Thu, 10 Dec 2015 19:44:14 +0800
Subject: [PATCH] Heatmap of cartesian

---
 src/chart/bar/BarView.js           | 14 +++--
 src/chart/heatmap.js               |  5 ++
 src/chart/heatmap/HeatmapSeries.js | 34 ++++++++++++
 src/chart/heatmap/HeatmapView.js   | 81 +++++++++++++++++++++++++++
 test/heatmap.html                  | 88 ++++++++++++++++++++++++++++++
 5 files changed, 216 insertions(+), 6 deletions(-)
 create mode 100644 src/chart/heatmap.js
 create mode 100644 src/chart/heatmap/HeatmapSeries.js
 create mode 100644 src/chart/heatmap/HeatmapView.js
 create mode 100644 test/heatmap.html

diff --git a/src/chart/bar/BarView.js b/src/chart/bar/BarView.js
index 9aa302383..b5f86eafd 100644
--- a/src/chart/bar/BarView.js
+++ b/src/chart/bar/BarView.js
@@ -24,13 +24,13 @@ define(function (require) {
             var coordinateSystemType = seriesModel.get('coordinateSystem');
 
             if (coordinateSystemType === 'cartesian2d') {
-                this._renderCartesian(seriesModel, ecModel, api);
+                this._renderOnCartesian(seriesModel, ecModel, api);
             }
 
             return this.group;
         },
 
-        _renderCartesian: function (seriesModel, ecModel, api) {
+        _renderOnCartesian: function (seriesModel, ecModel, api) {
             var group = this.group;
             var data = seriesModel.getData();
             var oldData = this._data;
@@ -153,12 +153,12 @@ define(function (require) {
 
                 var labelModel = itemModel.getModel('label.normal');
                 var hoverLabelModel = itemModel.getModel('label.emphasis');
-                var labelText = seriesModel.getFormattedLabel(idx, 'normal')
-                            || data.getRawValue(idx);
                 var rectStyle = rect.style;
                 if (labelModel.get('show')) {
                     setLabel(
-                        rectStyle, labelModel, color, labelText, labelPositionOutside
+                        rectStyle, labelModel, color,
+                        seriesModel.getFormattedLabel(idx, 'normal') || data.getRawValue(idx),
+                        labelPositionOutside
                     );
                 }
                 else {
@@ -166,7 +166,9 @@ define(function (require) {
                 }
                 if (hoverLabelModel.get('show')) {
                     setLabel(
-                        hoverStyle, hoverLabelModel, color, labelText, labelPositionOutside
+                        hoverStyle, hoverLabelModel, color,
+                        seriesModel.getFormattedLabel(idx, 'emphasis') || data.getRawValue(idx),
+                        labelPositionOutside
                     );
                 }
                 else {
diff --git a/src/chart/heatmap.js b/src/chart/heatmap.js
new file mode 100644
index 000000000..b16b31a7e
--- /dev/null
+++ b/src/chart/heatmap.js
@@ -0,0 +1,5 @@
+define(function (require) {
+
+    require('./heatmap/HeatmapSeries');
+    require('./heatmap/HeatmapView');
+});
\ No newline at end of file
diff --git a/src/chart/heatmap/HeatmapSeries.js b/src/chart/heatmap/HeatmapSeries.js
new file mode 100644
index 000000000..07235f732
--- /dev/null
+++ b/src/chart/heatmap/HeatmapSeries.js
@@ -0,0 +1,34 @@
+define(function (require) {
+
+    var SeriesModel = require('../../model/Series');
+    var createListFromArray = require('../helper/createListFromArray');
+
+    return SeriesModel.extend({
+        type: 'series.heatmap',
+
+        getInitialData: function (option, ecModel) {
+            return createListFromArray(option.data, this, ecModel);
+        },
+
+        defaultOption: {
+
+            // Cartesian2D or geo
+            coordinateSystem: 'cartesian2d',
+
+            zlevel: 0,
+
+            z: 2,
+
+            // Cartesian coordinate system
+            xAxisIndex: 0,
+            yAxisIndex: 0,
+
+            // Geo coordinate system
+            geoIndex: 0,
+
+            // No blur
+            // Available when heatmap is on geo
+            blurSize: 0
+        }
+    });
+});
\ No newline at end of file
diff --git a/src/chart/heatmap/HeatmapView.js b/src/chart/heatmap/HeatmapView.js
new file mode 100644
index 000000000..15bb7ea11
--- /dev/null
+++ b/src/chart/heatmap/HeatmapView.js
@@ -0,0 +1,81 @@
+define(function (require) {
+
+    var graphic = require('../../util/graphic');
+
+    return require('../../echarts').extendChartView({
+
+        type: 'heatmap',
+
+        render: function (seriesModel, ecModel, api) {
+            var coordSys = seriesModel.coordinateSystem;
+            if (coordSys.type === 'cartesian2d') {
+                this._renderOnCartesian(coordSys, seriesModel, ecModel, api);
+            }
+            else if (coordSys.type === 'geo') {
+                this._renderOnGeo(coordSys, seriesModel, ecModel, api);
+            }
+        },
+
+        _renderOnCartesian: function (cartesian, seriesModel, ecModel, api) {
+            var xAxis = cartesian.getAxis('x');
+            var yAxis = cartesian.getAxis('y');
+            var group = this.group;
+            group.removeAll();
+
+            if (!(xAxis.type === 'category' && yAxis.type === 'category')) {
+                throw new Error('Heatmap on cartesian must have two category axes');
+            }
+            if (!(xAxis.onBand && yAxis.onBand)) {
+                throw new Error('Heatmap on cartesian must have two axes with boundaryGap true');
+            }
+            var width = xAxis.getBandWidth();
+            var height = yAxis.getBandWidth();
+
+            var data = seriesModel.getData();
+            data.each(['x', 'y', 'z'], function (x, y, z, idx) {
+                var itemModel = data.getItemModel(idx);
+                var point = cartesian.dataToPoint([x, y]);
+                var rect = new graphic.Rect({
+                    shape: {
+                        x: point[0] - width / 2,
+                        y: point[1] - height / 2,
+                        width: width,
+                        height: height
+                    },
+                    style: {
+                        fill: data.getItemVisual(idx, 'color')
+                    }
+                });
+                var style = itemModel.getModel('itemStyle.normal').getItemStyle(['color']);
+                var hoverStl = itemModel.getModel('itemStyle.emphasis').getItemStyle();
+                var labelModel = itemModel.getModel('label.normal');
+                var hoverLabelModel = itemModel.getModel('label.emphasis');
+
+                var rawValue = data.getRawValue(idx);
+                var defaultText = '-';
+                if (rawValue && rawValue[2] != null) {
+                    defaultText = rawValue[2];
+                }
+                if (labelModel.get('show')) {
+                    graphic.setText(style, labelModel);
+                    style.text = seriesModel.getFormattedLabel(idx, 'normal') || defaultText;
+                }
+                if (hoverLabelModel.get('show')) {
+                    graphic.setText(hoverStl, hoverLabelModel);
+                    hoverStl.text = seriesModel.getFormattedLabel(idx, 'emphasis') || defaultText;
+                }
+
+                rect.setStyle(style);
+
+                graphic.setHoverStyle(rect, hoverStl);
+
+                group.add(rect);
+                data.setItemGraphicEl(idx, rect);
+            });
+        },
+
+        _renderOnGeo: function (geo, seriesModel, ecModel, api) {
+
+        }
+    });
+});
\ No newline at end of file
diff --git a/test/heatmap.html b/test/heatmap.html
new file mode 100644
index 000000000..09c483a2c
--- /dev/null
+++ b/test/heatmap.html
@@ -0,0 +1,88 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/heatmap',
+                'echarts/component/legend',
+                'echarts/component/dataRange',
+                'echarts/component/grid',
+                'echarts/component/polar',
+                'echarts/component/tooltip'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'));
+
+                var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
+                        '7a', '8a', '9a','10a','11a',
+                        '12p', '1p', '2p', '3p', '4p', '5p',
+                        '6p', '7p', '8p', '9p', '10p', '11p'];
+                var days = ['Saturday', 'Friday', 'Thursday',
+                        'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+
+                var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
+
+                data = data.map(function (item) {
+                    return [item[1], item[0], item[2]];
+                });
+
+                chart.setOption({
+                    tooltip: {
+                        position: 'top'
+                    },
+                    animation: false,
+                    grid: {
+                        height: 300
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: hours
+                    },
+                    yAxis: {
+                        type: 'category',
+                        data: days
+                    },
+                    dataRange: {
+                        min: 0,
+                        max: 10,
+                        // calculable: true,
+                        range: [1, 10],
+                        color: ['darkgreen','lightgreen']
+                    },
+                    series: [{
+                        name: 'Punch Card',
+                        type: 'heatmap',
+                        data: data,
+                        label: {
+                            normal: {
+                                show: true
+                            }
+                        },
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }]
+                });
+            });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file
-- 
GitLab