记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题。
一、外部按钮调用ECharts图表的保存为图片操作
最近使用ECharts库绘制图表,依据需求希望可以把图表设置的保存为图片操作可以在图表外部调用,主要是希望可以和项目之前的下载图片操作界面保持一致。然后上网找了一些方法,看了看也没遇到一个可以满意的。后来,突然想到了echart开放了源码,可以看看源码,找到下载的方法,然后调用不就可以了(可能是我技术忒次,看了看不只到如何直接调用方法,所以把源方法copy下来,改了改,只需要传递图表的容器id即可)
echart图表示例(工具栏中有下载图片按钮)
附上代码记录一下
rush:js;">
//传递图表容器idfunction downloadImpByChart(chartId){
var myChart = echarts.getInstanceByDom(document.getElementById(chartId));
var url = myChart.getConnectedDataURL({
pixelRatio: 5, //导出的
图片分辨率比率,
默认是1
backgroundColor: '#fff', //图表背景色
excludeComponents:[ //保存图表时忽略的工具组件,
默认忽略工具栏
'tool
Box'
],type:'png' //
图片类型
支持png和jpeg
});
var $a = document.createElement('a');
var type = 'png';
$a.download = myChart.g
etoption().title[0].text + '.' + type;
$a.target = '_blank';
$a.href = url;
// Chrome and Firefox
if (typeof MouseEvent === 'function') {
var evt = new MouseEvent('click',{
view: window,bubbles: true,cancelable: false
});
$a.
dispatchEvent(evt);
}
// IE
else {
var html = ''
+ '
'
+ '';
var tab = window.
open();
tab.document.write(html);
}
};
0){
$("#del-curve-icon").css({
position:"absolute",top: e.pageY-obj.offset().top-10,left: e.pageX-obj.offset().left-10,color:"#ff0000"
}).show();
}else{
var del_icon=$("").css({
position:"absolute",color:"#ff0000",fontSize:"20px"
});
obj.parent().append(del_icon);
}
del_Curve.xAxis=$("#del-curve-icon").offset().left;
del_Curve.yAxis=$("#del-curve-icon").offset().top;
}
//然后高亮当前曲线
if($(this).attr("start")!=undefined && $(this).attr("end")!=undefined){
//设置透明度
$("svg .node").each(function(){
this.setAttribute("opacity","0.1");
});
$.each(relation.links,"0.1");
});
obj.children("g").eq(0).children("g").eq(0).before($(this));
$(this).attr("class","curve curve-hover");
var in_node=$("#"+$(this).attr("start")).children("g").eq(0).children("circle").eq(1);
in_node.attr("class",in_node.attr("class")+" node-hover");
$("#"+$(this).attr("start"))[0].setAttribute("opacity","1");
var out_node=$("#"+$(this).attr("end")).children("g").eq(0).children("circle").eq(1);
out_node.attr("class",out_node.attr("class")+" node-hover");
$("#"+$(this).attr("end"))[0].setAttribute("opacity","1");
}
});