You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1752 lines
64 KiB
1752 lines
64 KiB
/*!
|
|
* ECharts, a javascript interactive chart library.
|
|
*
|
|
* Copyright (c) 2015, Baidu Inc.
|
|
* All rights reserved.
|
|
*
|
|
* LICENSE
|
|
* https://github.com/ecomfe/echarts/blob/master/LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* echarts
|
|
*
|
|
* @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
|
|
* @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
|
|
*
|
|
*/
|
|
define(function (require) {
|
|
var ecConfig = require('./config');
|
|
var zrUtil = require('zrender/tool/util');
|
|
var zrEvent = require('zrender/tool/event');
|
|
|
|
var self = {};
|
|
|
|
var _canvasSupported = require('zrender/tool/env').canvasSupported;
|
|
var _idBase = new Date() - 0;
|
|
var _instances = {}; // ECharts实例map索引
|
|
var DOM_ATTRIBUTE_KEY = '_echarts_instance_';
|
|
|
|
self.version = '2.2.2';
|
|
self.dependencies = {
|
|
zrender: '2.0.8'
|
|
};
|
|
/**
|
|
* 入口方法
|
|
*/
|
|
self.init = function (dom, theme) {
|
|
var zrender = require('zrender');
|
|
if ((zrender.version.replace('.', '') - 0) < (self.dependencies.zrender.replace('.', '') - 0)) {
|
|
console.error(
|
|
'ZRender ' + zrender.version
|
|
+ ' is too old for ECharts ' + self.version
|
|
+ '. Current version need ZRender '
|
|
+ self.dependencies.zrender + '+'
|
|
);
|
|
}
|
|
|
|
dom = dom instanceof Array ? dom[0] : dom;
|
|
|
|
// dom与echarts实例映射索引
|
|
var key = dom.getAttribute(DOM_ATTRIBUTE_KEY);
|
|
if (!key) {
|
|
key = _idBase++;
|
|
dom.setAttribute(DOM_ATTRIBUTE_KEY, key);
|
|
}
|
|
|
|
if (_instances[key]) {
|
|
// 同一个dom上多次init，自动释放已有实例
|
|
_instances[key].dispose();
|
|
}
|
|
_instances[key] = new Echarts(dom);
|
|
_instances[key].id = key;
|
|
_instances[key].canvasSupported = _canvasSupported;
|
|
_instances[key].setTheme(theme);
|
|
|
|
return _instances[key];
|
|
};
|
|
|
|
/**
|
|
* 通过id获得ECharts实例，id可在实例化后读取
|
|
*/
|
|
self.getInstanceById = function (key) {
|
|
return _instances[key];
|
|
};
|
|
|
|
/**
|
|
* 消息中心
|
|
*/
|
|
function MessageCenter() {
|
|
zrEvent.Dispatcher.call(this);
|
|
}
|
|
zrUtil.merge(MessageCenter.prototype, zrEvent.Dispatcher.prototype, true);
|
|
|
|
/**
|
|
* 基于zrender实现Echarts接口层
|
|
* @param {HtmlElement} dom 必要
|
|
*/
|
|
function Echarts(dom) {
|
|
// Fxxk IE11 for breaking initialization without a warrant;
|
|
// Just set something to let it be!
|
|
// by kener 2015-01-09
|
|
dom.innerHTML = '';
|
|
this._themeConfig = {}; // zrUtil.clone(ecConfig);
|
|
|
|
this.dom = dom;
|
|
// this._zr;
|
|
// this._option; // curOption clone
|
|
// this._optionRestore; // for restore;
|
|
// this._island;
|
|
// this._toolbox;
|
|
// this._timeline;
|
|
// this._refreshInside; // 内部刷新标志位
|
|
|
|
this._connected = false;
|
|
this._status = { // 用于图表间通信
|
|
dragIn: false,
|
|
dragOut: false,
|
|
needRefresh: false
|
|
};
|
|
this._curEventType = false; // 破循环信号灯
|
|
this._chartList = []; // 图表实例
|
|
|
|
this._messageCenter = new MessageCenter();
|
|
|
|
this._messageCenterOutSide = new MessageCenter(); // Echarts层的外部消息中心，做Echarts层的消息转发
|
|
|
|
// resize方法经常被绑定到window.resize上，闭包一个this
|
|
this.resize = this.resize();
|
|
|
|
// 初始化::构造函数
|
|
this._init();
|
|
}
|
|
|
|
/**
|
|
* ZRender EVENT
|
|
*
|
|
* @inner
|
|
* @const
|
|
* @type {Object}
|
|
*/
|
|
var ZR_EVENT = require('zrender/config').EVENT;
|
|
|
|
/**
|
|
* 要绑定监听的zrender事件列表
|
|
*
|
|
* @const
|
|
* @inner
|
|
* @type {Array}
|
|
*/
|
|
var ZR_EVENT_LISTENS = [
|
|
'CLICK', 'DBLCLICK', 'MOUSEOVER', 'MOUSEOUT',
|
|
'DRAGSTART', 'DRAGEND', 'DRAGENTER', 'DRAGOVER', 'DRAGLEAVE', 'DROP'
|
|
];
|
|
|
|
/**
|
|
* 对echarts的实例中的chartList属性成员，逐个进行方法调用，遍历顺序为逆序
|
|
* 由于在事件触发的默认行为处理中，多次用到相同逻辑，所以抽象了该方法
|
|
* 由于所有的调用场景里，最多只有两个参数，基于性能和体积考虑，这里就不使用call或者apply了
|
|
*
|
|
* @inner
|
|
* @param {ECharts} ecInstance ECharts实例
|
|
* @param {string} methodName 要调用的方法名
|
|
* @param {*} arg0 调用参数1
|
|
* @param {*} arg1 调用参数2
|
|
* @param {*} arg2 调用参数3
|
|
*/
|
|
function callChartListMethodReverse(ecInstance, methodName, arg0, arg1, arg2) {
|
|
var chartList = ecInstance._chartList;
|
|
var len = chartList.length;
|
|
|
|
while (len--) {
|
|
var chart = chartList[len];
|
|
if (typeof chart[methodName] === 'function') {
|
|
chart[methodName](arg0, arg1, arg2);
|
|
}
|
|
}
|
|
}
|
|
|
|
Echarts.prototype = {
|
|
/**
|
|
* 初始化::构造函数
|
|
*/
|
|
_init: function () {
|
|
var self = this;
|
|
var _zr = require('zrender').init(this.dom);
|
|
this._zr = _zr;
|
|
|
|
// wrap: n,e,d,t for name event data this
|
|
this._messageCenter.dispatch = function(type, event, eventPackage, that) {
|
|
eventPackage = eventPackage || {};
|
|
eventPackage.type = type;
|
|
eventPackage.event = event;
|
|
|
|
self._messageCenter.dispatchWithContext(type, eventPackage, that);
|
|
if (type != 'HOVER' && type != 'MOUSEOUT') { // 频繁事件直接抛出
|
|
setTimeout(function(){
|
|
self._messageCenterOutSide.dispatchWithContext(
|
|
type, eventPackage, that
|
|
);
|
|
},50);
|
|
}
|
|
else {
|
|
self._messageCenterOutSide.dispatchWithContext(
|
|
type, eventPackage, that
|
|
);
|
|
}
|
|
};
|
|
|
|
this._onevent = function(param){
|
|
return self.__onevent(param);
|
|
};
|
|
for (var e in ecConfig.EVENT) {
|
|
if (e != 'CLICK' && e != 'DBLCLICK'
|
|
&& e != 'HOVER' && e != 'MOUSEOUT' && e != 'MAP_ROAM'
|
|
) {
|
|
this._messageCenter.bind(ecConfig.EVENT[e], this._onevent, this);
|
|
}
|
|
}
|
|
|
|
|
|
var eventBehaviors = {};
|
|
this._onzrevent = function (param) {
|
|
return self[eventBehaviors[ param.type ]](param);
|
|
};
|
|
|
|
// 挂载关心的事件
|
|
for (var i = 0, len = ZR_EVENT_LISTENS.length; i < len; i++) {
|
|
var eventName = ZR_EVENT_LISTENS[i];
|
|
var eventValue = ZR_EVENT[eventName];
|
|
eventBehaviors[eventValue] = '_on' + eventName.toLowerCase();
|
|
_zr.on(eventValue, this._onzrevent);
|
|
}
|
|
|
|
this.chart = {}; // 图表索引
|
|
this.component = {}; // 组件索引
|
|
|
|
// 内置图表
|
|
// 孤岛
|
|
var Island = require('./chart/island');
|
|
this._island = new Island(this._themeConfig, this._messageCenter, _zr, {}, this);
|
|
this.chart.island = this._island;
|
|
|
|
// 内置通用组件
|
|
// 工具箱
|
|
var Toolbox = require('./component/toolbox');
|
|
this._toolbox = new Toolbox(this._themeConfig, this._messageCenter, _zr, {}, this);
|
|
this.component.toolbox = this._toolbox;
|
|
|
|
var componentLibrary = require('./component');
|
|
componentLibrary.define('title', require('./component/title'));
|
|
componentLibrary.define('tooltip', require('./component/tooltip'));
|
|
componentLibrary.define('legend', require('./component/legend'));
|
|
|
|
if (_zr.getWidth() === 0 || _zr.getHeight() === 0) {
|
|
console.error('Dom’s width & height should be ready before init.');
|
|
}
|
|
},
|
|
|
|
/**
|
|
* ECharts事件处理中心
|
|
*/
|
|
__onevent: function (param){
|
|
param.__echartsId = param.__echartsId || this.id;
|
|
|
|
// 来自其他联动图表的事件
|
|
var fromMyself = (param.__echartsId === this.id);
|
|
|
|
if (!this._curEventType) {
|
|
this._curEventType = param.type;
|
|
}
|
|
|
|
switch (param.type) {
|
|
case ecConfig.EVENT.LEGEND_SELECTED :
|
|
this._onlegendSelected(param);
|
|
break;
|
|
case ecConfig.EVENT.DATA_ZOOM :
|
|
if (!fromMyself) {
|
|
var dz = this.component.dataZoom;
|
|
if (dz) {
|
|
dz.silence(true);
|
|
dz.absoluteZoom(param.zoom);
|
|
dz.silence(false);
|
|
}
|
|
}
|
|
this._ondataZoom(param);
|
|
break;
|
|
case ecConfig.EVENT.DATA_RANGE :
|
|
fromMyself && this._ondataRange(param);
|
|
break;
|
|
case ecConfig.EVENT.MAGIC_TYPE_CHANGED :
|
|
if (!fromMyself) {
|
|
var tb = this.component.toolbox;
|
|
if (tb) {
|
|
tb.silence(true);
|
|
tb.setMagicType(param.magicType);
|
|
tb.silence(false);
|
|
}
|
|
}
|
|
this._onmagicTypeChanged(param);
|
|
break;
|
|
case ecConfig.EVENT.DATA_VIEW_CHANGED :
|
|
fromMyself && this._ondataViewChanged(param);
|
|
break;
|
|
case ecConfig.EVENT.TOOLTIP_HOVER :
|
|
fromMyself && this._tooltipHover(param);
|
|
break;
|
|
case ecConfig.EVENT.RESTORE :
|
|
this._onrestore();
|
|
break;
|
|
case ecConfig.EVENT.REFRESH :
|
|
fromMyself && this._onrefresh(param);
|
|
break;
|
|
// 鼠标同步
|
|
case ecConfig.EVENT.TOOLTIP_IN_GRID :
|
|
case ecConfig.EVENT.TOOLTIP_OUT_GRID :
|
|
if (!fromMyself) {
|
|
// 只处理来自外部的鼠标同步
|
|
var grid = this.component.grid;
|
|
if (grid) {
|
|
this._zr.trigger(
|
|
'mousemove',
|
|
{
|
|
connectTrigger: true,
|
|
zrenderX: grid.getX() + param.x * grid.getWidth(),
|
|
zrenderY: grid.getY() + param.y * grid.getHeight()
|
|
}
|
|
);
|
|
}
|
|
}
|
|
else if (this._connected) {
|
|
// 来自自己，并且存在多图联动，空间坐标映射修改参数分发
|
|
var grid = this.component.grid;
|
|
if (grid) {
|
|
param.x = (param.event.zrenderX - grid.getX()) / grid.getWidth();
|
|
param.y = (param.event.zrenderY - grid.getY()) / grid.getHeight();
|
|
}
|
|
}
|
|
break;
|
|
/*
|
|
case ecConfig.EVENT.RESIZE :
|
|
case ecConfig.EVENT.DATA_CHANGED :
|
|
case ecConfig.EVENT.PIE_SELECTED :
|
|
case ecConfig.EVENT.MAP_SELECTED :
|
|
break;
|
|
*/
|
|
}
|
|
|
|
// 多图联动，只做自己的一级事件分发，避免级联事件循环
|
|
if (this._connected && fromMyself && this._curEventType === param.type) {
|
|
for (var c in this._connected) {
|
|
this._connected[c].connectedEventHandler(param);
|
|
}
|
|
// 分发完毕后复位
|
|
this._curEventType = null;
|
|
}
|
|
|
|
if (!fromMyself || (!this._connected && fromMyself)) { // 处理了完联动事件复位
|
|
this._curEventType = null;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 点击事件，响应zrender事件，包装后分发到Echarts层
|
|
*/
|
|
_onclick: function (param) {
|
|
callChartListMethodReverse(this, 'onclick', param);
|
|
|
|
if (param.target) {
|
|
var ecData = this._eventPackage(param.target);
|
|
if (ecData && ecData.seriesIndex != null) {
|
|
this._messageCenter.dispatch(
|
|
ecConfig.EVENT.CLICK,
|
|
param.event,
|
|
ecData,
|
|
this
|
|
);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 双击事件，响应zrender事件，包装后分发到Echarts层
|
|
*/
|
|
_ondblclick: function (param) {
|
|
callChartListMethodReverse(this, 'ondblclick', param);
|
|
|
|
if (param.target) {
|
|
var ecData = this._eventPackage(param.target);
|
|
if (ecData && ecData.seriesIndex != null) {
|
|
this._messageCenter.dispatch(
|
|
ecConfig.EVENT.DBLCLICK,
|
|
param.event,
|
|
ecData,
|
|
this
|
|
);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 鼠标移入事件，响应zrender事件，包装后分发到Echarts层
|
|
*/
|
|
_onmouseover: function (param) {
|
|
if (param.target) {
|
|
var ecData = this._eventPackage(param.target);
|
|
if (ecData && ecData.seriesIndex != null) {
|
|
this._messageCenter.dispatch(
|
|
ecConfig.EVENT.HOVER,
|
|
param.event,
|
|
ecData,
|
|
this
|
|
);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 鼠标移出事件，响应zrender事件，包装后分发到Echarts层
|
|
*/
|
|
_onmouseout: function (param) {
|
|
if (param.target) {
|
|
var ecData = this._eventPackage(param.target);
|
|
if (ecData && ecData.seriesIndex != null) {
|
|
this._messageCenter.dispatch(
|
|
ecConfig.EVENT.MOUSEOUT,
|
|
param.event,
|
|
ecData,
|
|
this
|
|
);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* dragstart回调，可计算特性实现
|
|
*/
|
|
_ondragstart: function (param) {
|
|
// 复位用于图表间通信拖拽标识
|
|
this._status = {
|
|
dragIn: false,
|
|
dragOut: false,
|
|
needRefresh: false
|
|
};
|
|
|
|
callChartListMethodReverse(this, 'ondragstart', param);
|
|
},
|
|
|
|
/**
|
|
* dragging回调，可计算特性实现
|
|
*/
|
|
_ondragenter: function (param) {
|
|
callChartListMethodReverse(this, 'ondragenter', param);
|
|
},
|
|
|
|
/**
|
|
* dragstart回调，可计算特性实现
|
|
*/
|
|
_ondragover: function (param) {
|
|
callChartListMethodReverse(this, 'ondragover', param);
|
|
},
|
|
|
|
/**
|
|
* dragstart回调，可计算特性实现
|
|
*/
|
|
_ondragleave: function (param) {
|
|
callChartListMethodReverse(this, 'ondragleave', param);
|
|
},
|
|
|
|
/**
|
|
* dragstart回调，可计算特性实现
|
|
*/
|
|
_ondrop: function (param) {
|
|
callChartListMethodReverse(this, 'ondrop', param, this._status);
|
|
this._island.ondrop(param, this._status);
|
|
},
|
|
|
|
/**
|
|
* dragdone回调 ，可计算特性实现
|
|
*/
|
|
_ondragend: function (param) {
|
|
callChartListMethodReverse(this, 'ondragend', param, this._status);
|
|
|
|
this._timeline && this._timeline.ondragend(param, this._status);
|
|
this._island.ondragend(param, this._status);
|
|
|
|
// 发生过重计算
|
|
if (this._status.needRefresh) {
|
|
this._syncBackupData(this._option);
|
|
|
|
var messageCenter = this._messageCenter;
|
|
messageCenter.dispatch(
|
|
ecConfig.EVENT.DATA_CHANGED,
|
|
param.event,
|
|
this._eventPackage(param.target),
|
|
this
|
|
);
|
|
messageCenter.dispatch(ecConfig.EVENT.REFRESH, null, null, this);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 图例选择响应
|
|
*/
|
|
_onlegendSelected: function (param) {
|
|
// 用于图表间通信
|
|
this._status.needRefresh = false;
|
|
callChartListMethodReverse(this, 'onlegendSelected', param, this._status);
|
|
|
|
if (this._status.needRefresh) {
|
|
this._messageCenter.dispatch(ecConfig.EVENT.REFRESH, null, null, this);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 数据区域缩放响应
|
|
*/
|
|
_ondataZoom: function (param) {
|
|
// 用于图表间通信
|
|
this._status.needRefresh = false;
|
|
callChartListMethodReverse(this, 'ondataZoom', param, this._status);
|
|
|
|
if (this._status.needRefresh) {
|
|
this._messageCenter.dispatch(ecConfig.EVENT.REFRESH, null, null, this);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 值域漫游响应
|
|
*/
|
|
_ondataRange: function (param) {
|
|
this._clearEffect();
|
|
// 用于图表间通信
|
|
this._status.needRefresh = false;
|
|
callChartListMethodReverse(this, 'ondataRange', param, this._status);
|
|
|
|
// 没有相互影响，直接刷新即可
|
|
if (this._status.needRefresh) {
|
|
this._zr.refreshNextFrame();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 动态类型切换响应
|
|
*/
|
|
_onmagicTypeChanged: function () {
|
|
this._clearEffect();
|
|
this._render(this._toolbox.getMagicOption());
|
|
},
|
|
|
|
/**
|
|
* 数据视图修改响应
|
|
*/
|
|
_ondataViewChanged: function (param) {
|
|
this._syncBackupData(param.option);
|
|
this._messageCenter.dispatch(
|
|
ecConfig.EVENT.DATA_CHANGED,
|
|
null,
|
|
param,
|
|
this
|
|
);
|
|
this._messageCenter.dispatch(ecConfig.EVENT.REFRESH, null, null, this);
|
|
},
|
|
|
|
/**
|
|
* tooltip与图表间通信
|
|
*/
|
|
_tooltipHover: function (param) {
|
|
var tipShape = [];
|
|
callChartListMethodReverse(this, 'ontooltipHover', param, tipShape);
|
|
},
|
|
|
|
/**
|
|
* 还原
|
|
*/
|
|
_onrestore: function () {
|
|
this.restore();
|
|
},
|
|
|
|
/**
|
|
* 刷新
|
|
*/
|
|
_onrefresh: function (param) {
|
|
this._refreshInside = true;
|
|
this.refresh(param);
|
|
this._refreshInside = false;
|
|
},
|
|
|
|
/**
|
|
* 数据修改后的反向同步dataZoom持有的备份数据
|
|
*/
|
|
_syncBackupData: function (curOption) {
|
|
this.component.dataZoom && this.component.dataZoom.syncBackupData(curOption);
|
|
},
|
|
|
|
/**
|
|
* 打包Echarts层的事件附件
|
|
*/
|
|
_eventPackage: function (target) {
|
|
if (target) {
|
|
var ecData = require('./util/ecData');
|
|
|
|
var seriesIndex = ecData.get(target, 'seriesIndex');
|
|
var dataIndex = ecData.get(target, 'dataIndex');
|
|
|
|
dataIndex = seriesIndex != -1 && this.component.dataZoom
|
|
? this.component.dataZoom.getRealDataIndex(
|
|
seriesIndex,
|
|
dataIndex
|
|
)
|
|
: dataIndex;
|
|
return {
|
|
seriesIndex: seriesIndex,
|
|
seriesName: (ecData.get(target, 'series') || {}).name,
|
|
dataIndex: dataIndex,
|
|
data: ecData.get(target, 'data'),
|
|
name: ecData.get(target, 'name'),
|
|
value: ecData.get(target, 'value'),
|
|
special: ecData.get(target, 'special')
|
|
};
|
|
}
|
|
return;
|
|
},
|
|
|
|
_noDataCheck: function(magicOption) {
|
|
var series = magicOption.series;
|
|
|
|
for (var i = 0, l = series.length; i < l; i++) {
|
|
if (series[i].type == ecConfig.CHART_TYPE_MAP
|
|
|| (series[i].data && series[i].data.length > 0)
|
|
|| (series[i].markPoint && series[i].markPoint.data && series[i].markPoint.data.length > 0)
|
|
|| (series[i].markLine && series[i].markLine.data && series[i].markLine.data.length > 0)
|
|
|| (series[i].nodes && series[i].nodes.length > 0)
|
|
|| (series[i].links && series[i].links.length > 0)
|
|
|| (series[i].matrix && series[i].matrix.length > 0)
|
|
|| (series[i].eventList && series[i].eventList.length > 0)
|
|
) {
|
|
return false; // 存在任意数据则为非空数据
|
|
}
|
|
}
|
|
var loadOption = (this._option && this._option.noDataLoadingOption)
|
|
|| this._themeConfig.noDataLoadingOption
|
|
|| ecConfig.noDataLoadingOption
|
|
|| {
|
|
text: (this._option && this._option.noDataText)
|
|
|| this._themeConfig.noDataText
|
|
|| ecConfig.noDataText,
|
|
effect: (this._option && this._option.noDataEffect)
|
|
|| this._themeConfig.noDataEffect
|
|
|| ecConfig.noDataEffect
|
|
};
|
|
// 空数据
|
|
this.clear();
|
|
this.showLoading(loadOption);
|
|
return true;
|
|
},
|
|
|
|
/**
|
|
* 图表渲染
|
|
*/
|
|
_render: function (magicOption) {
|
|
this._mergeGlobalConifg(magicOption);
|
|
|
|
if (this._noDataCheck(magicOption)) {
|
|
return;
|
|
}
|
|
|
|
var bgColor = magicOption.backgroundColor;
|
|
if (bgColor) {
|
|
if (!_canvasSupported
|
|
&& bgColor.indexOf('rgba') != -1
|
|
) {
|
|
// IE6~8对RGBA的处理，filter会带来其他颜色的影响
|
|
var cList = bgColor.split(',');
|
|
this.dom.style.filter = 'alpha(opacity=' +
|
|
cList[3].substring(0, cList[3].lastIndexOf(')')) * 100
|
|
+ ')';
|
|
cList.length = 3;
|
|
cList[0] = cList[0].replace('a', '');
|
|
this.dom.style.backgroundColor = cList.join(',') + ')';
|
|
}
|
|
else {
|
|
this.dom.style.backgroundColor = bgColor;
|
|
}
|
|
}
|
|
|
|
this._zr.clearAnimation();
|
|
this._chartList = [];
|
|
|
|
var chartLibrary = require('./chart');
|
|
var componentLibrary = require('./component');
|
|
|
|
if (magicOption.xAxis || magicOption.yAxis) {
|
|
magicOption.grid = magicOption.grid || {};
|
|
magicOption.dataZoom = magicOption.dataZoom || {};
|
|
}
|
|
|
|
var componentList = [
|
|
'title', 'legend', 'tooltip', 'dataRange', 'roamController',
|
|
'grid', 'dataZoom', 'xAxis', 'yAxis', 'polar'
|
|
];
|
|
|
|
var ComponentClass;
|
|
var componentType;
|
|
var component;
|
|
for (var i = 0, l = componentList.length; i < l; i++) {
|
|
componentType = componentList[i];
|
|
component = this.component[componentType];
|
|
|
|
if (magicOption[componentType]) {
|
|
if (component) {
|
|
component.refresh && component.refresh(magicOption);
|
|
}
|
|
else {
|
|
ComponentClass = componentLibrary.get(
|
|
/^[xy]Axis$/.test(componentType) ? 'axis' : componentType
|
|
);
|
|
component = new ComponentClass(
|
|
this._themeConfig, this._messageCenter, this._zr,
|
|
magicOption, this, componentType
|
|
);
|
|
this.component[componentType] = component;
|
|
}
|
|
this._chartList.push(component);
|
|
}
|
|
else if (component) {
|
|
component.dispose();
|
|
this.component[componentType] = null;
|
|
delete this.component[componentType];
|
|
}
|
|
}
|
|
|
|
var ChartClass;
|
|
var chartType;
|
|
var chart;
|
|
var chartMap = {}; // 记录已经初始化的图表
|
|
for (var i = 0, l = magicOption.series.length; i < l; i++) {
|
|
chartType = magicOption.series[i].type;
|
|
if (!chartType) {
|
|
console.error('series[' + i + '] chart type has not been defined.');
|
|
continue;
|
|
}
|
|
|
|
if (!chartMap[chartType]) {
|
|
chartMap[chartType] = true;
|
|
ChartClass = chartLibrary.get(chartType);
|
|
if (ChartClass) {
|
|
if (this.chart[chartType]) {
|
|
chart = this.chart[chartType];
|
|
chart.refresh(magicOption);
|
|
}
|
|
else {
|
|
chart = new ChartClass(
|
|
this._themeConfig, this._messageCenter, this._zr,
|
|
magicOption, this
|
|
);
|
|
}
|
|
this._chartList.push(chart);
|
|
this.chart[chartType] = chart;
|
|
}
|
|
else {
|
|
console.error(chartType + ' has not been required.');
|
|
}
|
|
}
|
|
}
|
|
|
|
// 已有实例但新option不带这类图表的实例释放
|
|
for (chartType in this.chart) {
|
|
if (chartType != ecConfig.CHART_TYPE_ISLAND && !chartMap[chartType]) {
|
|
this.chart[chartType].dispose();
|
|
this.chart[chartType] = null;
|
|
delete this.chart[chartType];
|
|
}
|
|
}
|
|
|
|
this.component.grid && this.component.grid.refixAxisShape(this.component);
|
|
|
|
this._island.refresh(magicOption);
|
|
this._toolbox.refresh(magicOption);
|
|
|
|
magicOption.animation && !magicOption.renderAsImage
|
|
? this._zr.refresh()
|
|
: this._zr.render();
|
|
|
|
var imgId = 'IMG' + this.id;
|
|
var img = document.getElementById(imgId);
|
|
if (magicOption.renderAsImage && _canvasSupported) {
|
|
// IE8- 不支持图片渲染形式
|
|
if (img) {
|
|
// 已经渲染过则更新显示
|
|
img.src = this.getDataURL(magicOption.renderAsImage);
|
|
}
|
|
else {
|
|
// 没有渲染过插入img dom
|
|
img = this.getImage(magicOption.renderAsImage);
|
|
img.id = imgId;
|
|
img.style.position = 'absolute';
|
|
img.style.left = 0;
|
|
img.style.top = 0;
|
|
this.dom.firstChild.appendChild(img);
|
|
}
|
|
this.un();
|
|
this._zr.un();
|
|
this._disposeChartList();
|
|
this._zr.clear();
|
|
}
|
|
else if (img) {
|
|
// 删除可能存在的img
|
|
img.parentNode.removeChild(img);
|
|
}
|
|
img = null;
|
|
|
|
this._option = magicOption;
|
|
},
|
|
|
|
/**
|
|
* 还原
|
|
*/
|
|
restore: function () {
|
|
this._clearEffect();
|
|
this._option = zrUtil.clone(this._optionRestore);
|
|
this._disposeChartList();
|
|
this._island.clear();
|
|
this._toolbox.reset(this._option, true);
|
|
this._render(this._option);
|
|
},
|
|
|
|
/**
|
|
* 刷新
|
|
* @param {Object=} param，可选参数，用于附带option，内部同步用，外部不建议带入数据修改，无法同步
|
|
*/
|
|
refresh: function (param) {
|
|
this._clearEffect();
|
|
param = param || {};
|
|
var magicOption = param.option;
|
|
|
|
// 外部调用的refresh且有option带入
|
|
if (!this._refreshInside && magicOption) {
|
|
// 做简单的差异合并去同步内部持有的数据克隆，不建议带入数据
|
|
// 开启数据区域缩放、拖拽重计算、数据视图可编辑模式情况下，当用户产生了数据变化后无法同步
|
|
// 如有带入option存在数据变化，请重新setOption
|
|
magicOption = this.getOption();
|
|
zrUtil.merge(magicOption, param.option, true);
|
|
zrUtil.merge(this._optionRestore, param.option, true);
|
|
this._toolbox.reset(magicOption);
|
|
}
|
|
|
|
this._island.refresh(magicOption);
|
|
this._toolbox.refresh(magicOption);
|
|
|
|
// 停止动画
|
|
this._zr.clearAnimation();
|
|
// 先来后到，安顺序刷新各种图表，图表内部refresh优化检查magicOption，无需更新则不更新~
|
|
for (var i = 0, l = this._chartList.length; i < l; i++) {
|
|
this._chartList[i].refresh && this._chartList[i].refresh(magicOption);
|
|
}
|
|
this.component.grid && this.component.grid.refixAxisShape(this.component);
|
|
this._zr.refresh();
|
|
},
|
|
|
|
/**
|
|
* 释放图表实例
|
|
*/
|
|
_disposeChartList: function () {
|
|
this._clearEffect();
|
|
|
|
// 停止动画
|
|
this._zr.clearAnimation();
|
|
|
|
var len = this._chartList.length;
|
|
while (len--) {
|
|
var chart = this._chartList[len];
|
|
|
|
if (chart) {
|
|
var chartType = chart.type;
|
|
this.chart[chartType] && delete this.chart[chartType];
|
|
this.component[chartType] && delete this.component[chartType];
|
|
chart.dispose && chart.dispose();
|
|
}
|
|
}
|
|
|
|
this._chartList = [];
|
|
},
|
|
|
|
/**
|
|
* 非图表全局属性merge~~
|
|
*/
|
|
_mergeGlobalConifg: function (magicOption) {
|
|
var mergeList = [
|
|
// 背景颜色
|
|
'backgroundColor',
|
|
|
|
// 拖拽重计算相关
|
|
'calculable', 'calculableColor', 'calculableHolderColor',
|
|
|
|
// 孤岛显示连接符
|
|
'nameConnector', 'valueConnector',
|
|
|
|
// 动画相关
|
|
'animation', 'animationThreshold',
|
|
'animationDuration', 'animationDurationUpdate',
|
|
'animationEasing', 'addDataAnimation',
|
|
|
|
// 默认标志图形类型列表
|
|
'symbolList',
|
|
|
|
// 降低图表内元素拖拽敏感度，单位ms，不建议外部干预
|
|
'DRAG_ENABLE_TIME'
|
|
];
|
|
|
|
var len = mergeList.length;
|
|
while (len--) {
|
|
var mergeItem = mergeList[len];
|
|
if (magicOption[mergeItem] == null) {
|
|
magicOption[mergeItem] = this._themeConfig[mergeItem] != null
|
|
? this._themeConfig[mergeItem]
|
|
: ecConfig[mergeItem];
|
|
}
|
|
}
|
|
|
|
// 数值系列的颜色列表，不传则采用内置颜色，可配数组，借用zrender实例注入，会有冲突风险，先这样
|
|
var themeColor = magicOption.color;
|
|
if (!(themeColor && themeColor.length)) {
|
|
themeColor = this._themeConfig.color || ecConfig.color;
|
|
}
|
|
|
|
this._zr.getColor = function (idx) {
|
|
var zrColor = require('zrender/tool/color');
|
|
return zrColor.getColor(idx, themeColor);
|
|
};
|
|
|
|
if (!_canvasSupported) {
|
|
// 不支持Canvas的强制关闭动画
|
|
magicOption.animation = false;
|
|
magicOption.addDataAnimation = false;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 万能接口，配置图表实例任何可配置选项，多次调用时option选项做merge处理
|
|
* @param {Object} option
|
|
* @param {boolean=} notMerge 多次调用时option选项是默认是合并（merge）的，
|
|
* 如果不需求，可以通过notMerger参数为true阻止与上次option的合并
|
|
*/
|
|
setOption: function (option, notMerge) {
|
|
if (!option.timeline) {
|
|
return this._setOption(option, notMerge);
|
|
}
|
|
else {
|
|
return this._setTimelineOption(option);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 万能接口，配置图表实例任何可配置选项，多次调用时option选项做merge处理
|
|
* @param {Object} option
|
|
* @param {boolean=} notMerge 多次调用时option选项是默认是合并（merge）的，
|
|
* 如果不需求，可以通过notMerger参数为true阻止与上次option的合并
|
|
*/
|
|
_setOption: function (option, notMerge) {
|
|
if (!notMerge && this._option) {
|
|
this._option = zrUtil.merge(
|
|
this.getOption(),
|
|
zrUtil.clone(option),
|
|
true
|
|
);
|
|
}
|
|
else {
|
|
this._option = zrUtil.clone(option);
|
|
}
|
|
|
|
this._optionRestore = zrUtil.clone(this._option);
|
|
|
|
if (!this._option.series || this._option.series.length === 0) {
|
|
this._zr.clear();
|
|
return;
|
|
}
|
|
|
|
if (this.component.dataZoom // 存在dataZoom控件
|
|
&& (this._option.dataZoom // 并且新option也存在
|
|
|| (this._option.toolbox
|
|
&& this._option.toolbox.feature
|
|
&& this._option.toolbox.feature.dataZoom
|
|
&& this._option.toolbox.feature.dataZoom.show
|
|
)
|
|
)
|
|
) {
|
|
// dataZoom同步数据
|
|
this.component.dataZoom.syncOption(this._option);
|
|
}
|
|
this._toolbox.reset(this._option);
|
|
this._render(this._option);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 返回内部持有的当前显示option克隆
|
|
*/
|
|
getOption: function () {
|
|
var magicOption = zrUtil.clone(this._option);
|
|
|
|
var self = this;
|
|
function restoreOption(prop) {
|
|
var restoreSource = self._optionRestore[prop];
|
|
|
|
if (restoreSource) {
|
|
if (restoreSource instanceof Array) {
|
|
var len = restoreSource.length;
|
|
while (len--) {
|
|
magicOption[prop][len].data = zrUtil.clone(
|
|
restoreSource[len].data
|
|
);
|
|
}
|
|
}
|
|
else {
|
|
magicOption[prop].data = zrUtil.clone(restoreSource.data);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 横轴数据还原
|
|
restoreOption('xAxis');
|
|
|
|
// 纵轴数据还原
|
|
restoreOption('yAxis');
|
|
|
|
// 系列数据还原
|
|
restoreOption('series');
|
|
|
|
return magicOption;
|
|
},
|
|
|
|
/**
|
|
* 数据设置快捷接口
|
|
* @param {Array} series
|
|
* @param {boolean=} notMerge 多次调用时option选项是默认是合并（merge）的，
|
|
* 如果不需求，可以通过notMerger参数为true阻止与上次option的合并。
|
|
*/
|
|
setSeries: function (series, notMerge) {
|
|
if (!notMerge) {
|
|
this.setOption({series: series});
|
|
}
|
|
else {
|
|
this._option.series = series;
|
|
this.setOption(this._option, notMerge);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 返回内部持有的当前显示series克隆
|
|
*/
|
|
getSeries: function () {
|
|
return this.getOption().series;
|
|
},
|
|
|
|
/**
|
|
* timelineOption接口，配置图表实例任何可配置选项
|
|
* @param {Object} option
|
|
*/
|
|
_setTimelineOption: function(option) {
|
|
this._timeline && this._timeline.dispose();
|
|
var Timeline = require('./component/timeline');
|
|
var timeline = new Timeline(
|
|
this._themeConfig, this._messageCenter, this._zr, option, this
|
|
);
|
|
this._timeline = timeline;
|
|
this.component.timeline = this._timeline;
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 动态数据添加
|
|
* 形参为单组数据参数，多组时为数据，内容同[seriesIdx, data, isShift, additionData]
|
|
* @param {number} seriesIdx 系列索引
|
|
* @param {number | Object} data 增加数据
|
|
* @param {boolean=} isHead 是否队头加入，默认，不指定或false时为队尾插入
|
|
* @param {boolean=} dataGrow 是否增长数据队列长度，默认，不指定或false时移出目标数组对位数据
|
|
* @param {string=} additionData 是否增加类目轴(饼图为图例)数据，附加操作同isHead和dataGrow
|
|
*/
|
|
addData: function (seriesIdx, data, isHead, dataGrow, additionData) {
|
|
var params = seriesIdx instanceof Array
|
|
? seriesIdx
|
|
: [[seriesIdx, data, isHead, dataGrow, additionData]];
|
|
|
|
//this._optionRestore 和 magicOption 都要同步
|
|
var magicOption = this.getOption();
|
|
var optionRestore = this._optionRestore;
|
|
for (var i = 0, l = params.length; i < l; i++) {
|
|
seriesIdx = params[i][0];
|
|
data = params[i][1];
|
|
isHead = params[i][2];
|
|
dataGrow = params[i][3];
|
|
additionData = params[i][4];
|
|
|
|
var seriesItem = optionRestore.series[seriesIdx];
|
|
var inMethod = isHead ? 'unshift' : 'push';
|
|
var outMethod = isHead ? 'pop' : 'shift';
|
|
if (seriesItem) {
|
|
var seriesItemData = seriesItem.data;
|
|
var mSeriesItemData = magicOption.series[seriesIdx].data;
|
|
|
|
seriesItemData[inMethod](data);
|
|
mSeriesItemData[inMethod](data);
|
|
if (!dataGrow) {
|
|
seriesItemData[outMethod]();
|
|
data = mSeriesItemData[outMethod]();
|
|
}
|
|
|
|
if (additionData != null) {
|
|
var legend;
|
|
var legendData;
|
|
|
|
if (seriesItem.type === ecConfig.CHART_TYPE_PIE
|
|
&& (legend = optionRestore.legend)
|
|
&& (legendData = legend.data)
|
|
) {
|
|
var mLegendData = magicOption.legend.data;
|
|
legendData[inMethod](additionData);
|
|
mLegendData[inMethod](additionData);
|
|
|
|
if (!dataGrow) {
|
|
var legendDataIdx = zrUtil.indexOf(legendData, data.name);
|
|
legendDataIdx != -1 && legendData.splice(legendDataIdx, 1);
|
|
|
|
legendDataIdx = zrUtil.indexOf(mLegendData, data.name);
|
|
legendDataIdx != -1 && mLegendData.splice(legendDataIdx, 1);
|
|
}
|
|
}
|
|
else if (optionRestore.xAxis != null && optionRestore.yAxis != null) {
|
|
// x轴类目
|
|
var axisData;
|
|
var mAxisData;
|
|
var axisIdx = seriesItem.xAxisIndex || 0;
|
|
|
|
if (optionRestore.xAxis[axisIdx].type == null
|
|
|| optionRestore.xAxis[axisIdx].type === 'category'
|
|
) {
|
|
axisData = optionRestore.xAxis[axisIdx].data;
|
|
mAxisData = magicOption.xAxis[axisIdx].data;
|
|
|
|
axisData[inMethod](additionData);
|
|
mAxisData[inMethod](additionData);
|
|
if (!dataGrow) {
|
|
axisData[outMethod]();
|
|
mAxisData[outMethod]();
|
|
}
|
|
}
|
|
|
|
// y轴类目
|
|
axisIdx = seriesItem.yAxisIndex || 0;
|
|
if (optionRestore.yAxis[axisIdx].type === 'category') {
|
|
axisData = optionRestore.yAxis[axisIdx].data;
|
|
mAxisData = magicOption.yAxis[axisIdx].data;
|
|
|
|
axisData[inMethod](additionData);
|
|
mAxisData[inMethod](additionData);
|
|
if (!dataGrow) {
|
|
axisData[outMethod]();
|
|
mAxisData[outMethod]();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 同步图表内状态，动画需要
|
|
this._option.series[seriesIdx].data = magicOption.series[seriesIdx].data;
|
|
}
|
|
}
|
|
|
|
this._zr.clearAnimation();
|
|
var chartList = this._chartList;
|
|
var chartAnimationCount = 0;
|
|
var chartAnimationDone = function () {
|
|
chartAnimationCount--;
|
|
if (chartAnimationCount === 0) {
|
|
animationDone();
|
|
}
|
|
};
|
|
for (var i = 0, l = chartList.length; i < l; i++) {
|
|
if (magicOption.addDataAnimation && chartList[i].addDataAnimation) {
|
|
chartAnimationCount++;
|
|
chartList[i].addDataAnimation(params, chartAnimationDone);
|
|
}
|
|
}
|
|
|
|
// dataZoom同步数据
|
|
this.component.dataZoom && this.component.dataZoom.syncOption(magicOption);
|
|
|
|
this._option = magicOption;
|
|
var self = this;
|
|
function animationDone() {
|
|
if (!self._zr) {
|
|
return; // 已经被释放
|
|
}
|
|
self._zr.clearAnimation();
|
|
for (var i = 0, l = chartList.length; i < l; i++) {
|
|
// 有addData动画就去掉过渡动画
|
|
chartList[i].motionlessOnce =
|
|
magicOption.addDataAnimation && chartList[i].addDataAnimation;
|
|
}
|
|
self._messageCenter.dispatch(
|
|
ecConfig.EVENT.REFRESH,
|
|
null,
|
|
{option: magicOption},
|
|
self
|
|
);
|
|
}
|
|
|
|
if (!magicOption.addDataAnimation) {
|
|
setTimeout(animationDone, 0);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 动态[标注 | 标线]添加
|
|
* @param {number} seriesIdx 系列索引
|
|
* @param {Object} markData [标注 | 标线]对象，支持多个
|
|
*/
|
|
addMarkPoint: function (seriesIdx, markData) {
|
|
return this._addMark(seriesIdx, markData, 'markPoint');
|
|
},
|
|
|
|
addMarkLine: function (seriesIdx, markData) {
|
|
return this._addMark(seriesIdx, markData, 'markLine');
|
|
},
|
|
|
|
_addMark: function (seriesIdx, markData, markType) {
|
|
var series = this._option.series;
|
|
var seriesItem;
|
|
|
|
if (series && (seriesItem = series[seriesIdx])) {
|
|
var seriesR = this._optionRestore.series;
|
|
var seriesRItem = seriesR[seriesIdx];
|
|
var markOpt = seriesItem[markType];
|
|
var markOptR = seriesRItem[markType];
|
|
|
|
markOpt = seriesItem[markType] = markOpt || {data: []};
|
|
markOptR = seriesRItem[markType] = markOptR || {data: []};
|
|
|
|
for (var key in markData) {
|
|
if (key === 'data') {
|
|
// 数据concat
|
|
markOpt.data = markOpt.data.concat(markData.data);
|
|
markOptR.data = markOptR.data.concat(markData.data);
|
|
}
|
|
else if (typeof markData[key] != 'object' || markOpt[key] == null) {
|
|
// 简单类型或新值直接赋值
|
|
markOpt[key] = markOptR[key] = markData[key];
|
|
}
|
|
else {
|
|
// 非数据的复杂对象merge
|
|
zrUtil.merge(markOpt[key], markData[key], true);
|
|
zrUtil.merge(markOptR[key], markData[key], true);
|
|
}
|
|
}
|
|
|
|
var chart = this.chart[seriesItem.type];
|
|
chart && chart.addMark(seriesIdx, markData, markType);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 动态[标注 | 标线]删除
|
|
* @param {number} seriesIdx 系列索引
|
|
* @param {string} markName [标注 | 标线]名称
|
|
*/
|
|
delMarkPoint: function (seriesIdx, markName) {
|
|
return this._delMark(seriesIdx, markName, 'markPoint');
|
|
},
|
|
|
|
delMarkLine: function (seriesIdx, markName) {
|
|
return this._delMark(seriesIdx, markName, 'markLine');
|
|
},
|
|
|
|
_delMark: function (seriesIdx, markName, markType) {
|
|
var series = this._option.series;
|
|
var seriesItem;
|
|
var mark;
|
|
var dataArray;
|
|
|
|
if (!(
|
|
series
|
|
&& (seriesItem = series[seriesIdx])
|
|
&& (mark = seriesItem[markType])
|
|
&& (dataArray = mark.data)
|
|
)
|
|
) {
|
|
return this;
|
|
}
|
|
|
|
markName = markName.split(' > ');
|
|
var targetIndex = -1;
|
|
|
|
for (var i = 0, l = dataArray.length; i < l; i++) {
|
|
var dataItem = dataArray[i];
|
|
if (dataItem instanceof Array) {
|
|
if (dataItem[0].name === markName[0]
|
|
&& dataItem[1].name === markName[1]
|
|
) {
|
|
targetIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
else if (dataItem.name === markName[0]) {
|
|
targetIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (targetIndex > -1) {
|
|
dataArray.splice(targetIndex, 1);
|
|
this._optionRestore.series[seriesIdx][markType].data.splice(targetIndex, 1);
|
|
|
|
var chart = this.chart[seriesItem.type];
|
|
chart && chart.delMark(seriesIdx, markName.join(' > '), markType);
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 获取当前dom
|
|
*/
|
|
getDom: function () {
|
|
return this.dom;
|
|
},
|
|
|
|
/**
|
|
* 获取当前zrender实例，可用于添加额为的shape和深度控制
|
|
*/
|
|
getZrender: function () {
|
|
return this._zr;
|
|
},
|
|
|
|
/**
|
|
* 获取Base64图片dataURL
|
|
* @param {string} imgType 图片类型，支持png|jpeg，默认为png
|
|
* @return imgDataURL
|
|
*/
|
|
getDataURL: function (imgType) {
|
|
if (!_canvasSupported) {
|
|
return '';
|
|
}
|
|
|
|
if (this._chartList.length === 0) {
|
|
// 渲染为图片
|
|
var imgId = 'IMG' + this.id;
|
|
var img = document.getElementById(imgId);
|
|
if (img) {
|
|
return img.src;
|
|
}
|
|
}
|
|
|
|
// 清除可能存在的tooltip元素
|
|
var tooltip = this.component.tooltip;
|
|
tooltip && tooltip.hideTip();
|
|
|
|
switch (imgType) {
|
|
case 'jpeg':
|
|
break;
|
|
default:
|
|
imgType = 'png';
|
|
}
|
|
|
|
var bgColor = this._option.backgroundColor;
|
|
if (bgColor && bgColor.replace(' ','') === 'rgba(0,0,0,0)') {
|
|
bgColor = '#fff';
|
|
}
|
|
|
|
return this._zr.toDataURL('image/' + imgType, bgColor);
|
|
},
|
|
|
|
/**
|
|
* 获取img
|
|
* @param {string} imgType 图片类型，支持png|jpeg，默认为png
|
|
* @return img dom
|
|
*/
|
|
getImage: function (imgType) {
|
|
var title = this._optionRestore.title;
|
|
var imgDom = document.createElement('img');
|
|
imgDom.src = this.getDataURL(imgType);
|
|
imgDom.title = (title && title.text) || 'ECharts';
|
|
return imgDom;
|
|
},
|
|
|
|
/**
|
|
* 获取多图联动的Base64图片dataURL
|
|
* @param {string} imgType 图片类型，支持png|jpeg，默认为png
|
|
* @return imgDataURL
|
|
*/
|
|
getConnectedDataURL: function (imgType) {
|
|
if (!this.isConnected()) {
|
|
return this.getDataURL(imgType);
|
|
}
|
|
|
|
var tempDom = this.dom;
|
|
var imgList = {
|
|
'self': {
|
|
img: this.getDataURL(imgType),
|
|
left: tempDom.offsetLeft,
|
|
top: tempDom.offsetTop,
|
|
right: tempDom.offsetLeft + tempDom.offsetWidth,
|
|
bottom: tempDom.offsetTop + tempDom.offsetHeight
|
|
}
|
|
};
|
|
|
|
var minLeft = imgList.self.left;
|
|
var minTop = imgList.self.top;
|
|
var maxRight = imgList.self.right;
|
|
var maxBottom = imgList.self.bottom;
|
|
|
|
for (var c in this._connected) {
|
|
tempDom = this._connected[c].getDom();
|
|
imgList[c] = {
|
|
img: this._connected[c].getDataURL(imgType),
|
|
left: tempDom.offsetLeft,
|
|
top: tempDom.offsetTop,
|
|
right: tempDom.offsetLeft + tempDom.offsetWidth,
|
|
bottom: tempDom.offsetTop + tempDom.offsetHeight
|
|
};
|
|
|
|
minLeft = Math.min(minLeft, imgList[c].left);
|
|
minTop = Math.min(minTop, imgList[c].top);
|
|
maxRight = Math.max(maxRight, imgList[c].right);
|
|
maxBottom = Math.max(maxBottom, imgList[c].bottom);
|
|
}
|
|
|
|
var zrDom = document.createElement('div');
|
|
zrDom.style.position = 'absolute';
|
|
zrDom.style.left = '-4000px';
|
|
zrDom.style.width = (maxRight - minLeft) + 'px';
|
|
zrDom.style.height = (maxBottom - minTop) + 'px';
|
|
document.body.appendChild(zrDom);
|
|
|
|
var zrImg = require('zrender').init(zrDom);
|
|
|
|
var ImageShape = require('zrender/shape/Image');
|
|
for (var c in imgList) {
|
|
zrImg.addShape(new ImageShape({
|
|
style: {
|
|
x: imgList[c].left - minLeft,
|
|
y: imgList[c].top - minTop,
|
|
image: imgList[c].img
|
|
}
|
|
}));
|
|
}
|
|
|
|
zrImg.render();
|
|
var bgColor = this._option.backgroundColor;
|
|
if (bgColor && bgColor.replace(/ /g, '') === 'rgba(0,0,0,0)') {
|
|
bgColor = '#fff';
|
|
}
|
|
|
|
var image = zrImg.toDataURL('image/png', bgColor);
|
|
|
|
setTimeout(function () {
|
|
zrImg.dispose();
|
|
zrDom.parentNode.removeChild(zrDom);
|
|
zrDom = null;
|
|
}, 100);
|
|
|
|
return image;
|
|
},
|
|
|
|
/**
|
|
* 获取多图联动的img
|
|
* @param {string} imgType 图片类型，支持png|jpeg，默认为png
|
|
* @return img dom
|
|
*/
|
|
getConnectedImage: function (imgType) {
|
|
var title = this._optionRestore.title;
|
|
var imgDom = document.createElement('img');
|
|
imgDom.src = this.getConnectedDataURL(imgType);
|
|
imgDom.title = (title && title.text) || 'ECharts';
|
|
return imgDom;
|
|
},
|
|
|
|
/**
|
|
* 外部接口绑定事件
|
|
* @param {Object} eventName 事件名称
|
|
* @param {Object} eventListener 事件响应函数
|
|
*/
|
|
on: function (eventName, eventListener) {
|
|
this._messageCenterOutSide.bind(eventName, eventListener, this);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 外部接口解除事件绑定
|
|
* @param {Object} eventName 事件名称
|
|
* @param {Object} eventListener 事件响应函数
|
|
*/
|
|
un: function (eventName, eventListener) {
|
|
this._messageCenterOutSide.unbind(eventName, eventListener);
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 多图联动
|
|
* @param connectTarget{ECharts | Array <ECharts>} connectTarget 联动目标
|
|
*/
|
|
connect: function (connectTarget) {
|
|
if (!connectTarget) {
|
|
return this;
|
|
}
|
|
|
|
if (!this._connected) {
|
|
this._connected = {};
|
|
}
|
|
|
|
if (connectTarget instanceof Array) {
|
|
for (var i = 0, l = connectTarget.length; i < l; i++) {
|
|
this._connected[connectTarget[i].id] = connectTarget[i];
|
|
}
|
|
}
|
|
else {
|
|
this._connected[connectTarget.id] = connectTarget;
|
|
}
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 解除多图联动
|
|
* @param connectTarget{ECharts | Array <ECharts>} connectTarget 解除联动目标
|
|
*/
|
|
disConnect: function (connectTarget) {
|
|
if (!connectTarget || !this._connected) {
|
|
return this;
|
|
}
|
|
|
|
if (connectTarget instanceof Array) {
|
|
for (var i = 0, l = connectTarget.length; i < l; i++) {
|
|
delete this._connected[connectTarget[i].id];
|
|
}
|
|
}
|
|
else {
|
|
delete this._connected[connectTarget.id];
|
|
}
|
|
|
|
for (var k in this._connected) {
|
|
return k, this; // 非空
|
|
}
|
|
|
|
// 空，转为标志位
|
|
this._connected = false;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 联动事件响应
|
|
*/
|
|
connectedEventHandler: function (param) {
|
|
if (param.__echartsId != this.id) {
|
|
// 来自其他联动图表的事件
|
|
this._onevent(param);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 是否存在多图联动
|
|
*/
|
|
isConnected: function () {
|
|
return !!this._connected;
|
|
},
|
|
|
|
/**
|
|
* 显示loading过渡
|
|
* @param {Object} loadingOption
|
|
*/
|
|
showLoading: function (loadingOption) {
|
|
var effectList = {
|
|
bar: require('zrender/loadingEffect/Bar'),
|
|
bubble: require('zrender/loadingEffect/Bubble'),
|
|
dynamicLine: require('zrender/loadingEffect/DynamicLine'),
|
|
ring: require('zrender/loadingEffect/Ring'),
|
|
spin: require('zrender/loadingEffect/Spin'),
|
|
whirling: require('zrender/loadingEffect/Whirling')
|
|
};
|
|
this._toolbox.hideDataView();
|
|
|
|
loadingOption = loadingOption || {};
|
|
|
|
var textStyle = loadingOption.textStyle || {};
|
|
loadingOption.textStyle = textStyle;
|
|
|
|
var finalTextStyle = zrUtil.merge(
|
|
zrUtil.merge(
|
|
zrUtil.clone(textStyle),
|
|
this._themeConfig.textStyle
|
|
),
|
|
ecConfig.textStyle
|
|
);
|
|
|
|
textStyle.textFont = finalTextStyle.fontStyle + ' '
|
|
+ finalTextStyle.fontWeight + ' '
|
|
+ finalTextStyle.fontSize + 'px '
|
|
+ finalTextStyle.fontFamily;
|
|
|
|
textStyle.text = loadingOption.text
|
|
|| (this._option && this._option.loadingText)
|
|
|| this._themeConfig.loadingText
|
|
|| ecConfig.loadingText;
|
|
|
|
if (loadingOption.x != null) {
|
|
textStyle.x = loadingOption.x;
|
|
}
|
|
if (loadingOption.y != null) {
|
|
textStyle.y = loadingOption.y;
|
|
}
|
|
|
|
loadingOption.effectOption = loadingOption.effectOption || {};
|
|
loadingOption.effectOption.textStyle = textStyle;
|
|
|
|
var Effect = loadingOption.effect;
|
|
if (typeof Effect === 'string' || Effect == null) {
|
|
Effect = effectList[
|
|
loadingOption.effect
|
|
|| (this._option && this._option.loadingEffect)
|
|
|| this._themeConfig.loadingEffect
|
|
|| ecConfig.loadingEffect
|
|
]
|
|
|| effectList.spin;
|
|
}
|
|
this._zr.showLoading(new Effect(loadingOption.effectOption));
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 隐藏loading过渡
|
|
*/
|
|
hideLoading: function () {
|
|
this._zr.hideLoading();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 主题设置
|
|
*/
|
|
setTheme: function (theme) {
|
|
if (theme) {
|
|
if (typeof theme === 'string') {
|
|
// 默认主题
|
|
switch (theme) {
|
|
case 'macarons':
|
|
theme = require('./theme/macarons');
|
|
break;
|
|
case 'infographic':
|
|
theme = require('./theme/infographic');
|
|
break;
|
|
default:
|
|
theme = {}; // require('./theme/default');
|
|
}
|
|
}
|
|
else {
|
|
theme = theme || {};
|
|
}
|
|
|
|
// // 复位默认配置
|
|
// // this._themeConfig会被别的对象引用持有
|
|
// // 所以不能改成this._themeConfig = {};
|
|
// for (var key in this._themeConfig) {
|
|
// delete this._themeConfig[key];
|
|
// }
|
|
// for (var key in ecConfig) {
|
|
// this._themeConfig[key] = zrUtil.clone(ecConfig[key]);
|
|
// }
|
|
|
|
// // 颜色数组随theme，不merge
|
|
// theme.color && (this._themeConfig.color = []);
|
|
|
|
// // 默认标志图形类型列表，不merge
|
|
// theme.symbolList && (this._themeConfig.symbolList = []);
|
|
|
|
// // 应用新主题
|
|
// zrUtil.merge(this._themeConfig, zrUtil.clone(theme), true);
|
|
this._themeConfig = theme;
|
|
}
|
|
|
|
if (!_canvasSupported) { // IE8-
|
|
var textStyle = this._themeConfig.textStyle;
|
|
textStyle && textStyle.fontFamily && textStyle.fontFamily2
|
|
&& (textStyle.fontFamily = textStyle.fontFamily2);
|
|
|
|
textStyle = ecConfig.textStyle;
|
|
textStyle.fontFamily = textStyle.fontFamily2;
|
|
}
|
|
|
|
this._timeline && this._timeline.setTheme(true);
|
|
this._optionRestore && this.restore();
|
|
},
|
|
|
|
/**
|
|
* 视图区域大小变化更新，不默认绑定，供使用方按需调用
|
|
*/
|
|
resize: function () {
|
|
var self = this;
|
|
return function(){
|
|
self._clearEffect();
|
|
self._zr.resize();
|
|
if (self._option && self._option.renderAsImage && _canvasSupported) {
|
|
// 渲染为图片重走render模式
|
|
self._render(self._option);
|
|
return self;
|
|
}
|
|
// 停止动画
|
|
self._zr.clearAnimation();
|
|
self._island.resize();
|
|
self._toolbox.resize();
|
|
self._timeline && self._timeline.resize();
|
|
// 先来后到，不能仅刷新自己，也不能在上一个循环中刷新，如坐标系数据改变会影响其他图表的大小
|
|
// 所以安顺序刷新各种图表，图表内部refresh优化无需更新则不更新~
|
|
for (var i = 0, l = self._chartList.length; i < l; i++) {
|
|
self._chartList[i].resize && self._chartList[i].resize();
|
|
}
|
|
self.component.grid && self.component.grid.refixAxisShape(self.component);
|
|
self._zr.refresh();
|
|
self._messageCenter.dispatch(ecConfig.EVENT.RESIZE, null, null, self);
|
|
return self;
|
|
};
|
|
},
|
|
|
|
_clearEffect: function() {
|
|
this._zr.modLayer(ecConfig.EFFECT_ZLEVEL, { motionBlur: false });
|
|
this._zr.painter.clearLayer(ecConfig.EFFECT_ZLEVEL);
|
|
},
|
|
|
|
/**
|
|
* 清除已渲染内容 ，clear后echarts实例可用
|
|
*/
|
|
clear: function () {
|
|
this._disposeChartList();
|
|
this._zr.clear();
|
|
this._option = {};
|
|
this._optionRestore = {};
|
|
this.dom.style.backgroundColor = null;
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* 释放，dispose后echarts实例不可用
|
|
*/
|
|
dispose: function () {
|
|
var key = this.dom.getAttribute(DOM_ATTRIBUTE_KEY);
|
|
key && delete _instances[key];
|
|
|
|
this._island.dispose();
|
|
this._toolbox.dispose();
|
|
this._timeline && this._timeline.dispose();
|
|
this._messageCenter.unbind();
|
|
this.clear();
|
|
this._zr.dispose();
|
|
this._zr = null;
|
|
}
|
|
};
|
|
|
|
return self;
|
|
});
|