Recently, using Echarts, I discovered a problem with the custom expansion method that cannot display the icon. You can see the text display when hovering the mouse, but the icon cannot be seen.
First of all, the first step is to set the icon display in the extension method (you can use online or local pictures here, or you can use svg, I use svg)
myTool1: {<!-- -->
show: true,
\t\t\t\t
title: 'Custom extension method 1',
icon: "M 11.5 1 A 3.5 3.5 0 0 0 8 4.5 A 3.5 3.5 0 0 0 11.5 8 A 3.5 3.5 0 0 0 15 4.5 A 3.5 3.5 0 0 0 11.5 1 z M 7 9 C 5.346 9 4 10.34 6 4 12 L 4 16 L 7.2304688 16 C 8.4124688 19.877 11.497 22 16 22 C 16.96 22 18.361266 21.936531 19.447266 21.394531 L 21.498047 20.369 141 L 19.351562 19.5625 C 16.854563 18.6265 16.220266 17.081 16.072266 16 L 19 16 L 19 12 C 19 10.346 17.654 9 16 9 L 7 9 z ",
onclick: function (){<!-- -->
alert('myToolHandler1')
}
},
myTool2: {<!-- -->
show: true,
title: 'Custom extension method',
icon: 'M 11.5 1 A 3.5 3.5 0 0 0 8 4.5 A 3.5 3.5 0 0 0 11.5 8 A 3.5 3.5 0 0 0 15 4.5 A 3.5 3.5 0 0 0 11.5 1 z M 7 9 C 5.346 9 4 10.34 6 4 12 L 4 16 L 7.2304688 16 C 8.4124688 19.877 11.497 22 16 22 C 16.96 22 18.361266 21.936531 19.447266 21.394531 L 21.498047 20.369 141 L 19.351562 19.5625 C 16.854563 18.6265 16.220266 17.081 16.072266 16 L 19 16 L 19 12 C 19 10.346 17.654 9 16 9 L 7 9 z ',
onclick: function (){<!-- -->
alert('myToolHandler2')
}
},
Here is the full svg link
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100 " viewBox="0 0 24 24">
<path d="M 11.5 1 A 3.5 3.5 0 0 0 8 4.5 A 3.5 3.5 0 0 0 11.5 8 A 3.5 3.5 0 0 0 15 4.5 A 3.5 3.5 0 0 0 11.5 1 z M 7 9 C 5.346 9 4 10 .346 4 12 L 4 16 L 7.2304688 16 C 8.4124688 19.877 11.497 22 16 22 C 16.96 22 18.361266 21.936531 19.447266 21.394531 L 21.498047 2 0.369141 L 19.351562 19.5625 C 16.854563 18.6265 16.220266 17.081 16.072266 16 L 19 16 L 19 12 C 19 10.346 17.654 9 16 9 L 7 9 z"></path>
</svg>
Just take the path part
M 11.5 1 A 3.5 3.5 0 0 0 8 4.5 A 3.5 3.5 0 0 0 11.5 8 A 3.5 3.5 0 0 0 15 4.5 A 3.5 3.5 0 0 0 11.5 1 z M 7 9 C 5.346 9 4 10.346 4 12L 4 16L 7.2304688 16 C 8.4124688 19.877 11.497 22 16 22 C 16.96 22 18.361266 21.936531 19.447266 21.394531 L 21.498047 20.369141 L 19 .351562 19.5625 C 16.854563 18.6265 16.220266 17.081 16.072266 16 L 19 16 L 19 12 C 19 10.346 17.654 9 16 9 L 7 9 z
Here are several high-quality icon resource websites
1. Iconfont-Alibaba vector icon library http://www.iconfont.cn
2.Noun Project
3.Iconninja
4.icons8
5.Icon Park
6.Flat icon
7. Pictogram2
Set icon default color
iconStyle: {<!-- -->
borderColor: "#be0000",
}//Icon default color
Set icon selection color
emphasis: {<!-- -->//Set the icon hover color. The icon will change color after selection.
iconStyle: {<!-- -->
borderColor: "#2400f1",
}
}
Show results
Finally is the icon size setting
itemSize: 20