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

最新推荐文章于 2024-04-14 15:38:03 发布

梓鱼

最新推荐文章于 2024-04-14 15:38:03 发布

阅读量1.3k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_53414331/article/details/133071921

版权

最近使用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链接

<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 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"></path>
</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

以下是完整代码


<!DOCTYPE html>
<html  style="height: 100%">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script type="text/javascript">
    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);
  </script>
</body>
</html>

梓鱼

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Echarts如何进行toolbox自定义扩展方法图标的显示，以及改变图标大小和颜色

最近使用Echarts发现了自定义拓展方法，无法显示图标的问题，鼠标悬停可以看到文字显示，但是无法看到图标。首先，第一步，设置扩展方法里的图标显示（这里可以用线上或本地的图片，也可以用svg，我用的svg）这是完整的svg链接取path部分就可以这是几个高质量的图标资源网站1、Iconfont-阿里巴巴矢量图标库http://www.iconfont.cn2、Noun Project3、Iconninja4、icons85、IconPark6、Flat Icon7、Pictogram2
复制链接

扫一扫