From d9e79ccf2af4307b7e0e6e8c67200e3fa2b189f5 Mon Sep 17 00:00:00 2001 From: kener Date: Fri, 14 Mar 2014 04:47:51 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E5=9B=BE=E8=81=94=E5=8A=A8=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20close=20#248?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/example/mix8.html | 490 ++++++++++++++++++++++++++++++++++++ src/chart/calculableBase.js | 3 +- src/component/legend.js | 17 +- src/component/tooltip.js | 4 + src/config.js | 5 +- src/echarts.js | 216 +++++++++++++--- 6 files changed, 700 insertions(+), 35 deletions(-) create mode 100644 doc/example/mix8.html diff --git a/doc/example/mix8.html b/doc/example/mix8.html new file mode 100644 index 000000000..ff904d94e --- /dev/null +++ b/doc/example/mix8.html @@ -0,0 +1,490 @@ + + + + + ECharts + + + + + + + + + + + + + + + + + + + +
+
+
+ + ECharts +
+ View on GitHub + +
+
+
+
+ +
+
+ +
+
+
+
+
+ + +
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/chart/calculableBase.js b/src/chart/calculableBase.js index 9603d4680..010e04979 100644 --- a/src/chart/calculableBase.js +++ b/src/chart/calculableBase.js @@ -140,9 +140,10 @@ define(function(require) { if (self.selectedMap[itemName] != legendSelected[itemName]) { // 有一项不一致都需要重绘 status.needRefresh = true; - return; } + self.selectedMap[itemName] = legendSelected[itemName]; } + return; } /** diff --git a/src/component/legend.js b/src/component/legend.js index 787afbcfe..ebe37d99a 100644 --- a/src/component/legend.js +++ b/src/component/legend.js @@ -587,7 +587,6 @@ define(function (require) { } } legendOption = option.legend; - self.clear(); _buildShape(); } @@ -679,6 +678,21 @@ define(function (require) { function getSelectedMap() { return _selectedMap; } + + /** + * 图例选择 + */ + function onlegendSelected(param, status) { + var legendSelected = param.selected; + for (var itemName in _selectedMap) { + if (_selectedMap[itemName] != legendSelected[itemName]) { + // 有一项不一致都需要重绘 + status.needRefresh = true; + } + _selectedMap[itemName] = legendSelected[itemName]; + } + return; + } self.init = init; self.refresh = refresh; @@ -691,6 +705,7 @@ define(function (require) { self.setItemShape = setItemShape; self.isSelected = isSelected; self.getSelectedMap = getSelectedMap; + self.onlegendSelected = onlegendSelected; init(option); } diff --git a/src/component/tooltip.js b/src/component/tooltip.js index 50ef58147..9d901a48c 100644 --- a/src/component/tooltip.js +++ b/src/component/tooltip.js @@ -1130,6 +1130,10 @@ define(function (require) { my ) ) { + !_event.connectTrigger && messageCenter.dispatch( + ecConfig.EVENT.TOOLTIP_IN_GRID, + _event + ); _showingTicket = setTimeout(_tryShow, _showDelay); } else if (_needAxisTrigger diff --git a/src/config.js b/src/config.js index 325b60007..9299c6371 100644 --- a/src/config.js +++ b/src/config.js @@ -891,7 +891,7 @@ define(function() { RESIZE: 'resize', CLICK: 'click', HOVER: 'hover', - MOUSEWHEEL: 'mousewheel', + //MOUSEWHEEL: 'mousewheel', // -------业务交互逻辑 DATA_CHANGED: 'dataChanged', DATA_ZOOM: 'dataZoom', @@ -903,7 +903,8 @@ define(function() { DATA_VIEW_CHANGED: 'dataViewChanged', MAP_ROAM : 'mapRoam', // -------内部通信 - TOOLTIP_HOVER: 'tooltipHover' + TOOLTIP_HOVER: 'tooltipHover', + TOOLTIP_IN_GRID: 'tooltipInGrid' }, DRAG_ENABLE_TIME : 150, // 降低图表内元素拖拽敏感度，单位ms，不建议外部干预 // 默认标志图形类型列表 diff --git a/src/echarts.js b/src/echarts.js index 640cd533f..8d2d3744c 100644 --- a/src/echarts.js +++ b/src/echarts.js @@ -20,6 +20,7 @@ define(function(require) { var echarts = self; // 提供内部反向使用静态方法； var _canvasSupported = !!document.createElement('canvas').getContext; + var _idBase = new Date() - 0; var _instances = {}; // ECharts实例map索引 var DOM_ATTRIBUTE_KEY = '_echarts_instance_'; @@ -35,7 +36,7 @@ define(function(require) { // dom与echarts实例映射索引 var key = dom.getAttribute(DOM_ATTRIBUTE_KEY); if (!key) { - key = new Date() - 0; + key = _idBase++; dom.setAttribute(DOM_ATTRIBUTE_KEY, key); } if (_instances[key]) { @@ -65,13 +66,13 @@ define(function(require) { var _themeConfig = require('zrender/tool/util').clone(ecConfig); var self = this; - var _id = '__ECharts__' + (new Date() - 0); var _zr; var _option; var _optionBackup; // for各种change和zoom var _optionRestore; // for restore; var _chartList; // 图表实例 var _messageCenter; // Echarts层的消息中心，做zrender原始事件转换 + var _connected = false; var _status = { // 用于图表间通信 dragIn : false, @@ -109,35 +110,17 @@ define(function(require) { // 添加消息中心的事件分发器特性 var zrEvent = require('zrender/tool/event'); zrEvent.Dispatcher.call(_messageCenter); - _messageCenter.bind( - ecConfig.EVENT.LEGEND_SELECTED, _onlegendSelected - ); - _messageCenter.bind( - ecConfig.EVENT.DATA_ZOOM, _ondataZoom - ); - _messageCenter.bind( - ecConfig.EVENT.DATA_RANGE, _ondataRange - ); - _messageCenter.bind( - ecConfig.EVENT.MAGIC_TYPE_CHANGED, _onmagicTypeChanged - ); - _messageCenter.bind( - ecConfig.EVENT.DATA_VIEW_CHANGED, _ondataViewChanged - ); - _messageCenter.bind( - ecConfig.EVENT.TOOLTIP_HOVER, _tooltipHover - ); - _messageCenter.bind( - ecConfig.EVENT.RESTORE, _onrestore - ); - _messageCenter.bind( - ecConfig.EVENT.REFRESH, _onrefresh - ); + for (var e in ecConfig.EVENT) { + if (e != 'CLICK' && e != 'HOVER' && e != 'MAP_ROAM') { + _messageCenter.bind(ecConfig.EVENT[e], _onevent); + } + } + var zrConfig = require('zrender/config'); _zr.on(zrConfig.EVENT.CLICK, _onclick); _zr.on(zrConfig.EVENT.MOUSEOVER, _onhover); - _zr.on(zrConfig.EVENT.MOUSEWHEEL, _onmousewheel); + //_zr.on(zrConfig.EVENT.MOUSEWHEEL, _onmousewheel); _zr.on(zrConfig.EVENT.DRAGSTART, _ondragstart); _zr.on(zrConfig.EVENT.DRAGEND, _ondragend); _zr.on(zrConfig.EVENT.DRAGENTER, _ondragenter); @@ -177,6 +160,112 @@ define(function(require) { _disposeChartList(); } + /** + * ECharts事件处理中心 + */ + var _curEventType = null; + function _onevent(param){ + param.__echarts_id__ = param.__echarts_id__ || self.id; + var fromMyself = true; + if (param.__echarts_id__ != self.id) { + // 来自其他联动图表的事件 + fromMyself = false; + } + + if (!_curEventType) { + _curEventType = param.type; + } + + switch(param.type) { + case ecConfig.EVENT.LEGEND_SELECTED : + _onlegendSelected(param); + break; + case ecConfig.EVENT.DATA_ZOOM : + if (!fromMyself) { + var dz = self.component.dataZoom; + if (dz) { + dz.silence(true); + dz.absoluteZoom(param.zoom); + dz.silence(false); + } + } + _ondataZoom(param); + break; + case ecConfig.EVENT.DATA_RANGE : + fromMyself && _ondataRange(param); + break; + case ecConfig.EVENT.MAGIC_TYPE_CHANGED : + if (!fromMyself) { + var tb = self.component.toolbox; + if (tb) { + tb.silence(true); + tb.setMagicType(param.magicType); + tb.silence(false); + } + } + _onmagicTypeChanged(param); + break; + case ecConfig.EVENT.DATA_VIEW_CHANGED : + fromMyself && _ondataViewChanged(param); + break; + case ecConfig.EVENT.TOOLTIP_HOVER : + fromMyself && _tooltipHover(param); + break; + case ecConfig.EVENT.RESTORE : + _onrestore(); + break; + case ecConfig.EVENT.REFRESH : + fromMyself && _onrefresh(param); + break; + // 鼠标同步 + case ecConfig.EVENT.TOOLTIP_IN_GRID : + if (fromMyself && _connected) { + // 存在多图联动，修改参数分发 + var grid = self.component.grid; + if (grid) { + param.x = (param.event.zrenderX - grid.getX()) / grid.getWidth(); + param.y = (param.event.zrenderY - grid.getY()) / grid.getHeight(); + } + } + else if (!fromMyself) { + // 只处理来自外部的鼠标同步 + + var grid = self.component.grid; + if (grid) { + _zr.trigger( + 'mousemove', + { + connectTrigger : true, + zrenderX : grid.getX() + param.x * grid.getWidth(), + zrenderY : grid.getY() + param.y * grid.getHeight() + } + ); + } + } + break; + /* + case ecConfig.EVENT.RESIZE : + case ecConfig.EVENT.DATA_CHANGED : + case ecConfig.EVENT.PIE_SELECTED : + case ecConfig.EVENT.MAP_SELECTED : + break; + */ + } + + // 多图联动，只做自己的一级事件分发，避免级联事件循环 + if (_connected && fromMyself && _curEventType == param.type) { + for (var c in _connected) { + _connected[c].connectEventHandler(param); + } + // 分发完毕后复位 + _curEventType = null; + } + + if (!fromMyself) { + _curEventType = null; + } + } + /** * 点击事件，响应zrender事件，包装后分发到Echarts层 */ @@ -217,7 +306,6 @@ define(function(require) { /** * 滚轮回调，孤岛可计算特性 - */ function _onmousewheel(param) { _messageCenter.dispatch( ecConfig.EVENT.MOUSEWHEEL, @@ -225,6 +313,7 @@ define(function(require) { _eventPackage(param.target) ); } + */ /** * dragstart回调，可计算特性实现 @@ -422,7 +511,7 @@ define(function(require) { self.refresh(param); _refreshInside = false; } - + /** * 当前正在使用的option，还原可能存在的dataZoom */ @@ -726,7 +815,7 @@ define(function(require) { _zr.render(); - var imgId = 'IMG' + _id; + var imgId = 'IMG' + self.id; var img = document.getElementById(imgId); if (magicOption.renderAsImage && _canvasSupported) { // IE8- 不支持图片渲染形式 @@ -1195,7 +1284,7 @@ define(function(require) { } if (_chartList.length === 0) { // 渲染为图片 - var imgId = 'IMG' + _id; + var imgId = 'IMG' + self.id; var img = document.getElementById(imgId); if (img) { return img.src; @@ -1244,6 +1333,68 @@ define(function(require) { return self; } + /** + * 多图联动 + * @param connectTarget{ECharts | Array } connectTarget 联动目标 + */ + function connect(connectTarget) { + if (!connectTarget) { + return self; + } + + if (!_connected) { + _connected = {}; + } + + if (connectTarget instanceof Array) { + for (var i = 0, l = connectTarget.length; i < l; i++) { + _connected[connectTarget[i].id] = connectTarget[i]; + } + } + else { + _connected[connectTarget.id] = connectTarget; + } + + return self; + } + + /** + * 解除多图联动 + * @param connectTarget{ECharts | Array } connectTarget 解除联动目标 + */ + function disConnect(connectTarget) { + if (!connectTarget || !_connected) { + return self; + } + + if (connectTarget instanceof Array) { + for (var i = 0, l = connectTarget.length; i < l; i++) { + delete _connected[connectTarget[i].id]; + } + } + else { + delete _connected[connectTarget.id]; + } + + for (var k in _connected) { + return self; // 非空 + } + + // 空，转为标志位 + _connected = false; + return self; + } + + /** + * 联动事件响应 + */ + function connectEventHandler(param) { + if (param.__echarts_id__ != self.id) { + // 来自其他联动图表的事件 + _onevent(param); + } + } + /** * 显示loading过渡 * @param {Object} loadingOption @@ -1406,6 +1557,9 @@ define(function(require) { self.getImage = getImage; self.on = on; self.un = un; + self.connect = connect; + self.disConnect = disConnect; + self.connectEventHandler = connectEventHandler; self.showLoading = showLoading; self.hideLoading = hideLoading; self.setTheme = setTheme; -- GitLab