fix month center

src/component/calendar/CalendarView.js

@@ -103,6 +103,7 @@ define(function (require) {
             this._tlpoints = [];
             this._blpoints = [];
             this._firstDayOfMonth = [];
+            this._firstDayPoints = [];
 
 
             var firstDay = coordSys.getYMDInfo(rangeData.range[0]);
@@ -124,6 +125,7 @@ define(function (require) {
             function addPoints(date) {
 
                 self._firstDayOfMonth.push(coordSys.getYMDInfo(date));
+                self._firstDayPoints.push(coordSys.dateToPonitFour(date).TL);
 
                 var points = self._getLinePointsOfSeven(calendarModel, date, orient);
 
@@ -252,7 +254,7 @@ define(function (require) {
                 right: [points[idx][0], yc]
             };
 
-            var coordSys = calendarModel.coordinateSystem;
+            // var coordSys = calendarModel.coordinateSystem;
 
             var content = rangeData.start.y;
 
@@ -275,12 +277,10 @@ define(function (require) {
                 content = formatter(params);
             }
 
-            var rotateOpt = {};
-
             var loc = this._yearTextPositionControl(posPoints[pos], orient, pos, padding);
 
             if (pos === 'left' || pos === 'right') {
-                rotateOpt = {
+                var rotateOpt = {
                     rotation: Math.PI / 2,
                     origin: [loc.x, loc.y]
                 };
@@ -314,7 +314,7 @@ define(function (require) {
                     align = 'center';
                 }
 
-                if (position === 'top') {
+                if (position === 'start') {
                     vAlign = 'bottom';
                 }
             }
@@ -325,7 +325,7 @@ define(function (require) {
                     vAlign = 'middle';
                 }
 
-                if (position === 'top') {
+                if (position === 'start') {
                     align = 'right';
                 }
             }
@@ -360,10 +360,9 @@ define(function (require) {
                 nameMap = MONTHTEXT[nameMap.toUpperCase()] || [];
             }
 
-            pos = pos === 'left' ? 'top' : pos;
-            var idx = pos === 'top' ? 0 : 1;
+            var idx = pos === 'start' ? 0 : 1;
             var axis = orient === 'horizontal' ? 0 : 1;
-            padding = pos === 'top' ? -padding : padding;
+            padding = pos === 'start' ? -padding : padding;
             var isCenter = posAlign === 'center' ? true : false;
 
             for (var i = 0; i < termPoints[idx].length - 1; i++) {
@@ -372,14 +371,17 @@ define(function (require) {
                 var firstDay = this._firstDayOfMonth[i];
 
                 if (isCenter) {
-                    tmp[axis] = (tmp[axis] + termPoints[1 - idx][i + 1][axis]) / 2;
+                    var firstDayPoints = this._firstDayPoints[i];
+                    tmp[axis] = (firstDayPoints[axis] + termPoints[0][i + 1][axis]) / 2;
                 }
 
                 var formatter = monthLabel.get('formatter');
                 var content = nameMap[+firstDay.m - 1];
                 var params = {
                     yyyy: firstDay.y,
-                    MM: +firstDay.m,
+                    yy: (firstDay.y + '').slice(2),
+                    MM: firstDay.m,
+                    M: +firstDay.m,
                     nameMap: content
                 };
 
@@ -412,7 +414,7 @@ define(function (require) {
             if (orient === 'horizontal') {
                 x = x + padding;
 
-                if (position === 'top') {
+                if (position === 'start') {
                     align = 'right';
                 }
             }
@@ -444,8 +446,6 @@ define(function (require) {
             var padding = dayLabel.get('padding');
             var firstDay = coordSys.getFirstDayWeek();
 
-            pos = (pos === 'left') ? 'top' : pos;
-
             if (zrUtil.isString(nameMap)) {
                 nameMap = WEEKTEXT[nameMap.toUpperCase()] || [];
             }
@@ -454,7 +454,7 @@ define(function (require) {
                 rangeData.end.time, (7 - rangeData.lweek)
             ).time;
 
-            if (pos === 'top') {
+            if (pos === 'start') {
                 start = coordSys.getNextNDay(
                     rangeData.start.time, -(7 + rangeData.fweek)
                 ).time;

src/coord/calendar/CalendarModel.js

@@ -29,7 +29,9 @@ define(function (require) {
             top: 60,
 
             cellSize: 20,
-            orient: 'horizontal', // horizontal vertical
+
+            // horizontal vertical
+            orient: 'horizontal',
 
             // month separate line style
             splitLine: {
@@ -55,7 +57,9 @@ define(function (require) {
                 show: true,
                 padding: 0,
                 firstDay: 0,
-                position: 'top', // top = left bottom = right
+
+                // start end
+                position: 'start',
                 nameMap: 'en',
                 textStyle: {
                     color: '#000'
@@ -65,21 +69,28 @@ define(function (require) {
             // month text style
             monthLabel: {
                 show: true,
+
+                // cn en []
                 nameMap: 'en',
-                position: 'top', // top = left bottom = right
-                posAlign: 'center', // center or left
+
+                // start end
+                position: 'start',
+
+                // center or left
+                posAlign: 'center',
                 padding: 5,
                 formatter: null,
                 textStyle: {
-                    color: '#000',
-                    fontSize: 14
+                    color: '#000'
                 }
             },
 
             // year text style
             yearLabel: {
                 show: true,
-                position: null, // top bottom left right
+
+                // top bottom left right
+                position: null,
                 padding: 30,
                 formatter: null,
                 textStyle: {

test/calendar-heatmap.html

@@ -40,7 +40,7 @@
                 for (var i = 1; i <= 29; i++) {
                     datas.push([(new Date(year + '-2-' + i)), Math.floor(Math.random() * 1000)]);
                 }
-                return [];
+                return datas;
             }
             require([
                 'echarts',
@@ -73,11 +73,11 @@
 
                     calendar: {
                         orient: 'horizontal',
-                       // cellSize: 20,
-                        range: ['2017-12-20', '2018-01-31']
+                        cellSize: 50,
+                        range: '2017-12'
                     },
                     series: {
-                        type: 'heatmap',
+                        type: 'effectScatter',
                         coordinateSystem: 'calendar',
                         data: getVirtulData(2017)
                     }