echarts中toolbox增加自定義圖示和事件
上篇說到echarts提供了豐富的圖示，如提供了
saveAsImage儲存圖片
restore配置項還原
dataView資料檢視工具
dataZoom資料區域縮放
magicType動態型別切換
brush選擇元件的控制按鈕等。
在實際開發過程中，根據需求需要自定義圖示及功能；
實現方式：
除了各個內建的工具按鈕外，還可以自定義工具按鈕。echarts官方配置文件中中為
注意，自定義的工具名字，只能以my開頭，例如myTool1，myTool2：
toolbox: {
feature: {
myTool1: {
show: true,
title: '自定義擴充套件方法1',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306- 6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
alert('myToolHandler1')
}
},
myTool2: {
show: true,
title: '自定義擴充套件方法',
icon: 'image://http://echarts.baidu.com/images/favicon.png',
onclick: function (){
alert('myToolHandler2')
}
}
}
}
注意點：icon的設定需要通過'image://url'
dataURI。
（1）、URL 為圖片連結例如：
'image://http://xxx.xxx.xxx/a/b.png'
2）、URL 為dataURI例如：
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
（3）、通過'path://'將圖示設定為任意的向量路徑
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
（4）、注意點：專案本地圖片可以採用
'image:///images/selecticon.png'
如果是url的話，路徑前必須新增上“image://“
4、案例。專案中實現點選自定義圖片實現全選和全部選功能
myTool1: {
show: true,
title: '全選',
icon: 'image:///images/selecticon.png',
onclick: function (){
var flag = $(this).attr('flag');
if(flag == undefined){
flag = 1;
};
if(flag == 1){
var val = false;
$(this).attr('flag',0);
$(this).val('全選中');
}else{
var val = true;
$(this).attr('flag',1);
$(this).val('全不選');
}
var obj = {};
for(var key in arr1){
obj[arr1[key]] = val;
}
option1.legend.selected = obj;
dom1.setOption(option1);
}
}
效果圖：