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
2
Answers
You can create simple squared buttons with text using the icon field by utilizing the ECharts’ text-based icons.
You have 2 simple solutions:
You can use emojis as icon, if you only need square & co this much should be enough: https://emojipedia.org/search?q=square