How to place echart legend icon center of the level

Question

I need echart legend like:

I have tried using this code:

legend: {
    icon: "circle",
    left: 10,
    data: ['Very High', 'Hight', 'Moderate', 'Low'],
    orient: 'vertical',
    formatter: '{name} {icon} {value}',
    textStyle: {
        color: "rgba(255, 255, 255, 0.7)",
    }
}

But it shows like this:

Can any tell me how can I place the left icon center of the text?

Code can be tested here

Answer 1

By the conventional methods, probably, it is impossible.

The legend formatter support only {name}. If I understand correctly, its role just only to show measure units. To my regret the Legend not the most convenient component for customize but Echarts in general allows you to do almost anything within reason.

Usually you have minimum two ways to get what you want:

1. We can disable default component and draw the new from scratch with graphic (example) or create own extension by examples. Alas, it's difficult way if you want to spent time for only the single chart.

2. Another way to stylize visual part of the most suitable component to the desired result. In fact its just imitation by improvised means without implementation. However its fast, easy and it can cover a large number of cases despite some limitations. I sketched a draft that looks like you picture (without design), try to use and customize it.

3. Also we can go beyond the Echarts as a main tool and use HTML + CSS. In this case Echarts acts only as a source of data and events. This option may be the most convenient because build UI with HTML a bit simple and we can use ready-made templates.