echarts toolbox增加自定义图标

淡淡的烟草味﹌ 2022-05-19 01:35 401阅读 0赞

原文出处：[https://blog.csdn.net/zhenyushao/article/details/67636213][https_blog.csdn.net_zhenyushao_article_details_67636213]

最近做web开发需要用到echarts的东西，其中一个需求是添加一个自定义的图标，点击导出数据，开始查阅echarts的配置文件，发现它是这么介绍的。[echarts配置项链接][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')
                    }
                }
            }
        }
    }

按照myTool2这个配置方案，我开始修改，发现无论我怎么配置icon的url，都不显示icon图标，但将我的配置文件中icon的url换成例子中的url就能成功显示这个图标，但是同样的路径在我的jsp页面的其他位置是可以正常显示的，估计还是echarts自定义图标有特殊格式？有大神知道的话还请不吝赐教。正准备放弃的时候看到还有一个myTool1，但是不知道这一大船的数字是什么鬼，上网查了一下，发现这个是svg的路径坐标，于是我又下载了一个svg格式的图标，编辑器打开之后复制其中的路径坐标，粘贴到icon的path，刷新，果然，一个自定义图标就能显示了。   
![这里写图片描述][SouthEast]   
这里同时介绍一个下载各种图标的网站[阿里巴巴矢量图标库][Link 1]

[https_blog.csdn.net_zhenyushao_article_details_67636213]: https://blog.csdn.net/zhenyushao/article/details/67636213
[echarts]: http://echarts.baidu.com/option.html#toolbox.feature
[SouthEast]: /images/20220519/ce9919b1db21483dbbaad69029b9eb1a.png
[Link 1]: http://www.iconfont.cn/