| /** |
| * echarts组件：漫游控制器 |
| * |
| * @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。 |
| * @author Kener (@Kener-林峰, kener.linfeng@gmail.com) |
| * |
| */ |
| define(function (require) { |
| var Base = require('./base'); |
| |
| // 图形依赖 |
| var RectangleShape = require('zrender/shape/Rectangle'); |
| var SectorShape = require('zrender/shape/Sector'); |
| var CircleShape = require('zrender/shape/Circle'); |
| |
| var ecConfig = require('../config'); |
| ecConfig.roamController = { |
| zlevel: 0, // 一级层叠 |
| z: 4, // 二级层叠 |
| show: true, |
| 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 |
| handleColor: '#6495ed', |
| fillerColor: '#fff', |
| step: 15, // 移动幅度 |
| mapTypeControl: null |
| }; |
| |
| var zrUtil = require('zrender/tool/util'); |
| var zrColor = require('zrender/tool/color'); |
| var zrEvent = require('zrender/tool/event'); |
| |
| /** |
| * 构造函数 |
| * @param {Object} messageCenter echart消息中心 |
| * @param {ZRender} zr zrender实例 |
| * @param {Object} option 图表参数 |
| */ |
| function RoamController(ecTheme, messageCenter, zr, option, myChart) { |
| if (!option.roamController || !option.roamController.show) { |
| return; |
| } |
| if (!option.roamController.mapTypeControl) { |
| console.error('option.roamController.mapTypeControl has not been defined.'); |
| 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._drictionMouseMove = function(params) { |
| return self.__drictionMouseMove(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 () { |
| if (!this.rcOption.show) { |
| return; |
| } |
| // 元素组的位置参数，通过计算所得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 r = this._itemGroupLocation.r; |
| var x = this._itemGroupLocation.x + r; |
| var y = this._itemGroupLocation.y + r; |
| |
| var sectorShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| x: x, // 圆心横坐标 |
| y: y, // 圆心纵坐标 |
| r: r, // 圆环外半径 |
| startAngle: -45, |
| endAngle: 45, |
| color: this.rcOption.handleColor, |
| text: '>', |
| textX: x + r / 2 + 4, |
| textY: y - 0.5, |
| textAlign: 'center', |
| textBaseline: 'middle', |
| textPosition: 'specific', |
| textColor: this.rcOption.fillerColor, |
| textFont: Math.floor(r / 2) + 'px arial' |
| }, |
| highlightStyle: { |
| color: zrColor.lift(this.rcOption.handleColor, -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.onmousemove = this._drictionMouseMove; |
| sectorShape.onmouseout = this._drictionMouseOut; |
| |
| return sectorShape; |
| }, |
| |
| _getScaleShape: function(text) { |
| var width = this._itemGroupLocation.width; |
| var height = this._itemGroupLocation.height - width; |
| height = height < 0 ? 20 : height; // 确保height不为负 |
| |
| var r = Math.min(width / 2 - 5, height) / 2; |
| var x = this._itemGroupLocation.x |
| + (text === 'scaleDown' ? (width - r) : r); |
| var y = this._itemGroupLocation.y + this._itemGroupLocation.height - r; |
| |
| var scaleShape = { |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| style: { |
| x: x, |
| y: y, |
| r: r, |
| color: this.rcOption.handleColor, |
| text: text === 'scaleDown' ? '-' : '+', |
| textX: x, |
| textY: y - 2, |
| textAlign: 'center', |
| textBaseline: 'middle', |
| textPosition: 'specific', |
| textColor: this.rcOption.fillerColor, |
| textFont: Math.floor(r) + 'px verdana' |
| }, |
| highlightStyle: { |
| color: zrColor.lift(this.rcOption.handleColor, -0.2), |
| brushType: 'fill' |
| }, |
| clickable: true |
| }; |
| |
| scaleShape = new CircleShape(scaleShape); |
| scaleShape._roamType = text; |
| scaleShape.onmousedown = this._scaleHandler; |
| |
| return scaleShape; |
| }, |
| |
| _buildBackground: function () { |
| var padding = this.reformCssArray(this.rcOption.padding); |
| |
| this.shapeList.push(new RectangleShape({ |
| zlevel: this.getZlevelBase(), |
| z: this.getZBase(), |
| hoverable :false, |
| style: { |
| x: this._itemGroupLocation.x - padding[3], |
| y: this._itemGroupLocation.y - padding[0], |
| width: this._itemGroupLocation.width + padding[3] + padding[1], |
| height: this._itemGroupLocation.height + padding[0] + padding[2], |
| brushType: this.rcOption.borderWidth === 0 ? 'fill' : 'both', |
| color: this.rcOption.backgroundColor, |
| strokeColor: this.rcOption.borderColor, |
| lineWidth: this.rcOption.borderWidth |
| } |
| })); |
| }, |
| |
| /** |
| * 根据选项计算漫游控制器实体的位置坐标 |
| */ |
| _getItemGroupLocation: function () { |
| var padding = this.reformCssArray(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 = padding[3] + this.rcOption.borderWidth; |
| break; |
| case 'right' : |
| x = zrWidth |
| - width |
| - padding[1] |
| - 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 = padding[0] + this.rcOption.borderWidth; |
| break; |
| case 'bottom' : |
| y = zrHeight |
| - height |
| - padding[0] |
| - 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); |
| }, |
| |
| __drictionMouseMove: 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); |
| zrEvent.stop(params.event); |
| }, |
| |
| _drictionHandlerOff: function(params) { |
| clearInterval(this.dircetionTimer); |
| }, |
| |
| __scaleHandler: function(params) { |
| this._dispatchEvent(params.event, params.target._roamType); |
| zrEvent.stop(params.event); |
| }, |
| |
| _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); |
| this.rcOption = this.option.roamController; |
| } |
| this.clear(); |
| this._buildShape(); |
| } |
| }; |
| |
| |
| zrUtil.inherits(RoamController, Base); |
| |
| require('../component').define('roamController', RoamController); |
| |
| return RoamController; |
| }); |
| |
| |
