Echarts如何进行toolbox自定义扩展方法图标的显示，以及改变图标大小和颜色

2024-06-19 06:55| 来源: 网络整理| 查看: 265

最近使用Echarts发现了自定义拓展方法，无法显示图标的问题，鼠标悬停可以看到文字显示，但是无法看到图标。首先，第一步，设置扩展方法里的图标显示（这里可以用线上或本地的图片，也可以用svg，我用的svg）

myTool1: { show: true, title: '自定义扩展方法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.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 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", onclick: function (){ alert('myToolHandler1') } }, myTool2: { show: true, title: '自定义扩展方法', 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.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 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', onclick: function (){ alert('myToolHandler2') } },

这是完整的svg链接

取path部分就可以

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 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

这是几个高质量的图标资源网站 1、Iconfont-阿里巴巴矢量图标库http://www.iconfont.cn 2、Noun Project 3、Iconninja 4、icons8 5、IconPark 6、Flat Icon 7、Pictogram2

设置图标默认颜色 iconStyle: { borderColor: "#be0000", }//图标默认颜色设置图标选中颜色 emphasis: {//设置图标hover颜色，选中后图标变色 iconStyle: { borderColor: "#2400f1", } }

显示结果在这里插入图片描述

最后是图标大小设置 itemSize: 20 以下是完整代码 var dom = document.getElementById('container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; option = { title: { text: 'Temperature' }, tooltip: { trigger: 'axis' }, legend: {}, toolbox: { show: true, itemSize: 20, iconStyle: {//想全部变色就放在外边，想部分按钮就放在方法里 borderColor: "#be0000", },//图标默认颜色 emphasis: {//设置图标hover颜色，选中后图标变色 iconStyle: { borderColor: "#2400f1", } }, feature: { myTool1: { show: true, title: '自定义扩展方法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.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 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", onclick: function (){ alert('myToolHandler1') } }, myTool2: { show: true, title: '自定义扩展方法', 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.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 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', onclick: function (){ alert('myToolHandler2') } }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] } } }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { name: '1111', type: 'line', data: [1, -2, 2, 5, 3, 2, 0], } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } window.addEventListener('resize', myChart.resize);

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章