使用文本作为工具箱图标

Question

我一直在使用 echarts-for-react，我正在努力解决一个非常简单的问题

我有一个图表，其中有一个带有几个按钮的工具箱，如下所示：

toolbox: [
      {
        orient: 'vertical',
        itemSize: 30,
        left : '6%',
        top: '17%',
        feature: {
          myTool: {
            show: true,
            title: 'KB',
            icon: 'KB',
            onclick: () => this.setUdm(0),
          },
          myTool2: {
            show: true,
            title: 'MB',
            icon: 'path://M0 0 L20 0 L20 20 L0 20 Z M2 2 L18 2 L18 18 L2 18 Z M5 7 L15 7 L15 8 L5 8 Z M5 12 L15 12 L15 13 L5 13 Z',
            onclick: () => this.setUdm(1),
          },
          myTool3: {
            show: true,
            title: 'GB',
            icon: 'path://M0 0 L20 0 L20 20 L0 20 Z M2 2 L18 2 L18 18 L2 18 Z M5 6 L15 6 L15 7 L5 7 Z M5 11 L15 11 L15 12 L5 12 Z M5 16 L15 16 L15 17 L5 17 Z',
            onclick: () => this.setUdm(2),
          },
        },
      },

我的问题是“图标”字段，我不需要复杂的照片或类似的东西，我想要的基本上是一个方形按钮，里面写着按钮的标题，例如KB，MB等

我尝试了一些东西，比如 svg 路径，但我无法让它工作。有什么解决办法吗？

P.S.：如果可以避免的话，我真的不想导入外部图像

Answer 1

您有 2 个简单的解决方案：

1. 将你的SVG路径放入react组件中：

// src/icons/hammer.js
import React from 'react'

export const HammerIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18">
    <path fill="non" d="M0 0 L20 0 L20 20 L0 20 Z M2 2 L18 2 L18 18 L2 18 Z M5 7 L15 7 L15 8 L5 8 Z M5 12 L15 12 L15 13 L5 13 Z" />
  </svg>
);

// your react file
{
  myTool: {
    show: true,
    title: 'KB',
    icon: <ScrewdriverIcon />,
    onclick: () => this.setUdm(0),
  },
  myTool2: {
    show: true,
    title: 'MB',
    icon: <HammerIcon />,
    onclick: () => this.setUdm(1),
  },
  // ...
}

2. 使用表情符号作为图标

你可以使用表情符号作为图标，如果你只需要 square & co 这么多应该足够了：https://emojipedia.org/search?q=square

Answer 2

喜欢这些 unicode 字符吗？

#kb {
  font-size: xx-small
}
#gb {
  font-size: xx-large
}

<button id="kb">㎅</button>
<button id="mb">㎆</button>
<button id="gb">㎇</button>

Answer 3

您可以利用 ECharts 的基于文本的图标，使用图标字段创建带有文本的简单方形按钮。

icon: {
      path: 'M0 0 L30 0 L30 30 L0 30 Z', // SVG path for a square
      style: {
        fill: 'transparent', // Make the square transparent
      },
      rich: {
        a: {
          fontSize: 12,
          fontWeight: 'bold',
          lineHeight: 30,
        },
      },
      text: { content: '{a|KB}', style: { fontSize: 12 } },
    },