Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Using text as a toolbox icon

I’ve been working with echarts-for-react and I’m struggling with a very simple problem

I have a chart, with a toolbox with a few buttons, like this:

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),
          },
        },
      },

My problem is the ‘icon’ field, I don’t want a complicated photo or anything like that, what I want is basically to have a squared button with inside written the title of the button, like KB, MB and so on

I tried a few things, like svg paths, but I can’t get it to work. Any solutions?

P.S.: I would really prefer not importing external images if I can avoid doing so

Tags:

2

Answers


  1. 0

    You can create simple squared buttons with text using the icon field by utilizing the ECharts’ text-based icons.

        icon: {
      type: 'group',
      children: [
        {
          type: 'rect',
          shape: {
            x: 0,
            y: 0,
            width: 20,
            height: 20,
            fill: 'rgba(0, 0, 0, 0.5)',
          },
        },
        {
          type: 'text',
          shape: {
            x: 5,
            y: 13,
            text: 'KB',
            style: {
              fill: 'white',
            },
          },
        },
      ],
    },
    Login or Signup to reply.
  2. 0

    You have 2 simple solutions:

    1. put your SVG path into react components:
    // 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),
  },
  // ...
}
    1. Use emoji as icons

    You can use emojis as icon, if you only need square & co this much should be enough: https://emojipedia.org/search?q=square

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search