Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 748f2f79 编写于 作者: K kener
浏览文件
操作

多图联动支持保存图片自动拼接

上级 394a27e0
隐藏空白更改
内联 并排
Showing with 170 addition and 30 deletion
doc/asset/js/echartsThemeDesigner.js
浏览文件 @ 748f2f79
......@@ -163,7 +163,7 @@ function requireCallback (ec) {
style : {
x : domMain[i].offsetLeft - domGLeft + (i < 6 ? 0: domGWidth),
y : domMain[i].offsetTop - domGTop - (i < 6 ? 0: 1200),
image : myChart[i].getImage()
image : myChart[i].getDataURL()
}
});
}
......@@ -172,7 +172,7 @@ function requireCallback (ec) {
setTimeout(function() {
var bgColor = theme.backgroundColor
&& theme.backgroundColor.replace(' ','') == 'rgba(0,0,0,0)'
? '#fff' : theme.backgroundColor;
? '#fff' : theme.backgroundColor;
var image = _zr.toDataURL('image/png', bgColor);
_zr.dispose();
zrDom.parentNode.removeChild(zrDom);
......
doc/example/mix8.html
浏览文件 @ 748f2f79
......@@ -98,7 +98,16 @@ option = {
text: '2013年上半年上证指数'
},
tooltip : {
trigger: 'axis'
trigger: 'axis',
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 0, // 隐藏延迟，单位ms
formatter: function(params) {
var res = params[0][1];
res += '<br/>' + params[0][0];
res += '<br/> 开盘 : ' + params[0][2][0] + ' 最高 : ' + params[0][2][3];
res += '<br/> 收盘 : ' + params[0][2][1] + ' 最低 : ' + params[0][2][2];
return res;
}
},
legend: {
data:['上证指数','成交金额(万)','虚拟数据']
......@@ -108,9 +117,9 @@ option = {
feature : {
mark : true,
dataZoom : true,
dataView : {readOnly: false},
magicType:['line', 'bar'],
restore : true
restore : true,
saveAsImage : true
}
},
dataZoom : {
......@@ -255,7 +264,9 @@ option = {
option2 = {
tooltip : {
trigger: 'axis'
trigger: 'axis',
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 0 // 隐藏延迟，单位ms
},
legend: {
y : -30,
......@@ -300,6 +311,7 @@ option2 = {
{
type : 'value',
scale:true,
splitNumber: 3,
boundaryGap: [0.05, 0.05],
splitArea : {show : true}
}
......@@ -337,7 +349,9 @@ myChart2.setOption(option2);
option3 = {
tooltip : {
trigger: 'axis'
trigger: 'axis',
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 0 // 隐藏延迟，单位ms
},
legend: {
y : -30,
......
src/component/toolbox.js
浏览文件 @ 748f2f79
......@@ -11,8 +11,9 @@ define(function (require) {
* @param {Object} messageCenter echart消息中心
* @param {ZRender} zr zrender实例
* @param {HtmlElement} dom 目标对象
* @param {ECharts} myChart 当前图表实例
*/
function Toolbox(ecConfig, messageCenter, zr, dom) {
function Toolbox(ecConfig, messageCenter, zr, dom, myChart) {
var Base = require('./base');
Base.call(this, ecConfig, zr);
......@@ -688,12 +689,20 @@ define(function (require) {
if (imgType != 'png' && imgType != 'jpeg') {
imgType = 'png';
}
var bgColor = option.backgroundColor
&& option.backgroundColor.replace(' ','') == 'rgba(0,0,0,0)'
? '#fff' : option.backgroundColor;
var image = zr.toDataURL(
'image/' + imgType, bgColor
);
var image;
if (!myChart.isConnected()) {
image = zr.toDataURL(
'image/' + imgType,
option.backgroundColor
&& option.backgroundColor.replace(' ','') == 'rgba(0,0,0,0)'
? '#fff' : option.backgroundColor
);
}
else {
image = myChart.getConnectedDataURL(imgType);
}
var downloadDiv = document.createElement('div');
downloadDiv.id = '__echarts_download_wrap__';
downloadDiv.style.cssText = 'position:fixed;'
......
src/echarts.js
浏览文件 @ 748f2f79
......@@ -155,7 +155,7 @@ define(function(require) {
require('./component/polar');
// 工具箱
var Toolbox = componentLibrary.get('toolbox');
_toolbox = new Toolbox(_themeConfig, _messageCenter, _zr, dom);
_toolbox = new Toolbox(_themeConfig, _messageCenter, _zr, dom, self);
_disposeChartList();
}
......@@ -163,7 +163,7 @@ define(function(require) {
/**
* ECharts事件处理中心
*/
var _curEventType = null;
var _curEventType = null; // 破循环信号灯
function _onevent(param){
param.__echarts_id__ = param.__echarts_id__ || self.id;
var fromMyself = true;
......@@ -219,17 +219,9 @@ define(function(require) {
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) {
case ecConfig.EVENT.TOOLTIP_OUT_GRID :
if (!fromMyself) {
// 只处理来自外部的鼠标同步
var grid = self.component.grid;
if (grid) {
_zr.trigger(
......@@ -241,6 +233,14 @@ define(function(require) {
}
);
}
}
else if (_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();
}
}
break;
/*
......@@ -255,13 +255,13 @@ define(function(require) {
// 多图联动，只做自己的一级事件分发，避免级联事件循环
if (_connected && fromMyself && _curEventType == param.type) {
for (var c in _connected) {
_connected[c].connectEventHandler(param);
_connected[c].connectedEventHandler(param);
}
// 分发完毕后复位
_curEventType = null;
}
if (!fromMyself) {
if (!fromMyself) { // 处理了完联动事件复位
_curEventType = null;
}
}
......@@ -1266,6 +1266,13 @@ define(function(require) {
return self;
}
/**
* 获取当前dom
*/
function getDom() {
return dom;
}
/**
* 获取当前zrender实例，可用于添加额为的shape和深度控制
*/
......@@ -1290,6 +1297,9 @@ define(function(require) {
return img.src;
}
}
// 清除可能存在的tooltip元素
self.component.tooltip && self.component.tooltip.hideTip();
imgType = imgType || 'png';
if (imgType != 'png' && imgType != 'jpeg') {
imgType = 'png';
......@@ -1312,6 +1322,102 @@ define(function(require) {
|| 'ECharts';
return imgDom;
}
/**
* 获取多图联动的Base64图片dataURL
* @param {string} imgType 图片类型，支持png|jpeg，默认为png
* @return imgDataURL
*/
function getConnectedDataURL(imgType) {
if (!isConnected()) {
return getDataURL(imgType);
}
var tempDom;
var domSize = domSize = [
dom.offsetLeft, dom.offsetTop,
dom.offsetWidth, dom.offsetHeight
];
var imgList = {
'self' : {
img : self.getDataURL(imgType),
left : domSize[0],
top : domSize[1],
right : domSize[0] + domSize[2],
bottom : domSize[1] + domSize[3],
}
};
var minLeft = imgList.self.left;
var minTop = imgList.self.top;
var maxRight = imgList.self.right;
var maxBottom = imgList.self.bottom;
for (var c in _connected) {
tempDom = _connected[c].getDom();
domSize = [
tempDom.offsetLeft, tempDom.offsetTop,
tempDom.offsetWidth, tempDom.offsetHeight
];
imgList[c] = {
img : _connected[c].getDataURL(imgType),
left : domSize[0],
top : domSize[1],
right : domSize[0] + domSize[2],
bottom : domSize[1] + domSize[3],
}
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);
for (var c in imgList) {
zrImg.addShape({
shape:'image',
style : {
x : imgList[c].left - minLeft,
y : imgList[c].top - minTop,
image : imgList[c].img
}
});
}
zrImg.render();
var bgColor = _option.backgroundColor
&& _option.backgroundColor.replace(' ','') == 'rgba(0,0,0,0)'
? '#fff' : _option.backgroundColor;
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
*/
function getConnectedImage(imgType) {
var imgDom = document.createElement('img');
imgDom.src = getConnectedDataURL(imgType);
imgDom.title = (_optionRestore.title && _optionRestore.title.text)
|| 'ECharts';
return imgDom;
}
/**
* 绑定事件
......@@ -1388,13 +1494,20 @@ define(function(require) {
/**
* 联动事件响应
*/
function connectEventHandler(param) {
function connectedEventHandler(param) {
if (param.__echarts_id__ != self.id) {
// 来自其他联动图表的事件
_onevent(param);
}
}
/**
* 是否存在多图联动
*/
function isConnected() {
return !!_connected
}
/**
* 显示loading过渡
* @param {Object} loadingOption
......@@ -1552,14 +1665,18 @@ define(function(require) {
self.addData = addData;
self.getOption = getOption;
self.getSeries = getSeries;
self.getDom = getDom;
self.getZrender = getZrender;
self.getDataURL = getDataURL;
self.getImage = getImage;
self.getConnectedDataURL = getConnectedDataURL;
self.getConnectedImage = getConnectedImage;
self.on = on;
self.un = un;
self.connect = connect;
self.disConnect = disConnect;
self.connectEventHandler = connectEventHandler;
self.connectedEventHandler = connectedEventHandler;
self.isConnected = isConnected;
self.showLoading = showLoading;
self.hideLoading = hideLoading;
self.setTheme = setTheme;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或