如何改变echarts toolbox图标大小和颜色

最近在忙平台的二期项目，遇到了一个需求。大概是这样的：在echarts图表的右上角加一个自定义的图标，用户点击可以下载相关的数据。

这样的搜索结果还是挺多的，我就找了一个阅读量比较多的来试了。
这是原创作者的文章，分享给大家：
https://blog.csdn.net/jonathan_joestar/article/details/119935210

首先第一步（这里可以用线上或本地的图片，也可以用svg）

添加自定义图标

toolbox: {
          top: "top",
          right: "5%",
          feature: {
            /**自定义的工具栏 */
            myTool1: {
              show: true,
              title: "下载数据",
              icon: "path://M653.6 770.4L517.8 926.2c-1.6 1.6-4.1 1.6-5.7 0L376.4 770.4l-0.4-0.4c-1.6-2.1 0.1-5.2 2.8-5.2H495V476c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v288.7h116.1c2.7 0 4.5 3.1 2.8 5.2-0.1 0.2-0.2 0.4-0.3 0.5z,M907.5 434c-36-42.8-84.9-72.9-138.9-85.8-11-56.4-40.5-107.9-84.1-146.2-47.6-41.8-108.8-64.8-172.2-64.8-63.6 0-124.9 23.2-172.6 65.2-43.7 38.6-73.2 90.4-84 147.2-52.6 13.9-100.2 44.3-135 86.6-38.4 46.6-59.5 105.5-59.5 166 0 69.8 27.2 135.4 76.5 184.7 35.5 35.5 79.4 59.5 127.2 70.2 12.4 2.8 24.2-6.7 24.2-19.5v-0.2c0-9.4-6.6-17.4-15.7-19.5-98.5-22.3-172.3-110.6-172.3-215.7 0-104.4 74.1-195.5 176.2-216.6l13.9-2.9 1.9-14.1C307.7 259.4 402 177.1 512.3 177.1c109.8 0 204 81.9 219 190.5l2 14.3 14.2 2.6c105.1 19.1 181.3 110.6 181.3 217.6 0 106.3-75.4 195.3-175.5 216.4-9.3 2-16 10.1-16 19.5v0.2c0 12.6 11.6 22.1 24 19.5 49.3-10.2 94.6-34.6 131-71 49.3-49.3 76.5-114.9 76.5-184.7 0.1-61.3-21.8-121-61.3-168z", //可以复制阿里矢量图标的svg代码，path多个值用“，”隔开
              onclick: function () {
                alert(123);
              },
            },
          },
        }

我这里是用的自己找的阿里矢量图，然后点击的时候让它弹出个123

第二步，设置图标颜色

这是设置图标默认颜色

iconStyle: {
            borderColor: "#5ABE64",
          },

这是设置图标hover颜色

emphasis: {
            iconStyle: {
              borderColor: "#54C3F1",
            },
          },

注：以上两个设置都要加在toolbox里面，与top和right平级

最后一步，设置图标大小

itemSize: 20,

这一步放置的位置与第二步一样

全部代码

toolbox: {
          top: "top",
          right: "5%",
          iconStyle: {
            borderColor: "#5ABE64",  // 图标默认颜色
          },
          emphasis: {
            iconStyle: {
              borderColor: "#54C3F1",  // 图标hover颜色
            },
          },
          itemSize: 20, // 设置图标大小
          feature: {
            /**自定义的工具栏 */
            myTool1: {
              show: true,
              title: "下载该类数据",   // 图标hover 显示文字
              icon: "path://M653.6 770.4L517.8 926.2c-1.6 1.6-4.1 1.6-5.7 0L376.4 770.4l-0.4-0.4c-1.6-2.1 0.1-5.2 2.8-5.2H495V476c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v288.7h116.1c2.7 0 4.5 3.1 2.8 5.2-0.1 0.2-0.2 0.4-0.3 0.5z,M907.5 434c-36-42.8-84.9-72.9-138.9-85.8-11-56.4-40.5-107.9-84.1-146.2-47.6-41.8-108.8-64.8-172.2-64.8-63.6 0-124.9 23.2-172.6 65.2-43.7 38.6-73.2 90.4-84 147.2-52.6 13.9-100.2 44.3-135 86.6-38.4 46.6-59.5 105.5-59.5 166 0 69.8 27.2 135.4 76.5 184.7 35.5 35.5 79.4 59.5 127.2 70.2 12.4 2.8 24.2-6.7 24.2-19.5v-0.2c0-9.4-6.6-17.4-15.7-19.5-98.5-22.3-172.3-110.6-172.3-215.7 0-104.4 74.1-195.5 176.2-216.6l13.9-2.9 1.9-14.1C307.7 259.4 402 177.1 512.3 177.1c109.8 0 204 81.9 219 190.5l2 14.3 14.2 2.6c105.1 19.1 181.3 110.6 181.3 217.6 0 106.3-75.4 195.3-175.5 216.4-9.3 2-16 10.1-16 19.5v0.2c0 12.6 11.6 22.1 24 19.5 49.3-10.2 94.6-34.6 131-71 49.3-49.3 76.5-114.9 76.5-184.7 0.1-61.3-21.8-121-61.3-168z", //可以复制阿里矢量图标的svg代码，path多个值用“，”隔开
              onclick: function () {  // 图标点击事件
                alert(123);
              },
            },
          },
        }

以上就是如何改变echarts toolbox图标大小和颜色的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~