echarts 如何添加按鈕,按鈕上面有文字(不以工具欄myTool的形式,myTool只能添加icon圖標,並且圖標限定了大小)

功能需求:

echarts圖形的初始圖形A有點擊事件,從初始的圖形A點擊事件進入下一個圖形B之後,可以通過B的圖形中的返回按鈕,點擊再回到圖形A

可以這麼做:

1.html

<div style="z-index:999;top:10px;right:20px;position:absolute;display:none" id="myToolDiv">
	<a href="javascript:void(0);" name="_list" class="easyui-linkbutton" onclick="goMyBack();" data-options="iconCls:'fas fa-reply-all e-icon fa-fw'">
        返回
     </a>
</div>
<div id="container" data-options="fit: true" style="background:white;margin:0px 0 0;"></div>

js加載完成之後,讓按鈕所在的div在body中上下左右居中

function autoPosition(){
	$("#myToolDiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    }); 
}

function goMyBack(){
  //自定義返回事件
}

2.默認notReturn 爲0,圖形A的點擊事件,會進入該方法,因爲notReturn!=1,所以按鈕會顯示出來

function showOrHiddenMyTool(){
	if(notReturn != 1){
		$("#myToolDiv").show();
	}else{
		$("#myToolDiv").hidden();
	}
}

3.點擊返回按鈕之後,會設置notReturn爲1,此時按鈕會隱藏起來(通過notReturn 的值動態的設置按鈕的顯示或者隱藏)

效果如圖:

默認全國地圖:

點擊每個省份,進入到該省的詳細地圖:

這個時候出現返回按鈕,點擊返回,再次回到全國地圖

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章