diff --git a/doc/example/map1.html b/doc/example/map1.html
index 39aea60d4a..577e07db84 100644
--- a/doc/example/map1.html
+++ b/doc/example/map1.html
@@ -67,7 +67,7 @@
calculable : true
},
toolbox: {
- show : true,
+ show: true,
orient : 'vertical',
x: 'right',
y: 'center',
@@ -78,12 +78,19 @@
saveAsImage : {show: true}
}
},
+ roamController: {
+ show: true,
+ x: 'right',
+ mapTypeControl: {
+ 'china': true
+ }
+ },
series : [
{
name: 'iphone3',
type: 'map',
mapType: 'china',
- roam: true,
+ roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
diff --git a/src/chart/map.js b/src/chart/map.js
index e48a569daf..6a98078461 100644
--- a/src/chart/map.js
+++ b/src/chart/map.js
@@ -19,6 +19,7 @@ define(function (require) {
var EllipseShape = require('zrender/shape/Ellipse');
// 组件依赖
require('../component/dataRange');
+ require('../component/roamController');
var ecConfig = require('../config');
var ecData = require('../util/ecData');
@@ -44,18 +45,21 @@ define(function (require) {
ChartBase.call(this);
var self = this;
- self._onmousewheel = function(param){
- return self.__onmousewheel(param);
+ self._onmousewheel = function(params) {
+ return self.__onmousewheel(params);
};
- self._onmousedown = function(param){
- return self.__onmousedown(param);
+ self._onmousedown = function(params) {
+ return self.__onmousedown(params);
};
- self._onmousemove = function(param){
- return self.__onmousemove(param);
+ self._onmousemove = function(params) {
+ return self.__onmousemove(params);
};
- self._onmouseup = function(param){
- return self.__onmouseup(param);
+ self._onmouseup = function(params) {
+ return self.__onmouseup(params);
};
+ self._onroamcontroller = function(params) {
+ return self.__onroamcontroller(params);
+ }
this._isAlive = true; // 活着标记
this._selectedMode = {}; // 选择模式
@@ -87,6 +91,8 @@ define(function (require) {
this.zr.on(zrConfig.EVENT.MOUSEWHEEL, this._onmousewheel);
this.zr.on(zrConfig.EVENT.MOUSEDOWN, this._onmousedown);
}
+
+ messageCenter.bind(ecConfig.EVENT.ROAMCONTROLLER, this._onroamcontroller);
}
Map.prototype = {
@@ -1001,105 +1007,121 @@ define(function (require) {
/**
* 滚轮缩放
*/
- __onmousewheel : function (param) {
+ __onmousewheel : function (params) {
if (this.shapeList.length <= 0) {
return;
}
- var event = param.event;
+
+ var event = params.event;
var mx = zrEvent.getX(event);
var my = zrEvent.getY(event);
var delta = zrEvent.getDelta(event);
//delta = delta > 0 ? (-1) : 1;
- var mapType = this._findMapTypeByPos(mx, my);
- if (mapType) {
- zrEvent.stop(event);
- var transform = this._mapDataMap[mapType].transform;
- var left = transform.left;
- var top = transform.top;
- var width = transform.width;
- var height = transform.height;
- // 位置转经纬度
- var geoAndPos = this.pos2geo(mapType, [mx - left, my - top]);
- if (delta > 0) {
- delta = 1.2; // 放大
- if (typeof this._scaleLimitMap[mapType].max != 'undefined'
- && transform.baseScale >= this._scaleLimitMap[mapType].max
- ) {
- return; // 缩放限制
- }
- }
- else {
- delta = 1 / 1.2; // 缩小
- if (typeof this._scaleLimitMap[mapType].min != 'undefined'
- && transform.baseScale <= this._scaleLimitMap[mapType].min
- ) {
- return; // 缩放限制
- }
+ var mapType;
+ var mapTypeControl = params.mapTypeControl;
+ if (!mapTypeControl) {
+ mapTypeControl = {};
+ mapType = this._findMapTypeByPos(mx, my);
+ if (mapType) {
+ mapTypeControl[mapType] = true;
}
- transform.baseScale *= delta;
- transform.scale.x *= delta;
- transform.scale.y *= delta;
- transform.width = width * delta;
- transform.height = height * delta;
-
- this._mapDataMap[mapType].hasRoam = true;
- this._mapDataMap[mapType].transform = transform;
- // 经纬度转位置
- geoAndPos = this.geo2pos(mapType, geoAndPos);
- // 保持视觉中心
- transform.left -= geoAndPos[0] - (mx - left);
- transform.top -= geoAndPos[1] - (my - top);
- this._mapDataMap[mapType].transform = transform;
-
- this.clearEffectShape(true);
- for (var i = 0, l = this.shapeList.length; i < l; i++) {
- if(this.shapeList[i]._mapType == mapType) {
- this.shapeList[i].position[0] = transform.left;
- this.shapeList[i].position[1] = transform.top;
- if (this.shapeList[i].type == 'path'
- || this.shapeList[i].type == 'symbol'
- || this.shapeList[i].type == 'circle'
- || this.shapeList[i].type == 'rectangle'
- || this.shapeList[i].type == 'polygon'
- || this.shapeList[i].type == 'line'
- || this.shapeList[i].type == 'ellipse'
+ }
+
+ var haveScale = false;
+ for (mapType in mapTypeControl) {
+ if (mapTypeControl[mapType]) {
+ haveScale = true;
+ var transform = this._mapDataMap[mapType].transform;
+ var left = transform.left;
+ var top = transform.top;
+ var width = transform.width;
+ var height = transform.height;
+ // 位置转经纬度
+ var geoAndPos = this.pos2geo(mapType, [mx - left, my - top]);
+ if (delta > 0) {
+ delta = 1.2; // 放大
+ if (typeof this._scaleLimitMap[mapType].max != 'undefined'
+ && transform.baseScale >= this._scaleLimitMap[mapType].max
) {
- this.shapeList[i].scale[0] *= delta;
- this.shapeList[i].scale[1] *= delta;
- }
- else if (this.shapeList[i].type == 'mark-line') {
- this.shapeList[i].style.pointListLength = undefined;
- this.shapeList[i].style.pointList = false;
- geoAndPos = this.geo2pos(mapType, this.shapeList[i]._geo[0]);
- this.shapeList[i].style.xStart = geoAndPos[0];
- this.shapeList[i].style.yStart = geoAndPos[1];
- geoAndPos = this.geo2pos(mapType, this.shapeList[i]._geo[1]);
- this.shapeList[i]._x = this.shapeList[i].style.xEnd = geoAndPos[0];
- this.shapeList[i]._y = this.shapeList[i].style.yEnd = geoAndPos[1];
+ return; // 缩放限制
}
- else if (this.shapeList[i].type == 'icon') {
- geoAndPos = this.geo2pos(mapType, this.shapeList[i]._geo);
- this.shapeList[i].style.x = this.shapeList[i].style._x =
- geoAndPos[0] - this.shapeList[i].style.width / 2;
- this.shapeList[i].style.y = this.shapeList[i].style._y =
- geoAndPos[1] - this.shapeList[i].style.height / 2;
+ }
+ else {
+ delta = 1 / 1.2; // 缩小
+ if (typeof this._scaleLimitMap[mapType].min != 'undefined'
+ && transform.baseScale <= this._scaleLimitMap[mapType].min
+ ) {
+ return; // 缩放限制
}
- else {
- geoAndPos = this.geo2pos(mapType, this.shapeList[i]._geo);
- this.shapeList[i].style.x = geoAndPos[0];
- this.shapeList[i].style.y = geoAndPos[1];
- if (this.shapeList[i].type == 'text') {
- this.shapeList[i]._style.x = this.shapeList[i].highlightStyle.x
- = geoAndPos[0];
- this.shapeList[i]._style.y = this.shapeList[i].highlightStyle.y
- = geoAndPos[1];
+ }
+
+ transform.baseScale *= delta;
+ transform.scale.x *= delta;
+ transform.scale.y *= delta;
+ transform.width = width * delta;
+ transform.height = height * delta;
+
+ this._mapDataMap[mapType].hasRoam = true;
+ this._mapDataMap[mapType].transform = transform;
+ // 经纬度转位置
+ geoAndPos = this.geo2pos(mapType, geoAndPos);
+ // 保持视觉中心
+ transform.left -= geoAndPos[0] - (mx - left);
+ transform.top -= geoAndPos[1] - (my - top);
+ this._mapDataMap[mapType].transform = transform;
+
+ this.clearEffectShape(true);
+ for (var i = 0, l = this.shapeList.length; i < l; i++) {
+ if(this.shapeList[i]._mapType == mapType) {
+ this.shapeList[i].position[0] = transform.left;
+ this.shapeList[i].position[1] = transform.top;
+ if (this.shapeList[i].type == 'path'
+ || this.shapeList[i].type == 'symbol'
+ || this.shapeList[i].type == 'circle'
+ || this.shapeList[i].type == 'rectangle'
+ || this.shapeList[i].type == 'polygon'
+ || this.shapeList[i].type == 'line'
+ || this.shapeList[i].type == 'ellipse'
+ ) {
+ this.shapeList[i].scale[0] *= delta;
+ this.shapeList[i].scale[1] *= delta;
+ }
+ else if (this.shapeList[i].type == 'mark-line') {
+ this.shapeList[i].style.pointListLength = undefined;
+ this.shapeList[i].style.pointList = false;
+ geoAndPos = this.geo2pos(mapType, this.shapeList[i]._geo[0]);
+ this.shapeList[i].style.xStart = geoAndPos[0];
+ this.shapeList[i].style.yStart = geoAndPos[1];
+ geoAndPos = this.geo2pos(mapType, this.shapeList[i]._geo[1]);
+ this.shapeList[i]._x = this.shapeList[i].style.xEnd = geoAndPos[0];
+ this.shapeList[i]._y = this.shapeList[i].style.yEnd = geoAndPos[1];
+ }
+ else if (this.shapeList[i].type == 'icon') {
+ geoAndPos = this.geo2pos(mapType, this.shapeList[i]._geo);
+ this.shapeList[i].style.x = this.shapeList[i].style._x =
+ geoAndPos[0] - this.shapeList[i].style.width / 2;
+ this.shapeList[i].style.y = this.shapeList[i].style._y =
+ geoAndPos[1] - this.shapeList[i].style.height / 2;
}
+ else {
+ geoAndPos = this.geo2pos(mapType, this.shapeList[i]._geo);
+ this.shapeList[i].style.x = geoAndPos[0];
+ this.shapeList[i].style.y = geoAndPos[1];
+ if (this.shapeList[i].type == 'text') {
+ this.shapeList[i]._style.x = this.shapeList[i].highlightStyle.x
+ = geoAndPos[0];
+ this.shapeList[i]._style.y = this.shapeList[i].highlightStyle.y
+ = geoAndPos[1];
+ }
+ }
+
+ this.zr.modShape(this.shapeList[i].id);
}
-
- this.zr.modShape(this.shapeList[i].id);
}
}
-
+ }
+ if (haveScale) {
+ zrEvent.stop(event);
this.zr.refresh();
var self = this;
@@ -1113,22 +1135,22 @@ define(function (require) {
this.messageCenter.dispatch(
ecConfig.EVENT.MAP_ROAM,
- param.event,
+ params.event,
{type : 'scale'},
this.myChart
);
}
},
- __onmousedown : function (param) {
+ __onmousedown : function (params) {
if (this.shapeList.length <= 0) {
return;
}
- var target = param.target;
+ var target = params.target;
if (target && target.draggable) {
return;
}
- var event = param.event;
+ var event = params.event;
var mx = zrEvent.getX(event);
var my = zrEvent.getY(event);
var mapType = this._findMapTypeByPos(mx, my);
@@ -1147,11 +1169,11 @@ define(function (require) {
},
- __onmousemove : function (param) {
+ __onmousemove : function (params) {
if (!this._mousedown || !this._isAlive) {
return;
}
- var event = param.event;
+ var event = params.event;
var mx = zrEvent.getX(event);
var my = zrEvent.getY(event);
var transform = this._mapDataMap[this._curMapType].transform;
@@ -1172,7 +1194,7 @@ define(function (require) {
this.messageCenter.dispatch(
ecConfig.EVENT.MAP_ROAM,
- param.event,
+ params.event,
{type : 'move'},
this.myChart
);
@@ -1184,8 +1206,8 @@ define(function (require) {
zrEvent.stop(event);
},
- __onmouseup : function (param) {
- var event = param.event;
+ __onmouseup : function (params) {
+ var event = params.event;
this._mx = zrEvent.getX(event);
this._my = zrEvent.getY(event);
this._mousedown = false;
@@ -1198,17 +1220,89 @@ define(function (require) {
},120);
},
+ __onroamcontroller: function(params) {
+ var event = params.event;
+ event.zrenderX = this.zr.getWidth() / 2;
+ event.zrenderY = this.zr.getHeight() / 2;
+ var mapTypeControl = params.mapTypeControl;
+ var top = 0;
+ var left = 0;
+ var step = params.step;
+
+ switch(params.roamType) {
+ case 'scaleUp':
+ event.zrenderDelta = 1;
+ this.__onmousewheel({
+ event: event,
+ mapTypeControl: mapTypeControl
+ });
+ return;
+ case 'scaleDown':
+ event.zrenderDelta = -1;
+ this.__onmousewheel({
+ event: event,
+ mapTypeControl: mapTypeControl
+ });
+ return;
+ case 'up':
+ top = -step;
+ break;
+ case 'down':
+ top = step;
+ break;
+ case 'left':
+ left = -step;
+ break;
+ case 'right':
+ left = step;
+ break;
+ }
+
+ var transform;
+ var curMapType;
+ for (curMapType in mapTypeControl) {
+ if (!this._mapDataMap[curMapType] || !this._activeMapType[curMapType]) {
+ continue;
+ }
+ transform = this._mapDataMap[curMapType].transform;
+ transform.hasRoam = true;
+ transform.left -= left;
+ transform.top -= top;
+ this._mapDataMap[curMapType].transform = transform;
+ }
+ for (var i = 0, l = this.shapeList.length; i < l; i++) {
+ curMapType = this.shapeList[i]._mapType;
+ if (!mapTypeControl[curMapType] || !this._activeMapType[curMapType]) {
+ continue;
+ }
+ transform = this._mapDataMap[curMapType].transform;
+ this.shapeList[i].position[0] = transform.left;
+ this.shapeList[i].position[1] = transform.top;
+ this.zr.modShape(this.shapeList[i].id);
+ }
+
+ this.messageCenter.dispatch(
+ ecConfig.EVENT.MAP_ROAM,
+ params.event,
+ {type : 'move'},
+ this.myChart
+ );
+
+ this.clearEffectShape(true);
+ this.zr.refresh();
+ },
+
/**
* 点击响应
*/
- onclick : function (param) {
- if (!this.isClick || !param.target || this._justMove || param.target.type == 'icon') {
+ onclick : function (params) {
+ if (!this.isClick || !params.target || this._justMove || params.target.type == 'icon') {
// 没有在当前实例上发生点击直接返回
return;
}
this.isClick = false;
- var target = param.target;
+ var target = params.target;
var name = target.style._name;
var len = this.shapeList.length;
var mapType = target._mapType || '';
@@ -1249,7 +1343,7 @@ define(function (require) {
}
this.messageCenter.dispatch(
ecConfig.EVENT.MAP_SELECTED,
- param.event,
+ params.event,
{
selected : this._selected,
target : name
@@ -1262,7 +1356,7 @@ define(function (require) {
setTimeout(function(){
self.zr.trigger(
zrConfig.EVENT.MOUSEMOVE,
- param.event
+ params.event
);
},100);
},
diff --git a/src/component/roamController.js b/src/component/roamController.js
new file mode 100644
index 0000000000..a242dbc573
--- /dev/null
+++ b/src/component/roamController.js
@@ -0,0 +1,336 @@
+/**
+ * echarts组件：漫游控制器
+ *
+ * @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
+ * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
+ *
+ */
+define(function (require) {
+ var Base = require('./base');
+
+ // 图形依赖
+ var TextShape = require('zrender/shape/Text');
+ var RectangleShape = require('zrender/shape/Rectangle');
+ var SectorShape = require('zrender/shape/Sector');
+ var CircleShape = require('zrender/shape/Circle');
+ var IconShape = require('../util/shape/Icon');
+ var CandleShape = require('../util/shape/Candle');
+
+ var ecConfig = require('../config');
+ var zrUtil = require('zrender/tool/util');
+ var zrArea = require('zrender/tool/area');
+ var zrColor = require('zrender/tool/color');
+
+ /**
+ * 构造函数
+ * @param {Object} messageCenter echart消息中心
+ * @param {ZRender} zr zrender实例
+ * @param {Object} option 图表参数
+ */
+ function RoamController(ecTheme, messageCenter, zr, option, myChart) {
+ if (!option.roamController) {
+ return;
+ }
+ Base.call(this, ecTheme, messageCenter, zr, option, myChart);
+
+ this.rcOption = option.roamController;
+
+ var self = this;
+ this._drictionMouseDown = function(params) {
+ return self.__drictionMouseDown(params);
+ };
+ this._drictionMouseUp = function(params) {
+ return self.__drictionMouseUp(params);
+ };
+ this._drictionMouseOver = function(params) {
+ return self.__drictionMouseOver(params);
+ };
+ this._drictionMouseOut = function(params) {
+ return self.__drictionMouseOut(params);
+ };
+ this._scaleHandler = function(params) {
+ return self.__scaleHandler(params);
+ };
+ this.refresh(option);
+ }
+
+ RoamController.prototype = {
+ type: ecConfig.COMPONENT_TYPE_ROAMCONTROLLER,
+ _buildShape: function () {
+ // 元素组的位置参数，通过计算所得x, y, width, height
+ this._itemGroupLocation = this._getItemGroupLocation();
+
+ this._buildBackground();
+ this._buildItem();
+
+ for (var i = 0, l = this.shapeList.length; i < l; i++) {
+ this.zr.addShape(this.shapeList[i]);
+ }
+ },
+
+ /**
+ * 构建所有漫游控制器元素
+ */
+ _buildItem: function () {
+ this.shapeList.push(this._getDirectionShape('up'));
+ this.shapeList.push(this._getDirectionShape('down'));
+ this.shapeList.push(this._getDirectionShape('left'));
+ this.shapeList.push(this._getDirectionShape('right'));
+ this.shapeList.push(this._getScaleShape('scaleUp'));
+ this.shapeList.push(this._getScaleShape('scaleDown'));
+ },
+
+ _getDirectionShape: function(direction) {
+ var width = this._itemGroupLocation.width;
+ var r = this._itemGroupLocation.r;
+ var x = this._itemGroupLocation.x + r;
+ var y = this._itemGroupLocation.y + r;
+
+ var sectorShape = {
+ zlevel: this._zlevelBase,
+ style: {
+ x: x, // 圆心横坐标
+ y: y, // 圆心纵坐标
+ r: r, // 圆环外半径
+ startAngle: -45,
+ endAngle: 45,
+ color: this.rcOption.handlerColor,
+ text: '>',
+ textX: x + r / 2 + 4,
+ textY: y - 0.5,
+ textAlign: 'center',
+ textBaseline: 'middle',
+ textPosition: 'specific',
+ textColor: this.rcOption.fillerColor,
+ textFont: '16px arial'
+ },
+ highlightStyle: {
+ color: zrColor.lift(this.rcOption.handlerColor, -0.2),
+ brushType: 'fill'
+ },
+ clickable: true
+ };
+ switch (direction) {
+ case 'up':
+ sectorShape.rotation = [Math.PI / 2, x, y];
+ break;
+ case 'left':
+ sectorShape.rotation = [Math.PI, x, y];
+ break;
+ case 'down':
+ sectorShape.rotation = [-Math.PI / 2, x, y];
+ break;
+ }
+
+ sectorShape = new SectorShape(sectorShape);
+ sectorShape._roamType = direction;
+ sectorShape.onmousedown = this._drictionMouseDown;
+ sectorShape.onmouseup = this._drictionMouseUp;
+ sectorShape.onmouseover = this._drictionMouseOver;
+ sectorShape.onmouseout = this._drictionMouseOut;
+
+ return sectorShape;
+ },
+
+ _getScaleShape: function(text) {
+ var width = this._itemGroupLocation.width;
+ var itemGap = this.rcOption.itemGap;
+ var x = this._itemGroupLocation.x + width / 2;
+ var y = this._itemGroupLocation.y + width + itemGap;
+ var height = this._itemGroupLocation.height - width - itemGap;
+
+ width /= 2;
+ height = height < 0 ? 20 : height; // 确保height不为负
+ var r = Math.min(width, height) / 2;
+
+ width /= 2;
+ x += text == 'scaleDown' ? width: -width;
+ var scaleShape = {
+ zlevel: this._zlevelBase,
+ style: {
+ x: x,
+ y: y + r,
+ r: r,
+ width: width,
+ height: height,
+ color: this.rcOption.handlerColor,
+ text: text == 'scaleDown' ? '-' : '+',
+ textX: x,
+ textY: y + r - 1,
+ textAlign: 'center',
+ textBaseline: 'middle',
+ textPosition: 'specific',
+ textColor: this.rcOption.fillerColor,
+ textFont: '15px verdana'
+ },
+ highlightStyle: {
+ color: zrColor.lift(this.rcOption.handlerColor, -0.2),
+ brushType: 'fill'
+ },
+ clickable: true
+ };
+
+ scaleShape = new CircleShape(scaleShape);
+ scaleShape._roamType = text;
+ scaleShape.onclick = this._scaleHandler;
+
+ return scaleShape;
+ },
+
+ _buildBackground: function () {
+ var pTop = this.rcOption.padding[0];
+ var pRight = this.rcOption.padding[1];
+ var pBottom = this.rcOption.padding[2];
+ var pLeft = this.rcOption.padding[3];
+
+ this.shapeList.push(new RectangleShape({
+ zlevel: this._zlevelBase,
+ hoverable :false,
+ style: {
+ x: this._itemGroupLocation.x - pLeft,
+ y: this._itemGroupLocation.y - pTop,
+ width: this._itemGroupLocation.width + pLeft + pRight,
+ height: this._itemGroupLocation.height + pTop + pBottom,
+ brushType: this.rcOption.borderWidth === 0 ? 'fill' : 'both',
+ color: this.rcOption.backgroundColor,
+ strokeColor: this.rcOption.borderColor,
+ lineWidth: this.rcOption.borderWidth
+ }
+ }));
+ },
+
+ /**
+ * 根据选项计算漫游控制器实体的位置坐标
+ */
+ _getItemGroupLocation: function () {
+ var padding = this.rcOption.padding;
+ var width = this.rcOption.width;
+ var height = this.rcOption.height;
+
+ var zrWidth = this.zr.getWidth();
+ var zrHeight = this.zr.getHeight();
+ var x;
+ switch (this.rcOption.x) {
+ case 'center' :
+ x = Math.floor((zrWidth - width) / 2);
+ break;
+ case 'left' :
+ x = this.rcOption.padding[3] + this.rcOption.borderWidth;
+ break;
+ case 'right' :
+ x = zrWidth
+ - width
+ - this.rcOption.padding[1]
+ - this.rcOption.padding[3]
+ - this.rcOption.borderWidth * 2;
+ break;
+ default :
+ x = this.parsePercent(this.rcOption.x, zrWidth);
+ break;
+ }
+
+ var y;
+ switch (this.rcOption.y) {
+ case 'top' :
+ y = this.rcOption.padding[0] + this.rcOption.borderWidth;
+ break;
+ case 'bottom' :
+ y = zrHeight
+ - totalHeight
+ - this.rcOption.padding[0]
+ - this.rcOption.padding[2]
+ - this.rcOption.borderWidth * 2;
+ break;
+ case 'center' :
+ y = Math.floor((zrHeight - height) / 2);
+ break;
+ default :
+ y = this.parsePercent(this.rcOption.y, zrHeight);
+ break;
+ }
+
+ return {
+ x: x,
+ y: y,
+ r: width / 2,
+ width: width,
+ height: height
+ };
+ },
+
+ __drictionMouseDown: function(params) {
+ this.mousedown = true;
+ this._drictionHandlerOn(params);
+ },
+
+ __drictionMouseUp: function(params) {
+ this.mousedown = false;
+ this._drictionHandlerOff(params);
+ },
+
+ __drictionMouseOver: function(params) {
+ if (this.mousedown) {
+ this._drictionHandlerOn(params);
+ }
+ },
+
+ __drictionMouseOut: function(params) {
+ this._drictionHandlerOff(params);
+ },
+
+ _drictionHandlerOn: function(params) {
+ this._dispatchEvent(params.event, params.target._roamType);
+ clearInterval(this.dircetionTimer);
+ var self = this;
+ this.dircetionTimer = setInterval(function() {
+ self._dispatchEvent(params.event, params.target._roamType)
+ }, 100);
+ },
+
+ _drictionHandlerOff: function(params) {
+ clearInterval(this.dircetionTimer);
+ },
+
+ __scaleHandler: function(params) {
+ this._dispatchEvent(params.event, params.target._roamType)
+ },
+
+ _dispatchEvent : function(event, roamType){
+ this.messageCenter.dispatch(
+ ecConfig.EVENT.ROAMCONTROLLER,
+ event,
+ {
+ roamType: roamType,
+ mapTypeControl: this.rcOption.mapTypeControl,
+ step: this.rcOption.step
+ },
+ this.myChart
+ );
+ },
+ /**
+ * 刷新
+ */
+ refresh: function (newOption) {
+ if (newOption) {
+ this.option = newOption || this.option;
+ this.option.roamController = this.reformOption(this.option.roamController);
+ // 补全padding属性
+ this.option.roamController.padding = this.reformCssArray(
+ this.option.roamController.padding
+ );
+ this.rcOption = this.option.roamController;
+ }
+ this.clear();
+ this._buildShape();
+ }
+ };
+
+
+ zrUtil.inherits(RoamController, Base);
+
+ require('../component').define('roamController', RoamController);
+
+ return RoamController;
+});
+
+
diff --git a/src/config.js b/src/config.js
index dc1eb98304..a711261b6b 100644
--- a/src/config.js
+++ b/src/config.js
@@ -38,6 +38,7 @@ define(function() {
COMPONENT_TYPE_AXIS_CATEGORY: 'categoryAxis',
COMPONENT_TYPE_AXIS_VALUE: 'valueAxis',
COMPONENT_TYPE_TIMELINE: 'timeline',
+ COMPONENT_TYPE_ROAMCONTROLLER: 'roamController',
// 全图默认背景
backgroundColor: 'rgba(0,0,0,0)',
@@ -501,6 +502,29 @@ define(function() {
// data : []
},
+ roamController: {
+ show : false,
+ x: 'left', // 水平安放位置，默认为全图左对齐，可选为：
+ // 'center' ¦ 'left' ¦ 'right'
+ // ¦ {number}（x坐标，单位px）
+ y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
+ // 'top' ¦ 'bottom' ¦ 'center'
+ // ¦ {number}（y坐标，单位px）
+ width: 80,
+ height: 120,
+ backgroundColor: 'rgba(0,0,0,0)',
+ borderColor: '#ccc', // 图例边框颜色
+ borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
+ padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
+ // 接受数组分别设定上右下左边距，同css
+ itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
+ // 横向布局时为水平间隔，纵向布局时为纵向间隔
+ handlerColor: '#6495ed',
+ fillerColor: '#fff',
+ step: 15, // 移动幅度
+ mapTypeControl: null
+ },
+
// 柱形图默认参数
bar: {
clickable: true,
@@ -1205,7 +1229,8 @@ define(function() {
// -------内部通信
TOOLTIP_HOVER: 'tooltipHover',
TOOLTIP_IN_GRID: 'tooltipInGrid',
- TOOLTIP_OUT_GRID: 'tooltipOutGrid'
+ TOOLTIP_OUT_GRID: 'tooltipOutGrid',
+ ROAMCONTROLLER: 'roamController',
},
DRAG_ENABLE_TIME : 120, // 降低图表内元素拖拽敏感度，单位ms，不建议外部干预
EFFECT_ZLEVEL : 7,
diff --git a/src/echarts.js b/src/echarts.js
index 2819d72c63..d18b1a088b 100644
--- a/src/echarts.js
+++ b/src/echarts.js
@@ -640,7 +640,7 @@ define(function (require) {
}
var componentList = [
- 'title', 'legend', 'tooltip', 'dataRange',
+ 'title', 'legend', 'tooltip', 'dataRange', 'roamController',
'grid', 'dataZoom', 'xAxis', 'yAxis', 'polar'
];