echarts-for-react工具箱图标设置：如何用KB、MB等文本替代路径

不用外部图片或复杂SVG路径，直接通过内嵌SVG字符串生成带文本的方形按钮，完全满足需求，步骤如下：

1. 封装生成文本按钮SVG的函数 #

写一个简单函数，传入按钮文本（KB/MB/GB），返回包含方形背景+居中文本的SVG字符串，快速生成对应按钮图标：

const createTextIcon = (text) => {
  // SVG尺寸设为20x20保证方形，可按需调整
  return `
    <svg width="20" height="20" viewBox="0 0 20 20">
      <!-- 方形背景，颜色可自定义 -->
      <rect x="0" y="0" width="20" height="20" fill="#fff" stroke="#ccc" rx="2"/>
      <!-- 居中显示文本 -->
      <text x="10" y="13" text-anchor="middle" font-size="12" fill="#333">${text}</text>
    </svg>
  `.replace(/\s+/g, ' ').trim(); // 去除多余空白，避免ECharts解析异常
};

2. 在ECharts配置中添加自定义工具箱 #

在option.toolbox里配置垂直布局，添加三个自定义工具按钮，每个按钮的icon调用上述函数生成对应SVG，同时绑定点击逻辑：

import ReactECharts from 'echarts-for-react';

const MyChart = () => {
  const option = {
    // 其他图表配置...
    toolbox: {
      orient: 'vertical', // 垂直布局
      feature: {
        // KB切换按钮
        kbSwitch: {
          show: true,
          icon: createTextIcon('KB'),
          onclick: () => {
            // 写入KB单位切换逻辑
            console.log('切换至KB单位');
          }
        },
        // MB切换按钮
        mbSwitch: {
          show: true,
          icon: createTextIcon('MB'),
          onclick: () => {
            console.log('切换至MB单位');
          }
        },
        // GB切换按钮
        gbSwitch: {
          show: true,
          icon: createTextIcon('GB'),
          onclick: () => {
            console.log('切换至GB单位');
          }
        }
      }
    }
  };

  return <ReactECharts option={option} />;
};

export default MyChart;

3. 样式调整（可选） #

若需调整按钮大小、间距，可通过toolbox.itemSize设置按钮尺寸，toolbox.itemGap设置垂直间距：

toolbox: {
  orient: 'vertical',
  itemSize: 24, // 调整按钮为24x24方形
  itemGap: 8, // 按钮间垂直间距
  // ...其他配置
}

该方案无需外部资源，通过内嵌SVG直接渲染文本与方形背景，解决SVG路径无法显示文本的问题，配置简单易维护。

内容的提问来源于stack exchange，提问作者Alberto Movio