Echarts自定義工具欄元件
阿新 • • 發佈：2019-01-26
Echarts預設自帶了幾個工具欄元件，如柱狀圖和折線圖的切換，圖片的下載等，有時這些元件並不能完全滿足我們的需求，這時需要我們自定義自己的元件。
應用場景一：在一個頁面中需要展示多個圖形（圖形相對來說較小），對每個圖形增加一個放大的按鈕，可以將圖形進行放大。
實現思路一：獲取echarts生成的圖片，然後將圖片放到另一個div裡面。缺點：放大後可能不是很清晰，圖示上的事件也不能起作用。
實現思路二：獲取當前圖形的option配置項，在另外一個圖形裡面裝載它。
效果圖如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.js"></script> <style> #mask{ display:none; background:rgba(0,0,0,0.3); z-index:999999999; width:100%; height:300%; position:fixed;//利用固定定位的好處：頁面還可以上下翻動，但是始終處於灰色背景下 } #show{ display:none; background:white; width:90%; height:90%; position:fixed; left:5%; top:1%; margin-top:2%; z-index:999999999; } #show #close_show{ position:relative; left:98%; top:1%; font-size:20px; z-index:999999999; color:red; width:20px; height:20px; cursor:pointer; } </style> </head> <body> <!-- 定義一個蒙層 --> <div id="mask"></div> <!-- 顯示放大後的圖 --> <div id="show"> <span id="close_show">×</span> <div id="enlarge" style="width:100%;height:80%"></div> </div> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, toolbox: {//工具欄元件 show : true, feature : { magicType : {show: true, type: ['line', 'bar']},//柱狀圖和折線圖相互轉換 myEnlarge:{//放大按鈕，自定義按鈕必須以my開頭 show:true, title:'放大', icon:'image://add.png',//按鈕圖片的位置 onclick: function (){ var mask=document.getElementById("mask"); var show=document.getElementById("show"); mask.style.display="block"; show.style.display="block"; var imgChart = echarts.init(document.getElementById('enlarge')); imgChart.clear(); //myChart.getOption()獲取當前圖形的配置項option imgChart.setOption(myChart.getOption()); var close_show=document.getElementById("close_show"); close_show.onclick=function(){//關閉按鈕觸發 mask.style.display="none"; show.style.display="none"; }; } }, dataView:{ show: true, title: '銷量' } }, saveAsImage : {show:true},//儲存圖片 restore : {show: true}//還原 }, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
