如何改变echarts toolbox图标大小和颜色 |
您所在的位置：网站首页 › 自定义图标大小怎么改变 › 如何改变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图标大小和颜色的方法了 如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。 我们一起探讨~ |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |